@konstructio/ui 0.1.2-alpha.60 → 0.1.2-alpha.62
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,15 +1,15 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { S as
|
|
3
|
-
import { d as
|
|
4
|
-
import { forwardRef as
|
|
5
|
-
import { Loading as
|
|
1
|
+
import { jsxs as Z, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { S as B } from "../../../../index-BvoZGpli.js";
|
|
3
|
+
import { d as G } from "../../../../debounce-DJveWHr_.js";
|
|
4
|
+
import { forwardRef as J, useRef as C, useState as K, useImperativeHandle as M, useMemo as Q, useEffect as R } from "react";
|
|
5
|
+
import { Loading as W } from "../../../Loading/Loading.js";
|
|
6
6
|
import { cn as o } from "../../../../utils/index.js";
|
|
7
|
-
import { useNavigationUlList as
|
|
7
|
+
import { useNavigationUlList as X } from "../../hooks/useNavigationList.js";
|
|
8
8
|
import { ListItem as b } from "../ListItem/ListItem.js";
|
|
9
|
-
import { listVariants as
|
|
10
|
-
import { DEFAULT_LIST_SIZE as
|
|
11
|
-
import { useSelectContext as
|
|
12
|
-
const
|
|
9
|
+
import { listVariants as Y } from "./List.variants.js";
|
|
10
|
+
import { DEFAULT_LIST_SIZE as $ } from "../../constants/pagination.js";
|
|
11
|
+
import { useSelectContext as ee } from "../../contexts/select.hook.js";
|
|
12
|
+
const me = J(
|
|
13
13
|
({
|
|
14
14
|
additionalOptions: F,
|
|
15
15
|
className: N,
|
|
@@ -19,59 +19,60 @@ const fe = G(
|
|
|
19
19
|
name: I,
|
|
20
20
|
searchable: x = !1,
|
|
21
21
|
listItemSecondRowClassName: c,
|
|
22
|
-
wrapperInputRef:
|
|
22
|
+
wrapperInputRef: O,
|
|
23
23
|
isInfiniteScrollEnabled: u,
|
|
24
24
|
onFetchMoreOptions: f,
|
|
25
25
|
noOptionsText: y
|
|
26
|
-
},
|
|
27
|
-
const n = C(null), m = C(null), [p, L] =
|
|
28
|
-
isOpen: O,
|
|
29
|
-
searchTerm: g,
|
|
30
|
-
canFilter: P,
|
|
26
|
+
}, S) => {
|
|
27
|
+
const n = C(null), m = C(null), [p, L] = K(!1), {
|
|
31
28
|
canContinueFetching: a,
|
|
32
|
-
|
|
33
|
-
|
|
29
|
+
canFilter: j,
|
|
30
|
+
isOpen: P,
|
|
34
31
|
isTyping: k,
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
32
|
+
options: w,
|
|
33
|
+
page: g,
|
|
34
|
+
searchTerm: d,
|
|
35
|
+
setCanContinueFetching: T,
|
|
36
|
+
setOptions: U,
|
|
37
|
+
setPage: _,
|
|
38
|
+
toggleOpen: q
|
|
39
|
+
} = ee();
|
|
40
|
+
M(S, () => n.current, [n]);
|
|
41
|
+
const h = x && j ? w.filter((e) => {
|
|
42
|
+
const t = d.toLowerCase();
|
|
42
43
|
return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(t);
|
|
43
44
|
}) : w;
|
|
44
|
-
|
|
45
|
+
X({
|
|
45
46
|
ulRef: n,
|
|
46
|
-
wrapperInputRef:
|
|
47
|
+
wrapperInputRef: O,
|
|
47
48
|
searchable: x,
|
|
48
49
|
filteredOptions: h
|
|
49
50
|
});
|
|
50
|
-
const
|
|
51
|
+
const z = h.filter(
|
|
51
52
|
(e, t, s) => t === s.findIndex((v) => v.value === e.value)
|
|
52
|
-
),
|
|
53
|
-
() =>
|
|
53
|
+
), A = h.length === 0, D = Q(
|
|
54
|
+
() => G(async (e) => {
|
|
54
55
|
const [t] = e;
|
|
55
56
|
if (t.isIntersecting && !p && f && a)
|
|
56
57
|
try {
|
|
57
58
|
L(!0);
|
|
58
|
-
const s =
|
|
59
|
+
const s = g + 1, { data: v, hasMore: H } = await f({
|
|
59
60
|
page: s,
|
|
60
|
-
pageSize:
|
|
61
|
-
termOfSearch:
|
|
61
|
+
pageSize: $,
|
|
62
|
+
termOfSearch: d
|
|
62
63
|
});
|
|
63
|
-
|
|
64
|
+
_(s), T(H), U((V) => [...V, ...v]);
|
|
64
65
|
} catch {
|
|
65
66
|
console.error("Error fetching more options");
|
|
66
67
|
} finally {
|
|
67
68
|
L(!1);
|
|
68
69
|
}
|
|
69
70
|
}, 100),
|
|
70
|
-
[p, f,
|
|
71
|
+
[p, f, d, g]
|
|
71
72
|
);
|
|
72
|
-
return
|
|
73
|
+
return R(() => {
|
|
73
74
|
if (u && a && m.current && !k) {
|
|
74
|
-
const e = new IntersectionObserver(
|
|
75
|
+
const e = new IntersectionObserver(D, {
|
|
75
76
|
threshold: 0.1
|
|
76
77
|
});
|
|
77
78
|
return e.observe(m.current), () => e.disconnect();
|
|
@@ -81,15 +82,15 @@ const fe = G(
|
|
|
81
82
|
a,
|
|
82
83
|
p,
|
|
83
84
|
k,
|
|
84
|
-
|
|
85
|
-
]), /* @__PURE__ */
|
|
85
|
+
g
|
|
86
|
+
]), /* @__PURE__ */ Z(
|
|
86
87
|
"ul",
|
|
87
88
|
{
|
|
88
89
|
ref: n,
|
|
89
90
|
title: I,
|
|
90
91
|
role: "listbox",
|
|
91
|
-
className: o(
|
|
92
|
-
"data-state":
|
|
92
|
+
className: o(Y({ className: N })),
|
|
93
|
+
"data-state": P ? "open" : "closed",
|
|
93
94
|
children: [
|
|
94
95
|
E ? /* @__PURE__ */ r(
|
|
95
96
|
b,
|
|
@@ -101,7 +102,7 @@ const fe = G(
|
|
|
101
102
|
label: "Loading...",
|
|
102
103
|
listItemSecondRowClassName: c
|
|
103
104
|
}
|
|
104
|
-
) :
|
|
105
|
+
) : A ? /* @__PURE__ */ r(
|
|
105
106
|
b,
|
|
106
107
|
{
|
|
107
108
|
isEmpty: !0,
|
|
@@ -112,7 +113,7 @@ const fe = G(
|
|
|
112
113
|
label: y ?? "No options",
|
|
113
114
|
listItemSecondRowClassName: c
|
|
114
115
|
}
|
|
115
|
-
) :
|
|
116
|
+
) : z.map((e) => /* @__PURE__ */ r(
|
|
116
117
|
b,
|
|
117
118
|
{
|
|
118
119
|
className: o("select-none", i),
|
|
@@ -131,42 +132,51 @@ const fe = G(
|
|
|
131
132
|
"data-action": "true",
|
|
132
133
|
className: "flex items-center justify-center py-3",
|
|
133
134
|
onClick: (e) => e.stopPropagation(),
|
|
134
|
-
children: /* @__PURE__ */ r(
|
|
135
|
+
children: /* @__PURE__ */ r(W, { className: "w-4 h-4 text-aurora-500 select-none" })
|
|
135
136
|
}
|
|
136
137
|
),
|
|
137
|
-
F?.map((e, t) => /* @__PURE__ */ r(
|
|
138
|
-
|
|
138
|
+
F?.map((e, t) => /* @__PURE__ */ r(
|
|
139
|
+
"li",
|
|
139
140
|
{
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
141
|
+
role: "option",
|
|
142
|
+
"data-action": "true",
|
|
143
|
+
onClick: () => q(!1),
|
|
144
|
+
children: /* @__PURE__ */ r(
|
|
145
|
+
B,
|
|
146
|
+
{
|
|
147
|
+
className: o(
|
|
148
|
+
"flex",
|
|
149
|
+
"min-h-10",
|
|
150
|
+
"py-2",
|
|
151
|
+
"px-6",
|
|
152
|
+
"w-full",
|
|
153
|
+
"h-full",
|
|
154
|
+
"gap-1",
|
|
155
|
+
"items-center",
|
|
156
|
+
"text-sm",
|
|
157
|
+
"[&>svg]:-ml-1",
|
|
158
|
+
"[&>svg]:w-3.5",
|
|
159
|
+
"[&>svg]:h-3.5",
|
|
160
|
+
"[&>svg]:shrink-0",
|
|
161
|
+
"cursor-pointer",
|
|
162
|
+
"select-none",
|
|
163
|
+
"hover:bg-gray-50",
|
|
164
|
+
"hover:dark:bg-metal-700",
|
|
165
|
+
"focus:outline-0",
|
|
166
|
+
"text-blue-600",
|
|
167
|
+
"dark:text-aurora-500"
|
|
168
|
+
),
|
|
169
|
+
children: e
|
|
170
|
+
}
|
|
171
|
+
)
|
|
172
|
+
},
|
|
173
|
+
t
|
|
174
|
+
))
|
|
165
175
|
]
|
|
166
176
|
}
|
|
167
177
|
);
|
|
168
178
|
}
|
|
169
179
|
);
|
|
170
180
|
export {
|
|
171
|
-
|
|
181
|
+
me as List
|
|
172
182
|
};
|
package/dist/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@konstructio/ui",
|
|
3
3
|
"description": "A set of reusable and customizable React components built for konstruct.io",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "0.1.2-alpha.
|
|
5
|
+
"version": "0.1.2-alpha.61",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"main": "dist/index.js",
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@konstructio/ui",
|
|
3
3
|
"description": "A set of reusable and customizable React components built for konstruct.io",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "0.1.2-alpha.
|
|
5
|
+
"version": "0.1.2-alpha.62",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"main": "dist/index.js",
|