asma-ui-core 3.86.1 → 3.86.2

package/dist/components/navigation/listbox/Listbox.js

@@ -1,80 +1,130 @@
-import { ClickAwayListener as p } from "../../mui-compat/ClickAwayListener.js";
-import { createContext as x, useContext as d, useEffect as b, useMemo as v, useState as m } from "react";
-import { jsx as s } from "react/jsx-runtime";
-var a = x(null), l = () => {
-  const t = d(a);
+import { tabbableWithin as L } from "../../../helpers/focusable.js";
+import { ClickAwayListener as $ } from "../../mui-compat/ClickAwayListener.js";
+import { Children as C, cloneElement as D, createContext as O, isValidElement as g, useCallback as B, useContext as S, useEffect as w, useId as M, useMemo as T, useRef as q, useState as k } from "react";
+import { jsx as x } from "react/jsx-runtime";
+var I = O(null), b = () => {
+  const t = S(I);
   if (!t) throw new Error("Listbox.Button/Options/Option must be rendered inside <Listbox>");
   return t;
-}, f = (t, e) => typeof t == "function" ? t(e) : t;
-function L({ value: t, onChange: e, children: r }) {
-  const [o, n] = m(!1), u = v(() => ({
-    open: o,
+}, h = (t, l) => typeof t == "function" ? t(l) : t;
+function K({ value: t, onChange: l, children: d }) {
+  const [s, u] = k(!1), [n, o] = k(null), r = `listbox-${M()}`, p = q(null), a = B(() => {
+    u(!1), o(null);
+  }, []);
+  w(() => {
+    if (!s) return;
+    const i = (y) => {
+      if (y.key !== "Escape") return;
+      const e = p.current;
+      e?.contains(document.activeElement) && e.querySelector('[role="combobox"]')?.focus(), a();
+    };
+    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+  }, [s, a]);
+  const f = T(() => ({
+    open: s,
     select: (i) => {
-      e(i), n(!1);
+      l(i), a();
     },
-    setOpen: n,
+    setOpen: u,
+    setActiveIndex: o,
+    activeIndex: n,
+    listboxId: r,
     value: t
   }), [
-    o,
+    s,
     t,
-    e
+    l,
+    n,
+    r,
+    a
   ]);
-  return b(() => {
-    if (!o) return;
-    const i = (c) => {
-      c.key === "Escape" && n(!1);
-    };
-    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
-  }, [o]), /* @__PURE__ */ s(a.Provider, {
-    value: u,
-    children: /* @__PURE__ */ s(p, {
-      onClickAway: () => n(!1),
-      children: /* @__PURE__ */ s("div", {
+  return /* @__PURE__ */ x(I.Provider, {
+    value: f,
+    children: /* @__PURE__ */ x($, {
+      onClickAway: a,
+      children: /* @__PURE__ */ x("div", {
+        ref: (i) => {
+          p.current = i;
+        },
+        onBlur: (i) => {
+          i.relatedTarget && !i.currentTarget.contains(i.relatedTarget) && a();
+        },
         className: "relative w-full",
-        children: r
+        children: d
       })
     })
   });
 }
-var y = ({ children: t, className: e, ...r }) => {
-  const { open: o, setOpen: n } = l();
-  return /* @__PURE__ */ s("button", {
+var N = ({ children: t, className: l, onClick: d, onKeyDown: s, ...u }) => {
+  const { activeIndex: n, listboxId: o, open: r, setActiveIndex: p, setOpen: a } = b(), f = () => Array.from(document.querySelectorAll(`#${CSS.escape(o)} [role="option"]:not([aria-disabled="true"])`)), i = (e) => {
+    const c = f();
+    if (c.length === 0) return;
+    const m = c.findIndex((E) => E.id === `${o}-option-${n}`), v = m === -1 ? e === 1 ? 0 : c.length - 1 : Math.min(Math.max(m + e, 0), c.length - 1);
+    p(Number(c[v].dataset.index));
+  };
+  return /* @__PURE__ */ x("button", {
+    ...u,
     type: "button",
-    className: e,
-    onClick: () => n(!o),
-    ...r,
-    children: f(t, { open: o })
+    className: l,
+    onClick: (e) => {
+      d?.(e), e.defaultPrevented || a(!r);
+    },
+    onKeyDown: (e) => {
+      if (s?.(e), !e.defaultPrevented)
+        if (e.key === "ArrowDown" || e.key === "ArrowUp")
+          e.preventDefault(), r ? i(e.key === "ArrowDown" ? 1 : -1) : (a(!0), requestAnimationFrame(() => i(e.key === "ArrowDown" ? 1 : -1)));
+        else if (r && (e.key === "Home" || e.key === "End")) {
+          e.preventDefault();
+          const c = f(), m = c[e.key === "Home" ? 0 : c.length - 1];
+          m && p(Number(m.dataset.index));
+        } else r && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), f().find((c) => c.id === `${o}-option-${n}`)?.click());
+    },
+    role: "combobox",
+    "aria-haspopup": "listbox",
+    "aria-expanded": r,
+    "aria-controls": r ? o : void 0,
+    "aria-activedescendant": r && n !== null ? `${o}-option-${n}` : void 0,
+    children: h(t, { open: r })
   });
-}, k = ({ children: t, className: e }) => {
-  const { open: r } = l();
-  return r ? /* @__PURE__ */ s("div", {
+}, P = ({ children: t, className: l }) => {
+  const { activeIndex: d, listboxId: s, open: u } = b();
+  return w(() => {
+    d !== null && document.getElementById(`${s}-option-${d}`)?.scrollIntoView({ block: "nearest" });
+  }, [d, s]), u ? /* @__PURE__ */ x("div", {
+    id: s,
     role: "listbox",
-    className: e,
-    children: t
+    className: l,
+    children: (() => {
+      let n = 0;
+      return C.toArray(t).map((o) => g(o) && o.type === A ? D(o, { optionIndex: n++ }) : o);
+    })()
   }) : null;
 };
-function w({ value: t, disabled: e, children: r, className: o }) {
-  const n = l(), u = n.value === t, i = () => {
-    e || n.select(t);
+function A({ value: t, disabled: l, children: d, className: s, optionIndex: u = 0 }) {
+  const n = b(), o = n.value === t, r = () => {
+    l || n.select(t);
   };
-  return /* @__PURE__ */ s("div", {
+  return /* @__PURE__ */ x("div", {
+    id: `${n.listboxId}-option-${u}`,
     role: "option",
-    "aria-selected": u,
-    "aria-disabled": e,
-    tabIndex: e ? void 0 : 0,
-    className: o,
-    onClick: i,
-    onKeyDown: (c) => {
-      (c.key === "Enter" || c.key === " ") && (c.preventDefault(), i());
+    "aria-selected": o,
+    "aria-disabled": l,
+    "data-index": u,
+    tabIndex: -1,
+    className: s,
+    onMouseDown: (p) => {
+      const a = p.target;
+      L(p.currentTarget).some((f) => f.contains(a)) || p.preventDefault();
     },
-    children: f(r, { selected: u })
+    onClick: r,
+    children: h(d, { selected: o })
   });
 }
-var h = Object.assign(L, {
-  Button: y,
-  Option: w,
-  Options: k
+var H = Object.assign(K, {
+  Button: N,
+  Option: A,
+  Options: P
 });
 export {
-  h as Listbox
+  H as Listbox
 };

package/dist/components/navigation/menu/StyledMenu.js

@@ -1,30 +1,34 @@
-import { cn as S } from "../../../helpers/cn.js";
-import { StyledPopover as f } from "../../utils/popover/StyledPopover.js";
-import { StyledMenuList as u } from "./StyledMenuList.js";
-import { jsx as p } from "react/jsx-runtime";
-var v = {
+import { cn as u } from "../../../helpers/cn.js";
+import { StyledPopover as c } from "../../utils/popover/StyledPopover.js";
+import { StyledMenuList as S } from "./StyledMenuList.js";
+import { jsx as o } from "react/jsx-runtime";
+var N = {
   border: "1px solid var(--colors-delta-300)",
   boxShadow: "0px 2px 4px 0px rgba(34, 33, 51, 0.15)"
-}, h = ({ open: a, anchorEl: o, onClose: t, anchorOrigin: l, transformOrigin: m, id: d, className: s, sx: x, classes: e, slotProps: r, autoFocus: i = !0, onClick: c, children: n, keepMounted: y }) => /* @__PURE__ */ p(f, {
-  open: a,
-  anchorEl: o,
+}, h = ({ open: p, anchorEl: m, onClose: t, anchorOrigin: l, transformOrigin: i, id: d, className: s, sx: x, classes: a, slotProps: e, autoFocus: n = !0, onClick: y, children: b, keepMounted: f }) => /* @__PURE__ */ o(c, {
+  open: p,
+  anchorEl: m,
   onClose: t,
+  tabIntoContent: !1,
   anchorOrigin: l,
-  transformOrigin: m,
+  transformOrigin: i,
   id: d,
   className: s,
   sx: x,
-  keepMounted: y,
+  keepMounted: f,
   slotProps: { paper: {
-    className: S("rounded", e?.paper, r?.paper?.className),
-    sx: [v, r?.paper?.sx],
-    style: r?.paper?.style
+    className: u("rounded", a?.paper, e?.paper?.className),
+    sx: [N, e?.paper?.sx],
+    style: e?.paper?.style
   } },
-  children: /* @__PURE__ */ p(u, {
-    autoFocus: i,
-    className: e?.list,
-    onClick: c,
-    children: n
+  children: /* @__PURE__ */ o(S, {
+    autoFocus: n,
+    className: a?.list,
+    onClick: y,
+    onKeyDown: (r) => {
+      r.key === "Tab" && r.target.getAttribute("role") === "menuitem" && t?.(r, "tabKeyDown");
+    },
+    children: b
   })
 });
 export {

package/dist/components/navigation/menu/StyledMenuItem.js

@@ -1,7 +1,7 @@
 import { cn as r } from "../../../helpers/cn.js";
-import { resolveSx as y } from "../../../helpers/sx.js";
+import { resolveSx as c } from "../../../helpers/sx.js";
 import { jsx as f } from "react/jsx-runtime";
-var D = ({ children: n, onClick: o, onMouseDown: i, onMouseUp: l, disabled: e, selected: s, dense: m, className: d, classes: a, sx: u, "data-test": p, "data-testid": x, value: c }) => /* @__PURE__ */ f("li", {
+var g = ({ children: n, onClick: o, onMouseDown: i, onMouseUp: s, disabled: e, selected: l, dense: m, className: d, classes: a, sx: u, "data-test": p, "data-testid": x, value: v }) => /* @__PURE__ */ f("li", {
   role: "menuitem",
   "aria-disabled": e ? !0 : void 0,
   tabIndex: -1,
@@ -9,17 +9,17 @@ var D = ({ children: n, onClick: o, onMouseDown: i, onMouseUp: l, disabled: e, s
   "data-testid": x,
   onClick: e ? void 0 : o,
   onMouseDown: e ? void 0 : i,
-  onMouseUp: e ? void 0 : l,
+  onMouseUp: e ? void 0 : s,
   onKeyDown: (t) => {
     e || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), o?.(t));
   },
-  className: r("box-border flex items-center px-4 text-base outline-none", m ? "min-h-8 py-1" : "min-h-10 py-2", "asma-pressable asma-touch-target", e ? "cursor-not-allowed text-delta-300 aria-disabled:text-delta-300" : "cursor-pointer text-delta-700 hover:bg-delta-50", s && r("bg-gama-50", a?.selected), a?.root, d),
+  className: r("box-border flex items-center px-4 text-base outline-none focus-visible:shadow-[inset_3px_0_var(--colors-focus-ring)]", m ? "min-h-8 py-1" : "min-h-10 py-2", "asma-pressable asma-touch-target", e ? "cursor-not-allowed text-delta-300 aria-disabled:text-delta-300" : "cursor-pointer text-delta-700 hover:bg-delta-50", l && r("bg-gama-50", a?.selected), a?.root, d),
   style: {
     fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-    ...y(u)
+    ...c(u)
   },
   children: n
 });
 export {
-  D as StyledMenuItem
+  g as StyledMenuItem
 };

package/dist/components/utils/accordion/base-ui/StyledAccordionDetails.js

@@ -1,27 +1,31 @@
-import n from "./StyledAccordion.module.js";
-import { useAccordionContext as g } from "./AccordionContext.js";
-import { clsx as s } from "clsx";
-import { useEffect as h, useRef as v, useState as x } from "react";
-import { jsx as c } from "react/jsx-runtime";
-var C = ({ children: r, className: i, contentClassName: l, ...a }) => {
-  const { open: d, panelId: m, triggerId: u } = g(), e = v(null), [f, p] = x(0);
-  return h(() => {
-    if (!e.current) return;
-    const t = () => p(e.current?.scrollHeight ?? 0);
+import u from "./StyledAccordion.module.js";
+import { useAccordionContext as h } from "./AccordionContext.js";
+import { clsx as a } from "clsx";
+import { useEffect as x, useLayoutEffect as y, useRef as c, useState as A } from "react";
+import { jsx as d } from "react/jsx-runtime";
+var C = ({ children: s, className: f, contentClassName: m, ...p }) => {
+  const { open: e, panelId: g, triggerId: o } = h(), l = c(null), r = c(null), i = c(e), [v, b] = A(0);
+  return x(() => {
+    if (!r.current) return;
+    const t = () => b(r.current?.scrollHeight ?? 0);
     t();
-    const o = new ResizeObserver(t);
-    return o.observe(e.current), () => o.disconnect();
-  }, [r]), /* @__PURE__ */ c("div", {
-    ...a,
-    id: m,
+    const n = new ResizeObserver(t);
+    return n.observe(r.current), () => n.disconnect();
+  }, [s]), y(() => {
+    const t = l.current, n = i.current && !e && t?.contains(document.activeElement);
+    t?.toggleAttribute("inert", !e), n && document.getElementById(o)?.focus({ preventScroll: !0 }), i.current = e;
+  }, [e, o]), /* @__PURE__ */ d("div", {
+    ref: l,
+    ...p,
+    id: g,
     role: "region",
-    "aria-labelledby": u,
-    className: s(n.Panel, i),
-    style: { "--accordion-panel-height": d ? `${f}px` : "0px" },
-    children: /* @__PURE__ */ c("div", {
-      ref: e,
-      className: s(n.Content, l),
-      children: r
+    "aria-labelledby": o,
+    className: a(u.Panel, f),
+    style: { "--accordion-panel-height": e ? `${v}px` : "0px" },
+    children: /* @__PURE__ */ d("div", {
+      ref: r,
+      className: a(u.Content, m),
+      children: s
     })
   });
 };

package/dist/components/utils/copy-wrapper/CopyWrapper.module.js

@@ -1,6 +1,6 @@
 var p = {
-  "copy-wrapper": "_copy-wrapper_1gjzc_1",
-  "hidden-copy": "_hidden-copy_1gjzc_1"
+  "copy-wrapper": "_copy-wrapper_15hst_1",
+  "hidden-copy": "_hidden-copy_15hst_1"
 };
 export {
   p as default

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

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

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

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

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

@@ -1,12 +1,13 @@
-import { StyledPopover as n } from "../../../../components/utils/popover/StyledPopover.js";
+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: i, onClose: a } = t;
-  return /* @__PURE__ */ r(n, {
+  const { open: l, anchorEl: n, onClose: a } = t;
+  return /* @__PURE__ */ r(i, {
     open: l,
-    anchorEl: i,
+    anchorEl: n,
     onClose: a,
+    tabIntoContent: !1,
     anchorOrigin: {
       vertical: o ? "top" : 50,
       horizontal: "left"