asma-ui-core 3.108.3 → 3.109.0

package/dist/components/utils/popover/PopoverSheet.js

@@ -3,54 +3,59 @@ import { firstTabbable as se } from "../../../helpers/focusable.js";
 import { TOP_LAYER_PROPS as ae, TOP_LAYER_RESET_STYLE as le, getOpenModalDialogAncestor as ce, shouldUsePopoverTopLayer as de, useTopLayerRef as ue } from "../../../hooks/useTopLayer.hook.js";
 import { StyledButton as fe } from "../../inputs/button/StyledButton.js";
 import { useMobileMediaQuery as pe } from "../../../hooks/useMediaQuery.hook.js";
-import { useDebouncedValue as me } from "../../../hooks/useDebouncedValue.hook.js";
-import { useFocusTrap as ge } from "../../../hooks/useFocusTrap.hook.js";
-import { formatResultsLabel as he } from "../bottom-sheet/formatResultsLabel.js";
-import { StyledBottomSheet as ve } from "../bottom-sheet/StyledBottomSheet.js";
-import { PopoverAnatomy as xe } from "./PopoverAnatomy.js";
-import { useCallback as v, useEffect as R, useId as _e, useRef as T, useState as l } from "react";
-import { Fragment as N, jsx as c, jsxs as B } from "react/jsx-runtime";
-import { FloatingPortal as be, autoUpdate as Pe, flip as ye, offset as Re, shift as Te, size as Ee, useDismiss as Me, useFloating as Se, useInteractions as we, useMergeRefs as Ae } from "@floating-ui/react";
-var Oe = 240, Fe = {
+import { OverlayBackOwnerContext as me, useBackCloses as ge } from "../../../hooks/useBackCloses.hook.js";
+import { useDebouncedValue as ve } from "../../../hooks/useDebouncedValue.hook.js";
+import { useFocusTrap as he } from "../../../hooks/useFocusTrap.hook.js";
+import { formatResultsLabel as xe } from "../bottom-sheet/formatResultsLabel.js";
+import { StyledBottomSheet as _e } from "../bottom-sheet/StyledBottomSheet.js";
+import { PopoverAnatomy as Pe } from "./PopoverAnatomy.js";
+import { useCallback as x, useEffect as w, useId as be, useRef as O, useState as d } from "react";
+import { Fragment as D, jsx as a, jsxs as N } from "react/jsx-runtime";
+import { FloatingPortal as ye, autoUpdate as Re, flip as we, offset as Oe, shift as Te, size as Ee, useDismiss as Me, useFloating as Se, useInteractions as Ae, useMergeRefs as Fe } from "@floating-ui/react";
+var Ie = 240, Ce = {
   info: 472,
   action: 472
-}, Ie = 0.6, X = "calc(100vw - 32px)", Le = (n, d, u) => Pe(n, d, u, { elementResize: !1 }), Ve = ({ dataTest: n, renderTrigger: d, variant: u = "info", title: f, children: E, viewResultsAction: M, resetAction: S, footerActions: w, resultCount: x, closeLabel: A = "Lukk", ariaLabel: O, onOpenChange: F, className: I }) => {
-  const a = _e(), L = `${a}-title`, [o, z] = l(!1), [H, K] = l(), [U, Y] = l(), p = pe(), t = u === "action", $ = p && !t, k = p && t, m = v((e) => {
-    z(e), F?.(e);
-  }, [F]), { refs: _, floatingStyles: j, context: q } = Se({
+}, ke = 0.6, X = "calc(100vw - 32px)", Le = (i, u, f) => Re(i, u, f, { elementResize: !1 }), Je = ({ dataTest: i, renderTrigger: u, variant: f = "info", title: p, children: T, viewResultsAction: E, resetAction: M, footerActions: S, resultCount: _, closeLabel: A = "Lukk", ariaLabel: F, onOpenChange: I, className: C }) => {
+  const l = be(), k = `${l}-title`, [o, q] = d(!1), [L, z] = d(), [K, U] = d(), m = pe(), t = f === "action", Y = m && !t, H = m && t, g = x((e) => {
+    q(e), I?.(e);
+  }, [I]), { refs: P, floatingStyles: $, context: j } = Se({
     open: o,
-    onOpenChange: m,
+    onOpenChange: g,
     placement: "bottom-start",
     strategy: "fixed",
     whileElementsMounted: Le,
     middleware: [
-      Re(8),
-      ...$ ? [] : [ye({ padding: 8 })],
+      Oe(8),
+      ...Y ? [] : [we({ padding: 8 })],
       Te({ padding: 8 }),
       Ee({
         padding: 8,
         apply({ availableHeight: e }) {
-          Y(Math.min(e, Math.round(window.innerHeight * Ie)));
+          U(Math.min(e, Math.round(window.innerHeight * ke)));
         }
       })
     ]
-  }), { getFloatingProps: V } = we([Me(q, {
-    enabled: !k,
+  }), { getFloatingProps: V } = Ae([Me(j, {
+    enabled: !H,
     escapeKey: !0,
     outsidePress: (e) => {
-      const s = g.current;
+      const s = v.current;
       return !(s && e.target instanceof Node && s.contains(e.target));
     }
-  })]), b = de(H), C = T(null), [r, G] = l(null), Q = v((e) => {
-    C.current = e, G(e);
-  }, []), J = Ae([ue(_.setFloating, b), Q]), g = T(null), Z = v((e) => {
-    g.current = e, _.setReference(e);
-  }, [_]), i = v(() => {
-    m(!1);
-  }, [m]);
-  ge(o && t && r !== null, C);
-  const [W, ee] = l(!1);
-  R(() => {
+  })]), b = de(L), c = O(null), [r, G] = d(null), Q = x((e) => {
+    c.current = e, G(e);
+  }, []), J = Fe([ue(P.setFloating, b), Q]), v = O(null), Z = x((e) => {
+    v.current = e, P.setReference(e);
+  }, [P]), n = x(() => {
+    g(!1);
+  }, [g]);
+  ge({
+    active: o,
+    requestClose: n,
+    ownerRef: c
+  }), he(o && t && r !== null, c);
+  const [W, ee] = d(!1);
+  w(() => {
     if (!r || t && !W) return;
     const e = requestAnimationFrame(() => {
       (t ? se(r) : r)?.focus({ preventScroll: !0 });
@@ -62,11 +67,11 @@ var Oe = 240, Fe = {
     r,
     t,
     W
-  ]), R(() => {
+  ]), w(() => {
     if (!r || t) return;
     const e = (s) => {
-      const y = s.relatedTarget;
-      y instanceof Node && (r.contains(y) || g.current?.contains(y)) || i();
+      const R = s.relatedTarget;
+      R instanceof Node && (r.contains(R) || v.current?.contains(R)) || n();
     };
     return r.addEventListener("focusout", e), () => {
       r.removeEventListener("focusout", e);
@@ -74,17 +79,17 @@ var Oe = 240, Fe = {
   }, [
     r,
     t,
-    i
+    n
   ]);
-  const P = T(!1);
-  R(() => {
+  const y = O(!1);
+  w(() => {
     if (o) {
-      P.current = !0;
+      y.current = !0;
       return;
     }
-    if (!P.current) return;
-    P.current = !1;
-    const e = g.current;
+    if (!y.current) return;
+    y.current = !1;
+    const e = v.current;
     if (!e) return;
     const s = requestAnimationFrame(() => {
       document.activeElement === document.body && e.focus();
@@ -93,79 +98,84 @@ var Oe = 240, Fe = {
       cancelAnimationFrame(s);
     };
   }, [o]);
-  const D = {
+  const B = {
     ref: Z,
     isOpen: o,
     triggerProps: {
       onClick: (e) => {
         if (o) {
-          i();
+          n();
           return;
         }
-        K(ce(e.currentTarget)), ee(e.detail === 0), m(!0);
+        z(ce(e.currentTarget)), ee(e.detail === 0), g(!0);
       },
       "aria-expanded": o,
-      "aria-controls": o ? a : void 0,
+      "aria-controls": o ? l : void 0,
       "aria-haspopup": t ? "dialog" : void 0,
-      "aria-describedby": !t && o ? a : void 0
+      "aria-describedby": !t && o ? l : void 0
     }
-  }, h = (e) => typeof e == "function" ? e({ close: i }) : e, te = me(x, 500), oe = M ?? (x === void 0 ? void 0 : /* @__PURE__ */ c(fe, {
-    dataTest: `${n}-view-results`,
+  }, h = (e) => typeof e == "function" ? e({ close: n }) : e, te = ve(_, 500), oe = E ?? (_ === void 0 ? void 0 : /* @__PURE__ */ a(fe, {
+    dataTest: `${i}-view-results`,
     type: "button",
     variant: "text",
-    onClick: i,
-    children: he(te)
-  })), re = p ? X : Fe[u], ne = p ? X : void 0;
-  return k ? /* @__PURE__ */ B(N, { children: [d(D), /* @__PURE__ */ c(ve, {
-    id: a,
-    dataTest: n,
+    onClick: n,
+    children: xe(te)
+  })), re = m ? X : Ce[f], ne = m ? X : void 0;
+  return H ? /* @__PURE__ */ N(D, { children: [u(B), /* @__PURE__ */ a(_e, {
+    id: l,
+    dataTest: i,
     open: o,
-    onClose: i,
-    title: f,
-    ariaLabel: O,
-    viewResultsAction: M,
-    resetAction: S,
-    footerActions: w,
-    resultCount: x,
+    onClose: n,
+    registerBackClose: !1,
+    ownerRef: c,
+    title: p,
+    ariaLabel: F,
+    viewResultsAction: E,
+    resetAction: M,
+    footerActions: S,
+    resultCount: _,
     closeLabel: A,
-    className: I,
-    children: E
-  })] }) : /* @__PURE__ */ B(N, { children: [d(D), o && /* @__PURE__ */ c(be, {
-    root: H,
-    children: /* @__PURE__ */ c("div", {
+    className: C,
+    children: T
+  })] }) : /* @__PURE__ */ N(D, { children: [u(B), o && /* @__PURE__ */ a(ye, {
+    root: L,
+    children: /* @__PURE__ */ a("div", {
       ...V(),
       ref: J,
-      id: a,
-      "data-test": n,
-      "data-testid": n,
+      id: l,
+      "data-test": i,
+      "data-testid": i,
       role: t ? "dialog" : void 0,
-      "aria-labelledby": t && f ? L : void 0,
-      "aria-label": t && !f ? O : void 0,
+      "aria-labelledby": t && p ? k : void 0,
+      "aria-label": t && !p ? F : void 0,
       tabIndex: t ? void 0 : -1,
       ...b ? ae : {},
       style: {
         ...b ? le : {},
-        ...j,
-        minWidth: Oe,
+        ...$,
+        minWidth: Ie,
         width: ne,
         maxWidth: re,
-        maxHeight: U
+        maxHeight: K
       },
-      className: ie("z-[1300]", "box-border flex flex-col overflow-hidden rounded-lg bg-white text-delta-700 outline-none shadow-[inset_0_0_0_1px_var(--colors-delta-300),0px_4px_40px_0px_#22213366]", I),
-      children: /* @__PURE__ */ c(xe, {
-        dataTest: n,
-        title: f,
-        titleId: L,
-        viewResultsAction: h(oe),
-        resetAction: h(S),
-        footerActions: h(w),
-        closeLabel: A,
-        onClose: i,
-        children: h(E)
+      className: ie("z-[1300]", "box-border flex flex-col overflow-hidden rounded-lg bg-white text-delta-700 outline-none shadow-[inset_0_0_0_1px_var(--colors-delta-300),0px_4px_40px_0px_#22213366]", C),
+      children: /* @__PURE__ */ a(me.Provider, {
+        value: c,
+        children: /* @__PURE__ */ a(Pe, {
+          dataTest: i,
+          title: p,
+          titleId: k,
+          viewResultsAction: h(oe),
+          resetAction: h(M),
+          footerActions: h(S),
+          closeLabel: A,
+          onClose: n,
+          children: h(T)
+        })
       })
     })
   })] });
 };
 export {
-  Ve as PopoverSheet
+  Je as PopoverSheet
 };

package/dist/components/utils/popover/StyledPopover.js

@@ -1,124 +1,134 @@
 import { cn as Y } from "../../../helpers/cn.js";
-import { resolveSx as R } from "../../../helpers/sx.js";
-import { tabbableWithin as y } from "../../../helpers/focusable.js";
-import { TOP_LAYER_PROPS as W, TOP_LAYER_RESET_STYLE as $, getOpenModalDialogAncestor as j, shouldUsePopoverTopLayer as q, useTopLayerRef as B } from "../../../hooks/useTopLayer.hook.js";
-import { useEffect as P, useMemo as G, useRef as J, useState as h } from "react";
-import { jsx as T } from "react/jsx-runtime";
-import { FloatingPortal as Q, autoUpdate as V, flip as X, offset as Z, shift as C, useDismiss as ee, useFloating as te, useInteractions as oe, useMergeRefs as ne } from "@floating-ui/react";
-var re = {
+import { resolveSx as h } from "../../../helpers/sx.js";
+import { tabbableWithin as g } from "../../../helpers/focusable.js";
+import { TOP_LAYER_PROPS as W, TOP_LAYER_RESET_STYLE as $, getOpenModalDialogAncestor as j, shouldUsePopoverTopLayer as q, useTopLayerRef as C } from "../../../hooks/useTopLayer.hook.js";
+import { OverlayBackOwnerContext as G, useBackCloses as J } from "../../../hooks/useBackCloses.hook.js";
+import { useEffect as w, useMemo as Q, useRef as V, useState as x } from "react";
+import { jsx as P } from "react/jsx-runtime";
+import { FloatingPortal as X, autoUpdate as Z, flip as ee, offset as te, shift as oe, useDismiss as ne, useFloating as re, useInteractions as se, useMergeRefs as ie } from "@floating-ui/react";
+var ae = {
   vertical: "bottom",
   horizontal: "left"
-}, se = {
+}, ce = {
   vertical: "top",
   horizontal: "left"
-}, ie = (o, t) => `${t.vertical === "bottom" ? "top" : t.vertical === "top" ? "bottom" : o.vertical === "top" ? "top" : "bottom"}${o.horizontal === "left" ? "-start" : o.horizontal === "right" ? "-end" : ""}`, ve = ({ open: o, anchorEl: t, onClose: u, anchorOrigin: b = re, transformOrigin: L = se, id: x, className: D, sx: K, slotProps: l, onClick: S, children: _, keepMounted: E = !1, tabIntoContent: d = !0 }) => {
-  const F = G(() => ie(b, L), [b, L]), [w, O] = h(o), c = J(!1);
-  o && !w && O(!0);
-  const m = o || E && w, p = j(t), [v, k] = h(p);
-  t && v !== p && k(p);
-  const { refs: a, floatingStyles: M, context: A } = te({
-    open: o,
-    placement: F,
+}, fe = (t, o) => `${o.vertical === "bottom" ? "top" : o.vertical === "top" ? "bottom" : t.vertical === "top" ? "top" : "bottom"}${t.horizontal === "left" ? "-start" : t.horizontal === "right" ? "-end" : ""}`, Pe = ({ open: t, anchorEl: o, onClose: c, anchorOrigin: b = ae, transformOrigin: L = ce, id: D, className: T, sx: K, slotProps: l, onClick: k, children: E, keepMounted: O = !1, tabIntoContent: d = !0, registerBackClose: S = !0 }) => {
+  const _ = Q(() => fe(b, L), [b, L]), [R, F] = x(t), f = V(!1);
+  t && !R && F(!0);
+  const m = t || O && R, p = j(o), [v, M] = x(p);
+  o && v !== p && M(p);
+  const { refs: i, floatingStyles: A, context: N } = re({
+    open: t,
+    placement: _,
     strategy: "fixed",
-    whileElementsMounted: V,
-    elements: { reference: t ?? void 0 },
+    whileElementsMounted: Z,
+    elements: { reference: o ?? void 0 },
     middleware: [
-      Z(4),
-      X({ padding: 8 }),
-      C({ padding: 8 })
+      te(4),
+      ee({ padding: 8 }),
+      oe({ padding: 8 })
     ],
     onOpenChange: (e, r, n) => {
-      e || u?.(r ?? {}, n === "escape-key" ? "escapeKeyDown" : "backdropClick");
+      e || c?.(r ?? {}, n === "escape-key" ? "escapeKeyDown" : "backdropClick");
     }
-  }), { getFloatingProps: N } = oe([ee(A, {
+  }), { getFloatingProps: z } = se([ne(N, {
     outsidePress: (e) => {
       const r = e.target;
-      return !(t instanceof Element && r instanceof Node && t.contains(r));
+      return !(o instanceof Element && r instanceof Node && o.contains(r));
     },
     escapeKey: !0
-  })]), f = q(v), z = ne([B(a.setFloating, f)]);
-  P(() => {
-    if (!o) return;
-    const e = t instanceof HTMLElement ? t : null, r = () => a.floating.current?.contains(document.activeElement) ?? !1;
+  })]);
+  J({
+    active: t && S,
+    requestClose: (e) => c ? c(e ?? new Event("overlayBack"), "escapeKeyDown") : !1,
+    ownerRef: i.floating
+  });
+  const u = q(v), H = ie([C(i.setFloating, u)]);
+  w(() => {
+    if (!t) return;
+    const e = o instanceof HTMLElement ? o : null, r = () => i.floating.current?.contains(document.activeElement) ?? !1;
     let n = r();
     const s = () => {
       n = r();
     };
     return document.addEventListener("focusin", s), () => {
       document.removeEventListener("focusin", s);
-      const i = document.activeElement, g = !i || i === document.body || r();
-      n && g && e?.isConnected && e.focus({ preventScroll: !0 });
+      const a = document.activeElement, y = !a || a === document.body || r();
+      n && y && e?.isConnected && e.focus({ preventScroll: !0 });
     };
   }, [
-    o,
     t,
-    a.floating
-  ]), P(() => {
-    if (!o) return;
+    o,
+    i.floating
+  ]), w(() => {
+    if (!t) return;
     const e = (n) => {
-      if (c.current = n.key === "Tab", !d || !c.current || n.shiftKey || n.defaultPrevented) return;
-      const s = a.floating.current;
-      if (!s || !(t instanceof Element) || !t.contains(document.activeElement)) return;
-      const [i] = y(s);
-      i && (n.preventDefault(), i.focus({ preventScroll: !0 }), c.current = !1);
+      if (f.current = n.key === "Tab", !d || !f.current || n.shiftKey || n.defaultPrevented) return;
+      const s = i.floating.current;
+      if (!s || !(o instanceof Element) || !o.contains(document.activeElement)) return;
+      const [a] = g(s);
+      a && (n.preventDefault(), a.focus({ preventScroll: !0 }), f.current = !1);
     }, r = (n) => {
-      const s = n.target, i = s instanceof Node && ((a.floating.current?.contains(s) ?? !1) || t instanceof Element && t.contains(s));
-      c.current && !i && u?.(n, "tabKeyDown"), c.current = !1;
+      const s = n.target, a = s instanceof Node && ((i.floating.current?.contains(s) ?? !1) || o instanceof Element && o.contains(s));
+      f.current && !a && c?.(n, "tabKeyDown"), f.current = !1;
     };
     return document.addEventListener("keydown", e, !0), document.addEventListener("focusin", r), () => {
       document.removeEventListener("keydown", e, !0), document.removeEventListener("focusin", r);
     };
   }, [
-    o,
     t,
-    u,
-    a.floating,
+    o,
+    c,
+    i.floating,
     d
   ]);
-  const H = o ? N({
-    onClick: S,
+  const U = t ? z({
+    onClick: k,
     onKeyDown: (e) => {
-      if (e.key !== "Tab" || e.defaultPrevented || !(t instanceof HTMLElement)) return;
-      const r = e.currentTarget, n = y(r), s = n.indexOf(document.activeElement);
+      if (e.key !== "Tab" || e.defaultPrevented || !(o instanceof HTMLElement)) return;
+      const r = e.currentTarget, n = g(r), s = n.indexOf(document.activeElement);
       if (s === -1 || (e.shiftKey ? s !== 0 : s !== n.length - 1)) return;
       e.preventDefault();
-      const i = y(document).filter((I) => !r.contains(I)), g = i[i.indexOf(t) + (e.shiftKey ? -1 : 1)], U = (d && e.shiftKey ? void 0 : g) ?? t;
-      c.current = !1, U.focus({ preventScroll: !0 }), u?.(e, "tabKeyDown");
+      const a = g(document).filter((I) => !r.contains(I)), y = a[a.indexOf(o) + (e.shiftKey ? -1 : 1)], B = (d && e.shiftKey ? void 0 : y) ?? o;
+      f.current = !1, B.focus({ preventScroll: !0 }), c?.(e, "tabKeyDown");
     }
   }) : {};
-  return P(() => {
-    if (!m || !f) return;
-    const e = a.floating.current;
+  return w(() => {
+    if (!m || !u) return;
+    const e = i.floating.current;
     if (!(!e || typeof e.showPopover != "function"))
       try {
-        o && !e.matches(":popover-open") && e.showPopover(), !o && e.matches(":popover-open") && e.hidePopover();
+        t && !e.matches(":popover-open") && e.showPopover(), !t && e.matches(":popover-open") && e.hidePopover();
       } catch {
       }
   }, [
-    o,
+    t,
     m,
-    f,
-    a.floating
-  ]), m ? /* @__PURE__ */ T(Q, {
+    u,
+    i.floating
+  ]), m ? /* @__PURE__ */ P(X, {
     root: v,
-    children: /* @__PURE__ */ T("div", {
-      ref: z,
-      id: x,
-      ...f ? W : {},
+    children: /* @__PURE__ */ P("div", {
+      ref: H,
+      id: D,
+      ...u ? W : {},
       style: {
-        ...f ? $ : {},
-        ...o ? M : {},
-        ...R(K),
-        ...R(l?.paper?.sx),
+        ...u ? $ : {},
+        ...t ? A : {},
+        ...h(K),
+        ...h(l?.paper?.sx),
         ...l?.paper?.style,
-        ...o ? null : { display: "none" }
+        ...t ? null : { display: "none" }
       },
-      ...H,
-      className: Y("z-[1300] overflow-auto rounded bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.15)]", D ?? "my-1", l?.paper?.className),
-      children: _
+      ...U,
+      className: Y("z-[1300] overflow-auto rounded bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.15)]", T ?? "my-1", l?.paper?.className),
+      children: /* @__PURE__ */ P(G.Provider, {
+        value: i.floating,
+        children: E
+      })
     })
   }) : null;
 };
 export {
-  ve as StyledPopover
+  Pe as StyledPopover
 };

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

@@ -1,36 +1,44 @@
-import { setPickerPosition as u } from "./helpers.js";
-import { StyledDayPicker as k } from "./components/StyledDayPicker.js";
-import { StyledCalendarPicker as y } from "./components/StyledCalendarPicker.js";
-import { DatePickerInputIndex as v } from "./components/DatePickerInputIndex.js";
+import { isOverlayBackEnabled as k, useBackCloses as P } from "../../../hooks/useBackCloses.hook.js";
+import { setPickerPosition as v } from "./helpers.js";
+import { StyledDayPicker as y } from "./components/StyledDayPicker.js";
+import { StyledCalendarPicker as C } from "./components/StyledCalendarPicker.js";
+import { DatePickerInputIndex as b } from "./components/DatePickerInputIndex.js";
 import { useIsMobileView as x } from "../../hooks/useWindowWidthSize.hook.js";
-import { StyledDrawer as b } from "../../../components/navigation/drawer/StyledDrawer.js";
-import { useEffect as h, useState as s } from "react";
-import { Fragment as C, jsx as t, jsxs as D } from "react/jsx-runtime";
-var j = (p) => {
-  const i = x(), [e, c] = s(null), [m, d] = s(!1), [f, l] = s(!1), P = (r) => {
-    c(r.currentTarget), u(r, d);
+import { StyledDrawer as h } from "../../../components/navigation/drawer/StyledDrawer.js";
+import { useBackNavigationClose as E } from "../../hooks/useBackNavigationClose.hook.js";
+import { useEffect as D, useState as n } from "react";
+import { Fragment as g, jsx as t, jsxs as w } from "react/jsx-runtime";
+var N = (p) => {
+  const i = x(), [e, l] = n(null), [m, d] = n(!1), [f, c] = n(!1), u = (r) => {
+    l(r.currentTarget), v(r, d);
   }, o = () => {
-    l(!0), c(null);
+    c(!0), l(null);
   };
-  h(() => {
+  D(() => {
     if (!e) return;
-    const r = (n) => {
-      document.activeElement === e && (n.key === "Escape" ? (n.preventDefault(), n.stopPropagation(), o()) : n.key === "Tab" && o());
+    const r = (a) => {
+      document.activeElement === e && (a.key === "Escape" ? (a.preventDefault(), a.stopPropagation(), o()) : a.key === "Tab" && o());
     };
     return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
-  }, [e]);
-  const a = {
+  }, [e]), P({
+    active: !!e,
+    requestClose: o
+  }), E({
+    open: !!e && !k(),
+    onClose: o
+  });
+  const s = {
     ...p,
     validateOnCalendarClose: f,
-    onValidatedOnce: () => l(!1)
+    onValidatedOnce: () => c(!1)
   };
-  return /* @__PURE__ */ D(C, { children: [
-    /* @__PURE__ */ t(v, {
-      datePickerProps: a,
-      onClick: P
+  return /* @__PURE__ */ w(g, { children: [
+    /* @__PURE__ */ t(b, {
+      datePickerProps: s,
+      onClick: u
     }),
-    !i && /* @__PURE__ */ t(y, {
-      datePickerProps: { ...a },
+    !i && /* @__PURE__ */ t(C, {
+      datePickerProps: { ...s },
       popoverProps: {
         open: !!e,
         anchorEl: e,
@@ -38,15 +46,16 @@ var j = (p) => {
       },
       positionAbove: m
     }),
-    i && /* @__PURE__ */ t(b, {
+    i && /* @__PURE__ */ t(h, {
       anchor: "bottom",
       open: !!e,
       onClose: o,
       anchorEl: e,
+      registerBackClose: !1,
       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: { ...a },
+        children: /* @__PURE__ */ t(y, {
+          datePickerProps: { ...s },
           popoverProps: {
             open: !!e,
             anchorEl: e,
@@ -58,5 +67,5 @@ var j = (p) => {
   ] });
 };
 export {
-  j as StyledDatePicker
+  N as StyledDatePicker
 };

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

@@ -1,30 +1,31 @@
 import { StyledPopover as i } from "../../../../components/utils/popover/StyledPopover.js";
 import { StyledDayPicker as c } from "./StyledDayPicker.js";
 import { jsx as r } from "react/jsx-runtime";
-var h = ({ datePickerProps: e, popoverProps: t, positionAbove: o }) => {
-  const { open: l, anchorEl: n, onClose: a } = t;
+var d = ({ datePickerProps: o, popoverProps: t, positionAbove: e }) => {
+  const { open: l, anchorEl: a, onClose: n } = t;
   return /* @__PURE__ */ r(i, {
     open: l,
-    anchorEl: n,
-    onClose: a,
+    anchorEl: a,
+    onClose: n,
     tabIntoContent: !1,
+    registerBackClose: !1,
     anchorOrigin: {
-      vertical: o ? "top" : 50,
+      vertical: e ? "top" : 50,
       horizontal: "left"
     },
     transformOrigin: {
-      vertical: o ? "bottom" : "top",
+      vertical: e ? "bottom" : "top",
       horizontal: "left"
     },
     children: /* @__PURE__ */ r("div", {
       className: "p-4",
       children: /* @__PURE__ */ r(c, {
-        datePickerProps: e,
+        datePickerProps: o,
         popoverProps: t
       })
     })
   });
 };
 export {
-  h as StyledCalendarPicker
+  d as StyledCalendarPicker
 };