asma-ui-core 3.61.2 → 3.61.3
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,182 +1,186 @@
|
|
|
1
1
|
import { cn as f } from "../../../helpers/cn.js";
|
|
2
|
-
import { resolveSx as
|
|
3
|
-
import { ChevronDownIcon as
|
|
4
|
-
import { CloseIcon as
|
|
5
|
-
import { ErrorOutlineIcon as
|
|
6
|
-
import { TOP_LAYER_PROPS as
|
|
7
|
-
import { outlineClass as
|
|
8
|
-
import { useFormControlContext as
|
|
9
|
-
import { StyledFormHelperText as
|
|
10
|
-
import { Children as C, cloneElement as
|
|
11
|
-
import { jsx as
|
|
12
|
-
import { FloatingPortal as
|
|
13
|
-
var
|
|
14
|
-
const
|
|
2
|
+
import { resolveSx as be } from "../../../helpers/sx.js";
|
|
3
|
+
import { ChevronDownIcon as he } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
|
|
4
|
+
import { CloseIcon as we } from "../../icons/close-icon/CloseIcon.js";
|
|
5
|
+
import { ErrorOutlineIcon as Ae } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
|
|
6
|
+
import { TOP_LAYER_PROPS as ve, TOP_LAYER_RESET_STYLE as Re, getOpenModalDialogAncestor as ke, useTopLayerRef as Fe } from "../../../hooks/useTopLayer.hook.js";
|
|
7
|
+
import { outlineClass as De } from "../field-styles.js";
|
|
8
|
+
import { useFormControlContext as Se } from "../../miscellaneous/FormControlContext.js";
|
|
9
|
+
import { StyledFormHelperText as Ce } from "../../miscellaneous/StyledFormHelperText.js";
|
|
10
|
+
import { Children as C, cloneElement as Ee, isValidElement as E, useEffect as N, useMemo as Ne, useRef as M, useState as _ } from "react";
|
|
11
|
+
import { jsx as s, jsxs as h } from "react/jsx-runtime";
|
|
12
|
+
import { FloatingPortal as _e, autoUpdate as qe, flip as Pe, offset as Te, shift as Ve, size as je, useClick as Be, useDismiss as Ie, useFloating as Ue, useInteractions as Ke, useMergeRefs as O, useRole as Le } from "@floating-ui/react";
|
|
13
|
+
var et = ({ dataTest: q, value: P, defaultValue: H, onChange: T, error: Y, errorText: z, allowClear: V, disabled: W, readOnly: c, name: m, placeholder: w, displayEmpty: A, multiple: u, renderValue: j, fullWidth: $, className: G, style: J, sx: Q, variant: X, children: v, MenuProps: Z, onFocus: ee, onBlur: te, labelId: p }) => {
|
|
14
|
+
const i = Se(), B = `${q}-listbox`, g = X === "standard", I = Y ?? i?.error ?? !1, n = W ?? i?.disabled ?? !1, [o, y] = _(!1), [x, R] = _(!1), [re, U] = _(H), k = P !== void 0, r = k ? P : re, l = Array.isArray(r) ? r.length > 0 : r !== void 0 && r !== "" && r !== null, a = M(null), K = M(null), oe = (e) => {
|
|
15
|
+
if (y(e), e) return;
|
|
16
|
+
const t = document.activeElement;
|
|
17
|
+
t && t !== document.body && !a.current?.contains(t) || K.current?.focus();
|
|
18
|
+
}, { refs: d, floatingStyles: ne, context: F } = Ue({
|
|
15
19
|
open: o,
|
|
16
|
-
onOpenChange:
|
|
20
|
+
onOpenChange: oe,
|
|
17
21
|
placement: "bottom-start",
|
|
18
22
|
strategy: "fixed",
|
|
19
|
-
whileElementsMounted:
|
|
23
|
+
whileElementsMounted: qe,
|
|
20
24
|
middleware: [
|
|
21
|
-
|
|
22
|
-
_e({ padding: 8 }),
|
|
25
|
+
Te(4),
|
|
23
26
|
Pe({ padding: 8 }),
|
|
24
|
-
|
|
27
|
+
Ve({ padding: 8 }),
|
|
28
|
+
je({ apply({ rects: e, elements: t }) {
|
|
25
29
|
t.floating.style.minWidth = `${e.reference.width + 20}px`;
|
|
26
30
|
} })
|
|
27
31
|
]
|
|
28
|
-
}), { getReferenceProps:
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
]),
|
|
33
|
-
N(() =>
|
|
32
|
+
}), { getReferenceProps: se, getFloatingProps: le } = Ke([
|
|
33
|
+
Be(F, { enabled: !n && !c }),
|
|
34
|
+
Ie(F),
|
|
35
|
+
Le(F, { role: "listbox" })
|
|
36
|
+
]), ae = O([d.setReference, K]), ie = O([Fe(d.setFloating), a]), ce = Ne(() => o ? ke(d.reference.current) : void 0, [o, d]);
|
|
37
|
+
N(() => i?.setFocused(o || x), [
|
|
34
38
|
o,
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
]), N(() =>
|
|
39
|
+
x,
|
|
40
|
+
i
|
|
41
|
+
]), N(() => i?.setFilled(l || !!w || !!A), [
|
|
38
42
|
l,
|
|
39
43
|
w,
|
|
40
44
|
A,
|
|
41
|
-
|
|
45
|
+
i
|
|
42
46
|
]), N(() => {
|
|
43
47
|
if (!o) return;
|
|
44
48
|
const e = requestAnimationFrame(() => {
|
|
45
|
-
const t =
|
|
49
|
+
const t = a.current?.querySelector('[role="option"][aria-selected="true"]');
|
|
46
50
|
t && (t.scrollIntoView({ block: "nearest" }), t.focus());
|
|
47
51
|
});
|
|
48
52
|
return () => cancelAnimationFrame(e);
|
|
49
53
|
}, [o]);
|
|
50
|
-
const
|
|
51
|
-
const b =
|
|
54
|
+
const ue = (e, t) => {
|
|
55
|
+
const b = u ? Array.isArray(r) && r.includes(e) ? r.filter((S) => S !== e) : [...Array.isArray(r) ? r : [], e] : e;
|
|
52
56
|
k || U(b), T?.({ target: {
|
|
53
57
|
value: b,
|
|
54
58
|
name: m
|
|
55
|
-
} }, t),
|
|
56
|
-
},
|
|
57
|
-
const e =
|
|
59
|
+
} }, t), u || (y(!1), requestAnimationFrame(() => d.domReference.current?.focus()));
|
|
60
|
+
}, L = () => {
|
|
61
|
+
const e = u ? [] : "";
|
|
58
62
|
k || U(e), T?.({ target: {
|
|
59
63
|
value: e,
|
|
60
64
|
name: m
|
|
61
|
-
} }, null),
|
|
62
|
-
},
|
|
65
|
+
} }, null), y(!1), R(!1);
|
|
66
|
+
}, de = C.map(v, (e) => {
|
|
63
67
|
if (!E(e)) return e;
|
|
64
68
|
const t = e.props.value;
|
|
65
|
-
return
|
|
66
|
-
selected:
|
|
67
|
-
onClick: () =>
|
|
69
|
+
return Ee(e, {
|
|
70
|
+
selected: u ? Array.isArray(r) && r.includes(t) : t === r,
|
|
71
|
+
onClick: () => ue(t, e.props.children)
|
|
68
72
|
});
|
|
69
|
-
}),
|
|
73
|
+
}), fe = C.toArray(v).find((e) => E(e) && e.props.value === r), me = j ? j(r) : u && Array.isArray(r) ? C.toArray(v).filter((e) => E(e) && r.includes(e.props.value)).map((e) => {
|
|
70
74
|
const t = e.props.children;
|
|
71
75
|
return typeof t == "string" || typeof t == "number" ? String(t) : "";
|
|
72
|
-
}).join(", ") :
|
|
73
|
-
if ((e.key === "Backspace" || e.key === "Delete") && V && l && !
|
|
74
|
-
e.preventDefault(),
|
|
76
|
+
}).join(", ") : fe?.props.children, pe = (e) => {
|
|
77
|
+
if ((e.key === "Backspace" || e.key === "Delete") && V && l && !n && !c) {
|
|
78
|
+
e.preventDefault(), L();
|
|
75
79
|
return;
|
|
76
80
|
}
|
|
77
|
-
e.key !== "ArrowDown" && e.key !== "ArrowUp" ||
|
|
78
|
-
if (
|
|
79
|
-
const t =
|
|
81
|
+
e.key !== "ArrowDown" && e.key !== "ArrowUp" || n || c || (e.preventDefault(), y(!0), requestAnimationFrame(() => {
|
|
82
|
+
if (a.current?.querySelector('[role="option"][aria-selected="true"]')) return;
|
|
83
|
+
const t = a.current?.querySelectorAll('[role="option"]:not([aria-disabled="true"])');
|
|
80
84
|
t?.length && t[e.key === "ArrowUp" ? t.length - 1 : 0]?.focus();
|
|
81
85
|
}));
|
|
82
|
-
},
|
|
83
|
-
const t =
|
|
86
|
+
}, ge = (e) => {
|
|
87
|
+
const t = a.current ? Array.from(a.current.querySelectorAll('[role="option"]:not([aria-disabled="true"])')) : [];
|
|
84
88
|
if (t.length === 0) return;
|
|
85
89
|
const b = t.findIndex((S) => S === document.activeElement);
|
|
86
90
|
e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), t[(b + (e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length]?.focus()) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), document.activeElement?.click());
|
|
87
|
-
}, D = g && (o ||
|
|
91
|
+
}, D = g && (o || x), ye = n ? "text-delta-300" : D ? "text-gama-500" : "text-delta-800", xe = n ? "text-delta-300" : "text-delta-700";
|
|
88
92
|
return /* @__PURE__ */ h("div", {
|
|
89
|
-
className: f("group relative inline-flex flex-col",
|
|
93
|
+
className: f("group relative inline-flex flex-col", $ && "w-full", G),
|
|
90
94
|
style: {
|
|
91
95
|
fontFamily: "Roboto, Helvetica, Arial, sans-serif",
|
|
92
|
-
...
|
|
93
|
-
|
|
96
|
+
...be(Q),
|
|
97
|
+
...J
|
|
94
98
|
},
|
|
95
99
|
children: [
|
|
96
100
|
/* @__PURE__ */ h("button", {
|
|
97
|
-
ref:
|
|
101
|
+
ref: ae,
|
|
98
102
|
type: "button",
|
|
99
103
|
"data-testid": q,
|
|
100
|
-
...
|
|
104
|
+
...se({ onKeyDown: pe }),
|
|
101
105
|
role: "combobox",
|
|
102
106
|
"aria-haspopup": "listbox",
|
|
103
107
|
"aria-expanded": o,
|
|
104
108
|
"aria-controls": B,
|
|
105
109
|
"aria-labelledby": p,
|
|
106
110
|
"aria-label": p ? void 0 : m,
|
|
107
|
-
"aria-disabled":
|
|
108
|
-
disabled:
|
|
111
|
+
"aria-disabled": n ? !0 : void 0,
|
|
112
|
+
disabled: n,
|
|
109
113
|
onFocus: (e) => {
|
|
110
|
-
R(!0),
|
|
114
|
+
R(!0), ee?.(e);
|
|
111
115
|
},
|
|
112
116
|
onBlur: (e) => {
|
|
113
|
-
R(!1),
|
|
117
|
+
R(!1), te?.(e);
|
|
114
118
|
},
|
|
115
119
|
style: { minWidth: l && !g ? 105 : void 0 },
|
|
116
|
-
className: f("relative flex w-full items-center justify-between text-left outline-none", "h-10 rounded-lg border-0 px-3 text-base transition-colors", D ? "bg-gama-50" : "bg-transparent",
|
|
120
|
+
className: f("relative flex w-full items-center justify-between text-left outline-none", "h-10 rounded-lg border-0 px-3 text-base transition-colors", D ? "bg-gama-50" : "bg-transparent", ye, g && "min-w-0", n && "cursor-not-allowed", c && "pointer-events-none"),
|
|
117
121
|
children: [
|
|
118
|
-
/* @__PURE__ */
|
|
122
|
+
/* @__PURE__ */ s("span", {
|
|
119
123
|
className: f("min-w-0 flex-1 truncate", !l && "text-delta-500"),
|
|
120
|
-
children: l || A ?
|
|
124
|
+
children: l || A ? me : w
|
|
121
125
|
}),
|
|
122
126
|
/* @__PURE__ */ h("span", {
|
|
123
127
|
className: "flex items-center gap-1",
|
|
124
|
-
children: [V && l && !
|
|
128
|
+
children: [V && l && !n && /* @__PURE__ */ s("span", {
|
|
125
129
|
"aria-hidden": "true",
|
|
126
130
|
"data-testid": "select-clear-button",
|
|
127
131
|
className: "flex items-center justify-center rounded-full p-[2px] hover:bg-gama-100",
|
|
128
132
|
onClick: (e) => {
|
|
129
|
-
e.stopPropagation(),
|
|
133
|
+
e.stopPropagation(), L();
|
|
130
134
|
},
|
|
131
|
-
children: /* @__PURE__ */
|
|
135
|
+
children: /* @__PURE__ */ s(we, {
|
|
132
136
|
width: 18,
|
|
133
137
|
height: 18
|
|
134
138
|
})
|
|
135
|
-
}), /* @__PURE__ */
|
|
139
|
+
}), /* @__PURE__ */ s(he, {
|
|
136
140
|
width: 24,
|
|
137
141
|
height: 24,
|
|
138
|
-
className: f("shrink-0 transition-transform", D ? "text-gama-500" :
|
|
142
|
+
className: f("shrink-0 transition-transform", D ? "text-gama-500" : xe, o && "rotate-180")
|
|
139
143
|
})]
|
|
140
144
|
}),
|
|
141
|
-
/* @__PURE__ */
|
|
142
|
-
focused: o ||
|
|
145
|
+
/* @__PURE__ */ s("div", { className: De({
|
|
146
|
+
focused: o || x,
|
|
143
147
|
error: I,
|
|
144
|
-
disabled:
|
|
148
|
+
disabled: n,
|
|
145
149
|
readOnly: c,
|
|
146
150
|
borderless: g
|
|
147
151
|
}) })
|
|
148
152
|
]
|
|
149
153
|
}),
|
|
150
|
-
o && /* @__PURE__ */
|
|
151
|
-
root:
|
|
152
|
-
children: /* @__PURE__ */
|
|
153
|
-
ref:
|
|
154
|
+
o && /* @__PURE__ */ s(_e, {
|
|
155
|
+
root: ce,
|
|
156
|
+
children: /* @__PURE__ */ s("ul", {
|
|
157
|
+
ref: ie,
|
|
154
158
|
id: B,
|
|
155
159
|
role: "listbox",
|
|
156
160
|
"aria-labelledby": p,
|
|
157
161
|
"aria-label": p ? void 0 : m,
|
|
158
|
-
...
|
|
162
|
+
...ve,
|
|
159
163
|
style: {
|
|
160
|
-
...
|
|
161
|
-
...
|
|
164
|
+
...Re,
|
|
165
|
+
...ne,
|
|
162
166
|
fontFamily: "Roboto, Helvetica, Arial, sans-serif"
|
|
163
167
|
},
|
|
164
|
-
...
|
|
165
|
-
onKeyDown:
|
|
166
|
-
className: f("z-[1300] m-0 max-h-72 list-none overflow-auto rounded-lg border border-solid border-delta-300 bg-white px-0 py-1 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]",
|
|
167
|
-
children:
|
|
168
|
+
...le(),
|
|
169
|
+
onKeyDown: ge,
|
|
170
|
+
className: f("z-[1300] m-0 max-h-72 list-none overflow-auto rounded-lg border border-solid border-delta-300 bg-white px-0 py-1 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", Z?.className),
|
|
171
|
+
children: de
|
|
168
172
|
})
|
|
169
173
|
}),
|
|
170
|
-
I && /* @__PURE__ */ h(
|
|
174
|
+
I && /* @__PURE__ */ h(Ce, {
|
|
171
175
|
className: "m-0 flex items-center gap-1 pt-1 text-sm text-error-500",
|
|
172
|
-
children: [/* @__PURE__ */
|
|
176
|
+
children: [/* @__PURE__ */ s(Ae, {
|
|
173
177
|
width: 20,
|
|
174
178
|
height: 20
|
|
175
|
-
}),
|
|
179
|
+
}), z ?? "Required"]
|
|
176
180
|
})
|
|
177
181
|
]
|
|
178
182
|
});
|
|
179
183
|
};
|
|
180
184
|
export {
|
|
181
|
-
|
|
185
|
+
et as StyledSelect
|
|
182
186
|
};
|