@box/combobox-with-api 1.15.9 → 1.17.0

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

@@ -1,82 +1,73 @@
 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 ae, useCallback as p, useEffect as M } from "react";
+import { forwardRef as P, useReducer as ee, useState as A, useMemo as ae, useCallback as u, useEffect as U } from "react";
 import { RootTreeNode as m, hasValidLevel as te, getServiceNode as D } from "../esm/lib/components/combobox-with-api-tree-view/tree-utils.js";
-import { t as le, i as oe, A as r } from "./treeReducer.js";
+import { t as le, i as se, A as o } from "./treeReducer.js";
 import { jsx as f, jsxs as ne } from "react/jsx-runtime";
-import '../styles/dynamic-loading-tree.css';const se = "_container_1wa8l_2", re = "_disabled_1wa8l_13", ie = "_label_1wa8l_16", de = "_hiddenLabel_1wa8l_28", ce = "_comboboxContainer_1wa8l_31", me = "_withComboboxButtons_1wa8l_47", pe = "_error_1wa8l_55", _e = "_textInputWrapper_1wa8l_63", ue = "_textInput_1wa8l_63", be = "_errorIcon_1wa8l_85", ye = "_comboboxButtons_1wa8l_88", he = "_withChips_1wa8l_95", ve = "_inlineError_1wa8l_105", fe = "_popover_1wa8l_109", Ie = "_option_1wa8l_135", we = "_indicator_1wa8l_158", ge = "_indicatorIcon_1wa8l_167", Se = "_optionWithIndicator_1wa8l_170", Ee = "_loadingIndicator_1wa8l_173", Ne = "_noResultOption_1wa8l_176", C = {
-  container: se,
-  disabled: re,
-  label: ie,
+import '../styles/dynamic-loading-tree.css';const oe = "_container_1wa8l_2", re = "_label_1wa8l_16", de = "_hiddenLabel_1wa8l_28", ie = "_comboboxContainer_1wa8l_31", ce = "_withComboboxButtons_1wa8l_47", me = "_textInputWrapper_1wa8l_63", ue = "_textInput_1wa8l_63", pe = "_comboboxButtons_1wa8l_88", be = "_withChips_1wa8l_95", ye = "_popover_1wa8l_109", _e = "_loadingIndicator_1wa8l_173", he = "_noResultOption_1wa8l_176", C = {
+  container: oe,
+  label: re,
   hiddenLabel: de,
-  comboboxContainer: ce,
-  withComboboxButtons: me,
-  error: pe,
-  textInputWrapper: _e,
+  comboboxContainer: ie,
+  withComboboxButtons: ce,
+  textInputWrapper: me,
   textInput: ue,
-  errorIcon: be,
-  comboboxButtons: ye,
-  withChips: he,
-  inlineError: ve,
-  popover: fe,
-  option: Ie,
-  indicator: we,
-  indicatorIcon: ge,
-  optionWithIndicator: Se,
-  loadingIndicator: Ee,
-  noResultOption: Ne
-}, Oe = (n) => {
-  const d = [...n.children], {
+  comboboxButtons: pe,
+  withChips: be,
+  popover: ye,
+  loadingIndicator: _e,
+  noResultOption: he
+}, ve = (s) => {
+  const i = [...s.children], {
     metadata: c
-  } = n;
+  } = s;
   return {
-    ...n,
-    children: d,
+    ...s,
+    children: i,
     metadata: {
-      ...n.metadata,
+      ...s.metadata,
       variant: c.variant,
-      isLoading: n.status === "loading" && !n.children.length,
+      isLoading: s.status === "loading" && !s.children.length,
       labelName: c.labelName || "",
       labelValue: c.labelValue || ""
     }
   };
-}, Re = (n, d) => {
+}, fe = (s, i) => {
   let c;
-  return n.children.length && n.status === "loading" && (c = D(d.id, d.metadata.displayValue, "loading")), n.status === "error" && (c = D(d.id, d.metadata.displayValue, "reload")), n.status === "success" && n.marker && (c = D(d.id, d.metadata.displayValue, "loadMore")), c;
-}, Ve = /* @__PURE__ */ P(({
-  ariaLabel: n,
-  onSelect: d,
+  return s.children.length && s.status === "loading" && (c = D(i.id, i.metadata.displayValue, "loading")), s.status === "error" && (c = D(i.id, i.metadata.displayValue, "reload")), s.status === "success" && s.marker && (c = D(i.id, i.metadata.displayValue, "loadMore")), c;
+}, Ie = /* @__PURE__ */ P(({
+  ariaLabel: s,
+  onSelect: i,
   selectedNodes: c,
-  defaultFetcher: u,
-  levels: N,
-  selectableLevels: I,
-  multiselect: U,
+  defaultFetcher: b,
+  levels: w,
+  selectableLevels: g,
+  multiselect: W,
   open: L,
-  searchInput: _,
+  searchInput: p,
   noResultMessage: z,
   loadingAriaLabel: q
 }, G) => {
-  const [y, o] = ee(le, oe), [v, H] = A({
+  const [_, l] = ee(le, se), [v, H] = A({
     nodes: [],
     selectedIds: []
-  }), [O, b] = A(!1), [w, g] = A(!1), S = ae(() => Math.max(...I), [I]), V = p((e = y) => {
+  }), [I, y] = A(!1), [S, N] = A(!1), O = ae(() => Math.max(...g), [g]), V = u((e = _) => {
     const t = [];
     return [...Object.values(e).map((a) => {
-      const s = Oe(a), l = Re(a, s);
-      return l && (t.push(l), s.children.push(l.id)), s;
+      const n = ve(a), d = fe(a, n);
+      return d && (t.push(d), n.children.push(d.id)), n;
     }), ...t];
-  }, [y]), k = p((e) => {
-    var s;
-    const t = (s = e.ancestors) == null ? void 0 : s.find((l) => l.level === e.level - 1), i = N.find((l) => l.level === e.level);
-    return e.level === 1 || _ === "" ? e.displayValue : {
-      labelName: i.displayName,
+  }, [_]), k = u((e) => {
+    const t = e.ancestors?.find((n) => n.level === e.level - 1), r = w.find((n) => n.level === e.level);
+    return e.level === 1 || p === "" ? e.displayValue : {
+      labelName: r.displayName,
       labelValue: t.displayName
     };
-  }, [N, _]), h = p((e) => ({
+  }, [w, p]), h = u((e) => ({
     id: e.value,
     name: e.displayValue,
     parent: m.id,
-    isBranch: e.level !== S,
+    isBranch: e.level !== O,
     children: [],
     metadata: {
       variant: "content",
@@ -86,68 +77,68 @@ import '../styles/dynamic-loading-tree.css';const se = "_container_1wa8l_2", re
       marker: e.marker,
       ancestors: e.ancestors
     }
-  }), [S]), R = p((e, t) => {
-    o({
-      type: r.RESET,
+  }), [O]), x = u((e, t) => {
+    l({
+      type: o.RESET,
       payload: {
         id: m.id,
         items: []
       }
-    }), o({
-      type: r.LOAD_SUCCESS,
+    }), l({
+      type: o.LOAD_SUCCESS,
       payload: {
         id: m.id,
         items: e,
         marker: t
       }
-    }), b(!1);
-  }, [o, b]), x = p(() => {
-    o({
-      type: r.LOAD_ERROR,
+    }), y(!1);
+  }, [l, y]), E = u(() => {
+    l({
+      type: o.LOAD_ERROR,
       payload: {
         id: m.id
       }
-    }), b(!1), g(!0);
-  }, [o, b, g]), J = p((e, t) => {
-    const i = new Set(e.map((a) => a.id));
-    return t.filter((a) => i.has(a));
+    }), y(!1), N(!0);
+  }, [l, y, N]), J = u((e, t) => {
+    const r = new Set(e.map((a) => a.id));
+    return t.filter((a) => r.has(a));
   }, []);
-  M(() => {
-    const e = V(y);
+  U(() => {
+    const e = V(_);
     H({
       nodes: e,
       selectedIds: J(e, c)
     });
-  }, [V, c, y, w]), M(() => {
+  }, [V, c, _, S]), U(() => {
     if (!L)
       return;
     const {
       signal: e
     } = new AbortController();
-    b(!0), g(!1), _ ? (o({
-      type: r.RESET,
+    y(!0), N(!1), p ? (l({
+      type: o.RESET,
       payload: {
         id: m.id,
         items: []
       }
-    }), u({
+    }), b({
       signal: e,
       marker: null,
-      searchInput: _,
+      searchInput: p,
       level: null,
       onlySelectableOptions: !1,
       ancestorId: null
     }).then((t) => {
-      const i = t.options.filter((a) => a.selectable).map((a) => {
+      const r = t.options.filter((a) => a.selectable).map((a) => {
         const {
-          labelName: s,
-          labelValue: l
+          labelName: n,
+          labelValue: d
         } = k(a);
         return {
           id: a.value,
           name: a.displayValue,
           parent: m.id,
-          isBranch: a.level < S,
+          isBranch: a.level < O,
           children: [],
           metadata: {
             variant: a.level === 1 ? "content" : "labeled",
@@ -155,26 +146,26 @@ import '../styles/dynamic-loading-tree.css';const se = "_container_1wa8l_2", re
             level: a.level,
             selectable: a.selectable,
             ancestors: a.ancestors,
-            labelName: s,
-            labelValue: l
+            labelName: n,
+            labelValue: d
           }
         };
       });
-      R(i, t.marker);
+      x(r, t.marker);
     }).catch(() => {
-      x();
-    })) : (o({
-      type: r.RESET,
+      E();
+    })) : (l({
+      type: o.RESET,
       payload: {
         id: m.id,
         items: []
       }
-    }), o({
-      type: r.LOAD_DATA,
+    }), l({
+      type: o.LOAD_DATA,
       payload: {
         id: m.id
       }
-    }), u({
+    }), b({
       signal: e,
       marker: null,
       searchInput: "",
@@ -182,21 +173,21 @@ import '../styles/dynamic-loading-tree.css';const se = "_container_1wa8l_2", re
       onlySelectableOptions: !1,
       ancestorId: null
     }).then((t) => {
-      const i = t.options.map(h);
-      R(i, t.marker);
+      const r = t.options.map(h);
+      x(r, t.marker);
     }).catch(() => {
-      x();
+      E();
     }));
-  }, [u, h, L, _, N, S, k, R, x]);
-  const K = p((e) => {
+  }, [b, h, L, p, w, O, k, x, E]);
+  const K = u((e) => {
     const {
       isExpanded: t,
-      isDisabled: i,
+      isDisabled: r,
       element: a
     } = e;
-    if (!t || i) {
-      o({
-        type: r.RESET,
+    if (!t || r) {
+      l({
+        type: o.RESET,
         payload: {
           id: a.id,
           items: []
@@ -205,109 +196,109 @@ import '../styles/dynamic-loading-tree.css';const se = "_container_1wa8l_2", re
       return;
     }
     const {
-      level: s
+      level: n
     } = a.metadata, {
-      id: l,
-      marker: E
+      id: d,
+      marker: R
     } = a, {
       signal: T
     } = new AbortController();
-    o({
-      type: r.LOAD_DATA,
+    l({
+      type: o.LOAD_DATA,
       payload: {
-        id: l
+        id: d
       }
-    }), u({
+    }), b({
       signal: T,
-      marker: E,
+      marker: R,
       searchInput: "",
-      level: s + 1,
-      ancestorId: l,
+      level: n + 1,
+      ancestorId: d,
       onlySelectableOptions: !1
-    }).then((W) => {
-      const Y = W.options.map((j) => (a.children.push(j.value), h(j)));
-      o({
-        type: r.LOAD_SUCCESS,
+    }).then((j) => {
+      const Y = j.options.map((M) => (a.children.push(M.value), h(M)));
+      l({
+        type: o.LOAD_SUCCESS,
         payload: {
-          id: l,
+          id: d,
           items: Y,
-          marker: W.marker
+          marker: j.marker
         }
       });
     }).catch(() => {
-      o({
-        type: r.LOAD_ERROR,
+      l({
+        type: o.LOAD_ERROR,
         payload: {
-          id: l
+          id: d
         }
       });
     });
-  }, [u, h]), B = p((e) => {
-    w && (g(!1), b(!0));
-    const t = y[e], {
-      level: i
+  }, [b, h]), B = u((e) => {
+    S && (N(!1), y(!0));
+    const t = _[e], {
+      level: r
     } = t.metadata, {
       id: a,
-      marker: s
+      marker: n
     } = t, {
-      signal: l
+      signal: d
     } = new AbortController();
-    o({
-      type: r.LOAD_DATA,
+    l({
+      type: o.LOAD_DATA,
       payload: {
         id: a
       }
-    }), u({
-      signal: l,
-      marker: s,
-      searchInput: _,
-      level: _ === "" ? i + 1 : null,
+    }), b({
+      signal: d,
+      marker: n,
+      searchInput: p,
+      level: p === "" ? r + 1 : null,
       ancestorId: a !== m.id ? a.toString() : null,
       onlySelectableOptions: !1
-    }).then((E) => {
-      const T = E.options.map(h);
-      o({
-        type: r.LOAD_SUCCESS,
+    }).then((R) => {
+      const T = R.options.map(h);
+      l({
+        type: o.LOAD_SUCCESS,
         payload: {
           id: a,
           items: T,
-          marker: E.marker
+          marker: R.marker
         }
-      }), b(!1);
+      }), y(!1);
     }).catch(() => {
-      o({
-        type: r.LOAD_ERROR,
+      l({
+        type: o.LOAD_ERROR,
         payload: {
           id: a,
-          marker: s
+          marker: n
         }
       });
     });
-  }, [u, w, h, _, y]), Q = v.nodes.length === 0 || v.nodes[0].children.length === 0 && v.nodes[0].id === m.id, X = p((e) => {
+  }, [b, S, h, p, _]), Q = v.nodes.length === 0 || v.nodes[0].children.length === 0 && v.nodes[0].id === m.id, X = u((e) => {
     const {
       metadata: t
     } = e.element;
-    te(t) && I.includes(t.level) ? d(e) : (e.isSelected = !1, e.treeState.selectedIds.delete(e.element.id));
-  }, [I, d]);
-  return w ? /* @__PURE__ */ f($, {
+    te(t) && g.includes(t.level) ? i(e) : (e.isSelected = !1, e.treeState.selectedIds.delete(e.element.id));
+  }, [g, i]);
+  return S ? /* @__PURE__ */ f($, {
     onReload: () => {
       B("root");
     }
   }) : /* @__PURE__ */ ne("div", {
-    children: [O && /* @__PURE__ */ f("div", {
+    children: [I && /* @__PURE__ */ f("div", {
       className: C.noResultOption,
       children: /* @__PURE__ */ f(Z, {
         "aria-label": q,
         className: C.loadingIndicator
       })
-    }), Q && !O ? /* @__PURE__ */ f("div", {
+    }), Q && !I ? /* @__PURE__ */ f("div", {
       className: C.noResultOption,
       children: z
-    }) : !O && /* @__PURE__ */ f(F, {
+    }) : !I && /* @__PURE__ */ f(F, {
       ref: G,
-      "aria-label": n,
+      "aria-label": s,
       data: v.nodes,
-      multiSelect: U,
+      multiSelect: W,
       onExpand: K,
       onLoadData: B,
       onNodeSelect: X,
@@ -318,6 +309,6 @@ import '../styles/dynamic-loading-tree.css';const se = "_container_1wa8l_2", re
   });
 });
 export {
-  Ve as D,
+  Ie as D,
   C as s
 };

package/dist/chunks/treeReducer.js

@@ -1,7 +1,7 @@
 import { RootTreeNode as n } from "../esm/lib/components/combobox-with-api-tree-view/tree-utils.js";
-let s = /* @__PURE__ */ function(r) {
+let s = /* @__PURE__ */ (function(r) {
   return r.LOAD_DATA = "LOAD_DATA", r.LOAD_ERROR = "LOAD_DATA_ERROR", r.LOAD_SUCCESS = "LOAD_DATA_SUCCESS", r.LOAD_MORE = "LOAD_DATA_SUCCESS", r.RESET = "RESET", r;
-}({});
+})({});
 const R = (r, A) => {
   const {
     id: e,

package/dist/esm/lib/components/combobox-with-api/combobox-with-api-container.js

@@ -1,51 +1,51 @@
-import { useState as s, useMemo as d, useCallback as Q, useEffect as T } from "react";
+import { useState as o, useMemo as y, useCallback as Q, useEffect as T } from "react";
 import w from "lodash/debounce";
 import { ComboboxWithApi as D } from "./combobox-with-api.js";
 import { jsx as W } from "react/jsx-runtime";
-const j = "AbortError", _ = (E) => {
+const j = "AbortError", _ = (b) => {
   const {
     debounceTime: u = 250,
-    defaultOptions: n,
-    fetcher: f,
-    includeTextInputOption: m = !1,
-    onInputValueChange: i,
-    ...O
-  } = E, [p, h] = s(!1), [x, g] = s(!1), [A, y] = s(!1), [e, C] = s(""), [b, a] = s([]), c = d(() => w(C, u), [u]), I = (o) => {
-    c(o), i == null || i(o);
-  }, l = Q(async (o) => {
-    const r = o.trim();
-    if (r) {
-      g(!1), h(!0);
+    defaultOptions: r,
+    fetcher: l,
+    includeTextInputOption: f = !1,
+    onInputValueChange: O,
+    ...C
+  } = b, [p, m] = o(!1), [I, h] = o(!1), [E, g] = o(!1), [e, x] = o(""), [d, a] = o([]), i = y(() => w(x, u), [u]), A = (n) => {
+    i(n), O?.(n);
+  }, c = Q(async (n) => {
+    const s = n.trim();
+    if (s) {
+      h(!1), m(!0);
       try {
-        const t = await f(r);
-        if ((t.length > 0 ? typeof t[0] == "string" : !0) && m) {
-          const V = r.toLocaleLowerCase();
-          a([V, ...t]);
+        const t = await l(s);
+        if ((t.length > 0 ? typeof t[0] == "string" : !0) && f) {
+          const S = s.toLocaleLowerCase();
+          a([S, ...t]);
         } else
-          y((t == null ? void 0 : t.length) === 0), a(t);
+          g(t?.length === 0), a(t);
       } catch (t) {
-        (t == null ? void 0 : t.name) !== j && g(!0);
+        t?.name !== j && h(!0);
       } finally {
-        h(!1);
+        m(!1);
       }
     }
-  }, [f, m]), L = () => {
-    l(e);
+  }, [l, f]), V = () => {
+    c(e);
   };
-  T(() => (e.trim().length ? l(e) : (a([]), y(!1)), () => c.cancel()), [c, l, e]);
-  const S = d(() => {
-    const o = e.trim().length > 0;
-    return (n == null ? void 0 : n.length) > 0 && !o ? n : b;
-  }, [e, n, b]);
+  T(() => (e.trim().length ? c(e) : (a([]), g(!1)), () => i.cancel()), [i, c, e]);
+  const L = y(() => {
+    const n = e.trim().length > 0;
+    return r?.length > 0 && !n ? r : d;
+  }, [e, r, d]);
   return /* @__PURE__ */ W(D, {
-    ...O,
-    isEmpty: A,
-    isError: x,
+    ...C,
+    isEmpty: E,
+    isError: I,
     isLoading: p,
     loading: p,
-    onInputValueChange: I,
-    onTryAgain: L,
-    options: S
+    onInputValueChange: A,
+    onTryAgain: V,
+    options: L
   });
 };
 export {