@payloadcms/ui 4.0.0-internal.f05c47f → 4.0.0-internal.f15737c

package/dist/elements/DatePicker/DatePicker.js

@@ -1,18 +1,57 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import ReactDatePickerDefaultImport, { registerLocale, setDefaultLocale } from 'react-datepicker';
+import { createPortal, flushSync } from 'react-dom';
 const ReactDatePicker = 'default' in ReactDatePickerDefaultImport ? ReactDatePickerDefaultImport.default : ReactDatePickerDefaultImport;
 import { CalendarIcon } from '../../icons/Calendar/index.js';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { getFormattedLocale } from './getFormattedLocale.js';
+import { hasAmbiguousYearInput } from './hasAmbiguousYearInput.js';
+import { useDatePickerKeyboard } from './useDatePickerKeyboard.js';
 import './index.css';
 const baseClass = 'date-time-picker';
+const AccessibleCalendarContainer = ({
+  children,
+  className,
+  containerRef,
+  dialogLabel,
+  monthLabel,
+  onKeyDown,
+  yearLabel
+}) => {
+  React.useLayoutEffect(() => {
+    containerRef.current?.querySelector('.react-datepicker__month-select')?.setAttribute('aria-label', monthLabel);
+    containerRef.current?.querySelector('.react-datepicker__year-select')?.setAttribute('aria-label', yearLabel);
+  });
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Handle Escape bubbling from the dialog's interactive children.
+    /*#__PURE__*/
+    _jsx("div", {
+      "aria-label": dialogLabel,
+      className: className,
+      onKeyDown: onKeyDown,
+      ref: containerRef,
+      role: "dialog",
+      children: children
+    })
+  );
+};
+const getDateTimeFieldLabel = ({
+  field,
+  locale
+}) => {
+  try {
+    return new Intl.DisplayNames(locale, {
+      type: 'dateTimeField'
+    }).of(field) || field;
+  } catch (_error) {
+    return field;
+  }
+};
 const DatePicker = props => {
-  const $ = _c(6);
   const {
     id,
     displayFormat: customDisplayFormat,
@@ -20,60 +59,121 @@ const DatePicker = props => {
     maxTime,
     minDate,
     minTime,
-    monthsToShow: t0,
+    monthsToShow = 1,
     onChange: onChangeFromProps,
     overrides,
-    pickerAppearance: t1,
+    pickerAppearance = 'default',
     placeholder: placeholderText,
     readOnly,
-    timeFormat: t2,
-    timeIntervals: t3,
+    timeFormat = 'h:mm aa',
+    timeIntervals = 30,
     value
   } = props;
-  const monthsToShow = t0 === undefined ? 1 : t0;
-  const pickerAppearance = t1 === undefined ? "default" : t1;
-  const timeFormat = t2 === undefined ? "h:mm aa" : t2;
-  const timeIntervals = t3 === undefined ? 30 : t3;
   const {
-    i18n
+    calendarRef,
+    datePickerRef,
+    onBlur,
+    onCalendarClose,
+    onCalendarKeyDown,
+    onCalendarOpen,
+    onChangeRaw,
+    onKeyDown,
+    onKeyDownCapture
+  } = useDatePickerKeyboard(props);
+  const rejectedInputValueRef = React.useRef(undefined);
+  const [modalContainer, setModalContainer] = React.useState(null);
+  const setContainerRef = React.useCallback(element => {
+    setModalContainer(element?.closest('dialog, [role="dialog"]') ?? null);
+  }, []);
+  const popperContainer = React.useCallback(({
+    children
+  }) => modalContainer ? /*#__PURE__*/createPortal(children, modalContainer) : children, [modalContainer]);
+  // Use the user's AdminUI language preference for the locale
+  const {
+    i18n,
+    t
   } = useTranslation();
+  const monthLabel = getDateTimeFieldLabel({
+    field: 'month',
+    locale: i18n.language
+  });
+  const yearLabel = getDateTimeFieldLabel({
+    field: 'year',
+    locale: i18n.language
+  });
+  const CustomCalendarContainer = overrides?.calendarContainer;
+  const calendarContainer = React.useCallback(({
+    children: children_0,
+    className,
+    ...containerProps
+  }) => CustomCalendarContainer ?
+  // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- Handle Escape bubbling from the custom calendar's interactive children.
+  /*#__PURE__*/
+  _jsx("div", {
+    onKeyDown: onCalendarKeyDown,
+    ref: calendarRef,
+    style: {
+      display: 'contents'
+    },
+    children: /*#__PURE__*/_jsx(CustomCalendarContainer, {
+      ...containerProps,
+      className: className,
+      children: children_0
+    })
+  }) : /*#__PURE__*/_jsx(AccessibleCalendarContainer, {
+    className: className,
+    containerRef: calendarRef,
+    dialogLabel: `${t('general:selectValue')}: ${monthLabel}, ${yearLabel}`,
+    monthLabel: monthLabel,
+    onKeyDown: onCalendarKeyDown,
+    yearLabel: yearLabel,
+    children: children_0
+  }), [CustomCalendarContainer, calendarRef, monthLabel, onCalendarKeyDown, t, yearLabel]);
   let dateFormat = customDisplayFormat;
   if (!customDisplayFormat) {
-    if (pickerAppearance === "default") {
-      dateFormat = "MM/dd/yyyy";
-    } else {
-      if (pickerAppearance === "dayAndTime") {
-        dateFormat = "MMM d, yyy h:mm a";
-      } else {
-        if (pickerAppearance === "timeOnly") {
-          dateFormat = "h:mm a";
-        } else {
-          if (pickerAppearance === "dayOnly") {
-            dateFormat = "MMM dd";
-          } else {
-            if (pickerAppearance === "monthOnly") {
-              dateFormat = "MMMM";
-            }
-          }
-        }
-      }
+    // when no displayFormat is provided, determine format based on the picker appearance
+    if (pickerAppearance === 'default') {
+      dateFormat = 'MM/dd/yyyy';
+    } else if (pickerAppearance === 'dayAndTime') {
+      dateFormat = 'MMM d, yyy h:mm a';
+    } else if (pickerAppearance === 'timeOnly') {
+      dateFormat = 'h:mm a';
+    } else if (pickerAppearance === 'dayOnly') {
+      dateFormat = 'MMM dd';
+    } else if (pickerAppearance === 'monthOnly') {
+      dateFormat = 'MMMM';
     }
   }
-  const onChange = incomingDate => {
+  const onChange = (incomingDate, event) => {
     const newDate = incomingDate;
-    if (newDate instanceof Date && ["dayOnly", "default", "monthOnly"].includes(pickerAppearance)) {
+    const inputValue = event?.target instanceof HTMLInputElement ? event.target.value : !event ? rejectedInputValueRef.current : undefined;
+    if (hasAmbiguousYearInput({
+      date: newDate,
+      dateFormat: overrides?.dateFormat ?? dateFormat,
+      inputValue,
+      locale: overrides?.locale
+    })) {
+      const picker = datePickerRef.current;
+      rejectedInputValueRef.current = inputValue;
+      picker?.setPreSelection(picker.calcInitialState().preSelection);
+      return;
+    }
+    rejectedInputValueRef.current = undefined;
+    if (newDate instanceof Date && ['dayOnly', 'default', 'monthOnly'].includes(pickerAppearance)) {
       const tzOffset = incomingDate.getTimezoneOffset() / 60;
       newDate.setHours(12 - tzOffset, 0);
     }
-    if (newDate instanceof Date && !dateFormat.includes("SSS")) {
+    if (newDate instanceof Date && !dateFormat.includes('SSS')) {
+      // Unless the dateFormat includes milliseconds, set milliseconds to 0
+      // This is to ensure that the timestamp is consistent with the displayFormat
       newDate.setMilliseconds(0);
     }
-    if (typeof onChangeFromProps === "function") {
+    if (typeof onChangeFromProps === 'function') {
       onChangeFromProps(newDate);
     }
   };
   const dateTimePickerProps = {
-    customInputRef: "ref",
+    customInputRef: 'ref',
     dateFormat,
     disabled: readOnly,
     maxDate,
@@ -81,74 +181,77 @@ const DatePicker = props => {
     minDate,
     minTime,
     monthsShown: Math.min(2, monthsToShow),
-    nextMonthButtonLabel: _jsx(ChevronIcon, {
+    nextMonthButtonLabel: /*#__PURE__*/_jsx(ChevronIcon, {
       direction: "right"
     }),
-    nextYearButtonLabel: "\u203A",
+    nextYearButtonLabel: '›',
     onChange,
     placeholderText,
-    popperPlacement: "bottom-start",
-    portalId: "date-time-picker-portal",
-    previousMonthButtonLabel: _jsx(ChevronIcon, {
+    popperContainer: modalContainer ? popperContainer : undefined,
+    popperPlacement: 'bottom-start',
+    portalId: modalContainer ? undefined : 'date-time-picker-portal',
+    preventOpenOnFocus: true,
+    previousMonthButtonLabel: /*#__PURE__*/_jsx(ChevronIcon, {
       direction: "left"
     }),
-    previousYearButtonLabel: "\u2039",
+    previousYearButtonLabel: '‹',
     selected: value && new Date(value),
     shouldCloseOnSelect: false,
-    showMonthYearPicker: pickerAppearance === "monthOnly",
+    showMonthYearPicker: pickerAppearance === 'monthOnly',
     showPopperArrow: false,
-    showTimeSelect: pickerAppearance === "dayAndTime" || pickerAppearance === "timeOnly",
-    showTimeSelectOnly: pickerAppearance === "timeOnly",
+    showTimeSelect: pickerAppearance === 'dayAndTime' || pickerAppearance === 'timeOnly',
+    showTimeSelectOnly: pickerAppearance === 'timeOnly',
     timeFormat,
     timeIntervals,
-    ...overrides
+    ...overrides,
+    calendarContainer,
+    onBlur,
+    onCalendarClose,
+    onCalendarOpen,
+    onChangeRaw,
+    onKeyDown
   };
-  const t4 = `${baseClass}__appearance--${pickerAppearance}`;
-  let t5;
-  if ($[0] !== t4) {
-    t5 = [baseClass, t4].filter(Boolean);
-    $[0] = t4;
-    $[1] = t5;
-  } else {
-    t5 = $[1];
-  }
-  const classes = t5.join(" ");
-  let t6;
-  let t7;
-  if ($[2] !== i18n.dateFNS || $[3] !== i18n.language) {
-    t6 = () => {
-      if (i18n.dateFNS) {
-        ;
-        try {
-          const datepickerLocale = getFormattedLocale(i18n.language);
-          registerLocale(datepickerLocale, i18n.dateFNS);
-          setDefaultLocale(datepickerLocale);
-        } catch (t8) {
-          console.warn(`Could not find DatePicker locale for ${i18n.language}`);
-        }
+  const onBlurCapture = event_0 => {
+    const input = event_0.target;
+    if (input !== datePickerRef.current?.input || !(input instanceof HTMLInputElement)) {
+      return;
+    }
+    if (/[a-z0-9]/i.test(input.value) || !/[\p{L}\p{N}]/u.test(input.value)) {
+      return;
+    }
+    // react-datepicker 9.1 treats non-Latin input as an empty mask.
+    // Reset raw text synchronously before its blur handler can clear the selected date.
+    // eslint-disable-next-line @eslint-react/dom/no-flush-sync -- Programmatic blur also requires the reset before the upstream handler runs.
+    flushSync(() => datePickerRef.current?.resetInputValue());
+  };
+  const classes = [baseClass, `${baseClass}__appearance--${pickerAppearance}`].filter(Boolean).join(' ');
+  React.useEffect(() => {
+    if (i18n.dateFNS) {
+      try {
+        const datepickerLocale = getFormattedLocale(i18n.language);
+        registerLocale(datepickerLocale, i18n.dateFNS);
+        setDefaultLocale(datepickerLocale);
+      } catch (_error) {
+        // eslint-disable-next-line no-console
+        console.warn(`Could not find DatePicker locale for ${i18n.language}`);
       }
-    };
-    t7 = [i18n.language, i18n.dateFNS];
-    $[2] = i18n.dateFNS;
-    $[3] = i18n.language;
-    $[4] = t6;
-    $[5] = t7;
-  } else {
-    t6 = $[4];
-    t7 = $[5];
-  }
-  React.useEffect(t6, t7);
-  return _jsx("div", {
+    }
+  }, [i18n.language, i18n.dateFNS]);
+  return /*#__PURE__*/_jsx("div", {
     className: classes,
-    id,
-    children: _jsxs("div", {
+    id: id,
+    onBlurCapture: onBlurCapture,
+    onKeyDownCapture: onKeyDownCapture,
+    ref: setContainerRef,
+    children: /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__input-wrapper`,
-      children: [_jsx(ReactDatePicker, {
+      children: [/*#__PURE__*/_jsx(ReactDatePicker, {
+        ref: datePickerRef,
         ...dateTimePickerProps,
         dropdownMode: "select",
-        showMonthDropdown: pickerAppearance !== "monthOnly",
-        showYearDropdown: pickerAppearance !== "monthOnly"
-      }), _jsx(CalendarIcon, {})]
+        showMonthDropdown: pickerAppearance !== 'monthOnly',
+        showYearDropdown: pickerAppearance !== 'monthOnly'
+      }), /*#__PURE__*/_jsx(CalendarIcon, {})]
     })
   });
 };

package/dist/elements/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":["c","_c","React","ReactDatePickerDefaultImport","registerLocale","setDefaultLocale","ReactDatePicker","default","CalendarIcon","ChevronIcon","useTranslation","getFormattedLocale","baseClass","DatePicker","props","$","id","displayFormat","customDisplayFormat","maxDate","maxTime","minDate","minTime","monthsToShow","t0","onChange","onChangeFromProps","overrides","pickerAppearance","t1","placeholder","placeholderText","readOnly","timeFormat","t2","timeIntervals","t3","value","undefined","i18n","dateFormat","incomingDate","newDate","Date","includes","tzOffset","getTimezoneOffset","setHours","setMilliseconds","dateTimePickerProps","customInputRef","disabled","monthsShown","Math","min","nextMonthButtonLabel","_jsx","direction","popperPlacement","portalId","previousMonthButtonLabel","selected","shouldCloseOnSelect","showMonthYearPicker","showPopperArrow","showTimeSelect","showTimeSelectOnly","t4","t5","filter","Boolean","classes","join","t6","t7","dateFNS","language","datepickerLocale","t8","console","warn","useEffect","className","children","_jsxs","dropdownMode","showMonthDropdown","showYearDropdown"],"sources":["../../../src/elements/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client'\nimport type { DatePickerProps } from 'react-datepicker'\n\nimport React from 'react'\nimport ReactDatePickerDefaultImport, { registerLocale, setDefaultLocale } from 'react-datepicker'\nconst ReactDatePicker =\n  'default' in ReactDatePickerDefaultImport\n    ? ReactDatePickerDefaultImport.default\n    : ReactDatePickerDefaultImport\n\nimport type { Props } from './types.js'\n\nimport { CalendarIcon } from '../../icons/Calendar/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { getFormattedLocale } from './getFormattedLocale.js'\nimport './index.css'\n\nconst baseClass = 'date-time-picker'\n\nconst DatePicker: React.FC<Props> = (props) => {\n  const {\n    id,\n    displayFormat: customDisplayFormat,\n    maxDate,\n    maxTime,\n    minDate,\n    minTime,\n    monthsToShow = 1,\n    onChange: onChangeFromProps,\n    overrides,\n    pickerAppearance = 'default',\n    placeholder: placeholderText,\n    readOnly,\n    timeFormat = 'h:mm aa',\n    timeIntervals = 30,\n    value,\n  } = props\n\n  // Use the user's AdminUI language preference for the locale\n  const { i18n } = useTranslation()\n\n  let dateFormat = customDisplayFormat\n\n  if (!customDisplayFormat) {\n    // when no displayFormat is provided, determine format based on the picker appearance\n    if (pickerAppearance === 'default') {\n      dateFormat = 'MM/dd/yyyy'\n    } else if (pickerAppearance === 'dayAndTime') {\n      dateFormat = 'MMM d, yyy h:mm a'\n    } else if (pickerAppearance === 'timeOnly') {\n      dateFormat = 'h:mm a'\n    } else if (pickerAppearance === 'dayOnly') {\n      dateFormat = 'MMM dd'\n    } else if (pickerAppearance === 'monthOnly') {\n      dateFormat = 'MMMM'\n    }\n  }\n\n  const onChange: Extract<\n    DatePickerProps,\n    { selectsMultiple?: never; selectsRange?: never }\n  >['onChange'] = (incomingDate) => {\n    const newDate = incomingDate\n    if (newDate instanceof Date && ['dayOnly', 'default', 'monthOnly'].includes(pickerAppearance)) {\n      const tzOffset = incomingDate.getTimezoneOffset() / 60\n      newDate.setHours(12 - tzOffset, 0)\n    }\n\n    if (newDate instanceof Date && !dateFormat.includes('SSS')) {\n      // Unless the dateFormat includes milliseconds, set milliseconds to 0\n      // This is to ensure that the timestamp is consistent with the displayFormat\n      newDate.setMilliseconds(0)\n    }\n\n    if (typeof onChangeFromProps === 'function') {\n      onChangeFromProps(newDate)\n    }\n  }\n\n  const dateTimePickerProps: Extract<\n    DatePickerProps,\n    { selectsMultiple?: never; selectsRange?: never }\n  > = {\n    customInputRef: 'ref',\n    dateFormat,\n    disabled: readOnly,\n    maxDate,\n    maxTime,\n    minDate,\n    minTime,\n    monthsShown: Math.min(2, monthsToShow),\n    nextMonthButtonLabel: <ChevronIcon direction=\"right\" />,\n    nextYearButtonLabel: '›',\n    onChange,\n    placeholderText,\n    popperPlacement: 'bottom-start',\n    portalId: 'date-time-picker-portal',\n    previousMonthButtonLabel: <ChevronIcon direction=\"left\" />,\n    previousYearButtonLabel: '‹',\n    selected: value && new Date(value),\n    shouldCloseOnSelect: false,\n    showMonthYearPicker: pickerAppearance === 'monthOnly',\n    showPopperArrow: false,\n    showTimeSelect: pickerAppearance === 'dayAndTime' || pickerAppearance === 'timeOnly',\n    showTimeSelectOnly: pickerAppearance === 'timeOnly',\n    timeFormat,\n    timeIntervals,\n    ...(overrides as Extract<\n      DatePickerProps,\n      { selectsMultiple?: never; selectsRange?: never } // to satisfy TypeScript. Overrides can enable selectsMultiple or selectsRange but then it's up to the user to ensure they pass in the correct onChange\n    >),\n  }\n\n  const classes = [baseClass, `${baseClass}__appearance--${pickerAppearance}`]\n    .filter(Boolean)\n    .join(' ')\n\n  React.useEffect(() => {\n    if (i18n.dateFNS) {\n      try {\n        const datepickerLocale = getFormattedLocale(i18n.language)\n        registerLocale(datepickerLocale, i18n.dateFNS)\n        setDefaultLocale(datepickerLocale)\n      } catch (_error) {\n        // eslint-disable-next-line no-console\n        console.warn(`Could not find DatePicker locale for ${i18n.language}`)\n      }\n    }\n  }, [i18n.language, i18n.dateFNS])\n\n  return (\n    <div className={classes} id={id}>\n      <div className={`${baseClass}__input-wrapper`}>\n        <ReactDatePicker\n          {...dateTimePickerProps}\n          dropdownMode=\"select\"\n          showMonthDropdown={pickerAppearance !== 'monthOnly'}\n          showYearDropdown={pickerAppearance !== 'monthOnly'}\n        />\n        <CalendarIcon />\n      </div>\n    </div>\n  )\n}\n\n// eslint-disable-next-line no-restricted-exports\nexport default DatePicker\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAClB,OAAOC,4BAAA,IAAgCC,cAAc,EAAEC,gBAAgB,QAAQ;AAC/E,MAAMC,eAAA,GACJ,aAAaH,4BAAA,GACTA,4BAAA,CAA6BI,OAAO,GACpCJ,4BAAA;AAIN,SAASK,YAAY,QAAQ;AAC7B,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ;AACnC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,MAAMC,UAAA,GAA8BC,KAAA;EAAA,MAAAC,CAAA,GAAAd,EAAA;EAClC;IAAAe,EAAA;IAAAC,aAAA,EAAAC,mBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,YAAA,EAAAC,EAAA;IAAAC,QAAA,EAAAC,iBAAA;IAAAC,SAAA;IAAAC,gBAAA,EAAAC,EAAA;IAAAC,WAAA,EAAAC,eAAA;IAAAC,QAAA;IAAAC,UAAA,EAAAC,EAAA;IAAAC,aAAA,EAAAC,EAAA;IAAAC;EAAA,IAgBIvB,KAAA;EATF,MAAAS,YAAA,GAAAC,EAAgB,KAAAc,SAAA,OAAhBd,EAAgB;EAGhB,MAAAI,gBAAA,GAAAC,EAA4B,KAAAS,SAAA,GAAT,SAAS,GAA5BT,EAA4B;EAG5B,MAAAI,UAAA,GAAAC,EAAsB,KAAAI,SAAA,GAAT,SAAS,GAAtBJ,EAAsB;EACtB,MAAAC,aAAA,GAAAC,EAAkB,KAAAE,SAAA,QAAlBF,EAAkB;EAKpB;IAAAG;EAAA,IAAiB7B,cAAA;EAEjB,IAAA8B,UAAA,GAAiBtB,mBAAA;EAAA,KAEZA,mBAAA;IAAA,IAECU,gBAAA,KAAqB;MACvBY,UAAA,CAAAA,CAAA,CAAaA,YAAA;IAAb;MAAA,IACSZ,gBAAA,KAAqB;QAC9BY,UAAA,CAAAA,CAAA,CAAaA,mBAAA;MAAb;QAAA,IACSZ,gBAAA,KAAqB;UAC9BY,UAAA,CAAAA,CAAA,CAAaA,QAAA;QAAb;UAAA,IACSZ,gBAAA,KAAqB;YAC9BY,UAAA,CAAAA,CAAA,CAAaA,QAAA;UAAb;YAAA,IACSZ,gBAAA,KAAqB;cAC9BY,UAAA,CAAAA,CAAA,CAAaA,MAAA;YAAb;UAAA;QAAA;MAAA;IAAA;EAAA;EAIJ,MAAAf,QAAA,GAAAgB,YAAA;IAIE,MAAAC,OAAA,GAAgBD,YAAA;IAAA,IACZC,OAAA,YAAAC,IAAmB,IAAQ,CAAC,WAAW,WAAW,aAAAC,QAAA,CAAsBhB,gBAAA;MAC1E,MAAAiB,QAAA,GAAiBJ,YAAA,CAAAK,iBAAA,CAA8B,MAAK;MACpDJ,OAAA,CAAAK,QAAA,CAAiB,KAAKF,QAAA,GAAU;IAAA;IAAA,IAG9BH,OAAA,YAAAC,IAAmB,KAASH,UAAA,CAAAI,QAAA,CAAoB;MAGlDF,OAAA,CAAAM,eAAA,EAAwB;IAAA;IAAA,IAGtB,OAAOtB,iBAAA,KAAsB;MAC/BA,iBAAA,CAAkBgB,OAAA;IAAA;EAAA;EAItB,MAAAO,mBAAA;IAAAC,cAAA,EAIkB;IAAAV,UAAA;IAAAW,QAAA,EAENnB,QAAA;IAAAb,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAA8B,WAAA,EAKGC,IAAA,CAAAC,GAAA,IAAY/B,YAAA;IAAAgC,oBAAA,EACHC,IAAA,CAAA/C,WAAA;MAAAgD,SAAA,EAAuB;IAAA,C;yBACxB;IAAAhC,QAAA;IAAAM,eAAA;IAAA2B,eAAA,EAGJ;IAAAC,QAAA,EACP;IAAAC,wBAAA,EACgBJ,IAAA,CAAA/C,WAAA;MAAAgD,SAAA,EAAuB;IAAA,C;6BACxB;IAAAI,QAAA,EACfxB,KAAA,QAAAM,IAAA,CAAkBN,KAAA;IAAAyB,mBAAA;IAAAC,mBAAA,EAEPnC,gBAAA,KAAqB;IAAAoC,eAAA;IAAAC,cAAA,EAE1BrC,gBAAA,KAAqB,gBAAgBA,gBAAA,KAAqB;IAAAsC,kBAAA,EACtDtC,gBAAA,KAAqB;IAAAK,UAAA;IAAAE,aAAA;IAAA,GAGrCR;EAAS;EAMa,MAAAwC,EAAA,MAAAvD,SAAA,iBAA6BgB,gBAAA,EAAkB;EAAA,IAAAwC,EAAA;EAAA,IAAArD,CAAA,QAAAoD,EAAA;IAA3DC,EAAA,IAAAxD,SAAA,EAAYuD,EAA+C,EAAAE,MAAA,CAAAC,OACjE;IAAAvD,CAAA,MAAAoD,EAAA;IAAApD,CAAA,MAAAqD,EAAA;EAAA;IAAAA,EAAA,GAAArD,CAAA;EAAA;EADV,MAAAwD,OAAA,GAAgBH,EACN,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAA3D,CAAA,QAAAwB,IAAA,CAAAoC,OAAA,IAAA5D,CAAA,QAAAwB,IAAA,CAAAqC,QAAA;IAEQH,EAAA,GAAAA,CAAA;MAAA,IACVlC,IAAA,CAAAoC,OAAA;QAAA;QAAA;UAEA,MAAAE,gBAAA,GAAyBlE,kBAAA,CAAmB4B,IAAA,CAAAqC,QAAa;UACzDxE,cAAA,CAAeyE,gBAAA,EAAkBtC,IAAA,CAAAoC,OAAY;UAC7CtE,gBAAA,CAAiBwE,gBAAA;QAAA,SAAAC,EAAA;UAGjBC,OAAA,CAAAC,IAAA,CAAa,wCAAwCzC,IAAA,CAAAqC,QAAA,EAAe;QAAA;MAAA;IAAA;IAGvEF,EAAA,IAACnC,IAAA,CAAAqC,QAAA,EAAerC,IAAA,CAAAoC,OAAA;IAAa5D,CAAA,MAAAwB,IAAA,CAAAoC,OAAA;IAAA5D,CAAA,MAAAwB,IAAA,CAAAqC,QAAA;IAAA7D,CAAA,MAAA0D,EAAA;IAAA1D,CAAA,MAAA2D,EAAA;EAAA;IAAAD,EAAA,GAAA1D,CAAA;IAAA2D,EAAA,GAAA3D,CAAA;EAAA;EAXhCb,KAAA,CAAA+E,SAAA,CAAgBR,EAWhB,EAAGC,EAA6B;EAAA,OAG9BlB,IAAA,CAAC;IAAA0B,SAAA,EAAeX,OAAA;IAAAvD,EAAA;IAAAmE,QAAA,EACdC,KAAA,CAAC;MAAAF,SAAA,EAAe,GAAAtE,SAAA,iBAA6B;MAAAuE,QAAA,GAC3C3B,IAAA,CAAAlD,eAAA;QAAA,GACM2C,mBAAmB;QAAAoC,YAAA,EACV;QAAAC,iBAAA,EACM1D,gBAAA,KAAqB;QAAA2D,gBAAA,EACtB3D,gBAAA,KAAqB;MAAA,C,GAEzC4B,IAAA,CAAAhD,YAAA,IAAC;IAAA,C;;CAIT;AAEA;AACA,eAAeK,UAAA","ignoreList":[]}
+{"version":3,"file":"DatePicker.js","names":["React","ReactDatePickerDefaultImport","registerLocale","setDefaultLocale","createPortal","flushSync","ReactDatePicker","default","CalendarIcon","ChevronIcon","useTranslation","getFormattedLocale","hasAmbiguousYearInput","useDatePickerKeyboard","baseClass","AccessibleCalendarContainer","children","className","containerRef","dialogLabel","monthLabel","onKeyDown","yearLabel","useLayoutEffect","current","querySelector","setAttribute","_jsx","ref","role","getDateTimeFieldLabel","field","locale","Intl","DisplayNames","type","of","_error","DatePicker","props","id","displayFormat","customDisplayFormat","maxDate","maxTime","minDate","minTime","monthsToShow","onChange","onChangeFromProps","overrides","pickerAppearance","placeholder","placeholderText","readOnly","timeFormat","timeIntervals","value","calendarRef","datePickerRef","onBlur","onCalendarClose","onCalendarKeyDown","onCalendarOpen","onChangeRaw","onKeyDownCapture","rejectedInputValueRef","useRef","undefined","modalContainer","setModalContainer","useState","setContainerRef","useCallback","element","closest","popperContainer","i18n","t","language","CustomCalendarContainer","calendarContainer","containerProps","style","display","dateFormat","incomingDate","event","newDate","inputValue","target","HTMLInputElement","date","picker","setPreSelection","calcInitialState","preSelection","Date","includes","tzOffset","getTimezoneOffset","setHours","setMilliseconds","dateTimePickerProps","customInputRef","disabled","monthsShown","Math","min","nextMonthButtonLabel","direction","nextYearButtonLabel","popperPlacement","portalId","preventOpenOnFocus","previousMonthButtonLabel","previousYearButtonLabel","selected","shouldCloseOnSelect","showMonthYearPicker","showPopperArrow","showTimeSelect","showTimeSelectOnly","onBlurCapture","input","test","resetInputValue","classes","filter","Boolean","join","useEffect","dateFNS","datepickerLocale","console","warn","_jsxs","dropdownMode","showMonthDropdown","showYearDropdown"],"sources":["../../../src/elements/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client'\nimport type { DatePickerProps } from 'react-datepicker'\n\nimport React from 'react'\nimport ReactDatePickerDefaultImport, { registerLocale, setDefaultLocale } from 'react-datepicker'\nimport { createPortal, flushSync } from 'react-dom'\nconst ReactDatePicker =\n  'default' in ReactDatePickerDefaultImport\n    ? ReactDatePickerDefaultImport.default\n    : ReactDatePickerDefaultImport\n\nimport type { Props } from './types.js'\n\nimport { CalendarIcon } from '../../icons/Calendar/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { getFormattedLocale } from './getFormattedLocale.js'\nimport { hasAmbiguousYearInput } from './hasAmbiguousYearInput.js'\nimport { useDatePickerKeyboard } from './useDatePickerKeyboard.js'\nimport './index.css'\n\nconst baseClass = 'date-time-picker'\n\ntype AccessibleCalendarContainerProps = React.PropsWithChildren<{\n  className?: string\n  containerRef: React.RefObject<HTMLDivElement | null>\n  dialogLabel: string\n  monthLabel: string\n  onKeyDown: React.KeyboardEventHandler<HTMLDivElement>\n  yearLabel: string\n}>\n\nconst AccessibleCalendarContainer: React.FC<AccessibleCalendarContainerProps> = ({\n  children,\n  className,\n  containerRef,\n  dialogLabel,\n  monthLabel,\n  onKeyDown,\n  yearLabel,\n}) => {\n  React.useLayoutEffect(() => {\n    containerRef.current\n      ?.querySelector<HTMLSelectElement>('.react-datepicker__month-select')\n      ?.setAttribute('aria-label', monthLabel)\n    containerRef.current\n      ?.querySelector<HTMLSelectElement>('.react-datepicker__year-select')\n      ?.setAttribute('aria-label', yearLabel)\n  })\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Handle Escape bubbling from the dialog's interactive children.\n    <div\n      aria-label={dialogLabel}\n      className={className}\n      onKeyDown={onKeyDown}\n      ref={containerRef}\n      role=\"dialog\"\n    >\n      {children}\n    </div>\n  )\n}\n\nconst getDateTimeFieldLabel = ({ field, locale }: { field: 'month' | 'year'; locale: string }) => {\n  try {\n    return new Intl.DisplayNames(locale, { type: 'dateTimeField' }).of(field) || field\n  } catch (_error) {\n    return field\n  }\n}\n\nconst DatePicker: React.FC<Props> = (props) => {\n  const {\n    id,\n    displayFormat: customDisplayFormat,\n    maxDate,\n    maxTime,\n    minDate,\n    minTime,\n    monthsToShow = 1,\n    onChange: onChangeFromProps,\n    overrides,\n    pickerAppearance = 'default',\n    placeholder: placeholderText,\n    readOnly,\n    timeFormat = 'h:mm aa',\n    timeIntervals = 30,\n    value,\n  } = props\n\n  const {\n    calendarRef,\n    datePickerRef,\n    onBlur,\n    onCalendarClose,\n    onCalendarKeyDown,\n    onCalendarOpen,\n    onChangeRaw,\n    onKeyDown,\n    onKeyDownCapture,\n  } = useDatePickerKeyboard(props)\n  const rejectedInputValueRef = React.useRef<string | undefined>(undefined)\n  const [modalContainer, setModalContainer] = React.useState<Element | null>(null)\n  const setContainerRef = React.useCallback((element: HTMLDivElement | null) => {\n    setModalContainer(element?.closest('dialog, [role=\"dialog\"]') ?? null)\n  }, [])\n  const popperContainer = React.useCallback<React.FC<React.PropsWithChildren>>(\n    ({ children }) => (modalContainer ? createPortal(children, modalContainer) : children),\n    [modalContainer],\n  )\n\n  // Use the user's AdminUI language preference for the locale\n  const { i18n, t } = useTranslation()\n  const monthLabel = getDateTimeFieldLabel({ field: 'month', locale: i18n.language })\n  const yearLabel = getDateTimeFieldLabel({ field: 'year', locale: i18n.language })\n  const CustomCalendarContainer = overrides?.calendarContainer\n  const calendarContainer = React.useCallback(\n    ({ children, className, ...containerProps }) =>\n      CustomCalendarContainer ? (\n        // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- Handle Escape bubbling from the custom calendar's interactive children.\n        <div onKeyDown={onCalendarKeyDown} ref={calendarRef} style={{ display: 'contents' }}>\n          <CustomCalendarContainer {...containerProps} className={className}>\n            {children}\n          </CustomCalendarContainer>\n        </div>\n      ) : (\n        <AccessibleCalendarContainer\n          className={className}\n          containerRef={calendarRef}\n          dialogLabel={`${t('general:selectValue')}: ${monthLabel}, ${yearLabel}`}\n          monthLabel={monthLabel}\n          onKeyDown={onCalendarKeyDown}\n          yearLabel={yearLabel}\n        >\n          {children}\n        </AccessibleCalendarContainer>\n      ),\n    [CustomCalendarContainer, calendarRef, monthLabel, onCalendarKeyDown, t, yearLabel],\n  )\n\n  let dateFormat = customDisplayFormat\n\n  if (!customDisplayFormat) {\n    // when no displayFormat is provided, determine format based on the picker appearance\n    if (pickerAppearance === 'default') {\n      dateFormat = 'MM/dd/yyyy'\n    } else if (pickerAppearance === 'dayAndTime') {\n      dateFormat = 'MMM d, yyy h:mm a'\n    } else if (pickerAppearance === 'timeOnly') {\n      dateFormat = 'h:mm a'\n    } else if (pickerAppearance === 'dayOnly') {\n      dateFormat = 'MMM dd'\n    } else if (pickerAppearance === 'monthOnly') {\n      dateFormat = 'MMMM'\n    }\n  }\n\n  const onChange: Extract<\n    DatePickerProps,\n    { selectsMultiple?: false; selectsRange?: false }\n  >['onChange'] = (incomingDate, event) => {\n    const newDate = incomingDate\n\n    const inputValue =\n      event?.target instanceof HTMLInputElement\n        ? event.target.value\n        : !event\n          ? rejectedInputValueRef.current\n          : undefined\n\n    if (\n      hasAmbiguousYearInput({\n        date: newDate,\n        dateFormat: overrides?.dateFormat ?? dateFormat,\n        inputValue,\n        locale: overrides?.locale,\n      })\n    ) {\n      const picker = datePickerRef.current\n\n      rejectedInputValueRef.current = inputValue\n      picker?.setPreSelection(picker.calcInitialState().preSelection)\n      return\n    }\n    rejectedInputValueRef.current = undefined\n\n    if (newDate instanceof Date && ['dayOnly', 'default', 'monthOnly'].includes(pickerAppearance)) {\n      const tzOffset = incomingDate.getTimezoneOffset() / 60\n      newDate.setHours(12 - tzOffset, 0)\n    }\n\n    if (newDate instanceof Date && !dateFormat.includes('SSS')) {\n      // Unless the dateFormat includes milliseconds, set milliseconds to 0\n      // This is to ensure that the timestamp is consistent with the displayFormat\n      newDate.setMilliseconds(0)\n    }\n\n    if (typeof onChangeFromProps === 'function') {\n      onChangeFromProps(newDate)\n    }\n  }\n\n  const dateTimePickerProps: Extract<\n    DatePickerProps,\n    { selectsMultiple?: false; selectsRange?: false }\n  > = {\n    customInputRef: 'ref',\n    dateFormat,\n    disabled: readOnly,\n    maxDate,\n    maxTime,\n    minDate,\n    minTime,\n    monthsShown: Math.min(2, monthsToShow),\n    nextMonthButtonLabel: <ChevronIcon direction=\"right\" />,\n    nextYearButtonLabel: '›',\n    onChange,\n    placeholderText,\n    popperContainer: modalContainer ? popperContainer : undefined,\n    popperPlacement: 'bottom-start',\n    portalId: modalContainer ? undefined : 'date-time-picker-portal',\n    preventOpenOnFocus: true,\n    previousMonthButtonLabel: <ChevronIcon direction=\"left\" />,\n    previousYearButtonLabel: '‹',\n    selected: value && new Date(value),\n    shouldCloseOnSelect: false,\n    showMonthYearPicker: pickerAppearance === 'monthOnly',\n    showPopperArrow: false,\n    showTimeSelect: pickerAppearance === 'dayAndTime' || pickerAppearance === 'timeOnly',\n    showTimeSelectOnly: pickerAppearance === 'timeOnly',\n    timeFormat,\n    timeIntervals,\n    ...(overrides as Extract<\n      DatePickerProps,\n      { selectsMultiple?: false; selectsRange?: false } // to satisfy TypeScript. Overrides can enable selectsMultiple or selectsRange but then it's up to the user to ensure they pass in the correct onChange\n    >),\n    calendarContainer,\n    onBlur,\n    onCalendarClose,\n    onCalendarOpen,\n    onChangeRaw,\n    onKeyDown,\n  }\n\n  const onBlurCapture = (event: React.FocusEvent<HTMLDivElement>) => {\n    const input = event.target\n\n    if (input !== datePickerRef.current?.input || !(input instanceof HTMLInputElement)) {\n      return\n    }\n\n    if (/[a-z0-9]/i.test(input.value) || !/[\\p{L}\\p{N}]/u.test(input.value)) {\n      return\n    }\n\n    // react-datepicker 9.1 treats non-Latin input as an empty mask.\n    // Reset raw text synchronously before its blur handler can clear the selected date.\n    // eslint-disable-next-line @eslint-react/dom/no-flush-sync -- Programmatic blur also requires the reset before the upstream handler runs.\n    flushSync(() => datePickerRef.current?.resetInputValue())\n  }\n\n  const classes = [baseClass, `${baseClass}__appearance--${pickerAppearance}`]\n    .filter(Boolean)\n    .join(' ')\n\n  React.useEffect(() => {\n    if (i18n.dateFNS) {\n      try {\n        const datepickerLocale = getFormattedLocale(i18n.language)\n        registerLocale(datepickerLocale, i18n.dateFNS)\n        setDefaultLocale(datepickerLocale)\n      } catch (_error) {\n        // eslint-disable-next-line no-console\n        console.warn(`Could not find DatePicker locale for ${i18n.language}`)\n      }\n    }\n  }, [i18n.language, i18n.dateFNS])\n\n  return (\n    <div\n      className={classes}\n      id={id}\n      onBlurCapture={onBlurCapture}\n      onKeyDownCapture={onKeyDownCapture}\n      ref={setContainerRef}\n    >\n      <div className={`${baseClass}__input-wrapper`}>\n        <ReactDatePicker\n          ref={datePickerRef}\n          {...dateTimePickerProps}\n          dropdownMode=\"select\"\n          showMonthDropdown={pickerAppearance !== 'monthOnly'}\n          showYearDropdown={pickerAppearance !== 'monthOnly'}\n        />\n        <CalendarIcon />\n      </div>\n    </div>\n  )\n}\n\n// eslint-disable-next-line no-restricted-exports\nexport default DatePicker\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/DatePicker/hasAmbiguousYearInput.d.ts

@@ -0,0 +1,8 @@
+import type { DatePickerProps } from 'react-datepicker';
+export declare const hasAmbiguousYearInput: ({ date, dateFormat, inputValue, locale, }: {
+    date: Date | null;
+    dateFormat: string | string[];
+    inputValue?: string;
+    locale?: DatePickerProps['locale'];
+}) => boolean;
+//# sourceMappingURL=hasAmbiguousYearInput.d.ts.map

package/dist/elements/DatePicker/hasAmbiguousYearInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hasAmbiguousYearInput.d.ts","sourceRoot":"","sources":["../../../src/elements/DatePicker/hasAmbiguousYearInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAOvD,eAAO,MAAM,qBAAqB,8CAK/B;IACD,IAAI,EAAE,IAAI,GAAG,IAAI,CAAA;IACjB,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAA;CACnC,KAAG,OAgBH,CAAA"}

package/dist/elements/DatePicker/hasAmbiguousYearInput.js

@@ -0,0 +1,37 @@
+import { format } from 'date-fns';
+import { getDefaultLocale } from 'react-datepicker';
+export const hasAmbiguousYearInput = ({
+  date,
+  dateFormat,
+  inputValue,
+  locale
+}) => {
+  if (!date || date.getFullYear() >= 100 || !inputValue) {
+    return false;
+  }
+  const formats = Array.isArray(dateFormat) ? dateFormat : [dateFormat];
+  const resolvedLocale = resolveDatePickerLocale({
+    locale
+  });
+  return !formats.some(dateFormat => format(date, dateFormat, {
+    locale: resolvedLocale,
+    useAdditionalDayOfYearTokens: true,
+    useAdditionalWeekYearTokens: true
+  }) === inputValue);
+};
+const resolveDatePickerLocale = ({
+  locale
+}) => {
+  // The picker formats its explicit 'en' locale with date-fns defaults.
+  if (locale === 'en') {
+    return undefined;
+  }
+  if (typeof locale === 'object') {
+    return locale;
+  }
+  // registerLocale stores names on this scope; react-datepicker exposes no registry getter.
+  const scope = typeof window !== 'undefined' ? window : globalThis;
+  const defaultLocale = getDefaultLocale();
+  return locale && scope.__localeData__?.[locale] || defaultLocale && scope.__localeData__?.[defaultLocale] || undefined;
+};
+//# sourceMappingURL=hasAmbiguousYearInput.js.map

package/dist/elements/DatePicker/hasAmbiguousYearInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hasAmbiguousYearInput.js","names":["format","getDefaultLocale","hasAmbiguousYearInput","date","dateFormat","inputValue","locale","getFullYear","formats","Array","isArray","resolvedLocale","resolveDatePickerLocale","some","useAdditionalDayOfYearTokens","useAdditionalWeekYearTokens","undefined","scope","window","globalThis","defaultLocale","__localeData__"],"sources":["../../../src/elements/DatePicker/hasAmbiguousYearInput.ts"],"sourcesContent":["import type { DatePickerProps } from 'react-datepicker'\n\nimport { format } from 'date-fns'\nimport { getDefaultLocale } from 'react-datepicker'\n\ntype DatePickerLocale = Exclude<DatePickerProps['locale'], string | undefined>\n\nexport const hasAmbiguousYearInput = ({\n  date,\n  dateFormat,\n  inputValue,\n  locale,\n}: {\n  date: Date | null\n  dateFormat: string | string[]\n  inputValue?: string\n  locale?: DatePickerProps['locale']\n}): boolean => {\n  if (!date || date.getFullYear() >= 100 || !inputValue) {\n    return false\n  }\n\n  const formats = Array.isArray(dateFormat) ? dateFormat : [dateFormat]\n  const resolvedLocale = resolveDatePickerLocale({ locale })\n\n  return !formats.some(\n    (dateFormat) =>\n      format(date, dateFormat, {\n        locale: resolvedLocale,\n        useAdditionalDayOfYearTokens: true,\n        useAdditionalWeekYearTokens: true,\n      }) === inputValue,\n  )\n}\n\nconst resolveDatePickerLocale = ({ locale }: { locale?: DatePickerProps['locale'] }) => {\n  // The picker formats its explicit 'en' locale with date-fns defaults.\n  if (locale === 'en') {\n    return undefined\n  }\n\n  if (typeof locale === 'object') {\n    return locale\n  }\n\n  // registerLocale stores names on this scope; react-datepicker exposes no registry getter.\n  const scope = (typeof window !== 'undefined' ? window : globalThis) as {\n    __localeData__?: Record<string, DatePickerLocale>\n  }\n  const defaultLocale = getDefaultLocale()\n\n  return (\n    (locale && scope.__localeData__?.[locale]) ||\n    (defaultLocale && scope.__localeData__?.[defaultLocale]) ||\n    undefined\n  )\n}\n"],"mappings":"AAEA,SAASA,MAAM,QAAQ;AACvB,SAASC,gBAAgB,QAAQ;AAIjC,OAAO,MAAMC,qBAAA,GAAwBA,CAAC;EACpCC,IAAI;EACJC,UAAU;EACVC,UAAU;EACVC;AAAM,CAMP;EACC,IAAI,CAACH,IAAA,IAAQA,IAAA,CAAKI,WAAW,MAAM,OAAO,CAACF,UAAA,EAAY;IACrD,OAAO;EACT;EAEA,MAAMG,OAAA,GAAUC,KAAA,CAAMC,OAAO,CAACN,UAAA,IAAcA,UAAA,GAAa,CAACA,UAAA,CAAW;EACrE,MAAMO,cAAA,GAAiBC,uBAAA,CAAwB;IAAEN;EAAO;EAExD,OAAO,CAACE,OAAA,CAAQK,IAAI,CACjBT,UAAA,IACCJ,MAAA,CAAOG,IAAA,EAAMC,UAAA,EAAY;IACvBE,MAAA,EAAQK,cAAA;IACRG,4BAAA,EAA8B;IAC9BC,2BAAA,EAA6B;EAC/B,OAAOV,UAAA;AAEb;AAEA,MAAMO,uBAAA,GAA0BA,CAAC;EAAEN;AAAM,CAA0C;EACjF;EACA,IAAIA,MAAA,KAAW,MAAM;IACnB,OAAOU,SAAA;EACT;EAEA,IAAI,OAAOV,MAAA,KAAW,UAAU;IAC9B,OAAOA,MAAA;EACT;EAEA;EACA,MAAMW,KAAA,GAAS,OAAOC,MAAA,KAAW,cAAcA,MAAA,GAASC,UAAA;EAGxD,MAAMC,aAAA,GAAgBnB,gBAAA;EAEtB,OACEK,MAAC,IAAUW,KAAA,CAAMI,cAAc,GAAGf,MAAA,CAAO,IACxCc,aAAA,IAAiBH,KAAA,CAAMI,cAAc,GAAGD,aAAA,CAAc,IACvDJ,SAAA;AAEJ","ignoreList":[]}

package/dist/elements/DatePicker/index.css

@@ -9,10 +9,22 @@
     border: 0;
   }
 
+  /* Visually hidden labels, e.g. full weekday names read instead of "Su", "Mo", ...
+     (copied from react-datepicker's stylesheet) */
+  .react-datepicker__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
   .react-datepicker {
     --time-column-width: 120px;
-
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
@@ -22,7 +34,12 @@
     border: none;
     border-radius: var(--radius-large);
     display: inline-flex;
+    /* Don't stretch the calendar and time columns to the same height. react-datepicker sizes the
+       time list from the calendar's height and re-measures it on resize, so stretching would make
+       both grow forever. The library's own float layout doesn't stretch either. */
+    align-items: flex-start;
     position: relative;
+    /* stylelint-disable-next-line plugin/no-subpixel-values -- TODO: pre-existing; revisit this sub-pixel value */
     box-shadow:
       0 0 0.25px rgba(0, 0, 0, 0.08),
       0 2px 2.5px rgba(0, 0, 0, 0.15),
@@ -54,7 +71,6 @@
 
   .react-datepicker__header {
     display: flex;
-    flex-wrap: wrap;
     align-items: center;
     text-align: center;
     text-transform: none;
@@ -63,7 +79,8 @@
     border-radius: 0;
     padding: 0;
     position: relative;
-    width: min-content;
+    /* Fill the calendar's width, but don't let the dropdowns make the calendar wider */
+    contain: inline-size;
 
     & h2 {
       display: none;
@@ -81,7 +98,7 @@
     padding: var(--spacer-2);
     border-top-left-radius: 0;
     border-top-right-radius: var(--radius-large);
-    font-weight: var(--text-body-medium-strong-font-weight);
+    font-weight: var(--text-body-medium-bold-font-weight);
     min-height: calc(var(--spacer-4) + var(--spacer-2) * 2);
     width: 100%;
   }
@@ -93,10 +110,9 @@
   .react-datepicker-time__header {
     margin-top: 0;
     color: var(--color-text);
-    font-family: var(--text-body-medium-strong-font-family);
-    font-size: var(--text-body-medium-strong-font-size);
-    font-weight: var(--text-body-medium-strong-font-weight);
-    line-height: var(--text-body-medium-strong-line-height);
+    font-size: var(--text-body-medium-bold-font-size);
+    font-weight: var(--text-body-medium-bold-font-weight);
+    line-height: var(--text-body-medium-bold-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
@@ -108,14 +124,13 @@
     min-width: min-content;
     gap: var(--spacer-2);
     align-items: center;
-    order: 1;
     padding: var(--spacer-2);
     margin: 0 var(--spacer-5);
   }
 
   .react-datepicker-year-header {
     padding: var(--spacer-2-5) 0;
-    font-weight: var(--text-body-medium-strong-font-weight);
+    font-weight: var(--text-body-medium-bold-font-weight);
     color: var(--color-text);
     width: 100%;
     display: flex;
@@ -134,7 +149,6 @@
     cursor: pointer;
     padding: 0 var(--spacer-2);
     color: var(--color-text);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     -webkit-appearance: none;
@@ -142,6 +156,11 @@
     background-image: none;
     padding-right: var(--spacer-4);
 
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: calc(var(--accessibility-outline-offset) * 2);
+    }
+
     option {
       background-color: var(--color-bg);
       color: var(--color-text);
@@ -415,7 +434,6 @@
     padding-bottom: 0;
     border-top: var(--stroke-width-small) solid var(--color-border);
     width: 100%;
-    order: 3;
   }
 
   .react-datepicker__week {
@@ -434,7 +452,6 @@
     line-height: var(--text-body-medium-line-height);
     text-align: center;
     margin: 0;
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     position: relative;
@@ -651,7 +668,6 @@
             height: auto;
             padding: var(--spacer-1) var(--spacer-2);
             white-space: nowrap;
-            font-family: var(--text-body-medium-font-family);
             font-size: var(--text-body-medium-font-size);
             font-weight: var(--text-body-medium-font-weight);
             line-height: var(--text-body-medium-line-height);
@@ -725,7 +741,7 @@
     border-top: var(--stroke-width-small) solid var(--color-border);
     cursor: pointer;
     text-align: center;
-    font-weight: var(--text-body-medium-strong-font-weight);
+    font-weight: var(--text-body-medium-bold-font-weight);
     padding: var(--spacer-1) 0;
     clear: left;
     border-bottom-left-radius: var(--radius-large);
@@ -822,7 +838,6 @@
 
   /* ——— Input field ——— */
   .date-time-picker .react-datepicker__input-container input {
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
@@ -883,6 +898,7 @@
     position: relative;
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 768px) {
     .date-time-picker .react-datepicker {
       flex-direction: column;
@@ -893,6 +909,7 @@
     }
 
     .date-time-picker .react-datepicker__time-container {
+      align-self: stretch;
       width: auto;
       border-top: var(--stroke-width-small) solid var(--color-border);
     }

package/dist/elements/DatePicker/useDatePickerKeyboard.d.ts

@@ -0,0 +1,18 @@
+import type ReactDatePicker from 'react-datepicker';
+import React from 'react';
+import type { Props } from './types.js';
+export declare const useDatePickerKeyboard: ({ overrides }: Props) => {
+    calendarRef: React.RefObject<HTMLDivElement>;
+    datePickerRef: React.RefObject<ReactDatePicker.DatePicker>;
+    onBlur: React.FocusEventHandler<HTMLElement>;
+    onCalendarClose: () => void;
+    onCalendarKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    onCalendarOpen: () => void;
+    onChangeRaw: (event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, selectionMeta?: {
+        date: Date;
+        formattedDate: string;
+    }) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+    onKeyDownCapture: React.KeyboardEventHandler<HTMLDivElement>;
+};
+//# sourceMappingURL=useDatePickerKeyboard.d.ts.map