asma-ui-core 3.77.0 → 3.78.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,58 +1,65 @@
1
- import { cn as u } from "../../../../helpers/cn.js";
2
- import { DotsVerticalIcon as b } from "../../../icons/dots-vertical-icon/DotsVerticalIcon.js";
3
- import { StyledButton as h } from "../../../inputs/button/StyledButton.js";
4
- import { StyledMenu as g } from "../../../navigation/menu/StyledMenu.js";
5
- import { StyledMenuItem as p } from "../../../navigation/menu/StyledMenuItem.js";
6
- import { Fragment as v, useState as x } from "react";
1
+ import { cn as f } from "../../../../helpers/cn.js";
2
+ import { DotsVerticalIcon as g } from "../../../icons/dots-vertical-icon/DotsVerticalIcon.js";
3
+ import { StyledButton as p } from "../../../inputs/button/StyledButton.js";
4
+ import { StyledMenu as x } from "../../../navigation/menu/StyledMenu.js";
5
+ import { StyledMenuItem as v } from "../../../navigation/menu/StyledMenuItem.js";
6
+ import { Fragment as k, useState as T } from "react";
7
7
  import { Fragment as A, jsx as n, jsxs as o } from "react/jsx-runtime";
8
- function w(e) {
8
+ function O(e) {
9
9
  return e != null && (e.inlineActions.length > 0 || e.showMoreMenu);
10
10
  }
11
- function T({ action: e, showLabel: t, selectionTone: l = !1 }) {
12
- if (e.render) return e.render({ showLabel: t });
13
- const i = e.ariaLabel ?? e.label;
14
- return /* @__PURE__ */ n(h, {
11
+ function C({ action: e, showLabel: l, selectionTone: t = !1 }) {
12
+ if (e.render) return e.render({ showLabel: l });
13
+ const a = e.ariaLabel ?? e.label;
14
+ return /* @__PURE__ */ n(p, {
15
15
  dataTest: e.dataTest ?? `dynamic-toolbar-action-${e.id}`,
16
- variant: e.variant ?? (l ? "text" : "outlined"),
16
+ variant: e.variant ?? (t ? "text" : "outlined"),
17
17
  error: e.tone === "danger",
18
18
  size: e.size ?? "large",
19
19
  disabled: e.disabled,
20
20
  startIcon: e.icon,
21
21
  onClick: e.onClick,
22
- "aria-label": t ? void 0 : i,
23
- children: t ? e.label : void 0
22
+ "aria-label": l && e.ariaLabel == null ? void 0 : a,
23
+ children: l ? e.label : void 0
24
24
  });
25
25
  }
26
- function k({ overflowMenuLabel: e, onOpen: t }) {
27
- return /* @__PURE__ */ n(h, {
26
+ function M({ overflowMenuLabel: e, onOpen: l }) {
27
+ return /* @__PURE__ */ n(p, {
28
28
  dataTest: "dynamic-toolbar-overflow-actions",
29
29
  variant: "text",
30
30
  size: "large",
31
- endIcon: /* @__PURE__ */ n(b, {
31
+ endIcon: /* @__PURE__ */ n(g, {
32
32
  width: 20,
33
33
  height: 20
34
34
  }),
35
- onClick: (l) => t?.(l.currentTarget),
35
+ onClick: (t) => l?.(t.currentTarget),
36
36
  "aria-label": e,
37
37
  "aria-haspopup": "menu",
38
38
  children: e
39
39
  });
40
40
  }
41
- function F({ plan: e, overflowMenuLabel: t, className: l, selectionTone: i = !1 }) {
42
- const [s, a] = x(null), { inlineActions: c, overflowActions: f, showMoreMenu: m } = e;
43
- return !c.length && !m ? null : /* @__PURE__ */ o("div", {
44
- className: u("flex shrink-0 flex-nowrap items-center gap-2", l),
45
- children: [c.map(({ action: r, showLabel: d }) => /* @__PURE__ */ n(T, {
46
- action: r,
47
- showLabel: d,
48
- selectionTone: i
49
- }, r.id)), m && /* @__PURE__ */ o(A, { children: [/* @__PURE__ */ n(k, {
50
- overflowMenuLabel: t,
51
- onOpen: a
52
- }), /* @__PURE__ */ n(g, {
53
- anchorEl: s,
54
- open: !!s,
55
- onClose: () => a(null),
41
+ function j({ plan: e, overflowMenuLabel: l, className: t, selectionTone: a = !1, registerActionWidth: d }) {
42
+ const [m, s] = T(null), { inlineActions: u, overflowActions: b, showMoreMenu: c } = e;
43
+ return !u.length && !c ? null : /* @__PURE__ */ o("div", {
44
+ className: f("flex shrink-0 flex-nowrap items-center gap-2", t),
45
+ children: [u.map(({ action: r, showLabel: i }) => {
46
+ const h = /* @__PURE__ */ n(C, {
47
+ action: r,
48
+ showLabel: i,
49
+ selectionTone: a
50
+ }, r.id);
51
+ return d == null || r.measureInStrip !== !1 ? h : /* @__PURE__ */ n("span", {
52
+ ref: d(r.id, i),
53
+ className: "inline-flex shrink-0",
54
+ children: h
55
+ }, r.id);
56
+ }), c && /* @__PURE__ */ o(A, { children: [/* @__PURE__ */ n(M, {
57
+ overflowMenuLabel: l,
58
+ onOpen: s
59
+ }), /* @__PURE__ */ n(x, {
60
+ anchorEl: m,
61
+ open: !!m,
62
+ onClose: () => s(null),
56
63
  anchorOrigin: {
57
64
  vertical: "bottom",
58
65
  horizontal: "right"
@@ -61,13 +68,13 @@ function F({ plan: e, overflowMenuLabel: t, className: l, selectionTone: i = !1
61
68
  vertical: "top",
62
69
  horizontal: "right"
63
70
  },
64
- 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, {
71
+ 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, {
65
72
  disabled: r.disabled,
66
73
  onClick: () => {
67
- a(null), r.onClick();
74
+ s(null), r.onClick();
68
75
  },
69
76
  children: /* @__PURE__ */ o("div", {
70
- className: u("flex items-center gap-2", r.tone === "danger" ? "text-beta-500" : "text-delta-700"),
77
+ className: f("flex items-center gap-2", r.tone === "danger" ? "text-beta-500" : "text-delta-700"),
71
78
  children: [r.icon, /* @__PURE__ */ n("span", { children: r.label })]
72
79
  })
73
80
  })] }, r.id))
@@ -75,8 +82,8 @@ function F({ plan: e, overflowMenuLabel: t, className: l, selectionTone: i = !1
75
82
  });
76
83
  }
77
84
  export {
78
- k as MoreTriggerButton,
79
- T as ToolbarActionButton,
80
- F as ToolbarActionGroup,
81
- w as hasPlannedActions
85
+ M as MoreTriggerButton,
86
+ C as ToolbarActionButton,
87
+ j as ToolbarActionGroup,
88
+ O as hasPlannedActions
82
89
  };
@@ -1,40 +1,54 @@
1
- import { MoreTriggerButton as c, ToolbarActionButton as a } from "./ToolbarActionGroup.js";
2
- import { SelectionIndicator as d } from "./ToolbarRows.js";
3
- import { Fragment as f } from "react";
1
+ import { MoreTriggerButton as m, ToolbarActionButton as t } from "./ToolbarActionGroup.js";
2
+ import { SelectionIndicator as p } from "./ToolbarRows.js";
3
+ import { Fragment as u } from "react";
4
4
  import { jsx as e, jsxs as o } from "react/jsx-runtime";
5
- 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: "" };
6
- function x({ actions: n, register: r, overflowMenuLabel: t, selectionIndicator: l }) {
5
+ 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: "" };
6
+ function Y({ actions: r, register: n, overflowMenuLabel: d, selectionIndicator: l, title: i, titleClassName: f }) {
7
7
  return /* @__PURE__ */ e("div", {
8
8
  "aria-hidden": !0,
9
- ...m,
9
+ ...T,
10
10
  className: "pointer-events-none invisible absolute left-0 top-0 h-0 overflow-hidden",
11
11
  children: /* @__PURE__ */ o("div", {
12
12
  className: "flex h-0 flex-nowrap items-center overflow-hidden",
13
13
  children: [
14
- n.map((i) => /* @__PURE__ */ o(f, { children: [/* @__PURE__ */ e("span", {
15
- ref: r(s(i.id, !0)),
16
- className: "inline-flex shrink-0 whitespace-nowrap",
17
- children: /* @__PURE__ */ e(a, {
18
- action: i,
19
- showLabel: !0
20
- })
21
- }), /* @__PURE__ */ e("span", {
22
- ref: r(s(i.id, !1)),
23
- className: "inline-flex shrink-0",
24
- children: /* @__PURE__ */ e(a, {
25
- action: i,
26
- showLabel: !1
27
- })
28
- })] }, i.id)),
14
+ i != null && /* @__PURE__ */ e("span", {
15
+ ref: n("title"),
16
+ className: `inline-flex shrink-0 whitespace-nowrap ${f ?? ""}`,
17
+ children: i
18
+ }),
19
+ r.filter((a) => a.measureInStrip !== !1).map((a) => {
20
+ const s = (h) => `${a.dataTest ?? `dynamic-toolbar-action-${a.id}`}-measure-${h}`;
21
+ return /* @__PURE__ */ o(u, { children: [/* @__PURE__ */ e("span", {
22
+ ref: n(c(a.id, !0)),
23
+ className: "inline-flex shrink-0 whitespace-nowrap",
24
+ children: /* @__PURE__ */ e(t, {
25
+ action: {
26
+ ...a,
27
+ dataTest: s("label")
28
+ },
29
+ showLabel: !0
30
+ })
31
+ }), /* @__PURE__ */ e("span", {
32
+ ref: n(c(a.id, !1)),
33
+ className: "inline-flex shrink-0",
34
+ children: /* @__PURE__ */ e(t, {
35
+ action: {
36
+ ...a,
37
+ dataTest: s("icon")
38
+ },
39
+ showLabel: !1
40
+ })
41
+ })] }, a.id);
42
+ }),
29
43
  /* @__PURE__ */ e("span", {
30
- ref: r(h),
44
+ ref: n(v),
31
45
  className: "inline-flex shrink-0",
32
- children: /* @__PURE__ */ e(c, { overflowMenuLabel: t })
46
+ children: /* @__PURE__ */ e(m, { overflowMenuLabel: d })
33
47
  }),
34
48
  l && /* @__PURE__ */ e("span", {
35
- ref: r("selection-indicator"),
49
+ ref: n("selection-indicator"),
36
50
  className: "inline-flex shrink-0 whitespace-nowrap",
37
- children: /* @__PURE__ */ e(d, {
51
+ children: /* @__PURE__ */ e(p, {
38
52
  selectedCount: l.selectedCount,
39
53
  onClearSelection: l.hasClear ? () => {
40
54
  } : void 0,
@@ -46,11 +60,13 @@ function x({ actions: n, register: r, overflowMenuLabel: t, selectionIndicator:
46
60
  });
47
61
  }
48
62
  export {
49
- h as KEY_MORE_BUTTON,
50
- T as KEY_SEARCH,
51
- b as KEY_SELECTION_INDICATOR,
52
- N as KEY_TITLE,
53
- x as ToolbarMeasurementStrip,
54
- s as actionKey,
55
- w as filterKey
63
+ S as KEY_LEADING,
64
+ v as KEY_MORE_BUTTON,
65
+ _ as KEY_SEARCH,
66
+ C as KEY_SELECTION_INDICATOR,
67
+ K as KEY_STATUS,
68
+ x as KEY_TITLE,
69
+ Y as ToolbarMeasurementStrip,
70
+ c as actionKey,
71
+ $ as filterKey
56
72
  };
@@ -1,23 +1,29 @@
1
- import { useMemo as t } from "react";
2
- var r = {
1
+ import { useMemo as r } from "react";
2
+ var n = {
3
3
  en: {
4
4
  more: "More",
5
5
  clearSelection: "Clear selection",
6
- selected: "selected"
6
+ selected: "selected",
7
+ back: "Back",
8
+ menu: "Menu",
9
+ close: "Close"
7
10
  },
8
11
  no: {
9
12
  more: "Mer",
10
13
  clearSelection: "Fjern valg",
11
- selected: "valgt"
14
+ selected: "valgt",
15
+ back: "Tilbake",
16
+ menu: "Meny",
17
+ close: "Lukk"
12
18
  }
13
19
  };
14
- function l(e = "en") {
15
- return t(() => r[e] ?? r.en, [e]);
20
+ function t(e = "en") {
21
+ return r(() => n[e] ?? n.en, [e]);
16
22
  }
17
- function a(e, n) {
18
- return `${e} ${n.selected}`;
23
+ function a(e, o) {
24
+ return `${e} ${o.selected}`;
19
25
  }
20
26
  export {
21
27
  a as formatSelectionLabel,
22
- l as useToolbarTranslations
28
+ t as useToolbarTranslations
23
29
  };
@@ -0,0 +1,75 @@
1
+ import { useEffect as l, useRef as d, useState as i } from "react";
2
+ function v(r, n, e, s) {
3
+ const o = d(null);
4
+ l(() => {
5
+ if (!r) return;
6
+ const t = (c) => {
7
+ const u = c.target;
8
+ u != null && !e.current?.contains(u) && (o.current = u);
9
+ };
10
+ return document.addEventListener("focusin", t), () => document.removeEventListener("focusin", t);
11
+ }, [r, e]), l(() => {
12
+ if (n) e.current?.querySelector('input, textarea, [contenteditable="true"], button, [tabindex]')?.focus();
13
+ else if (o.current) {
14
+ const t = o.current;
15
+ (t.isConnected && t !== document.body ? t : s.current)?.focus(), o.current = null;
16
+ }
17
+ }, [
18
+ n,
19
+ e,
20
+ s
21
+ ]);
22
+ }
23
+ function a(r, n) {
24
+ const [e, s] = i(!1);
25
+ return l(() => {
26
+ const o = n.current;
27
+ if (!r || !o || typeof IntersectionObserver > "u") return;
28
+ const t = new IntersectionObserver(([c]) => s(c != null && !c.isIntersecting));
29
+ return t.observe(o), () => t.disconnect();
30
+ }, [r, n]), r && e;
31
+ }
32
+ var f = (r) => {
33
+ for (let n = r.parentElement; n != null; n = n.parentElement) {
34
+ const { overflowY: e } = getComputedStyle(n);
35
+ if (e === "auto" || e === "scroll") return n;
36
+ }
37
+ return document.documentElement;
38
+ };
39
+ function m(r, n) {
40
+ l(() => {
41
+ const e = n.current;
42
+ if (!r || !e || typeof ResizeObserver > "u") return;
43
+ const s = f(e), o = s.style.scrollPaddingTop;
44
+ let t = o;
45
+ const c = () => {
46
+ t = `${Math.ceil(e.getBoundingClientRect().height)}px`, s.style.scrollPaddingTop = t;
47
+ };
48
+ c();
49
+ const u = new ResizeObserver(c);
50
+ return u.observe(e), () => {
51
+ u.disconnect(), s.style.scrollPaddingTop === t && (s.style.scrollPaddingTop = o);
52
+ };
53
+ }, [r, n]);
54
+ }
55
+ function b(r, n, e) {
56
+ const [s, o] = i(!1);
57
+ return l(() => {
58
+ const t = r.current;
59
+ if (!e || !t || typeof ResizeObserver > "u") return;
60
+ const c = () => o(t.scrollHeight > t.clientHeight + 1);
61
+ c();
62
+ const u = new ResizeObserver(c);
63
+ return u.observe(t), () => u.disconnect();
64
+ }, [
65
+ r,
66
+ n,
67
+ e
68
+ ]), e && s;
69
+ }
70
+ export {
71
+ b as useIsTitleClamped,
72
+ v as useSearchFocus,
73
+ m as useStickyScrollPadding,
74
+ a as useStuckOnScroll
75
+ };
@@ -0,0 +1,159 @@
1
+ import { cn as m } from "../../../../helpers/cn.js";
2
+ import { HamburgerIcon as le } from "../../../icons/hamburger-icon/HamburgerIcon.js";
3
+ import { ArrowLeftIcon as ie } from "../../../icons/arrow-left-icon/ArrowLeftIcon.js";
4
+ import { StyledButton as E } from "../../../inputs/button/StyledButton.js";
5
+ import { useElementWidthPx as oe } from "../../../../hooks/useElementWidthPx.js";
6
+ import { useWidthRegistry as re } from "../../../../hooks/useWidthRegistry.js";
7
+ import { planToolbarActions as se } from "../../module/header-layout/planToolbarActions.js";
8
+ import { ToolbarActionButton as ce, ToolbarActionGroup as de } from "../../module/header-layout/ToolbarActionGroup.js";
9
+ import { useToolbarTranslations as me } from "../../module/header-layout/useTranslations.js";
10
+ import { KEY_MORE_BUTTON as ue, ToolbarMeasurementStrip as he, actionKey as z } from "../../module/header-layout/ToolbarMeasurement.js";
11
+ import { useIsTitleClamped as fe, useSearchFocus as pe, useStickyScrollPadding as xe, useStuckOnScroll as be } from "./PageHeader.hooks.js";
12
+ import { useMemo as G, useRef as I } from "react";
13
+ import { Fragment as ge, jsx as e, jsxs as l } from "react/jsx-runtime";
14
+ import { useMergeRefs as ve } from "@floating-ui/react";
15
+ var we = 744, Ne = 8, Te = 32, Ae = 120, Le = (t) => {
16
+ const { badgeCount: s, ...i } = t, a = {
17
+ ...i,
18
+ canHideLabel: i.icon != null && i.canHideLabel !== !1
19
+ };
20
+ if (s == null || a.render) return a;
21
+ const o = `${a.label} (${s})`;
22
+ return {
23
+ ...a,
24
+ label: o,
25
+ ariaLabel: o,
26
+ render: ({ showLabel: u }) => /* @__PURE__ */ l("span", {
27
+ className: "relative inline-flex",
28
+ children: [/* @__PURE__ */ e(ce, {
29
+ action: {
30
+ ...a,
31
+ ariaLabel: o
32
+ },
33
+ showLabel: u
34
+ }), /* @__PURE__ */ e("span", {
35
+ "aria-hidden": !0,
36
+ 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",
37
+ "data-testid": `${a.dataTest ?? `page-header-action-${a.id}`}-badge`,
38
+ children: s
39
+ })]
40
+ })
41
+ };
42
+ };
43
+ function Me({ compact: t }) {
44
+ return /* @__PURE__ */ l("div", {
45
+ className: "flex w-full min-w-0 items-center justify-between gap-2",
46
+ "aria-hidden": !0,
47
+ 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" })]
48
+ });
49
+ }
50
+ 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" }) {
51
+ 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;
52
+ pe(w != null, y, $, T);
53
+ const v = be(p, C);
54
+ xe(p, S);
55
+ 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({
56
+ actions: L,
57
+ availableWidth: K,
58
+ collapseLabels: !0,
59
+ resolveActionWidth: (d, _) => r[z(d.id, _)],
60
+ moreButtonWidthPx: r[ue]
61
+ }), [
62
+ L,
63
+ K,
64
+ r
65
+ ]), R = X ?? (h === "menu" ? c.menu : c.back), O = W ?? (h === "menu" ? /* @__PURE__ */ e(E, {
66
+ dataTest: `${x}-menu`,
67
+ variant: "text",
68
+ size: "large",
69
+ onClick: P,
70
+ "aria-label": R,
71
+ startIcon: /* @__PURE__ */ e(le, {
72
+ width: 24,
73
+ height: 24
74
+ })
75
+ }) : h === "back" ? /* @__PURE__ */ e(E, {
76
+ dataTest: `${x}-back`,
77
+ variant: n ? "text" : "outlined",
78
+ size: "large",
79
+ onClick: P,
80
+ "aria-label": n ? R : void 0,
81
+ startIcon: /* @__PURE__ */ e(ie, {
82
+ width: n ? 24 : 20,
83
+ height: n ? 24 : 20
84
+ }),
85
+ children: n ? void 0 : R
86
+ }) : null), j = n || v, ne = t === "" ? null : /* @__PURE__ */ e(s, {
87
+ ref: V,
88
+ tabIndex: -1,
89
+ "data-test": i,
90
+ "data-testid": i,
91
+ title: Z ? t : void 0,
92
+ 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"),
93
+ children: t
94
+ });
95
+ return /* @__PURE__ */ l(ge, { children: [p && /* @__PURE__ */ e("div", {
96
+ ref: C,
97
+ "aria-hidden": !0,
98
+ className: "h-px w-full",
99
+ style: { marginBottom: -1 }
100
+ }), /* @__PURE__ */ l("div", {
101
+ ref: S,
102
+ "data-testid": x,
103
+ "data-compact": n ? "true" : "false",
104
+ "data-stuck": v ? "true" : "false",
105
+ "aria-busy": f || void 0,
106
+ 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),
107
+ children: [
108
+ /* @__PURE__ */ e(he, {
109
+ actions: L,
110
+ register: b,
111
+ overflowMenuLabel: c.more,
112
+ title: t,
113
+ titleClassName: m("font-semibold", j ? "text-xl leading-7" : "text-2xl leading-8")
114
+ }),
115
+ O != null && /* @__PURE__ */ e("span", {
116
+ ref: b("slot:leading"),
117
+ className: "inline-flex shrink-0",
118
+ children: O
119
+ }),
120
+ /* @__PURE__ */ l("div", {
121
+ className: m(g ? "sr-only" : "flex min-w-0 flex-1 flex-col justify-center"),
122
+ children: [/* @__PURE__ */ l("div", {
123
+ className: "flex min-w-0 items-center gap-2",
124
+ children: [ne, M && !g && /* @__PURE__ */ e("span", {
125
+ ref: b("slot:status"),
126
+ className: "inline-flex shrink-0 items-center",
127
+ children: u
128
+ })]
129
+ }), !g && o != null && !v && /* @__PURE__ */ e("div", {
130
+ className: "mt-0.5 min-w-0 text-sm text-delta-700",
131
+ children: o
132
+ })]
133
+ }),
134
+ f && /* @__PURE__ */ e(Me, { compact: n }),
135
+ A && /* @__PURE__ */ l("div", {
136
+ ref: $,
137
+ className: "flex w-full min-w-0 items-center gap-2",
138
+ children: [/* @__PURE__ */ e("div", {
139
+ className: "min-w-0 flex-1",
140
+ children: w
141
+ }), /* @__PURE__ */ e(E, {
142
+ dataTest: `${x}-search-close`,
143
+ variant: "text",
144
+ size: "large",
145
+ onClick: Y,
146
+ children: F ?? c.close
147
+ })]
148
+ }),
149
+ !f && !A && /* @__PURE__ */ e(de, {
150
+ plan: ae,
151
+ overflowMenuLabel: c.more,
152
+ registerActionWidth: (d, _) => b(z(d, _))
153
+ })
154
+ ]
155
+ })] });
156
+ }
157
+ export {
158
+ Ge as PageHeader
159
+ };
@@ -1,27 +1,27 @@
1
1
  import { cn as f } from "../../../helpers/cn.js";
2
- import { resolveSx as D } from "../../../helpers/sx.js";
2
+ import { resolveSx as N } from "../../../helpers/sx.js";
3
3
  import { CloseIcon as X } from "../../icons/close-icon/CloseIcon.js";
4
4
  import { registerOpenModalDialog as B } from "../../../hooks/useTopLayer.hook.js";
5
5
  import { StyledButton as G } from "../../inputs/button/StyledButton.js";
6
6
  import { useMobileMediaQuery as P } from "../../../hooks/useMediaQuery.hook.js";
7
7
  import Q from "./StyledDialog.module.js";
8
- import { useEffect as S, useLayoutEffect as $, useRef as u } from "react";
9
- import { jsx as r, jsxs as l } from "react/jsx-runtime";
8
+ import { useEffect as D, useLayoutEffect as $, useRef as u } from "react";
9
+ import { jsx as l, jsxs as r } from "react/jsx-runtime";
10
10
  var J = {
11
11
  xs: 444,
12
12
  sm: 600,
13
13
  md: 900,
14
14
  lg: 1200,
15
15
  xl: 1536
16
- }, le = ({ open: t, onClose: a, children: _, dataTest: i, maxWidth: x = "sm", fullWidth: C, fullScreen: E, scroll: p = "paper", disableEscapeKeyDown: h, className: H, style: j, sx: M, classes: y, PaperProps: O, slotProps: o, onCloseText: w, showCloseIcon: v = !0, dialogLabel: d, dialogTitle: s, dialogHeaderNode: R }) => {
17
- const W = P(), b = u(null), c = u(!1), g = u(t), n = E ?? W;
18
- S(() => {
19
- g.current && !t && o?.transition?.onExited?.(), g.current = t;
16
+ }, re = ({ open: t, onClose: a, children: S, dataTest: i, maxWidth: x = "sm", fullWidth: _, fullScreen: C, scroll: E = "paper", disableEscapeKeyDown: p, className: H, style: j, sx: M, classes: h, PaperProps: O, slotProps: o, onCloseText: y, showCloseIcon: w = !0, dialogLabel: d, dialogTitle: s, dialogHeaderNode: R }) => {
17
+ const W = P(), v = u(null), c = u(!1), b = u(t), n = C ?? W;
18
+ D(() => {
19
+ b.current && !t && o?.transition?.onExited?.(), b.current = t;
20
20
  }, [t, o]), $(() => {
21
- const e = b.current;
21
+ const e = v.current;
22
22
  if (!(!e || !t))
23
23
  return e.open || (e.showModal(), e.focus({ preventScroll: !0 }), requestAnimationFrame(() => e.open && e.focus({ preventScroll: !0 }))), B(e);
24
- }, [t]), S(() => {
24
+ }, [t]), D(() => {
25
25
  if (!t) return;
26
26
  const e = document.body.style.overflow, K = document.documentElement.style.overflow;
27
27
  return document.body.style.overflow = "hidden", document.documentElement.style.overflow = "hidden", () => {
@@ -31,51 +31,51 @@ var J = {
31
31
  const m = {
32
32
  ...O,
33
33
  ...o?.paper
34
- }, k = x === !1 ? void 0 : J[x], { className: I, style: z, onClick: q, ...A } = o?.backdrop ?? {}, N = (e) => {
34
+ }, g = x === !1 ? void 0 : J[x], { className: I, style: z, onClick: q, ...A } = o?.backdrop ?? {}, k = (e) => {
35
35
  c.current || (c.current = !0, window.setTimeout(() => {
36
36
  c.current = !1;
37
37
  }, 0), a?.(e, "escapeKeyDown"));
38
38
  }, F = (e) => {
39
- e.preventDefault(), h || N(e);
39
+ e.preventDefault(), p || k(e);
40
40
  };
41
- return t ? /* @__PURE__ */ l("dialog", {
42
- ref: b,
41
+ return t ? /* @__PURE__ */ r("dialog", {
42
+ ref: v,
43
43
  tabIndex: -1,
44
44
  "data-testid": i,
45
45
  "aria-label": i,
46
46
  onCancel: F,
47
47
  onKeyDown: (e) => {
48
- e.key !== "Escape" || h || (e.preventDefault(), N(e));
48
+ e.key !== "Escape" || p || (e.preventDefault(), k(e));
49
49
  },
50
- className: f(Q.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", p === "body" && "overflow-y-auto", H, y?.root),
50
+ className: f(Q.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", E === "body" && "overflow-y-auto", H, h?.root),
51
51
  style: {
52
52
  zIndex: 999,
53
- ...D(M),
53
+ ...N(M),
54
54
  ...j
55
55
  },
56
- children: [/* @__PURE__ */ r("div", {
56
+ children: [/* @__PURE__ */ l("div", {
57
57
  ...A,
58
58
  className: f("absolute inset-0 bg-[#626e7eb2]", I),
59
59
  style: z,
60
60
  onClick: (e) => {
61
61
  q?.(e), e.defaultPrevented || a?.(e, "backdropClick");
62
62
  }
63
- }), /* @__PURE__ */ l("div", {
64
- className: f("relative z-[1] flex overflow-hidden rounded-lg border-0 bg-white p-0 text-delta-800 shadow-[0px_4px_40px_0px_#22213366]", p === "paper" && "flex-col", n && "rounded-none", m.className, y?.paper),
63
+ }), /* @__PURE__ */ r("div", {
64
+ className: f("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]", n && "rounded-none", m.className, h?.paper),
65
65
  style: {
66
66
  minWidth: 0,
67
67
  minHeight: 0,
68
- ...!n && k ? { maxWidth: k } : {},
68
+ ...!n && g ? { maxWidth: g } : {},
69
69
  ...n ? {
70
70
  width: "100%",
71
71
  maxWidth: "100%",
72
72
  height: "100%",
73
73
  maxHeight: "100%"
74
74
  } : {
75
- width: C ? "calc(100% - 64px)" : "auto",
75
+ width: _ ? "calc(100% - 64px)" : "auto",
76
76
  maxHeight: "100%"
77
77
  },
78
- ...D(m.sx),
78
+ ...N(m.sx),
79
79
  ...m.style,
80
80
  ...n ? {
81
81
  width: "100%",
@@ -84,25 +84,25 @@ var J = {
84
84
  maxHeight: "100%"
85
85
  } : { maxHeight: "calc(100% - 64px)" }
86
86
  },
87
- children: [(!!d || !!s || v) && /* @__PURE__ */ l("div", {
87
+ children: [(!!d || !!s || w) && /* @__PURE__ */ r("div", {
88
88
  className: "box-border flex w-full min-w-0 max-w-full justify-between px-4 pt-4",
89
- children: [/* @__PURE__ */ l("div", {
89
+ children: [/* @__PURE__ */ r("div", {
90
90
  className: "flex min-w-0 flex-1 flex-col justify-start gap-0.5",
91
- children: [d && /* @__PURE__ */ r("div", {
91
+ children: [d && /* @__PURE__ */ l("div", {
92
92
  className: "flex h-8 items-center text-sm font-normal leading-5 text-delta-600",
93
93
  children: d
94
- }), s && /* @__PURE__ */ r("div", {
94
+ }), s && /* @__PURE__ */ l("div", {
95
95
  className: "flex text-2xl font-semibold leading-8 text-delta-800",
96
96
  children: s
97
97
  })]
98
- }), v && /* @__PURE__ */ l("div", {
98
+ }), w && /* @__PURE__ */ r("div", {
99
99
  className: "flex min-w-0 max-w-full shrink-0 justify-end gap-2",
100
- children: [R, /* @__PURE__ */ r(G, {
100
+ children: [R, /* @__PURE__ */ l(G, {
101
101
  dataTest: `close-button-${i}`,
102
- "aria-label": w ? void 0 : "Close",
102
+ "aria-label": y ? void 0 : "Close",
103
103
  variant: "textGray",
104
104
  size: "small",
105
- endIcon: /* @__PURE__ */ r(X, {
105
+ endIcon: /* @__PURE__ */ l(X, {
106
106
  width: 20,
107
107
  height: 20
108
108
  }),
@@ -113,13 +113,13 @@ var J = {
113
113
  paddingRight: "6px",
114
114
  paddingLeft: "6px"
115
115
  },
116
- children: w
116
+ children: y
117
117
  })]
118
118
  })]
119
- }), _]
119
+ }), S]
120
120
  })]
121
121
  }) : null;
122
122
  };
123
123
  export {
124
- le as StyledDialog
124
+ re as StyledDialog
125
125
  };