@box/combobox-with-api 1.23.7 → 1.23.8

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

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

package/package.json

@@ -1,23 +1,23 @@
 {
     "name": "@box/combobox-with-api",
-    "version": "1.23.7",
+    "version": "1.23.8",
     "peerDependencies": {
         "@ariakit/react": "0.4.15",
-        "@box/blueprint-web": "^12.115.1",
-        "@box/blueprint-web-assets": "^4.92.0",
+        "@box/blueprint-web": "^12.115.2",
+        "@box/blueprint-web-assets": "^4.93.0",
         "lodash": "^4.17.15",
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0",
         "react-intl": "^6.4.2"
     },
     "dependencies": {
-        "@box/tree": "^1.21.7",
+        "@box/tree": "^1.21.8",
         "react-accessible-treeview": "2.9.0"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^12.115.1",
-        "@box/blueprint-web-assets": "^4.92.0",
-        "@box/storybook-utils": "^0.15.7",
+        "@box/blueprint-web": "^12.115.2",
+        "@box/blueprint-web-assets": "^4.93.0",
+        "@box/storybook-utils": "^0.15.8",
         "react": "^18.3.0",
         "react-dom": "^18.3.0"
     },