asma-ui-core 3.87.5 → 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/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.5",
+    "version": "3.88.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",