@situaction/traq-ui-ste 1.2.2 → 1.2.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.
- package/dist/components/select/Select.js +36 -39
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsxs as w, jsx as
|
|
1
|
+
import { jsxs as w, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { useState as b, useRef as m, useEffect as p } from "react";
|
|
3
3
|
import { Button as W } from "../button/Button.js";
|
|
4
4
|
import { Input as H } from "../input/Input.js";
|
|
@@ -43,31 +43,31 @@ const O = "_selectContainer_133eb_54", Q = "_selected_133eb_57", X = "_children_
|
|
|
43
43
|
const D = (e) => {
|
|
44
44
|
k(e), f(!1), B && B(e);
|
|
45
45
|
}, G = () => {
|
|
46
|
-
const e = c == null ? void 0 : c.icon,
|
|
47
|
-
return x === "icon" && e ? /* @__PURE__ */
|
|
46
|
+
const e = c == null ? void 0 : c.icon, o = (c == null ? void 0 : c.label) || F || "Sélectionner";
|
|
47
|
+
return x === "icon" && e ? /* @__PURE__ */ r(I, { ref: d, mode: "tertiary", size: C, onClick: () => f(!t), children: /* @__PURE__ */ r(_, { icon: c.icon }) }) : x === "text" ? /* @__PURE__ */ r(
|
|
48
48
|
W,
|
|
49
49
|
{
|
|
50
50
|
ref: d,
|
|
51
51
|
mode: "tertiary",
|
|
52
|
-
label:
|
|
53
|
-
childrenRight: /* @__PURE__ */
|
|
52
|
+
label: o,
|
|
53
|
+
childrenRight: /* @__PURE__ */ r(_, { icon: t ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
|
|
54
54
|
size: C,
|
|
55
55
|
fullWidth: S,
|
|
56
56
|
onClick: () => f(!t)
|
|
57
57
|
}
|
|
58
|
-
) : x === "all" ? /* @__PURE__ */
|
|
58
|
+
) : x === "all" ? /* @__PURE__ */ r(
|
|
59
59
|
W,
|
|
60
60
|
{
|
|
61
61
|
ref: d,
|
|
62
62
|
mode: "tertiary",
|
|
63
|
-
label:
|
|
63
|
+
label: o,
|
|
64
64
|
size: C,
|
|
65
65
|
fullWidth: S,
|
|
66
|
-
childrenLeft: e && /* @__PURE__ */
|
|
67
|
-
childrenRight: /* @__PURE__ */
|
|
66
|
+
childrenLeft: e && /* @__PURE__ */ r(_, { icon: c.icon }),
|
|
67
|
+
childrenRight: /* @__PURE__ */ r(_, { icon: t ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
|
|
68
68
|
onClick: () => f(!t)
|
|
69
69
|
}
|
|
70
|
-
) : /* @__PURE__ */
|
|
70
|
+
) : /* @__PURE__ */ r(
|
|
71
71
|
W,
|
|
72
72
|
{
|
|
73
73
|
ref: d,
|
|
@@ -79,23 +79,20 @@ const O = "_selectContainer_133eb_54", Q = "_selected_133eb_57", X = "_children_
|
|
|
79
79
|
}
|
|
80
80
|
);
|
|
81
81
|
}, E = m(null), g = m({}), [R, v] = b(""), h = m(null), K = m({}), j = s.filter(
|
|
82
|
-
(e) =>
|
|
83
|
-
var n;
|
|
84
|
-
return (n = e.label) == null ? void 0 : n.toLowerCase().includes($.toLowerCase());
|
|
85
|
-
}
|
|
82
|
+
(e) => (e.label ?? "").toLowerCase().includes($.toLowerCase())
|
|
86
83
|
), N = (e) => {
|
|
87
84
|
if (!t) return;
|
|
88
|
-
const
|
|
89
|
-
if (!
|
|
90
|
-
const a = R +
|
|
85
|
+
const o = e.key.length === 1 ? e.key.toLowerCase() : "";
|
|
86
|
+
if (!o) return;
|
|
87
|
+
const a = R + o;
|
|
91
88
|
v(a);
|
|
92
|
-
const i = s.find((
|
|
89
|
+
const i = s.find((n) => {
|
|
93
90
|
var l;
|
|
94
|
-
return (l =
|
|
91
|
+
return (l = n.label) == null ? void 0 : l.toLowerCase().startsWith(a);
|
|
95
92
|
});
|
|
96
93
|
if (i) {
|
|
97
|
-
const
|
|
98
|
-
|
|
94
|
+
const n = g.current[i.value];
|
|
95
|
+
n == null || n.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
|
99
96
|
}
|
|
100
97
|
h.current && clearTimeout(h.current), h.current = setTimeout(() => {
|
|
101
98
|
v("");
|
|
@@ -104,20 +101,20 @@ const O = "_selectContainer_133eb_54", Q = "_selected_133eb_57", X = "_children_
|
|
|
104
101
|
p(() => (t ? window.addEventListener("keydown", N) : (window.removeEventListener("keydown", N), v("")), () => {
|
|
105
102
|
window.removeEventListener("keydown", N);
|
|
106
103
|
}), [t, R, s]), p(() => {
|
|
107
|
-
const e = (
|
|
104
|
+
const e = (o) => {
|
|
108
105
|
if (!t) return;
|
|
109
|
-
const a =
|
|
106
|
+
const a = o.key.length === 1 ? o.key.toLowerCase() : "";
|
|
110
107
|
if (!a) return;
|
|
111
108
|
const i = R + a;
|
|
112
109
|
v(i);
|
|
113
|
-
const
|
|
110
|
+
const n = s.find(
|
|
114
111
|
(l) => {
|
|
115
112
|
var T;
|
|
116
113
|
return (T = l.label) == null ? void 0 : T.toLowerCase().startsWith(i);
|
|
117
114
|
}
|
|
118
115
|
);
|
|
119
|
-
if (
|
|
120
|
-
const l = E.current, T = g.current[
|
|
116
|
+
if (n && E.current && n.value in g.current && g.current[n.value]) {
|
|
117
|
+
const l = E.current, T = g.current[n.value];
|
|
121
118
|
l.scrollTo({
|
|
122
119
|
top: T.offsetTop - l.offsetTop,
|
|
123
120
|
behavior: "smooth"
|
|
@@ -130,18 +127,18 @@ const O = "_selectContainer_133eb_54", Q = "_selected_133eb_57", X = "_children_
|
|
|
130
127
|
return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
|
|
131
128
|
}, [t, s, R]), p(() => {
|
|
132
129
|
if (!t) return;
|
|
133
|
-
const e = (
|
|
134
|
-
const a =
|
|
130
|
+
const e = (o) => {
|
|
131
|
+
const a = o.key.toLowerCase();
|
|
135
132
|
if (a.length === 1) {
|
|
136
133
|
const i = s.find(
|
|
137
|
-
(
|
|
134
|
+
(n) => {
|
|
138
135
|
var l;
|
|
139
|
-
return (l =
|
|
136
|
+
return (l = n.label) == null ? void 0 : l.toLowerCase().startsWith(a);
|
|
140
137
|
}
|
|
141
138
|
);
|
|
142
139
|
if (i) {
|
|
143
|
-
const
|
|
144
|
-
|
|
140
|
+
const n = K.current[i.value];
|
|
141
|
+
n && n.scrollIntoView({ block: "start", behavior: "smooth" });
|
|
145
142
|
}
|
|
146
143
|
}
|
|
147
144
|
};
|
|
@@ -158,7 +155,7 @@ const O = "_selectContainer_133eb_54", Q = "_selected_133eb_57", X = "_children_
|
|
|
158
155
|
}
|
|
159
156
|
}, [t]), /* @__PURE__ */ w("div", { className: u.selectContainer, children: [
|
|
160
157
|
G(),
|
|
161
|
-
/* @__PURE__ */
|
|
158
|
+
/* @__PURE__ */ r(
|
|
162
159
|
J,
|
|
163
160
|
{
|
|
164
161
|
ref: A,
|
|
@@ -171,7 +168,7 @@ const O = "_selectContainer_133eb_54", Q = "_selected_133eb_57", X = "_children_
|
|
|
171
168
|
autoCloseCondition: V,
|
|
172
169
|
children: /* @__PURE__ */ w("div", { children: [
|
|
173
170
|
z && /* @__PURE__ */ w("div", { children: [
|
|
174
|
-
/* @__PURE__ */
|
|
171
|
+
/* @__PURE__ */ r(
|
|
175
172
|
H,
|
|
176
173
|
{
|
|
177
174
|
type: "text",
|
|
@@ -182,23 +179,23 @@ const O = "_selectContainer_133eb_54", Q = "_selected_133eb_57", X = "_children_
|
|
|
182
179
|
onChange: (e) => q(e.target.value)
|
|
183
180
|
}
|
|
184
181
|
),
|
|
185
|
-
/* @__PURE__ */
|
|
182
|
+
/* @__PURE__ */ r("div", { className: u.searchWrapper })
|
|
186
183
|
] }),
|
|
187
184
|
/* @__PURE__ */ w("div", { className: u.selectList, ref: E, children: [
|
|
188
185
|
j.map((e) => /* @__PURE__ */ w(
|
|
189
186
|
"div",
|
|
190
187
|
{
|
|
191
|
-
ref: (
|
|
188
|
+
ref: (o) => K.current[e.value] = o,
|
|
192
189
|
className: `${u.children} ${(c == null ? void 0 : c.value) === e.value ? u.active : ""}`,
|
|
193
190
|
onClick: () => D(e),
|
|
194
191
|
children: [
|
|
195
|
-
e.icon && /* @__PURE__ */
|
|
196
|
-
e.label && /* @__PURE__ */
|
|
192
|
+
e.icon && /* @__PURE__ */ r(_, { icon: e.icon, size: 16 }),
|
|
193
|
+
e.label && /* @__PURE__ */ r("div", { className: u.itemLabel, children: e.label })
|
|
197
194
|
]
|
|
198
195
|
},
|
|
199
196
|
e.value
|
|
200
197
|
)),
|
|
201
|
-
j.length === 0 && /* @__PURE__ */
|
|
198
|
+
j.length === 0 && /* @__PURE__ */ r("div", { className: `${u.noResults} textSmall`, children: "Aucun résultat" })
|
|
202
199
|
] })
|
|
203
200
|
] })
|
|
204
201
|
}
|