asma-ui-core 3.77.1 → 3.78.0

package/dist/components/custom/module/header-layout/ToolbarActionGroup.js

@@ -1,58 +1,65 @@
-import { cn as u } from "../../../../helpers/cn.js";
-import { DotsVerticalIcon as b } from "../../../icons/dots-vertical-icon/DotsVerticalIcon.js";
-import { StyledButton as h } from "../../../inputs/button/StyledButton.js";
-import { StyledMenu as g } from "../../../navigation/menu/StyledMenu.js";
-import { StyledMenuItem as p } from "../../../navigation/menu/StyledMenuItem.js";
-import { Fragment as v, useState as x } from "react";
+import { cn as f } from "../../../../helpers/cn.js";
+import { DotsVerticalIcon as g } from "../../../icons/dots-vertical-icon/DotsVerticalIcon.js";
+import { StyledButton as p } from "../../../inputs/button/StyledButton.js";
+import { StyledMenu as x } from "../../../navigation/menu/StyledMenu.js";
+import { StyledMenuItem as v } from "../../../navigation/menu/StyledMenuItem.js";
+import { Fragment as k, useState as T } from "react";
 import { Fragment as A, jsx as n, jsxs as o } from "react/jsx-runtime";
-function w(e) {
+function O(e) {
   return e != null && (e.inlineActions.length > 0 || e.showMoreMenu);
 }
-function T({ action: e, showLabel: t, selectionTone: l = !1 }) {
-  if (e.render) return e.render({ showLabel: t });
-  const i = e.ariaLabel ?? e.label;
-  return /* @__PURE__ */ n(h, {
+function C({ action: e, showLabel: l, selectionTone: t = !1 }) {
+  if (e.render) return e.render({ showLabel: l });
+  const a = e.ariaLabel ?? e.label;
+  return /* @__PURE__ */ n(p, {
     dataTest: e.dataTest ?? `dynamic-toolbar-action-${e.id}`,
-    variant: e.variant ?? (l ? "text" : "outlined"),
+    variant: e.variant ?? (t ? "text" : "outlined"),
     error: e.tone === "danger",
     size: e.size ?? "large",
     disabled: e.disabled,
     startIcon: e.icon,
     onClick: e.onClick,
-    "aria-label": t ? void 0 : i,
-    children: t ? e.label : void 0
+    "aria-label": l && e.ariaLabel == null ? void 0 : a,
+    children: l ? e.label : void 0
   });
 }
-function k({ overflowMenuLabel: e, onOpen: t }) {
-  return /* @__PURE__ */ n(h, {
+function M({ overflowMenuLabel: e, onOpen: l }) {
+  return /* @__PURE__ */ n(p, {
     dataTest: "dynamic-toolbar-overflow-actions",
     variant: "text",
     size: "large",
-    endIcon: /* @__PURE__ */ n(b, {
+    endIcon: /* @__PURE__ */ n(g, {
       width: 20,
       height: 20
     }),
-    onClick: (l) => t?.(l.currentTarget),
+    onClick: (t) => l?.(t.currentTarget),
     "aria-label": e,
     "aria-haspopup": "menu",
     children: e
   });
 }
-function F({ plan: e, overflowMenuLabel: t, className: l, selectionTone: i = !1 }) {
-  const [s, a] = x(null), { inlineActions: c, overflowActions: f, showMoreMenu: m } = e;
-  return !c.length && !m ? null : /* @__PURE__ */ o("div", {
-    className: u("flex shrink-0 flex-nowrap items-center gap-2", l),
-    children: [c.map(({ action: r, showLabel: d }) => /* @__PURE__ */ n(T, {
-      action: r,
-      showLabel: d,
-      selectionTone: i
-    }, r.id)), m && /* @__PURE__ */ o(A, { children: [/* @__PURE__ */ n(k, {
-      overflowMenuLabel: t,
-      onOpen: a
-    }), /* @__PURE__ */ n(g, {
-      anchorEl: s,
-      open: !!s,
-      onClose: () => a(null),
+function j({ plan: e, overflowMenuLabel: l, className: t, selectionTone: a = !1, registerActionWidth: d }) {
+  const [m, s] = T(null), { inlineActions: u, overflowActions: b, showMoreMenu: c } = e;
+  return !u.length && !c ? null : /* @__PURE__ */ o("div", {
+    className: f("flex shrink-0 flex-nowrap items-center gap-2", t),
+    children: [u.map(({ action: r, showLabel: i }) => {
+      const h = /* @__PURE__ */ n(C, {
+        action: r,
+        showLabel: i,
+        selectionTone: a
+      }, r.id);
+      return d == null || r.measureInStrip !== !1 ? h : /* @__PURE__ */ n("span", {
+        ref: d(r.id, i),
+        className: "inline-flex shrink-0",
+        children: h
+      }, r.id);
+    }), c && /* @__PURE__ */ o(A, { children: [/* @__PURE__ */ n(M, {
+      overflowMenuLabel: l,
+      onOpen: s
+    }), /* @__PURE__ */ n(x, {
+      anchorEl: m,
+      open: !!m,
+      onClose: () => s(null),
       anchorOrigin: {
         vertical: "bottom",
         horizontal: "right"
@@ -61,13 +68,13 @@ function F({ plan: e, overflowMenuLabel: t, className: l, selectionTone: i = !1
         vertical: "top",
         horizontal: "right"
       },
-      children: f.map((r, d) => /* @__PURE__ */ o(v, { children: [d > 0 && /* @__PURE__ */ n("hr", { className: "m-0 border-0 border-t border-solid border-delta-200" }), /* @__PURE__ */ n(p, {
+      children: b.map((r, i) => /* @__PURE__ */ o(k, { children: [i > 0 && /* @__PURE__ */ n("hr", { className: "m-0 border-0 border-t border-solid border-delta-200" }), /* @__PURE__ */ n(v, {
         disabled: r.disabled,
         onClick: () => {
-          a(null), r.onClick();
+          s(null), r.onClick();
         },
         children: /* @__PURE__ */ o("div", {
-          className: u("flex items-center gap-2", r.tone === "danger" ? "text-beta-500" : "text-delta-700"),
+          className: f("flex items-center gap-2", r.tone === "danger" ? "text-beta-500" : "text-delta-700"),
           children: [r.icon, /* @__PURE__ */ n("span", { children: r.label })]
         })
       })] }, r.id))
@@ -75,8 +82,8 @@ function F({ plan: e, overflowMenuLabel: t, className: l, selectionTone: i = !1
   });
 }
 export {
-  k as MoreTriggerButton,
-  T as ToolbarActionButton,
-  F as ToolbarActionGroup,
-  w as hasPlannedActions
+  M as MoreTriggerButton,
+  C as ToolbarActionButton,
+  j as ToolbarActionGroup,
+  O as hasPlannedActions
 };

package/dist/components/custom/module/header-layout/ToolbarMeasurement.js

@@ -1,40 +1,54 @@
-import { MoreTriggerButton as c, ToolbarActionButton as a } from "./ToolbarActionGroup.js";
-import { SelectionIndicator as d } from "./ToolbarRows.js";
-import { Fragment as f } from "react";
+import { MoreTriggerButton as m, ToolbarActionButton as t } from "./ToolbarActionGroup.js";
+import { SelectionIndicator as p } from "./ToolbarRows.js";
+import { Fragment as u } from "react";
 import { jsx as e, jsxs as o } from "react/jsx-runtime";
-var N = "title", T = "slot:search", b = "selection-indicator", h = "more-button", w = (n) => `slot:filter:${n ? "icon" : "label"}`, s = (n, r) => `action:${n}:${r ? "label" : "icon"}`, m = { inert: "" };
-function x({ actions: n, register: r, overflowMenuLabel: t, selectionIndicator: l }) {
+var x = "title", S = "slot:leading", _ = "slot:search", K = "slot:status", C = "selection-indicator", v = "more-button", $ = (r) => `slot:filter:${r ? "icon" : "label"}`, c = (r, n) => `action:${r}:${n ? "label" : "icon"}`, T = { inert: "" };
+function Y({ actions: r, register: n, overflowMenuLabel: d, selectionIndicator: l, title: i, titleClassName: f }) {
   return /* @__PURE__ */ e("div", {
     "aria-hidden": !0,
-    ...m,
+    ...T,
     className: "pointer-events-none invisible absolute left-0 top-0 h-0 overflow-hidden",
     children: /* @__PURE__ */ o("div", {
       className: "flex h-0 flex-nowrap items-center overflow-hidden",
       children: [
-        n.map((i) => /* @__PURE__ */ o(f, { children: [/* @__PURE__ */ e("span", {
-          ref: r(s(i.id, !0)),
-          className: "inline-flex shrink-0 whitespace-nowrap",
-          children: /* @__PURE__ */ e(a, {
-            action: i,
-            showLabel: !0
-          })
-        }), /* @__PURE__ */ e("span", {
-          ref: r(s(i.id, !1)),
-          className: "inline-flex shrink-0",
-          children: /* @__PURE__ */ e(a, {
-            action: i,
-            showLabel: !1
-          })
-        })] }, i.id)),
+        i != null && /* @__PURE__ */ e("span", {
+          ref: n("title"),
+          className: `inline-flex shrink-0 whitespace-nowrap ${f ?? ""}`,
+          children: i
+        }),
+        r.filter((a) => a.measureInStrip !== !1).map((a) => {
+          const s = (h) => `${a.dataTest ?? `dynamic-toolbar-action-${a.id}`}-measure-${h}`;
+          return /* @__PURE__ */ o(u, { children: [/* @__PURE__ */ e("span", {
+            ref: n(c(a.id, !0)),
+            className: "inline-flex shrink-0 whitespace-nowrap",
+            children: /* @__PURE__ */ e(t, {
+              action: {
+                ...a,
+                dataTest: s("label")
+              },
+              showLabel: !0
+            })
+          }), /* @__PURE__ */ e("span", {
+            ref: n(c(a.id, !1)),
+            className: "inline-flex shrink-0",
+            children: /* @__PURE__ */ e(t, {
+              action: {
+                ...a,
+                dataTest: s("icon")
+              },
+              showLabel: !1
+            })
+          })] }, a.id);
+        }),
         /* @__PURE__ */ e("span", {
-          ref: r(h),
+          ref: n(v),
           className: "inline-flex shrink-0",
-          children: /* @__PURE__ */ e(c, { overflowMenuLabel: t })
+          children: /* @__PURE__ */ e(m, { overflowMenuLabel: d })
         }),
         l && /* @__PURE__ */ e("span", {
-          ref: r("selection-indicator"),
+          ref: n("selection-indicator"),
           className: "inline-flex shrink-0 whitespace-nowrap",
-          children: /* @__PURE__ */ e(d, {
+          children: /* @__PURE__ */ e(p, {
             selectedCount: l.selectedCount,
             onClearSelection: l.hasClear ? () => {
             } : void 0,
@@ -46,11 +60,13 @@ function x({ actions: n, register: r, overflowMenuLabel: t, selectionIndicator:
   });
 }
 export {
-  h as KEY_MORE_BUTTON,
-  T as KEY_SEARCH,
-  b as KEY_SELECTION_INDICATOR,
-  N as KEY_TITLE,
-  x as ToolbarMeasurementStrip,
-  s as actionKey,
-  w as filterKey
+  S as KEY_LEADING,
+  v as KEY_MORE_BUTTON,
+  _ as KEY_SEARCH,
+  C as KEY_SELECTION_INDICATOR,
+  K as KEY_STATUS,
+  x as KEY_TITLE,
+  Y as ToolbarMeasurementStrip,
+  c as actionKey,
+  $ as filterKey
 };

package/dist/components/custom/module/header-layout/useTranslations.js

@@ -1,23 +1,29 @@
-import { useMemo as t } from "react";
-var r = {
+import { useMemo as r } from "react";
+var n = {
   en: {
     more: "More",
     clearSelection: "Clear selection",
-    selected: "selected"
+    selected: "selected",
+    back: "Back",
+    menu: "Menu",
+    close: "Close"
   },
   no: {
     more: "Mer",
     clearSelection: "Fjern valg",
-    selected: "valgt"
+    selected: "valgt",
+    back: "Tilbake",
+    menu: "Meny",
+    close: "Lukk"
   }
 };
-function l(e = "en") {
-  return t(() => r[e] ?? r.en, [e]);
+function t(e = "en") {
+  return r(() => n[e] ?? n.en, [e]);
 }
-function a(e, n) {
-  return `${e} ${n.selected}`;
+function a(e, o) {
+  return `${e} ${o.selected}`;
 }
 export {
   a as formatSelectionLabel,
-  l as useToolbarTranslations
+  t as useToolbarTranslations
 };

package/dist/components/custom/page/page-header/PageHeader.hooks.js

@@ -0,0 +1,75 @@
+import { useEffect as l, useRef as d, useState as i } from "react";
+function v(r, n, e, s) {
+  const o = d(null);
+  l(() => {
+    if (!r) return;
+    const t = (c) => {
+      const u = c.target;
+      u != null && !e.current?.contains(u) && (o.current = u);
+    };
+    return document.addEventListener("focusin", t), () => document.removeEventListener("focusin", t);
+  }, [r, e]), l(() => {
+    if (n) e.current?.querySelector('input, textarea, [contenteditable="true"], button, [tabindex]')?.focus();
+    else if (o.current) {
+      const t = o.current;
+      (t.isConnected && t !== document.body ? t : s.current)?.focus(), o.current = null;
+    }
+  }, [
+    n,
+    e,
+    s
+  ]);
+}
+function a(r, n) {
+  const [e, s] = i(!1);
+  return l(() => {
+    const o = n.current;
+    if (!r || !o || typeof IntersectionObserver > "u") return;
+    const t = new IntersectionObserver(([c]) => s(c != null && !c.isIntersecting));
+    return t.observe(o), () => t.disconnect();
+  }, [r, n]), r && e;
+}
+var f = (r) => {
+  for (let n = r.parentElement; n != null; n = n.parentElement) {
+    const { overflowY: e } = getComputedStyle(n);
+    if (e === "auto" || e === "scroll") return n;
+  }
+  return document.documentElement;
+};
+function m(r, n) {
+  l(() => {
+    const e = n.current;
+    if (!r || !e || typeof ResizeObserver > "u") return;
+    const s = f(e), o = s.style.scrollPaddingTop;
+    let t = o;
+    const c = () => {
+      t = `${Math.ceil(e.getBoundingClientRect().height)}px`, s.style.scrollPaddingTop = t;
+    };
+    c();
+    const u = new ResizeObserver(c);
+    return u.observe(e), () => {
+      u.disconnect(), s.style.scrollPaddingTop === t && (s.style.scrollPaddingTop = o);
+    };
+  }, [r, n]);
+}
+function b(r, n, e) {
+  const [s, o] = i(!1);
+  return l(() => {
+    const t = r.current;
+    if (!e || !t || typeof ResizeObserver > "u") return;
+    const c = () => o(t.scrollHeight > t.clientHeight + 1);
+    c();
+    const u = new ResizeObserver(c);
+    return u.observe(t), () => u.disconnect();
+  }, [
+    r,
+    n,
+    e
+  ]), e && s;
+}
+export {
+  b as useIsTitleClamped,
+  v as useSearchFocus,
+  m as useStickyScrollPadding,
+  a as useStuckOnScroll
+};

package/dist/components/custom/page/page-header/PageHeader.js

@@ -0,0 +1,159 @@
+import { cn as m } from "../../../../helpers/cn.js";
+import { HamburgerIcon as le } from "../../../icons/hamburger-icon/HamburgerIcon.js";
+import { ArrowLeftIcon as ie } from "../../../icons/arrow-left-icon/ArrowLeftIcon.js";
+import { StyledButton as E } from "../../../inputs/button/StyledButton.js";
+import { useElementWidthPx as oe } from "../../../../hooks/useElementWidthPx.js";
+import { useWidthRegistry as re } from "../../../../hooks/useWidthRegistry.js";
+import { planToolbarActions as se } from "../../module/header-layout/planToolbarActions.js";
+import { ToolbarActionButton as ce, ToolbarActionGroup as de } from "../../module/header-layout/ToolbarActionGroup.js";
+import { useToolbarTranslations as me } from "../../module/header-layout/useTranslations.js";
+import { KEY_MORE_BUTTON as ue, ToolbarMeasurementStrip as he, actionKey as z } from "../../module/header-layout/ToolbarMeasurement.js";
+import { useIsTitleClamped as fe, useSearchFocus as pe, useStickyScrollPadding as xe, useStuckOnScroll as be } from "./PageHeader.hooks.js";
+import { useMemo as G, useRef as I } from "react";
+import { Fragment as ge, jsx as e, jsxs as l } from "react/jsx-runtime";
+import { useMergeRefs as ve } from "@floating-ui/react";
+var we = 744, Ne = 8, Te = 32, Ae = 120, Le = (t) => {
+  const { badgeCount: s, ...i } = t, a = {
+    ...i,
+    canHideLabel: i.icon != null && i.canHideLabel !== !1
+  };
+  if (s == null || a.render) return a;
+  const o = `${a.label} (${s})`;
+  return {
+    ...a,
+    label: o,
+    ariaLabel: o,
+    render: ({ showLabel: u }) => /* @__PURE__ */ l("span", {
+      className: "relative inline-flex",
+      children: [/* @__PURE__ */ e(ce, {
+        action: {
+          ...a,
+          ariaLabel: o
+        },
+        showLabel: u
+      }), /* @__PURE__ */ e("span", {
+        "aria-hidden": !0,
+        className: "absolute -right-2 -top-1 flex h-5 min-w-[20px] items-center justify-center rounded-full border border-solid border-lime-500 bg-lime-300 px-1.5 text-sm font-semibold leading-5 text-gama-800",
+        "data-testid": `${a.dataTest ?? `page-header-action-${a.id}`}-badge`,
+        children: s
+      })]
+    })
+  };
+};
+function Me({ compact: t }) {
+  return /* @__PURE__ */ l("div", {
+    className: "flex w-full min-w-0 items-center justify-between gap-2",
+    "aria-hidden": !0,
+    children: [/* @__PURE__ */ e("div", { className: m("animate-pulse rounded bg-delta-100", t ? "h-6 w-3/5" : "h-8 w-2/5 max-w-[500px]") }), /* @__PURE__ */ e("div", { className: "h-10 w-14 shrink-0 animate-pulse rounded bg-delta-100" })]
+  });
+}
+function Ge({ title: t, titleAs: s = "h1", titleDataTest: i, titleRef: a, subtitle: o, status: u, leading: h, onLeadingClick: P, leadingLabel: X, leadingSlot: W, actions: k = [], search: w, searchOpen: y = !1, onSearchClose: Y, searchCloseLabel: F, loading: f = !1, sticky: p = !1, locale: D = "en", className: U, dataTest: x = "page-header" }) {
+  const c = me(D), { ref: S, widthPx: N } = oe(), { register: b, widths: r } = re(), T = I(null), C = I(null), $ = I(null), n = N > 0 && N < we, V = ve([T, a]), A = y && w != null, g = f || A;
+  pe(w != null, y, $, T);
+  const v = be(p, C);
+  xe(p, S);
+  const Z = fe(T, t, !g), L = G(() => k.filter((d) => !d.hidden).map(Le), [k]), B = Math.max(0, N - Te), H = h != null || W != null, M = u != null, q = H ? r["slot:leading"] ?? 0 : 0, J = M ? r["slot:status"] ?? 0 : 0, Q = r.title ?? 0, ee = Math.max(Ae, Math.min(Q, Math.floor(B * 0.5))), te = 1 + (H ? 1 : 0) + (M ? 1 : 0), K = Math.max(0, B - q - J - ee - Ne * te), ae = G(() => se({
+    actions: L,
+    availableWidth: K,
+    collapseLabels: !0,
+    resolveActionWidth: (d, _) => r[z(d.id, _)],
+    moreButtonWidthPx: r[ue]
+  }), [
+    L,
+    K,
+    r
+  ]), R = X ?? (h === "menu" ? c.menu : c.back), O = W ?? (h === "menu" ? /* @__PURE__ */ e(E, {
+    dataTest: `${x}-menu`,
+    variant: "text",
+    size: "large",
+    onClick: P,
+    "aria-label": R,
+    startIcon: /* @__PURE__ */ e(le, {
+      width: 24,
+      height: 24
+    })
+  }) : h === "back" ? /* @__PURE__ */ e(E, {
+    dataTest: `${x}-back`,
+    variant: n ? "text" : "outlined",
+    size: "large",
+    onClick: P,
+    "aria-label": n ? R : void 0,
+    startIcon: /* @__PURE__ */ e(ie, {
+      width: n ? 24 : 20,
+      height: n ? 24 : 20
+    }),
+    children: n ? void 0 : R
+  }) : null), j = n || v, ne = t === "" ? null : /* @__PURE__ */ e(s, {
+    ref: V,
+    tabIndex: -1,
+    "data-test": i,
+    "data-testid": i,
+    title: Z ? t : void 0,
+    className: m("m-0 line-clamp-2 min-w-0 break-words font-semibold text-delta-800 outline-none", j ? "text-xl leading-7" : "text-2xl leading-8"),
+    children: t
+  });
+  return /* @__PURE__ */ l(ge, { children: [p && /* @__PURE__ */ e("div", {
+    ref: C,
+    "aria-hidden": !0,
+    className: "h-px w-full",
+    style: { marginBottom: -1 }
+  }), /* @__PURE__ */ l("div", {
+    ref: S,
+    "data-testid": x,
+    "data-compact": n ? "true" : "false",
+    "data-stuck": v ? "true" : "false",
+    "aria-busy": f || void 0,
+    className: m("flex w-full items-center gap-2 px-4", v ? "min-h-[56px] py-2 shadow-sm" : "min-h-[64px] py-3", p && "sticky top-0 z-30 bg-delta-50", U),
+    children: [
+      /* @__PURE__ */ e(he, {
+        actions: L,
+        register: b,
+        overflowMenuLabel: c.more,
+        title: t,
+        titleClassName: m("font-semibold", j ? "text-xl leading-7" : "text-2xl leading-8")
+      }),
+      O != null && /* @__PURE__ */ e("span", {
+        ref: b("slot:leading"),
+        className: "inline-flex shrink-0",
+        children: O
+      }),
+      /* @__PURE__ */ l("div", {
+        className: m(g ? "sr-only" : "flex min-w-0 flex-1 flex-col justify-center"),
+        children: [/* @__PURE__ */ l("div", {
+          className: "flex min-w-0 items-center gap-2",
+          children: [ne, M && !g && /* @__PURE__ */ e("span", {
+            ref: b("slot:status"),
+            className: "inline-flex shrink-0 items-center",
+            children: u
+          })]
+        }), !g && o != null && !v && /* @__PURE__ */ e("div", {
+          className: "mt-0.5 min-w-0 text-sm text-delta-700",
+          children: o
+        })]
+      }),
+      f && /* @__PURE__ */ e(Me, { compact: n }),
+      A && /* @__PURE__ */ l("div", {
+        ref: $,
+        className: "flex w-full min-w-0 items-center gap-2",
+        children: [/* @__PURE__ */ e("div", {
+          className: "min-w-0 flex-1",
+          children: w
+        }), /* @__PURE__ */ e(E, {
+          dataTest: `${x}-search-close`,
+          variant: "text",
+          size: "large",
+          onClick: Y,
+          children: F ?? c.close
+        })]
+      }),
+      !f && !A && /* @__PURE__ */ e(de, {
+        plan: ae,
+        overflowMenuLabel: c.more,
+        registerActionWidth: (d, _) => b(z(d, _))
+      })
+    ]
+  })] });
+}
+export {
+  Ge as PageHeader
+};

package/dist/hooks/useRouteHeadingFocus.js

@@ -0,0 +1,12 @@
+import { useCallback as s, useEffect as o, useRef as u } from "react";
+function a(e) {
+  const t = u(e), r = u(!1), n = u(null), f = s((c) => {
+    n.current = c, c && r.current && (r.current = !1, c.focus());
+  }, []);
+  return o(() => {
+    t.current !== e && (t.current = e, r.current = !0, n.current && (r.current = !1, n.current.focus()));
+  }, [e]), f;
+}
+export {
+  a as useRouteHeadingFocus
+};