asma-ui-core 3.109.0 → 3.110.0

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

@@ -12,21 +12,22 @@ import { OverlayBackOwnerContext as pe, useBackCloses as ge } from "../../../hoo
 import { useFocusTrap as xe } from "../../../hooks/useFocusTrap.hook.js";
 import { StyledMenu as ye } from "../../navigation/menu/StyledMenu.js";
 import { StyledMenuItem as ke } from "../../navigation/menu/StyledMenuItem.js";
+import { fullScreenFieldWidthVars as we } from "../../inputs/field-styles.js";
 import T from "./MinimizableDialog.module.js";
-import { useToggleMenuVisibility as we } from "../../../hooks/useToggleMenuVisibility.hook.js";
+import { useToggleMenuVisibility as ze } from "../../../hooks/useToggleMenuVisibility.hook.js";
 import H from "clsx";
-import { useLayoutEffect as ze, useRef as J, useState as Q } from "react";
+import { useLayoutEffect as Ne, useRef as J, useState as Q } from "react";
 import { Fragment as p, jsx as e, jsxs as l } from "react/jsx-runtime";
-var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", onFullScreenText: M = "", showCloseIcon: R = !0, showMinimizeIcon: X = !0, showExpandIcon: Y = !0, showFullScreenIcon: Z = !0, title: m, label: g, children: x, open: y, onClose: L, className: j = "", primaryButtonText: S, primaryButtonLoading: n = !1, primaryButtonDisabled: B, primaryButtonDisabledReason: ee, secondaryButtonText: k, onPrimaryButtonClick: F, onSecondaryButtonClick: _, dataTest: E, actionNode: te, extraActions: d, extraActionsText: h, btnContainerClassName: G, footerClassName: ie, footerInfo: D, locale: t = "en", enableFullscreen: le = !0, fullScreenState: O, handleFullScreenState: q }) => {
-  const [i, re] = Q(!1), [V, ne] = Q(!1), { open: de, anchorEl: ae, handleOpen: oe, handleClose: se } = we(), s = J(null), w = J(null), z = t === "en" ? "Wait until saved" : "Vent til lagringen er ferdig", b = () => {
+var He = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", onFullScreenText: M = "", showCloseIcon: R = !0, showMinimizeIcon: X = !0, showExpandIcon: Y = !0, showFullScreenIcon: Z = !0, title: m, label: g, children: x, open: y, onClose: L, className: j = "", primaryButtonText: S, primaryButtonLoading: n = !1, primaryButtonDisabled: B, primaryButtonDisabledReason: ee, secondaryButtonText: k, onPrimaryButtonClick: F, onSecondaryButtonClick: _, dataTest: E, actionNode: te, extraActions: d, extraActionsText: h, btnContainerClassName: G, footerClassName: ie, footerInfo: D, locale: t = "en", enableFullscreen: le = !0, fullScreenState: O, handleFullScreenState: V }) => {
+  const [i, re] = Q(!1), [q, ne] = Q(!1), { open: de, anchorEl: ae, handleOpen: oe, handleClose: se } = ze(), s = J(null), w = J(null), z = t === "en" ? "Wait until saved" : "Vent til lagringen er ferdig", b = () => {
     if (n) return !1;
     L();
-  }, o = O ?? V, a = o && !i;
+  }, o = O ?? q, a = o && !i;
   if (xe(y && a, s, b), ge({
     active: y && a,
     requestClose: b,
     ownerRef: s
-  }), ze(() => {
+  }), Ne(() => {
     s.current?.toggleAttribute("inert", i), w.current?.toggleAttribute("inert", !i);
   }, [i]), !y) return null;
   const ce = a ? {
@@ -36,15 +37,16 @@ var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", o
     top: "50%",
     transform: "translate(-50%, -50%)",
     width: "min(1000px, calc(100vw - 32px))",
-    height: "95dvh"
-  } : void 0, P = o ? t === "en" ? "Exit full screen" : "Avslutt fullskjerm" : t === "en" ? "Full screen" : "Fullskjerm", U = S ?? n, W = U || k, $ = /* @__PURE__ */ l(p, { children: [k && _ && /* @__PURE__ */ e(r, {
+    height: "95dvh",
+    ...we
+  } : void 0, W = o ? t === "en" ? "Exit full screen" : "Avslutt fullskjerm" : t === "en" ? "Full screen" : "Fullskjerm", P = S ?? n, U = P || k, $ = /* @__PURE__ */ l(p, { children: [k && _ && /* @__PURE__ */ e(r, {
     dataTest: "cancel-button",
     variant: "outlined",
     disabled: n,
     disabledReason: z,
     onClick: _,
     children: k
-  }), U && F && /* @__PURE__ */ e(r, {
+  }), P && F && /* @__PURE__ */ e(r, {
     dataTest: "save-button",
     loading: n,
     locale: t,
@@ -151,14 +153,14 @@ var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", o
                   }) })
                 }),
                 le && Z && /* @__PURE__ */ e(u, {
-                  title: P,
+                  title: W,
                   children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(r, {
                     dataTest: "fullscreen-button",
-                    "aria-label": M ? void 0 : P,
+                    "aria-label": M ? void 0 : W,
                     variant: "textGray",
                     size: "small",
                     onClick: () => {
-                      O !== void 0 && q ? q() : ne(!V);
+                      O !== void 0 && V ? V() : ne(!q);
                     },
                     endIcon: o ? /* @__PURE__ */ e(be, {
                       width: 20,
@@ -231,12 +233,12 @@ var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", o
               }),
               " ",
               D,
-              W ? /* @__PURE__ */ e("div", {
+              U ? /* @__PURE__ */ e("div", {
                 className: f("flex justify-end gap-x-2", G),
                 children: $
               }) : null
             ]
-          }) : /* @__PURE__ */ e(p, { children: W ? /* @__PURE__ */ e("div", {
+          }) : /* @__PURE__ */ e(p, { children: U ? /* @__PURE__ */ e("div", {
             className: f("flex justify-end gap-x-2 border-t-[1px] border-delta-200 p-4", G),
             children: $
           }) : null })]
@@ -246,5 +248,5 @@ var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", o
   ] });
 };
 export {
-  Ke as MinimizableDialog
+  He as MinimizableDialog
 };

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

@@ -5,27 +5,28 @@ import { DialogBusyContext as A, useDialogBusyBoundary as ie } from "../../dialo
 import { useMobileMediaQuery as le } from "../../../../hooks/useMediaQuery.hook.js";
 import { OverlayBackOwnerContext as ne, useBackCloses as oe } from "../../../../hooks/useBackCloses.hook.js";
 import { useFocusTrap as re } from "../../../../hooks/useFocusTrap.hook.js";
-import { CloseBtn as $ } from "../components/CloseBtn.js";
-import { MinimizeBtn as q } from "../components/MinimizeBtn.js";
-import { FullScreenBtn as se } from "../components/FullscreenBtn.js";
+import { fullScreenFieldWidthVars as se } from "../../../inputs/field-styles.js";
+import { CloseBtn as V } from "../components/CloseBtn.js";
+import { MinimizeBtn as $ } from "../components/MinimizeBtn.js";
+import { FullScreenBtn as ce } from "../components/FullscreenBtn.js";
 import h from "./MinimizableDialogV2.module.js";
-import { useTranslations as ce } from "./useTranslations.js";
-import { useControlledProps as ae } from "./useControlledProps.js";
-import de from "clsx";
-import { useId as V, useLayoutEffect as H, useRef as d } from "react";
-import { Fragment as me, jsx as e, jsxs as r } from "react/jsx-runtime";
-var Te = (C) => {
-  const { showCloseIcon: R = !0, showMinimizeIcon: L = !0, showExpandIcon: W = !0, enableFullscreen: _ = !0, title: u, label: f, children: Q, open: i, onClose: U, classNameOverrides: b = {
+import { useTranslations as ae } from "./useTranslations.js";
+import { useControlledProps as de } from "./useControlledProps.js";
+import me from "clsx";
+import { useId as q, useLayoutEffect as W, useRef as d } from "react";
+import { Fragment as ue, jsx as e, jsxs as r } from "react/jsx-runtime";
+var Me = (C) => {
+  const { showCloseIcon: R = !0, showMinimizeIcon: H = !0, showExpandIcon: L = !0, enableFullscreen: _ = !0, title: u, label: f, children: Q, open: i, onClose: U, classNameOverrides: b = {
     maximized: "",
     minimized: "",
     fullscreen: ""
-  }, dataTest: G, actionNode: J, locale: K = "en", busyReason: X, style: N, initialFocusRef: S } = C, s = le(), l = ce(K), n = d(null), p = d(null), F = d(null), B = d(null), g = d(!1), y = d(null), x = V(), T = V(), { minimized: t, setMinimized: I, fullScreen: o, setFullScreen: M } = ae(C), c = o && !t, { busy: z, busyReason: k, contextValue: E } = ie(X ?? l.waitUntilSaved), v = () => {
+  }, dataTest: G, actionNode: J, locale: K = "en", busyReason: X, style: N, initialFocusRef: S } = C, s = le(), l = ae(K), n = d(null), p = d(null), F = d(null), B = d(null), g = d(!1), y = d(null), x = q(), T = q(), { minimized: t, setMinimized: I, fullScreen: o, setFullScreen: M } = de(C), c = o && !t, { busy: z, busyReason: k, contextValue: E } = ie(X ?? l.waitUntilSaved), v = () => {
     if (z) return !1;
     I(!1), U();
   };
-  H(() => {
+  W(() => {
     n.current?.toggleAttribute("inert", t), p.current?.toggleAttribute("inert", !t);
-  }, [t]), H(() => {
+  }, [t]), W(() => {
     const w = i && !g.current, m = !i && g.current;
     if (g.current = i, m) {
       const D = y.current;
@@ -68,11 +69,12 @@ var Te = (C) => {
     transform: "translate(-50%, -50%)",
     width: "min(1000px, calc(100vw - 32px))",
     maxWidth: "min(1000px, calc(100vw - 32px))",
-    height: "95dvh"
+    height: "95dvh",
+    ...se
   } : void 0;
   if (!i) return null;
   const Z = f ? `${T} ${x}` : x;
-  return /* @__PURE__ */ r(me, { children: [
+  return /* @__PURE__ */ r(ue, { children: [
     /* @__PURE__ */ e("div", {
       ref: p,
       style: {
@@ -81,7 +83,7 @@ var Te = (C) => {
       },
       className: a(h["minimized-dialog"], !t && h.hidden, b.minimized),
       children: /* @__PURE__ */ r("div", {
-        className: de("flex items-center justify-between", !t && "hidden"),
+        className: me("flex items-center justify-between", !t && "hidden"),
         "data-testid": G,
         children: [/* @__PURE__ */ e("div", {
           className: "max-w-[303px] truncate pr-1 text-lg font-semibold text-delta-800",
@@ -95,12 +97,12 @@ var Te = (C) => {
           })
         }), /* @__PURE__ */ r("div", {
           className: "flex items-center gap-x-1",
-          children: [/* @__PURE__ */ e(q, {
+          children: [/* @__PURE__ */ e($, {
             type: "expand",
-            visibility: W,
+            visibility: L,
             onClick: j,
             tooltipTitle: l.expand
-          }), /* @__PURE__ */ e($, {
+          }), /* @__PURE__ */ e(V, {
             buttonRef: B,
             showCloseIcon: R,
             onClick: v,
@@ -148,13 +150,13 @@ var Te = (C) => {
                   value: E,
                   children: J
                 }),
-                /* @__PURE__ */ e(q, {
-                  visibility: L && !s && !o,
+                /* @__PURE__ */ e($, {
+                  visibility: H && !s && !o,
                   type: "minimize",
                   onClick: j,
                   tooltipTitle: l.minimize
                 }),
-                /* @__PURE__ */ e(se, {
+                /* @__PURE__ */ e(ce, {
                   showFullScreenIcon: _ && !s,
                   fullScreen: o,
                   onClick: () => {
@@ -162,7 +164,7 @@ var Te = (C) => {
                   },
                   tooltipTitle: o ? l.exitFullscreen : l.fullscreen
                 }),
-                /* @__PURE__ */ e($, {
+                /* @__PURE__ */ e(V, {
                   buttonRef: F,
                   showCloseIcon: R,
                   onClick: v,
@@ -188,5 +190,5 @@ var Te = (C) => {
   ] });
 };
 export {
-  Te as MinimizableDialogV2
+  Me as MinimizableDialogV2
 };

package/dist/components/inputs/dynamic-select/components/DynamicInteractiveChipGroup.js

@@ -1,61 +1,64 @@
 import { cn as v } from "../../../../helpers/cn.js";
-import { StyledTooltip as P } from "../../../data-display/tooltip/StyledTooltip.js";
-import { CloseIcon as k } from "../../../icons/close-icon/CloseIcon.js";
-import { ErrorOutlineIcon as Q } from "../../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { StyledChip as U } from "../../../data-display/chip/StyledChip.js";
-import { StyledInteractiveChip as j } from "../../../data-display/interactive-chip/StyledInteractiveChip.js";
-import { StyledButton as X } from "../../button/StyledButton.js";
-import { useHelperAlertRole as Y } from "../../../../helpers/useHelperAlertRole.js";
-import { warnMissingErrorMessage as Z } from "../../../../helpers/warnMissingErrorMessage.js";
-import { useWrap as _ } from "../helpers/useWrap.js";
-import { DynamicSelectTitle as ee } from "./DynamicSelectTitle.js";
+import { StyledTooltip as Q } from "../../../data-display/tooltip/StyledTooltip.js";
+import { CloseIcon as j } from "../../../icons/close-icon/CloseIcon.js";
+import { ErrorOutlineIcon as U } from "../../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { StyledChip as X } from "../../../data-display/chip/StyledChip.js";
+import { StyledInteractiveChip as O } from "../../../data-display/interactive-chip/StyledInteractiveChip.js";
+import { StyledButton as Y } from "../../button/StyledButton.js";
+import { useHelperAlertRole as Z } from "../../../../helpers/useHelperAlertRole.js";
+import { warnMissingErrorMessage as _ } from "../../../../helpers/warnMissingErrorMessage.js";
+import { fieldWidthStyle as ee } from "../../field-styles.js";
+import { useWrap as te } from "../helpers/useWrap.js";
+import { DynamicSelectTitle as le } from "./DynamicSelectTitle.js";
 import { Skeleton as N } from "../../../mui-compat/Skeleton.js";
-import { forwardRef as te, useEffect as le, useId as re } from "react";
-import { jsx as t, jsxs as T } from "react/jsx-runtime";
-var ge = te((O, V) => {
-  const { options: d, dataTest: A, value: r, readOnly: i, multiple: n, title: D, titleSize: R, disabled: b, onChange: p, required: z, error: f, helperText: S, valueKey: E = "value", labelKey: L = "label", renderLabel: o, getOptionTooltip: C, loading: $, size: g, locale: B = "en", clearSelectionLabel: q } = O, G = re();
-  Z("DynamicInteractiveChipGroup", f, S);
-  const K = Y(f), { containerRef: m, wrapDisabled: y } = _({ dependencyList: [d, d.length] });
-  le(() => {
+import { forwardRef as re, useEffect as ie, useId as ae } from "react";
+import { jsx as t, jsxs as S } from "react/jsx-runtime";
+var ve = re((V, A) => {
+  const { options: d, dataTest: D, value: r, readOnly: a, multiple: n, title: R, titleSize: z, width: T = "full", disabled: b, onChange: p, required: E, error: f, helperText: C, valueKey: L = "value", labelKey: $ = "label", renderLabel: o, getOptionTooltip: I, loading: B, size: y, locale: q = "en", clearSelectionLabel: G } = V, K = ae();
+  _("DynamicInteractiveChipGroup", f, C);
+  const M = Z(f), { containerRef: m, wrapDisabled: w } = te({ dependencyList: [d, d.length] });
+  ie(() => {
     m.current && (m.current.inert = !0);
   }, [m]);
-  const u = (e) => typeof e == "object" ? e?.[L]?.toString() ?? "" : e?.toString() ?? "", w = (e) => typeof e == "object" ? e?.[E] : e, c = (e) => {
-    const l = w(e);
+  const u = (e) => typeof e == "object" ? e?.[$]?.toString() ?? "" : e?.toString() ?? "", g = (e) => typeof e == "object" ? e?.[L] : e, c = (e) => {
+    const l = g(e);
     return l == null ? "" : typeof l == "string" || typeof l == "number" || typeof l == "boolean" ? String(l) : e == null ? "" : u(e);
-  }, s = (e, l) => w(e) === w(l), M = n ? Array.isArray(r) && r.length > 0 : r != null, F = (e) => {
+  }, s = (e, l) => g(e) === g(l), W = n ? Array.isArray(r) && r.length > 0 : r != null, F = (e) => {
     if (!n) {
-      const a = s(e, r) ? null : e;
-      if (a === null) return;
-      p(a);
+      const i = s(e, r) ? null : e;
+      if (i === null) return;
+      p(i);
       return;
     }
     const l = r ?? [];
-    p(l.find((a) => s(a, e)) ? l.filter((a) => !s(a, e)) : [...l, e]);
-  }, h = i ? d.filter((e) => !!(n ? r?.find((l) => s(l, e)) : s(r, e))) : d, H = h.findIndex((e) => !(typeof e == "object" && e?.disabled) && !i);
-  return /* @__PURE__ */ T("div", {
-    "data-testid": `${A}-dynamic-radio-group`,
+    p(l.find((i) => s(i, e)) ? l.filter((i) => !s(i, e)) : [...l, e]);
+  }, h = a ? d.filter((e) => !!(n ? r?.find((l) => s(l, e)) : s(r, e))) : d, H = h.findIndex((e) => !(typeof e == "object" && e?.disabled) && !a);
+  return /* @__PURE__ */ S("div", {
+    "data-testid": `${D}-dynamic-radio-group`,
     className: "relative flex flex-col gap-y-1",
+    "data-field-width": T,
+    style: ee(T),
     children: [
-      /* @__PURE__ */ t(ee, {
-        title: D,
-        titleSize: R
+      /* @__PURE__ */ t(le, {
+        title: R,
+        titleSize: z
       }),
       /* @__PURE__ */ t("div", {
         "aria-hidden": !0,
         ref: m,
         className: "pointer-events-none absolute left-0 top-0 flex flex-wrap gap-2 opacity-0",
         style: { width: "100%" },
-        children: h.map((e) => /* @__PURE__ */ t(j, {
+        children: h.map((e) => /* @__PURE__ */ t(O, {
           className: "w-fit",
-          readOnly: i,
+          readOnly: a,
           type: n ? "checkbox" : "radio",
           dataTest: `ic-${c(e)}-hidden`,
           label: o ? o(e) : u(e)
         }, c(e)))
       }),
       /* @__PURE__ */ t("div", {
-        className: v("flex flex-wrap gap-2", y && "flex-col gap-1"),
-        children: $ ? /* @__PURE__ */ T("div", {
+        className: v("flex flex-wrap gap-2", w && "flex-col gap-1"),
+        children: B ? /* @__PURE__ */ S("div", {
           className: "flex flex-wrap gap-2",
           children: [
             /* @__PURE__ */ t(N, { className: "h-[32px] w-[60px]" }),
@@ -63,34 +66,34 @@ var ge = te((O, V) => {
             /* @__PURE__ */ t(N, { className: "h-[32px] w-[60px]" })
           ]
         }) : h?.length ? h.map((e, l) => {
-          const a = !!(n ? r?.find((J) => s(J, e)) : s(r, e)), W = C ? C(e) : null;
-          if (i && !a) return null;
-          const x = typeof e == "object" ? !!e?.disabled : !1, I = !x && !i && l === H ? V : void 0;
-          return /* @__PURE__ */ t(P, {
-            title: W,
+          const i = !!(n ? r?.find((P) => s(P, e)) : s(r, e)), J = I ? I(e) : null;
+          if (a && !i) return null;
+          const x = typeof e == "object" ? !!e?.disabled : !1, k = !x && !a && l === H ? A : void 0;
+          return /* @__PURE__ */ t(Q, {
+            title: J,
             arrow: !0,
             children: /* @__PURE__ */ t("span", {
               className: v(x && "cursor-not-allowed"),
-              children: i && !y ? /* @__PURE__ */ t(U, {
-                ref: I,
+              children: a && !w ? /* @__PURE__ */ t(X, {
+                ref: k,
                 disabled: !!b || x,
                 classes: { root: "min-h-[32px] h-full" },
                 className: "w-fit",
                 dataTest: `ic-${c(e)}`,
                 label: o ? o(e) : u(e)
-              }) : /* @__PURE__ */ t(j, {
-                ref: I,
+              }) : /* @__PURE__ */ t(O, {
+                ref: k,
                 disabled: !!b || x,
-                classes: y ? {
+                classes: w ? {
                   root: "border-none outline-none bg-transparent w-full flex justify-start h-full min-h-[40px] shadow-none",
                   label: "block whitespace-normal break-words overflow-visible"
                 } : { root: "min-h-[32px] h-full" },
                 className: "w-fit",
-                readOnly: i,
+                readOnly: a,
                 type: n ? "checkbox" : "radio",
                 dataTest: `ic-${c(e)}`,
-                checked: a,
-                size: g,
+                checked: i,
+                size: y,
                 onClick: () => F(e),
                 label: o ? o(e) : u(e)
               })
@@ -98,39 +101,39 @@ var ge = te((O, V) => {
           }, c(e));
         }) : /* @__PURE__ */ t("span", { children: "-" })
       }),
-      !z && M && !i && !b && /* @__PURE__ */ t(X, {
+      !E && W && !a && !b && /* @__PURE__ */ t(Y, {
         dataTest: "clear-selection-btn",
         variant: "text",
-        startIcon: g === "medium" ? /* @__PURE__ */ t(k, {
+        startIcon: y === "medium" ? /* @__PURE__ */ t(j, {
           height: 24,
           width: 24,
           className: "size-6"
-        }) : /* @__PURE__ */ t(k, {
+        }) : /* @__PURE__ */ t(j, {
           height: 20,
           width: 20,
           className: "size-5"
         }),
         className: "w-fit",
-        size: g,
+        size: y,
         onClick: () => p(n ? [] : null),
-        children: q ?? (B === "en" ? "Clear selection" : "Fjern valget")
+        children: G ?? (q === "en" ? "Clear selection" : "Fjern valget")
       }),
-      /* @__PURE__ */ T("div", {
-        id: G,
-        role: K,
+      /* @__PURE__ */ S("div", {
+        id: K,
+        role: M,
         className: v("flex min-h-[24px] items-center gap-1 pt-1 text-sm/5 text-delta-600", f && "text-error-500"),
-        children: [f && /* @__PURE__ */ t(Q, {
+        children: [f && /* @__PURE__ */ t(U, {
           width: 20,
           height: 20,
           className: "min-w-5"
         }), /* @__PURE__ */ t("span", {
           className: "line-clamp-1",
-          children: S
+          children: C
         })]
       })
     ]
   });
 });
 export {
-  ge as DynamicInteractiveChipGroup
+  ve as DynamicInteractiveChipGroup
 };