Various fixes / improvements for datetime2

packages/datetime2/src/common/classes.ts

@@ -22,4 +22,3 @@ export const DATE_INPUT_TIMEZONE_SELECT = `${NS}-date-input-timezone-select`;
 
 export const TIMEZONE_SELECT = `${NS}-timezone-select`;
 export const TIMEZONE_SELECT_POPOVER = `${TIMEZONE_SELECT}-popover`;
-export const TIMEZONE_SELECT_TARGET = `${TIMEZONE_SELECT}-target`;

packages/datetime2/src/components/date-input2/dateInput2.tsx

@@ -38,13 +38,15 @@ export interface DateInput2Props extends Omit<DateInputProps, "onChange" | "valu
     value: string | null;
 
     /**
-     * Whether to completely hide timezone elements.
-     * If `timePrecision` is undefined, this will always be true.
+     * Whether to show the timezone select dropdown on the right side of the input.
+     * If `timePrecision` is undefined, this will always be false.
+     *
+     * @default false
      */
-    hideTimezone?: boolean;
+    showTimezoneSelect?: boolean;
 
     /**
-     * Whether to disable the timezone picker.
+     * Whether to disable the timezone select.
      *
      * @default false
      */
@@ -60,23 +62,23 @@ const timezoneSelectButtonProps: Partial<ButtonProps> = {
 export const DateInput2: React.FC<DateInput2Props> = React.memo(function _DateInput2(props) {
     const {
         defaultTimezone,
-        value,
+        disabled,
+        disableTimezoneSelect,
         onChange,
+        showTimezoneSelect,
         timePrecision,
-        disableTimezoneSelect,
-        hideTimezone: hideTimezoneProp,
-        disabled,
-        ...passThroughToDateInputProps
+        value,
+        ...dateInputProps
     } = props;
 
     const [timezoneValue, updateTimezoneValue] = React.useState(defaultTimezone ?? getCurrentTimezone());
-    const hideTimezone = timePrecision === undefined ? true : hideTimezoneProp;
     const dateValue = React.useMemo(() => getDateObjectFromIsoString(value, timezoneValue), [timezoneValue, value]);
 
     const handleTimezoneChange = React.useCallback(
         (newTimezone: string) => {
             if (dateValue != null) {
-                onChange?.(getIsoEquivalentWithUpdatedTimezone(dateValue, newTimezone, timePrecision));
+                const newDateString = getIsoEquivalentWithUpdatedTimezone(dateValue, newTimezone, timePrecision);
+                onChange?.(newDateString);
             }
             updateTimezoneValue(newTimezone);
         },
@@ -88,7 +90,8 @@ export const DateInput2: React.FC<DateInput2Props> = React.memo(function _DateIn
             if (newDate == null) {
                 return;
             }
-            onChange?.(getIsoEquivalentWithUpdatedTimezone(newDate, timezoneValue, timePrecision), isUserChange);
+            const newDateString = getIsoEquivalentWithUpdatedTimezone(newDate, timezoneValue, timePrecision);
+            onChange?.(newDateString, isUserChange);
         },
         [onChange, timezoneValue, timePrecision],
     );
@@ -103,9 +106,10 @@ export const DateInput2: React.FC<DateInput2Props> = React.memo(function _DateIn
         [timezoneValue, dateValue],
     );
 
+    const isTimezoneSelectHidden = timePrecision === undefined || showTimezoneSelect === false;
     const isTimezoneSelectDisabled = disabled || disableTimezoneSelect;
 
-    const maybeTimezonePicker = hideTimezone ? undefined : (
+    const maybeTimezonePicker = isTimezoneSelectHidden ? undefined : (
         <TimezoneSelect
             value={timezoneValue}
             onChange={handleTimezoneChange}
@@ -126,7 +130,7 @@ export const DateInput2: React.FC<DateInput2Props> = React.memo(function _DateIn
 
     return (
         <DateInput
-            {...passThroughToDateInputProps}
+            {...dateInputProps}
             value={dateValue}
             onChange={handleDateChange}
             timePrecision={timePrecision}

packages/datetime2/src/components/timezone-select/timezoneSelect.tsx

@@ -28,8 +28,7 @@ import {
     MenuItem,
     Props,
 } from "@blueprintjs/core";
-import type { Popover2Props } from "@blueprintjs/popover2";
-import { ItemListPredicate, ItemRenderer, Select2 } from "@blueprintjs/select";
+import { ItemListPredicate, ItemRenderer, Select2, SelectPopoverProps } from "@blueprintjs/select";
 
 import * as Classes from "../../common/classes";
 import { TIMEZONE_ITEMS } from "../../common/timezoneItems";
@@ -111,7 +110,7 @@ export interface TimezoneSelectProps extends Props {
     inputProps?: InputGroupProps2;
 
     /** Props to spread to `Popover2`. Note that `content` cannot be changed. */
-    popoverProps?: Partial<Omit<Popover2Props, "content">>;
+    popoverProps?: SelectPopoverProps["popoverProps"];
 }
 
 export interface TimezoneSelectState {
@@ -169,7 +168,6 @@ export class TimezoneSelect extends AbstractPureComponent2<TimezoneSelectProps,
                     ...popoverProps,
                     popoverClassName: classNames(Classes.TIMEZONE_SELECT_POPOVER, popoverProps?.popoverClassName),
                 }}
-                popoverTargetProps={{ className: Classes.TIMEZONE_SELECT_TARGET }}
                 resetOnClose={true}
                 resetOnSelect={true}
             >

packages/datetime2/test/components/dateInput2Tests.tsx

@@ -53,41 +53,41 @@ describe("<DateInput2>", () => {
     it("Correctly passes on the default selected timezone", () => {
         const defaultTimezone = "Europe/Paris";
         const wrapper = mount(<DateInput2 {...DEFAULT_PROPS} defaultTimezone={defaultTimezone} />);
-        const timezonePicker = wrapper.find(TimezoneSelect);
+        const timezoneSelect = wrapper.find(TimezoneSelect);
 
-        assert.strictEqual(timezonePicker.prop("value"), defaultTimezone);
+        assert.strictEqual(timezoneSelect.prop("value"), defaultTimezone);
     });
 
     it("It updates the passed back string when timezone is changed", () => {
         const wrapper = mount(<DateInput2 {...DEFAULT_PROPS} />);
-        const timezonePicker = wrapper.find(TimezoneSelect);
+        const timezoneSelect = wrapper.find(TimezoneSelect);
         const newTimezone = "Europe/Paris";
-        timezonePicker.prop("onChange")(newTimezone);
+        timezoneSelect.prop("onChange")(newTimezone);
 
         assert.isTrue(onChange.calledOnce);
         assert.deepEqual(onChange.firstCall.args, ["2021-11-29T10:30:00.000+01:00"]);
     });
 
     it("It formats the string based on the time precision when timezone is changed", () => {
         const wrapper = mount(<DateInput2 {...DEFAULT_PROPS} timePrecision={TimePrecision.MINUTE} />);
-        const timezonePicker = wrapper.find(TimezoneSelect);
+        const timezoneSelect = wrapper.find(TimezoneSelect);
         const newTimezone = "Europe/Paris";
-        timezonePicker.prop("onChange")(newTimezone);
+        timezoneSelect.prop("onChange")(newTimezone);
 
         assert.isTrue(onChange.calledOnce);
         assert.deepEqual(onChange.firstCall.args, ["2021-11-29T10:30+01:00"]);
     });
 
     it("It updates the passed back string when time is changed", () => {
         const wrapper = mount(<DateInput2 {...DEFAULT_PROPS} />);
-        const timezonePicker = wrapper.find(DateInput);
-        timezonePicker.prop("onChange")!(new Date("2021-11-29T11:30:00.000"), true);
+        const timezoneSelect = wrapper.find(DateInput);
+        timezoneSelect.prop("onChange")!(new Date("2021-11-29T11:30:00.000"), true);
 
         assert.isTrue(onChange.calledOnce);
         assert.deepEqual(onChange.firstCall.args, ["2021-11-29T11:30:00.000+00:00", true]);
     });
 
-    it("Does not render a timezone picker not passed a precision", () => {
+    it("Does not render a timezone select if timePrecision is undefined", () => {
         const wrapper = mount(<DateInput2 {...DEFAULT_PROPS} timePrecision={undefined} />);
         assert.isFalse(wrapper.find(TimezoneSelect).exists());
     });

packages/docs-app/src/examples/datetime2-examples/dateInput2Example.tsx

@@ -28,26 +28,26 @@ export interface DateInput2ExampleState {
     closeOnSelection: boolean;
     date: string | null;
     disabled: boolean;
+    disableTimezoneSelect: boolean;
     fill: boolean;
     format: DateFormatProps;
     reverseMonthAndYearMenus: boolean;
     shortcuts: boolean;
+    showTimezoneSelect: boolean;
     timePrecision: TimePrecision | undefined;
-    disableTimezonePicker: boolean;
-    hideTimezonePicker: boolean;
 }
 
 export class DateInput2Example extends React.PureComponent<IExampleProps, DateInput2ExampleState> {
     public state: DateInput2ExampleState = {
         closeOnSelection: true,
         date: null,
-        disableTimezonePicker: false,
+        disableTimezoneSelect: false,
         disabled: false,
         fill: false,
         format: FORMATS[0],
-        hideTimezonePicker: false,
         reverseMonthAndYearMenus: false,
         shortcuts: false,
+        showTimezoneSelect: true,
         timePrecision: TimePrecision.MINUTE,
     };
 
@@ -57,22 +57,22 @@ export class DateInput2Example extends React.PureComponent<IExampleProps, DateIn
 
     private toggleDisabled = handleBooleanChange(disabled => this.setState({ disabled }));
 
-    private toggleHideTimezonePicker = handleBooleanChange(hideTimezonePicker => this.setState({ hideTimezonePicker }));
+    private toggleShowTimezoneSelect = handleBooleanChange(showTimezoneSelect => this.setState({ showTimezoneSelect }));
 
-    private toggleDisableTimezonePicker = handleBooleanChange(disableTimezonePicker =>
-        this.setState({ disableTimezonePicker }),
+    private toggleDisableTimezoneSelect = handleBooleanChange(disableTimezoneSelect =>
+        this.setState({ disableTimezoneSelect }),
     );
 
     private toggleFill = handleBooleanChange(fill => this.setState({ fill }));
 
     private toggleReverseMenus = handleBooleanChange(reverse => this.setState({ reverseMonthAndYearMenus: reverse }));
 
-    private toggleTimePrecision = handleValueChange((timePrecision: TimePrecision | "none") =>
+    private handleTimePrecisionChange = handleValueChange((timePrecision: TimePrecision | "none") =>
         this.setState({ timePrecision: timePrecision === "none" ? undefined : timePrecision }),
     );
 
     public render() {
-        const { date, format, timePrecision, hideTimezonePicker, disableTimezonePicker, ...spreadProps } = this.state;
+        const { date, format, timePrecision, ...spreadProps } = this.state;
         return (
             <Example options={this.renderOptions()} {...this.props}>
                 <DateInput2
@@ -82,8 +82,6 @@ export class DateInput2Example extends React.PureComponent<IExampleProps, DateIn
                     popoverProps={{ position: Position.BOTTOM }}
                     timePrecision={timePrecision}
                     value={date}
-                    hideTimezone={hideTimezonePicker}
-                    disableTimezoneSelect={disableTimezonePicker}
                 />
                 {date}
             </Example>
@@ -99,34 +97,37 @@ export class DateInput2Example extends React.PureComponent<IExampleProps, DateIn
             format,
             timePrecision,
             shortcuts,
-            disableTimezonePicker,
-            hideTimezonePicker,
+            disableTimezoneSelect,
+            showTimezoneSelect,
         } = this.state;
         return (
             <>
                 <H5>Props</H5>
                 <Switch label="Close on selection" checked={closeOnSelection} onChange={this.toggleSelection} />
                 <Switch checked={shortcuts} label="Show shortcuts" onChange={this.toggleShortcuts} />
+                <PrecisionSelect
+                    allowNone={true}
+                    label="Time precision"
+                    onChange={this.handleTimePrecisionChange}
+                    value={timePrecision}
+                />
+
+                <H5>Appearance props</H5>
                 <Switch label="Disabled" checked={disabled} onChange={this.toggleDisabled} />
                 <Switch label="Fill" checked={fill} onChange={this.toggleFill} />
                 <Switch label="Reverse month and year menus" checked={reverse} onChange={this.toggleReverseMenus} />
+                <FormatSelect format={format} onChange={this.handleFormatChange} />
+
+                <H5>Timezone props</H5>
                 <Switch
-                    label="Disable timezone picker"
-                    checked={disableTimezonePicker}
-                    onChange={this.toggleDisableTimezonePicker}
+                    label="Disable timezone select"
+                    checked={disableTimezoneSelect}
+                    onChange={this.toggleDisableTimezoneSelect}
                 />
                 <Switch
-                    label="Hide timezone picker"
-                    checked={hideTimezonePicker}
-                    onChange={this.toggleHideTimezonePicker}
-                />
-
-                <FormatSelect format={format} onChange={this.handleFormatChange} />
-                <PrecisionSelect
-                    allowNone={true}
-                    label="Time precision"
-                    onChange={this.toggleTimePrecision}
-                    value={timePrecision}
+                    label="Show timezone select"
+                    checked={showTimezoneSelect}
+                    onChange={this.toggleShowTimezoneSelect}
                 />
             </>
         );

packages/docs-app/src/examples/timezone-examples/timezonePickerExample.tsx

@@ -72,6 +72,7 @@ export class TimezonePickerExample extends React.PureComponent<IExampleProps, IT
             </>
         );
 
+        /* eslint-disable deprecation/deprecation */
         return (
             <Example options={options} {...this.props}>
                 <TimezonePicker
@@ -86,6 +87,7 @@ export class TimezonePickerExample extends React.PureComponent<IExampleProps, IT
                 </TimezonePicker>
             </Example>
         );
+        /* eslint-enable deprecation/deprecation */
     }
 
     private renderCustomTarget() {

packages/timezone/src/components/timezone-picker/timezonePicker.tsx

@@ -119,6 +119,7 @@ export interface ITimezonePickerState {
 // eslint-disable-next-line deprecation/deprecation
 const TypedSelect = Select.ofType<TimezoneItem>();
 
+/** @deprecated use { TimezoneSelect } from "@blueprintjs/datetime2" */
 export class TimezonePicker extends AbstractPureComponent2<TimezonePickerProps, ITimezonePickerState> {
     public static displayName = `${DISPLAYNAME_PREFIX}.TimezonePicker`;
 

packages/timezone/test/timezonePickerTests.tsx

@@ -50,7 +50,7 @@ const shallow = (
     options?: ShallowRendererProps,
 ): TimezonePickerShallowWrapper => untypedShallow<TimezonePicker>(el, options);
 
-const VALUE = "America/Los_Angeles";
+/* eslint-disable deprecation/deprecation */
 
 describe("<TimezonePicker>", () => {
     const onChange = sinon.spy();
@@ -60,7 +60,7 @@ describe("<TimezonePicker>", () => {
             isOpen: true,
             usePortal: false,
         },
-        value: VALUE,
+        value: "America/Los_Angeles",
     };
 
     afterEach(() => onChange.resetHistory());
@@ -69,7 +69,6 @@ describe("<TimezonePicker>", () => {
         // remove isOpen from popoverProps so it's
         const timezonePicker = mount(<TimezonePicker {...DEFAULT_PROPS} popoverProps={{ usePortal: false }} />);
         timezonePicker.find(Button).simulate("click");
-        /* eslint-disable-next-line deprecation/deprecation */
         assert.isTrue(timezonePicker.find(Popover).prop("isOpen"));
     });
 
@@ -78,7 +77,6 @@ describe("<TimezonePicker>", () => {
             <TimezonePicker {...DEFAULT_PROPS} disabled={true} popoverProps={{ usePortal: false }} />,
         );
         timezonePicker.find(Button).simulate("click");
-        /* eslint-disable-next-line deprecation/deprecation */
         assert.isFalse(timezonePicker.find(Popover).prop("isOpen"));
     });
 
@@ -244,7 +242,6 @@ describe("<TimezonePicker>", () => {
     }
 
     function findPopover(timezonePicker: TimezonePickerShallowWrapper) {
-        /* eslint-disable-next-line deprecation/deprecation */
         return findQueryList(timezonePicker).shallow().find(Popover);
     }