asma-ui-core 3.87.4 → 3.88.0

package/dist/components/feedback/minimizable-dialog/components/CloseBtn.js

@@ -1,18 +1,19 @@
-import { CloseIcon as l } from "../../../icons/close-icon/CloseIcon.js";
-import { StyledTooltip as i } from "../../../data-display/tooltip/StyledTooltip.js";
+import { CloseIcon as i } from "../../../icons/close-icon/CloseIcon.js";
+import { StyledTooltip as n } from "../../../data-display/tooltip/StyledTooltip.js";
 import { StyledButton as a } from "../../../inputs/button/StyledButton.js";
 import "react";
 import { jsx as t } from "react/jsx-runtime";
-var f = ({ showCloseIcon: e, tooltipTitle: r, onClick: o }) => e ? /* @__PURE__ */ t(i, {
+var h = ({ showCloseIcon: e, tooltipTitle: r, onClick: o, buttonRef: l }) => e ? /* @__PURE__ */ t(n, {
   title: r,
   placement: "top",
   children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(a, {
     dataTest: "close-button",
+    refLink: l,
     "aria-label": r,
     variant: "textGray",
     size: "small",
     onClick: o,
-    endIcon: /* @__PURE__ */ t(l, {
+    endIcon: /* @__PURE__ */ t(i, {
       height: 20,
       width: 20,
       color: "text-delta-700"
@@ -20,5 +21,5 @@ var f = ({ showCloseIcon: e, tooltipTitle: r, onClick: o }) => e ? /* @__PURE__
   }) })
 }) : null;
 export {
-  f as CloseBtn
+  h as CloseBtn
 };

package/dist/components/feedback/minimizable-dialog/v2/MinimizableDialogV2.js

@@ -1,37 +1,46 @@
-import { cn as s } from "../../../../helpers/cn.js";
-import { firstTabbable as q } from "../../../../helpers/focusable.js";
-import { StyledTooltip as E } from "../../../data-display/tooltip/StyledTooltip.js";
-import { useMobileMediaQuery as P } from "../../../../hooks/useMediaQuery.hook.js";
-import { useFocusTrap as V } from "../../../../hooks/useFocusTrap.hook.js";
-import { CloseBtn as w } from "../components/CloseBtn.js";
-import { MinimizeBtn as C } from "../components/MinimizeBtn.js";
-import { FullScreenBtn as W } from "../components/FullscreenBtn.js";
-import c from "./MinimizableDialogV2.module.js";
-import { useTranslations as _ } from "./useTranslations.js";
-import { useControlledProps as $ } from "./useControlledProps.js";
-import H from "clsx";
-import { useLayoutEffect as L, useRef as F } from "react";
-import { Fragment as O, jsx as e, jsxs as o } from "react/jsx-runtime";
-var ae = (h) => {
-  const { showCloseIcon: v = !0, showMinimizeIcon: S = !0, showExpandIcon: T = !0, enableFullscreen: M = !0, title: n, label: d, children: k, open: g, onClose: I, classNameOverrides: f = {
+import { cn as a } from "../../../../helpers/cn.js";
+import { firstTabbable as M } from "../../../../helpers/focusable.js";
+import { StyledTooltip as $ } from "../../../data-display/tooltip/StyledTooltip.js";
+import { useMobileMediaQuery as H } from "../../../../hooks/useMediaQuery.hook.js";
+import { useFocusTrap as L } from "../../../../hooks/useFocusTrap.hook.js";
+import { CloseBtn as k } from "../components/CloseBtn.js";
+import { MinimizeBtn as B } from "../components/MinimizeBtn.js";
+import { FullScreenBtn as Q } from "../components/FullscreenBtn.js";
+import p from "./MinimizableDialogV2.module.js";
+import { useTranslations as G } from "./useTranslations.js";
+import { useControlledProps as J } from "./useControlledProps.js";
+import K from "clsx";
+import { useLayoutEffect as I, useRef as u } from "react";
+import { Fragment as U, jsx as e, jsxs as n } from "react/jsx-runtime";
+var ue = (g) => {
+  const { showCloseIcon: z = !0, showMinimizeIcon: j = !0, showExpandIcon: A = !0, enableFullscreen: D = !0, title: o, label: x, children: O, open: m, onClose: q, classNameOverrides: h = {
     maximized: "",
     minimized: "",
     fullscreen: ""
-  }, dataTest: j, actionNode: A, locale: R = "en", style: b } = h, r = P(), a = _(R), m = F(null), p = F(null), { minimized: i, setMinimized: z, fullScreen: t, setFullScreen: y } = $(h), l = t && !i, u = () => {
-    z(!1), I();
+  }, dataTest: E, actionNode: P, locale: V = "en", style: y, initialFocusRef: w } = g, r = H(), s = G(V), d = u(null), f = u(null), N = u(null), C = u(null), F = u(!1), { minimized: t, setMinimized: S, fullScreen: i, setFullScreen: R } = J(g), l = i && !t, v = () => {
+    S(!1), q();
   };
-  L(() => {
-    m.current?.toggleAttribute("inert", i), p.current?.toggleAttribute("inert", !i);
-  }, [i]);
-  const N = () => {
-    const D = i ? m : p;
-    z(!i), requestAnimationFrame(() => {
-      const x = D.current;
-      x && (x.querySelector('[data-testid="toggle-minimize-btn"]') ?? q(x))?.focus({ preventScroll: !0 });
+  I(() => {
+    d.current?.toggleAttribute("inert", t), f.current?.toggleAttribute("inert", !t);
+  }, [t]), I(() => {
+    const b = m && !F.current;
+    if (F.current = m, !b) return;
+    const c = t ? f.current : d.current, _ = t ? C.current : N.current;
+    (w?.current ?? _ ?? (c ? M(c) : void 0))?.focus({ preventScroll: !0 });
+  }, [
+    w,
+    t,
+    m
+  ]);
+  const T = () => {
+    const b = t ? d : f;
+    S(!t), requestAnimationFrame(() => {
+      const c = b.current;
+      c && (c.querySelector('[data-testid="toggle-minimize-btn"]') ?? M(c))?.focus({ preventScroll: !0 });
     });
   };
-  V(g && l, m, u);
-  const B = l ? r ? {
+  L(m && l, d, v);
+  const W = l ? r ? {
     inset: 0,
     maxHeight: "100dvh",
     maxWidth: "100dvw",
@@ -48,38 +57,39 @@ var ae = (h) => {
     maxWidth: "min(1000px, calc(100vw - 32px))",
     height: "95dvh"
   } : void 0;
-  return g ? /* @__PURE__ */ o(O, { children: [
+  return m ? /* @__PURE__ */ n(U, { children: [
     /* @__PURE__ */ e("div", {
-      ref: p,
+      ref: f,
       style: {
         zIndex: 51,
-        ...b
+        ...y
       },
-      className: s(c["minimized-dialog"], !i && c.hidden, f.minimized),
-      children: /* @__PURE__ */ o("div", {
-        className: H("flex items-center justify-between", !i && "hidden"),
-        "data-testid": j,
+      className: a(p["minimized-dialog"], !t && p.hidden, h.minimized),
+      children: /* @__PURE__ */ n("div", {
+        className: K("flex items-center justify-between", !t && "hidden"),
+        "data-testid": E,
         children: [/* @__PURE__ */ e("div", {
           className: "max-w-[303px] truncate pr-1 text-lg font-semibold text-delta-800",
-          children: /* @__PURE__ */ e(E, {
-            title: n,
+          children: /* @__PURE__ */ e($, {
+            title: o,
             placement: "top",
             children: /* @__PURE__ */ e("div", {
               className: "truncate",
-              children: n
+              children: o
             })
           })
-        }), /* @__PURE__ */ o("div", {
+        }), /* @__PURE__ */ n("div", {
           className: "flex items-center gap-x-1",
-          children: [/* @__PURE__ */ e(C, {
+          children: [/* @__PURE__ */ e(B, {
             type: "expand",
-            visibility: T,
-            onClick: N,
-            tooltipTitle: a.expand
-          }), /* @__PURE__ */ e(w, {
-            showCloseIcon: v,
-            onClick: u,
-            tooltipTitle: a.close
+            visibility: A,
+            onClick: T,
+            tooltipTitle: s.expand
+          }), /* @__PURE__ */ e(k, {
+            buttonRef: C,
+            showCloseIcon: z,
+            onClick: v,
+            tooltipTitle: s.close
           })]
         })]
       })
@@ -87,66 +97,67 @@ var ae = (h) => {
     l && /* @__PURE__ */ e("div", {
       className: "fixed inset-0 z-[52] bg-[rgb(98,110,126)] bg-opacity-70",
       onClick: () => {
-        y(!1);
+        R(!1);
       }
     }),
-    /* @__PURE__ */ o("div", {
+    /* @__PURE__ */ n("div", {
       style: {
         zIndex: 51,
-        ...b,
-        ...B
+        ...y,
+        ...W
       },
-      ref: m,
+      ref: d,
       role: l ? "dialog" : void 0,
       "aria-modal": l ? !0 : void 0,
-      "aria-label": l && typeof n == "string" ? n : void 0,
-      className: s(c.dialog, i && c.hidden, !t && f.maximized, t && f.fullscreen, l && "fixed z-[53] duration-0"),
-      children: [/* @__PURE__ */ o("div", {
-        className: s("flex flex-col border-b-[1px] border-delta-200 px-4", r ? "py-3" : "py-4"),
-        children: [/* @__PURE__ */ o("div", {
+      "aria-label": l && typeof o == "string" ? o : void 0,
+      className: a(p.dialog, t && p.hidden, !i && h.maximized, i && h.fullscreen, l && "fixed z-[53] duration-0"),
+      children: [/* @__PURE__ */ n("div", {
+        className: a("flex flex-col border-b-[1px] border-delta-200 px-4", r ? "py-3" : "py-4"),
+        children: [/* @__PURE__ */ n("div", {
           className: "flex items-center justify-between",
-          children: [d ? /* @__PURE__ */ e("div", {
+          children: [x ? /* @__PURE__ */ e("div", {
             className: "text-sm text-delta-700",
-            children: d
+            children: x
           }) : /* @__PURE__ */ e("div", {
-            className: s("font-semibold text-delta-800", r ? "line-clamp-2 text-xl" : "line-clamp-1 text-2xl"),
-            children: n
-          }), /* @__PURE__ */ o("div", {
+            className: a("font-semibold text-delta-800", r ? "line-clamp-2 text-xl" : "line-clamp-1 text-2xl"),
+            children: o
+          }), /* @__PURE__ */ n("div", {
             className: "flex items-center gap-x-1",
             children: [
-              A,
-              /* @__PURE__ */ e(C, {
-                visibility: S && !r && !t,
+              P,
+              /* @__PURE__ */ e(B, {
+                visibility: j && !r && !i,
                 type: "minimize",
-                onClick: N,
-                tooltipTitle: a.minimize
+                onClick: T,
+                tooltipTitle: s.minimize
               }),
-              /* @__PURE__ */ e(W, {
-                showFullScreenIcon: M && !r,
-                fullScreen: t,
+              /* @__PURE__ */ e(Q, {
+                showFullScreenIcon: D && !r,
+                fullScreen: i,
                 onClick: () => {
-                  y(!t);
+                  R(!i);
                 },
-                tooltipTitle: t ? a.exitFullscreen : a.fullscreen
+                tooltipTitle: i ? s.exitFullscreen : s.fullscreen
               }),
-              /* @__PURE__ */ e(w, {
-                showCloseIcon: v,
-                onClick: u,
-                tooltipTitle: a.close
+              /* @__PURE__ */ e(k, {
+                buttonRef: N,
+                showCloseIcon: z,
+                onClick: v,
+                tooltipTitle: s.close
               })
             ]
           })]
-        }), d && /* @__PURE__ */ e("div", {
-          className: s("font-semibold text-delta-800", r ? "line-clamp-2 text-xl" : "line-clamp-1 text-2xl"),
-          children: n
+        }), x && /* @__PURE__ */ e("div", {
+          className: a("font-semibold text-delta-800", r ? "line-clamp-2 text-xl" : "line-clamp-1 text-2xl"),
+          children: o
         })]
       }), /* @__PURE__ */ e("div", {
-        className: s(i && "hidden", "flex flex-grow flex-col overflow-y-auto"),
-        children: k
+        className: a(t && "hidden", "flex flex-grow flex-col overflow-y-auto"),
+        children: O
       })]
     })
   ] }) : null;
 };
 export {
-  ae as MinimizableDialogV2
+  ue as MinimizableDialogV2
 };

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/dist/src/components/feedback/minimizable-dialog/components/CloseBtn.d.ts

@@ -3,4 +3,5 @@ export declare const CloseBtn: React.FC<{
     showCloseIcon: boolean;
     onClick: () => void;
     tooltipTitle: string;
+    buttonRef?: React.Ref<HTMLButtonElement>;
 }>;

package/dist/src/components/feedback/minimizable-dialog/v2/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 export type ILocale = 'en' | 'no';
 /**
  * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#20049-111828 (Design-System · "Dialog minimized")
@@ -32,6 +32,11 @@ export interface IMinimizableDialogV2Props {
     locale?: ILocale;
     dataTest: string;
     style?: React.CSSProperties;
+    /**
+     * Overrides the Close button as the focus target when the dialog opens.
+     * Docked dialogs remain non-modal and do not trap subsequent keyboard navigation.
+     */
+    initialFocusRef?: RefObject<HTMLElement | null>;
     minimizedState?: boolean;
     handleMinimizedState?: (minimized: boolean) => void;
     enableFullscreen?: boolean;

package/package.json

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