@box/combobox-with-api 0.44.20 → 0.45.0

package/dist/chunks/dynamic-loading-tree.js

@@ -1,78 +1,78 @@
-import { LoadingIndicator as Y } from "@box/blueprint-web";
-import { InlineError as Z, Tree as $ } from "@box/tree";
-import { forwardRef as F, useReducer as P, useState as A, useMemo as ee, useCallback as p, useEffect as j } from "react";
-import { RootTreeNode as u, hasValidLevel as te, getServiceNode as D } from "../esm/lib/components/combobox-with-api-tree-view/tree-utils.js";
-import { t as ae, i as oe, A as r } from "./treeReducer.js";
-import { jsx as v, jsxs as ne } from "react/jsx-runtime";
-import '../styles/dynamic-loading-tree.css';const le = "_container_z81ug_1", se = "_disabled_z81ug_12", re = "_label_z81ug_15", ie = "_hiddenLabel_z81ug_27", de = "_comboboxContainer_z81ug_30", ce = "_withComboboxButtons_z81ug_46", ue = "_error_z81ug_54", me = "_textInputWrapper_z81ug_62", pe = "_textInput_z81ug_62", _e = "_errorIcon_z81ug_84", be = "_comboboxButtons_z81ug_87", ge = "_withChips_z81ug_94", ye = "_inlineError_z81ug_104", he = "_popover_z81ug_108", ve = "_option_z81ug_134", fe = "_indicator_z81ug_157", Ie = "_indicatorIcon_z81ug_166", Se = "_optionWithIndicator_z81ug_169", Ee = "_loadingIndicator_z81ug_172", Oe = "_noResultOption_z81ug_175", C = {
-  container: le,
-  disabled: se,
-  label: re,
-  hiddenLabel: ie,
-  comboboxContainer: de,
-  withComboboxButtons: ce,
-  error: ue,
-  textInputWrapper: me,
-  textInput: pe,
-  errorIcon: _e,
-  comboboxButtons: be,
-  withChips: ge,
-  inlineError: ye,
-  popover: he,
-  option: ve,
-  indicator: fe,
-  indicatorIcon: Ie,
-  optionWithIndicator: Se,
-  loadingIndicator: Ee,
+import { LoadingIndicator as Z } from "@box/blueprint-web";
+import { InlineError as $, Tree as F } from "@box/tree";
+import { forwardRef as P, useReducer as ee, useState as A, useMemo as te, useCallback as m, useEffect as j } from "react";
+import { RootTreeNode as u, hasValidLevel as ae, getServiceNode as D } from "../esm/lib/components/combobox-with-api-tree-view/tree-utils.js";
+import { t as oe, i as ne, A as r } from "./treeReducer.js";
+import { jsx as v, jsxs as le } from "react/jsx-runtime";
+import '../styles/dynamic-loading-tree.css';const se = "_container_z81ug_1", re = "_disabled_z81ug_12", ie = "_label_z81ug_15", de = "_hiddenLabel_z81ug_27", ce = "_comboboxContainer_z81ug_30", ue = "_withComboboxButtons_z81ug_46", me = "_error_z81ug_54", pe = "_textInputWrapper_z81ug_62", _e = "_textInput_z81ug_62", be = "_errorIcon_z81ug_84", ge = "_comboboxButtons_z81ug_87", ye = "_withChips_z81ug_94", he = "_inlineError_z81ug_104", ve = "_popover_z81ug_108", fe = "_option_z81ug_134", Ie = "_indicator_z81ug_157", Se = "_indicatorIcon_z81ug_166", Ee = "_optionWithIndicator_z81ug_169", Ne = "_loadingIndicator_z81ug_172", Oe = "_noResultOption_z81ug_175", C = {
+  container: se,
+  disabled: re,
+  label: ie,
+  hiddenLabel: de,
+  comboboxContainer: ce,
+  withComboboxButtons: ue,
+  error: me,
+  textInputWrapper: pe,
+  textInput: _e,
+  errorIcon: be,
+  comboboxButtons: ge,
+  withChips: ye,
+  inlineError: he,
+  popover: ve,
+  option: fe,
+  indicator: Ie,
+  indicatorIcon: Se,
+  optionWithIndicator: Ee,
+  loadingIndicator: Ne,
   noResultOption: Oe
 }, Re = (l) => {
-  const i = [...l.children], {
-    metadata: d
+  const d = [...l.children], {
+    metadata: c
   } = l;
   return {
     ...l,
-    children: i,
+    children: d,
     metadata: {
       ...l.metadata,
-      variant: d.variant,
+      variant: c.variant,
       isLoading: l.status === "loading" && !l.children.length,
-      labelName: d.labelName || "",
-      labelValue: d.labelValue || ""
+      labelName: c.labelName || "",
+      labelValue: c.labelValue || ""
     }
   };
-}, Ne = (l, i) => {
-  let d;
-  return l.children.length && l.status === "loading" && (d = D(i.id, i.metadata.displayValue, "loading")), l.status === "error" && (d = D(i.id, i.metadata.displayValue, "reload")), l.status === "success" && l.marker && (d = D(i.id, i.metadata.displayValue, "loadMore")), d;
-}, Le = /* @__PURE__ */ F(({
+}, xe = (l, d) => {
+  let c;
+  return l.children.length && l.status === "loading" && (c = D(d.id, d.metadata.displayValue, "loading")), l.status === "error" && (c = D(d.id, d.metadata.displayValue, "reload")), l.status === "success" && l.marker && (c = D(d.id, d.metadata.displayValue, "loadMore")), c;
+}, Ve = /* @__PURE__ */ P(({
   ariaLabel: l,
-  onSelect: i,
-  selectedNodes: d,
+  onSelect: d,
+  selectedNodes: c,
   defaultFetcher: _,
-  levels: R,
+  levels: O,
   selectableLevels: f,
   multiselect: M,
   open: L,
-  searchInput: m,
+  searchInput: p,
   noResultMessage: U,
   loadingAriaLabel: q
 }, G) => {
-  const [g, n] = P(ae, oe), [h, H] = A({
+  const [g, n] = ee(oe, ne), [h, H] = A({
     nodes: [],
     selectedIds: []
-  }), [N, b] = A(!1), [I, S] = A(!1), E = ee(() => Math.max(...f), [f]), k = p((e = g) => {
+  }), [R, b] = A(!1), [I, S] = A(!1), E = te(() => Math.max(...f), [f]), V = m((e = g) => {
     const a = [];
     return [...Object.values(e).map((t) => {
-      const s = Re(t), o = Ne(t, s);
+      const s = Re(t), o = xe(t, s);
       return o && (a.push(o), s.children.push(o.id)), s;
     }), ...a];
-  }, [g]), V = p((e) => {
+  }, [g]), k = m((e) => {
     var s;
-    const a = (s = e.ancestors) == null ? void 0 : s.find((o) => o.level === e.level - 1), c = R.find((o) => o.level === e.level);
-    return e.level === 1 || m === "" ? e.displayValue : {
-      labelName: c.displayName,
+    const a = (s = e.ancestors) == null ? void 0 : s.find((o) => o.level === e.level - 1), i = O.find((o) => o.level === e.level);
+    return e.level === 1 || p === "" ? e.displayValue : {
+      labelName: i.displayName,
       labelValue: a.displayName
     };
-  }, [R, m]), y = p((e) => ({
+  }, [O, p]), y = m((e) => ({
     id: e.value,
     name: e.displayValue,
     parent: u.id,
@@ -86,7 +86,7 @@ import '../styles/dynamic-loading-tree.css';const le = "_container_z81ug_1", se
       marker: e.marker,
       ancestors: e.ancestors
     }
-  }), [E]), x = p((e, a) => {
+  }), [E]), x = m((e, a) => {
     n({
       type: r.RESET,
       payload: {
@@ -101,26 +101,30 @@ import '../styles/dynamic-loading-tree.css';const le = "_container_z81ug_1", se
         marker: a
       }
     }), b(!1);
-  }, [n, b]), T = p(() => {
+  }, [n, b]), T = m(() => {
     n({
       type: r.LOAD_ERROR,
       payload: {
         id: u.id
       }
     }), b(!1), S(!0);
-  }, [n, b, S]);
+  }, [n, b, S]), J = m((e, a) => {
+    const i = new Set(e.map((t) => t.id));
+    return a.filter((t) => i.has(t));
+  }, []);
   j(() => {
+    const e = V(g);
     H({
-      nodes: k(g),
-      selectedIds: d
+      nodes: e,
+      selectedIds: J(e, c)
     });
-  }, [k, d, g, I]), j(() => {
+  }, [V, c, g, I]), j(() => {
     if (!L)
       return;
     const {
       signal: e
     } = new AbortController();
-    b(!0), S(!1), m ? (n({
+    b(!0), S(!1), p ? (n({
       type: r.RESET,
       payload: {
         id: u.id,
@@ -129,16 +133,16 @@ import '../styles/dynamic-loading-tree.css';const le = "_container_z81ug_1", se
     }), _({
       signal: e,
       marker: null,
-      searchInput: m,
+      searchInput: p,
       level: null,
       onlySelectableOptions: !1,
       ancestorId: null
     }).then((a) => {
-      const c = a.options.filter((t) => t.selectable).map((t) => {
+      const i = a.options.filter((t) => t.selectable).map((t) => {
         const {
           labelName: s,
           labelValue: o
-        } = V(t);
+        } = k(t);
         return {
           id: t.value,
           name: t.displayValue,
@@ -156,7 +160,7 @@ import '../styles/dynamic-loading-tree.css';const le = "_container_z81ug_1", se
           }
         };
       });
-      x(c, a.marker);
+      x(i, a.marker);
     }).catch(() => {
       T();
     })) : (n({
@@ -178,19 +182,19 @@ import '../styles/dynamic-loading-tree.css';const le = "_container_z81ug_1", se
       onlySelectableOptions: !1,
       ancestorId: null
     }).then((a) => {
-      const c = a.options.map(y);
-      x(c, a.marker);
+      const i = a.options.map(y);
+      x(i, a.marker);
     }).catch(() => {
       T();
     }));
-  }, [_, y, L, m, R, E, V, x, T]);
-  const J = p((e) => {
+  }, [_, y, L, p, O, E, k, x, T]);
+  const K = m((e) => {
     const {
       isExpanded: a,
-      isDisabled: c,
+      isDisabled: i,
       element: t
     } = e;
-    if (!a || c) {
+    if (!a || i) {
       n({
         type: r.RESET,
         payload: {
@@ -204,7 +208,7 @@ import '../styles/dynamic-loading-tree.css';const le = "_container_z81ug_1", se
       level: s
     } = t.metadata, {
       id: o,
-      marker: O
+      marker: N
     } = t, {
       signal: z
     } = new AbortController();
@@ -215,18 +219,18 @@ import '../styles/dynamic-loading-tree.css';const le = "_container_z81ug_1", se
       }
     }), _({
       signal: z,
-      marker: O,
+      marker: N,
       searchInput: "",
       level: s + 1,
       ancestorId: o,
       onlySelectableOptions: !1
     }).then((B) => {
-      const X = B.options.map((W) => (t.children.push(W.value), y(W)));
+      const Y = B.options.map((W) => (t.children.push(W.value), y(W)));
       n({
         type: r.LOAD_SUCCESS,
         payload: {
           id: o,
-          items: X,
+          items: Y,
           marker: B.marker
         }
       });
@@ -238,10 +242,10 @@ import '../styles/dynamic-loading-tree.css';const le = "_container_z81ug_1", se
         }
       });
     });
-  }, [_, y]), w = p((e) => {
+  }, [_, y]), w = m((e) => {
     I && (S(!1), b(!0));
     const a = g[e], {
-      level: c
+      level: i
     } = a.metadata, {
       id: t,
       marker: s
@@ -256,18 +260,18 @@ import '../styles/dynamic-loading-tree.css';const le = "_container_z81ug_1", se
     }), _({
       signal: o,
       marker: s,
-      searchInput: m,
-      level: m === "" ? c + 1 : null,
+      searchInput: p,
+      level: p === "" ? i + 1 : null,
       ancestorId: t !== u.id ? t.toString() : null,
       onlySelectableOptions: !1
-    }).then((O) => {
-      const z = O.options.map(y);
+    }).then((N) => {
+      const z = N.options.map(y);
       n({
         type: r.LOAD_SUCCESS,
         payload: {
           id: t,
           items: z,
-          marker: O.marker
+          marker: N.marker
         }
       }), b(!1);
     }).catch(() => {
@@ -279,34 +283,34 @@ import '../styles/dynamic-loading-tree.css';const le = "_container_z81ug_1", se
         }
       });
     });
-  }, [_, I, y, m, g]), K = h.nodes.length === 0 || h.nodes[0].children.length === 0 && h.nodes[0].id === u.id, Q = p((e) => {
+  }, [_, I, y, p, g]), Q = h.nodes.length === 0 || h.nodes[0].children.length === 0 && h.nodes[0].id === u.id, X = m((e) => {
     const {
       metadata: a
     } = e.element;
-    te(a) && f.includes(a.level) ? i(e) : (e.isSelected = !1, e.treeState.selectedIds.delete(e.element.id));
-  }, [f, i]);
-  return I ? /* @__PURE__ */ v(Z, {
+    ae(a) && f.includes(a.level) ? d(e) : (e.isSelected = !1, e.treeState.selectedIds.delete(e.element.id));
+  }, [f, d]);
+  return I ? /* @__PURE__ */ v($, {
     onReload: () => {
       w("root");
     }
-  }) : /* @__PURE__ */ ne("div", {
-    children: [N && /* @__PURE__ */ v("div", {
+  }) : /* @__PURE__ */ le("div", {
+    children: [R && /* @__PURE__ */ v("div", {
       className: C.noResultOption,
-      children: /* @__PURE__ */ v(Y, {
+      children: /* @__PURE__ */ v(Z, {
         "aria-label": q,
         className: C.loadingIndicator
       })
-    }), K && !N ? /* @__PURE__ */ v("div", {
+    }), Q && !R ? /* @__PURE__ */ v("div", {
       className: C.noResultOption,
       children: U
-    }) : !N && /* @__PURE__ */ v($, {
+    }) : !R && /* @__PURE__ */ v(F, {
       ref: G,
       "aria-label": l,
       data: h.nodes,
       multiSelect: M,
-      onExpand: J,
+      onExpand: K,
       onLoadData: w,
-      onNodeSelect: Q,
+      onNodeSelect: X,
       selectedIds: h.selectedIds,
       size: "large",
       togglableSelect: !0
@@ -314,6 +318,6 @@ import '../styles/dynamic-loading-tree.css';const le = "_container_z81ug_1", se
   });
 });
 export {
-  Le as D,
+  Ve as D,
   C as s
 };

package/dist/i18n/en-x-pseudo.js

@@ -1,10 +1,10 @@
 export default {
-  "comboboxWithApi.apiError": "⟦萬萬萬萬萬萬萬萬萬萬萬萬 Ċøùľďň'ţ ĺŏåď ŕёśŭľţŝ. Çĺĭ¢к ťо ťгỳ ăġăιή. 國國國國國國國國國國國國⟧",
-  "comboboxWithApiPagination.clearButtonAriaLabel": "⟦萬萬萬萬萬萬萬 Çĺěåř ĩпΡůŧ âлď ŝёľėčťĩοл 國國國國國國國⟧",
-  "comboboxWithApiPagination.errorAction": "⟦萬 Ŕéľоâď 國⟧",
-  "comboboxWithApiPagination.errorIconLabel": "⟦萬 Ėѓŗοґ 國⟧",
-  "comboboxWithApiPagination.errorMessage": "⟦萬萬萬萬萬萬 ₣ăįļєď ţô ĺôáď õΡţїŏйѕ 國國國國國國⟧",
-  "comboboxWithApiPagination.loadingAriaLabel": "⟦萬萬 Ĺőâďīńğ... 國國⟧",
-  "comboboxWithApiPagination.loadingMoreAriaLabel": "⟦萬萬萬萬 Ĺòäďĭňğ mõѓê... 國國國國⟧",
-  "comboboxWithApiPagination.noResults": "⟦萬萬萬萬 Иό ґęśüľŧş ƒóµиď 國國國國⟧"
+  "comboboxWithApi.apiError": "⟦萬萬萬萬萬萬萬萬萬萬萬萬 Čοùĺďй'ţ ļóāď яěŝúľţś. Ćĺìċķ ťό ťŗỳ äĝαĩή. 國國國國國國國國國國國國⟧",
+  "comboboxWithApiPagination.clearButtonAriaLabel": "⟦萬萬萬萬萬萬萬 Ċĺєăŕ ìŋΡųŧ āņď şèĺè¢τíòη 國國國國國國國⟧",
+  "comboboxWithApiPagination.errorAction": "⟦萬 Яëĺóâď 國⟧",
+  "comboboxWithApiPagination.errorIconLabel": "⟦萬 Ěřяôя 國⟧",
+  "comboboxWithApiPagination.errorMessage": "⟦萬萬萬萬萬萬 ₣äιľёď τŏ ĺóąď óΡŧιόпѕ 國國國國國國⟧",
+  "comboboxWithApiPagination.loadingAriaLabel": "⟦萬萬 Ĺоãďìňğ... 國國⟧",
+  "comboboxWithApiPagination.loadingMoreAriaLabel": "⟦萬萬萬萬 Ŀοäďĩйġ mőřę... 國國國國⟧",
+  "comboboxWithApiPagination.noResults": "⟦萬萬萬萬 Ňσ ґєşūľŧѕ ƒòųлď 國國國國⟧"
 }

package/dist/i18n/en-x-pseudo.properties

@@ -1,16 +1,16 @@
 # Error message displayed as combobox item when an API failed and the suggestions could not load
-comboboxWithApi.apiError = ⟦萬萬萬萬萬萬萬萬萬萬萬萬 Ċøùľďň'ţ ĺŏåď ŕёśŭľţŝ. Çĺĭ¢к ťо ťгỳ ăġăιή. 國國國國國國國國國國國國⟧
+comboboxWithApi.apiError = ⟦萬萬萬萬萬萬萬萬萬萬萬萬 Čοùĺďй'ţ ļóāď яěŝúľţś. Ćĺìċķ ťό ťŗỳ äĝαĩή. 國國國國國國國國國國國國⟧
 # Aria label for the clear button visible at the end of the combobox. When clicked, it will clear all text in the input, as well as the current selection.
-comboboxWithApiPagination.clearButtonAriaLabel = ⟦萬萬萬萬萬萬萬 Çĺěåř ĩпΡůŧ âлď ŝёľėčťĩοл 國國國國國國國⟧
+comboboxWithApiPagination.clearButtonAriaLabel = ⟦萬萬萬萬萬萬萬 Ċĺєăŕ ìŋΡųŧ āņď şèĺè¢τíòη 國國國國國國國⟧
 # Error message displayed resembling button that calls to action to reload the results
-comboboxWithApiPagination.errorAction = ⟦萬 Ŕéľоâď 國⟧
+comboboxWithApiPagination.errorAction = ⟦萬 Яëĺóâď 國⟧
 # Aria-label text for the error icon in the loading results error message
-comboboxWithApiPagination.errorIconLabel = ⟦萬 Ėѓŗοґ 國⟧
+comboboxWithApiPagination.errorIconLabel = ⟦萬 Ěřяôя 國⟧
 # Error message displayed as inline notice that informs the user that the options failed to load
-comboboxWithApiPagination.errorMessage = ⟦萬萬萬萬萬萬 ₣ăįļєď ţô ĺôáď õΡţїŏйѕ 國國國國國國⟧
+comboboxWithApiPagination.errorMessage = ⟦萬萬萬萬萬萬 ₣äιľёď τŏ ĺóąď óΡŧιόпѕ 國國國國國國⟧
 # Visually hidden aria-label text for the loading spinner
-comboboxWithApiPagination.loadingAriaLabel = ⟦萬萬 Ĺőâďīńğ... 國國⟧
+comboboxWithApiPagination.loadingAriaLabel = ⟦萬萬 Ĺоãďìňğ... 國國⟧
 # Visually hidden aria-label text for the loading spinner show when loading more results from infinite scrolling list
-comboboxWithApiPagination.loadingMoreAriaLabel = ⟦萬萬萬萬 Ĺòäďĭňğ mõѓê... 國國國國⟧
+comboboxWithApiPagination.loadingMoreAriaLabel = ⟦萬萬萬萬 Ŀοäďĩйġ mőřę... 國國國國⟧
 # Message displayed when no results are found in the combobox
-comboboxWithApiPagination.noResults = ⟦萬萬萬萬 Иό ґęśüľŧş ƒóµиď 國國國國⟧
+comboboxWithApiPagination.noResults = ⟦萬萬萬萬 Ňσ ґєşūľŧѕ ƒòųлď 國國國國⟧

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/combobox-with-api",
-    "version": "0.44.20",
+    "version": "0.45.0",
     "peerDependencies": {
         "@ariakit/react": "0.4.15",
         "@box/blueprint-web": "^10.3.1",
@@ -11,11 +11,11 @@
         "react-intl": "^6.4.2"
     },
     "dependencies": {
-        "@box/tree": "^0.50.10",
+        "@box/tree": "^0.51.0",
         "react-accessible-treeview": "2.9.0"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^12.15.0",
+        "@box/blueprint-web": "^12.16.0",
         "@box/blueprint-web-assets": "^4.54.0",
         "@box/storybook-utils": "^0.13.7",
         "react": "^18.3.0",