@box/combobox-with-api 0.38.5 → 0.38.8

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/combobox-with-api",
-    "version": "0.38.5",
+    "version": "0.38.8",
     "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.48.5",
+        "@box/tree": "^0.48.7",
         "react-accessible-treeview": "2.9.0"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^12.1.2",
+        "@box/blueprint-web": "^12.1.3",
         "@box/blueprint-web-assets": "^4.46.0",
         "@box/storybook-utils": "^0.12.5",
         "react": "^18.3.0",