asma-ui-core 3.44.0 → 3.45.0

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

@@ -1,25 +1,25 @@
-import { cn as c } from "../../../helpers/cn.js";
-import { DotsVerticalIcon as de } from "../../icons/dots-vertical-icon/DotsVerticalIcon.js";
-import { LoadingIcon as S } from "../../icons/loading-icon/LoadingIcon.js";
-import { CloseIcon as O } from "../../icons/close-icon/CloseIcon.js";
-import { MinimizeIcon as re } from "../../icons/minimize-icon/MinimizeIcon.js";
-import { KeyboardCapslockIcon as ne } from "../../icons/keyboard-capslock-icon/KeyboardCapslockIcon.js";
-import { StyledTooltip as h } from "../../data-display/tooltip/StyledTooltip.js";
-import { StyledButton as i } from "../../inputs/button/StyledButton.js";
-import { StyledMenu as ae } from "../../navigation/menu/StyledMenu.js";
-import { StyledMenuItem as oe } from "../../navigation/menu/StyledMenuItem.js";
-import T from "./MinimizableDialog.module.js";
-import { useToggleMenuVisibility as se } from "../../../hooks/useToggleMenuVisibility.hook.js";
-import { ArrowExpand as ce } from "../../icons/arrow-expand/ArrowExpand.js";
-import { ArrowShrink as he } from "../../icons/arrow-shrink/ArrowShrink.js";
-import V from "clsx";
-import { useState as $ } from "react";
-import { Fragment as z, jsx as e, jsxs as t } from "react/jsx-runtime";
-import { isArray as K, isFunction as L } from "lodash-es";
-var Ge = ({ onCloseText: N = "", onMinimizeText: R = "", onExpandText: U = "", onFullScreenText: q = "", showCloseIcon: k = !0, showMinimizeIcon: H = !0, showExpandIcon: J = !0, showFullScreenIcon: Q = !0, title: u, label: p, children: v, open: W, onClose: I, className: y = "", primaryButtonText: g, primaryButtonLoading: x = !1, secondaryButtonText: o, onPrimaryButtonClick: m, onSecondaryButtonClick: f, dataTest: M, actionNode: X, extraActions: l, extraActionsText: s, btnContainerClassName: j, footerClassName: Y, footerInfo: C, locale: n = "en", enableFullscreen: Z = !0, fullScreenState: F, handleFullScreenState: _ }) => {
-  const [d, P] = $(!1), [G, A] = $(!1), { open: B, anchorEl: ee, handleOpen: te, handleClose: ie } = se();
-  if (!W) return null;
-  const a = F ?? G, b = a && !d, le = b ? {
+import { cn as h } from "../../../helpers/cn.js";
+import { DotsVerticalIcon as re } from "../../icons/dots-vertical-icon/DotsVerticalIcon.js";
+import { LoadingIcon as $ } from "../../icons/loading-icon/LoadingIcon.js";
+import { CloseIcon as K } from "../../icons/close-icon/CloseIcon.js";
+import { MinimizeIcon as de } from "../../icons/minimize-icon/MinimizeIcon.js";
+import { KeyboardCapslockIcon as ae } from "../../icons/keyboard-capslock-icon/KeyboardCapslockIcon.js";
+import { ArrowExpandIcon as ne } from "../../icons/arrow-expand-icon/ArrowExpandIcon.js";
+import { ArrowShrinkIcon as oe } from "../../icons/arrow-shrink-icon/ArrowShrinkIcon.js";
+import { StyledTooltip as f } from "../../data-display/tooltip/StyledTooltip.js";
+import { StyledButton as t } from "../../inputs/button/StyledButton.js";
+import { useFocusTrap as se } from "../../../hooks/useFocusTrap.hook.js";
+import { StyledMenu as ce } from "../../navigation/menu/StyledMenu.js";
+import { StyledMenuItem as me } from "../../navigation/menu/StyledMenuItem.js";
+import q from "./MinimizableDialog.module.js";
+import { useToggleMenuVisibility as he } from "../../../hooks/useToggleMenuVisibility.hook.js";
+import H from "clsx";
+import { useRef as fe, useState as J } from "react";
+import { Fragment as z, jsx as e, jsxs as i } from "react/jsx-runtime";
+var Ee = ({ onCloseText: u = "", onMinimizeText: N = "", onExpandText: I = "", onFullScreenText: M = "", showCloseIcon: j = !0, showMinimizeIcon: Q = !0, showExpandIcon: T = !0, showFullScreenIcon: W = !0, title: s, label: b, children: g, open: C, onClose: x, className: _ = "", primaryButtonText: w, primaryButtonLoading: k = !1, secondaryButtonText: c, onPrimaryButtonClick: v, onSecondaryButtonClick: p, dataTest: F, actionNode: X, extraActions: r, extraActionsText: m, btnContainerClassName: G, footerClassName: Y, footerInfo: D, locale: l = "en", enableFullscreen: Z = !0, fullScreenState: E, handleFullScreenState: L }) => {
+  const [d, A] = J(!1), [R, P] = J(!1), { open: B, anchorEl: ee, handleOpen: ie, handleClose: te } = he(), S = fe(null), o = E ?? R, a = o && !d;
+  if (se(C && a, S, x), !C) return null;
+  const le = a ? {
     right: "auto",
     bottom: "auto",
     left: "50%",
@@ -27,196 +27,205 @@ var Ge = ({ onCloseText: N = "", onMinimizeText: R = "", onExpandText: U = "", o
     transform: "translate(-50%, -50%)",
     width: "min(1000px, calc(100vw - 32px))",
     height: "95dvh"
-  } : void 0, w = g ?? x, D = w || o, E = () => {
-    P(!d);
+  } : void 0, O = o ? l === "en" ? "Exit full screen" : "Avslutt fullskjerm" : l === "en" ? "Full screen" : "Fullskjerm", y = w ?? k, U = y || c, V = () => {
+    A(!d);
   };
-  return /* @__PURE__ */ t(z, { children: [
-    b && /* @__PURE__ */ e("div", { className: "fixed inset-0 z-[51] bg-[rgb(98,110,126)] bg-opacity-70" }),
+  return /* @__PURE__ */ i(z, { children: [
+    a && /* @__PURE__ */ e("div", { className: "fixed inset-0 z-[51] bg-[rgb(98,110,126)] bg-opacity-70" }),
     /* @__PURE__ */ e("div", {
       style: { zIndex: 51 },
-      className: c(T.dialog, !d && T.hidden),
-      children: /* @__PURE__ */ t("div", {
-        className: V("flex items-center justify-between", !d && "hidden"),
-        "data-testid": M,
+      className: h(q.dialog, !d && q.hidden),
+      children: /* @__PURE__ */ i("div", {
+        className: H("flex items-center justify-between", !d && "hidden"),
+        "data-testid": F,
         children: [/* @__PURE__ */ e("div", {
           className: "truncate text-lg font-semibold text-delta-800",
-          children: u
-        }), /* @__PURE__ */ t("div", {
+          children: s
+        }), /* @__PURE__ */ i("div", {
           className: "flex items-center gap-x-1",
-          children: [J && /* @__PURE__ */ e(h, {
-            title: n === "en" ? "Expand" : "Utvid",
-            children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(i, {
+          children: [T && /* @__PURE__ */ e(f, {
+            title: l === "en" ? "Expand" : "Utvid",
+            children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, {
               dataTest: "minimize-button",
+              "aria-label": I ? void 0 : l === "en" ? "Expand" : "Utvid",
               variant: "text",
               size: "small",
-              onClick: E,
-              endIcon: /* @__PURE__ */ e(ne, {
+              onClick: V,
+              endIcon: /* @__PURE__ */ e(ae, {
                 height: 20,
                 width: 20,
                 color: "text-gama-500"
               }),
-              children: U
+              children: I
             }) })
-          }), k && /* @__PURE__ */ e(h, {
-            title: n === "en" ? "Close" : "Lukk",
-            children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(i, {
+          }), j && /* @__PURE__ */ e(f, {
+            title: l === "en" ? "Close" : "Lukk",
+            children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, {
               dataTest: "close-button",
+              "aria-label": u ? void 0 : l === "en" ? "Close" : "Lukk",
               variant: "textGray",
               size: "small",
-              onClick: I,
-              endIcon: /* @__PURE__ */ e(O, {
+              onClick: x,
+              endIcon: /* @__PURE__ */ e(K, {
                 height: 20,
                 width: 20,
                 color: "text-delta-700"
               }),
-              children: N
+              children: u
             }) })
           })]
         })]
       })
     }),
-    /* @__PURE__ */ t("div", {
+    /* @__PURE__ */ i("div", {
+      ref: S,
       style: le,
-      className: c("fixed bottom-4 right-4 z-[51] rounded-lg bg-white shadow-[0_4px_40px_0px_rgba(34,33,51,0.4)] transition-all duration-300", y && !d && !a ? y : "", d && "!h-0 !w-0 opacity-0 duration-0", b && "fixed duration-0"),
-      "data-testid": M,
-      children: [/* @__PURE__ */ t("div", {
+      role: a ? "dialog" : void 0,
+      "aria-modal": a ? !0 : void 0,
+      "aria-label": a && typeof s == "string" ? s : void 0,
+      className: h("fixed bottom-4 right-4 z-[51] rounded-lg bg-white shadow-[0_4px_40px_0px_rgba(34,33,51,0.4)] transition-all duration-300", _ && !d && !o ? _ : "", d && "!h-0 !w-0 opacity-0 duration-0", a && "fixed duration-0"),
+      "data-testid": F,
+      children: [/* @__PURE__ */ i("div", {
         className: "flex flex-col gap-y-2 border-b-[1px] border-delta-200 p-4",
-        children: [/* @__PURE__ */ t("div", {
+        children: [/* @__PURE__ */ i("div", {
           className: "flex items-center justify-between",
-          children: [p ? /* @__PURE__ */ e("div", {
+          children: [b ? /* @__PURE__ */ e("div", {
             className: "text-sm text-delta-700",
-            children: p
+            children: b
           }) : /* @__PURE__ */ e("div", {
             className: "text-2xl font-semibold text-delta-800",
-            children: u
-          }), /* @__PURE__ */ t("div", {
+            children: s
+          }), /* @__PURE__ */ i("div", {
             className: "flex items-center gap-x-1",
             children: [
               X,
-              H && /* @__PURE__ */ e(h, {
-                title: n === "en" ? "Minimize" : "Minimer",
-                children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(i, {
+              Q && /* @__PURE__ */ e(f, {
+                title: l === "en" ? "Minimize" : "Minimer",
+                children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, {
                   dataTest: "minimize-button",
+                  "aria-label": N ? void 0 : l === "en" ? "Minimize" : "Minimer",
                   variant: "textGray",
                   size: "small",
-                  onClick: E,
-                  endIcon: /* @__PURE__ */ e(re, {
+                  onClick: V,
+                  endIcon: /* @__PURE__ */ e(de, {
                     height: 20,
                     width: 20,
                     color: "text-delta-700"
                   }),
-                  children: R
+                  children: N
                 }) })
               }),
-              Z && Q && /* @__PURE__ */ e(h, {
-                title: a ? n === "en" ? "Exit full screen" : "Avslutt fullskjerm" : n === "en" ? "Full screen" : "Fullskjerm",
-                children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(i, {
+              Z && W && /* @__PURE__ */ e(f, {
+                title: O,
+                children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, {
                   dataTest: "fullscreen-button",
+                  "aria-label": M ? void 0 : O,
                   variant: "textGray",
                   size: "small",
-                  onClick: (r) => {
-                    F !== void 0 && _ ? _() : A(!G), r.detail !== 0 && r.currentTarget.blur();
+                  onClick: (n) => {
+                    E !== void 0 && L ? L() : P(!R), n.detail !== 0 && n.currentTarget.blur();
                   },
-                  endIcon: a ? /* @__PURE__ */ e(he, {
+                  endIcon: o ? /* @__PURE__ */ e(oe, {
                     width: 20,
                     height: 20,
                     color: "text-delta-700"
-                  }) : /* @__PURE__ */ e(ce, {
+                  }) : /* @__PURE__ */ e(ne, {
                     width: 20,
                     height: 20,
                     color: "text-delta-700"
                   }),
-                  children: q
+                  children: M
                 }) })
               }),
-              k && /* @__PURE__ */ e(h, {
-                title: n === "en" ? "Close" : "Lukk",
-                children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(i, {
+              j && /* @__PURE__ */ e(f, {
+                title: l === "en" ? "Close" : "Lukk",
+                children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, {
                   dataTest: "close-button",
+                  "aria-label": u ? void 0 : l === "en" ? "Close" : "Lukk",
                   variant: "textGray",
                   size: "small",
-                  onClick: I,
-                  endIcon: /* @__PURE__ */ e(O, {
+                  onClick: x,
+                  endIcon: /* @__PURE__ */ e(K, {
                     height: 20,
                     width: 20,
                     color: "text-delta-700"
                   }),
-                  children: N
+                  children: u
                 }) })
               })
             ]
           })]
-        }), p && /* @__PURE__ */ e("div", {
+        }), b && /* @__PURE__ */ e("div", {
           className: "truncate text-2xl font-semibold text-delta-800",
-          children: u
+          children: s
         })]
-      }), /* @__PURE__ */ t("div", {
-        className: V("flex flex-col", a && !d && "h-[87dvh]"),
+      }), /* @__PURE__ */ i("div", {
+        className: H("flex flex-col", o && !d && "h-[87dvh]"),
         children: [/* @__PURE__ */ e("div", {
           className: "flex-grow overflow-y-auto",
-          children: typeof v == "function" ? v({ fullScreen: a }) : v
-        }), (K(l) && l.length || L(l)) && s || C ? /* @__PURE__ */ t("div", {
-          className: c("flex items-center justify-between border-0 border-t-[1px] border-solid border-delta-200 bg-white p-4", Y),
+          children: typeof g == "function" ? g({ fullScreen: o }) : g
+        }), (Array.isArray(r) && r.length || typeof r == "function") && m || D ? /* @__PURE__ */ i("div", {
+          className: h("flex items-center justify-between border-0 border-t-[1px] border-solid border-delta-200 bg-white p-4", Y),
           children: [
-            K(l) && l.length && s ? /* @__PURE__ */ t(z, { children: [/* @__PURE__ */ e(i, {
+            Array.isArray(r) && r.length && m ? /* @__PURE__ */ i(z, { children: [/* @__PURE__ */ e(t, {
               dataTest: "extra-actions-button",
               variant: "textGray",
-              startIcon: /* @__PURE__ */ e(de, {
+              startIcon: /* @__PURE__ */ e(re, {
                 width: 24,
                 height: 24
               }),
-              onClick: te,
-              children: s
-            }), /* @__PURE__ */ e(ae, {
+              onClick: ie,
+              children: m
+            }), /* @__PURE__ */ e(ce, {
               open: B,
               anchorEl: ee,
-              onClose: ie,
-              children: l.map((r) => /* @__PURE__ */ e(oe, {
-                className: r.className,
-                onClick: r.onClick,
-                children: r.label
-              }, r.label))
-            })] }) : s && L(l) && /* @__PURE__ */ e(i, {
+              onClose: te,
+              children: r.map((n) => /* @__PURE__ */ e(me, {
+                className: n.className,
+                onClick: n.onClick,
+                children: n.label
+              }, n.label))
+            })] }) : m && typeof r == "function" && /* @__PURE__ */ e(t, {
               dataTest: "extra-action-button",
               variant: "text",
-              onClick: l,
-              children: s
+              onClick: r,
+              children: m
             }),
             " ",
-            C,
-            D ? /* @__PURE__ */ t("div", {
-              className: c("flex justify-end gap-x-2", j),
-              children: [o && f && /* @__PURE__ */ e(i, {
+            D,
+            U ? /* @__PURE__ */ i("div", {
+              className: h("flex justify-end gap-x-2", G),
+              children: [c && p && /* @__PURE__ */ e(t, {
                 dataTest: "cancel-button",
                 variant: "outlined",
-                onClick: f,
-                children: o
-              }), w && m && /* @__PURE__ */ e(i, {
+                onClick: p,
+                children: c
+              }), y && v && /* @__PURE__ */ e(t, {
                 dataTest: "save-button",
-                startIcon: x && /* @__PURE__ */ e(S, {
+                startIcon: k && /* @__PURE__ */ e($, {
                   width: 24,
                   height: 24
                 }),
-                onClick: m,
-                children: g
+                onClick: v,
+                children: w
               })]
             }) : null
           ]
-        }) : /* @__PURE__ */ e(z, { children: D ? /* @__PURE__ */ t("div", {
-          className: c("flex justify-end gap-x-2 border-t-[1px] border-delta-200 p-4", j),
-          children: [o && f && /* @__PURE__ */ e(i, {
+        }) : /* @__PURE__ */ e(z, { children: U ? /* @__PURE__ */ i("div", {
+          className: h("flex justify-end gap-x-2 border-t-[1px] border-delta-200 p-4", G),
+          children: [c && p && /* @__PURE__ */ e(t, {
             dataTest: "cancel-button",
             variant: "outlined",
-            onClick: f,
-            children: o
-          }), w && m && /* @__PURE__ */ e(i, {
+            onClick: p,
+            children: c
+          }), y && v && /* @__PURE__ */ e(t, {
             dataTest: "save-button",
-            startIcon: x && /* @__PURE__ */ e(S, {
+            startIcon: k && /* @__PURE__ */ e($, {
               width: 24,
               height: 24
             }),
-            onClick: m,
-            children: g
+            onClick: v,
+            children: w
           })]
         }) : null })]
       })]
@@ -224,5 +233,5 @@ var Ge = ({ onCloseText: N = "", onMinimizeText: R = "", onExpandText: U = "", o
   ] });
 };
 export {
-  Ge as MinimizableDialog
+  Ee as MinimizableDialog
 };

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

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

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

@@ -1,22 +1,23 @@
-import { StyledTooltip as n } from "../../../data-display/tooltip/StyledTooltip.js";
-import { StyledButton as d } from "../../../inputs/button/StyledButton.js";
-import { ArrowExpand as a } from "../../../icons/arrow-expand/ArrowExpand.js";
-import { ArrowShrink as m } from "../../../icons/arrow-shrink/ArrowShrink.js";
-import { jsx as t } from "react/jsx-runtime";
-var x = ({ fullScreen: e, showFullScreenIcon: o, tooltipTitle: i, onClick: l }) => o ? /* @__PURE__ */ t(n, {
-  title: i,
-  children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(d, {
+import { ArrowExpandIcon as n } from "../../../icons/arrow-expand-icon/ArrowExpandIcon.js";
+import { ArrowShrinkIcon as a } from "../../../icons/arrow-shrink-icon/ArrowShrinkIcon.js";
+import { StyledTooltip as d } from "../../../data-display/tooltip/StyledTooltip.js";
+import { StyledButton as c } from "../../../inputs/button/StyledButton.js";
+import { jsx as r } from "react/jsx-runtime";
+var x = ({ fullScreen: o, showFullScreenIcon: l, tooltipTitle: t, onClick: i }) => l ? /* @__PURE__ */ r(d, {
+  title: t,
+  children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(c, {
     dataTest: "fullscreen-button",
+    "aria-label": t,
     variant: "textGray",
     size: "small",
-    onClick: (r) => {
-      l(), r.detail !== 0 && r.currentTarget.blur();
+    onClick: (e) => {
+      i(), e.detail !== 0 && e.currentTarget.blur();
     },
-    endIcon: e ? /* @__PURE__ */ t(m, {
+    endIcon: o ? /* @__PURE__ */ r(a, {
       width: 20,
       height: 20,
       color: "text-delta-700"
-    }) : /* @__PURE__ */ t(a, {
+    }) : /* @__PURE__ */ r(n, {
       width: 20,
       height: 20,
       color: "text-delta-700"

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

@@ -1,34 +1,36 @@
-import { MinimizeIcon as a } from "../../../icons/minimize-icon/MinimizeIcon.js";
+import { MinimizeIcon as d } from "../../../icons/minimize-icon/MinimizeIcon.js";
 import { KeyboardCapslockIcon as c } from "../../../icons/keyboard-capslock-icon/KeyboardCapslockIcon.js";
 import { StyledTooltip as r } from "../../../data-display/tooltip/StyledTooltip.js";
-import { StyledButton as o } from "../../../inputs/button/StyledButton.js";
-import { jsx as t } from "react/jsx-runtime";
-var g = ({ visibility: l, tooltipTitle: i, onClick: e, type: n }) => {
+import { StyledButton as a } from "../../../inputs/button/StyledButton.js";
+import { jsx as i } from "react/jsx-runtime";
+var g = ({ visibility: l, tooltipTitle: t, onClick: e, type: n }) => {
   if (!l) return null;
-  const m = n === "expand", d = n === "minimize";
-  return m ? /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(r, {
-    title: i,
+  const m = n === "expand", o = n === "minimize";
+  return m ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(r, {
+    title: t,
     placement: "top",
-    children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(o, {
+    children: /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(a, {
       dataTest: "toggle-minimize-btn",
+      "aria-label": t,
       variant: "text",
       size: "small",
       onClick: e,
-      endIcon: /* @__PURE__ */ t(c, {
+      endIcon: /* @__PURE__ */ i(c, {
         height: 20,
         width: 20,
         color: "text-gama-500"
       })
     }) })
-  }) }) : d ? /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(r, {
-    title: i,
+  }) }) : o ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(r, {
+    title: t,
     placement: "top",
-    children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(o, {
+    children: /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(a, {
       dataTest: "toggle-minimize-btn",
+      "aria-label": t,
       variant: "textGray",
       size: "small",
       onClick: e,
-      endIcon: /* @__PURE__ */ t(a, {
+      endIcon: /* @__PURE__ */ i(d, {
         height: 20,
         width: 20,
         color: "text-delta-700"