asma-ui-core 3.91.0 → 3.92.1

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.
Files changed (3) hide show
  1. package/dist/components/feedback/dialog/dialog-footer/StyledDialogFooter.js +52 -48
  2. package/dist/src/components/feedback/dialog/dialog-footer/StyledDialogFooter.d.ts +10 -9
  3. package/package.json +1 -1
package/dist/components/feedback/dialog/dialog-footer/StyledDialogFooter.js CHANGED
@@ -1,36 +1,40 @@
1
- import { cn as T } from "../../../../helpers/cn.js";
2
- import { DotsVerticalIcon as O } from "../../../icons/dots-vertical-icon/DotsVerticalIcon.js";
1
+ import { cn as L } from "../../../../helpers/cn.js";
2
+ import { DotsVerticalIcon as S } from "../../../icons/dots-vertical-icon/DotsVerticalIcon.js";
3
3
  import { LoadingIcon as $ } from "../../../icons/loading-icon/LoadingIcon.js";
4
4
  import { StyledTooltip as z } from "../../../data-display/tooltip/StyledTooltip.js";
5
5
  import { StyledButton as w } from "../../../inputs/button/StyledButton.js";
6
- import { StyledMenu as j } from "../../../navigation/menu/StyledMenu.js";
7
- import { StyledMenuItem as K } from "../../../navigation/menu/StyledMenuItem.js";
8
- import { useElementWidthPx as F } from "../../../../hooks/useElementWidthPx.js";
6
+ import { StyledMenu as F } from "../../../navigation/menu/StyledMenu.js";
7
+ import { StyledMenuItem as j } from "../../../navigation/menu/StyledMenuItem.js";
8
+ import { useElementWidthPx as K } from "../../../../hooks/useElementWidthPx.js";
9
9
  import { useWidthRegistry as H } from "../../../../hooks/useWidthRegistry.js";
10
- import { planToolbarActions as D } from "../../../custom/module/header-layout/planToolbarActions.js";
11
- import { ToolbarActionButton as G } from "../../../custom/module/header-layout/ToolbarActionGroup.js";
12
- import { useToolbarTranslations as U } from "../../../custom/module/header-layout/useTranslations.js";
13
- import { useMemo as C, useState as X } from "react";
14
- import { Fragment as _, jsx as r, jsxs as i } from "react/jsx-runtime";
15
- var Y = 470, V = 8, k = "dialog-footer-right", N = "dialog-footer-more", I = (t, n) => `dialog-footer-action:${t}:${n ? "label" : "icon"}`;
16
- function ce({ leftActions: t = [], leadingSlot: n, secondaryAction: a, primaryAction: s, fixed: P = !1, rounded: B = !0, locale: E = "en", className: M, dataTest: d = "styled-dialog-footer" }) {
17
- const W = U(E), { ref: R, widthPx: c } = F(), { register: m, widths: o } = H(), [p, h] = X(null), g = c > 0 && c < Y, S = g ? 8 : 16, u = C(() => t.filter((e) => !e.hidden).map((e) => e.icon == null && e.canHideLabel == null ? {
10
+ import { planToolbarActions as U } from "../../../custom/module/header-layout/planToolbarActions.js";
11
+ import { ToolbarActionButton as D } from "../../../custom/module/header-layout/ToolbarActionGroup.js";
12
+ import { useToolbarTranslations as G } from "../../../custom/module/header-layout/useTranslations.js";
13
+ import { useMemo as _, useState as V } from "react";
14
+ import { Fragment as y, jsx as r, jsxs as n } from "react/jsx-runtime";
15
+ var X = 2, Y = 470, q = 8, C = "dialog-footer-right", N = "dialog-footer-more", M = (l, a) => `dialog-footer-action:${l}:${a ? "label" : "icon"}`;
16
+ function me({ leftActions: l = [], leadingSlot: a, secondaryAction: s, primaryAction: d, fixed: O = !1, rounded: k = !0, locale: I = "en", className: A, dataTest: c = "styled-dialog-footer" }) {
17
+ const E = G(I), { ref: P, widthPx: m } = K(), { register: h, widths: o } = H(), [p, f] = V(null), g = m > 0 && m < Y, R = g ? 8 : 16, t = _(() => l.filter((e) => !e.hidden).map((e) => e.icon == null && e.canHideLabel == null ? {
18
18
  ...e,
19
19
  canHideLabel: !1
20
- } : e), [t]), A = o[k] ?? 0, x = a != null || s != null, v = Math.max(0, c - S * 2 - A - (x ? V : 0)), f = C(() => D({
21
- actions: u,
20
+ } : e), [l]), W = o[C] ?? 0, x = s != null || d != null, v = Math.max(0, m - R * 2 - W - (x ? q : 0)), u = _(() => t.length >= X ? {
21
+ inlineActions: [],
22
+ overflowActions: t,
23
+ showMoreMenu: !0
24
+ } : U({
25
+ actions: t,
22
26
  availableWidth: v,
23
27
  collapseLabels: !0,
24
- resolveActionWidth: (e, l) => o[I(e.id, l)],
28
+ resolveActionWidth: (e, i) => o[M(e.id, i)],
25
29
  moreButtonWidthPx: o[N]
26
30
  }), [
27
- u,
31
+ t,
28
32
  v,
29
33
  o
30
- ]), b = (e, l, L) => {
31
- const y = /* @__PURE__ */ r(w, {
32
- dataTest: e.dataTest ?? `${d}-${L}`,
33
- variant: e.variant ?? l,
34
+ ]), b = (e, i, B) => {
35
+ const T = /* @__PURE__ */ r(w, {
36
+ dataTest: e.dataTest ?? `${c}-${B}`,
37
+ variant: e.variant ?? i,
34
38
  error: e.tone === "danger",
35
39
  size: "medium",
36
40
  type: e.type ?? "button",
@@ -50,44 +54,44 @@ function ce({ leftActions: t = [], leadingSlot: n, secondaryAction: a, primaryAc
50
54
  title: e.tooltip,
51
55
  children: /* @__PURE__ */ r("span", {
52
56
  className: "inline-flex",
53
- children: y
57
+ children: T
54
58
  })
55
- }) : y;
59
+ }) : T;
56
60
  };
57
- return /* @__PURE__ */ i("div", {
58
- ref: R,
59
- "data-testid": d,
60
- className: T("flex items-center justify-end self-stretch border-0 border-t border-solid border-delta-200 bg-white", g ? "gap-2 p-2" : "gap-4 p-4", B && "rounded-b-lg", P && "sticky bottom-0 z-[1] shadow-[0_0_16px_0_rgba(34,33,51,0.2)]", M),
61
+ return /* @__PURE__ */ n("div", {
62
+ ref: P,
63
+ "data-testid": c,
64
+ className: L("flex items-center justify-end self-stretch border-0 border-t border-solid border-delta-200 bg-white", g ? "gap-2 p-2" : "gap-4 p-4", k && "rounded-b-lg", O && "sticky bottom-0 z-[1] shadow-[0_0_16px_0_rgba(34,33,51,0.2)]", A),
61
65
  children: [/* @__PURE__ */ r("div", {
62
66
  className: "flex shrink-0 flex-nowrap items-center gap-2",
63
- children: n ?? /* @__PURE__ */ i(_, { children: [f.inlineActions.map(({ action: e, showLabel: l }) => /* @__PURE__ */ r("span", {
64
- ref: m(I(e.id, l)),
67
+ children: a ?? /* @__PURE__ */ n(y, { children: [u.inlineActions.map(({ action: e, showLabel: i }) => /* @__PURE__ */ r("span", {
68
+ ref: h(M(e.id, i)),
65
69
  className: "inline-flex shrink-0",
66
- children: /* @__PURE__ */ r(G, {
70
+ children: /* @__PURE__ */ r(D, {
67
71
  action: e,
68
- showLabel: l
72
+ showLabel: i
69
73
  })
70
- }, e.id)), f.showMoreMenu && /* @__PURE__ */ i(_, { children: [/* @__PURE__ */ r("span", {
71
- ref: m(N),
74
+ }, e.id)), u.showMoreMenu && /* @__PURE__ */ n(y, { children: [/* @__PURE__ */ r("span", {
75
+ ref: h(N),
72
76
  className: "inline-flex shrink-0",
73
77
  children: /* @__PURE__ */ r(w, {
74
- dataTest: `${d}-more`,
78
+ dataTest: `${c}-more`,
75
79
  variant: "outlined",
76
80
  size: "medium",
77
81
  type: "button",
78
- onClick: (e) => h(e.currentTarget),
79
- "aria-label": W.more,
82
+ onClick: (e) => f(e.currentTarget),
83
+ "aria-label": E.more,
80
84
  "aria-haspopup": "menu",
81
85
  "aria-expanded": p != null,
82
- startIcon: /* @__PURE__ */ r(O, {
86
+ startIcon: /* @__PURE__ */ r(S, {
83
87
  width: 24,
84
88
  height: 24
85
89
  })
86
90
  })
87
- }), /* @__PURE__ */ r(j, {
91
+ }), /* @__PURE__ */ r(F, {
88
92
  anchorEl: p,
89
93
  open: p != null,
90
- onClose: () => h(null),
94
+ onClose: () => f(null),
91
95
  anchorOrigin: {
92
96
  vertical: "top",
93
97
  horizontal: "left"
@@ -96,27 +100,27 @@ function ce({ leftActions: t = [], leadingSlot: n, secondaryAction: a, primaryAc
96
100
  vertical: "bottom",
97
101
  horizontal: "left"
98
102
  },
99
- children: f.overflowActions.map((e) => /* @__PURE__ */ r(K, {
103
+ children: u.overflowActions.map((e) => /* @__PURE__ */ r(j, {
100
104
  disabled: e.disabled,
101
105
  onClick: () => {
102
- h(null), e.onClick();
106
+ f(null), e.onClick();
103
107
  },
104
- children: /* @__PURE__ */ i("div", {
105
- className: T("flex items-center gap-2", e.tone === "danger" ? "text-beta-500" : "text-delta-700"),
106
- children: [e.icon, /* @__PURE__ */ r("span", { children: e.label })]
108
+ children: /* @__PURE__ */ r("span", {
109
+ className: e.tone === "danger" ? "text-beta-500" : "text-delta-700",
110
+ children: e.label
107
111
  })
108
112
  }, e.id))
109
113
  })] })] })
110
114
  }), x && /* @__PURE__ */ r("span", {
111
115
  className: "flex min-w-px flex-1 flex-nowrap items-center justify-end",
112
- children: /* @__PURE__ */ i("span", {
113
- ref: m(k),
116
+ children: /* @__PURE__ */ n("span", {
117
+ ref: h(C),
114
118
  className: "flex shrink-0 flex-nowrap items-center gap-2",
115
- children: [a && b(a, "outlined", "secondary"), s && b(s, "contained", "primary")]
119
+ children: [s && b(s, "outlined", "secondary"), d && b(d, "contained", "primary")]
116
120
  })
117
121
  })]
118
122
  });
119
123
  }
120
124
  export {
121
- ce as StyledDialogFooter
125
+ me as StyledDialogFooter
122
126
  };
package/dist/src/components/feedback/dialog/dialog-footer/StyledDialogFooter.d.ts CHANGED
@@ -34,10 +34,11 @@ export interface StyledDialogFooterButton {
34
34
  }
35
35
  export interface StyledDialogFooterProps {
36
36
  /**
37
- * Left cluster (Figma "Left"): destructive and utility actions. They keep their
38
- * labels while they fit, collapse to icon-only next, and move into an icon-only
39
- * "More" menu once even that overflows — so 1, 2, 3 and 3+ actions all resolve to
40
- * the approved layout without the caller branching on width.
37
+ * Left cluster (Figma "Left"): destructive and utility actions.
38
+ *
39
+ * One action renders inline, keeping its label while it fits and collapsing to icon-only
40
+ * when it does not. Two or more always collapse into the icon-only "More" menu, matching
41
+ * the Figma `More` state — so the caller never branches on count or width itself.
41
42
  */
42
43
  leftActions?: DynamicToolbarAction[];
43
44
  /** Replaces the planned left cluster with arbitrary content — Figma's "Checkbox+Label" left variant, or footer info text. */
@@ -59,15 +60,15 @@ export interface StyledDialogFooterProps {
59
60
  *
60
61
  * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#26769-135283
61
62
  * @remarks Figma "Dialog footer" component set. The Figma `State` property
62
- * (Create/Edit/More/Reset filter) is **not** a prop — it is the emergent result of which
63
- * actions the caller passes and how much room the container leaves, which is the whole
64
- * point of ASMA-7099. `Mobile` is likewise derived from the **container** width, not the
65
- * viewport, so a footer inside a narrow popover compacts even on a desktop screen.
63
+ * (Create/Edit/More/Reset filter) is **not** a prop — it follows from the actions the caller
64
+ * passes: one left action is `Edit`, two or more is `More`. `Mobile` is derived from the
65
+ * **container** width, not the viewport, so a footer inside a narrow popover compacts even on
66
+ * a desktop screen.
66
67
  *
67
68
  * Layout: `Left` cluster (planned, adaptive) · `Right` cluster (Cancel + primary, always
68
69
  * visible and never overflowed — the primary action must stay reachable).
69
70
  *
70
- * @param leftActions - adaptive left cluster; label → icon-only → More menu
71
+ * @param leftActions - left cluster; one action inline, two or more behind the More menu
71
72
  * @param leadingSlot - arbitrary left content, replaces `leftActions`
72
73
  * @param secondaryAction - outlined Cancel
73
74
  * @param primaryAction - contained primary
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "3.91.0",
6
+ "version": "3.92.1",
7
7
  "type": "module",
8
8
  "sideEffects": [
9
9
  "**/*.css",