[DateInput]: Remove defaultProps and consolidate datetime constants (#7516)

Author: ggdouglas

packages/datetime/src/components/date-input/dateInput.tsx

@@ -35,11 +35,11 @@ import { getDefaultDateFnsFormat } from "../../common/dateFnsFormatUtils";
 import { useDateFnsLocale } from "../../common/dateFnsLocaleUtils";
 import type { ReactDayPickerSingleProps } from "../../common/reactDayPickerProps";
 import { DatePicker } from "../date-picker/datePicker";
-import { DatePickerUtils } from "../date-picker/datePickerUtils";
+import { INVALID_DATE_MESSAGE, LOCALE, MAX_DATE, MIN_DATE, OUT_OF_RANGE_MESSAGE } from "../dateConstants";
 import type { DatePickerShortcut } from "../shortcuts/shortcuts";
 import { TimezoneSelect } from "../timezone-select/timezoneSelect";
 
-import type { DateInputDefaultProps, DateInputProps, DateInputPropsWithDefaults } from "./dateInputProps";
+import type { DateInputProps } from "./dateInputProps";
 import { useDateFormatter } from "./useDateFormatter";
 import { useDateParser } from "./useDateParser";
 
@@ -51,50 +51,40 @@ const timezoneSelectButtonProps: Partial<ButtonProps> = {
     outlined: true,
 };
 
-export const DATEINPUT_DEFAULT_PROPS: DateInputDefaultProps = {
-    closeOnSelection: true,
-    disabled: false,
-    invalidDateMessage: "Invalid date",
-    locale: "en-US",
-    maxDate: DatePickerUtils.getDefaultMaxDate(),
-    minDate: DatePickerUtils.getDefaultMinDate(),
-    outOfRangeMessage: "Out of range",
-    reverseMonthAndYearMenus: false,
-};
-
 /**
  * Date input component.
  *
  * @see https://blueprintjs.com/docs/#datetime/date-input
  */
 export const DateInput: React.FC<DateInputProps> = memo(function DateInput(props) {
     const {
-        closeOnSelection,
+        closeOnSelection = true,
         dateFnsFormat,
         dateFnsLocaleLoader,
         defaultTimezone,
         defaultValue,
-        disabled,
+        disabled = false,
         disableTimezoneSelect,
         fill,
         inputProps = {},
-        invalidDateMessage,
-        locale: localeOrCode,
-        maxDate,
-        minDate,
+        invalidDateMessage = INVALID_DATE_MESSAGE,
+        locale: localeOrCode = LOCALE,
+        maxDate = MAX_DATE,
+        minDate = MIN_DATE,
         onChange,
         onError,
         onTimezoneChange,
-        outOfRangeMessage,
+        outOfRangeMessage = OUT_OF_RANGE_MESSAGE,
         popoverProps = {},
         popoverRef,
         rightElement,
+        reverseMonthAndYearMenus = false,
         showTimezoneSelect,
         timePrecision,
         timezone: controlledTimezone,
         value,
         ...datePickerProps
-    } = props as DateInputPropsWithDefaults;
+    } = props;
 
     const locale = useDateFnsLocale(localeOrCode, dateFnsLocaleLoader);
     const placeholder = getPlaceholder(props);
@@ -562,11 +552,8 @@ export const DateInput: React.FC<DateInputProps> = memo(function DateInput(props
         />
     );
 });
-DateInput.displayName = `${DISPLAYNAME_PREFIX}.DateInput`;
 
-// TODO: Removing `defaultProps` here breaks tests. Investigate why.
-// eslint-disable-next-line @typescript-eslint/no-deprecated
-DateInput.defaultProps = DATEINPUT_DEFAULT_PROPS;
+DateInput.displayName = `${DISPLAYNAME_PREFIX}.DateInput`;
 
 /** Gets the input `placeholder` value from props, using default values if undefined */
 function getPlaceholder(props: DateInputProps): string | undefined {

packages/datetime/src/components/date-input/dateInputProps.ts

@@ -171,19 +171,3 @@ export interface DateInputProps
     /** An ISO string representing the selected time. */
     value?: string | null;
 }
-
-export type DateInputDefaultProps = Required<
-    Pick<
-        DateInputProps,
-        | "closeOnSelection"
-        | "disabled"
-        | "invalidDateMessage"
-        | "locale"
-        | "maxDate"
-        | "minDate"
-        | "outOfRangeMessage"
-        | "reverseMonthAndYearMenus"
-    >
->;
-
-export type DateInputPropsWithDefaults = Omit<DateInputProps, keyof DateInputDefaultProps> & DateInputDefaultProps;

packages/datetime/src/components/date-input/useDateFormatter.ts

@@ -20,8 +20,9 @@ import { useCallback } from "react";
 import { DateUtils } from "../../common";
 import { getDateFnsFormatter, getDefaultDateFnsFormat } from "../../common/dateFnsFormatUtils";
 import { getLocaleCodeFromProps } from "../../common/dateFnsLocaleProps";
+import { INVALID_DATE_MESSAGE, MAX_DATE, MIN_DATE, OUT_OF_RANGE_MESSAGE } from "../dateConstants";
 
-import type { DateInputProps, DateInputPropsWithDefaults } from "./dateInputProps";
+import type { DateInputProps } from "./dateInputProps";
 
 /**
  * Create a date string parser function based on a given locale.
@@ -34,13 +35,13 @@ export function useDateFormatter(props: DateInputProps, locale: Locale | undefin
         dateFnsFormat,
         locale: localeFromProps,
         formatDate,
-        invalidDateMessage,
-        maxDate,
-        minDate,
-        outOfRangeMessage,
+        invalidDateMessage = INVALID_DATE_MESSAGE,
+        maxDate = MAX_DATE,
+        minDate = MIN_DATE,
+        outOfRangeMessage = OUT_OF_RANGE_MESSAGE,
         timePickerProps,
         timePrecision,
-    } = props as DateInputPropsWithDefaults;
+    } = props;
 
     return useCallback(
         (date: Date | undefined) => {

packages/datetime/src/components/date-input/useDateParser.ts

@@ -19,10 +19,9 @@ import { useCallback } from "react";
 
 import { getDateFnsParser, getDefaultDateFnsFormat } from "../../common/dateFnsFormatUtils";
 import { getLocaleCodeFromProps } from "../../common/dateFnsLocaleProps";
+import { INVALID_DATE, INVALID_DATE_MESSAGE, OUT_OF_RANGE_MESSAGE } from "../dateConstants";
 
-import type { DateInputProps, DateInputPropsWithDefaults } from "./dateInputProps";
-
-const INVALID_DATE = new Date(undefined!);
+import type { DateInputProps } from "./dateInputProps";
 
 /**
  * Create a date string parser function based on a given locale.
@@ -33,13 +32,13 @@ const INVALID_DATE = new Date(undefined!);
 export function useDateParser(props: DateInputProps, locale: Locale | undefined) {
     const {
         dateFnsFormat,
-        invalidDateMessage,
+        invalidDateMessage = INVALID_DATE_MESSAGE,
         locale: localeFromProps,
-        outOfRangeMessage,
+        outOfRangeMessage = OUT_OF_RANGE_MESSAGE,
         parseDate,
         timePickerProps,
         timePrecision,
-    } = props as DateInputPropsWithDefaults;
+    } = props;
 
     return useCallback(
         (dateString: string): Date | null => {

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

@@ -22,6 +22,7 @@ import { Button, DISPLAYNAME_PREFIX, Divider } from "@blueprintjs/core";
 
 import { Classes, type DateRange, DateUtils, Errors, TimezoneUtils } from "../../common";
 import { dayPickerClassNameOverrides } from "../../common/classes";
+import { LOCALE, MAX_DATE, MIN_DATE } from "../dateConstants";
 import { DateFnsLocalizedComponent } from "../dateFnsLocalizedComponent";
 import { DatePickerDropdown } from "../react-day-picker/datePickerDropdown";
 import { IconLeft, IconRight } from "../react-day-picker/datePickerNavIcons";
@@ -31,7 +32,6 @@ import { TimePicker } from "../time-picker/timePicker";
 import { DatePickerProvider } from "./datePickerContext";
 import type { DatePickerProps } from "./datePickerProps";
 import type { DatePickerState } from "./datePickerState";
-import { DatePickerUtils } from "./datePickerUtils";
 
 export type { DatePickerProps };
 
@@ -46,9 +46,9 @@ export class DatePicker extends DateFnsLocalizedComponent<DatePickerProps, DateP
         clearButtonText: "Clear",
         dayPickerProps: {},
         highlightCurrentDay: false,
-        locale: "en-US",
-        maxDate: DatePickerUtils.getDefaultMaxDate(),
-        minDate: DatePickerUtils.getDefaultMinDate(),
+        locale: LOCALE,
+        maxDate: MAX_DATE,
+        minDate: MIN_DATE,
         reverseMonthAndYearMenus: false,
         shortcuts: false,
         showActionsBar: false,
@@ -228,11 +228,7 @@ export class DatePicker extends DateFnsLocalizedComponent<DatePickerProps, DateP
         }
 
         const { selectedShortcutIndex } = this.state;
-        const {
-            maxDate = DatePickerUtils.getDefaultMaxDate(),
-            minDate = DatePickerUtils.getDefaultMinDate(),
-            timePrecision,
-        } = this.props;
+        const { maxDate = MAX_DATE, minDate = MIN_DATE, timePrecision } = this.props;
         // Reuse the existing date range shortcuts and only care about start date
         const dateRangeShortcuts: DateRangeShortcut[] | true =
             shortcuts === true

packages/datetime/src/components/date-range-input/dateRangeInput.tsx

@@ -35,8 +35,15 @@ import {
 import { Classes, type DateRange, DateUtils, Errors, type NonNullDateRange } from "../../common";
 import { getDateFnsFormatter, getDateFnsParser, getDefaultDateFnsFormat } from "../../common/dateFnsFormatUtils";
 import { getLocaleCodeFromProps } from "../../common/dateFnsLocaleProps";
-import { DatePickerUtils } from "../date-picker/datePickerUtils";
 import { DateRangePicker } from "../date-range-picker/dateRangePicker";
+import {
+    INVALID_DATE_MESSAGE,
+    LOCALE,
+    MAX_DATE,
+    MIN_DATE,
+    OUT_OF_RANGE_MESSAGE,
+    OVERLAPPING_DATES_MESSAGE,
+} from "../dateConstants";
 import { DateFnsLocalizedComponent } from "../dateFnsLocalizedComponent";
 import type { DateRangeShortcut } from "../shortcuts/shortcuts";
 
@@ -93,12 +100,12 @@ export class DateRangeInput extends DateFnsLocalizedComponent<DateRangeInputProp
         dayPickerProps: {},
         disabled: false,
         endInputProps: {},
-        invalidDateMessage: "Invalid date",
-        locale: "en-US",
-        maxDate: DatePickerUtils.getDefaultMaxDate(),
-        minDate: DatePickerUtils.getDefaultMinDate(),
-        outOfRangeMessage: "Out of range",
-        overlappingDatesMessage: "Overlapping dates",
+        invalidDateMessage: INVALID_DATE_MESSAGE,
+        locale: LOCALE,
+        maxDate: MAX_DATE,
+        minDate: MIN_DATE,
+        outOfRangeMessage: OUT_OF_RANGE_MESSAGE,
+        overlappingDatesMessage: OVERLAPPING_DATES_MESSAGE,
         popoverProps: {},
         selectAllOnFocus: false,
         shortcuts: true,

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

@@ -26,7 +26,7 @@ import { DateRangeSelectionStrategy } from "../../common/dateRangeSelectionStrat
 import { combineModifiers, HOVERED_RANGE_MODIFIER } from "../../common/dayPickerModifiers";
 import { MonthAndYear } from "../../common/monthAndYear";
 import { DatePickerProvider } from "../date-picker/datePickerContext";
-import { DatePickerUtils } from "../date-picker/datePickerUtils";
+import { LOCALE, MAX_DATE, MIN_DATE } from "../dateConstants";
 import { DateFnsLocalizedComponent } from "../dateFnsLocalizedComponent";
 import { DatePickerShortcutMenu, type DateRangeShortcut } from "../shortcuts/shortcuts";
 import { TimePicker } from "../time-picker/timePicker";
@@ -50,9 +50,9 @@ export class DateRangePicker extends DateFnsLocalizedComponent<DateRangePickerPr
         allowSingleDayRange: false,
         contiguousCalendarMonths: true,
         dayPickerProps: {},
-        locale: "en-US",
-        maxDate: DatePickerUtils.getDefaultMaxDate(),
-        minDate: DatePickerUtils.getDefaultMinDate(),
+        locale: LOCALE,
+        maxDate: MAX_DATE,
+        minDate: MIN_DATE,
         reverseMonthAndYearMenus: false,
         shortcuts: true,
         singleMonthOnly: false,
@@ -204,12 +204,7 @@ export class DateRangePicker extends DateFnsLocalizedComponent<DateRangePickerPr
         }
 
         const { selectedShortcutIndex } = this.state;
-        const {
-            allowSingleDayRange,
-            maxDate = DatePickerUtils.getDefaultMaxDate(),
-            minDate = DatePickerUtils.getDefaultMinDate(),
-            timePrecision,
-        } = this.props;
+        const { allowSingleDayRange, maxDate = MAX_DATE, minDate = MIN_DATE, timePrecision } = this.props;
         return [
             <DatePickerShortcutMenu
                 key="shortcuts"

packages/datetime/src/components/dateConstants.ts

@@ -0,0 +1,16 @@
+/* !
+ * (c) Copyright 2025 Palantir Technologies Inc. All rights reserved.
+ */
+
+import { DatePickerUtils } from "./date-picker/datePickerUtils";
+
+export const LOCALE = "en-US";
+
+export const MAX_DATE = DatePickerUtils.getDefaultMaxDate();
+export const MIN_DATE = DatePickerUtils.getDefaultMinDate();
+
+export const INVALID_DATE_MESSAGE = "Invalid date";
+export const OUT_OF_RANGE_MESSAGE = "Out of range";
+export const OVERLAPPING_DATES_MESSAGE = "Overlapping dates";
+
+export const INVALID_DATE = new Date(undefined!);

packages/datetime/test/common/dateFormatPropsTests.ts

@@ -7,6 +7,7 @@ import { format } from "date-fns";
 
 import { getFormattedDateString } from "../../src/common/dateFormatProps";
 import { Months } from "../../src/common/months";
+import { OUT_OF_RANGE_MESSAGE } from "../../src/components/dateConstants";
 
 const formatDate = (date: Date) => format(date, "yyyy-MM-dd");
 
@@ -39,7 +40,7 @@ describe("DateFormatProps", () => {
             const testDate = new Date(2025, Months.DECEMBER, 31);
             const minDate = new Date(2025, Months.DECEMBER, 1);
             const maxDate = new Date(2025, Months.DECEMBER, 30);
-            const outOfRangeMessage = "OUT OF RANGE";
+            const outOfRangeMessage = OUT_OF_RANGE_MESSAGE;
 
             expect(getFormattedDateString(testDate, { formatDate, maxDate, minDate, outOfRangeMessage })).to.equal(
                 outOfRangeMessage,

packages/datetime/test/components/dateInputTests.tsx

@@ -36,8 +36,9 @@ import {
 } from "../../src";
 import { DefaultDateFnsFormats, getDateFnsFormatter } from "../../src/common/dateFnsFormatUtils";
 import { TIMEZONE_ITEMS } from "../../src/common/timezoneItems";
-import { DateInput, DATEINPUT_DEFAULT_PROPS, type DateInputProps } from "../../src/components/date-input/dateInput";
+import { DateInput, type DateInputProps } from "../../src/components/date-input/dateInput";
 import { DatePicker } from "../../src/components/date-picker/datePicker";
+import { INVALID_DATE_MESSAGE, LOCALE } from "../../src/components/dateConstants";
 import { loadDateFnsLocaleFake } from "../common/loadDateFnsLocaleFake";
 
 const NEW_YORK_TIMEZONE = TIMEZONE_ITEMS.find(item => item.label === "New York")!;
@@ -455,7 +456,7 @@ describe("<DateInput>", () => {
         });
 
         it("typing in an invalid date displays the error message and calls onError with Date(undefined)", () => {
-            const invalidDateMessage = "INVALID DATE";
+            const invalidDateMessage = INVALID_DATE_MESSAGE;
             const onError = sinon.spy();
             const wrapper = mount(
                 <DateInput
@@ -669,7 +670,7 @@ describe("<DateInput>", () => {
             focusInput(wrapper);
             changeInput(wrapper, "4/77/2016");
             blurInput(wrapper);
-            assert.strictEqual(wrapper.find(InputGroup).prop("value"), DATEINPUT_DEFAULT_PROPS.invalidDateMessage);
+            assert.strictEqual(wrapper.find(InputGroup).prop("value"), INVALID_DATE_MESSAGE);
         });
 
         it("text input does not show error styling until user is done typing and blurs the input", () => {
@@ -780,7 +781,7 @@ describe("<DateInput>", () => {
         describe("with formatDate & parseDate defined", () => {
             const formatDate = sinon.stub().returns("custom date");
             const parseDate = sinon.stub().returns(today);
-            const localeCode = "en-US";
+            const localeCode = LOCALE;
             const FORMATTING_PROPS: DateInputProps = {
                 dateFnsLocaleLoader: DEFAULT_PROPS.dateFnsLocaleLoader,
                 formatDate,
@@ -819,7 +820,7 @@ describe("<DateInput>", () => {
                 });
                 changeInput(wrapper, "invalid");
                 blurInput(wrapper);
-                assert.strictEqual(wrapper.find("input").prop("value"), DATEINPUT_DEFAULT_PROPS.invalidDateMessage);
+                assert.strictEqual(wrapper.find("input").prop("value"), INVALID_DATE_MESSAGE);
             });
         });