asma-ui-core 3.101.4 → 3.101.5
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,8 +1,8 @@
|
|
|
1
|
-
import { resolveSx as
|
|
2
|
-
import
|
|
3
|
-
import { useEffect as
|
|
4
|
-
import { jsx as
|
|
5
|
-
var
|
|
1
|
+
import { resolveSx as g } from "../../../helpers/sx.js";
|
|
2
|
+
import y from "clsx";
|
|
3
|
+
import { useEffect as Z, useRef as h } from "react";
|
|
4
|
+
import { jsx as _, jsxs as G } from "react/jsx-runtime";
|
|
5
|
+
var w = {
|
|
6
6
|
primary: {
|
|
7
7
|
backgroundColor: "var(--colors-badge-background)",
|
|
8
8
|
color: "var(--colors-badge-label)"
|
|
@@ -31,43 +31,47 @@ var _ = {
|
|
|
31
31
|
backgroundColor: "var(--colors-warning-700)",
|
|
32
32
|
color: "#fff"
|
|
33
33
|
}
|
|
34
|
-
},
|
|
34
|
+
}, H = {
|
|
35
35
|
"top-right": "top-0 right-0 translate-x-1/2 -translate-y-1/2 origin-[100%_0%]",
|
|
36
36
|
"top-left": "top-0 left-0 -translate-x-1/2 -translate-y-1/2 origin-[0%_0%]",
|
|
37
37
|
"bottom-right": "bottom-0 right-0 translate-x-1/2 translate-y-1/2 origin-[100%_100%]",
|
|
38
38
|
"bottom-left": "bottom-0 left-0 -translate-x-1/2 translate-y-1/2 origin-[0%_100%]"
|
|
39
|
-
},
|
|
40
|
-
const
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}, [
|
|
44
|
-
const x = e && typeof e == "object" && !Array.isArray(e) ? e : {},
|
|
39
|
+
}, S = "& .MuiBadge-badge", P = ({ color: i = "primary", dataTest: k, size: c = "medium", badgeContent: o, max: W, showZero: X, variant: j = "standard", purpose: A = "notification", statusMessage: d, invisible: C, anchorOrigin: f, children: p, className: u, sx: e, overlap: Y, classes: q, slots: F, slotProps: m, component: J, tabIndex: K, "aria-label": a, ...O }) => {
|
|
40
|
+
const n = h(null), l = typeof o == "number" ? o : void 0, b = h(l);
|
|
41
|
+
Z(() => {
|
|
42
|
+
l !== b.current && (b.current = l, n.current && (n.current.textContent = d ?? ""));
|
|
43
|
+
}, [l, d]);
|
|
44
|
+
const x = e && typeof e == "object" && !Array.isArray(e) ? e : {}, R = g(x[S]), B = g(Object.fromEntries(Object.entries(x).filter(([T]) => T !== S))), r = j === "dot", s = r && A !== "notification", t = p === void 0, v = !!C || !r && (o === 0 || o === void 0 || o === null), D = r ? null : typeof o == "number" && o > 99 ? "99+" : o, E = typeof o == "number" && o > 0 && o < 10, N = f?.vertical ?? "top", $ = f?.horizontal ?? "right", z = i === "primary" && !s ? {
|
|
45
45
|
borderColor: r ? "var(--colors-badge-border-dot)" : "var(--colors-badge-border-count)",
|
|
46
46
|
borderStyle: "solid",
|
|
47
47
|
borderWidth: r ? "var(--border-badge-dot)" : "var(--border-badge-count)"
|
|
48
|
-
} : {},
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
48
|
+
} : {}, I = t && !v && a ? {
|
|
49
|
+
role: "img",
|
|
50
|
+
"aria-label": a
|
|
51
|
+
} : {}, L = !t && a ? { "aria-label": a } : {};
|
|
52
|
+
return /* @__PURE__ */ G("span", {
|
|
53
|
+
className: t ? y("inline-flex shrink-0 align-middle", u) : "relative inline-flex shrink-0 align-middle",
|
|
54
|
+
"data-testid": k,
|
|
55
|
+
style: B,
|
|
56
|
+
...L,
|
|
57
|
+
...I,
|
|
58
|
+
...O,
|
|
55
59
|
children: [
|
|
56
|
-
|
|
57
|
-
!
|
|
60
|
+
p,
|
|
61
|
+
!v && /* @__PURE__ */ _("span", {
|
|
58
62
|
"aria-hidden": "true",
|
|
59
|
-
className:
|
|
63
|
+
className: y("box-border flex items-center justify-center whitespace-nowrap font-roboto font-semibold", !t && "absolute z-[1]", !t && H[`${N}-${$}`], s ? "h-[8px] w-[8px] min-w-[8px] rounded-full p-0" : r ? "h-[12px] w-[12px] min-w-[12px] rounded-full p-0" : c === "small" ? "h-[16px] w-max min-w-[16px] rounded-[20px] px-[4px] text-[0.75rem]" : "h-[20px] min-w-[20px] rounded-[20px] px-[6px] text-sm leading-5", !r && c === "medium" && E && "w-[20px]", !t && u, m?.badge?.className),
|
|
60
64
|
style: {
|
|
61
|
-
...
|
|
62
|
-
...
|
|
63
|
-
...
|
|
64
|
-
...
|
|
65
|
+
...w[i] ?? w.default,
|
|
66
|
+
...s ? { backgroundColor: "var(--colors-gama-500)" } : {},
|
|
67
|
+
...z,
|
|
68
|
+
...R,
|
|
65
69
|
...m?.badge?.style
|
|
66
70
|
},
|
|
67
71
|
children: D
|
|
68
72
|
}),
|
|
69
|
-
/* @__PURE__ */
|
|
70
|
-
ref:
|
|
73
|
+
/* @__PURE__ */ _("span", {
|
|
74
|
+
ref: n,
|
|
71
75
|
"aria-atomic": "true",
|
|
72
76
|
"aria-live": "polite",
|
|
73
77
|
className: "sr-only",
|
|
@@ -77,5 +81,5 @@ var _ = {
|
|
|
77
81
|
});
|
|
78
82
|
};
|
|
79
83
|
export {
|
|
80
|
-
|
|
84
|
+
P as StyledBadge
|
|
81
85
|
};
|
|
@@ -8,9 +8,10 @@ type StyledBadgePurpose = 'notification' | 'unread' | 'filter';
|
|
|
8
8
|
* `dot` = 12px lime circle with a stronger 2px border. Other colors and `small` are legacy app
|
|
9
9
|
* extensions with no matching Figma notification variant.
|
|
10
10
|
*
|
|
11
|
-
* Pass children to decorate them — the badge anchors to their corner. Pass none and
|
|
12
|
-
* a flow element (Figma `Size=Dot`, node 44267-214524), for a
|
|
13
|
-
* `className` then applies to the badge's own root so the
|
|
11
|
+
* Pass children to decorate them — the badge anchors to their corner. Pass none and the badge,
|
|
12
|
+
* count or dot, becomes a flow element (for the dot, Figma `Size=Dot`, node 44267-214524), for a
|
|
13
|
+
* table cell or a marker in a row, and `className` then applies to the badge's own root so the
|
|
14
|
+
* caller can place it.
|
|
14
15
|
*
|
|
15
16
|
* `purpose` selects Figma's `Parent`: the default notification dot, or the 8px solid primary dot
|
|
16
17
|
* that marks something unread or a filter as active.
|
|
@@ -26,7 +27,7 @@ interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
|
|
|
26
27
|
showZero?: boolean;
|
|
27
28
|
/**
|
|
28
29
|
* @figmaProp Size = dot→"Dot" (12px) | standard→"Default" count badge
|
|
29
|
-
*
|
|
30
|
+
* With no children the badge renders in normal flow rather than anchored to a corner.
|
|
30
31
|
*/
|
|
31
32
|
variant?: 'standard' | 'dot';
|
|
32
33
|
/**
|
|
@@ -64,5 +65,5 @@ type StyledBadgeProps = BadgeProps & {
|
|
|
64
65
|
* The established styling API `sx={{ '& .MuiBadge-badge': {...} }}` is preserved by extracting that
|
|
65
66
|
* slot and applying `resolveSx` to the badge span (DEC-007 slot-sx). Signature unchanged (DEC-003).
|
|
66
67
|
*/
|
|
67
|
-
export declare const StyledBadge: ({ color, dataTest, size, badgeContent, max: _max, showZero: _showZero, variant, purpose, statusMessage, invisible, anchorOrigin, children, className, sx, overlap: _overlap, classes: _classes, slots: _slots, slotProps, component: _component, tabIndex: _tabIndex, ...props }: StyledBadgeProps) => JSX.Element;
|
|
68
|
+
export declare const StyledBadge: ({ color, dataTest, size, badgeContent, max: _max, showZero: _showZero, variant, purpose, statusMessage, invisible, anchorOrigin, children, className, sx, overlap: _overlap, classes: _classes, slots: _slots, slotProps, component: _component, tabIndex: _tabIndex, "aria-label": ariaLabel, ...props }: StyledBadgeProps) => JSX.Element;
|
|
68
69
|
export {};
|