@box/combobox-with-api 2.0.0 → 2.1.1
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/chunks/combobox-with-api-error.js +1 -1
- package/dist/chunks/combobox-with-api-pagination.js +2 -2
- package/dist/chunks/dynamic-loading-tree.js +1 -1
- package/dist/esm/lib/components/combobox-with-api-pagination/use-async-list.js +48 -51
- package/dist/esm/lib/components/combobox-with-api-tree-view/combobox-with-api-tree-view.js +1 -1
- package/package.json +7 -7
|
@@ -3,7 +3,7 @@ import { Combobox as t, Text as n } from "@box/blueprint-web";
|
|
|
3
3
|
import { forwardRef as r } from "react";
|
|
4
4
|
import { FormattedMessage as i } from "react-intl";
|
|
5
5
|
import { jsx as a } from "react/jsx-runtime";
|
|
6
|
-
import '../styles/combobox-with-api-error.css';var o = { container: "_container_1ozsi_1" }, s =
|
|
6
|
+
import '../styles/combobox-with-api-error.css';var o = { container: "_container_1ozsi_1" }, s = /*#__PURE__*/ r(({ onTryAgain: r }, s) => /* @__PURE__ */ a(t.Option, {
|
|
7
7
|
onClick: r,
|
|
8
8
|
children: /* @__PURE__ */ a("div", {
|
|
9
9
|
ref: s,
|
|
@@ -18,7 +18,7 @@ import '../styles/combobox-with-api-pagination.css';var E = {
|
|
|
18
18
|
option: "_option_5alez_38",
|
|
19
19
|
errorComboboxOption: "_errorComboboxOption_5alez_42",
|
|
20
20
|
errorComboboxOptionText: "_errorComboboxOptionText_5alez_47"
|
|
21
|
-
}, D =
|
|
21
|
+
}, D = /*#__PURE__*/ h(({ onTryAgain: t }, n) => {
|
|
22
22
|
let { formatMessage: r } = S();
|
|
23
23
|
return /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w(a, {
|
|
24
24
|
variant: "error",
|
|
@@ -49,7 +49,7 @@ import '../styles/combobox-with-api-pagination.css';var E = {
|
|
|
49
49
|
boxSizing: "border-box"
|
|
50
50
|
},
|
|
51
51
|
width: p
|
|
52
|
-
}), A =
|
|
52
|
+
}), A = /*#__PURE__*/ h(function(a, s) {
|
|
53
53
|
let { dataTargetId: l, defaultFetcher: u, initialOpen: d = !1, onInputValueChange: f, value: p, onValueChange: h, onOpenChange: x, noResultMessage: C, defaultValue: T = [], loadingAriaLabel: A, multiselect: j = !1, disabled: M, className: N, displaySingleSelectionAsChip: P = !0, ...re } = a, { formatMessage: F } = S(), I = y(null), L = y(!0), [R, z] = b(d), B = t({ async load({ marker: e, searchInput: t, signal: n }) {
|
|
54
54
|
let r = await u({
|
|
55
55
|
signal: n,
|
|
@@ -41,7 +41,7 @@ import '../styles/dynamic-loading-tree.css';var _ = {
|
|
|
41
41
|
}, y = (e, n) => {
|
|
42
42
|
let r;
|
|
43
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 =
|
|
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
45
|
let [A, j] = d(r, a), [M, N] = f({
|
|
46
46
|
nodes: [],
|
|
47
47
|
selectedIds: []
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import { RequestStates as e } from "./request.js";
|
|
2
2
|
import { isAbortError as t } from "./utils/is-abort-error.js";
|
|
3
3
|
import { useReducer as n } from "react";
|
|
4
|
-
|
|
5
|
-
return e.LOAD_MORE = "LOAD_MORE", e.RELOAD = "RELOAD", e.SEARCH = "SEARCH", e.SET_ERROR = "SET_ERROR", e.SET_LOADING = "SET_LOADING", e;
|
|
6
|
-
}(r || {});
|
|
7
|
-
function i(t, n) {
|
|
4
|
+
function r(t, n) {
|
|
8
5
|
switch (n.type) {
|
|
9
|
-
case
|
|
6
|
+
case "LOAD_MORE": return {
|
|
10
7
|
...t,
|
|
11
8
|
abortController: n.abortController,
|
|
12
9
|
error: null,
|
|
@@ -14,7 +11,7 @@ function i(t, n) {
|
|
|
14
11
|
marker: n.marker,
|
|
15
12
|
requestState: e.SUCCESS
|
|
16
13
|
};
|
|
17
|
-
case
|
|
14
|
+
case "RELOAD": return n.abortController === t.abortController ? {
|
|
18
15
|
...t,
|
|
19
16
|
abortController: null,
|
|
20
17
|
error: null,
|
|
@@ -23,7 +20,7 @@ function i(t, n) {
|
|
|
23
20
|
requestState: e.SUCCESS,
|
|
24
21
|
searchInput: ""
|
|
25
22
|
} : t;
|
|
26
|
-
case
|
|
23
|
+
case "SEARCH": return {
|
|
27
24
|
...t,
|
|
28
25
|
abortController: n.abortController,
|
|
29
26
|
error: null,
|
|
@@ -32,13 +29,13 @@ function i(t, n) {
|
|
|
32
29
|
requestState: e.SUCCESS,
|
|
33
30
|
searchInput: n.searchInput ?? t.searchInput
|
|
34
31
|
};
|
|
35
|
-
case
|
|
32
|
+
case "SET_ERROR": return {
|
|
36
33
|
...t,
|
|
37
|
-
items:
|
|
34
|
+
items: t.items,
|
|
38
35
|
error: n.error,
|
|
39
36
|
requestState: e.ERROR
|
|
40
37
|
};
|
|
41
|
-
case
|
|
38
|
+
case "SET_LOADING": return {
|
|
42
39
|
...t,
|
|
43
40
|
requestInitiator: n.requestInitiator,
|
|
44
41
|
requestState: e.IN_PROGRESS,
|
|
@@ -47,54 +44,54 @@ function i(t, n) {
|
|
|
47
44
|
default: throw Error(`Invalid action type "${n.type}"`);
|
|
48
45
|
}
|
|
49
46
|
}
|
|
47
|
+
function i(t, n) {
|
|
48
|
+
return t.type === "SEARCH" && n.requestState === e.IN_PROGRESS;
|
|
49
|
+
}
|
|
50
50
|
function a(t, n) {
|
|
51
|
-
return
|
|
51
|
+
return n.requestInitiator === "LOAD_MORE" && n.requestState === e.IN_PROGRESS && t.type === "LOAD_MORE";
|
|
52
52
|
}
|
|
53
|
-
function o(
|
|
54
|
-
return
|
|
53
|
+
function o(e, t) {
|
|
54
|
+
return i(e, t) || a(e, t);
|
|
55
55
|
}
|
|
56
56
|
function s(e, t) {
|
|
57
|
-
|
|
57
|
+
i(e, t) && t.abortController.abort(), a(e, t) && e.abortController?.abort();
|
|
58
58
|
}
|
|
59
59
|
function c(e, t) {
|
|
60
|
-
a(e, t)
|
|
61
|
-
}
|
|
62
|
-
function l(e, t) {
|
|
63
|
-
return o(e, t);
|
|
60
|
+
return a(e, t);
|
|
64
61
|
}
|
|
65
|
-
async function
|
|
66
|
-
let
|
|
67
|
-
if (
|
|
68
|
-
|
|
69
|
-
type:
|
|
62
|
+
async function l(e, n, r, i) {
|
|
63
|
+
let a = new AbortController();
|
|
64
|
+
if (o(e, r) && s(e, r), !c(e, r)) {
|
|
65
|
+
i({
|
|
66
|
+
type: "SET_LOADING",
|
|
70
67
|
requestInitiator: e.type,
|
|
71
|
-
abortController:
|
|
68
|
+
abortController: a
|
|
72
69
|
});
|
|
73
70
|
try {
|
|
74
71
|
let t = await n({
|
|
75
|
-
items:
|
|
76
|
-
signal:
|
|
77
|
-
marker: e.type ===
|
|
78
|
-
searchInput: e.searchInput ??
|
|
79
|
-
}),
|
|
80
|
-
|
|
72
|
+
items: r.items.slice(),
|
|
73
|
+
signal: a.signal,
|
|
74
|
+
marker: e.type === "LOAD_MORE" ? r.marker : null,
|
|
75
|
+
searchInput: e.searchInput ?? r.searchInput
|
|
76
|
+
}), o = t.searchInput ?? e.searchInput ?? r.searchInput;
|
|
77
|
+
i({
|
|
81
78
|
type: e.type,
|
|
82
79
|
...t,
|
|
83
|
-
searchInput:
|
|
84
|
-
abortController:
|
|
80
|
+
searchInput: o,
|
|
81
|
+
abortController: a
|
|
85
82
|
});
|
|
86
83
|
} catch (e) {
|
|
87
84
|
if (t(e)) return;
|
|
88
|
-
|
|
89
|
-
type:
|
|
85
|
+
i({
|
|
86
|
+
type: "SET_ERROR",
|
|
90
87
|
error: e,
|
|
91
|
-
abortController:
|
|
88
|
+
abortController: a
|
|
92
89
|
});
|
|
93
90
|
}
|
|
94
91
|
}
|
|
95
92
|
}
|
|
96
|
-
function
|
|
97
|
-
let { load:
|
|
93
|
+
function u(t) {
|
|
94
|
+
let { load: i } = t, [a, o] = n(r, {
|
|
98
95
|
error: null,
|
|
99
96
|
items: [],
|
|
100
97
|
requestInitiator: null,
|
|
@@ -102,20 +99,20 @@ function d(t) {
|
|
|
102
99
|
searchInput: ""
|
|
103
100
|
});
|
|
104
101
|
return {
|
|
105
|
-
hasError:
|
|
106
|
-
hasNextPage:
|
|
107
|
-
isEmpty:
|
|
108
|
-
isLoading:
|
|
109
|
-
isReloading:
|
|
110
|
-
items:
|
|
111
|
-
loadMore: () =>
|
|
112
|
-
reload: () =>
|
|
113
|
-
requestInitiator:
|
|
114
|
-
searchInput:
|
|
115
|
-
search: (e) =>
|
|
116
|
-
type:
|
|
102
|
+
hasError: a.requestState === e.ERROR,
|
|
103
|
+
hasNextPage: a.requestState === e.ERROR ? !1 : a.marker != null,
|
|
104
|
+
isEmpty: a.items.length === 0,
|
|
105
|
+
isLoading: a.requestState === e.IN_PROGRESS,
|
|
106
|
+
isReloading: a.requestState === e.IN_PROGRESS && (a.requestInitiator === "RELOAD" || a.requestInitiator === "SEARCH"),
|
|
107
|
+
items: a.items,
|
|
108
|
+
loadMore: () => l({ type: "LOAD_MORE" }, i, a, o),
|
|
109
|
+
reload: () => l({ type: "RELOAD" }, i, a, o),
|
|
110
|
+
requestInitiator: a.requestInitiator,
|
|
111
|
+
searchInput: a.searchInput,
|
|
112
|
+
search: (e) => l({
|
|
113
|
+
type: "SEARCH",
|
|
117
114
|
searchInput: e
|
|
118
|
-
}, a, o
|
|
115
|
+
}, i, a, o)
|
|
119
116
|
};
|
|
120
117
|
}
|
|
121
|
-
export {
|
|
118
|
+
export { u as useAsyncList };
|
|
@@ -18,7 +18,7 @@ var oe = () => /* @__PURE__ */ x(u, {
|
|
|
18
18
|
boxSizing: "border-box"
|
|
19
19
|
},
|
|
20
20
|
width: m
|
|
21
|
-
}), C =
|
|
21
|
+
}), C = /*#__PURE__*/ g(function(u, f) {
|
|
22
22
|
let { className: p, closeOnSelection: m = !1, dataTargetId: g, defaultFetcher: C, defaultValue: se = [], disabled: w, hideLabel: T, initialOpen: E = !1, label: D, levels: O, loadingAriaLabel: k, multiselect: A = !1, noResultMessage: j, onValueChange: M, onOpenChange: N, placeholder: P, portalElement: F, selectableLevels: I, treeAriaLabel: L, value: R } = u, { formatMessage: z } = ae(), B = v(), [V, H] = b(E), [U, W] = t({
|
|
23
23
|
prop: R,
|
|
24
24
|
defaultProp: se,
|
package/package.json
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/combobox-with-api",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.1.1",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@ariakit/react": "0.4.21",
|
|
6
|
-
"@box/blueprint-web": "^16.
|
|
7
|
-
"@box/blueprint-web-assets": "^5.
|
|
6
|
+
"@box/blueprint-web": "^16.1.1",
|
|
7
|
+
"@box/blueprint-web-assets": "^5.1.1",
|
|
8
8
|
"lodash": "^4.17.15",
|
|
9
9
|
"react": "^17.0.0 || ^18.0.0",
|
|
10
10
|
"react-dom": "^17.0.0 || ^18.0.0",
|
|
11
11
|
"react-intl": "^6.4.2"
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"@box/tree": "^2.
|
|
14
|
+
"@box/tree": "^2.1.1",
|
|
15
15
|
"react-accessible-treeview": "2.9.0"
|
|
16
16
|
},
|
|
17
17
|
"devDependencies": {
|
|
18
|
-
"@box/blueprint-web": "^16.
|
|
19
|
-
"@box/blueprint-web-assets": "^5.
|
|
20
|
-
"@box/storybook-utils": "^1.
|
|
18
|
+
"@box/blueprint-web": "^16.1.1",
|
|
19
|
+
"@box/blueprint-web-assets": "^5.1.1",
|
|
20
|
+
"@box/storybook-utils": "^1.1.1",
|
|
21
21
|
"react": "^18.3.0",
|
|
22
22
|
"react-dom": "^18.3.0"
|
|
23
23
|
},
|