asma-ui-core 3.87.3 → 3.87.5

package/dist/components/feedback/dialog/StyledDialog.js

@@ -1,123 +1,128 @@
-import { cn as p } from "../../../helpers/cn.js";
+import { cn as h } from "../../../helpers/cn.js";
 import { resolveSx as S } from "../../../helpers/sx.js";
-import { CloseIcon as B } from "../../icons/close-icon/CloseIcon.js";
-import { registerOpenModalDialog as G } from "../../../hooks/useTopLayer.hook.js";
-import { StyledButton as L } from "../../inputs/button/StyledButton.js";
-import { useMobileMediaQuery as P } from "../../../hooks/useMediaQuery.hook.js";
-import Q from "./StyledDialog.module.js";
-import { useEffect as D, useLayoutEffect as $, useRef as i } from "react";
+import { CloseIcon as X } from "../../icons/close-icon/CloseIcon.js";
+import { registerOpenModalDialog as B } from "../../../hooks/useTopLayer.hook.js";
+import { StyledButton as G } from "../../inputs/button/StyledButton.js";
+import { useMobileMediaQuery as Q } from "../../../hooks/useMediaQuery.hook.js";
+import $ from "./StyledDialog.module.js";
+import { useEffect as w, useLayoutEffect as J, useRef as a } from "react";
 import { jsx as r, jsxs as l } from "react/jsx-runtime";
-var J = {
+var U = {
   xs: 444,
   sm: 600,
   md: 900,
   lg: 1200,
   xl: 1536
-}, ne = ({ open: t, onClose: a, children: C, dataTest: c, maxWidth: h = "sm", fullWidth: H, fullScreen: _, scroll: M = "paper", disableEscapeKeyDown: y, className: j, style: R, sx: O, classes: w, PaperProps: W, slotProps: n, onCloseText: v, showCloseIcon: b = !0, dialogLabel: d, dialogTitle: s, dialogHeaderNode: I }) => {
-  const z = P(), g = i(null), m = i(null), f = i(!1), k = i(t), o = _ ?? z;
-  D(() => {
-    k.current && !t && n?.transition?.onExited?.(), k.current = t;
-  }, [t, n]), $(() => {
-    const e = g.current;
+}, oe = ({ open: t, onClose: c, children: C, dataTest: d, maxWidth: y = "sm", fullWidth: D, fullScreen: H, scroll: _ = "paper", disableEscapeKeyDown: M, className: j, style: O, sx: R, classes: v, PaperProps: W, slotProps: o, onCloseText: b, showCloseIcon: g = !0, dialogLabel: s, dialogTitle: m, dialogHeaderNode: I }) => {
+  const z = Q(), u = a(null), f = a(null), p = a(!1), k = a(t), i = H ?? z;
+  w(() => {
+    k.current && !t && o?.transition?.onExited?.(), k.current = t;
+  }, [t, o]), J(() => {
+    const e = u.current;
     if (!e || !t) return;
-    e.open || (m.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, e.showModal(), e.focus({ preventScroll: !0 }), requestAnimationFrame(() => e.open && e.focus({ preventScroll: !0 })));
-    const x = G(e);
+    e.open || (f.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, e.showModal(), e.focus({ preventScroll: !0 }), requestAnimationFrame(() => e.open && e.focus({ preventScroll: !0 })));
+    const n = B(e);
     return () => {
-      x(), m.current?.isConnected && m.current.focus({ preventScroll: !0 });
+      n(), f.current?.isConnected && f.current.focus({ preventScroll: !0 });
     };
-  }, [t]), D(() => {
+  }, [t]), w(() => {
     if (!t) return;
-    const e = document.body.style.overflow, x = document.documentElement.style.overflow;
+    const e = document.body.style.overflow, n = document.documentElement.style.overflow;
     return document.body.style.overflow = "hidden", document.documentElement.style.overflow = "hidden", () => {
-      document.body.style.overflow = e, document.documentElement.style.overflow = x;
+      document.body.style.overflow = e, document.documentElement.style.overflow = n;
     };
   }, [t]);
-  const u = {
+  const x = {
     ...W,
-    ...n?.paper
-  }, N = h === !1 ? void 0 : J[h], { className: q, style: A, onClick: F, ...K } = n?.backdrop ?? {}, E = (e) => {
-    f.current || (f.current = !0, window.setTimeout(() => {
-      f.current = !1;
-    }, 0), a?.(e, "escapeKeyDown"));
-  }, X = (e) => {
-    e.preventDefault(), y || E(e);
+    ...o?.paper
+  }, E = y === !1 ? void 0 : U[y], { className: L, style: q, onClick: A, ...F } = o?.backdrop ?? {}, K = (e) => {
+    p.current || (p.current = !0, window.setTimeout(() => {
+      p.current = !1;
+    }, 0), c?.(e, "escapeKeyDown"));
+  }, P = (e) => {
+    e.preventDefault();
   };
-  return t ? /* @__PURE__ */ l("dialog", {
-    ref: g,
+  return w(() => {
+    if (!t || M) return;
+    const e = (n) => {
+      if (n.key !== "Escape" || n.defaultPrevented) return;
+      const N = document.activeElement;
+      N instanceof Element && N.closest("dialog[open]") !== u.current || K(n);
+    };
+    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+  }), t ? /* @__PURE__ */ l("dialog", {
+    ref: u,
     tabIndex: -1,
-    "data-testid": c,
-    "aria-label": c,
-    onCancel: X,
-    onKeyDown: (e) => {
-      e.key !== "Escape" || y || (e.preventDefault(), E(e));
-    },
-    className: p(Q.StyledDialog, "fixed inset-0 m-0 h-full max-h-none w-full max-w-none items-center justify-center overflow-hidden border-0 bg-transparent p-0 outline-none open:flex", M === "body" && "overflow-y-auto", j, w?.root),
+    "data-testid": d,
+    "aria-label": d,
+    onCancel: P,
+    className: h($.StyledDialog, "fixed inset-0 m-0 h-full max-h-none w-full max-w-none items-center justify-center overflow-hidden border-0 bg-transparent p-0 outline-none open:flex", _ === "body" && "overflow-y-auto", j, v?.root),
     style: {
       zIndex: 999,
-      ...S(O),
-      ...R
+      ...S(R),
+      ...O
     },
     children: [/* @__PURE__ */ r("div", {
-      ...K,
-      className: p("absolute inset-0 bg-[#626e7eb2]", q),
-      style: A,
+      ...F,
+      className: h("absolute inset-0 bg-[#626e7eb2]", L),
+      style: q,
       onClick: (e) => {
-        F?.(e), e.defaultPrevented || a?.(e, "backdropClick");
+        A?.(e), e.defaultPrevented || c?.(e, "backdropClick");
       }
     }), /* @__PURE__ */ l("div", {
-      className: p("relative z-[1] flex flex-col overflow-hidden rounded-lg border-0 bg-white p-0 text-delta-800 shadow-[0px_4px_40px_0px_#22213366]", o && "rounded-none", u.className, w?.paper),
+      className: h("relative z-[1] flex flex-col overflow-hidden rounded-lg border-0 bg-white p-0 text-delta-800 shadow-[0px_4px_40px_0px_#22213366]", i && "rounded-none", x.className, v?.paper),
       style: {
         minWidth: 0,
         minHeight: 0,
-        ...!o && N ? { maxWidth: N } : {},
-        ...o ? {
+        ...!i && E ? { maxWidth: E } : {},
+        ...i ? {
           width: "100%",
           maxWidth: "100%",
           height: "100%",
           maxHeight: "100%"
         } : {
-          width: H ? "calc(100% - 64px)" : "auto",
+          width: D ? "calc(100% - 64px)" : "auto",
           maxHeight: "100%"
         },
-        ...S(u.sx),
-        ...u.style,
-        ...o ? {
+        ...S(x.sx),
+        ...x.style,
+        ...i ? {
           width: "100%",
           maxWidth: "100%",
           height: "100%",
           maxHeight: "100%"
         } : { maxHeight: "calc(100% - 64px)" }
       },
-      children: [(!!d || !!s || b) && /* @__PURE__ */ l("div", {
+      children: [(!!s || !!m || g) && /* @__PURE__ */ l("div", {
         className: "box-border flex w-full min-w-0 max-w-full justify-between px-4 pt-4",
         children: [/* @__PURE__ */ l("div", {
           className: "flex min-w-0 flex-1 flex-col justify-start gap-0.5",
-          children: [d && /* @__PURE__ */ r("div", {
+          children: [s && /* @__PURE__ */ r("div", {
             className: "flex h-8 items-center text-sm font-normal leading-5 text-delta-600",
-            children: d
-          }), s && /* @__PURE__ */ r("div", {
-            className: "flex text-2xl font-semibold leading-8 text-delta-800",
             children: s
+          }), m && /* @__PURE__ */ r("div", {
+            className: "flex text-2xl font-semibold leading-8 text-delta-800",
+            children: m
           })]
-        }), b && /* @__PURE__ */ l("div", {
+        }), g && /* @__PURE__ */ l("div", {
           className: "flex min-w-0 max-w-full shrink-0 justify-end gap-2",
-          children: [I, /* @__PURE__ */ r(L, {
-            dataTest: `close-button-${c}`,
-            "aria-label": v ? void 0 : "Close",
+          children: [I, /* @__PURE__ */ r(G, {
+            dataTest: `close-button-${d}`,
+            "aria-label": b ? void 0 : "Close",
             variant: "textGray",
             size: "small",
-            endIcon: /* @__PURE__ */ r(B, {
+            endIcon: /* @__PURE__ */ r(X, {
               width: 20,
               height: 20
             }),
             className: "max-w-full shrink-0 whitespace-nowrap",
-            onClick: (e) => a?.(e, "escapeKeyDown"),
+            onClick: (e) => c?.(e, "escapeKeyDown"),
             style: {
               color: "var(--colors-delta-800)",
               paddingRight: "6px",
               paddingLeft: "6px"
             },
-            children: v
+            children: b
           })]
         })]
       }), C]
@@ -125,5 +130,5 @@ var J = {
   }) : null;
 };
 export {
-  ne as StyledDialog
+  oe as StyledDialog
 };

package/dist/components/inputs/phone-field/useCountryPicker.js

@@ -1,28 +1,28 @@
 import { useMemo as m, useState as D } from "react";
-function w(a, c) {
+function w(i, c) {
   const o = c.trim();
   if (o.length === 0) return !0;
   const r = o.replace(/^\+/, "").replace(/\D/g, "");
-  return r.length === 0 && !new RegExp("\\p{L}", "u").test(o) || a.name.toLocaleLowerCase().includes(o.toLocaleLowerCase()) ? !0 : r.length > 0 && a.dialCode.startsWith(r);
+  return r.length === 0 && !new RegExp("\\p{L}", "u").test(o) || i.name.toLocaleLowerCase().includes(o.toLocaleLowerCase()) ? !0 : r.length > 0 && i.dialCode.startsWith(r);
 }
-function C({ countries: a, selectedIso2: c, query: o, listId: r, onSelect: v, onDismiss: b }) {
-  const [p, s] = D(null), n = m(() => a.filter((e) => w(e, o)), [a, o]), i = p === null || n.length === 0 ? null : Math.max(n.findIndex((e) => e.iso2 === p), 0), k = (e) => `${r}-option-${e}`, g = (e) => {
+function C({ countries: i, selectedIso2: c, query: o, listId: r, onSelect: b, onDismiss: v }) {
+  const [p, s] = D(null), n = m(() => i.filter((e) => w(e, o)), [i, o]), a = p === null || n.length === 0 ? null : Math.max(n.findIndex((e) => e.iso2 === p), 0), g = (e) => `${r}-option-${e}`, k = (e) => {
     const t = e === 1 ? n[0] : n[n.length - 1], l = n.find((d) => d.iso2 === c) ?? t;
     l !== void 0 && s(l.iso2);
   }, h = (e) => {
     if (n.length === 0) return;
-    const t = n.findIndex((d) => d.iso2 === c), l = n[((i ?? (t >= 0 ? t : e === 1 ? -1 : 0)) + e + n.length) % n.length];
+    const t = n.findIndex((d) => d.iso2 === c), l = n[((a ?? (t >= 0 ? t : e === 1 ? -1 : 0)) + e + n.length) % n.length];
     l !== void 0 && s(l.iso2);
   }, u = (e, t = !0) => {
-    t && s(null), v(e, t);
+    t && s(null), b(e, t);
   }, f = () => {
-    s(null), b();
+    s(null), v();
   };
   return {
     visible: n,
-    activeIndex: i,
-    optionId: k,
-    openWithKeyboard: g,
+    activeIndex: a,
+    optionId: g,
+    openWithKeyboard: k,
     select: u,
     dismiss: f,
     handleKeyDown: (e) => {
@@ -48,18 +48,18 @@ function C({ countries: a, selectedIso2: c, query: o, listId: r, onSelect: v, on
         case " ": {
           if (o !== "") break;
           e.preventDefault();
-          const t = i === null ? void 0 : n[i];
+          const t = a === null ? void 0 : n[a];
           t !== void 0 && u(t.iso2, !1);
           break;
         }
         case "Enter": {
           e.preventDefault();
-          const t = i === null ? void 0 : n[i];
+          const t = a === null ? void 0 : n[a];
           t !== void 0 && u(t.iso2);
           break;
         }
         case "Escape":
-          e.preventDefault(), f();
+          e.preventDefault(), e.stopPropagation(), f();
           break;
         case "Tab":
           f();

package/dist/components/inputs/select-autocomplete/StyledSelectAutocomplete.js

@@ -8,16 +8,16 @@ import { StyledCheckbox as ae } from "../checkbox/base-ui/StyledCheckbox.js";
 import { TOP_LAYER_PROPS as ot, TOP_LAYER_RESET_STYLE as nt, getOpenModalDialogAncestor as at, shouldUsePopoverTopLayer as it, useTopLayerRef as ct } from "../../../hooks/useTopLayer.hook.js";
 import { LoadingIcon as dt } from "../../../table/shared-components/LoadingIcon.js";
 import z from "./StyledSelectAutocomplete.module.js";
-import { useEffect as ie, useMemo as W, useRef as ce, useState as D } from "react";
+import { useEffect as ie, useMemo as W, useRef as ce, useState as v } from "react";
 import { jsx as o, jsxs as I } from "react/jsx-runtime";
 import { FloatingPortal as ut, autoUpdate as pt, flip as ft, offset as mt, shift as ht, size as bt, useDismiss as gt, useFloating as xt, useInteractions as wt, useMergeRefs as de, useRole as yt } from "@floating-ui/react";
-var kt = (l) => typeof l == "object" && l !== null && "label" in l ? String(l.label) : String(l), vt = (l) => typeof l == "object" && l !== null && "disabled" in l && !!l.disabled;
-function Ft({ dataTest: l, options: p, renderInput: ue, value: A, onChange: N, getOptionLabel: pe, getOptionKey: C, isOptionEqualToValue: H, renderOption: U, renderValue: V, filterOptions: _, loading: B, loadingText: fe = "Loading…", noOptionsText: me = "No options", disabled: M, readOnly: g, error: he, helperText: be, size: ge = "small", disableClearable: xe, disableCloseOnSelect: we, popupIcon: ye, autoHeight: ke, multiple: ve, allowSelectAll: T, selectAllLabel: De = "Select all", fullWidth: Ie, classes: Ae, inputValue: R, onInputChange: Ne, open: Y, onOpen: Ce, onClose: Me, className: Re, wrapperClassName: Se, getOptionDisabled: $e, slotProps: q }) {
-  const r = ve === !0, d = pe ?? kt, S = (e, t) => H ? H(e, t) : e === t, [Pe, Le] = D(!1), a = Y ?? Pe, u = (e) => {
+var kt = (l) => typeof l == "object" && l !== null && "label" in l ? String(l.label) : String(l), Dt = (l) => typeof l == "object" && l !== null && "disabled" in l && !!l.disabled;
+function Ft({ dataTest: l, options: p, renderInput: ue, value: A, onChange: N, getOptionLabel: pe, getOptionKey: C, isOptionEqualToValue: H, renderOption: U, renderValue: V, filterOptions: _, loading: B, loadingText: fe = "Loading…", noOptionsText: me = "No options", disabled: M, readOnly: g, error: he, helperText: be, size: ge = "small", disableClearable: xe, disableCloseOnSelect: we, popupIcon: ye, autoHeight: ke, multiple: De, allowSelectAll: T, selectAllLabel: ve = "Select all", fullWidth: Ie, classes: Ae, inputValue: R, onInputChange: Ne, open: Y, onOpen: Ce, onClose: Me, className: Re, wrapperClassName: Se, getOptionDisabled: Pe, slotProps: q }) {
+  const r = De === !0, d = pe ?? kt, S = (e, t) => H ? H(e, t) : e === t, [$e, Le] = v(!1), a = Y ?? $e, u = (e) => {
     e && (g || M) || (Y === void 0 && Le(e), e ? Ce?.() : (x(null), Me?.()));
-  }, [Ee, G] = D(""), b = R ?? Ee, $ = (e, t, n) => {
+  }, [Ee, G] = v(""), b = R ?? Ee, P = (e, t, n) => {
     R === void 0 && G(t), Ne?.(e, t, n);
-  }, [s, x] = D(null), J = `${l}-listbox`, Q = ce([]), X = ce(null), [_e, Fe] = D(null), [Z, Oe] = D(null), i = r ? Array.isArray(A) ? A : [] : [], w = r ? null : A ?? null, K = !r && w !== null ? d(w) : "";
+  }, [s, x] = v(null), J = `${l}-listbox`, Q = ce([]), X = ce(null), [_e, Fe] = v(null), [Z, Oe] = v(null), i = r ? Array.isArray(A) ? A : [] : [], w = r ? null : A ?? null, K = !r && w !== null ? d(w) : "";
   ie(() => {
     R !== void 0 || r || G(K);
   }, [
@@ -25,7 +25,7 @@ function Ft({ dataTest: l, options: p, renderInput: ue, value: A, onChange: N, g
     r,
     K
   ]);
-  const F = (e) => r ? i.some((t) => S(e, t)) : w !== null && S(e, w), P = (e) => $e?.(e) ?? vt(e), ee = W(() => {
+  const F = (e) => r ? i.some((t) => S(e, t)) : w !== null && S(e, w), $ = (e) => Pe?.(e) ?? Dt(e), ee = W(() => {
     const e = [...p];
     if (_) return _(e, { inputValue: b });
     const t = !r && w !== null ? d(w).toLowerCase() : null;
@@ -37,7 +37,7 @@ function Ft({ dataTest: l, options: p, renderInput: ue, value: A, onChange: N, g
     b,
     _,
     A
-  ]), f = W(() => ee.slice(0, 100), [ee]), te = f.flatMap((e, t) => P(e) ? [] : [t]), c = T && r ? [-1, ...te] : te, k = f.findIndex(F);
+  ]), f = W(() => ee.slice(0, 100), [ee]), te = f.flatMap((e, t) => $(e) ? [] : [t]), c = T && r ? [-1, ...te] : te, k = f.findIndex(F);
   ie(() => {
     if (!a) return;
     const e = s ?? k;
@@ -69,21 +69,21 @@ function Ft({ dataTest: l, options: p, renderInput: ue, value: A, onChange: N, g
       const n = c.indexOf(t ?? k);
       return n === -1 ? c[e === 1 ? 0 : c.length - 1] ?? null : c[Math.min(Math.max(n + e, 0), c.length - 1)] ?? null;
     });
-  }, v = (e, t, n = !r || !we) => {
+  }, D = (e, t, n = !r || !we) => {
     if (r) {
       const m = i.some((h) => S(t, h)), y = m ? i.filter((h) => !S(t, h)) : [...i, t];
-      N?.(e, y, m ? "removeOption" : "selectOption", { option: t }), $(e, "", "reset"), n && u(!1);
+      N?.(e, y, m ? "removeOption" : "selectOption", { option: t }), P(e, "", "reset"), n && u(!1);
     } else
-      N?.(e, t, "selectOption", { option: t }), $(e, d(t), "reset"), n && u(!1);
+      N?.(e, t, "selectOption", { option: t }), P(e, d(t), "reset"), n && u(!1);
   }, se = (e) => {
-    N?.(e, r ? [] : null, "clear", void 0), $(e, "", "clear");
+    N?.(e, r ? [] : null, "clear", void 0), P(e, "", "clear");
   }, j = (e) => {
     const t = p.length > 0 && i.length === p.length;
     N?.(e, t ? [] : p, t ? "clear" : "selectOption", void 0);
   }, Ye = (e) => {
     if (e.key === "Backspace" && b === "" && oe) {
       const t = i[i.length - 1];
-      r ? t !== void 0 && v(e, t, !1) : se(e);
+      r ? t !== void 0 && D(e, t, !1) : se(e);
     } else if (e.key === "Enter" && !a)
       e.preventDefault(), u(!0);
     else if (e.key === "Enter" && s === -1)
@@ -91,7 +91,7 @@ function Ft({ dataTest: l, options: p, renderInput: ue, value: A, onChange: N, g
     else if (e.key === "Enter" && s != null && f[s] != null) {
       e.preventDefault();
       const t = f[s];
-      P(t) || v(e, t, !0);
+      $(t) || D(e, t, !0);
     } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
       if (e.preventDefault(), !a) {
         x(Be(e.key === "ArrowDown" ? 1 : -1)), u(!0);
@@ -105,8 +105,8 @@ function Ft({ dataTest: l, options: p, renderInput: ue, value: A, onChange: N, g
     else if (e.key === " " && s != null && f[s] != null) {
       e.preventDefault();
       const t = f[s];
-      P(t) || v(e, t, !1);
-    } else e.key === "Escape" ? (e.preventDefault(), u(!1)) : e.key === "Tab" && u(!1);
+      $(t) || D(e, t, !1);
+    } else e.key === "Escape" && a ? (e.preventDefault(), e.stopPropagation(), u(!1)) : e.key === "Tab" && u(!1);
   }, oe = !xe && !g && !M && (r ? i.length > 0 : w !== null);
   let ne;
   a && s != null && (s === -1 || f[s] !== void 0) && (ne = s === -1 ? `${l}-select-all` : `${l}-option-${s}`);
@@ -117,7 +117,7 @@ function Ft({ dataTest: l, options: p, renderInput: ue, value: A, onChange: N, g
     label: d(e),
     readOnly: g,
     deleteButtonTabIndex: -1,
-    onDelete: g ? void 0 : (n) => v(n, e)
+    onDelete: g ? void 0 : (n) => D(n, e)
   }, C ? C(e) : `${d(e)}-${t}`)) : void 0, Je = /* @__PURE__ */ I("span", {
     className: "flex items-center gap-1",
     children: [
@@ -168,7 +168,7 @@ function Ft({ dataTest: l, options: p, renderInput: ue, value: A, onChange: N, g
     helperText: be,
     value: b,
     onChange: (e) => {
-      x(null), $(e, e.target.value, "input"), a || u(!0);
+      x(null), P(e, e.target.value, "input"), a || u(!0);
     },
     onKeyDown: Ye,
     slotProps: {
@@ -220,11 +220,11 @@ function Ft({ dataTest: l, options: p, renderInput: ue, value: A, onChange: N, g
       ]
     }, m);
   }, Ke = (e, t) => {
-    const n = P(e), m = {
+    const n = $(e), m = {
       ...He({
         onMouseDown: (h) => h.preventDefault(),
         onClick: (h) => {
-          n || v(h, e);
+          n || D(h, e);
         },
         onMouseMove: () => x(null)
       }),
@@ -289,7 +289,7 @@ function Ft({ dataTest: l, options: p, renderInput: ue, value: A, onChange: N, g
             }),
             /* @__PURE__ */ o("span", {
               className: "flex-1 truncate py-2",
-              children: De
+              children: ve
             })
           ]
         }), B ? /* @__PURE__ */ o("li", {

package/dist/datetime/components/date-picker/StyledDatePicker.js

@@ -5,44 +5,44 @@ import { DatePickerInputIndex as y } from "./components/DatePickerInputIndex.js"
 import { useIsMobileView as x } from "../../hooks/useWindowWidthSize.hook.js";
 import { StyledDrawer as b } from "../../../components/navigation/drawer/StyledDrawer.js";
 import { useBackNavigationClose as h } from "../../hooks/useBackNavigationClose.hook.js";
-import { useEffect as C, useState as a } from "react";
-import { Fragment as E, jsx as t, jsxs as w } from "react/jsx-runtime";
-var L = (m) => {
-  const s = x(), [e, i] = a(null), [p, d] = a(!1), [f, c] = a(!1), u = (r) => {
-    i(r.currentTarget), P(r, d);
+import { useEffect as C, useState as s } from "react";
+import { Fragment as D, jsx as t, jsxs as E } from "react/jsx-runtime";
+var L = (p) => {
+  const i = x(), [e, c] = s(null), [m, d] = s(!1), [f, l] = s(!1), u = (r) => {
+    c(r.currentTarget), P(r, d);
   }, o = () => {
-    c(!0), i(null);
+    l(!0), c(null);
   };
   C(() => {
     if (!e) return;
-    const r = (l) => {
-      document.activeElement === e && (l.key === "Escape" || l.key === "Tab") && o();
+    const r = (n) => {
+      document.activeElement === e && (n.key === "Escape" ? (n.preventDefault(), n.stopPropagation(), o()) : n.key === "Tab" && o());
     };
     return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
   }, [e]), h({
     open: !!e,
     onClose: o
   });
-  const n = {
-    ...m,
+  const a = {
+    ...p,
     validateOnCalendarClose: f,
-    onValidatedOnce: () => c(!1)
+    onValidatedOnce: () => l(!1)
   };
-  return /* @__PURE__ */ w(E, { children: [
+  return /* @__PURE__ */ E(D, { children: [
     /* @__PURE__ */ t(y, {
-      datePickerProps: n,
+      datePickerProps: a,
       onClick: u
     }),
-    !s && /* @__PURE__ */ t(v, {
-      datePickerProps: { ...n },
+    !i && /* @__PURE__ */ t(v, {
+      datePickerProps: { ...a },
       popoverProps: {
         open: !!e,
         anchorEl: e,
         onClose: o
       },
-      positionAbove: p
+      positionAbove: m
     }),
-    s && /* @__PURE__ */ t(b, {
+    i && /* @__PURE__ */ t(b, {
       anchor: "bottom",
       open: !!e,
       onClose: o,
@@ -50,7 +50,7 @@ var L = (m) => {
       children: /* @__PURE__ */ t("div", {
         className: "mx-auto max-w-[360px] px-2 pb-[max(1.5rem,env(safe-area-inset-bottom))]",
         children: /* @__PURE__ */ t(k, {
-          datePickerProps: { ...n },
+          datePickerProps: { ...a },
           popoverProps: {
             open: !!e,
             anchorEl: e,

package/dist/datetime/components/time-picker/StyledTimePicker.js

@@ -1,5 +1,5 @@
-import { useIsMobileView as O } from "../../hooks/useWindowWidthSize.hook.js";
-import { StyledDrawer as D } from "../../../components/navigation/drawer/StyledDrawer.js";
+import { useIsMobileView as N } from "../../hooks/useWindowWidthSize.hook.js";
+import { StyledDrawer as O } from "../../../components/navigation/drawer/StyledDrawer.js";
 import { useBackNavigationClose as I } from "../../hooks/useBackNavigationClose.hook.js";
 import { usePopupState as j } from "../../../hooks/usePopupState.js";
 import { ClickAwayListener as A } from "../../../components/mui-compat/ClickAwayListener.js";
@@ -7,97 +7,97 @@ import { TimePickerPanel as B } from "./components/TimePickerPanel.js";
 import { TimePickerPopper as M } from "./TimePickerPopper.js";
 import { getTimeFromValue as S } from "./helpers/getTimeFromValue.js";
 import { TimePickerInput as F } from "./TimePickerInput.js";
-import { useEffect as K, useState as v } from "react";
-import { jsx as o, jsxs as C } from "react/jsx-runtime";
-import { format as y, isBefore as q, isValid as z } from "date-fns";
-var te = (n) => {
-  const { value: a, onSelect: r, notBeforeTime: u } = n, t = j({
+import { useEffect as K, useState as y } from "react";
+import { jsx as r, jsxs as C } from "react/jsx-runtime";
+import { format as k, isBefore as q, isValid as z } from "date-fns";
+var oe = (i) => {
+  const { value: a, onSelect: n, notBeforeTime: u } = i, o = j({
     variant: "popper",
     popupId: "time-picker-popper"
-  }), c = O();
+  }), c = N();
   I({
-    open: c && t.isOpen,
-    onClose: t.close
+    open: c && o.isOpen,
+    onClose: o.close
   });
-  const { isOpen: k, anchorEl: V, close: w } = t;
+  const { isOpen: V, anchorEl: w, close: p } = o;
   K(() => {
-    if (!k || c) return;
-    const e = (i) => {
-      V?.contains(document.activeElement) && (i.key === "Escape" || i.key === "Tab") && w();
+    if (!V || c) return;
+    const e = (t) => {
+      w?.contains(document.activeElement) && (t.key === "Escape" ? (t.preventDefault(), t.stopPropagation(), p()) : t.key === "Tab" && p());
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
   }, [
-    k,
     V,
     w,
+    p,
     c
   ]);
-  const E = a ? y(a, "HH:mm") : "", [b, m] = v(E), [g, l] = v(!1), [H, s] = v(!0), p = g ? b : E, f = (e) => !e || !u || !z(u) || !q(e, u), x = p.length === 5 ? S(p, a) : null, L = x ? f(x) : !0, N = (e) => {
-    const i = e.target.value;
-    if (l(!0), m(i), i.length !== 5) {
+  const E = a ? k(a, "HH:mm") : "", [b, m] = y(E), [g, l] = y(!1), [D, s] = y(!0), f = g ? b : E, d = (e) => !e || !u || !z(u) || !q(e, u), x = f.length === 5 ? S(f, a) : null, H = x ? d(x) : !0, L = (e) => {
+    const t = e.target.value;
+    if (l(!0), m(t), t.length !== 5) {
       s(!1);
       return;
     }
-    const h = S(i, a);
-    if (!h) {
-      r(void 0), s(!1);
+    const v = S(t, a);
+    if (!v) {
+      n(void 0), s(!1);
       return;
     }
-    s(!0), f(h) ? (r(h), l(!1), t.close()) : r(void 0);
-  }, T = (e) => {
-    if (s(!0), f(e)) {
-      r(e), m(e ? y(e, "HH:mm") : ""), l(!1);
+    s(!0), d(v) ? (n(v), l(!1), o.close()) : n(void 0);
+  }, P = (e) => {
+    if (s(!0), d(e)) {
+      n(e), m(e ? k(e, "HH:mm") : ""), l(!1);
       return;
     }
-    r(void 0), m(e ? y(e, "HH:mm") : ""), l(!0);
-  }, P = () => {
-    r(void 0), m(""), l(!1), s(!0);
-  }, d = /* @__PURE__ */ o(F, {
-    ...n,
-    popupState: t,
-    localValue: p,
-    isValidTime: H,
-    isValidEndTime: L,
-    handleChange: N
+    n(void 0), m(e ? k(e, "HH:mm") : ""), l(!0);
+  }, T = () => {
+    n(void 0), m(""), l(!1), s(!0);
+  }, h = /* @__PURE__ */ r(F, {
+    ...i,
+    popupState: o,
+    localValue: f,
+    isValidTime: D,
+    isValidEndTime: H,
+    handleChange: L
   });
-  return n.disabled || n.readOnly ? d : c ? /* @__PURE__ */ C("div", {
+  return i.disabled || i.readOnly ? h : c ? /* @__PURE__ */ C("div", {
     className: "relative h-auto w-auto",
-    children: [/* @__PURE__ */ o("div", {
+    children: [/* @__PURE__ */ r("div", {
       className: "m-0 flex h-fit items-center justify-center p-0",
-      children: d
-    }), /* @__PURE__ */ o(D, {
+      children: h
+    }), /* @__PURE__ */ r(O, {
       anchor: "bottom",
-      open: t.isOpen,
-      onClose: t.close,
-      anchorEl: t.anchorEl,
-      children: /* @__PURE__ */ o("div", {
+      open: o.isOpen,
+      onClose: o.close,
+      anchorEl: o.anchorEl,
+      children: /* @__PURE__ */ r("div", {
         className: "mx-auto w-full max-w-[360px] px-4 pb-[max(1rem,env(safe-area-inset-bottom))] pt-2",
-        children: /* @__PURE__ */ o(B, {
-          dataTest: n.dataTest,
+        children: /* @__PURE__ */ r(B, {
+          dataTest: i.dataTest,
           value: a,
-          onSelect: T,
-          handleClear: P,
-          onConfirm: t.close
+          onSelect: P,
+          handleClear: T,
+          onConfirm: o.close
         })
       })
     })]
-  }) : /* @__PURE__ */ o(A, {
+  }) : /* @__PURE__ */ r(A, {
     mouseEvent: "onMouseDown",
-    onClickAway: t.close,
+    onClickAway: o.close,
     children: /* @__PURE__ */ C("div", {
       className: "relative h-auto w-auto",
-      children: [/* @__PURE__ */ o("div", {
+      children: [/* @__PURE__ */ r("div", {
         className: "m-0 flex h-fit items-center justify-center p-0",
-        children: d
-      }), t.isOpen && /* @__PURE__ */ o(M, {
-        ...n,
-        popupState: t,
-        handleClear: P,
-        onSelect: T
+        children: h
+      }), o.isOpen && /* @__PURE__ */ r(M, {
+        ...i,
+        popupState: o,
+        handleClear: T,
+        onSelect: P
       })]
     })
   });
 };
 export {
-  te as StyledTimePicker
+  oe as StyledTimePicker
 };

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.87.3",
+    "version": "3.87.5",
     "type": "module",
     "sideEffects": [
         "**/*.css",