@situaction/traq-ui-ste 1.1.40 → 1.1.41
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.
- package/dist/components/select/Select.js +63 -63
- package/package.json +1 -1
|
@@ -1,65 +1,65 @@
|
|
|
1
1
|
import { jsxs as $, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { useState as
|
|
2
|
+
import { useState as g, useRef as h, useEffect as w } from "react";
|
|
3
3
|
import { Button as N } from "../button/Button.js";
|
|
4
|
-
import { IconButton as
|
|
5
|
-
import { Icon as
|
|
6
|
-
import { Modal as
|
|
4
|
+
import { IconButton as q } from "../icon-button/IconButton.js";
|
|
5
|
+
import { Icon as _ } from "../icon/Icon.js";
|
|
6
|
+
import { Modal as z } from "../modal/Modal.js";
|
|
7
7
|
import "../theme/ThemeContext.js";
|
|
8
8
|
import '../../styles/Size.css';import '../../styles/Select.css';/* empty css */
|
|
9
|
-
const
|
|
10
|
-
selectContainer:
|
|
11
|
-
selected:
|
|
12
|
-
children:
|
|
13
|
-
active:
|
|
14
|
-
selectList:
|
|
15
|
-
modal:
|
|
9
|
+
const A = "_selectContainer_1o5wx_54", D = "_selected_1o5wx_57", G = "_children_1o5wx_61", H = "_active_1o5wx_78", J = "_selectList_1o5wx_82", O = "_modal_1o5wx_91", Q = "_dropdownFadeIn_1o5wx_1", X = "_itemLabel_1o5wx_98", m = {
|
|
10
|
+
selectContainer: A,
|
|
11
|
+
selected: D,
|
|
12
|
+
children: G,
|
|
13
|
+
active: H,
|
|
14
|
+
selectList: J,
|
|
15
|
+
modal: O,
|
|
16
16
|
dropdownFadeIn: Q,
|
|
17
17
|
itemLabel: X
|
|
18
18
|
}, ce = ({
|
|
19
|
-
selected:
|
|
20
|
-
size:
|
|
19
|
+
selected: b,
|
|
20
|
+
size: p = "m",
|
|
21
21
|
listItem: s,
|
|
22
|
-
modeDisplay:
|
|
22
|
+
modeDisplay: R = "all",
|
|
23
23
|
onSelect: B,
|
|
24
|
-
positionOverride:
|
|
24
|
+
positionOverride: L,
|
|
25
25
|
placeholder: P = "Sélectionner",
|
|
26
26
|
autoCloseCondition: j,
|
|
27
27
|
fullWidth: T = !1
|
|
28
28
|
}) => {
|
|
29
|
-
const [n, u] =
|
|
29
|
+
const [n, u] = g(!1), U = h(null), [V, F] = g({
|
|
30
30
|
top: "calc(100% + 6px)",
|
|
31
31
|
left: "0px"
|
|
32
|
-
}), [c,
|
|
32
|
+
}), [c, C] = g(b ?? null);
|
|
33
33
|
w(() => {
|
|
34
|
-
|
|
35
|
-
}, [
|
|
36
|
-
|
|
37
|
-
}, [
|
|
34
|
+
b ? C(b) : s.length > 0 ? C(s[0]) : C(null);
|
|
35
|
+
}, [b, s]), w(() => {
|
|
36
|
+
L && F(L);
|
|
37
|
+
}, [L]);
|
|
38
38
|
const M = (e) => {
|
|
39
|
-
|
|
40
|
-
},
|
|
39
|
+
C(e), u(!1), B && B(e);
|
|
40
|
+
}, W = () => {
|
|
41
41
|
const e = c == null ? void 0 : c.icon, o = (c == null ? void 0 : c.label) || P || "Sélectionner";
|
|
42
|
-
return
|
|
42
|
+
return R === "icon" && e ? /* @__PURE__ */ r(q, { ref: d, mode: "tertiary", size: p, onClick: () => u(!n), children: /* @__PURE__ */ r(_, { icon: c.icon }) }) : R === "text" ? /* @__PURE__ */ r(
|
|
43
43
|
N,
|
|
44
44
|
{
|
|
45
45
|
ref: d,
|
|
46
46
|
mode: "tertiary",
|
|
47
47
|
label: o,
|
|
48
|
-
childrenRight: /* @__PURE__ */ r(
|
|
49
|
-
size:
|
|
48
|
+
childrenRight: /* @__PURE__ */ r(_, { icon: n ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
|
|
49
|
+
size: p,
|
|
50
50
|
fullWidth: T,
|
|
51
51
|
onClick: () => u(!n)
|
|
52
52
|
}
|
|
53
|
-
) :
|
|
53
|
+
) : R === "all" ? /* @__PURE__ */ r(
|
|
54
54
|
N,
|
|
55
55
|
{
|
|
56
56
|
ref: d,
|
|
57
57
|
mode: "tertiary",
|
|
58
58
|
label: o,
|
|
59
|
-
size:
|
|
59
|
+
size: p,
|
|
60
60
|
fullWidth: T,
|
|
61
|
-
childrenLeft: e && /* @__PURE__ */ r(
|
|
62
|
-
childrenRight: /* @__PURE__ */ r(
|
|
61
|
+
childrenLeft: e && /* @__PURE__ */ r(_, { icon: c.icon }),
|
|
62
|
+
childrenRight: /* @__PURE__ */ r(_, { icon: n ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
|
|
63
63
|
onClick: () => u(!n)
|
|
64
64
|
}
|
|
65
65
|
) : /* @__PURE__ */ r(
|
|
@@ -69,22 +69,22 @@ const z = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_
|
|
|
69
69
|
mode: "tertiary",
|
|
70
70
|
fullWidth: T,
|
|
71
71
|
label: P ?? "Sélectionner",
|
|
72
|
-
size:
|
|
72
|
+
size: p,
|
|
73
73
|
onClick: () => u(!n)
|
|
74
74
|
}
|
|
75
75
|
);
|
|
76
|
-
}, E = h(null),
|
|
76
|
+
}, E = h(null), k = h({}), [y, v] = g(""), f = h(null), K = h({}), S = (e) => {
|
|
77
77
|
if (!n) return;
|
|
78
78
|
const o = e.key.length === 1 ? e.key.toLowerCase() : "";
|
|
79
79
|
if (!o) return;
|
|
80
|
-
const
|
|
81
|
-
v(
|
|
82
|
-
const
|
|
83
|
-
var
|
|
84
|
-
return (
|
|
80
|
+
const a = y + o;
|
|
81
|
+
v(a);
|
|
82
|
+
const i = s.find((t) => {
|
|
83
|
+
var l;
|
|
84
|
+
return (l = t.label) == null ? void 0 : l.toLowerCase().startsWith(a);
|
|
85
85
|
});
|
|
86
|
-
if (
|
|
87
|
-
const t =
|
|
86
|
+
if (i) {
|
|
87
|
+
const t = k.current[i.value];
|
|
88
88
|
t == null || t.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
|
89
89
|
}
|
|
90
90
|
f.current && clearTimeout(f.current), f.current = setTimeout(() => {
|
|
@@ -93,23 +93,23 @@ const z = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_
|
|
|
93
93
|
};
|
|
94
94
|
w(() => (n ? window.addEventListener("keydown", S) : (window.removeEventListener("keydown", S), v("")), () => {
|
|
95
95
|
window.removeEventListener("keydown", S);
|
|
96
|
-
}), [n,
|
|
96
|
+
}), [n, y, s]), w(() => {
|
|
97
97
|
const e = (o) => {
|
|
98
98
|
if (!n) return;
|
|
99
|
-
const
|
|
100
|
-
if (!
|
|
101
|
-
const
|
|
102
|
-
v(
|
|
99
|
+
const a = o.key.length === 1 ? o.key.toLowerCase() : "";
|
|
100
|
+
if (!a) return;
|
|
101
|
+
const i = y + a;
|
|
102
|
+
v(i);
|
|
103
103
|
const t = s.find(
|
|
104
|
-
(
|
|
105
|
-
var
|
|
106
|
-
return (
|
|
104
|
+
(l) => {
|
|
105
|
+
var x;
|
|
106
|
+
return (x = l.label) == null ? void 0 : x.toLowerCase().startsWith(i);
|
|
107
107
|
}
|
|
108
108
|
);
|
|
109
|
-
if (t && E.current && t.value in
|
|
110
|
-
const
|
|
111
|
-
|
|
112
|
-
top:
|
|
109
|
+
if (t && E.current && t.value in k.current && k.current[t.value]) {
|
|
110
|
+
const l = E.current, x = k.current[t.value];
|
|
111
|
+
l.scrollTo({
|
|
112
|
+
top: x.offsetTop - l.offsetTop,
|
|
113
113
|
behavior: "smooth"
|
|
114
114
|
});
|
|
115
115
|
}
|
|
@@ -118,19 +118,19 @@ const z = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_
|
|
|
118
118
|
}, 700);
|
|
119
119
|
};
|
|
120
120
|
return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
|
|
121
|
-
}, [n, s,
|
|
121
|
+
}, [n, s, y]), w(() => {
|
|
122
122
|
if (!n) return;
|
|
123
123
|
const e = (o) => {
|
|
124
|
-
const
|
|
125
|
-
if (
|
|
126
|
-
const
|
|
124
|
+
const a = o.key.toLowerCase();
|
|
125
|
+
if (a.length === 1) {
|
|
126
|
+
const i = s.find(
|
|
127
127
|
(t) => {
|
|
128
|
-
var
|
|
129
|
-
return (
|
|
128
|
+
var l;
|
|
129
|
+
return (l = t.label) == null ? void 0 : l.toLowerCase().startsWith(a);
|
|
130
130
|
}
|
|
131
131
|
);
|
|
132
|
-
if (
|
|
133
|
-
const t = K.current[
|
|
132
|
+
if (i) {
|
|
133
|
+
const t = K.current[i.value];
|
|
134
134
|
t && t.scrollIntoView({ block: "start", behavior: "smooth" });
|
|
135
135
|
}
|
|
136
136
|
}
|
|
@@ -141,15 +141,15 @@ const z = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_
|
|
|
141
141
|
return w(() => {
|
|
142
142
|
if (n && d.current) {
|
|
143
143
|
const e = d.current.getBoundingClientRect().height;
|
|
144
|
-
F({
|
|
144
|
+
F(L || {
|
|
145
145
|
top: `${e + 6}px`,
|
|
146
146
|
left: "0px"
|
|
147
147
|
});
|
|
148
148
|
}
|
|
149
149
|
}, [n]), /* @__PURE__ */ $("div", { className: m.selectContainer, children: [
|
|
150
|
-
|
|
150
|
+
W(),
|
|
151
151
|
/* @__PURE__ */ r(
|
|
152
|
-
|
|
152
|
+
z,
|
|
153
153
|
{
|
|
154
154
|
ref: U,
|
|
155
155
|
anchorRef: d,
|
|
@@ -166,7 +166,7 @@ const z = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_
|
|
|
166
166
|
className: `${m.children} ${(c == null ? void 0 : c.value) === e.value ? m.active : ""}`,
|
|
167
167
|
onClick: () => M(e),
|
|
168
168
|
children: [
|
|
169
|
-
e.icon && /* @__PURE__ */ r(
|
|
169
|
+
e.icon && /* @__PURE__ */ r(_, { icon: e.icon, size: 16 }),
|
|
170
170
|
e.label && /* @__PURE__ */ r("div", { className: m.itemLabel, children: e.label })
|
|
171
171
|
]
|
|
172
172
|
},
|