@sito/dashboard 0.0.76 → 0.0.78
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/Dropdown-B5wIF6xJ.cjs +1 -0
- package/dist/Dropdown-dwdbhj_o.js +63 -0
- package/dist/Dropdown.cjs +1 -1
- package/dist/Dropdown.js +1 -1
- package/dist/Form.cjs +1 -1
- package/dist/Form.js +1 -1
- package/dist/SelectInput-BTM8ehhB.js +573 -0
- package/dist/SelectInput-CZrWA19u.cjs +1 -0
- package/dist/{Table-BofsZtu9.cjs → Table-C3ZJ-42T.cjs} +1 -1
- package/dist/{Table-Mx5SOKp_.js → Table-DHQjfPrt.js} +2 -2
- package/dist/Table.cjs +1 -1
- package/dist/Table.js +1 -1
- package/dist/components/Dropdown/constants.d.ts +2 -0
- package/dist/components/Dropdown/types.d.ts +6 -3
- package/dist/components/Dropdown/utils.d.ts +8 -0
- package/dist/index.cjs +1 -1
- package/dist/index.css +1 -1
- package/dist/index.js +3 -3
- package/package.json +1 -1
- package/dist/Dropdown-CR8mco5s.cjs +0 -1
- package/dist/Dropdown-D-fYEGo2.js +0 -62
- package/dist/SelectInput-BKFTGaAm.js +0 -569
- package/dist/SelectInput-C4wtTiHe.cjs +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var D=require("./Dropdown.css");const v=require("react/jsx-runtime"),u=require("react"),R=require("react-dom"),d=8,g=4;function h(s,f){const e=f.getBoundingClientRect(),c=window.innerWidth,n=window.innerHeight;let o=s.bottom+g,r=s.left;return r+e.width>c-d&&(r=s.right-e.width),r<d&&(r=d),o+e.height>n-d&&(o=s.top-e.height-g),o<d&&(o=d),{top:o,left:r}}const y=s=>{const{children:f,open:e,onClose:c,anchorEl:n,className:o,...r}=s,l=u.useRef(null);u.useLayoutEffect(()=>{const t=l.current;if(!e||!n||!t)return;const i=n.getBoundingClientRect(),{top:w,left:m}=h(i,t);t.style.top=`${w}px`,t.style.left=`${m}px`},[e,n]),u.useEffect(()=>{if(!e||!n)return;const t=l.current;if(!t)return;const i=()=>{const w=n.getBoundingClientRect(),{top:m,left:E}=h(w,t);t.style.top=`${m}px`,t.style.left=`${E}px`};return window.addEventListener("resize",i),()=>window.removeEventListener("resize",i)},[e,n]);const a=u.useCallback(t=>{const i=l.current;!e||!i||n?.contains(t.target)||i.contains(t.target)||c()},[e,c,n]),p=u.useCallback(t=>{e&&t.key==="Escape"&&c()},[e,c]);return u.useEffect(()=>{if(e)return setTimeout(()=>l.current?.focus(),0),document.addEventListener("mousedown",a),document.addEventListener("keydown",p),()=>{document.removeEventListener("mousedown",a),document.removeEventListener("keydown",p)}},[e,a,p]),e?R.createPortal(v.jsx("div",{ref:l,role:"menu",tabIndex:-1,className:`dropdown-main opened ${o??""}`,onClick:t=>t.stopPropagation(),...r,children:f}),document.body):null};exports.Dropdown=y;
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import "./Dropdown.css";
|
|
2
|
+
import { jsx as R } from "react/jsx-runtime";
|
|
3
|
+
import { useRef as y, useLayoutEffect as D, useEffect as w, useCallback as g } from "react";
|
|
4
|
+
import { createPortal as x } from "react-dom";
|
|
5
|
+
const u = 8, h = 4;
|
|
6
|
+
function v(s, l) {
|
|
7
|
+
const e = l.getBoundingClientRect(), c = window.innerWidth, n = window.innerHeight;
|
|
8
|
+
let o = s.bottom + h, r = s.left;
|
|
9
|
+
return r + e.width > c - u && (r = s.right - e.width), r < u && (r = u), o + e.height > n - u && (o = s.top - e.height - h), o < u && (o = u), { top: o, left: r };
|
|
10
|
+
}
|
|
11
|
+
const N = (s) => {
|
|
12
|
+
const { children: l, open: e, onClose: c, anchorEl: n, className: o, ...r } = s, d = y(null);
|
|
13
|
+
D(() => {
|
|
14
|
+
const t = d.current;
|
|
15
|
+
if (!e || !n || !t) return;
|
|
16
|
+
const i = n.getBoundingClientRect(), { top: a, left: m } = v(i, t);
|
|
17
|
+
t.style.top = `${a}px`, t.style.left = `${m}px`;
|
|
18
|
+
}, [e, n]), w(() => {
|
|
19
|
+
if (!e || !n) return;
|
|
20
|
+
const t = d.current;
|
|
21
|
+
if (!t) return;
|
|
22
|
+
const i = () => {
|
|
23
|
+
const a = n.getBoundingClientRect(), { top: m, left: E } = v(a, t);
|
|
24
|
+
t.style.top = `${m}px`, t.style.left = `${E}px`;
|
|
25
|
+
};
|
|
26
|
+
return window.addEventListener("resize", i), () => window.removeEventListener("resize", i);
|
|
27
|
+
}, [e, n]);
|
|
28
|
+
const f = g(
|
|
29
|
+
(t) => {
|
|
30
|
+
const i = d.current;
|
|
31
|
+
!e || !i || n?.contains(t.target) || i.contains(t.target) || c();
|
|
32
|
+
},
|
|
33
|
+
[e, c, n]
|
|
34
|
+
), p = g(
|
|
35
|
+
(t) => {
|
|
36
|
+
e && t.key === "Escape" && c();
|
|
37
|
+
},
|
|
38
|
+
[e, c]
|
|
39
|
+
);
|
|
40
|
+
return w(() => {
|
|
41
|
+
if (e)
|
|
42
|
+
return setTimeout(() => d.current?.focus(), 0), document.addEventListener("mousedown", f), document.addEventListener("keydown", p), () => {
|
|
43
|
+
document.removeEventListener("mousedown", f), document.removeEventListener("keydown", p);
|
|
44
|
+
};
|
|
45
|
+
}, [e, f, p]), e ? x(
|
|
46
|
+
/* @__PURE__ */ R(
|
|
47
|
+
"div",
|
|
48
|
+
{
|
|
49
|
+
ref: d,
|
|
50
|
+
role: "menu",
|
|
51
|
+
tabIndex: -1,
|
|
52
|
+
className: `dropdown-main opened ${o ?? ""}`,
|
|
53
|
+
onClick: (t) => t.stopPropagation(),
|
|
54
|
+
...r,
|
|
55
|
+
children: l
|
|
56
|
+
}
|
|
57
|
+
),
|
|
58
|
+
document.body
|
|
59
|
+
) : null;
|
|
60
|
+
};
|
|
61
|
+
export {
|
|
62
|
+
N as D
|
|
63
|
+
};
|
package/dist/Dropdown.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./Dropdown-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./Dropdown-B5wIF6xJ.cjs");exports.Dropdown=o.Dropdown;
|
package/dist/Dropdown.js
CHANGED
package/dist/Form.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SelectInput-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SelectInput-CZrWA19u.cjs"),t=require("./FileInput-Cz2R3z3k.cjs");exports.AutocompleteInput=e.AutocompleteInput;exports.CheckInput=e.CheckInput;exports.SelectInput=e.SelectInput;exports.State=e.State;exports.TextInput=e.TextInput;exports.helperTextStateClassName=e.helperTextStateClassName;exports.inputStateClassName=e.inputStateClassName;exports.labelStateClassName=e.labelStateClassName;exports.FileInput=t.FileInput;
|
package/dist/Form.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { A as e, C as s, S as l, a as p, T as u, h as m, i as n, l as o } from "./SelectInput-
|
|
1
|
+
import { A as e, C as s, S as l, a as p, T as u, h as m, i as n, l as o } from "./SelectInput-BTM8ehhB.js";
|
|
2
2
|
import { F as r } from "./FileInput-C7ZYKt_i.js";
|
|
3
3
|
export {
|
|
4
4
|
e as AutocompleteInput,
|
|
@@ -0,0 +1,573 @@
|
|
|
1
|
+
import "./SelectInput.css";
|
|
2
|
+
import { jsxs as D, jsx as a, Fragment as ae } from "react/jsx-runtime";
|
|
3
|
+
import { c as d } from "./classNames-DDRjbGA1.js";
|
|
4
|
+
import { forwardRef as $, useState as O, useEffect as V, useMemo as J, useRef as j, useCallback as S, useLayoutEffect as le } from "react";
|
|
5
|
+
import { C as G } from "./Chip-6bEZ7uwv.js";
|
|
6
|
+
import { I as se } from "./IconButton-CqPk_OXG.js";
|
|
7
|
+
import { C as ie } from "./Close-rKC9AcNX.js";
|
|
8
|
+
const fe = $(function(l, C) {
|
|
9
|
+
const {
|
|
10
|
+
state: y,
|
|
11
|
+
value: t,
|
|
12
|
+
onChange: r,
|
|
13
|
+
options: w = [],
|
|
14
|
+
name: I = "",
|
|
15
|
+
id: b = "",
|
|
16
|
+
label: v = "",
|
|
17
|
+
containerClassName: E = "",
|
|
18
|
+
inputContainerClassName: x = "",
|
|
19
|
+
helperText: q = "",
|
|
20
|
+
placeholder: R = "",
|
|
21
|
+
multiple: m = !1,
|
|
22
|
+
required: L = !1,
|
|
23
|
+
"aria-required": o = !1,
|
|
24
|
+
...F
|
|
25
|
+
} = l, K = o === !0 || String(o).toLowerCase() === "true", B = !!(L || K), H = m && Array.isArray(t) && t.length > 0, P = B && !H, [k, h] = O("");
|
|
26
|
+
V(() => {
|
|
27
|
+
if (!m && t && !Array.isArray(t)) {
|
|
28
|
+
h(String(t.value ?? t.name ?? ""));
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
h("");
|
|
32
|
+
}, [m, t]);
|
|
33
|
+
const [u, f] = O(!1), [g, i] = O(-1), p = J(
|
|
34
|
+
() => w.filter((e) => {
|
|
35
|
+
const s = String(e.value ?? e.name).toLowerCase().includes(k?.toLowerCase());
|
|
36
|
+
return Array.isArray(t) && t.length ? s && !t.some((N) => N.id === e.id) : t && !Array.isArray(t) ? s && t.id !== e.id : s;
|
|
37
|
+
}),
|
|
38
|
+
[w, t, k]
|
|
39
|
+
);
|
|
40
|
+
V(() => {
|
|
41
|
+
if (!u || !p.length) {
|
|
42
|
+
i(-1);
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
i(0);
|
|
46
|
+
}, [u, p]);
|
|
47
|
+
const T = j(null), W = j(null), [U, z] = O(!1), n = j(null);
|
|
48
|
+
V(() => {
|
|
49
|
+
const e = (N) => {
|
|
50
|
+
T.current && !T.current.contains(N.target) && f(!1);
|
|
51
|
+
}, s = (N) => {
|
|
52
|
+
N.key === "Escape" && f(!1);
|
|
53
|
+
};
|
|
54
|
+
return document.addEventListener("mousedown", e), document.addEventListener("keydown", s), () => {
|
|
55
|
+
document.removeEventListener("mousedown", e), document.removeEventListener("keydown", s);
|
|
56
|
+
};
|
|
57
|
+
}, []);
|
|
58
|
+
const c = S((e) => {
|
|
59
|
+
h(e.target.value);
|
|
60
|
+
}, []), A = S(
|
|
61
|
+
(e) => {
|
|
62
|
+
e ? m ? (h(""), Array.isArray(t) && t.length ? r([...t, e]) : r([e])) : (h(String(e.name ?? e.value ?? "")), r(e)) : r(null), f(!1);
|
|
63
|
+
},
|
|
64
|
+
[m, r, t]
|
|
65
|
+
), Y = S(
|
|
66
|
+
(e) => {
|
|
67
|
+
if (!p.length) {
|
|
68
|
+
e.key === "Escape" && f(!1);
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
|
|
72
|
+
if (e.preventDefault(), !u) {
|
|
73
|
+
f(!0), i(0);
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
76
|
+
i((s) => {
|
|
77
|
+
const N = s >= 0 ? s : 0;
|
|
78
|
+
return e.key === "ArrowDown" ? (N + 1 + p.length) % p.length : (N - 1 + p.length) % p.length;
|
|
79
|
+
});
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
if (e.key === "Enter" && u) {
|
|
83
|
+
e.preventDefault();
|
|
84
|
+
const s = g >= 0 ? g : 0;
|
|
85
|
+
A(p[s]);
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
88
|
+
e.key === "Escape" && u && (e.preventDefault(), f(!1));
|
|
89
|
+
},
|
|
90
|
+
[
|
|
91
|
+
A,
|
|
92
|
+
g,
|
|
93
|
+
u,
|
|
94
|
+
p
|
|
95
|
+
]
|
|
96
|
+
), M = S(
|
|
97
|
+
(e) => {
|
|
98
|
+
if (!Array.isArray(t)) {
|
|
99
|
+
r(null);
|
|
100
|
+
return;
|
|
101
|
+
}
|
|
102
|
+
const s = t.filter((N, re) => re !== e);
|
|
103
|
+
s.length ? r(s) : r(null);
|
|
104
|
+
},
|
|
105
|
+
[r, t]
|
|
106
|
+
), ne = S(() => {
|
|
107
|
+
Array.isArray(t) && r([t[0]]);
|
|
108
|
+
}, [r, t]);
|
|
109
|
+
return le(() => {
|
|
110
|
+
const e = n.current?.offsetWidth ?? 0, s = T.current?.offsetWidth ?? 0;
|
|
111
|
+
z(e > s * 0.4);
|
|
112
|
+
}, [t]), /* @__PURE__ */ D(
|
|
113
|
+
"div",
|
|
114
|
+
{
|
|
115
|
+
className: d("autocomplete-input-container", E),
|
|
116
|
+
ref: T,
|
|
117
|
+
children: [
|
|
118
|
+
/* @__PURE__ */ D("div", { className: "autocomplete-value-input-container", children: [
|
|
119
|
+
/* @__PURE__ */ a(
|
|
120
|
+
te,
|
|
121
|
+
{
|
|
122
|
+
state: y,
|
|
123
|
+
name: I,
|
|
124
|
+
id: b,
|
|
125
|
+
value: k,
|
|
126
|
+
onChange: c,
|
|
127
|
+
placeholder: R,
|
|
128
|
+
helperText: q,
|
|
129
|
+
onFocus: () => f(!0),
|
|
130
|
+
onKeyDown: Y,
|
|
131
|
+
label: v,
|
|
132
|
+
containerClassName: d(
|
|
133
|
+
"autocomplete-text-input",
|
|
134
|
+
x
|
|
135
|
+
),
|
|
136
|
+
required: P,
|
|
137
|
+
"aria-required": B,
|
|
138
|
+
ref: C ?? W,
|
|
139
|
+
...F,
|
|
140
|
+
children: !m && t && !Array.isArray(t) && (t.value || t.name) && /* @__PURE__ */ a(
|
|
141
|
+
se,
|
|
142
|
+
{
|
|
143
|
+
icon: /* @__PURE__ */ a(ie, {}),
|
|
144
|
+
className: "autocomplete-delete-button",
|
|
145
|
+
onClick: (e) => {
|
|
146
|
+
A(), e.stopPropagation();
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
)
|
|
150
|
+
}
|
|
151
|
+
),
|
|
152
|
+
m && Array.isArray(t) && t.length ? /* @__PURE__ */ a("ul", { ref: n, className: "autocomplete-value-container", children: U ? /* @__PURE__ */ D(ae, { children: [
|
|
153
|
+
/* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
|
|
154
|
+
G,
|
|
155
|
+
{
|
|
156
|
+
text: t[0]?.value ?? t[0]?.name,
|
|
157
|
+
onDelete: (e) => {
|
|
158
|
+
M(0), e.stopPropagation();
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
) }),
|
|
162
|
+
t.length > 1 && /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
|
|
163
|
+
G,
|
|
164
|
+
{
|
|
165
|
+
text: `+${t.length - 1}`,
|
|
166
|
+
onDelete: (e) => {
|
|
167
|
+
ne(), e.stopPropagation();
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
) })
|
|
171
|
+
] }) : t.map((e, s) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
|
|
172
|
+
G,
|
|
173
|
+
{
|
|
174
|
+
text: String(e.value ?? e.name),
|
|
175
|
+
onDelete: (N) => {
|
|
176
|
+
M(s), N.stopPropagation();
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
) }, e.id ?? e.value ?? e.name)) }) : null
|
|
180
|
+
] }),
|
|
181
|
+
u && /* @__PURE__ */ a(
|
|
182
|
+
"ul",
|
|
183
|
+
{
|
|
184
|
+
className: "autocomplete-suggestions-container",
|
|
185
|
+
style: { width: T.current?.offsetWidth },
|
|
186
|
+
children: p.map((e) => /* @__PURE__ */ a(
|
|
187
|
+
"li",
|
|
188
|
+
{
|
|
189
|
+
className: d(
|
|
190
|
+
"autocomplete-suggestion-item",
|
|
191
|
+
e.id === p[g]?.id ? "highlighted" : ""
|
|
192
|
+
),
|
|
193
|
+
onMouseEnter: () => i(
|
|
194
|
+
p.findIndex((s) => s.id === e.id)
|
|
195
|
+
),
|
|
196
|
+
onClick: (s) => {
|
|
197
|
+
A(e), s.stopPropagation();
|
|
198
|
+
},
|
|
199
|
+
children: e.value ?? e.name
|
|
200
|
+
},
|
|
201
|
+
e.id ?? e.value ?? e.name
|
|
202
|
+
))
|
|
203
|
+
}
|
|
204
|
+
)
|
|
205
|
+
]
|
|
206
|
+
}
|
|
207
|
+
);
|
|
208
|
+
});
|
|
209
|
+
var _ = /* @__PURE__ */ ((l) => (l.error = "error", l.good = "good", l.default = "default", l))(_ || {});
|
|
210
|
+
const Q = (l) => {
|
|
211
|
+
switch (l) {
|
|
212
|
+
case "error":
|
|
213
|
+
return "input-error";
|
|
214
|
+
case "good":
|
|
215
|
+
return "input-good";
|
|
216
|
+
default:
|
|
217
|
+
return "input-normal";
|
|
218
|
+
}
|
|
219
|
+
}, X = (l) => {
|
|
220
|
+
switch (l) {
|
|
221
|
+
case "error":
|
|
222
|
+
return "input-label-error";
|
|
223
|
+
case "good":
|
|
224
|
+
return "input-label-good";
|
|
225
|
+
default:
|
|
226
|
+
return "input-label-normal";
|
|
227
|
+
}
|
|
228
|
+
}, ee = (l) => {
|
|
229
|
+
switch (l) {
|
|
230
|
+
case "error":
|
|
231
|
+
return "input-helper-text-error";
|
|
232
|
+
case "good":
|
|
233
|
+
return "input-helper-text-good";
|
|
234
|
+
default:
|
|
235
|
+
return "input-helper-text-normal";
|
|
236
|
+
}
|
|
237
|
+
}, ge = $(function(l, C) {
|
|
238
|
+
const {
|
|
239
|
+
checked: y,
|
|
240
|
+
onChange: t,
|
|
241
|
+
name: r = "",
|
|
242
|
+
id: w = "",
|
|
243
|
+
label: I = "",
|
|
244
|
+
state: b = _.default,
|
|
245
|
+
containerClassName: v = "",
|
|
246
|
+
inputClassName: E = "",
|
|
247
|
+
labelClassName: x = "",
|
|
248
|
+
...q
|
|
249
|
+
} = l;
|
|
250
|
+
return /* @__PURE__ */ D("label", { className: d("input-check-container", v), children: [
|
|
251
|
+
/* @__PURE__ */ a(
|
|
252
|
+
"input",
|
|
253
|
+
{
|
|
254
|
+
id: w,
|
|
255
|
+
ref: C,
|
|
256
|
+
name: r,
|
|
257
|
+
type: "checkbox",
|
|
258
|
+
checked: y,
|
|
259
|
+
onChange: t,
|
|
260
|
+
className: d(
|
|
261
|
+
"input-check",
|
|
262
|
+
Q(b),
|
|
263
|
+
E
|
|
264
|
+
),
|
|
265
|
+
...q
|
|
266
|
+
}
|
|
267
|
+
),
|
|
268
|
+
/* @__PURE__ */ a(
|
|
269
|
+
"span",
|
|
270
|
+
{
|
|
271
|
+
className: d(
|
|
272
|
+
"input-check-label",
|
|
273
|
+
X(b),
|
|
274
|
+
x
|
|
275
|
+
),
|
|
276
|
+
children: I
|
|
277
|
+
}
|
|
278
|
+
)
|
|
279
|
+
] });
|
|
280
|
+
}), Z = (l) => l == null ? !1 : Array.isArray(l) ? l.length > 0 : `${l}`.length > 0, te = $(function(l, C) {
|
|
281
|
+
const {
|
|
282
|
+
children: y,
|
|
283
|
+
state: t = _.default,
|
|
284
|
+
label: r = "",
|
|
285
|
+
containerClassName: w = "",
|
|
286
|
+
inputClassName: I = "",
|
|
287
|
+
labelClassName: b = "",
|
|
288
|
+
helperText: v = "",
|
|
289
|
+
helperTextClassName: E = "",
|
|
290
|
+
value: x,
|
|
291
|
+
defaultValue: q,
|
|
292
|
+
onChange: R,
|
|
293
|
+
onFocus: m,
|
|
294
|
+
onBlur: L,
|
|
295
|
+
...o
|
|
296
|
+
} = l, F = x !== void 0, [K, B] = O(
|
|
297
|
+
() => Z(q)
|
|
298
|
+
), H = F ? Z(x) : K, P = o.type === "date", k = !!o.placeholder || P, h = o["aria-required"] === !0 || String(o["aria-required"]).toLowerCase() === "true", u = !!(o.required || h), f = (g) => {
|
|
299
|
+
F || B(g.currentTarget.value.length > 0), R?.(g);
|
|
300
|
+
};
|
|
301
|
+
return /* @__PURE__ */ D("div", { className: d("text-input-container", w), children: [
|
|
302
|
+
/* @__PURE__ */ D("div", { className: "text-input-field", children: [
|
|
303
|
+
/* @__PURE__ */ a(
|
|
304
|
+
"input",
|
|
305
|
+
{
|
|
306
|
+
ref: C,
|
|
307
|
+
defaultValue: q,
|
|
308
|
+
onChange: f,
|
|
309
|
+
onFocus: m,
|
|
310
|
+
onBlur: L,
|
|
311
|
+
...F ? { value: x } : {},
|
|
312
|
+
className: d(
|
|
313
|
+
"text-input",
|
|
314
|
+
Q(t),
|
|
315
|
+
I,
|
|
316
|
+
H ? "has-value" : "",
|
|
317
|
+
o.placeholder ? "has-placeholder" : "",
|
|
318
|
+
k ? "keep-label-up" : ""
|
|
319
|
+
),
|
|
320
|
+
...o
|
|
321
|
+
}
|
|
322
|
+
),
|
|
323
|
+
!!r && /* @__PURE__ */ D(
|
|
324
|
+
"label",
|
|
325
|
+
{
|
|
326
|
+
htmlFor: o.id,
|
|
327
|
+
className: d(
|
|
328
|
+
"text-input-label",
|
|
329
|
+
X(t),
|
|
330
|
+
b
|
|
331
|
+
),
|
|
332
|
+
children: [
|
|
333
|
+
r,
|
|
334
|
+
u ? " *" : ""
|
|
335
|
+
]
|
|
336
|
+
}
|
|
337
|
+
),
|
|
338
|
+
y
|
|
339
|
+
] }),
|
|
340
|
+
!!v && /* @__PURE__ */ a(
|
|
341
|
+
"p",
|
|
342
|
+
{
|
|
343
|
+
className: d(
|
|
344
|
+
"text-input-helper-text",
|
|
345
|
+
ee(t),
|
|
346
|
+
E
|
|
347
|
+
),
|
|
348
|
+
children: v
|
|
349
|
+
}
|
|
350
|
+
)
|
|
351
|
+
] });
|
|
352
|
+
}), Ce = $(function(l, C) {
|
|
353
|
+
const {
|
|
354
|
+
value: y,
|
|
355
|
+
onChange: t,
|
|
356
|
+
options: r,
|
|
357
|
+
containerClassName: w = "",
|
|
358
|
+
inputClassName: I = "",
|
|
359
|
+
labelClassName: b = "",
|
|
360
|
+
helperText: v = "",
|
|
361
|
+
helperTextClassName: E = "",
|
|
362
|
+
label: x = "",
|
|
363
|
+
placeholder: q = "",
|
|
364
|
+
name: R = "",
|
|
365
|
+
id: m = "",
|
|
366
|
+
state: L = _.default,
|
|
367
|
+
native: o = !0,
|
|
368
|
+
disabled: F,
|
|
369
|
+
required: K,
|
|
370
|
+
autoFocus: B,
|
|
371
|
+
children: H,
|
|
372
|
+
...P
|
|
373
|
+
} = l, k = j(null), [h, u] = O(!1), [f, g] = O(-1), i = J(
|
|
374
|
+
() => r.findIndex(
|
|
375
|
+
(n) => String(n.id) === String(y ?? r[0]?.id ?? "")
|
|
376
|
+
),
|
|
377
|
+
[r, y]
|
|
378
|
+
), p = J(
|
|
379
|
+
() => i >= 0 ? r[i] : void 0,
|
|
380
|
+
[r, i]
|
|
381
|
+
);
|
|
382
|
+
V(() => {
|
|
383
|
+
if (!(o || !h)) {
|
|
384
|
+
if (!r.length) {
|
|
385
|
+
g(-1);
|
|
386
|
+
return;
|
|
387
|
+
}
|
|
388
|
+
g(i >= 0 ? i : 0);
|
|
389
|
+
}
|
|
390
|
+
}, [o, r.length, i, h]), V(() => {
|
|
391
|
+
if (o) return;
|
|
392
|
+
const n = (c) => {
|
|
393
|
+
k.current && !k.current.contains(c.target) && u(!1);
|
|
394
|
+
};
|
|
395
|
+
return document.addEventListener("mousedown", n), () => {
|
|
396
|
+
document.removeEventListener("mousedown", n);
|
|
397
|
+
};
|
|
398
|
+
}, [o]);
|
|
399
|
+
const T = S(
|
|
400
|
+
(n) => {
|
|
401
|
+
C && (typeof C == "function" ? C(n) : C.current = n);
|
|
402
|
+
},
|
|
403
|
+
[C]
|
|
404
|
+
), W = S(
|
|
405
|
+
(n) => {
|
|
406
|
+
if (!t) return;
|
|
407
|
+
const c = {
|
|
408
|
+
target: { value: String(n) },
|
|
409
|
+
currentTarget: { value: String(n) }
|
|
410
|
+
};
|
|
411
|
+
t(c);
|
|
412
|
+
},
|
|
413
|
+
[t]
|
|
414
|
+
), U = S(
|
|
415
|
+
(n) => {
|
|
416
|
+
const c = r[n];
|
|
417
|
+
c && (W(c.id), u(!1));
|
|
418
|
+
},
|
|
419
|
+
[W, r]
|
|
420
|
+
), z = S(
|
|
421
|
+
(n) => {
|
|
422
|
+
if (r.length) {
|
|
423
|
+
if (n.key === "ArrowDown" || n.key === "ArrowUp") {
|
|
424
|
+
if (n.preventDefault(), !h) {
|
|
425
|
+
u(!0);
|
|
426
|
+
const c = i >= 0 ? i : 0;
|
|
427
|
+
g(c);
|
|
428
|
+
return;
|
|
429
|
+
}
|
|
430
|
+
g((c) => {
|
|
431
|
+
const A = c >= 0 ? c : i;
|
|
432
|
+
return n.key === "ArrowDown" ? (A + 1 + r.length) % r.length : (A - 1 + r.length) % r.length;
|
|
433
|
+
});
|
|
434
|
+
return;
|
|
435
|
+
}
|
|
436
|
+
if (n.key === "Enter") {
|
|
437
|
+
if (!h) {
|
|
438
|
+
n.preventDefault(), u(!0), g(i >= 0 ? i : 0);
|
|
439
|
+
return;
|
|
440
|
+
}
|
|
441
|
+
n.preventDefault(), U(f >= 0 ? f : 0);
|
|
442
|
+
return;
|
|
443
|
+
}
|
|
444
|
+
n.key === "Escape" && h && (n.preventDefault(), u(!1));
|
|
445
|
+
}
|
|
446
|
+
},
|
|
447
|
+
[f, r, U, i, h]
|
|
448
|
+
);
|
|
449
|
+
return o ? /* @__PURE__ */ D("div", { className: d("select-input-container", w), children: [
|
|
450
|
+
/* @__PURE__ */ a(
|
|
451
|
+
"select",
|
|
452
|
+
{
|
|
453
|
+
...P,
|
|
454
|
+
id: m,
|
|
455
|
+
ref: T,
|
|
456
|
+
name: R,
|
|
457
|
+
value: y,
|
|
458
|
+
onChange: t,
|
|
459
|
+
className: d(
|
|
460
|
+
"select-input",
|
|
461
|
+
Q(L),
|
|
462
|
+
"peer",
|
|
463
|
+
I
|
|
464
|
+
),
|
|
465
|
+
children: r?.map((n) => /* @__PURE__ */ a("option", { value: n.id, children: n.value ?? n.name ?? n.id }, n.id))
|
|
466
|
+
}
|
|
467
|
+
),
|
|
468
|
+
/* @__PURE__ */ a(
|
|
469
|
+
"label",
|
|
470
|
+
{
|
|
471
|
+
htmlFor: m,
|
|
472
|
+
className: d(
|
|
473
|
+
"select-input-label",
|
|
474
|
+
X(L),
|
|
475
|
+
b
|
|
476
|
+
),
|
|
477
|
+
children: x
|
|
478
|
+
}
|
|
479
|
+
),
|
|
480
|
+
H,
|
|
481
|
+
v && /* @__PURE__ */ a(
|
|
482
|
+
"p",
|
|
483
|
+
{
|
|
484
|
+
className: d(
|
|
485
|
+
"select-input-helper-text",
|
|
486
|
+
ee(L),
|
|
487
|
+
E
|
|
488
|
+
),
|
|
489
|
+
children: v
|
|
490
|
+
}
|
|
491
|
+
)
|
|
492
|
+
] }) : /* @__PURE__ */ D(
|
|
493
|
+
"div",
|
|
494
|
+
{
|
|
495
|
+
ref: k,
|
|
496
|
+
className: d("select-input-container", w),
|
|
497
|
+
children: [
|
|
498
|
+
/* @__PURE__ */ a(
|
|
499
|
+
"select",
|
|
500
|
+
{
|
|
501
|
+
...P,
|
|
502
|
+
ref: T,
|
|
503
|
+
name: R,
|
|
504
|
+
id: m,
|
|
505
|
+
value: y,
|
|
506
|
+
onChange: t,
|
|
507
|
+
className: "select-input-native-hidden",
|
|
508
|
+
tabIndex: -1,
|
|
509
|
+
"aria-hidden": !0,
|
|
510
|
+
children: r?.map((n) => /* @__PURE__ */ a("option", { value: n.id, children: n.value ?? n.name ?? n.id }, n.id))
|
|
511
|
+
}
|
|
512
|
+
),
|
|
513
|
+
/* @__PURE__ */ a(
|
|
514
|
+
te,
|
|
515
|
+
{
|
|
516
|
+
id: m,
|
|
517
|
+
name: R,
|
|
518
|
+
state: L,
|
|
519
|
+
value: String(p?.value ?? p?.name ?? ""),
|
|
520
|
+
readOnly: !0,
|
|
521
|
+
label: x,
|
|
522
|
+
helperText: v,
|
|
523
|
+
containerClassName: "select-input-text-container",
|
|
524
|
+
inputClassName: d("select-input-text", I),
|
|
525
|
+
labelClassName: b,
|
|
526
|
+
helperTextClassName: E,
|
|
527
|
+
placeholder: q,
|
|
528
|
+
disabled: F,
|
|
529
|
+
required: K,
|
|
530
|
+
autoFocus: B,
|
|
531
|
+
onClick: () => u((n) => !n),
|
|
532
|
+
onKeyDown: z,
|
|
533
|
+
onFocus: () => u(!0),
|
|
534
|
+
role: "combobox",
|
|
535
|
+
"aria-expanded": h,
|
|
536
|
+
"aria-haspopup": "listbox",
|
|
537
|
+
children: H
|
|
538
|
+
}
|
|
539
|
+
),
|
|
540
|
+
h && /* @__PURE__ */ a("ul", { className: "select-input-options-container", role: "listbox", children: r.map((n, c) => {
|
|
541
|
+
const A = String(n.id) === String(y);
|
|
542
|
+
return /* @__PURE__ */ a(
|
|
543
|
+
"li",
|
|
544
|
+
{
|
|
545
|
+
role: "option",
|
|
546
|
+
"aria-selected": A,
|
|
547
|
+
className: d(
|
|
548
|
+
"select-input-option-item",
|
|
549
|
+
c === f ? "highlighted" : ""
|
|
550
|
+
),
|
|
551
|
+
onMouseEnter: () => g(c),
|
|
552
|
+
onClick: (M) => {
|
|
553
|
+
U(c), M.stopPropagation();
|
|
554
|
+
},
|
|
555
|
+
children: n.value ?? n.name ?? n.id
|
|
556
|
+
},
|
|
557
|
+
n.id
|
|
558
|
+
);
|
|
559
|
+
}) })
|
|
560
|
+
]
|
|
561
|
+
}
|
|
562
|
+
);
|
|
563
|
+
});
|
|
564
|
+
export {
|
|
565
|
+
fe as A,
|
|
566
|
+
ge as C,
|
|
567
|
+
Ce as S,
|
|
568
|
+
te as T,
|
|
569
|
+
_ as a,
|
|
570
|
+
ee as h,
|
|
571
|
+
Q as i,
|
|
572
|
+
X as l
|
|
573
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var se=require("./SelectInput.css");const n=require("react/jsx-runtime"),h=require("./classNames-DHAzUjfZ.cjs"),r=require("react"),_=require("./Chip-N4r2Xf9l.cjs"),Y=require("./IconButton-DVZCHIHB.cjs"),Z=require("./Close-O9P7wJGf.cjs"),ee=r.forwardRef(function(l,C){const{state:N,value:t,onChange:s,options:v=[],name:A="",id:w="",label:b="",containerClassName:I="",inputContainerClassName:k="",helperText:D="",placeholder:R="",multiple:f=!1,required:E=!1,"aria-required":u=!1,...T}=l,O=u===!0||String(u).toLowerCase()==="true",L=!!(E||O),F=f&&Array.isArray(t)&&t.length>0,B=L&&!F,[j,p]=r.useState("");r.useEffect(()=>{if(!f&&t&&!Array.isArray(t)){p(String(t.value??t.name??""));return}p("")},[f,t]);const[c,g]=r.useState(!1),[x,o]=r.useState(-1),m=r.useMemo(()=>v.filter(e=>{const i=String(e.value??e.name).toLowerCase().includes(j?.toLowerCase());return Array.isArray(t)&&t.length?i&&!t.some(y=>y.id===e.id):t&&!Array.isArray(t)?i&&t.id!==e.id:i}),[v,t,j]);r.useEffect(()=>{if(!c||!m.length){o(-1);return}o(0)},[c,m]);const q=r.useRef(null),H=r.useRef(null),[M,W]=r.useState(!1),a=r.useRef(null);r.useEffect(()=>{const e=y=>{q.current&&!q.current.contains(y.target)&&g(!1)},i=y=>{y.key==="Escape"&&g(!1)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",i),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",i)}},[]);const d=r.useCallback(e=>{p(e.target.value)},[]),S=r.useCallback(e=>{e?f?(p(""),Array.isArray(t)&&t.length?s([...t,e]):s([e])):(p(String(e.name??e.value??"")),s(e)):s(null),g(!1)},[f,s,t]),$=r.useCallback(e=>{if(!m.length){e.key==="Escape"&&g(!1);return}if(e.key==="ArrowDown"||e.key==="ArrowUp"){if(e.preventDefault(),!c){g(!0),o(0);return}o(i=>{const y=i>=0?i:0;return e.key==="ArrowDown"?(y+1+m.length)%m.length:(y-1+m.length)%m.length});return}if(e.key==="Enter"&&c){e.preventDefault();const i=x>=0?x:0;S(m[i]);return}e.key==="Escape"&&c&&(e.preventDefault(),g(!1))},[S,x,c,m]),K=r.useCallback(e=>{if(!Array.isArray(t)){s(null);return}const i=t.filter((y,X)=>X!==e);i.length?s(i):s(null)},[s,t]),Q=r.useCallback(()=>{Array.isArray(t)&&s([t[0]])},[s,t]);return r.useLayoutEffect(()=>{const e=a.current?.offsetWidth??0,i=q.current?.offsetWidth??0;W(e>i*.4)},[t]),n.jsxs("div",{className:h.classNames("autocomplete-input-container",I),ref:q,children:[n.jsxs("div",{className:"autocomplete-value-input-container",children:[n.jsx(G,{state:N,name:A,id:w,value:j,onChange:d,placeholder:R,helperText:D,onFocus:()=>g(!0),onKeyDown:$,label:b,containerClassName:h.classNames("autocomplete-text-input",k),required:B,"aria-required":L,ref:C??H,...T,children:!f&&t&&!Array.isArray(t)&&(t.value||t.name)&&n.jsx(Y.IconButton,{icon:n.jsx(Z.Close,{}),className:"autocomplete-delete-button",onClick:e=>{S(),e.stopPropagation()}})}),f&&Array.isArray(t)&&t.length?n.jsx("ul",{ref:a,className:"autocomplete-value-container",children:M?n.jsxs(n.Fragment,{children:[n.jsx("li",{children:n.jsx(_.Chip,{text:t[0]?.value??t[0]?.name,onDelete:e=>{K(0),e.stopPropagation()}})}),t.length>1&&n.jsx("li",{children:n.jsx(_.Chip,{text:`+${t.length-1}`,onDelete:e=>{Q(),e.stopPropagation()}})})]}):t.map((e,i)=>n.jsx("li",{children:n.jsx(_.Chip,{text:String(e.value??e.name),onDelete:y=>{K(i),y.stopPropagation()}})},e.id??e.value??e.name))}):null]}),c&&n.jsx("ul",{className:"autocomplete-suggestions-container",style:{width:q.current?.offsetWidth},children:m.map(e=>n.jsx("li",{className:h.classNames("autocomplete-suggestion-item",e.id===m[x]?.id?"highlighted":""),onMouseEnter:()=>o(m.findIndex(i=>i.id===e.id)),onClick:i=>{S(e),i.stopPropagation()},children:e.value??e.name},e.id??e.value??e.name))})]})});var P=(l=>(l.error="error",l.good="good",l.default="default",l))(P||{});const U=l=>{switch(l){case"error":return"input-error";case"good":return"input-good";default:return"input-normal"}},V=l=>{switch(l){case"error":return"input-label-error";case"good":return"input-label-good";default:return"input-label-normal"}},z=l=>{switch(l){case"error":return"input-helper-text-error";case"good":return"input-helper-text-good";default:return"input-helper-text-normal"}},te=r.forwardRef(function(l,C){const{checked:N,onChange:t,name:s="",id:v="",label:A="",state:w=P.default,containerClassName:b="",inputClassName:I="",labelClassName:k="",...D}=l;return n.jsxs("label",{className:h.classNames("input-check-container",b),children:[n.jsx("input",{id:v,ref:C,name:s,type:"checkbox",checked:N,onChange:t,className:h.classNames("input-check",U(w),I),...D}),n.jsx("span",{className:h.classNames("input-check-label",V(w),k),children:A})]})}),J=l=>l==null?!1:Array.isArray(l)?l.length>0:`${l}`.length>0,G=r.forwardRef(function(l,C){const{children:N,state:t=P.default,label:s="",containerClassName:v="",inputClassName:A="",labelClassName:w="",helperText:b="",helperTextClassName:I="",value:k,defaultValue:D,onChange:R,onFocus:f,onBlur:E,...u}=l,T=k!==void 0,[O,L]=r.useState(()=>J(D)),F=T?J(k):O,B=u.type==="date",j=!!u.placeholder||B,p=u["aria-required"]===!0||String(u["aria-required"]).toLowerCase()==="true",c=!!(u.required||p),g=x=>{T||L(x.currentTarget.value.length>0),R?.(x)};return n.jsxs("div",{className:h.classNames("text-input-container",v),children:[n.jsxs("div",{className:"text-input-field",children:[n.jsx("input",{ref:C,defaultValue:D,onChange:g,onFocus:f,onBlur:E,...T?{value:k}:{},className:h.classNames("text-input",U(t),A,F?"has-value":"",u.placeholder?"has-placeholder":"",j?"keep-label-up":""),...u}),!!s&&n.jsxs("label",{htmlFor:u.id,className:h.classNames("text-input-label",V(t),w),children:[s,c?" *":""]}),N]}),!!b&&n.jsx("p",{className:h.classNames("text-input-helper-text",z(t),I),children:b})]})}),ae=r.forwardRef(function(l,C){const{value:N,onChange:t,options:s,containerClassName:v="",inputClassName:A="",labelClassName:w="",helperText:b="",helperTextClassName:I="",label:k="",placeholder:D="",name:R="",id:f="",state:E=P.default,native:u=!0,disabled:T,required:O,autoFocus:L,children:F,...B}=l,j=r.useRef(null),[p,c]=r.useState(!1),[g,x]=r.useState(-1),o=r.useMemo(()=>s.findIndex(a=>String(a.id)===String(N??s[0]?.id??"")),[s,N]),m=r.useMemo(()=>o>=0?s[o]:void 0,[s,o]);r.useEffect(()=>{if(!(u||!p)){if(!s.length){x(-1);return}x(o>=0?o:0)}},[u,s.length,o,p]),r.useEffect(()=>{if(u)return;const a=d=>{j.current&&!j.current.contains(d.target)&&c(!1)};return document.addEventListener("mousedown",a),()=>{document.removeEventListener("mousedown",a)}},[u]);const q=r.useCallback(a=>{C&&(typeof C=="function"?C(a):C.current=a)},[C]),H=r.useCallback(a=>{if(!t)return;const d={target:{value:String(a)},currentTarget:{value:String(a)}};t(d)},[t]),M=r.useCallback(a=>{const d=s[a];d&&(H(d.id),c(!1))},[H,s]),W=r.useCallback(a=>{if(s.length){if(a.key==="ArrowDown"||a.key==="ArrowUp"){if(a.preventDefault(),!p){c(!0);const d=o>=0?o:0;x(d);return}x(d=>{const S=d>=0?d:o;return a.key==="ArrowDown"?(S+1+s.length)%s.length:(S-1+s.length)%s.length});return}if(a.key==="Enter"){if(!p){a.preventDefault(),c(!0),x(o>=0?o:0);return}a.preventDefault(),M(g>=0?g:0);return}a.key==="Escape"&&p&&(a.preventDefault(),c(!1))}},[g,s,M,o,p]);return u?n.jsxs("div",{className:h.classNames("select-input-container",v),children:[n.jsx("select",{...B,id:f,ref:q,name:R,value:N,onChange:t,className:h.classNames("select-input",U(E),"peer",A),children:s?.map(a=>n.jsx("option",{value:a.id,children:a.value??a.name??a.id},a.id))}),n.jsx("label",{htmlFor:f,className:h.classNames("select-input-label",V(E),w),children:k}),F,b&&n.jsx("p",{className:h.classNames("select-input-helper-text",z(E),I),children:b})]}):n.jsxs("div",{ref:j,className:h.classNames("select-input-container",v),children:[n.jsx("select",{...B,ref:q,name:R,id:f,value:N,onChange:t,className:"select-input-native-hidden",tabIndex:-1,"aria-hidden":!0,children:s?.map(a=>n.jsx("option",{value:a.id,children:a.value??a.name??a.id},a.id))}),n.jsx(G,{id:f,name:R,state:E,value:String(m?.value??m?.name??""),readOnly:!0,label:k,helperText:b,containerClassName:"select-input-text-container",inputClassName:h.classNames("select-input-text",A),labelClassName:w,helperTextClassName:I,placeholder:D,disabled:T,required:O,autoFocus:L,onClick:()=>c(a=>!a),onKeyDown:W,onFocus:()=>c(!0),role:"combobox","aria-expanded":p,"aria-haspopup":"listbox",children:F}),p&&n.jsx("ul",{className:"select-input-options-container",role:"listbox",children:s.map((a,d)=>{const S=String(a.id)===String(N),$=d===g;return n.jsx("li",{role:"option","aria-selected":S,className:h.classNames("select-input-option-item",$?"highlighted":""),onMouseEnter:()=>x(d),onClick:K=>{M(d),K.stopPropagation()},children:a.value??a.name??a.id},a.id)})})]})});exports.AutocompleteInput=ee;exports.CheckInput=te;exports.SelectInput=ae;exports.State=P;exports.TextInput=G;exports.helperTextStateClassName=z;exports.inputStateClassName=U;exports.labelStateClassName=V;
|