@payloadcms/ui 4.0.0-internal.e7d4ebc → 4.0.0-internal.ec73d44

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),
@@ -40,7 +57,7 @@
   }
 
   .react-datepicker-popper {
-    z-index: 10;
+    z-index: var(--z-portal-element);
     line-height: 0;
   }
 
@@ -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);
@@ -161,7 +180,7 @@
     text-align: center;
     cursor: pointer;
     top: 0;
-    margin: var(--spacer-2);
+    margin: var(--spacer-2) var(--spacer-1-5);
     border: none;
     z-index: 1;
     height: var(--spacer-4);
@@ -185,6 +204,10 @@
     font-weight: 300;
   }
 
+  .react-datepicker:has(.react-datepicker__monthPicker) .react-datepicker__navigation {
+    margin-inline: var(--spacer-2);
+  }
+
   .react-datepicker__navigation-icon {
     display: flex;
     align-items: center;
@@ -216,8 +239,8 @@
   }
 
   .react-datepicker__navigation--next--with-time:not(
-      .react-datepicker__navigation--next--with-today-button
-    ) {
+    .react-datepicker__navigation--next--with-today-button
+  ) {
     right: var(--time-column-width);
   }
 
@@ -357,6 +380,10 @@
     position: relative;
   }
 
+  .react-datepicker__month-container:has(.react-datepicker__day-names) {
+    width: calc(var(--spacer-5) * 8);
+  }
+
   .react-datepicker__month {
     margin: 0;
     padding: var(--spacer-1);
@@ -411,14 +438,15 @@
     white-space: nowrap;
     margin-bottom: 0;
     background-color: transparent;
-    padding: var(--spacer-2);
-    padding-bottom: 0;
+    padding: var(--spacer-2) var(--spacer-1) 0;
     border-top: var(--stroke-width-small) solid var(--color-border);
     width: 100%;
-    order: 3;
   }
 
+  .react-datepicker__day-names,
   .react-datepicker__week {
+    display: flex;
+    justify-content: space-between;
     white-space: nowrap;
   }
 
@@ -434,7 +462,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;
@@ -546,29 +573,29 @@
 
   /* In-range selecting (partial selection) */
   .react-datepicker__day--in-selecting-range:not(
-      .react-datepicker__day--in-range,
-      .react-datepicker__month-text--in-range,
-      .react-datepicker__quarter-text--in-range,
-      .react-datepicker__year-text--in-range
-    ),
+    .react-datepicker__day--in-range,
+    .react-datepicker__month-text--in-range,
+    .react-datepicker__quarter-text--in-range,
+    .react-datepicker__year-text--in-range
+  ),
   .react-datepicker__month-text--in-selecting-range:not(
-      .react-datepicker__day--in-range,
-      .react-datepicker__month-text--in-range,
-      .react-datepicker__quarter-text--in-range,
-      .react-datepicker__year-text--in-range
-    ),
+    .react-datepicker__day--in-range,
+    .react-datepicker__month-text--in-range,
+    .react-datepicker__quarter-text--in-range,
+    .react-datepicker__year-text--in-range
+  ),
   .react-datepicker__quarter-text--in-selecting-range:not(
-      .react-datepicker__day--in-range,
-      .react-datepicker__month-text--in-range,
-      .react-datepicker__quarter-text--in-range,
-      .react-datepicker__year-text--in-range
-    ),
+    .react-datepicker__day--in-range,
+    .react-datepicker__month-text--in-range,
+    .react-datepicker__quarter-text--in-range,
+    .react-datepicker__year-text--in-range
+  ),
   .react-datepicker__year-text--in-selecting-range:not(
-      .react-datepicker__day--in-range,
-      .react-datepicker__month-text--in-range,
-      .react-datepicker__quarter-text--in-range,
-      .react-datepicker__year-text--in-range
-    ) {
+    .react-datepicker__day--in-range,
+    .react-datepicker__month-text--in-range,
+    .react-datepicker__quarter-text--in-range,
+    .react-datepicker__year-text--in-range
+  ) {
     background-color: var(--color-bg-selected);
   }
 
@@ -651,7 +678,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 +751,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 +848,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 +908,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 +919,7 @@
     }
 
     .date-time-picker .react-datepicker__time-container {
+      align-self: stretch;
       width: auto;
       border-top: var(--stroke-width-small) solid var(--color-border);
     }
@@ -927,4 +954,9 @@
       transform: translateY(-50%);
     }
   }
+
+  html[data-enhanced-contrast]
+    .react-datepicker__day--today:not(.react-datepicker__day--selected)::after {
+    background-color: var(--color-icon-brand);
+  }
 }

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDatePickerKeyboard.d.ts","sourceRoot":"","sources":["../../../src/elements/DatePicker/useDatePickerKeyboard.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,kBAAkB,CAAA;AAGnD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAMvC,eAAO,MAAM,qBAAqB,kBAAmB,KAAK;;;;;+BAqB9C,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC;;;;;;;;CAiH9C,CAAA"}

package/dist/elements/DatePicker/useDatePickerKeyboard.js

@@ -0,0 +1,212 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import React from 'react';
+export const useDatePickerKeyboard = t0 => {
+  const $ = _c(27);
+  const {
+    overrides
+  } = t0;
+  const datePickerRef = React.useRef(null);
+  const calendarRef = React.useRef(null);
+  const hasTypedInput = React.useRef(false);
+  const shouldFocusCalendar = React.useRef(false);
+  const calendarFocusFrame = React.useRef(null);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = event => {
+      event.stopPropagation();
+      if (!event.defaultPrevented) {
+        event.preventDefault();
+        datePickerRef.current?.setOpen(false, true);
+        datePickerRef.current?.sendFocusBackToInput();
+      }
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const onEscape = t1;
+  const onOverrideKeyDownRef = React.useRef(overrides?.onKeyDown);
+  let t2;
+  if ($[1] !== overrides?.onKeyDown) {
+    t2 = () => {
+      onOverrideKeyDownRef.current = overrides?.onKeyDown;
+    };
+    $[1] = overrides?.onKeyDown;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const t3 = overrides?.onKeyDown;
+  let t4;
+  if ($[3] !== t3) {
+    t4 = [t3];
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  React.useLayoutEffect(t2, t4);
+  let t5;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = event_0 => {
+      if (event_0.key === "Escape") {
+        if (!event_0.defaultPrevented) {
+          onOverrideKeyDownRef.current?.(event_0);
+        }
+        onEscape(event_0);
+      }
+    };
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  const onCalendarKeyDown = t5;
+  let t6;
+  let t7;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = () => () => {
+      if (calendarFocusFrame.current !== null) {
+        cancelAnimationFrame(calendarFocusFrame.current);
+      }
+    };
+    t7 = [];
+    $[6] = t6;
+    $[7] = t7;
+  } else {
+    t6 = $[6];
+    t7 = $[7];
+  }
+  React.useEffect(t6, t7);
+  let t8;
+  if ($[8] !== overrides) {
+    t8 = event_1 => {
+      hasTypedInput.current = false;
+      overrides?.onBlur?.(event_1);
+    };
+    $[8] = overrides;
+    $[9] = t8;
+  } else {
+    t8 = $[9];
+  }
+  const onBlur = t8;
+  let t9;
+  if ($[10] !== overrides) {
+    t9 = (event_2, selectionMeta) => {
+      overrides?.onChangeRaw?.(event_2, selectionMeta);
+      if (event_2 && !event_2.defaultPrevented && event_2.target === datePickerRef.current?.input) {
+        hasTypedInput.current = true;
+      }
+    };
+    $[10] = overrides;
+    $[11] = t9;
+  } else {
+    t9 = $[11];
+  }
+  const onChangeRaw = t9;
+  let t10;
+  if ($[12] !== overrides) {
+    t10 = () => {
+      hasTypedInput.current = false;
+      shouldFocusCalendar.current = false;
+      if (calendarFocusFrame.current !== null) {
+        cancelAnimationFrame(calendarFocusFrame.current);
+        calendarFocusFrame.current = null;
+      }
+      overrides?.onCalendarClose?.();
+    };
+    $[12] = overrides;
+    $[13] = t10;
+  } else {
+    t10 = $[13];
+  }
+  const onCalendarClose = t10;
+  let t11;
+  if ($[14] !== overrides) {
+    t11 = () => {
+      if (shouldFocusCalendar.current) {
+        calendarFocusFrame.current = requestAnimationFrame(() => {
+          calendarFocusFrame.current = null;
+          shouldFocusCalendar.current = false;
+          if (!datePickerRef.current?.isCalendarOpen()) {
+            return;
+          }
+          const calendar = calendarRef.current;
+          const focusTarget = calendar?.querySelector("[tabindex=\"0\"]") || calendar?.querySelector("button:not(:disabled), select:not(:disabled)");
+          focusTarget?.focus();
+        });
+      }
+      overrides?.onCalendarOpen?.();
+    };
+    $[14] = overrides;
+    $[15] = t11;
+  } else {
+    t11 = $[15];
+  }
+  const onCalendarOpen = t11;
+  let t12;
+  if ($[16] !== overrides) {
+    t12 = event_3 => {
+      overrides?.onKeyDown?.(event_3);
+      if (event_3.key === "Escape" && datePickerRef.current?.isCalendarOpen()) {
+        onEscape(event_3);
+      }
+      if (!event_3.defaultPrevented && event_3.target === datePickerRef.current?.input && !datePickerRef.current.isCalendarOpen() && ["ArrowDown", "ArrowUp", "Enter"].includes(event_3.key)) {
+        event_3.preventDefault();
+        if (event_3.key === "Enter" && hasTypedInput.current) {
+          hasTypedInput.current = false;
+          datePickerRef.current.setOpen(false);
+          return;
+        }
+        shouldFocusCalendar.current = true;
+        datePickerRef.current?.setOpen(true);
+      }
+    };
+    $[16] = overrides;
+    $[17] = t12;
+  } else {
+    t12 = $[17];
+  }
+  const onKeyDown = t12;
+  let t13;
+  if ($[18] !== overrides) {
+    t13 = event_4 => {
+      const isCalendarCell = event_4.target instanceof HTMLElement && event_4.target.matches(".react-datepicker__day, .react-datepicker__week-number, .react-datepicker__month-text, .react-datepicker__year-text");
+      if (event_4.key === "Escape" && (event_4.target === datePickerRef.current?.input || isCalendarCell) && datePickerRef.current?.isCalendarOpen()) {
+        overrides?.onKeyDown?.(event_4);
+        onEscape(event_4);
+      }
+    };
+    $[18] = overrides;
+    $[19] = t13;
+  } else {
+    t13 = $[19];
+  }
+  const onKeyDownCapture = t13;
+  let t14;
+  if ($[20] !== onBlur || $[21] !== onCalendarClose || $[22] !== onCalendarOpen || $[23] !== onChangeRaw || $[24] !== onKeyDown || $[25] !== onKeyDownCapture) {
+    t14 = {
+      calendarRef,
+      datePickerRef,
+      onBlur,
+      onCalendarClose,
+      onCalendarKeyDown,
+      onCalendarOpen,
+      onChangeRaw,
+      onKeyDown,
+      onKeyDownCapture
+    };
+    $[20] = onBlur;
+    $[21] = onCalendarClose;
+    $[22] = onCalendarOpen;
+    $[23] = onChangeRaw;
+    $[24] = onKeyDown;
+    $[25] = onKeyDownCapture;
+    $[26] = t14;
+  } else {
+    t14 = $[26];
+  }
+  return t14;
+};
+//# sourceMappingURL=useDatePickerKeyboard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDatePickerKeyboard.js","names":["c","_c","React","useDatePickerKeyboard","t0","$","overrides","datePickerRef","useRef","calendarRef","hasTypedInput","shouldFocusCalendar","calendarFocusFrame","t1","Symbol","for","event","stopPropagation","defaultPrevented","preventDefault","current","setOpen","sendFocusBackToInput","onEscape","onOverrideKeyDownRef","onKeyDown","t2","t3","t4","useLayoutEffect","t5","event_0","key","onCalendarKeyDown","t6","t7","cancelAnimationFrame","useEffect","t8","event_1","onBlur","t9","event_2","selectionMeta","onChangeRaw","target","input","t10","onCalendarClose","t11","requestAnimationFrame","isCalendarOpen","calendar","focusTarget","querySelector","focus","onCalendarOpen","t12","event_3","includes","t13","event_4","isCalendarCell","HTMLElement","matches","onKeyDownCapture","t14"],"sources":["../../../src/elements/DatePicker/useDatePickerKeyboard.ts"],"sourcesContent":["'use client'\n\nimport type ReactDatePicker from 'react-datepicker'\nimport type { DatePickerProps } from 'react-datepicker'\n\nimport React from 'react'\n\nimport type { Props } from './types.js'\n\ntype DatePickerComponent = typeof ReactDatePicker extends { default: infer Component }\n  ? Component\n  : typeof ReactDatePicker\n\nexport const useDatePickerKeyboard = ({ overrides }: Props) => {\n  const datePickerRef = React.useRef<React.ComponentRef<DatePickerComponent>>(null)\n  const calendarRef = React.useRef<HTMLDivElement>(null)\n  const hasTypedInput = React.useRef(false)\n  const shouldFocusCalendar = React.useRef(false)\n  const calendarFocusFrame = React.useRef<null | number>(null)\n  const onEscape = React.useCallback((event: React.KeyboardEvent) => {\n    event.stopPropagation()\n    if (!event.defaultPrevented) {\n      event.preventDefault()\n      datePickerRef.current?.setOpen(false, true)\n      datePickerRef.current?.sendFocusBackToInput()\n    }\n  }, [])\n  const onOverrideKeyDownRef = React.useRef(overrides?.onKeyDown)\n\n  React.useLayoutEffect(() => {\n    onOverrideKeyDownRef.current = overrides?.onKeyDown\n  }, [overrides?.onKeyDown])\n\n  const onCalendarKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === 'Escape') {\n        if (!event.defaultPrevented) {\n          onOverrideKeyDownRef.current?.(event)\n        }\n        onEscape(event)\n      }\n    },\n    [onEscape],\n  )\n\n  React.useEffect(\n    () => () => {\n      if (calendarFocusFrame.current !== null) {\n        cancelAnimationFrame(calendarFocusFrame.current)\n      }\n    },\n    [],\n  )\n\n  const onBlur: NonNullable<DatePickerProps['onBlur']> = (event) => {\n    hasTypedInput.current = false\n    overrides?.onBlur?.(event)\n  }\n  const onChangeRaw: NonNullable<DatePickerProps['onChangeRaw']> = (event, selectionMeta) => {\n    overrides?.onChangeRaw?.(event, selectionMeta)\n\n    if (event && !event.defaultPrevented && event.target === datePickerRef.current?.input) {\n      hasTypedInput.current = true\n    }\n  }\n  const onCalendarClose = () => {\n    hasTypedInput.current = false\n    shouldFocusCalendar.current = false\n    if (calendarFocusFrame.current !== null) {\n      cancelAnimationFrame(calendarFocusFrame.current)\n      calendarFocusFrame.current = null\n    }\n    overrides?.onCalendarClose?.()\n  }\n  const onCalendarOpen = () => {\n    if (shouldFocusCalendar.current) {\n      calendarFocusFrame.current = requestAnimationFrame(() => {\n        calendarFocusFrame.current = null\n        shouldFocusCalendar.current = false\n        if (!datePickerRef.current?.isCalendarOpen()) {\n          return\n        }\n        const calendar = calendarRef.current\n        const focusTarget =\n          calendar?.querySelector<HTMLElement>('[tabindex=\"0\"]') ||\n          calendar?.querySelector<HTMLElement>('button:not(:disabled), select:not(:disabled)')\n\n        focusTarget?.focus()\n      })\n    }\n    overrides?.onCalendarOpen?.()\n  }\n  const onKeyDown: NonNullable<DatePickerProps['onKeyDown']> = (event) => {\n    overrides?.onKeyDown?.(event)\n\n    if (event.key === 'Escape' && datePickerRef.current?.isCalendarOpen()) {\n      onEscape(event)\n    }\n\n    if (\n      !event.defaultPrevented &&\n      event.target === datePickerRef.current?.input &&\n      !datePickerRef.current.isCalendarOpen() &&\n      ['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key)\n    ) {\n      event.preventDefault()\n      // Enter confirms typed input instead of opening the calendar over nearby controls.\n      if (event.key === 'Enter' && hasTypedInput.current) {\n        hasTypedInput.current = false\n        datePickerRef.current.setOpen(false)\n        return\n      }\n      shouldFocusCalendar.current = true\n      datePickerRef.current?.setOpen(true)\n    }\n  }\n\n  const onKeyDownCapture: React.KeyboardEventHandler<HTMLDivElement> = (event) => {\n    // Cells handle Escape themselves, which can blur the input after we restore focus.\n    // Intercept only the cell itself so nested controls can consume Escape.\n    const isCalendarCell =\n      event.target instanceof HTMLElement &&\n      event.target.matches(\n        '.react-datepicker__day, .react-datepicker__week-number, .react-datepicker__month-text, .react-datepicker__year-text',\n      )\n\n    if (\n      event.key === 'Escape' &&\n      (event.target === datePickerRef.current?.input || isCalendarCell) &&\n      datePickerRef.current?.isCalendarOpen()\n    ) {\n      overrides?.onKeyDown?.(event)\n      onEscape(event)\n    }\n  }\n\n  return {\n    calendarRef,\n    datePickerRef,\n    onBlur,\n    onCalendarClose,\n    onCalendarKeyDown,\n    onCalendarOpen,\n    onChangeRaw,\n    onKeyDown,\n    onKeyDownCapture,\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/DefaultListViewTabs/index.css

@@ -14,6 +14,10 @@
 
   .default-list-view-tabs__button--active {
     color: var(--color-text);
+
+    html[data-enhanced-contrast] & {
+      border-color: var(--color-border-control);
+    }
   }
 
   .default-list-view-tabs__button--active:disabled {

package/dist/elements/DefaultListViewTabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DefaultListViewTabs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAI9E,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,aAAa,CAAA;AAIpB,KAAK,wBAAwB,GAAG;IAC9B,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,MAAM,EAAE,YAAY,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAsGlE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DefaultListViewTabs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,sBAAsB,EACtB,YAAY,EAEZ,SAAS,EACV,MAAM,SAAS,CAAA;AAIhB,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,aAAa,CAAA;AAIpB,KAAK,wBAAwB,GAAG;IAC9B,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,MAAM,EAAE,YAAY,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA4GlE,CAAA"}