[datetime2] feat: DatePicker3 using react-day-picker v8

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

@@ -24,7 +24,7 @@ import sinon from "sinon";
 import { Classes as CoreClasses, Intent } from "@blueprintjs/core";
 
 import { Classes, TimePicker, TimePickerProps, TimePrecision } from "../../src";
-import { assertTimeIs, createTimeObject } from "../common/dateTestUtils";
+import { assertTimeIs, createTimeObject } from "../common/dayPickerTestUtils";
 
 describe("<TimePicker>", () => {
     let testsContainerElement: Element;

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": "7.4.9 || ^8.5.1",
         "tslib": "~2.5.0"
     },
     "peerDependencies": {
@@ -62,6 +65,7 @@
         "mocha": "^10.2.0",
         "npm-run-all": "^4.1.5",
         "react": "^16.14.0",
+        "react-day-picker": "^8.5.1",
         "react-dom": "^16.14.0",
         "typescript": "~4.9.5",
         "webpack-cli": "^5.0.1"

packages/datetime2/src/_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;
+}

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 "react-day-picker-overrides";
+@import "components/date-picker2/date-picker2";

packages/datetime2/src/classes.ts

@@ -0,0 +1,33 @@
+/*
+ * 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,
+    DATEPICKER_DAY: RDP_DAY,
+    DATEPICKER_DAY_DISABLED: `${RDP_DAY}_disabled`,
+    DATEPICKER_DAY_IS_TODAY: `${RDP_DAY}_today`,
+    DATEPICKER_DAY_OUTSIDE: `${RDP_DAY}_outside`,
+    DATEPICKER_DAY_SELECTED: `${RDP_DAY}_selected`,
+    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`,
+};