@box/combobox-with-api 0.36.5 → 0.36.7
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
3
|
import { useReducer as K, useState as L, useMemo as Q, useCallback as y, useEffect as T } from "react";
|
|
4
|
-
import { getServiceNode as
|
|
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
|
-
import { jsxs as $, jsx as
|
|
7
|
-
import '../styles/dynamic-loading-tree.css';const P = "
|
|
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", ye = "_optionWithIndicator_z81ug_169", be = "_loadingIndicator_z81ug_172", ge = "_noResultOption_z81ug_175", E = {
|
|
8
8
|
container: P,
|
|
9
9
|
disabled: F,
|
|
10
10
|
label: ee,
|
|
@@ -18,30 +18,30 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_xz6fa_1", F =
|
|
|
18
18
|
comboboxButtons: re,
|
|
19
19
|
withChips: de,
|
|
20
20
|
inlineError: ce,
|
|
21
|
-
popover:
|
|
22
|
-
option:
|
|
23
|
-
indicator:
|
|
24
|
-
indicatorIcon:
|
|
21
|
+
popover: ue,
|
|
22
|
+
option: pe,
|
|
23
|
+
indicator: me,
|
|
24
|
+
indicatorIcon: _e,
|
|
25
25
|
optionWithIndicator: ye,
|
|
26
26
|
loadingIndicator: be,
|
|
27
|
-
noResultOption:
|
|
28
|
-
},
|
|
27
|
+
noResultOption: ge
|
|
28
|
+
}, Ee = ({
|
|
29
29
|
ariaLabel: k,
|
|
30
|
-
onSelect:
|
|
31
|
-
selectedNodes:
|
|
32
|
-
defaultFetcher:
|
|
33
|
-
levels:
|
|
34
|
-
selectableLevels:
|
|
30
|
+
onSelect: N,
|
|
31
|
+
selectedNodes: f,
|
|
32
|
+
defaultFetcher: p,
|
|
33
|
+
levels: O,
|
|
34
|
+
selectableLevels: h,
|
|
35
35
|
multiselect: V,
|
|
36
|
-
open:
|
|
37
|
-
searchInput:
|
|
36
|
+
open: x,
|
|
37
|
+
searchInput: u,
|
|
38
38
|
noResultMessage: w,
|
|
39
39
|
loadingAriaLabel: B
|
|
40
40
|
}) => {
|
|
41
|
-
const [
|
|
41
|
+
const [m, l] = K(Y, Z), [b, W] = L({
|
|
42
42
|
nodes: [],
|
|
43
43
|
selectedIds: []
|
|
44
|
-
}), [
|
|
44
|
+
}), [I, g] = L(!1), v = Q(() => Math.max(...h), [h]), A = y((a = m) => {
|
|
45
45
|
const t = [];
|
|
46
46
|
return [...Object.values(a).map((e) => {
|
|
47
47
|
const r = [...e.children], {
|
|
@@ -58,20 +58,20 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_xz6fa_1", F =
|
|
|
58
58
|
}
|
|
59
59
|
};
|
|
60
60
|
let c;
|
|
61
|
-
return e.children.length && e.status === "loading" && (c =
|
|
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
|
-
}, [
|
|
63
|
+
}, [m]), D = y((a) => {
|
|
64
64
|
var r;
|
|
65
|
-
const t = (r = a.ancestors) == null ? void 0 : r.find((n) => n.level === a.level - 1), d =
|
|
66
|
-
return a.level === 1 ||
|
|
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
|
+
return a.level === 1 || u === "" ? a.displayValue : {
|
|
67
67
|
labelName: d.displayName,
|
|
68
68
|
labelValue: t.displayName
|
|
69
69
|
};
|
|
70
|
-
}, [
|
|
70
|
+
}, [O, u]), _ = y((a) => ({
|
|
71
71
|
id: a.value,
|
|
72
72
|
name: a.displayValue,
|
|
73
73
|
parent: i.id,
|
|
74
|
-
isBranch: a.level !==
|
|
74
|
+
isBranch: a.level !== v,
|
|
75
75
|
children: [],
|
|
76
76
|
metadata: {
|
|
77
77
|
variant: "content",
|
|
@@ -81,28 +81,28 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_xz6fa_1", F =
|
|
|
81
81
|
marker: a.marker,
|
|
82
82
|
ancestors: a.ancestors
|
|
83
83
|
}
|
|
84
|
-
}), [
|
|
84
|
+
}), [v]);
|
|
85
85
|
T(() => {
|
|
86
86
|
W({
|
|
87
|
-
nodes: A(
|
|
88
|
-
selectedIds:
|
|
87
|
+
nodes: A(m),
|
|
88
|
+
selectedIds: f
|
|
89
89
|
});
|
|
90
|
-
}, [A,
|
|
91
|
-
if (!
|
|
90
|
+
}, [A, f, m]), T(() => {
|
|
91
|
+
if (!x)
|
|
92
92
|
return;
|
|
93
93
|
const {
|
|
94
94
|
signal: a
|
|
95
95
|
} = new AbortController();
|
|
96
|
-
|
|
96
|
+
g(!0), u ? (l({
|
|
97
97
|
type: o.RESET,
|
|
98
98
|
payload: {
|
|
99
99
|
id: i.id,
|
|
100
100
|
items: []
|
|
101
101
|
}
|
|
102
|
-
}),
|
|
102
|
+
}), p({
|
|
103
103
|
signal: a,
|
|
104
104
|
marker: null,
|
|
105
|
-
searchInput:
|
|
105
|
+
searchInput: u,
|
|
106
106
|
level: null,
|
|
107
107
|
onlySelectableOptions: !1,
|
|
108
108
|
ancestorId: null
|
|
@@ -116,7 +116,7 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_xz6fa_1", F =
|
|
|
116
116
|
id: e.value,
|
|
117
117
|
name: e.displayValue,
|
|
118
118
|
parent: i.id,
|
|
119
|
-
isBranch: e.level <
|
|
119
|
+
isBranch: e.level < v,
|
|
120
120
|
children: [],
|
|
121
121
|
metadata: {
|
|
122
122
|
variant: e.level === 1 ? "content" : "labeled",
|
|
@@ -142,14 +142,14 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_xz6fa_1", F =
|
|
|
142
142
|
items: d,
|
|
143
143
|
marker: t.marker
|
|
144
144
|
}
|
|
145
|
-
}),
|
|
145
|
+
}), g(!1);
|
|
146
146
|
}).catch(() => {
|
|
147
147
|
l({
|
|
148
148
|
type: o.LOAD_ERROR,
|
|
149
149
|
payload: {
|
|
150
150
|
id: i.id
|
|
151
151
|
}
|
|
152
|
-
}),
|
|
152
|
+
}), g(!1);
|
|
153
153
|
})) : (l({
|
|
154
154
|
type: o.RESET,
|
|
155
155
|
payload: {
|
|
@@ -161,7 +161,7 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_xz6fa_1", F =
|
|
|
161
161
|
payload: {
|
|
162
162
|
id: i.id
|
|
163
163
|
}
|
|
164
|
-
}),
|
|
164
|
+
}), p({
|
|
165
165
|
signal: a,
|
|
166
166
|
marker: null,
|
|
167
167
|
searchInput: "",
|
|
@@ -169,7 +169,7 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_xz6fa_1", F =
|
|
|
169
169
|
onlySelectableOptions: !1,
|
|
170
170
|
ancestorId: null
|
|
171
171
|
}).then((t) => {
|
|
172
|
-
const d = t.options.map(
|
|
172
|
+
const d = t.options.map(_);
|
|
173
173
|
l({
|
|
174
174
|
type: o.RESET,
|
|
175
175
|
payload: {
|
|
@@ -183,16 +183,16 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_xz6fa_1", F =
|
|
|
183
183
|
items: d,
|
|
184
184
|
marker: t.marker
|
|
185
185
|
}
|
|
186
|
-
}),
|
|
186
|
+
}), g(!1);
|
|
187
187
|
}).catch(() => {
|
|
188
188
|
l({
|
|
189
189
|
type: o.LOAD_ERROR,
|
|
190
190
|
payload: {
|
|
191
191
|
id: i.id
|
|
192
192
|
}
|
|
193
|
-
}),
|
|
193
|
+
}), g(!1);
|
|
194
194
|
}));
|
|
195
|
-
}, [
|
|
195
|
+
}, [p, _, x, u, O, v, D]);
|
|
196
196
|
const U = y((a) => {
|
|
197
197
|
const {
|
|
198
198
|
isExpanded: t,
|
|
@@ -222,7 +222,7 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_xz6fa_1", F =
|
|
|
222
222
|
payload: {
|
|
223
223
|
id: n
|
|
224
224
|
}
|
|
225
|
-
}),
|
|
225
|
+
}), p({
|
|
226
226
|
signal: c,
|
|
227
227
|
marker: s,
|
|
228
228
|
searchInput: "",
|
|
@@ -230,7 +230,7 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_xz6fa_1", F =
|
|
|
230
230
|
ancestorId: n,
|
|
231
231
|
onlySelectableOptions: !1
|
|
232
232
|
}).then((z) => {
|
|
233
|
-
const G = z.options.map((C) => (e.children.push(C.value),
|
|
233
|
+
const G = z.options.map((C) => (e.children.push(C.value), _(C)));
|
|
234
234
|
l({
|
|
235
235
|
type: o.LOAD_SUCCESS,
|
|
236
236
|
payload: {
|
|
@@ -247,8 +247,8 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_xz6fa_1", F =
|
|
|
247
247
|
}
|
|
248
248
|
});
|
|
249
249
|
});
|
|
250
|
-
}, [
|
|
251
|
-
const t =
|
|
250
|
+
}, [p, _]), j = y((a) => {
|
|
251
|
+
const t = m[a], {
|
|
252
252
|
level: d
|
|
253
253
|
} = t.metadata, {
|
|
254
254
|
id: e,
|
|
@@ -261,15 +261,15 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_xz6fa_1", F =
|
|
|
261
261
|
payload: {
|
|
262
262
|
id: e
|
|
263
263
|
}
|
|
264
|
-
}),
|
|
264
|
+
}), p({
|
|
265
265
|
signal: n,
|
|
266
266
|
marker: r,
|
|
267
|
-
searchInput:
|
|
268
|
-
level:
|
|
267
|
+
searchInput: u,
|
|
268
|
+
level: u === "" ? d + 1 : null,
|
|
269
269
|
ancestorId: e !== i.id ? e.toString() : null,
|
|
270
270
|
onlySelectableOptions: !1
|
|
271
271
|
}).then((s) => {
|
|
272
|
-
const c = s.options.map(
|
|
272
|
+
const c = s.options.map(_);
|
|
273
273
|
l({
|
|
274
274
|
type: o.LOAD_SUCCESS,
|
|
275
275
|
payload: {
|
|
@@ -287,23 +287,23 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_xz6fa_1", F =
|
|
|
287
287
|
}
|
|
288
288
|
});
|
|
289
289
|
});
|
|
290
|
-
}, [
|
|
290
|
+
}, [p, _, u, m]), M = b.nodes.length === 0 || b.nodes[0].children.length === 0 && b.nodes[0].id === i.id, q = y((a) => {
|
|
291
291
|
const {
|
|
292
292
|
metadata: t
|
|
293
293
|
} = a.element;
|
|
294
|
-
X(t) &&
|
|
295
|
-
}, [
|
|
294
|
+
X(t) && h.includes(t.level) ? N(a) : (a.isSelected = !1, a.treeState.selectedIds.delete(a.element.id));
|
|
295
|
+
}, [h, N]);
|
|
296
296
|
return /* @__PURE__ */ $("div", {
|
|
297
|
-
children: [
|
|
298
|
-
className:
|
|
299
|
-
children: /* @__PURE__ */
|
|
297
|
+
children: [I && /* @__PURE__ */ S("div", {
|
|
298
|
+
className: E.noResultOption,
|
|
299
|
+
children: /* @__PURE__ */ S(H, {
|
|
300
300
|
"aria-label": B,
|
|
301
|
-
className:
|
|
301
|
+
className: E.loadingIndicator
|
|
302
302
|
})
|
|
303
|
-
}), M && !
|
|
304
|
-
className:
|
|
303
|
+
}), M && !I ? /* @__PURE__ */ S("div", {
|
|
304
|
+
className: E.noResultOption,
|
|
305
305
|
children: w
|
|
306
|
-
}) : !
|
|
306
|
+
}) : !I && /* @__PURE__ */ S(J, {
|
|
307
307
|
"aria-label": k,
|
|
308
308
|
data: b.nodes,
|
|
309
309
|
multiSelect: V,
|
|
@@ -317,6 +317,6 @@ import '../styles/dynamic-loading-tree.css';const P = "_container_xz6fa_1", F =
|
|
|
317
317
|
});
|
|
318
318
|
};
|
|
319
319
|
export {
|
|
320
|
-
|
|
321
|
-
|
|
320
|
+
Ee as D,
|
|
321
|
+
E as s
|
|
322
322
|
};
|
package/dist/esm/lib/components/combobox-with-api-pagination/combobox-with-api-pagination.js
CHANGED
|
@@ -3,27 +3,27 @@ import { Combobox as m, useForkRef as te, LoadingIndicator as re, InlineNotice a
|
|
|
3
3
|
import { Search as se, Loader as ae } from "@box/blueprint-web-assets/icons/Fill";
|
|
4
4
|
import { IconIconOnLightSecondary as le, Size6 as M, Size1 as ce } from "@box/blueprint-web-assets/tokens/tokens";
|
|
5
5
|
import T from "clsx";
|
|
6
|
-
import { forwardRef as
|
|
7
|
-
import { useIntl as
|
|
6
|
+
import { forwardRef as k, useRef as v, useCallback as ue, useMemo as R, useEffect as de } from "react";
|
|
7
|
+
import { useIntl as F, FormattedMessage as V } from "react-intl";
|
|
8
8
|
import i from "./messages.js";
|
|
9
9
|
import { useAsyncList as me } from "./use-async-list.js";
|
|
10
10
|
import { useControllableState as pe } from "./utils/use-controllable-state.js";
|
|
11
11
|
import { useTrackVisibility as he } from "./utils/use-intersection-observer.js";
|
|
12
12
|
import { jsx as r, jsxs as N, Fragment as fe } from "react/jsx-runtime";
|
|
13
|
-
import '../../../../styles/combobox-with-api-pagination.css';const be = "
|
|
13
|
+
import '../../../../styles/combobox-with-api-pagination.css';const be = "_container_syvk5_1", ge = "_disabled_syvk5_7", xe = "_highlightOptionText_syvk5_11", _e = "_selected_syvk5_23", Oe = "_option_syvk5_34", ye = "_errorComboboxOption_syvk5_38", ve = "_errorComboboxOptionText_syvk5_43", a = {
|
|
14
14
|
container: be,
|
|
15
15
|
disabled: ge,
|
|
16
16
|
highlightOptionText: xe,
|
|
17
17
|
selected: _e,
|
|
18
18
|
option: Oe,
|
|
19
|
-
errorComboboxOption:
|
|
20
|
-
errorComboboxOptionText:
|
|
21
|
-
}, S = /* @__PURE__ */
|
|
22
|
-
onTryAgain:
|
|
19
|
+
errorComboboxOption: ye,
|
|
20
|
+
errorComboboxOptionText: ve
|
|
21
|
+
}, S = /* @__PURE__ */ k(({
|
|
22
|
+
onTryAgain: A
|
|
23
23
|
}, p) => {
|
|
24
24
|
const {
|
|
25
25
|
formatMessage: h
|
|
26
|
-
} =
|
|
26
|
+
} = F();
|
|
27
27
|
return /* @__PURE__ */ N(fe, {
|
|
28
28
|
children: [/* @__PURE__ */ r(ne, {
|
|
29
29
|
variant: "error",
|
|
@@ -34,7 +34,7 @@ import '../../../../styles/combobox-with-api-pagination.css';const be = "_contai
|
|
|
34
34
|
}), /* @__PURE__ */ r(m.Option, {
|
|
35
35
|
ref: p,
|
|
36
36
|
className: a.errorComboboxOption,
|
|
37
|
-
onClick:
|
|
37
|
+
onClick: A,
|
|
38
38
|
children: /* @__PURE__ */ N(ie, {
|
|
39
39
|
as: "span",
|
|
40
40
|
className: a.errorComboboxOptionText,
|
|
@@ -50,7 +50,7 @@ import '../../../../styles/combobox-with-api-pagination.css';const be = "_contai
|
|
|
50
50
|
})
|
|
51
51
|
})]
|
|
52
52
|
});
|
|
53
|
-
}),
|
|
53
|
+
}), C = "__LOADING__", L = "__LOADING_ERROR__", Re = "0px 0px 20px 0px", Ce = /* @__PURE__ */ r(se, {
|
|
54
54
|
color: le,
|
|
55
55
|
height: M,
|
|
56
56
|
role: "presentation",
|
|
@@ -59,9 +59,9 @@ import '../../../../styles/combobox-with-api-pagination.css';const be = "_contai
|
|
|
59
59
|
boxSizing: "border-box"
|
|
60
60
|
},
|
|
61
61
|
width: M
|
|
62
|
-
}), De = /* @__PURE__ */
|
|
62
|
+
}), De = /* @__PURE__ */ k(function(p, h) {
|
|
63
63
|
const {
|
|
64
|
-
defaultFetcher:
|
|
64
|
+
defaultFetcher: P,
|
|
65
65
|
onInputValueChange: f,
|
|
66
66
|
value: D,
|
|
67
67
|
onValueChange: w,
|
|
@@ -74,14 +74,14 @@ import '../../../../styles/combobox-with-api-pagination.css';const be = "_contai
|
|
|
74
74
|
...U
|
|
75
75
|
} = p, {
|
|
76
76
|
formatMessage: u
|
|
77
|
-
} =
|
|
77
|
+
} = F(), b = v(null), g = v(!0), e = me({
|
|
78
78
|
async load({
|
|
79
79
|
marker: o,
|
|
80
80
|
searchInput: t,
|
|
81
|
-
signal:
|
|
81
|
+
signal: y
|
|
82
82
|
}) {
|
|
83
|
-
const c = await
|
|
84
|
-
signal:
|
|
83
|
+
const c = await P({
|
|
84
|
+
signal: y,
|
|
85
85
|
marker: o,
|
|
86
86
|
searchInput: t
|
|
87
87
|
});
|
|
@@ -90,21 +90,21 @@ import '../../../../styles/combobox-with-api-pagination.css';const be = "_contai
|
|
|
90
90
|
marker: c.marker
|
|
91
91
|
};
|
|
92
92
|
}
|
|
93
|
-
}),
|
|
94
|
-
|
|
93
|
+
}), E = v(!1), q = ue(() => {
|
|
94
|
+
E.current || (e.reload(), E.current = !0);
|
|
95
95
|
}, []), [n, x] = pe({
|
|
96
96
|
prop: D,
|
|
97
97
|
defaultProp: W,
|
|
98
98
|
onChange: w
|
|
99
99
|
}), _ = !l && n.length === 1, H = (o) => {
|
|
100
100
|
o === void 0 ? (x([]), g.current || (e.search(""), g.current = !0)) : Array.isArray(o) ? x(o) : x([o]);
|
|
101
|
-
}, J =
|
|
101
|
+
}, J = R(() => n.length === 0 ? l ? [] : void 0 : l ? n : n[0], [l, n]), O = R(() => n.filter((o) => !e.items.some((t) => t.value === o.value)), [n, e.items]), K = (o) => {
|
|
102
102
|
const {
|
|
103
103
|
value: t,
|
|
104
|
-
displayValue:
|
|
104
|
+
displayValue: y,
|
|
105
105
|
...c
|
|
106
106
|
} = o;
|
|
107
|
-
if (t ===
|
|
107
|
+
if (t === C)
|
|
108
108
|
return e.hasNextPage ? /* @__PURE__ */ r(m.Option, {
|
|
109
109
|
...c,
|
|
110
110
|
ref: Y,
|
|
@@ -117,7 +117,7 @@ import '../../../../styles/combobox-with-api-pagination.css';const be = "_contai
|
|
|
117
117
|
}
|
|
118
118
|
})
|
|
119
119
|
}) : null;
|
|
120
|
-
if (t ===
|
|
120
|
+
if (t === L && e.hasError && !e.isEmpty)
|
|
121
121
|
return /* @__PURE__ */ r(S, {
|
|
122
122
|
onTryAgain: () => {
|
|
123
123
|
var s;
|
|
@@ -133,7 +133,7 @@ import '../../../../styles/combobox-with-api-pagination.css';const be = "_contai
|
|
|
133
133
|
value: t,
|
|
134
134
|
children: /* @__PURE__ */ r(oe, {
|
|
135
135
|
className: T(a.highlightOptionText, ee && a.selected),
|
|
136
|
-
value:
|
|
136
|
+
value: y || t
|
|
137
137
|
})
|
|
138
138
|
});
|
|
139
139
|
}, Q = (o) => {
|
|
@@ -154,7 +154,7 @@ import '../../../../styles/combobox-with-api-pagination.css';const be = "_contai
|
|
|
154
154
|
rootRef: Z,
|
|
155
155
|
isVisible: I
|
|
156
156
|
}] = he({
|
|
157
|
-
rootMargin:
|
|
157
|
+
rootMargin: Re
|
|
158
158
|
});
|
|
159
159
|
de(() => {
|
|
160
160
|
if (!(I && e.hasNextPage))
|
|
@@ -166,13 +166,13 @@ import '../../../../styles/combobox-with-api-pagination.css';const be = "_contai
|
|
|
166
166
|
clearTimeout(t);
|
|
167
167
|
};
|
|
168
168
|
}, [I]);
|
|
169
|
-
const $ =
|
|
169
|
+
const $ = R(() => {
|
|
170
170
|
const o = e.hasNextPage ? {
|
|
171
|
-
displayValue:
|
|
172
|
-
value:
|
|
171
|
+
displayValue: C,
|
|
172
|
+
value: C
|
|
173
173
|
} : null, t = !o && e.hasError && !e.isEmpty ? {
|
|
174
|
-
displayValue:
|
|
175
|
-
value:
|
|
174
|
+
displayValue: L,
|
|
175
|
+
value: L
|
|
176
176
|
} : null;
|
|
177
177
|
return [...e.items, ...O, o, t].filter(Boolean);
|
|
178
178
|
}, [e.hasNextPage, e.hasError, e.isEmpty, e.items, O]);
|
|
@@ -186,7 +186,7 @@ import '../../../../styles/combobox-with-api-pagination.css';const be = "_contai
|
|
|
186
186
|
clearButtonAriaLabel: u(i.clearButtonAriaLabel),
|
|
187
187
|
disabled: G || _,
|
|
188
188
|
displayValue: (o) => o.displayValue || o.value,
|
|
189
|
-
endComboboxIcon:
|
|
189
|
+
endComboboxIcon: Ce,
|
|
190
190
|
focusLoop: !1,
|
|
191
191
|
getPopoverRef: Z,
|
|
192
192
|
loading: e.isReloading,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._container_syvk5_1{display:flex;gap:var(--space-1);justify-content:center}._disabled_syvk5_7._disabled_syvk5_7{opacity:unset}._highlightOptionText_syvk5_11 [data-user-value]{font-weight:var(--body-default-bold-font-weight);font-size:var(--body-default-bold-font-size);font-family:var(--body-default-bold-font-family);line-height:var(--body-default-bold-line-height);letter-spacing:var(--body-default-bold-letter-spacing);text-transform:var(--body-default-bold-text-case);text-decoration:var(--body-default-bold-text-decoration)}._highlightOptionText_syvk5_11 [data-autocomplete-value]{color:var(--text-text-on-light-secondary)}._highlightOptionText_syvk5_11._selected_syvk5_23,._highlightOptionText_syvk5_11._selected_syvk5_23 span{color:var(--text-text-on-light);font-weight:var(--body-default-bold-font-weight);font-size:var(--body-default-bold-font-size);font-family:var(--body-default-bold-font-family);line-height:var(--body-default-bold-line-height);letter-spacing:var(--body-default-bold-letter-spacing);text-transform:var(--body-default-bold-text-case);text-decoration:var(--body-default-bold-text-decoration)}._option_syvk5_34:nth-last-child(1 of._option_syvk5_34){scroll-margin-block-end:var(--space-12)}._errorComboboxOption_syvk5_38[role=option]{display:flex;align-items:center;justify-content:center}._errorComboboxOption_syvk5_38[role=option] ._errorComboboxOptionText_syvk5_43{display:flex;gap:var(--space-1);align-items:center}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._container_z81ug_1{font-weight:var(--body-default-font-weight);font-size:var(--body-default-font-size);font-family:var(--body-default-font-family);line-height:var(--body-default-line-height);letter-spacing:var(--body-default-letter-spacing);text-transform:var(--body-default-text-case);text-decoration:var(--body-default-text-decoration);display:flex;flex-direction:column}._container_z81ug_1._disabled_z81ug_12{opacity:.1}._container_z81ug_1 ._label_z81ug_15{font-weight:var(--body-default-bold-font-weight);font-size:var(--body-default-bold-font-size);font-family:var(--body-default-bold-font-family);line-height:var(--body-default-bold-line-height);letter-spacing:var(--body-default-bold-letter-spacing);text-transform:var(--body-default-bold-text-case);text-decoration:var(--body-default-bold-text-decoration);flex:0 0 fit-content;color:var(--text-text-on-light);overflow-wrap:break-word}._container_z81ug_1 ._label_z81ug_15:not(._hiddenLabel_z81ug_27){margin-block-end:var(--space-2)}._container_z81ug_1 ._comboboxContainer_z81ug_30{position:relative;display:flex;flex-wrap:wrap;gap:var(--space-2);overflow-y:auto;background-color:var(--surface-dropdown-surface);border-top:var(--blueprint-combobox-border-top-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));border-right:var(--blueprint-combobox-border-right-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));border-bottom:var(--blueprint-combobox-border-bottom-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));border-left:var(--blueprint-combobox-border-left-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));border-radius:var(--blueprint-combobox-input-radius, var(--radius-2));box-shadow:var(--innershadow-1);padding-block:calc((40px - var(--space-5)) / 2 - var(--border-1));padding-inline:var(--space-3)}._container_z81ug_1 ._comboboxContainer_z81ug_30._withComboboxButtons_z81ug_46{padding-inline-end:var(--space-10)}._container_z81ug_1 ._comboboxContainer_z81ug_30:not(:disabled):has(input:focus){background-color:var(--surface-dropdown-surface-focus);border:var(--border-2) solid var(--outline-focus-on-light);padding-block:calc((40px - var(--space-5)) / 2 - var(--border-2))}._container_z81ug_1 ._comboboxContainer_z81ug_30:not(:disabled)._error_z81ug_54,._container_z81ug_1 ._comboboxContainer_z81ug_30:not(:disabled):has([aria-invalid=true]){background-color:var(--surface-dropdown-surface-error);border-top:var(--blueprint-combobox-border-error-top-width, var(--border-2)) solid var(--border-input-border-error);border-right:var(--blueprint-combobox-border-error-right-width, var(--border-2)) solid var(--border-input-border-error);border-bottom:var(--blueprint-combobox-border-error-bottom-width, var(--border-2)) solid var(--border-input-border-error);border-left:var(--blueprint-combobox-border-error-left-width, var(--border-2)) solid var(--border-input-border-error);padding-block:calc((40px - var(--space-5)) / 2 - var(--border-2))}._container_z81ug_1 ._comboboxContainer_z81ug_30 ._textInputWrapper_z81ug_62{display:flex;flex:content;gap:var(--space-2);align-items:center}._container_z81ug_1 ._comboboxContainer_z81ug_30 ._textInputWrapper_z81ug_62 ._textInput_z81ug_62{font-weight:var(--body-default-font-weight);font-size:var(--body-default-font-size);font-family:var(--body-default-font-family);line-height:var(--body-default-line-height);letter-spacing:var(--body-default-letter-spacing);text-transform:var(--body-default-text-case);text-decoration:var(--body-default-text-decoration);width:100%;height:var(--space-5);padding:0;color:var(--text-text-on-light);background-color:transparent;border:none;outline:none}._container_z81ug_1 ._comboboxContainer_z81ug_30 ._textInputWrapper_z81ug_62 ._errorIcon_z81ug_84 path{fill:var(--icon-icon-error-on-light)}._container_z81ug_1 ._comboboxContainer_z81ug_30 ._textInputWrapper_z81ug_62 ._comboboxButtons_z81ug_87{position:absolute;top:var(--space-2);right:var(--space-2);display:flex;align-items:center}._container_z81ug_1 ._comboboxContainer_z81ug_30._withChips_z81ug_94{max-height:calc(2 * var(--space-2) + 3 * var(--space-6));padding-block:calc((40px - var(--space-7)) / 2 - var(--border-1))}._container_z81ug_1 ._comboboxContainer_z81ug_30._withChips_z81ug_94:not(:disabled)._error_z81ug_54{padding-block:calc((40px - var(--space-7)) / 2 - var(--border-2))}._container_z81ug_1 ._comboboxContainer_z81ug_30._withChips_z81ug_94:not(:disabled):has(input:focus){padding-block:calc((40px - var(--space-7)) / 2 - var(--border-2))}._container_z81ug_1 ._inlineError_z81ug_104{margin-block-start:var(--space-2)}._popover_z81ug_108{font-weight:var(--body-default-font-weight);font-size:var(--body-default-font-size);font-family:var(--body-default-font-family);line-height:var(--body-default-line-height);letter-spacing:var(--body-default-letter-spacing);text-transform:var(--body-default-text-case);text-decoration:var(--body-default-text-decoration);z-index:380;max-height:300px;overflow:auto;background-color:var(--surface-menu-surface);border:var(--border-1) solid var(--border-card-border);border-radius:var(--radius-3);padding-block:var(--space-3);padding-inline:var(--space-3);box-shadow:var(--dropshadow-3)}._popover_z81ug_108 ul{padding-inline-start:0}._popover_z81ug_108 ._option_z81ug_134{position:relative;box-sizing:border-box;width:100%;overflow-wrap:break-word;border:var(--border-2) solid transparent;border-radius:var(--radius-3);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;padding-block:var(--space-2);padding-inline:var(--space-2)}._popover_z81ug_108 ._option_z81ug_134[aria-disabled]{opacity:.1}._popover_z81ug_108 ._option_z81ug_134[data-active-item]:not([aria-disabled]){background-color:var(--surface-menu-surface-focus);border:var(--border-2) solid var(--outline-focus-on-light)}._popover_z81ug_108 ._option_z81ug_134:hover{background-color:var(--surface-menu-surface-hover)}._popover_z81ug_108 ._option_z81ug_134 ._indicator_z81ug_157{position:absolute;top:0;left:var(--space-2);display:flex;align-items:center;justify-content:center;height:var(--size-9)}._popover_z81ug_108 ._option_z81ug_134 ._indicator_z81ug_157 ._indicatorIcon_z81ug_166 path{fill:var(--icon-icon-on-light)}._popover_z81ug_108 ._optionWithIndicator_z81ug_169{padding-inline:var(--space-10) var(--space-2)}._popover_z81ug_108 ._loadingIndicator_z81ug_172{position:unset}._popover_z81ug_108 ._noResultOption_z81ug_175{color:var(--text-text-on-light);text-align:center;-webkit-user-select:none;user-select:none}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/combobox-with-api",
|
|
3
|
-
"version": "0.36.
|
|
3
|
+
"version": "0.36.7",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@ariakit/react": "0.4.15",
|
|
6
6
|
"@box/blueprint-web": "^10.3.1",
|
|
@@ -11,13 +11,13 @@
|
|
|
11
11
|
"react-intl": "^6.4.2"
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"@box/tree": "^0.47.
|
|
14
|
+
"@box/tree": "^0.47.4",
|
|
15
15
|
"react-accessible-treeview": "2.9.0"
|
|
16
16
|
},
|
|
17
17
|
"devDependencies": {
|
|
18
|
-
"@box/blueprint-web": "^11.
|
|
19
|
-
"@box/blueprint-web-assets": "^4.
|
|
20
|
-
"@box/storybook-utils": "^0.12.
|
|
18
|
+
"@box/blueprint-web": "^11.12.0",
|
|
19
|
+
"@box/blueprint-web-assets": "^4.44.0",
|
|
20
|
+
"@box/storybook-utils": "^0.12.3",
|
|
21
21
|
"react": "^18.3.0",
|
|
22
22
|
"react-dom": "^18.3.0"
|
|
23
23
|
},
|