[datetime2] feat: DatePicker3 using react-day-picker v8 (#5935)

packages/datetime/test/common/dateUtilsTests.tsx

@@ -16,10 +16,11 @@
 
 import { expect } from "chai";
 
+import { assertTimeIs, createTimeObject } from "@blueprintjs/test-commons";
+
 import { DateRange } from "../../src/";
 import * as DateUtils from "../../src/common/dateUtils";
 import { Months } from "../../src/common/months";
-import { assertTimeIs, createTimeObject } from "./dateTestUtils";
 
 describe("DateUtils", () => {
     it("isSameTime", () => {

packages/datetime/test/common/dayPickerTestUtils.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** @fileoverview test utils for react-day-picker v7 */
+
+import { assert } from "chai";
+import { ReactWrapper } from "enzyme";
+
+import { Classes } from "../../src/common";
+
+const isDayHidden = (day: ReactWrapper<any, any>): boolean =>
+    day.prop("empty") && !day.prop("ariaSelected") && day.prop("ariaDisabled");
+
+export function assertDayDisabled(day: ReactWrapper<any, any>, expectDisabled: boolean = true) {
+    assert.equal(day.hasClass(Classes.DATEPICKER_DAY_DISABLED), expectDisabled);
+}
+
+export function assertDayHidden(day: ReactWrapper<any, any>, expectHidden: boolean = true) {
+    assert.equal(isDayHidden(day), expectHidden);
+}

packages/datetime/test/components/datePickerTests.tsx

@@ -21,13 +21,14 @@ import ReactDayPicker from "react-day-picker";
 import sinon from "sinon";
 
 import { Button, Classes as CoreClasses, HTMLSelect, Menu, MenuItem } from "@blueprintjs/core";
+import { assertDatesEqual } from "@blueprintjs/test-commons";
 
 import { Classes, DatePicker, DatePickerModifiers, DatePickerProps, TimePicker, TimePrecision } from "../../src";
 import { DateUtils, Months } from "../../src/common";
 import * as Errors from "../../src/common/errors";
 import { DatePickerState } from "../../src/components/date-picker/datePicker";
 import { DatePickerShortcut, Shortcuts } from "../../src/components/shortcuts/shortcuts";
-import { assertDatesEqual, assertDayDisabled, assertDayHidden } from "../common/dateTestUtils";
+import { assertDayDisabled, assertDayHidden } from "../common/dayPickerTestUtils";
 
 describe("<DatePicker>", () => {
     it(`renders .${Classes.DATEPICKER}`, () => {

packages/datetime/test/components/dateRangePickerTests.tsx

@@ -37,7 +37,7 @@ import { Months } from "../../src/common/months";
 import { DatePickerNavbar } from "../../src/components/date-picker/datePickerNavbar";
 import { DateRangePickerState } from "../../src/components/date-range-picker/dateRangePicker";
 import { DateRangeShortcut, Shortcuts } from "../../src/components/shortcuts/shortcuts";
-import { assertDayDisabled } from "../common/dateTestUtils";
+import { assertDayDisabled } from "../common/dayPickerTestUtils";
 
 describe("<DateRangePicker>", () => {
     let onChangeSpy: sinon.SinonSpy;

packages/datetime/test/components/timePickerTests.tsx

@@ -22,9 +22,9 @@ import * as TestUtils from "react-dom/test-utils";
 import sinon from "sinon";
 
 import { Classes as CoreClasses, Intent } from "@blueprintjs/core";
+import { assertTimeIs, createTimeObject } from "@blueprintjs/test-commons";
 
 import { Classes, TimePicker, TimePickerProps, TimePrecision } from "../../src";
-import { assertTimeIs, createTimeObject } from "../common/dateTestUtils";
 
 describe("<TimePicker>", () => {
     let testsContainerElement: Element;

packages/datetime2/README.md

@@ -4,15 +4,18 @@
 
 Blueprint is a React UI toolkit for the web.
 
-This package contains re-exports of components from @blueprintjs/datetime2. These "V2" components were
-previously available in @blueprintjs/datetime2 v4.x, but they were promoted to the standard "V1" components in
-@blueprintjs/datetime v5.x.
-
-Once you upgrade to Blueprint v5.0, you should migrate your imports to the @blueprintjs/datetime package.
+This package contains re-exports of some components from @blueprintjs/datetime v5.x. These "V2" APIs are backwards-compatible with @blueprintjs/datetime2 v0.x. Once you upgrade to Blueprint v5.0, you should migrate your
+imports to reference @blueprintjs/datetime instead:
 
 ```diff
 - import { DateInput2 } from "@blueprintjs/datetime2";
 + import { DateInput } from "@blueprintjs/datetime";
 ```
 
+This package also contains next-generation "V3" components which support react-day-picker v8. This means that
+installing @blueprintjs/datetime2 will install multiple versions of react-day-picker (v7.x via @blueprintjs/datetime
+and v8.x as a direct dependency). Note that these two copies of react-day-picker can happily exist together in a single
+JS bundle, and with the help of tree-shaking, you can avoid bundling both if you _only_ use the deprecated "V1" / "V2"
+datetime components or _only_ use the new "V3" APIs.
+
 ### [Full Documentation](http://blueprintjs.com/docs) | [Source Code](https://github.com/palantir/blueprint)

packages/datetime2/package.json

@@ -38,7 +38,10 @@
     "dependencies": {
         "@blueprintjs/core": "^5.3.0",
         "@blueprintjs/datetime": "^5.0.10",
+        "@blueprintjs/icons": "^5.1.6",
+        "classnames": "^2.3.1",
         "date-fns": "^2.28.0",
+        "react-day-picker": "^8.5.1",
         "tslib": "~2.5.0"
     },
     "peerDependencies": {

packages/datetime2/src/blueprint-datetime2.scss

@@ -1,4 +1,5 @@
 // Copyright 2022 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
-// This file intentionaly left blank
+@import "common/react-day-picker-overrides";
+@import "components/date-picker3/date-picker3";

packages/datetime2/src/classes.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2023 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Classes as DatetimeClasses } from "@blueprintjs/datetime";
+
+const RDP_DAY = "rdp-day";
+const DATEPICKER_NAV_BUTTON = `${DatetimeClasses.DATEPICKER}-nav-button`;
+
+export const Classes = {
+    ...DatetimeClasses,
+    // these classes need the "3" suffix because they overlap with DatePicker v1 / react-day-picker v7 classes
+    DATEPICKER3_DAY: RDP_DAY,
+    DATEPICKER3_DAY_DISABLED: `${RDP_DAY}_disabled`,
+    DATEPICKER3_DAY_IS_TODAY: `${RDP_DAY}_today`,
+    DATEPICKER3_DAY_OUTSIDE: `${RDP_DAY}_outside`,
+    DATEPICKER3_DAY_SELECTED: `${RDP_DAY}_selected`,
+    // these classes intentionally left without "3" suffix because they do not overlap with DatePicker v1, and this way we don't need to migrate them later, which reduces code churn
+    DATEPICKER_HIGHLIGHT_CURRENT_DAY: `${DatetimeClasses.DATEPICKER}-highlight-current-day`,
+    DATEPICKER_NAV_BUTTON,
+    DATEPICKER_NAV_BUTTON_NEXT: `${DATEPICKER_NAV_BUTTON}-next`,
+    DATEPICKER_NAV_BUTTON_PREVIOUS: `${DATEPICKER_NAV_BUTTON}-previous`,
+};

packages/datetime2/src/common/_react-day-picker-overrides.scss

@@ -0,0 +1,26 @@
+// Copyright 2023 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "@blueprintjs/colors/lib/scss/colors";
+@import "@blueprintjs/core/src/common/variables";
+
+// omit file extension, otherwise this will emit a `@import url()` rule
+@import "react-day-picker/dist/style";
+
+.#{$ns}-datepicker-content .rdp {
+  --rdp-cell-size: #{$pt-grid-size * 3};
+  --rdp-accent-color: #{$blue3};
+  --rdp-background-color: #{$white};
+
+  /* Switch to dark colors for dark themes */
+  --rdp-accent-color-dark: #{$blue2};
+  --rdp-background-color-dark: #{$dark-gray3};
+
+  /* Outline border for focused elements */
+  --rdp-outline: 2px solid var(--rdp-accent-color);
+
+  /* Outline border for focused and selected elements */
+  --rdp-outline-selected: 2px solid rgba(0, 0, 0, 75%);
+
+  margin: 0;
+}