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

packages/datetime/src/common/dateRangeSelectionStrategy.ts

@@ -23,7 +23,7 @@ export interface DateRangeSelectionState {
     /**
      * The boundary that would be modified by clicking the provided `day`.
      */
-    boundary?: Boundary;
+    boundary: Boundary;
 
     /**
      * The date range that would be selected after clicking the provided `day`.
@@ -124,11 +124,13 @@ export class DateRangeSelectionStrategy {
         const [start, end] = selectedRange;
 
         let nextDateRange: DateRange;
+        let nextBoundary: Boundary = Boundary.START;
 
         if (start == null && end == null) {
             nextDateRange = [day, null];
         } else if (start != null && end == null) {
             nextDateRange = this.createRange(day, start, allowSingleDayRange);
+            nextBoundary = Boundary.END;
         } else if (start == null && end != null) {
             nextDateRange = this.createRange(day, end, allowSingleDayRange);
         } else {
@@ -140,12 +142,13 @@ export class DateRangeSelectionStrategy {
                 nextDateRange = [null, end];
             } else if (isEnd) {
                 nextDateRange = [start, null];
+                nextBoundary = Boundary.END;
             } else {
                 nextDateRange = [day, null];
             }
         }
 
-        return { dateRange: nextDateRange };
+        return { dateRange: nextDateRange, boundary: nextBoundary };
     }
 
     private static getOtherBoundary(boundary: Boundary) {

packages/datetime/src/common/index.ts

@@ -16,10 +16,12 @@
 
 import * as Classes from "./classes";
 import * as DateUtils from "./dateUtils";
+import * as Errors from "./errors";
+import * as TimezoneNameUtils from "./timezoneNameUtils";
 import type { TimezoneWithNames } from "./timezoneTypes";
 import * as TimezoneUtils from "./timezoneUtils";
 
-export { Classes, DateUtils, TimezoneUtils, TimezoneWithNames };
+export { Classes, DateUtils, Errors, TimezoneNameUtils, TimezoneUtils, TimezoneWithNames };
 
 export { DatePickerBaseProps, DatePickerModifiers } from "./datePickerBaseProps";
 export { DateFormatProps } from "./dateFormatProps";

packages/datetime/src/common/monthAndYear.ts

@@ -17,7 +17,7 @@
 import { getDateNextMonth, getDatePreviousMonth } from "./dateUtils";
 
 export class MonthAndYear {
-    public static fromDate(date: Date) {
+    public static fromDate(date: Date | null) {
         return date == null ? undefined : new MonthAndYear(date.getMonth(), date.getFullYear());
     }
 

packages/datetime/src/common/timezoneUtils.ts

@@ -21,7 +21,7 @@ import { getCurrentTimezone } from "./getTimezone";
 import { TimePrecision } from "./timePickerProps";
 import { UTC_TIME } from "./timezoneItems";
 
-export { getCurrentTimezone };
+export { getCurrentTimezone, UTC_TIME };
 
 const NO_TIME_PRECISION = "date";
 

packages/datetime/src/components/date-picker/datePicker.tsx

@@ -22,7 +22,7 @@ import { AbstractPureComponent, Button, DISPLAYNAME_PREFIX, Divider, Props } fro
 
 import { Classes, DatePickerBaseProps, DateUtils } from "../../common";
 import * as Errors from "../../common/errors";
-import { DatePickerShortcut, DateRangeShortcut, Shortcuts } from "../shortcuts/shortcuts";
+import { DatePickerShortcut, DateRangeShortcut, DatePickerShortcutMenu } from "../shortcuts/shortcuts";
 import { TimePicker } from "../time-picker/timePicker";
 import { DatePickerCaption } from "./datePickerCaption";
 import { getDefaultMaxDate, getDefaultMinDate } from "./datePickerCore";
@@ -325,7 +325,7 @@ export class DatePicker extends AbstractPureComponent<DatePickerProps, DatePicke
                       dateRange: [shortcut.date, undefined],
                   }));
         return [
-            <Shortcuts
+            <DatePickerShortcutMenu
                 key="shortcuts"
                 {...{
                     allowSingleDayRange: true,

packages/datetime/src/components/date-picker/datePickerUtils.ts

@@ -15,6 +15,7 @@
  */
 
 import { getFormattedDateString } from "../../common/dateFormatProps";
+import { measureTextWidth } from "../../common/utils";
 import { getDefaultMaxDate, getDefaultMinDate } from "./datePickerCore";
 
 /**
@@ -25,4 +26,5 @@ export const DatePickerUtils = {
     getDefaultMaxDate,
     getDefaultMinDate,
     getFormattedDateString,
+    measureTextWidth,
 };

packages/datetime/src/components/date-range-picker/dateRangePicker.tsx

@@ -33,7 +33,7 @@ import {
     SELECTED_RANGE_MODIFIER,
 } from "../date-picker/datePickerCore";
 import { DatePickerNavbar } from "../date-picker/datePickerNavbar";
-import { DateRangeShortcut, Shortcuts } from "../shortcuts/shortcuts";
+import { DateRangeShortcut, DatePickerShortcutMenu } from "../shortcuts/shortcuts";
 import { TimePicker } from "../time-picker/timePicker";
 
 export interface DateRangePickerProps extends DatePickerBaseProps, Props {
@@ -81,7 +81,11 @@ export interface DateRangePickerProps extends DatePickerBaseProps, Props {
      * When triggered from mouseenter, it will pass the date range that would result from next click.
      * When triggered from mouseleave, it will pass `undefined`.
      */
-    onHoverChange?: (hoveredDates: DateRange, hoveredDay: Date, hoveredBoundary: Boundary) => void;
+    onHoverChange?: (
+        hoveredDates: DateRange | undefined,
+        hoveredDay: Date,
+        hoveredBoundary: Boundary | undefined,
+    ) => void;
 
     /**
      * Called when the `shortcuts` props is enabled and the user changes the shortcut.
@@ -330,7 +334,7 @@ export class DateRangePicker extends AbstractPureComponent<DateRangePickerProps,
         const { selectedShortcutIndex } = this.state;
         const { allowSingleDayRange, maxDate, minDate, timePrecision } = this.props;
         return [
-            <Shortcuts
+            <DatePickerShortcutMenu
                 key="shortcuts"
                 {...{
                     allowSingleDayRange,

packages/datetime/src/components/shortcuts/shortcuts.tsx

@@ -52,7 +52,7 @@ export interface DatePickerShortcut extends DateShortcutBase {
     date: Date;
 }
 
-export interface ShortcutsProps {
+export interface DatePickerShortcutMenuProps {
     allowSingleDayRange: boolean;
     minDate: Date;
     maxDate: Date;
@@ -69,8 +69,8 @@ export interface ShortcutsProps {
     useSingleDateShortcuts?: boolean;
 }
 
-export class Shortcuts extends React.PureComponent<ShortcutsProps> {
-    public static defaultProps: Partial<ShortcutsProps> = {
+export class DatePickerShortcutMenu extends React.PureComponent<DatePickerShortcutMenuProps> {
+    public static defaultProps: Partial<DatePickerShortcutMenuProps> = {
         selectedShortcutIndex: -1,
     };
 

packages/datetime/src/index.ts

@@ -23,6 +23,8 @@ type DatePickerLocaleUtils = typeof LocaleUtils;
 export { DatePickerLocaleUtils, DatePickerDayModifiers };
 
 export { DateFormatProps } from "./common/dateFormatProps";
+export { DateRangeSelectionStrategy, DateRangeSelectionState } from "./common/dateRangeSelectionStrategy";
+export { MonthAndYear } from "./common/monthAndYear";
 export { TimePickerProps, TimePrecision } from "./common/timePickerProps";
 
 export { DateInput, DateInputProps } from "./components/date-input/dateInput";
@@ -32,5 +34,10 @@ export { DatePickerBaseProps, DatePickerModifiers } from "./common/datePickerBas
 export { DateRangeInput, DateRangeInputProps } from "./components/date-range-input/dateRangeInput";
 export { DateRangePicker, DateRangePickerProps } from "./components/date-range-picker/dateRangePicker";
 export { TimePicker } from "./components/time-picker/timePicker";
-export { DatePickerShortcut, DateRangeShortcut } from "./components/shortcuts/shortcuts";
+export {
+    DatePickerShortcut,
+    DatePickerShortcutMenu,
+    DatePickerShortcutMenuProps,
+    DateRangeShortcut,
+} from "./components/shortcuts/shortcuts";
 export { TimezoneSelect, TimezoneSelectProps } from "./components/timezone-select/timezoneSelect";

packages/datetime2/src/blueprint-datetime2.scss

@@ -2,4 +2,6 @@
 // Licensed under the Apache License, Version 2.0.
 
 @import "common/react-day-picker-overrides";
+@import "components/date-picker3/date-picker3-caption";
 @import "components/date-picker3/date-picker3";
+@import "components/date-range-picker3/date-range-picker3";

packages/datetime2/src/classes.ts

@@ -19,17 +19,31 @@ import { Classes as DatetimeClasses } from "@blueprintjs/datetime";
 const RDP_DAY = "rdp-day";
 const DATEPICKER_NAV_BUTTON = `${DatetimeClasses.DATEPICKER}-nav-button`;
 
-export const Classes = {
-    ...DatetimeClasses,
+const DatePicker3Classes = {
     // 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_DROPDOWN_CONTAINER: `${DatetimeClasses.DATEPICKER}-dropdown-container`,
     DATEPICKER_HIGHLIGHT_CURRENT_DAY: `${DatetimeClasses.DATEPICKER}-highlight-current-day`,
     DATEPICKER_NAV_BUTTON,
+    DATEPICKER_NAV_BUTTON_HIDDEN: `${DATEPICKER_NAV_BUTTON}-hidden`,
     DATEPICKER_NAV_BUTTON_NEXT: `${DATEPICKER_NAV_BUTTON}-next`,
     DATEPICKER_NAV_BUTTON_PREVIOUS: `${DATEPICKER_NAV_BUTTON}-previous`,
 };
+
+const DateRangePicker3Classes = {
+    DATERANGEPICKER_REVERSE_MONTH_AND_YEAR: `${DatetimeClasses.DATERANGEPICKER}-reverse-month-and-year`,
+    DATERANGEPICKER3_DAY_HOVERED_RANGE: `${RDP_DAY}_hovered`,
+    DATERANGEPICKER3_DAY_HOVERED_RANGE_END: `${RDP_DAY}_hovered_end`,
+    DATERANGEPICKER3_DAY_HOVERED_RANGE_START: `${RDP_DAY}_hovered_start`,
+};
+
+export const Classes = {
+    ...DatetimeClasses,
+    ...DatePicker3Classes,
+    ...DateRangePicker3Classes,
+};

packages/datetime2/src/common/dateFnsLocaleProps.ts

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+export interface DateFnsLocaleProps {
+    /**
+     * date-fns locale code ((ISO 639-1 + optional country code) used to localize the date picker.
+     *
+     * If you are unable to load a specific locale, make sure it is included in the list of date-fns'
+     * [supported locales](https://github.com/date-fns/date-fns/tree/main/src/locale).
+     *
+     * @default "en-US"
+     * @see https://date-fns.org/docs/Locale
+     */
+    locale?: string;
+}

packages/datetime2/src/common/dateFnsLocaleUtils.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 type { Locale } from "date-fns";
+
+import { Utils } from "@blueprintjs/core";
+
+export async function loadDateFnsLocale(localeCode: string): Promise<Locale | undefined> {
+    try {
+        const { default: locale } = await import(`date-fns/esm/locale/${localeCode}/index.js`);
+        return locale;
+    } catch {
+        if (!Utils.isNodeEnv("production")) {
+            console.error(
+                `[Blueprint] Could not load "${localeCode}" date-fns locale, please check that this locale code is supported: https://github.com/date-fns/date-fns/tree/main/src/locale`,
+            );
+        }
+        return undefined;
+    }
+}

packages/datetime2/src/common/dayPickerModifiers.ts

@@ -0,0 +1,47 @@
+/*
+ * 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 { DayModifiers } from "react-day-picker";
+
+export const DISABLED_MODIFIER = "disabled";
+export const HOVERED_RANGE_MODIFIER = "hovered-range";
+export const OUTSIDE_MODIFIER = "outside";
+export const SELECTED_MODIFIER = "selected";
+export const SELECTED_RANGE_MODIFIER = "selected-range";
+// modifiers the user can't set because they are used by Blueprint or react-day-picker
+export const DISALLOWED_MODIFIERS = [
+    DISABLED_MODIFIER,
+    HOVERED_RANGE_MODIFIER,
+    OUTSIDE_MODIFIER,
+    SELECTED_MODIFIER,
+    SELECTED_RANGE_MODIFIER,
+];
+
+export function combineModifiers(baseModifiers: DayModifiers, userModifiers: DayModifiers | undefined): DayModifiers {
+    let modifiers = baseModifiers;
+    if (userModifiers !== undefined) {
+        modifiers = {};
+        for (const key of Object.keys(userModifiers)) {
+            if (DISALLOWED_MODIFIERS.indexOf(key) === -1) {
+                modifiers[key] = userModifiers[key];
+            }
+        }
+        for (const key of Object.keys(baseModifiers)) {
+            modifiers[key] = baseModifiers[key];
+        }
+    }
+    return modifiers;
+}

packages/datetime2/src/common/reactDayPickerUtils.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 type { DateRange as RDPRange } from "react-day-picker";
+
+import type { DateRange } from "@blueprintjs/datetime";
+
+/**
+ * Converts a Blueprint `DateRange` to a react-day-picker `DateRange`.
+ */
+export function dateRangeToDayPickerRange(range: DateRange): RDPRange {
+    return { from: range[0] ?? undefined, to: range[1] ?? undefined };
+}

packages/datetime2/src/common/useMonthSelectRightOffset.ts

@@ -0,0 +1,46 @@
+/*
+ * 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 * as React from "react";
+
+import { Classes, DatePickerUtils } from "@blueprintjs/datetime";
+import { IconSize } from "@blueprintjs/icons";
+
+export function useMonthSelectRightOffset(
+    monthSelectElement: React.RefObject<HTMLSelectElement>,
+    containerElement: React.RefObject<HTMLElement>,
+    displayedMonthText: string,
+): number {
+    const [monthRightOffset, setMonthRightOffset] = React.useState<number>(0);
+
+    React.useLayoutEffect(() => {
+        if (containerElement.current == null) {
+            return;
+        }
+
+        // measure width of text as rendered inside our container element.
+        const monthTextWidth = DatePickerUtils.measureTextWidth(
+            displayedMonthText,
+            Classes.DATEPICKER_CAPTION_MEASURE,
+            containerElement.current,
+        );
+        const monthSelectWidth = monthSelectElement.current?.clientWidth ?? 0;
+        const rightOffset = Math.max(2, monthSelectWidth - monthTextWidth - IconSize.STANDARD - 2);
+        setMonthRightOffset(rightOffset);
+    }, [containerElement, displayedMonthText, monthSelectElement]);
+
+    return monthRightOffset;
+}