@box/combobox-with-api 1.42.33 → 1.42.35

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.
Files changed (28) hide show
  1. package/dist/chunks/combobox-with-api-error.js +18 -0
  2. package/dist/chunks/combobox-with-api-pagination.js +168 -0
  3. package/dist/chunks/combobox-with-api-pagination2.js +229 -0
  4. package/dist/chunks/combobox-with-api-tree-view.js +423 -0
  5. package/dist/chunks/dynamic-loading-tree.js +299 -326
  6. package/dist/chunks/treeReducer.js +60 -78
  7. package/dist/esm/index.js +6 -16
  8. package/dist/esm/lib/components/combobox-with-api/combobox-with-api-container.js +47 -52
  9. package/dist/esm/lib/components/combobox-with-api/combobox-with-api-error.js +2 -26
  10. package/dist/esm/lib/components/combobox-with-api/combobox-with-api.js +16 -36
  11. package/dist/esm/lib/components/combobox-with-api/messages.js +6 -10
  12. package/dist/esm/lib/components/combobox-with-api-pagination/combobox-with-api-pagination.js +2 -214
  13. package/dist/esm/lib/components/combobox-with-api-pagination/index.js +3 -205
  14. package/dist/esm/lib/components/combobox-with-api-pagination/messages.js +31 -33
  15. package/dist/esm/lib/components/combobox-with-api-pagination/request.js +4 -6
  16. package/dist/esm/lib/components/combobox-with-api-pagination/use-async-list.js +113 -128
  17. package/dist/esm/lib/components/combobox-with-api-pagination/utils/is-abort-error.js +8 -10
  18. package/dist/esm/lib/components/combobox-with-api-pagination/utils/use-controllable-state.js +32 -34
  19. package/dist/esm/lib/components/combobox-with-api-pagination/utils/use-intersection-observer.js +72 -82
  20. package/dist/esm/lib/components/combobox-with-api-tree-view/combobox-with-api-tree-view.js +133 -174
  21. package/dist/esm/lib/components/combobox-with-api-tree-view/dynamic-loading-tree.js +2 -10
  22. package/dist/esm/lib/components/combobox-with-api-tree-view/index.js +3 -464
  23. package/dist/esm/lib/components/combobox-with-api-tree-view/tree-utils.js +17 -26
  24. package/dist/esm/lib/components/combobox-with-api-tree-view/treeReducer.js +2 -6
  25. package/dist/styles/combobox-with-api-error.css +1 -1
  26. package/dist/styles/combobox-with-api-pagination.css +1 -1
  27. package/dist/styles/dynamic-loading-tree.css +1 -1
  28. package/package.json +7 -7
@@ -1,327 +1,300 @@
1
- import { LoadingIndicator as $ } from "@box/blueprint-web";
2
- import { InlineError as P, Tree as ee } from "@box/tree";
3
- import { forwardRef as te, useReducer as ae, useState as D, useMemo as z, useCallback as m, useEffect as F } from "react";
4
- import { RootTreeNode as p, hasValidLevel as le, getServiceNode as L } from "../esm/lib/components/combobox-with-api-tree-view/tree-utils.js";
5
- import { t as se, i as oe, A as r } from "./treeReducer.js";
6
- import { jsx as f, jsxs as ne } from "react/jsx-runtime";
7
- import '../styles/dynamic-loading-tree.css';const re = "_container_rhp7y_2", de = "_disabled_rhp7y_13", ie = "_label_rhp7y_16", ce = "_hiddenLabel_rhp7y_28", pe = "_comboboxContainer_rhp7y_31", me = "_withComboboxButtons_rhp7y_47", ue = "_textInputWrapper_rhp7y_69", ye = "_textInput_rhp7y_69", he = "_comboboxButtons_rhp7y_94", be = "_withChips_rhp7y_101", _e = "_popover_rhp7y_115", ve = "_loadingIndicator_rhp7y_179", fe = "_noResultOption_rhp7y_182", V = {
8
- container: re,
9
- disabled: de,
10
- label: ie,
11
- hiddenLabel: ce,
12
- comboboxContainer: pe,
13
- withComboboxButtons: me,
14
- textInputWrapper: ue,
15
- textInput: ye,
16
- comboboxButtons: he,
17
- withChips: be,
18
- popover: _e,
19
- loadingIndicator: ve,
20
- noResultOption: fe
21
- }, ge = (n) => {
22
- const i = [...n.children], {
23
- metadata: c
24
- } = n;
25
- return {
26
- ...n,
27
- children: i,
28
- metadata: {
29
- ...n.metadata,
30
- variant: c.variant,
31
- isLoading: n.status === "loading" && !n.children.length,
32
- labelName: c.labelName || "",
33
- labelValue: c.labelValue || ""
34
- }
35
- };
36
- }, Se = (n, i) => {
37
- let c;
38
- return n.children.length && n.status === "loading" && (c = L(i.id, i.metadata.displayValue, "loading")), n.status === "error" && (c = L(i.id, i.metadata.displayValue, "reload")), n.status === "success" && n.marker && (c = L(i.id, i.metadata.displayValue, "loadMore")), c;
39
- }, xe = /* @__PURE__ */ te(({
40
- ariaLabel: n,
41
- onSelect: i,
42
- selectedNodes: c,
43
- defaultFetcher: y,
44
- levels: O,
45
- selectableLevels: g,
46
- multiselect: E,
47
- open: k,
48
- searchInput: u,
49
- noResultMessage: q,
50
- loadingAriaLabel: G
51
- }, H) => {
52
- const [_, s] = ae(se, oe), [h, J] = D({
53
- nodes: [],
54
- selectedIds: []
55
- }), [T, b] = D(!1), [S, I] = D(!1), N = z(() => Math.max(...g), [g]), w = m((e = _) => {
56
- const a = [];
57
- return [...Object.values(e).map((t) => {
58
- const l = ge(t), d = Se(t, l);
59
- return d && (a.push(d), l.children.push(d.id)), l;
60
- }), ...a];
61
- }, [_]), B = m((e) => {
62
- const a = e.ancestors?.find((l) => l.level === e.level - 1), o = O.find((l) => l.level === e.level);
63
- return e.level === 1 || u === "" ? e.displayValue : {
64
- labelName: o.displayName,
65
- labelValue: a.displayName
66
- };
67
- }, [O, u]), v = m((e) => ({
68
- id: e.value,
69
- name: e.displayValue,
70
- parent: p.id,
71
- isBranch: e.level !== N,
72
- children: [],
73
- metadata: {
74
- variant: "content",
75
- displayValue: e.displayValue,
76
- level: e.level,
77
- selectable: e.selectable,
78
- marker: e.marker,
79
- ancestors: e.ancestors
80
- }
81
- }), [N]), x = m((e, a) => {
82
- s({
83
- type: r.RESET,
84
- payload: {
85
- id: p.id,
86
- items: []
87
- }
88
- }), s({
89
- type: r.LOAD_SUCCESS,
90
- payload: {
91
- id: p.id,
92
- items: e,
93
- marker: a
94
- }
95
- }), b(!1);
96
- }, [s, b]), C = m(() => {
97
- s({
98
- type: r.LOAD_ERROR,
99
- payload: {
100
- id: p.id
101
- }
102
- }), b(!1), I(!0);
103
- }, [s, b, I]), j = m((e, a) => {
104
- const o = new Set(e.map((t) => t.id));
105
- return a.filter((t) => t != null && o.has(t));
106
- }, []);
107
- F(() => {
108
- const e = w(_);
109
- J({
110
- nodes: e,
111
- selectedIds: j(e, c)
112
- });
113
- }, [j, w, c, _, S]), F(() => {
114
- if (!k)
115
- return;
116
- const {
117
- signal: e
118
- } = new AbortController();
119
- b(!0), I(!1), u ? (s({
120
- type: r.RESET,
121
- payload: {
122
- id: p.id,
123
- items: []
124
- }
125
- }), y({
126
- signal: e,
127
- marker: null,
128
- searchInput: u,
129
- level: null,
130
- onlySelectableOptions: !1,
131
- ancestorId: null
132
- }).then((a) => {
133
- const o = a.options.filter((t) => t.selectable).map((t) => {
134
- const {
135
- labelName: l,
136
- labelValue: d
137
- } = B(t);
138
- return {
139
- id: t.value,
140
- name: t.displayValue,
141
- parent: p.id,
142
- isBranch: t.level < N,
143
- children: [],
144
- metadata: {
145
- variant: t.level === 1 ? "content" : "labeled",
146
- displayValue: t.displayValue,
147
- level: t.level,
148
- selectable: t.selectable,
149
- ancestors: t.ancestors,
150
- labelName: l,
151
- labelValue: d
152
- }
153
- };
154
- });
155
- x(o, a.marker);
156
- }).catch(() => {
157
- C();
158
- })) : (s({
159
- type: r.RESET,
160
- payload: {
161
- id: p.id,
162
- items: []
163
- }
164
- }), s({
165
- type: r.LOAD_DATA,
166
- payload: {
167
- id: p.id
168
- }
169
- }), y({
170
- signal: e,
171
- marker: null,
172
- searchInput: "",
173
- level: 1,
174
- onlySelectableOptions: !1,
175
- ancestorId: null
176
- }).then((a) => {
177
- const o = a.options.map(v);
178
- x(o, a.marker);
179
- }).catch(() => {
180
- C();
181
- }));
182
- }, [y, v, k, u, O, N, B, x, C]);
183
- const K = m((e) => {
184
- const {
185
- isExpanded: a,
186
- isDisabled: o,
187
- element: t
188
- } = e;
189
- if (!a || o) {
190
- s({
191
- type: r.RESET,
192
- payload: {
193
- id: t.id,
194
- items: []
195
- }
196
- });
197
- return;
198
- }
199
- const {
200
- level: l
201
- } = t.metadata, {
202
- id: d,
203
- marker: R
204
- } = t, {
205
- signal: A
206
- } = new AbortController();
207
- s({
208
- type: r.LOAD_DATA,
209
- payload: {
210
- id: d
211
- }
212
- }), y({
213
- signal: A,
214
- marker: R,
215
- searchInput: "",
216
- level: l + 1,
217
- ancestorId: d,
218
- onlySelectableOptions: !1
219
- }).then((U) => {
220
- const Z = U.options.map((W) => (t.children.push(W.value), v(W)));
221
- s({
222
- type: r.LOAD_SUCCESS,
223
- payload: {
224
- id: d,
225
- items: Z,
226
- marker: U.marker
227
- }
228
- });
229
- }).catch(() => {
230
- s({
231
- type: r.LOAD_ERROR,
232
- payload: {
233
- id: d
234
- }
235
- });
236
- });
237
- }, [y, v]), M = m((e) => {
238
- S && (I(!1), b(!0));
239
- const a = _[e], {
240
- level: o
241
- } = a.metadata, {
242
- id: t,
243
- marker: l
244
- } = a, {
245
- signal: d
246
- } = new AbortController();
247
- s({
248
- type: r.LOAD_DATA,
249
- payload: {
250
- id: t
251
- }
252
- }), y({
253
- signal: d,
254
- marker: l,
255
- searchInput: u,
256
- level: u === "" ? o + 1 : null,
257
- ancestorId: t !== p.id ? t.toString() : null,
258
- onlySelectableOptions: !1
259
- }).then((R) => {
260
- const A = R.options.map(v);
261
- s({
262
- type: r.LOAD_SUCCESS,
263
- payload: {
264
- id: t,
265
- items: A,
266
- marker: R.marker
267
- }
268
- }), b(!1);
269
- }).catch(() => {
270
- s({
271
- type: r.LOAD_ERROR,
272
- payload: {
273
- id: t,
274
- marker: l
275
- }
276
- });
277
- });
278
- }, [y, S, v, u, _]), {
279
- isTreeEmpty: Q,
280
- focusedId: X
281
- } = z(() => {
282
- const a = h.nodes.find(({
283
- id: l
284
- }) => l === p.id)?.children ?? [], o = a[0], t = !E && h.selectedIds.length === 0 && o != null;
285
- return {
286
- isTreeEmpty: h.nodes.length === 0 || a.length === 0,
287
- focusedId: t ? o : void 0
288
- };
289
- }, [E, h.nodes, h.selectedIds.length]), Y = m((e) => {
290
- const {
291
- metadata: a
292
- } = e.element;
293
- le(a) && g.includes(a.level) ? i(e) : (e.isSelected = !1, e.treeState.selectedIds.delete(e.element.id));
294
- }, [g, i]);
295
- return S ? /* @__PURE__ */ f(P, {
296
- onReload: () => {
297
- M("root");
298
- }
299
- }) : /* @__PURE__ */ ne("div", {
300
- children: [T && /* @__PURE__ */ f("div", {
301
- className: V.noResultOption,
302
- children: /* @__PURE__ */ f($, {
303
- "aria-label": G,
304
- className: V.loadingIndicator
305
- })
306
- }), Q && !T ? /* @__PURE__ */ f("div", {
307
- className: V.noResultOption,
308
- children: q
309
- }) : !T && /* @__PURE__ */ f(ee, {
310
- ref: H,
311
- "aria-label": n,
312
- data: h.nodes,
313
- focusedId: X,
314
- multiSelect: E,
315
- onExpand: K,
316
- onLoadData: M,
317
- onNodeSelect: Y,
318
- selectedIds: h.selectedIds,
319
- size: "large",
320
- togglableSelect: !0
321
- })]
322
- });
1
+ import { RootTreeNode as e, getServiceNode as t, hasValidLevel as n } from "../esm/lib/components/combobox-with-api-tree-view/tree-utils.js";
2
+ import { n as r, r as i, t as a } from "./treeReducer.js";
3
+ import { LoadingIndicator as o } from "@box/blueprint-web";
4
+ import { forwardRef as s, useCallback as c, useEffect as l, useMemo as u, useReducer as d, useState as f } from "react";
5
+ import { jsx as p, jsxs as m } from "react/jsx-runtime";
6
+ import { InlineError as h, Tree as g } from "@box/tree";
7
+ import '../styles/dynamic-loading-tree.css';var _ = {
8
+ container: "_container_rhp7y_2",
9
+ disabled: "_disabled_rhp7y_13",
10
+ label: "_label_rhp7y_16",
11
+ hiddenLabel: "_hiddenLabel_rhp7y_28",
12
+ comboboxContainer: "_comboboxContainer_rhp7y_31",
13
+ withComboboxButtons: "_withComboboxButtons_rhp7y_47",
14
+ error: "_error_rhp7y_58",
15
+ textInputWrapper: "_textInputWrapper_rhp7y_69",
16
+ textInput: "_textInput_rhp7y_69",
17
+ errorIcon: "_errorIcon_rhp7y_91",
18
+ comboboxButtons: "_comboboxButtons_rhp7y_94",
19
+ withChips: "_withChips_rhp7y_101",
20
+ inlineError: "_inlineError_rhp7y_111",
21
+ popover: "_popover_rhp7y_115",
22
+ option: "_option_rhp7y_141",
23
+ indicator: "_indicator_rhp7y_164",
24
+ indicatorIcon: "_indicatorIcon_rhp7y_173",
25
+ optionWithIndicator: "_optionWithIndicator_rhp7y_176",
26
+ loadingIndicator: "_loadingIndicator_rhp7y_179",
27
+ noResultOption: "_noResultOption_rhp7y_182"
28
+ }, v = (e) => {
29
+ let t = [...e.children], { metadata: n } = e;
30
+ return {
31
+ ...e,
32
+ children: t,
33
+ metadata: {
34
+ ...e.metadata,
35
+ variant: n.variant,
36
+ isLoading: e.status === "loading" && !e.children.length,
37
+ labelName: n.labelName || "",
38
+ labelValue: n.labelValue || ""
39
+ }
40
+ };
41
+ }, y = (e, n) => {
42
+ let r;
43
+ return e.children.length && e.status === "loading" && (r = t(n.id, n.metadata.displayValue, "loading")), e.status === "error" && (r = t(n.id, n.metadata.displayValue, "reload")), e.status === "success" && e.marker && (r = t(n.id, n.metadata.displayValue, "loadMore")), r;
44
+ }, b = /* @__PURE__ */ s(({ ariaLabel: t, onSelect: s, selectedNodes: b, defaultFetcher: x, levels: S, selectableLevels: C, multiselect: w, open: T, searchInput: E, noResultMessage: D, loadingAriaLabel: O }, k) => {
45
+ let [A, j] = d(r, a), [M, N] = f({
46
+ nodes: [],
47
+ selectedIds: []
48
+ }), [P, F] = f(!1), [I, L] = f(!1), R = u(() => Math.max(...C), [C]), z = c((e = A) => {
49
+ let t = [];
50
+ return [...Object.values(e).map((e) => {
51
+ let n = v(e), r = y(e, n);
52
+ return r && (t.push(r), n.children.push(r.id)), n;
53
+ }), ...t];
54
+ }, [A]), B = c((e) => {
55
+ let t = e.ancestors?.find((t) => t.level === e.level - 1), n = S.find((t) => t.level === e.level);
56
+ return e.level === 1 || E === "" ? e.displayValue : {
57
+ labelName: n.displayName,
58
+ labelValue: t.displayName
59
+ };
60
+ }, [S, E]), V = c((t) => ({
61
+ id: t.value,
62
+ name: t.displayValue,
63
+ parent: e.id,
64
+ isBranch: t.level !== R,
65
+ children: [],
66
+ metadata: {
67
+ variant: "content",
68
+ displayValue: t.displayValue,
69
+ level: t.level,
70
+ selectable: t.selectable,
71
+ marker: t.marker,
72
+ ancestors: t.ancestors
73
+ }
74
+ }), [R]), H = c((t, n) => {
75
+ j({
76
+ type: i.RESET,
77
+ payload: {
78
+ id: e.id,
79
+ items: []
80
+ }
81
+ }), j({
82
+ type: i.LOAD_SUCCESS,
83
+ payload: {
84
+ id: e.id,
85
+ items: t,
86
+ marker: n
87
+ }
88
+ }), F(!1);
89
+ }, [j, F]), U = c(() => {
90
+ j({
91
+ type: i.LOAD_ERROR,
92
+ payload: { id: e.id }
93
+ }), F(!1), L(!0);
94
+ }, [
95
+ j,
96
+ F,
97
+ L
98
+ ]), W = c((e, t) => {
99
+ let n = new Set(e.map((e) => e.id));
100
+ return t.filter((e) => e != null && n.has(e));
101
+ }, []);
102
+ l(() => {
103
+ let e = z(A);
104
+ N({
105
+ nodes: e,
106
+ selectedIds: W(e, b)
107
+ });
108
+ }, [
109
+ W,
110
+ z,
111
+ b,
112
+ A,
113
+ I
114
+ ]), l(() => {
115
+ if (!T) return;
116
+ let { signal: t } = new AbortController();
117
+ F(!0), L(!1), E ? (j({
118
+ type: i.RESET,
119
+ payload: {
120
+ id: e.id,
121
+ items: []
122
+ }
123
+ }), x({
124
+ signal: t,
125
+ marker: null,
126
+ searchInput: E,
127
+ level: null,
128
+ onlySelectableOptions: !1,
129
+ ancestorId: null
130
+ }).then((t) => {
131
+ H(t.options.filter((e) => e.selectable).map((t) => {
132
+ let { labelName: n, labelValue: r } = B(t);
133
+ return {
134
+ id: t.value,
135
+ name: t.displayValue,
136
+ parent: e.id,
137
+ isBranch: t.level < R,
138
+ children: [],
139
+ metadata: {
140
+ variant: t.level === 1 ? "content" : "labeled",
141
+ displayValue: t.displayValue,
142
+ level: t.level,
143
+ selectable: t.selectable,
144
+ ancestors: t.ancestors,
145
+ labelName: n,
146
+ labelValue: r
147
+ }
148
+ };
149
+ }), t.marker);
150
+ }).catch(() => {
151
+ U();
152
+ })) : (j({
153
+ type: i.RESET,
154
+ payload: {
155
+ id: e.id,
156
+ items: []
157
+ }
158
+ }), j({
159
+ type: i.LOAD_DATA,
160
+ payload: { id: e.id }
161
+ }), x({
162
+ signal: t,
163
+ marker: null,
164
+ searchInput: "",
165
+ level: 1,
166
+ onlySelectableOptions: !1,
167
+ ancestorId: null
168
+ }).then((e) => {
169
+ H(e.options.map(V), e.marker);
170
+ }).catch(() => {
171
+ U();
172
+ }));
173
+ }, [
174
+ x,
175
+ V,
176
+ T,
177
+ E,
178
+ S,
179
+ R,
180
+ B,
181
+ H,
182
+ U
183
+ ]);
184
+ let G = c((e) => {
185
+ let { isExpanded: t, isDisabled: n, element: r } = e;
186
+ if (!t || n) {
187
+ j({
188
+ type: i.RESET,
189
+ payload: {
190
+ id: r.id,
191
+ items: []
192
+ }
193
+ });
194
+ return;
195
+ }
196
+ let { level: a } = r.metadata, { id: o, marker: s } = r, { signal: c } = new AbortController();
197
+ j({
198
+ type: i.LOAD_DATA,
199
+ payload: { id: o }
200
+ }), x({
201
+ signal: c,
202
+ marker: s,
203
+ searchInput: "",
204
+ level: a + 1,
205
+ ancestorId: o,
206
+ onlySelectableOptions: !1
207
+ }).then((e) => {
208
+ let t = e.options.map((e) => (r.children.push(e.value), V(e)));
209
+ j({
210
+ type: i.LOAD_SUCCESS,
211
+ payload: {
212
+ id: o,
213
+ items: t,
214
+ marker: e.marker
215
+ }
216
+ });
217
+ }).catch(() => {
218
+ j({
219
+ type: i.LOAD_ERROR,
220
+ payload: { id: o }
221
+ });
222
+ });
223
+ }, [x, V]), K = c((t) => {
224
+ I && (L(!1), F(!0));
225
+ let n = A[t], { level: r } = n.metadata, { id: a, marker: o } = n, { signal: s } = new AbortController();
226
+ j({
227
+ type: i.LOAD_DATA,
228
+ payload: { id: a }
229
+ }), x({
230
+ signal: s,
231
+ marker: o,
232
+ searchInput: E,
233
+ level: E === "" ? r + 1 : null,
234
+ ancestorId: a === e.id ? null : a.toString(),
235
+ onlySelectableOptions: !1
236
+ }).then((e) => {
237
+ let t = e.options.map(V);
238
+ j({
239
+ type: i.LOAD_SUCCESS,
240
+ payload: {
241
+ id: a,
242
+ items: t,
243
+ marker: e.marker
244
+ }
245
+ }), F(!1);
246
+ }).catch(() => {
247
+ j({
248
+ type: i.LOAD_ERROR,
249
+ payload: {
250
+ id: a,
251
+ marker: o
252
+ }
253
+ });
254
+ });
255
+ }, [
256
+ x,
257
+ I,
258
+ V,
259
+ E,
260
+ A
261
+ ]), { isTreeEmpty: q, focusedId: J } = u(() => {
262
+ let t = M.nodes.find(({ id: t }) => t === e.id)?.children ?? [], n = t[0], r = !w && M.selectedIds.length === 0 && n != null;
263
+ return {
264
+ isTreeEmpty: M.nodes.length === 0 || t.length === 0,
265
+ focusedId: r ? n : void 0
266
+ };
267
+ }, [
268
+ w,
269
+ M.nodes,
270
+ M.selectedIds.length
271
+ ]), Y = c((e) => {
272
+ let { metadata: t } = e.element;
273
+ n(t) && C.includes(t.level) ? s(e) : (e.isSelected = !1, e.treeState.selectedIds.delete(e.element.id));
274
+ }, [C, s]);
275
+ return I ? /* @__PURE__ */ p(h, { onReload: () => {
276
+ K("root");
277
+ } }) : /* @__PURE__ */ m("div", { children: [P && /* @__PURE__ */ p("div", {
278
+ className: _.noResultOption,
279
+ children: /* @__PURE__ */ p(o, {
280
+ "aria-label": O,
281
+ className: _.loadingIndicator
282
+ })
283
+ }), q && !P ? /* @__PURE__ */ p("div", {
284
+ className: _.noResultOption,
285
+ children: D
286
+ }) : !P && /* @__PURE__ */ p(g, {
287
+ ref: k,
288
+ "aria-label": t,
289
+ data: M.nodes,
290
+ focusedId: J,
291
+ multiSelect: w,
292
+ onExpand: G,
293
+ onLoadData: K,
294
+ onNodeSelect: Y,
295
+ selectedIds: M.selectedIds,
296
+ size: "large",
297
+ togglableSelect: !0
298
+ })] });
323
299
  });
324
- export {
325
- xe as D,
326
- V as s
327
- };
300
+ export { _ as n, b as t };