asma-ui-core 3.91.0 → 3.92.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,36 +1,40 @@
|
|
|
1
|
-
import { cn as
|
|
2
|
-
import { DotsVerticalIcon as
|
|
1
|
+
import { cn as w } 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
|
-
import { StyledButton as
|
|
6
|
-
import { StyledMenu as
|
|
7
|
-
import { StyledMenuItem as
|
|
8
|
-
import { useElementWidthPx as
|
|
5
|
+
import { StyledButton as _ } from "../../../inputs/button/StyledButton.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
|
|
11
|
-
import { ToolbarActionButton as
|
|
12
|
-
import { useToolbarTranslations as
|
|
13
|
-
import { useMemo as
|
|
14
|
-
import { Fragment as
|
|
15
|
-
var Y = 470,
|
|
16
|
-
function
|
|
17
|
-
const
|
|
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 y, useState as V } from "react";
|
|
14
|
+
import { Fragment as C, jsx as r, jsxs as l } from "react/jsx-runtime";
|
|
15
|
+
var X = 2, Y = 470, q = 8, N = "dialog-footer-right", M = "dialog-footer-more", O = (n, a) => `dialog-footer-action:${n}:${a ? "label" : "icon"}`;
|
|
16
|
+
function me({ leftActions: n = [], leadingSlot: a, secondaryAction: s, primaryAction: d, fixed: k = !1, rounded: I = !0, locale: A = "en", className: E, dataTest: c = "styled-dialog-footer" }) {
|
|
17
|
+
const P = G(A), { ref: R, widthPx: m } = K(), { register: h, widths: t } = H(), [p, f] = V(null), u = m > 0 && m < Y, W = u ? 8 : 16, o = y(() => n.filter((e) => !e.hidden).map((e) => e.icon == null && e.canHideLabel == null ? {
|
|
18
18
|
...e,
|
|
19
19
|
canHideLabel: !1
|
|
20
|
-
} : e), [
|
|
21
|
-
|
|
20
|
+
} : e), [n]), B = t[N] ?? 0, x = s != null || d != null, v = Math.max(0, m - W * 2 - B - (x ? q : 0)), g = y(() => o.length >= X ? {
|
|
21
|
+
inlineActions: [],
|
|
22
|
+
overflowActions: o,
|
|
23
|
+
showMoreMenu: !0
|
|
24
|
+
} : U({
|
|
25
|
+
actions: o,
|
|
22
26
|
availableWidth: v,
|
|
23
27
|
collapseLabels: !0,
|
|
24
|
-
resolveActionWidth: (e,
|
|
25
|
-
moreButtonWidthPx:
|
|
28
|
+
resolveActionWidth: (e, i) => t[O(e.id, i)],
|
|
29
|
+
moreButtonWidthPx: t[M]
|
|
26
30
|
}), [
|
|
27
|
-
|
|
31
|
+
o,
|
|
28
32
|
v,
|
|
29
|
-
|
|
30
|
-
]), b = (e,
|
|
31
|
-
const
|
|
32
|
-
dataTest: e.dataTest ?? `${
|
|
33
|
-
variant: e.variant ??
|
|
33
|
+
t
|
|
34
|
+
]), b = (e, i, L) => {
|
|
35
|
+
const T = /* @__PURE__ */ r(_, {
|
|
36
|
+
dataTest: e.dataTest ?? `${c}-${L}`,
|
|
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:
|
|
57
|
+
children: T
|
|
54
58
|
})
|
|
55
|
-
}) :
|
|
59
|
+
}) : T;
|
|
56
60
|
};
|
|
57
|
-
return /* @__PURE__ */
|
|
61
|
+
return /* @__PURE__ */ l("div", {
|
|
58
62
|
ref: R,
|
|
59
|
-
"data-testid":
|
|
60
|
-
className:
|
|
63
|
+
"data-testid": c,
|
|
64
|
+
className: w("flex items-center justify-end self-stretch border-0 border-t border-solid border-delta-200 bg-white", u ? "gap-2 p-2" : "gap-4 p-4", I && "rounded-b-lg", k && "sticky bottom-0 z-[1] shadow-[0_0_16px_0_rgba(34,33,51,0.2)]", E),
|
|
61
65
|
children: [/* @__PURE__ */ r("div", {
|
|
62
66
|
className: "flex shrink-0 flex-nowrap items-center gap-2",
|
|
63
|
-
children:
|
|
64
|
-
ref:
|
|
67
|
+
children: a ?? /* @__PURE__ */ l(C, { children: [g.inlineActions.map(({ action: e, showLabel: i }) => /* @__PURE__ */ r("span", {
|
|
68
|
+
ref: h(O(e.id, i)),
|
|
65
69
|
className: "inline-flex shrink-0",
|
|
66
|
-
children: /* @__PURE__ */ r(
|
|
70
|
+
children: /* @__PURE__ */ r(D, {
|
|
67
71
|
action: e,
|
|
68
|
-
showLabel:
|
|
72
|
+
showLabel: i
|
|
69
73
|
})
|
|
70
|
-
}, e.id)),
|
|
71
|
-
ref:
|
|
74
|
+
}, e.id)), g.showMoreMenu && /* @__PURE__ */ l(C, { children: [/* @__PURE__ */ r("span", {
|
|
75
|
+
ref: h(M),
|
|
72
76
|
className: "inline-flex shrink-0",
|
|
73
|
-
children: /* @__PURE__ */ r(
|
|
74
|
-
dataTest: `${
|
|
77
|
+
children: /* @__PURE__ */ r(_, {
|
|
78
|
+
dataTest: `${c}-more`,
|
|
75
79
|
variant: "outlined",
|
|
76
80
|
size: "medium",
|
|
77
81
|
type: "button",
|
|
78
|
-
onClick: (e) =>
|
|
79
|
-
"aria-label":
|
|
82
|
+
onClick: (e) => f(e.currentTarget),
|
|
83
|
+
"aria-label": P.more,
|
|
80
84
|
"aria-haspopup": "menu",
|
|
81
85
|
"aria-expanded": p != null,
|
|
82
|
-
startIcon: /* @__PURE__ */ r(
|
|
86
|
+
startIcon: /* @__PURE__ */ r(S, {
|
|
83
87
|
width: 24,
|
|
84
88
|
height: 24
|
|
85
89
|
})
|
|
86
90
|
})
|
|
87
|
-
}), /* @__PURE__ */ r(
|
|
91
|
+
}), /* @__PURE__ */ r(F, {
|
|
88
92
|
anchorEl: p,
|
|
89
93
|
open: p != null,
|
|
90
|
-
onClose: () =>
|
|
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:
|
|
103
|
+
children: g.overflowActions.map((e) => /* @__PURE__ */ r(j, {
|
|
100
104
|
disabled: e.disabled,
|
|
101
105
|
onClick: () => {
|
|
102
|
-
|
|
106
|
+
f(null), e.onClick();
|
|
103
107
|
},
|
|
104
|
-
children: /* @__PURE__ */
|
|
105
|
-
className:
|
|
108
|
+
children: /* @__PURE__ */ l("div", {
|
|
109
|
+
className: w("flex items-center gap-2", e.tone === "danger" ? "text-beta-500" : "text-delta-700"),
|
|
106
110
|
children: [e.icon, /* @__PURE__ */ r("span", { 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__ */
|
|
113
|
-
ref:
|
|
116
|
+
children: /* @__PURE__ */ l("span", {
|
|
117
|
+
ref: h(N),
|
|
114
118
|
className: "flex shrink-0 flex-nowrap items-center gap-2",
|
|
115
|
-
children: [
|
|
119
|
+
children: [s && b(s, "outlined", "secondary"), d && b(d, "contained", "primary")]
|
|
116
120
|
})
|
|
117
121
|
})]
|
|
118
122
|
});
|
|
119
123
|
}
|
|
120
124
|
export {
|
|
121
|
-
|
|
125
|
+
me as StyledDialogFooter
|
|
122
126
|
};
|
|
@@ -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.
|
|
38
|
-
*
|
|
39
|
-
*
|
|
40
|
-
*
|
|
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
|
|
63
|
-
*
|
|
64
|
-
*
|
|
65
|
-
*
|
|
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 -
|
|
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
|