asma-ui-core 3.108.2 → 3.108.3

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

@@ -1,29 +1,35 @@
-import { cn as h } from "../../../helpers/cn.js";
+import { cn as f } from "../../../helpers/cn.js";
 import { firstTabbable as me } from "../../../helpers/focusable.js";
-import { StyledTooltip as f } from "../../data-display/tooltip/StyledTooltip.js";
+import { StyledTooltip as u } from "../../data-display/tooltip/StyledTooltip.js";
 import { DotsVerticalIcon as he } from "../../icons/dots-vertical-icon/DotsVerticalIcon.js";
-import { CloseIcon as P } from "../../icons/close-icon/CloseIcon.js";
+import { CloseIcon as K } from "../../icons/close-icon/CloseIcon.js";
 import { MinimizeIcon as fe } from "../../icons/minimize-icon/MinimizeIcon.js";
 import { KeyboardCapslockIcon as ue } from "../../icons/keyboard-capslock-icon/KeyboardCapslockIcon.js";
-import { ArrowExpandIcon as be } from "../../icons/arrow-expand-icon/ArrowExpandIcon.js";
-import { ArrowShrinkIcon as ve } from "../../icons/arrow-shrink-icon/ArrowShrinkIcon.js";
-import { StyledButton as n } from "../../inputs/button/StyledButton.js";
-import { useFocusTrap as pe } from "../../../hooks/useFocusTrap.hook.js";
-import { StyledMenu as ge } from "../../navigation/menu/StyledMenu.js";
-import { StyledMenuItem as xe } from "../../navigation/menu/StyledMenuItem.js";
+import { ArrowExpandIcon as ve } from "../../icons/arrow-expand-icon/ArrowExpandIcon.js";
+import { ArrowShrinkIcon as be } from "../../icons/arrow-shrink-icon/ArrowShrinkIcon.js";
+import { StyledButton as r } from "../../inputs/button/StyledButton.js";
+import { OverlayBackOwnerContext as pe, useBackCloses as ge } from "../../../hooks/useBackCloses.hook.js";
+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 T from "./MinimizableDialog.module.js";
-import { useToggleMenuVisibility as ye } from "../../../hooks/useToggleMenuVisibility.hook.js";
+import { useToggleMenuVisibility as we } from "../../../hooks/useToggleMenuVisibility.hook.js";
 import H from "clsx";
-import { useLayoutEffect as ke, useRef as J, useState as Q } from "react";
-import { Fragment as v, jsx as e, jsxs as l } from "react/jsx-runtime";
-var $e = ({ onCloseText: u = "", onMinimizeText: N = "", onExpandText: I = "", onFullScreenText: C = "", showCloseIcon: M = !0, showMinimizeIcon: X = !0, showExpandIcon: Y = !0, showFullScreenIcon: Z = !0, title: c, label: p, children: g, open: j, onClose: L, className: R = "", primaryButtonText: S, primaryButtonLoading: r = !1, primaryButtonDisabled: B, primaryButtonDisabledReason: ee, secondaryButtonText: x, onPrimaryButtonClick: F, onSecondaryButtonClick: _, dataTest: E, actionNode: te, extraActions: d, extraActionsText: m, btnContainerClassName: G, footerClassName: ie, footerInfo: D, locale: t = "en", enableFullscreen: le = !0, fullScreenState: V, handleFullScreenState: q }) => {
-  const [i, ne] = Q(!1), [O, re] = Q(!1), { open: de, anchorEl: ae, handleOpen: oe, handleClose: se } = ye(), b = J(null), y = J(null), k = t === "en" ? "Wait until saved" : "Vent til lagringen er ferdig", w = () => {
-    r || L();
-  }, a = V ?? O, o = a && !i;
-  if (pe(j && o, b, w), ke(() => {
-    b.current?.toggleAttribute("inert", i), y.current?.toggleAttribute("inert", !i);
-  }, [i]), !j) return null;
-  const ce = o ? {
+import { useLayoutEffect as ze, 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 = () => {
+    if (n) return !1;
+    L();
+  }, o = O ?? V, a = o && !i;
+  if (xe(y && a, s, b), ge({
+    active: y && a,
+    requestClose: b,
+    ownerRef: s
+  }), ze(() => {
+    s.current?.toggleAttribute("inert", i), w.current?.toggleAttribute("inert", !i);
+  }, [i]), !y) return null;
+  const ce = a ? {
     right: "auto",
     bottom: "auto",
     left: "50%",
@@ -31,50 +37,50 @@ var $e = ({ onCloseText: u = "", onMinimizeText: N = "", onExpandText: I = "", o
     transform: "translate(-50%, -50%)",
     width: "min(1000px, calc(100vw - 32px))",
     height: "95dvh"
-  } : void 0, U = a ? t === "en" ? "Exit full screen" : "Avslutt fullskjerm" : t === "en" ? "Full screen" : "Fullskjerm", W = S ?? r, $ = W || x, A = /* @__PURE__ */ l(v, { children: [x && _ && /* @__PURE__ */ e(n, {
+  } : 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, {
     dataTest: "cancel-button",
     variant: "outlined",
-    disabled: r,
-    disabledReason: k,
+    disabled: n,
+    disabledReason: z,
     onClick: _,
-    children: x
-  }), W && F && /* @__PURE__ */ e(n, {
+    children: k
+  }), U && F && /* @__PURE__ */ e(r, {
     dataTest: "save-button",
-    loading: r,
+    loading: n,
     locale: t,
     disabled: B,
     disabledReason: ee,
     onClick: F,
     children: S
-  })] }), K = () => {
-    const s = i ? b : y;
-    ne(!i), requestAnimationFrame(() => {
-      const z = s.current;
-      z && (z.querySelector('[data-testid="minimize-button"]') ?? me(z))?.focus({ preventScroll: !0 });
+  })] }), A = () => {
+    const c = i ? s : w;
+    re(!i), requestAnimationFrame(() => {
+      const N = c.current;
+      N && (N.querySelector('[data-testid="minimize-button"]') ?? me(N))?.focus({ preventScroll: !0 });
     });
   };
-  return /* @__PURE__ */ l(v, { children: [
-    o && /* @__PURE__ */ e("div", { className: "fixed inset-0 z-[51] bg-[rgb(98,110,126)] bg-opacity-70" }),
+  return /* @__PURE__ */ l(p, { children: [
+    a && /* @__PURE__ */ e("div", { className: "fixed inset-0 z-[51] bg-[rgb(98,110,126)] bg-opacity-70" }),
     /* @__PURE__ */ e("div", {
-      ref: y,
+      ref: w,
       style: { zIndex: 51 },
-      className: h(T.dialog, !i && T.hidden),
+      className: f(T.dialog, !i && T.hidden),
       children: /* @__PURE__ */ l("div", {
         className: H("flex items-center justify-between", !i && "hidden"),
         "data-testid": E,
         children: [/* @__PURE__ */ e("div", {
           className: "truncate text-lg font-semibold text-delta-800",
-          children: c
+          children: m
         }), /* @__PURE__ */ l("div", {
           className: "flex items-center gap-x-1",
-          children: [Y && /* @__PURE__ */ e(f, {
+          children: [Y && /* @__PURE__ */ e(u, {
             title: t === "en" ? "Expand" : "Utvid",
-            children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, {
+            children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(r, {
               dataTest: "minimize-button",
               "aria-label": I ? void 0 : t === "en" ? "Expand" : "Utvid",
               variant: "text",
               size: "small",
-              onClick: K,
+              onClick: A,
               endIcon: /* @__PURE__ */ e(ue, {
                 height: 20,
                 width: 20,
@@ -82,160 +88,163 @@ var $e = ({ onCloseText: u = "", onMinimizeText: N = "", onExpandText: I = "", o
               }),
               children: I
             }) })
-          }), M && /* @__PURE__ */ e(f, {
+          }), R && /* @__PURE__ */ e(u, {
             title: t === "en" ? "Close" : "Lukk",
-            open: r ? !1 : void 0,
-            children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, {
+            open: n ? !1 : void 0,
+            children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(r, {
               dataTest: "close-button",
-              "aria-label": u ? void 0 : t === "en" ? "Close" : "Lukk",
+              "aria-label": v ? void 0 : t === "en" ? "Close" : "Lukk",
               variant: "textGray",
               size: "small",
-              disabled: r,
-              disabledReason: k,
-              onClick: w,
-              endIcon: /* @__PURE__ */ e(P, {
+              disabled: n,
+              disabledReason: z,
+              onClick: b,
+              endIcon: /* @__PURE__ */ e(K, {
                 height: 20,
                 width: 20,
                 color: "text-delta-700"
               }),
-              children: u
+              children: v
             }) })
           })]
         })]
       })
     }),
-    /* @__PURE__ */ l("div", {
-      ref: b,
+    /* @__PURE__ */ e("div", {
+      ref: s,
       style: ce,
-      role: o ? "dialog" : void 0,
-      "aria-modal": o ? !0 : void 0,
-      "aria-label": o && typeof c == "string" ? c : 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", R && !i && !a ? R : "", i && "!h-0 !w-0 opacity-0 duration-0", o && "fixed duration-0"),
+      role: a ? "dialog" : void 0,
+      "aria-modal": a ? !0 : void 0,
+      "aria-label": a && typeof m == "string" ? m : void 0,
+      className: f("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", j && !i && !o ? j : "", i && "!h-0 !w-0 opacity-0 duration-0", a && "fixed duration-0"),
       "data-testid": E,
-      children: [/* @__PURE__ */ l("div", {
-        className: "flex flex-col gap-y-2 border-b-[1px] border-delta-200 p-4",
+      children: /* @__PURE__ */ l(pe.Provider, {
+        value: s,
         children: [/* @__PURE__ */ l("div", {
-          className: "flex items-center justify-between",
-          children: [p ? /* @__PURE__ */ e("div", {
-            className: "text-sm text-delta-700",
-            children: p
-          }) : /* @__PURE__ */ e("div", {
-            className: "text-2xl font-semibold text-delta-800",
-            children: c
-          }), /* @__PURE__ */ l("div", {
-            className: "flex items-center gap-x-1",
+          className: "flex flex-col gap-y-2 border-b-[1px] border-delta-200 p-4",
+          children: [/* @__PURE__ */ l("div", {
+            className: "flex items-center justify-between",
+            children: [g ? /* @__PURE__ */ e("div", {
+              className: "text-sm text-delta-700",
+              children: g
+            }) : /* @__PURE__ */ e("div", {
+              className: "text-2xl font-semibold text-delta-800",
+              children: m
+            }), /* @__PURE__ */ l("div", {
+              className: "flex items-center gap-x-1",
+              children: [
+                te,
+                X && !o && /* @__PURE__ */ e(u, {
+                  title: t === "en" ? "Minimize" : "Minimer",
+                  children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(r, {
+                    dataTest: "minimize-button",
+                    "aria-label": C ? void 0 : t === "en" ? "Minimize" : "Minimer",
+                    variant: "textGray",
+                    size: "small",
+                    onClick: A,
+                    endIcon: /* @__PURE__ */ e(fe, {
+                      height: 20,
+                      width: 20,
+                      color: "text-delta-700"
+                    }),
+                    children: C
+                  }) })
+                }),
+                le && Z && /* @__PURE__ */ e(u, {
+                  title: P,
+                  children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(r, {
+                    dataTest: "fullscreen-button",
+                    "aria-label": M ? void 0 : P,
+                    variant: "textGray",
+                    size: "small",
+                    onClick: () => {
+                      O !== void 0 && q ? q() : ne(!V);
+                    },
+                    endIcon: o ? /* @__PURE__ */ e(be, {
+                      width: 20,
+                      height: 20,
+                      color: "text-delta-700"
+                    }) : /* @__PURE__ */ e(ve, {
+                      width: 20,
+                      height: 20,
+                      color: "text-delta-700"
+                    }),
+                    children: M
+                  }) })
+                }),
+                R && /* @__PURE__ */ e(u, {
+                  title: t === "en" ? "Close" : "Lukk",
+                  open: n ? !1 : void 0,
+                  children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(r, {
+                    dataTest: "close-button",
+                    "aria-label": v ? void 0 : t === "en" ? "Close" : "Lukk",
+                    variant: "textGray",
+                    size: "small",
+                    disabled: n,
+                    disabledReason: z,
+                    onClick: b,
+                    endIcon: /* @__PURE__ */ e(K, {
+                      height: 20,
+                      width: 20,
+                      color: "text-delta-700"
+                    }),
+                    children: v
+                  }) })
+                })
+              ]
+            })]
+          }), g && /* @__PURE__ */ e("div", {
+            className: "truncate text-2xl font-semibold text-delta-800",
+            children: m
+          })]
+        }), /* @__PURE__ */ l("div", {
+          className: H("flex flex-col", o && !i && "h-[87dvh]"),
+          children: [/* @__PURE__ */ e("div", {
+            className: "flex-grow overflow-y-auto overscroll-contain",
+            children: typeof x == "function" ? x({ fullScreen: o }) : x
+          }), (Array.isArray(d) && d.length || typeof d == "function") && h || D ? /* @__PURE__ */ l("div", {
+            className: f("flex items-center justify-between border-0 border-t-[1px] border-solid border-delta-200 bg-white p-4", ie),
             children: [
-              te,
-              X && !a && /* @__PURE__ */ e(f, {
-                title: t === "en" ? "Minimize" : "Minimer",
-                children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, {
-                  dataTest: "minimize-button",
-                  "aria-label": N ? void 0 : t === "en" ? "Minimize" : "Minimer",
-                  variant: "textGray",
-                  size: "small",
-                  onClick: K,
-                  endIcon: /* @__PURE__ */ e(fe, {
-                    height: 20,
-                    width: 20,
-                    color: "text-delta-700"
-                  }),
-                  children: N
-                }) })
+              Array.isArray(d) && d.length && h ? /* @__PURE__ */ l(p, { children: [/* @__PURE__ */ e(r, {
+                dataTest: "extra-actions-button",
+                variant: "textGray",
+                startIcon: /* @__PURE__ */ e(he, {
+                  width: 24,
+                  height: 24
+                }),
+                onClick: oe,
+                children: h
+              }), /* @__PURE__ */ e(ye, {
+                open: de,
+                anchorEl: ae,
+                onClose: se,
+                children: d.map((c) => /* @__PURE__ */ e(ke, {
+                  className: c.className,
+                  onClick: c.onClick,
+                  children: c.label
+                }, c.label))
+              })] }) : h && typeof d == "function" && /* @__PURE__ */ e(r, {
+                dataTest: "extra-action-button",
+                variant: "text",
+                onClick: d,
+                children: h
               }),
-              le && Z && /* @__PURE__ */ e(f, {
-                title: U,
-                children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, {
-                  dataTest: "fullscreen-button",
-                  "aria-label": C ? void 0 : U,
-                  variant: "textGray",
-                  size: "small",
-                  onClick: () => {
-                    V !== void 0 && q ? q() : re(!O);
-                  },
-                  endIcon: a ? /* @__PURE__ */ e(ve, {
-                    width: 20,
-                    height: 20,
-                    color: "text-delta-700"
-                  }) : /* @__PURE__ */ e(be, {
-                    width: 20,
-                    height: 20,
-                    color: "text-delta-700"
-                  }),
-                  children: C
-                }) })
-              }),
-              M && /* @__PURE__ */ e(f, {
-                title: t === "en" ? "Close" : "Lukk",
-                open: r ? !1 : void 0,
-                children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(n, {
-                  dataTest: "close-button",
-                  "aria-label": u ? void 0 : t === "en" ? "Close" : "Lukk",
-                  variant: "textGray",
-                  size: "small",
-                  disabled: r,
-                  disabledReason: k,
-                  onClick: w,
-                  endIcon: /* @__PURE__ */ e(P, {
-                    height: 20,
-                    width: 20,
-                    color: "text-delta-700"
-                  }),
-                  children: u
-                }) })
-              })
+              " ",
+              D,
+              W ? /* @__PURE__ */ e("div", {
+                className: f("flex justify-end gap-x-2", G),
+                children: $
+              }) : null
             ]
-          })]
-        }), p && /* @__PURE__ */ e("div", {
-          className: "truncate text-2xl font-semibold text-delta-800",
-          children: c
+          }) : /* @__PURE__ */ e(p, { children: W ? /* @__PURE__ */ e("div", {
+            className: f("flex justify-end gap-x-2 border-t-[1px] border-delta-200 p-4", G),
+            children: $
+          }) : null })]
         })]
-      }), /* @__PURE__ */ l("div", {
-        className: H("flex flex-col", a && !i && "h-[87dvh]"),
-        children: [/* @__PURE__ */ e("div", {
-          className: "flex-grow overflow-y-auto overscroll-contain",
-          children: typeof g == "function" ? g({ fullScreen: a }) : g
-        }), (Array.isArray(d) && d.length || typeof d == "function") && m || D ? /* @__PURE__ */ l("div", {
-          className: h("flex items-center justify-between border-0 border-t-[1px] border-solid border-delta-200 bg-white p-4", ie),
-          children: [
-            Array.isArray(d) && d.length && m ? /* @__PURE__ */ l(v, { children: [/* @__PURE__ */ e(n, {
-              dataTest: "extra-actions-button",
-              variant: "textGray",
-              startIcon: /* @__PURE__ */ e(he, {
-                width: 24,
-                height: 24
-              }),
-              onClick: oe,
-              children: m
-            }), /* @__PURE__ */ e(ge, {
-              open: de,
-              anchorEl: ae,
-              onClose: se,
-              children: d.map((s) => /* @__PURE__ */ e(xe, {
-                className: s.className,
-                onClick: s.onClick,
-                children: s.label
-              }, s.label))
-            })] }) : m && typeof d == "function" && /* @__PURE__ */ e(n, {
-              dataTest: "extra-action-button",
-              variant: "text",
-              onClick: d,
-              children: m
-            }),
-            " ",
-            D,
-            $ ? /* @__PURE__ */ e("div", {
-              className: h("flex justify-end gap-x-2", G),
-              children: A
-            }) : null
-          ]
-        }) : /* @__PURE__ */ e(v, { children: $ ? /* @__PURE__ */ e("div", {
-          className: h("flex justify-end gap-x-2 border-t-[1px] border-delta-200 p-4", G),
-          children: A
-        }) : null })]
-      })]
+      })
     })
   ] });
 };
 export {
-  $e as MinimizableDialog
+  Ke as MinimizableDialog
 };