@box/combobox-with-api 0.36.7 → 0.36.8
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,10 +1,10 @@
|
|
|
1
1
|
import { LoadingIndicator as H } from "@box/blueprint-web";
|
|
2
2
|
import { Tree as J } from "@box/tree";
|
|
3
|
-
import { useReducer as K, useState as L, useMemo as Q, useCallback as
|
|
3
|
+
import { useReducer as K, useState as L, useMemo as Q, useCallback as b, useEffect as T } from "react";
|
|
4
4
|
import { getServiceNode as R, RootTreeNode as i, hasValidLevel as X } from "../esm/lib/components/combobox-with-api-tree-view/tree-utils.js";
|
|
5
5
|
import { t as Y, i as Z, A as o } from "./treeReducer.js";
|
|
6
6
|
import { jsxs as $, jsx as S } from "react/jsx-runtime";
|
|
7
|
-
import '../styles/dynamic-loading-tree.css';const P = "_container_z81ug_1", F = "_disabled_z81ug_12", ee = "_label_z81ug_15", ae = "_hiddenLabel_z81ug_27", te = "_comboboxContainer_z81ug_30", le = "_withComboboxButtons_z81ug_46", ne = "_error_z81ug_54", oe = "_textInputWrapper_z81ug_62", se = "_textInput_z81ug_62", ie = "_errorIcon_z81ug_84", re = "_comboboxButtons_z81ug_87", de = "_withChips_z81ug_94", ce = "_inlineError_z81ug_104", ue = "_popover_z81ug_108", pe = "_option_z81ug_134", me = "_indicator_z81ug_157", _e = "_indicatorIcon_z81ug_166",
|
|
7
|
+
import '../styles/dynamic-loading-tree.css';const P = "_container_z81ug_1", F = "_disabled_z81ug_12", ee = "_label_z81ug_15", ae = "_hiddenLabel_z81ug_27", te = "_comboboxContainer_z81ug_30", le = "_withComboboxButtons_z81ug_46", ne = "_error_z81ug_54", oe = "_textInputWrapper_z81ug_62", se = "_textInput_z81ug_62", ie = "_errorIcon_z81ug_84", re = "_comboboxButtons_z81ug_87", de = "_withChips_z81ug_94", ce = "_inlineError_z81ug_104", ue = "_popover_z81ug_108", pe = "_option_z81ug_134", me = "_indicator_z81ug_157", _e = "_indicatorIcon_z81ug_166", be = "_optionWithIndicator_z81ug_169", ye = "_loadingIndicator_z81ug_172", ge = "_noResultOption_z81ug_175", E = {
|
|
8
8
|
container: P,
|
|
9
9
|
disabled: F,
|
|
10
10
|
label: ee,
|
|
@@ -22,8 +22,8 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_z81ug_1", F =
|
|
|
22
22
|
option: pe,
|
|
23
23
|
indicator: me,
|
|
24
24
|
indicatorIcon: _e,
|
|
25
|
-
optionWithIndicator:
|
|
26
|
-
loadingIndicator:
|
|
25
|
+
optionWithIndicator: be,
|
|
26
|
+
loadingIndicator: ye,
|
|
27
27
|
noResultOption: ge
|
|
28
28
|
}, Ee = ({
|
|
29
29
|
ariaLabel: k,
|
|
@@ -38,10 +38,10 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_z81ug_1", F =
|
|
|
38
38
|
noResultMessage: w,
|
|
39
39
|
loadingAriaLabel: B
|
|
40
40
|
}) => {
|
|
41
|
-
const [m, l] = K(Y, Z), [
|
|
41
|
+
const [m, l] = K(Y, Z), [y, W] = L({
|
|
42
42
|
nodes: [],
|
|
43
43
|
selectedIds: []
|
|
44
|
-
}), [I, g] = L(!1), v = Q(() => Math.max(...h), [h]), A =
|
|
44
|
+
}), [I, g] = L(!1), v = Q(() => Math.max(...h), [h]), A = b((a = m) => {
|
|
45
45
|
const t = [];
|
|
46
46
|
return [...Object.values(a).map((e) => {
|
|
47
47
|
const r = [...e.children], {
|
|
@@ -60,14 +60,14 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_z81ug_1", F =
|
|
|
60
60
|
let c;
|
|
61
61
|
return e.children.length && e.status === "loading" && (c = R(s.id, s.metadata.displayValue, "loading")), e.status === "error" && (c = R(s.id, s.metadata.displayValue, "reload")), e.status === "success" && e.marker && (c = R(s.id, s.metadata.displayValue, "loadMore")), c && (t.push(c), s.children.push(c.id)), s;
|
|
62
62
|
}), ...t];
|
|
63
|
-
}, [m]), D =
|
|
63
|
+
}, [m]), D = b((a) => {
|
|
64
64
|
var r;
|
|
65
65
|
const t = (r = a.ancestors) == null ? void 0 : r.find((n) => n.level === a.level - 1), d = O.find((n) => n.level === a.level);
|
|
66
66
|
return a.level === 1 || u === "" ? a.displayValue : {
|
|
67
67
|
labelName: d.displayName,
|
|
68
68
|
labelValue: t.displayName
|
|
69
69
|
};
|
|
70
|
-
}, [O, u]), _ =
|
|
70
|
+
}, [O, u]), _ = b((a) => ({
|
|
71
71
|
id: a.value,
|
|
72
72
|
name: a.displayValue,
|
|
73
73
|
parent: i.id,
|
|
@@ -107,7 +107,7 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_z81ug_1", F =
|
|
|
107
107
|
onlySelectableOptions: !1,
|
|
108
108
|
ancestorId: null
|
|
109
109
|
}).then((t) => {
|
|
110
|
-
const d = t.options.map((e) => {
|
|
110
|
+
const d = t.options.filter((e) => e.selectable).map((e) => {
|
|
111
111
|
const {
|
|
112
112
|
labelName: r,
|
|
113
113
|
labelValue: n
|
|
@@ -193,7 +193,7 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_z81ug_1", F =
|
|
|
193
193
|
}), g(!1);
|
|
194
194
|
}));
|
|
195
195
|
}, [p, _, x, u, O, v, D]);
|
|
196
|
-
const U =
|
|
196
|
+
const U = b((a) => {
|
|
197
197
|
const {
|
|
198
198
|
isExpanded: t,
|
|
199
199
|
isDisabled: d,
|
|
@@ -247,7 +247,7 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_z81ug_1", F =
|
|
|
247
247
|
}
|
|
248
248
|
});
|
|
249
249
|
});
|
|
250
|
-
}, [p, _]), j =
|
|
250
|
+
}, [p, _]), j = b((a) => {
|
|
251
251
|
const t = m[a], {
|
|
252
252
|
level: d
|
|
253
253
|
} = t.metadata, {
|
|
@@ -287,7 +287,7 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_z81ug_1", F =
|
|
|
287
287
|
}
|
|
288
288
|
});
|
|
289
289
|
});
|
|
290
|
-
}, [p, _, u, m]), M =
|
|
290
|
+
}, [p, _, u, m]), M = y.nodes.length === 0 || y.nodes[0].children.length === 0 && y.nodes[0].id === i.id, q = b((a) => {
|
|
291
291
|
const {
|
|
292
292
|
metadata: t
|
|
293
293
|
} = a.element;
|
|
@@ -305,12 +305,12 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_z81ug_1", F =
|
|
|
305
305
|
children: w
|
|
306
306
|
}) : !I && /* @__PURE__ */ S(J, {
|
|
307
307
|
"aria-label": k,
|
|
308
|
-
data:
|
|
308
|
+
data: y.nodes,
|
|
309
309
|
multiSelect: V,
|
|
310
310
|
onExpand: U,
|
|
311
311
|
onLoadData: j,
|
|
312
312
|
onNodeSelect: q,
|
|
313
|
-
selectedIds:
|
|
313
|
+
selectedIds: y.selectedIds,
|
|
314
314
|
size: "large",
|
|
315
315
|
togglableSelect: !0
|
|
316
316
|
})]
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ComboboxWithApiTreeView as I } from "./combobox-with-api-tree-view.js";
|
|
2
|
-
const
|
|
2
|
+
const m = [
|
|
3
3
|
// Level 1
|
|
4
4
|
{
|
|
5
5
|
id: "japan-l1-id",
|
|
@@ -394,7 +394,7 @@ const u = [
|
|
|
394
394
|
ancestorId: n,
|
|
395
395
|
marker: o,
|
|
396
396
|
failOnLoadMore: N,
|
|
397
|
-
options: v =
|
|
397
|
+
options: v = m,
|
|
398
398
|
failOnLoadMoreTimes: b = Number.MAX_SAFE_INTEGER,
|
|
399
399
|
failOnLoadLevel: g,
|
|
400
400
|
failOnLoadLevelTimes: k = Number.MAX_SAFE_INTEGER
|
|
@@ -406,21 +406,21 @@ const u = [
|
|
|
406
406
|
if (s === g && e < k)
|
|
407
407
|
return e += 1, Promise.reject();
|
|
408
408
|
a && await new Promise((r) => setTimeout(r, a));
|
|
409
|
-
const
|
|
409
|
+
const c = v.filter((r) => {
|
|
410
410
|
const {
|
|
411
411
|
displayName: h,
|
|
412
|
-
level:
|
|
412
|
+
level: u,
|
|
413
413
|
ancestors: p
|
|
414
414
|
} = {
|
|
415
415
|
...r
|
|
416
416
|
};
|
|
417
417
|
let d = !0;
|
|
418
|
-
return s &&
|
|
418
|
+
return s && u && u !== s && (d = !1), t && (d = d && h.toLowerCase().includes(t.toLowerCase())), n && (d = d && (p == null ? void 0 : p.some(({
|
|
419
419
|
id: S
|
|
420
420
|
}) => S === n))), d;
|
|
421
421
|
}), f = Promise.resolve({
|
|
422
|
-
marker: U(o,
|
|
423
|
-
options: j(o,
|
|
422
|
+
marker: U(o, c),
|
|
423
|
+
options: j(o, c)
|
|
424
424
|
});
|
|
425
425
|
return w(await f);
|
|
426
426
|
};
|
|
@@ -443,7 +443,7 @@ function w(l) {
|
|
|
443
443
|
};
|
|
444
444
|
}
|
|
445
445
|
const J = (l) => {
|
|
446
|
-
const e =
|
|
446
|
+
const e = m.find((a) => a.displayName === l);
|
|
447
447
|
return e ? {
|
|
448
448
|
value: e.id,
|
|
449
449
|
displayValue: e.displayName,
|
|
@@ -452,9 +452,13 @@ const J = (l) => {
|
|
|
452
452
|
ancestors: e.ancestors
|
|
453
453
|
} : null;
|
|
454
454
|
};
|
|
455
|
+
m.map((l) => ({
|
|
456
|
+
...l,
|
|
457
|
+
selectable: l.level === 2
|
|
458
|
+
}));
|
|
455
459
|
export {
|
|
456
460
|
I as ComboboxWithApiTreeView,
|
|
457
|
-
|
|
461
|
+
m as apiResponse,
|
|
458
462
|
J as findNode,
|
|
459
463
|
x as mockTreeFetcher
|
|
460
464
|
};
|
|
@@ -24,3 +24,14 @@ export declare const mockTreeFetcher: ({ delay, signal, level, searchInput, ance
|
|
|
24
24
|
export declare const findNode: (name: string) => TreeOptionType;
|
|
25
25
|
export declare const mockRejectedFetcher: ({ delay }: MockFetcherProps) => Promise<FetcherResponse<TreeOptionType>>;
|
|
26
26
|
export { mockTreeFetcher as mockFetcher };
|
|
27
|
+
export declare const onlyLevelTwoSelectableOptions: {
|
|
28
|
+
selectable: boolean;
|
|
29
|
+
id: string;
|
|
30
|
+
ancestors: {
|
|
31
|
+
id: string;
|
|
32
|
+
displayName: string;
|
|
33
|
+
level: number;
|
|
34
|
+
}[];
|
|
35
|
+
displayName: string;
|
|
36
|
+
level: number;
|
|
37
|
+
}[];
|