asma-ui-core 3.104.0 → 3.106.0

package/dist/components/data-display/tooltip/StyledTooltip.js

@@ -1,92 +1,137 @@
-import { cn as N } from "../../../helpers/cn.js";
-import { resolveSx as U } from "../../../helpers/sx.js";
-import { firstTabbable as Y } from "../../../helpers/focusable.js";
-import { TOP_LAYER_PROPS as j, TOP_LAYER_RESET_STYLE as k, getOpenModalDialogAncestor as D, shouldUsePopoverTopLayer as z, useTopLayerRef as G } from "../../../hooks/useTopLayer.hook.js";
-import { Fragment as W, cloneElement as $, useEffect as q, useLayoutEffect as J, useRef as K, useState as Q } from "react";
-import { Fragment as V, jsx as c, jsxs as v } from "react/jsx-runtime";
-import { FloatingArrow as X, FloatingPortal as Z, arrow as ee, autoUpdate as te, flip as oe, offset as ne, safePolygon as re, shift as se, useDismiss as ie, useFloating as ae, useFocus as le, useHover as ce, useInteractions as fe, useMergeRefs as de, useRole as pe } from "@floating-ui/react";
-var ue = "#363E4A", me = (t) => {
+import { cn as ee } from "../../../helpers/cn.js";
+import { resolveSx as te } from "../../../helpers/sx.js";
+import { firstFocusable as oe, firstTabbable as ne } from "../../../helpers/focusable.js";
+import { TOP_LAYER_PROPS as re, TOP_LAYER_RESET_STYLE as se, getOpenModalDialogAncestor as ie, shouldUsePopoverTopLayer as ce, useTopLayerRef as le } from "../../../hooks/useTopLayer.hook.js";
+import { Fragment as ae, cloneElement as fe, useCallback as ue, useEffect as U, useId as pe, useLayoutEffect as L, useMemo as de, useRef as H, useState as me } from "react";
+import { Fragment as k, jsx as b, jsxs as _ } from "react/jsx-runtime";
+import { FloatingArrow as ge, FloatingPortal as be, arrow as Re, autoUpdate as ye, flip as ve, offset as Ee, safePolygon as he, shift as Pe, useDismiss as xe, useFloating as Te, useFocus as we, useHover as Fe, useInteractions as Oe, useMergeRefs as Ae, useRole as Le } from "@floating-ui/react";
+var _e = "#363E4A", De = (t) => {
   const n = document.createRange();
   return n.selectNodeContents(t), n.getBoundingClientRect();
-}, Te = (t) => !t.title && t.title !== 0 ? t.children : /* @__PURE__ */ c(ge, { ...t }), ge = ({ title: t, children: n, placement: x = "top", arrow: f = !1, enterDelay: h = 500, leaveDelay: E = 0, open: b, onOpen: F, onClose: T, disableHoverListener: A, disableFocusListener: P, offsetDistance: _, className: w, slotProps: d }) => {
-  const [L, O] = Q(!1), p = b !== void 0, s = b ?? L, R = K(null), S = (e) => {
-    p || O(e), e ? F?.() : T?.();
-  }, { refs: o, floatingStyles: C, context: r } = ae({
-    open: s,
+}, Me = [
+  "onFocus",
+  "onBlur",
+  "onMouseEnter",
+  "onMouseLeave",
+  "onMouseMove",
+  "onPointerDown",
+  "onPointerEnter",
+  "onPointerUp",
+  "onKeyDown"
+], ke = ({ children: t, ...n }) => {
+  const s = H({ element: null }), E = ue((i) => {
+    s.current.element = i, s.current.setReference?.(i);
+  }, []), c = t.type === ae, l = c ? /* @__PURE__ */ b("span", {
+    style: { display: "contents" },
+    children: t
+  }) : t, a = l.props, R = Ae([E, Object.getOwnPropertyDescriptor(a, "ref")?.value ?? Object.getOwnPropertyDescriptor(l, "ref")?.value]), h = de(() => Object.fromEntries(Me.map((i) => [i, (P) => {
+    const d = (s.current.getReferenceProps?.(a) ?? a)[i];
+    d?.(P);
+  }])), [a]), y = !!n.title || n.title === 0;
+  return /* @__PURE__ */ _(k, { children: [y ? fe(l, {
+    ...h,
+    ref: R
+  }) : l, y && /* @__PURE__ */ b(Se, {
+    ...n,
+    referenceRef: s,
+    isFragment: c
+  })] });
+}, Se = ({ title: t, referenceRef: n, isFragment: s, placement: E = "top", arrow: c = !1, enterDelay: l = 500, leaveDelay: a = 0, open: R, onOpen: h, onClose: y, disableHoverListener: i, disableFocusListener: P, openOnTap: d, persistentDescription: Y, persistentDescriptionId: z, offsetDistance: G, className: K, slotProps: x }) => {
+  const [V, W] = me(!1), T = R !== void 0, D = !!t || t === 0, m = D && (R ?? V), w = D && Y, M = H(null), S = (e) => {
+    T || W(e), e ? h?.() : y?.();
+  }, { refs: o, floatingStyles: $, context: f } = Te({
+    open: m,
     onOpenChange: S,
-    placement: x,
+    placement: E,
     strategy: "fixed",
-    whileElementsMounted: te,
+    whileElementsMounted: ye,
     middleware: [
-      ne(_ ?? (f ? 8 : 6)),
-      oe({ padding: 8 }),
-      se({ padding: 8 }),
-      ...f ? [ee({ element: R })] : []
+      Ee(G ?? (c ? 8 : 6)),
+      ve({ padding: 8 }),
+      Pe({ padding: 8 }),
+      ...c ? [Re({ element: M })] : []
     ]
-  }), { getReferenceProps: M, getFloatingProps: B } = fe([
-    ce(r, {
-      enabled: !p && !A,
+  }), { getReferenceProps: C, getFloatingProps: q } = Oe([
+    Fe(f, {
+      enabled: !T && !i,
       delay: {
-        open: h,
-        close: E
+        open: l,
+        close: a
       },
       move: !1,
-      handleClose: re()
+      mouseOnly: !!d,
+      handleClose: he()
     }),
-    le(r, { enabled: !p && !P }),
-    ie(r),
-    pe(r, { role: "tooltip" })
-  ]), y = s ? D(o.domReference.current) : void 0, u = z(y), H = G(o.setFloating, u), { floatingId: i } = r;
-  q(() => {
+    we(f, { enabled: !T && !P }),
+    xe(f, { ancestorScroll: !!d }),
+    Le(f, { role: "tooltip" }),
+    { reference: { onPointerUp: (e) => {
+      !d || e.pointerType !== "touch" || S(!m);
+    } } }
+  ]);
+  L(() => {
+    const e = n.current;
+    return e.setReference = o.setReference, o.setReference(e.element), () => {
+      e.setReference = void 0, e.getReferenceProps = void 0, o.setReference(null);
+    };
+  }, [n, o]), L(() => {
+    n.current.getReferenceProps = C;
+  }, [n, C]);
+  const B = m ? ie(o.domReference.current) : void 0, F = ce(B), J = le(o.setFloating, F), { floatingId: Q } = f, X = pe(), j = z ?? X, u = w ? j : Q, O = !!w || m, I = (e) => ne(e) ?? oe(e) ?? e, A = typeof t == "string" || typeof t == "number" ? String(t).trim() : "", N = (e, r) => {
+    const p = e.getAttribute("aria-describedby"), g = p?.split(/\s+/) ?? [];
+    if (g.includes(r)) return;
+    const Z = (v) => document.getElementById(v)?.textContent?.trim();
+    A && g.some((v) => v !== r && Z(v) === A) || e.setAttribute("aria-describedby", p ? `${p} ${r}` : r);
+  };
+  return U(() => {
     const e = o.domReference.current;
-    if (!s || !i || !(e instanceof HTMLElement)) return;
-    const a = Y(e) ?? e, l = a.getAttribute("aria-describedby");
-    return a.setAttribute("aria-describedby", l ? `${l} ${i}` : i), () => {
-      l === null ? a.removeAttribute("aria-describedby") : a.setAttribute("aria-describedby", l);
+    if (!O || !u || !(e instanceof HTMLElement)) return;
+    const r = I(e);
+    return N(r, u), () => {
+      const p = r.getAttribute("aria-describedby")?.split(/\s+/).filter((g) => g && g !== u).join(" ");
+      p ? r.setAttribute("aria-describedby", p) : r.removeAttribute("aria-describedby");
     };
   }, [
-    s,
+    O,
     o.domReference,
-    i
-  ]);
-  const m = n.type === W, g = m ? /* @__PURE__ */ c("span", {
-    style: { display: "contents" },
-    children: n
-  }) : n;
-  J(() => {
+    u,
+    A
+  ]), U(() => {
+    const e = o.domReference.current;
+    !O || !u || !(e instanceof HTMLElement) || N(I(e), u);
+  }), L(() => {
     const e = o.domReference.current;
-    !m || !e || o.setPositionReference({
+    !s || !e || o.setPositionReference({
       contextElement: e,
-      getBoundingClientRect: () => me(e)
+      getBoundingClientRect: () => De(e)
     });
-  }, [m, o]);
-  const { ["aria-describedby"]: be, ...I } = M({
-    ref: de([o.setReference, g.ref]),
-    ...g.props
-  });
-  return /* @__PURE__ */ v(V, { children: [$(g, I), s && /* @__PURE__ */ c(Z, {
-    root: y,
-    children: /* @__PURE__ */ v("div", {
-      ref: H,
-      ...u ? j : {},
-      ...B(),
+  }, [s, o]), /* @__PURE__ */ _(k, { children: [w && /* @__PURE__ */ b("span", {
+    id: j,
+    hidden: !0,
+    children: t
+  }), m && /* @__PURE__ */ b(be, {
+    root: B,
+    children: /* @__PURE__ */ _("div", {
+      ref: J,
+      ...F ? re : {},
+      ...q(),
       style: {
-        ...u ? k : {},
-        ...C,
+        ...F ? se : {},
+        ...$,
         fontFamily: "Roboto, Helvetica, Arial, sans-serif",
         overflow: "visible",
-        ...d?.tooltip?.style,
-        ...U(d?.tooltip?.sx)
+        ...x?.tooltip?.style,
+        ...te(x?.tooltip?.sx)
       },
-      className: N("z-[1500] block max-w-[320px] whitespace-normal break-words rounded-[3px] bg-[#363E4A] px-2 py-1 text-sm leading-5 text-white shadow-[0px_1px_6px_0px_rgba(0,0,0,0.15)]", w, d?.tooltip?.className),
-      children: [t, f && /* @__PURE__ */ c(X, {
-        ref: R,
-        context: r,
-        fill: ue
+      className: ee("z-[1500] block max-w-[320px] whitespace-normal break-words rounded-[3px] bg-[#363E4A] px-2 py-1 text-sm leading-5 text-white shadow-[0px_1px_6px_0px_rgba(0,0,0,0.15)]", K, x?.tooltip?.className),
+      children: [t, c && /* @__PURE__ */ b(ge, {
+        ref: M,
+        context: f,
+        fill: _e
       })]
     })
   })] });
 };
 export {
-  Te as StyledTooltip
+  ke as StyledTooltip
 };

package/dist/components/feedback/dialog/DialogBusyContext.js

@@ -0,0 +1,32 @@
+import { createContext as a, useCallback as i, useContext as l, useEffect as c, useMemo as g, useState as B } from "react";
+var y = {
+  en: "Wait until saved",
+  no: "Vent til lagringen er ferdig"
+}, f = a(null), x = (e, t = "en") => {
+  const [o, u] = B(0), s = i(() => (u((n) => n + 1), () => u((n) => n - 1)), []), r = o > 0;
+  return {
+    busy: r,
+    busyReason: e ?? y[t],
+    contextValue: g(() => ({
+      registerBusy: s,
+      busy: r,
+      busyReason: e
+    }), [
+      s,
+      r,
+      e
+    ])
+  };
+}, C = (e) => {
+  const t = l(f)?.registerBusy;
+  c(() => {
+    if (!(!e || !t))
+      return t();
+  }, [e, t]);
+};
+export {
+  f as DialogBusyContext,
+  y as WAIT_UNTIL_SAVED,
+  x as useDialogBusyBoundary,
+  C as useReportDialogBusy
+};

package/dist/components/feedback/dialog/StyledDialog.js

@@ -1,143 +1,167 @@
-import { cn as h } from "../../../helpers/cn.js";
-import { resolveSx as D } from "../../../helpers/sx.js";
-import { CloseIcon as J } from "../../icons/close-icon/CloseIcon.js";
-import { registerOpenModalDialog as U } from "../../../hooks/useTopLayer.hook.js";
-import { StyledButton as V } from "../../inputs/button/StyledButton.js";
-import { useMobileMediaQuery as Y } from "../../../hooks/useMediaQuery.hook.js";
-import Z from "./StyledDialog.module.js";
-import { StyledDialogTitleContext as ee } from "./dialogTitleContext.js";
-import { useEffect as w, useId as te, useLayoutEffect as le, useMemo as ne, useRef as s, useState as re } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-var oe = {
+import { cn as k } from "../../../helpers/cn.js";
+import { resolveSx as W } from "../../../helpers/sx.js";
+import { registerOpenModalDialog as se } from "../../../hooks/useTopLayer.hook.js";
+import { CloseIcon as ce } from "../../icons/close-icon/CloseIcon.js";
+import { DialogBusyContext as ue, useDialogBusyBoundary as me } from "./DialogBusyContext.js";
+import { StyledButton as fe } from "../../inputs/button/StyledButton.js";
+import { useMobileMediaQuery as xe } from "../../../hooks/useMediaQuery.hook.js";
+import { warnUnnamedDialog as pe } from "../../../helpers/warnUnnamedDialog.js";
+import he from "./StyledDialog.module.js";
+import { StyledDialogTitleContext as ye } from "./dialogTitleContext.js";
+import { useEffect as E, useId as D, useLayoutEffect as P, useMemo as we, useRef as i, useState as q } from "react";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+var ve = {
   xs: 444,
   sm: 600,
   md: 900,
   lg: 1200,
   xl: 1536
-}, he = ({ open: t, onClose: c, children: I, dataTest: y, maxWidth: v = "sm", fullWidth: H, fullScreen: M, scroll: _ = "paper", disableEscapeKeyDown: j, className: O, style: R, sx: W, classes: b, PaperProps: z, slotProps: o, onCloseText: g, showCloseIcon: k = !0, dialogLabel: m, dialogTitle: i, ariaLabel: L, dialogHeaderNode: P }) => {
-  const d = te(), [q, A] = re(), B = ne(() => ({
-    titleId: d,
-    setTitleId: A
-  }), [d]), E = i ? d : q, F = Y(), u = s(null), f = s(null), x = s(!1), C = s(t), a = M ?? F;
-  w(() => {
-    C.current && !t && o?.transition?.onExited?.(), C.current = t;
-  }, [t, o]), le(() => {
-    const e = u.current;
+}, _e = ({ open: t, onClose: y, children: C, dataTest: a, maxWidth: I = "sm", fullWidth: z, fullScreen: K, scroll: A = "paper", disableEscapeKeyDown: F, className: L, style: U, sx: X, classes: S, PaperProps: G, slotProps: s, busyReason: Q, locale: T = "en", onCloseText: N, showCloseIcon: H = !0, dialogLabel: c, dialogTitle: u, dialogHeaderNode: V, ariaLabel: w }) => {
+  const m = D(), R = D(), [$, J] = q(), Y = we(() => ({
+    titleId: m,
+    setTitleId: J
+  }), [m]), f = u ? m : $ ?? (c ? R : void 0), Z = xe(), l = i(null), v = i(null), b = i(!1), M = i(t), x = K ?? Z, { busy: p, busyReason: ee, contextValue: te } = me(Q, T), _ = D(), [h, ne] = q(), B = i(!1);
+  P(() => {
+    const e = l.current, n = !!f || !!w, o = e && t && !n ? e.querySelector('h1, h2, h3, h4, h5, h6, [role="heading"]') : null;
+    o && !o.id && (o.id = _);
+    const O = o?.id;
+    O !== h && ne(O), e && t && !n && !o && !B.current && (B.current = !0, pe(a));
+  }, [
+    t,
+    f,
+    w,
+    C,
+    h,
+    _,
+    a
+  ]), E(() => {
+    M.current && !t && s?.transition?.onExited?.(), M.current = t;
+  }, [t, s]), P(() => {
+    const e = l.current;
     if (!e || !t) return;
-    e.open || (f.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, e.showModal(), e.focus({ preventScroll: !0 }), requestAnimationFrame(() => e.open && e.focus({ preventScroll: !0 })));
-    const l = U(e);
+    e.open || (v.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, e.showModal(), e.focus({ preventScroll: !0 }), requestAnimationFrame(() => e.open && e.focus({ preventScroll: !0 })));
+    const n = se(e);
     return () => {
-      l(), f.current?.isConnected && f.current.focus({ preventScroll: !0 });
+      n(), v.current?.isConnected && v.current.focus({ preventScroll: !0 });
     };
-  }, [t]), w(() => {
+  }, [t]), E(() => {
     if (!t) return;
-    const e = document.body.style.overflow, l = document.documentElement.style.overflow;
+    const e = document.body.style.overflow, n = document.documentElement.style.overflow;
     return document.body.style.overflow = "hidden", document.documentElement.style.overflow = "hidden", () => {
-      document.body.style.overflow = e, document.documentElement.style.overflow = l;
+      document.body.style.overflow = e, document.documentElement.style.overflow = n;
     };
   }, [t]);
-  const p = {
-    ...z,
-    ...o?.paper
-  }, N = v === !1 ? void 0 : oe[v], { className: K, style: T, onClick: X, ...G } = o?.backdrop ?? {}, Q = (e) => {
-    x.current || (x.current = !0, window.setTimeout(() => {
-      x.current = !1;
-    }, 0), c?.(e, "escapeKeyDown"));
-  }, $ = (e) => {
+  const g = {
+    ...G,
+    ...s?.paper
+  }, j = I === !1 ? void 0 : ve[I], { className: oe, style: re, onClick: le, ...ie } = s?.backdrop ?? {}, de = (e) => {
+    p || b.current || (b.current = !0, window.setTimeout(() => {
+      b.current = !1;
+    }, 0), y?.(e, "escapeKeyDown"));
+  }, ae = (e) => {
     e.preventDefault();
   };
-  return w(() => {
-    if (!t || j) return;
-    const e = (l) => {
-      if (l.key !== "Escape" || l.defaultPrevented) return;
-      const S = document.activeElement;
-      S instanceof Element && S.closest("dialog[open]") !== u.current || Q(l);
+  return E(() => {
+    if (!t || F) return;
+    const e = (n) => {
+      if (n.key !== "Escape" || n.defaultPrevented) return;
+      const o = document.activeElement;
+      o instanceof Element && o.closest("dialog[open]") !== l.current || de(n);
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-  }), t ? /* @__PURE__ */ r("dialog", {
-    ref: u,
+  }), t ? /* @__PURE__ */ d("dialog", {
+    ref: l,
     tabIndex: -1,
-    "data-testid": y,
-    "aria-labelledby": E,
-    "aria-label": E ? void 0 : L,
-    onCancel: $,
-    className: h(Z.StyledDialog, "fixed inset-0 m-0 h-full max-h-none w-full max-w-none items-center justify-center overflow-hidden border-0 bg-transparent p-0 outline-none open:flex", _ === "body" && "overflow-y-auto", O, b?.root),
+    "data-testid": a,
+    "aria-labelledby": f ?? h,
+    "aria-label": f || h ? void 0 : w,
+    onCancel: ae,
+    onKeyDown: (e) => {
+      !p || e.key !== "Escape" || e.target.closest("dialog[open]") === l.current && e.preventDefault();
+    },
+    className: k(he.StyledDialog, "fixed inset-0 m-0 h-full max-h-none w-full max-w-none items-center justify-center overflow-hidden border-0 bg-transparent p-0 outline-none open:flex", A === "body" && "overflow-y-auto", L, S?.root),
     style: {
       zIndex: 999,
-      ...D(W),
-      ...R
+      ...W(X),
+      ...U
     },
-    children: [/* @__PURE__ */ n("div", {
-      ...G,
-      className: h("absolute inset-0 bg-[#626e7eb2]", K),
-      style: T,
+    children: [/* @__PURE__ */ r("div", {
+      ...ie,
+      className: k("absolute inset-0 bg-[#626e7eb2]", oe),
+      style: re,
       onClick: (e) => {
-        X?.(e), e.defaultPrevented || c?.(e, "backdropClick");
+        le?.(e), !e.defaultPrevented && !p && y?.(e, "backdropClick");
       }
-    }), /* @__PURE__ */ r("div", {
-      className: h("relative z-[1] flex flex-col overflow-hidden rounded-lg border-0 bg-white p-0 text-delta-800 shadow-[0px_4px_40px_0px_#22213366]", a && "rounded-none", p.className, b?.paper),
+    }), /* @__PURE__ */ d("div", {
+      className: k("relative z-[1] flex flex-col overflow-hidden rounded-lg border-0 bg-white p-0 text-delta-800 shadow-[0px_4px_40px_0px_#22213366]", x && "rounded-none", g.className, S?.paper),
       style: {
         minWidth: 0,
         minHeight: 0,
-        ...!a && N ? { maxWidth: N } : {},
-        ...a ? {
+        ...!x && j ? { maxWidth: j } : {},
+        ...x ? {
           width: "100%",
           maxWidth: "100%",
           height: "100%",
           maxHeight: "100%"
         } : {
-          width: H ? "calc(100% - 64px)" : "auto",
+          width: z ? "calc(100% - 64px)" : "auto",
           maxHeight: "100%"
         },
-        ...D(p.sx),
-        ...p.style,
-        ...a ? {
+        ...W(g.sx),
+        ...g.style,
+        ...x ? {
           width: "100%",
           maxWidth: "100%",
           height: "100%",
           maxHeight: "100%"
         } : { maxHeight: "calc(100% - 64px)" }
       },
-      children: [(!!m || !!i || k) && /* @__PURE__ */ r("div", {
+      children: [(!!c || !!u || H) && /* @__PURE__ */ d("div", {
         className: "box-border flex w-full min-w-0 max-w-full justify-between px-4 pt-4",
-        children: [/* @__PURE__ */ r("div", {
+        children: [/* @__PURE__ */ d("div", {
           className: "flex min-w-0 flex-1 flex-col justify-start gap-0.5",
-          children: [m && /* @__PURE__ */ n("div", {
+          children: [c && /* @__PURE__ */ r("div", {
+            id: R,
             className: "flex h-8 items-center text-sm font-normal leading-5 text-delta-600",
-            children: m
-          }), i && /* @__PURE__ */ n("div", {
-            id: d,
+            children: c
+          }), u && /* @__PURE__ */ r("div", {
+            id: m,
             className: "flex text-2xl font-semibold leading-8 text-delta-800",
-            children: i
+            children: u
           })]
-        }), k && /* @__PURE__ */ r("div", {
+        }), H && /* @__PURE__ */ d("div", {
           className: "flex min-w-0 max-w-full shrink-0 justify-end gap-2",
-          children: [P, /* @__PURE__ */ n(V, {
-            dataTest: `close-button-${y}`,
-            "aria-label": g ? void 0 : "Close",
+          children: [V, /* @__PURE__ */ r(fe, {
+            dataTest: `close-button-${a}`,
+            "aria-label": N ? void 0 : "Close",
             variant: "textGray",
             size: "small",
-            endIcon: /* @__PURE__ */ n(J, {
+            endIcon: /* @__PURE__ */ r(ce, {
               width: 20,
               height: 20
             }),
             className: "max-w-full shrink-0 whitespace-nowrap",
-            onClick: (e) => c?.(e, "escapeKeyDown"),
+            disabled: p,
+            disabledReason: ee,
+            onClick: (e) => y?.(e, "escapeKeyDown"),
             style: {
               color: "var(--colors-delta-800)",
               paddingRight: "6px",
               paddingLeft: "6px"
             },
-            children: g
+            children: N
           })]
         })]
-      }), /* @__PURE__ */ n(ee.Provider, {
-        value: B,
-        children: I
+      }), /* @__PURE__ */ r(ye.Provider, {
+        value: Y,
+        children: /* @__PURE__ */ r(ue.Provider, {
+          value: te,
+          children: C
+        })
       })]
     })]
   }) : null;
 };
 export {
-  he as StyledDialog
+  _e as StyledDialog
 };