@box/combobox-with-api 0.44.4 → 0.44.8

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

@@ -1,313 +1,319 @@
-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,
+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,
+  noResultOption: Oe
+}, Re = (l) => {
+  const i = [...l.children], {
+    metadata: d
+  } = l;
+  return {
+    ...l,
+    children: i,
+    metadata: {
+      ...l.metadata,
+      variant: d.variant,
+      isLoading: l.status === "loading" && !l.children.length,
+      labelName: d.labelName || "",
+      labelValue: d.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(({
+  ariaLabel: l,
+  onSelect: i,
+  selectedNodes: d,
+  defaultFetcher: _,
+  levels: R,
+  selectableLevels: f,
   multiselect: M,
-  open: A,
-  searchInput: u,
+  open: L,
+  searchInput: m,
   noResultMessage: U,
   loadingAriaLabel: q
-}) => {
-  const [b, n] = $(ee, ae), [y, G] = O({
+}, G) => {
+  const [g, n] = P(ae, oe), [h, H] = A({
     nodes: [],
     selectedIds: []
-  }), [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: o
-      } = e, l = {
-        ...e,
-        children: r,
-        metadata: {
-          ...e.metadata,
-          variant: o.variant,
-          isLoading: e.status === "loading" && !e.children.length,
-          labelName: o.labelName || "",
-          labelValue: o.labelValue || ""
-        }
-      };
-      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];
-  }, [b]), C = p((a) => {
-    var r;
-    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: i.displayName,
-      labelValue: t.displayName
+  }), [N, b] = A(!1), [I, S] = A(!1), E = ee(() => Math.max(...f), [f]), k = p((e = g) => {
+    const a = [];
+    return [...Object.values(e).map((t) => {
+      const s = Re(t), o = Ne(t, s);
+      return o && (a.push(o), s.children.push(o.id)), s;
+    }), ...a];
+  }, [g]), V = p((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,
+      labelValue: a.displayName
     };
-  }, [S, u]), g = p((a) => ({
-    id: a.value,
-    name: a.displayValue,
-    parent: c.id,
-    isBranch: a.level !== f,
+  }, [R, m]), y = p((e) => ({
+    id: e.value,
+    name: e.displayValue,
+    parent: u.id,
+    isBranch: e.level !== E,
     children: [],
     metadata: {
       variant: "content",
-      displayValue: a.displayValue,
-      level: a.level,
-      selectable: a.selectable,
-      marker: a.marker,
-      ancestors: a.ancestors
+      displayValue: e.displayValue,
+      level: e.level,
+      selectable: e.selectable,
+      marker: e.marker,
+      ancestors: e.ancestors
     }
-  }), [f]), L = p((a, t) => {
+  }), [E]), x = p((e, a) => {
     n({
-      type: s.RESET,
+      type: r.RESET,
       payload: {
-        id: c.id,
+        id: u.id,
         items: []
       }
     }), n({
-      type: s.LOAD_SUCCESS,
+      type: r.LOAD_SUCCESS,
       payload: {
-        id: c.id,
-        items: a,
-        marker: t
+        id: u.id,
+        items: e,
+        marker: a
       }
-    }), _(!1);
-  }, [n, _]), k = p(() => {
+    }), b(!1);
+  }, [n, b]), T = p(() => {
     n({
-      type: s.LOAD_ERROR,
+      type: r.LOAD_ERROR,
       payload: {
-        id: c.id
+        id: u.id
       }
-    }), _(!1), I(!0);
-  }, [n, _, I]);
-  W(() => {
-    G({
-      nodes: D(b),
-      selectedIds: T
+    }), b(!1), S(!0);
+  }, [n, b, S]);
+  j(() => {
+    H({
+      nodes: k(g),
+      selectedIds: d
     });
-  }, [D, T, b, N]), W(() => {
-    if (!A)
+  }, [k, d, g, I]), j(() => {
+    if (!L)
       return;
     const {
-      signal: a
+      signal: e
     } = new AbortController();
-    _(!0), I(!1), u ? (n({
-      type: s.RESET,
+    b(!0), S(!1), m ? (n({
+      type: r.RESET,
       payload: {
-        id: c.id,
+        id: u.id,
         items: []
       }
-    }), m({
-      signal: a,
+    }), _({
+      signal: e,
       marker: null,
-      searchInput: u,
+      searchInput: m,
       level: null,
       onlySelectableOptions: !1,
       ancestorId: null
-    }).then((t) => {
-      const i = t.options.filter((e) => e.selectable).map((e) => {
+    }).then((a) => {
+      const c = a.options.filter((t) => t.selectable).map((t) => {
         const {
-          labelName: r,
+          labelName: s,
           labelValue: o
-        } = C(e);
+        } = V(t);
         return {
-          id: e.value,
-          name: e.displayValue,
-          parent: c.id,
-          isBranch: e.level < f,
+          id: t.value,
+          name: t.displayValue,
+          parent: u.id,
+          isBranch: t.level < E,
           children: [],
           metadata: {
-            variant: e.level === 1 ? "content" : "labeled",
-            displayValue: e.displayValue,
-            level: e.level,
-            selectable: e.selectable,
-            ancestors: e.ancestors,
-            labelName: r,
+            variant: t.level === 1 ? "content" : "labeled",
+            displayValue: t.displayValue,
+            level: t.level,
+            selectable: t.selectable,
+            ancestors: t.ancestors,
+            labelName: s,
             labelValue: o
           }
         };
       });
-      L(i, t.marker);
+      x(c, a.marker);
     }).catch(() => {
-      k();
+      T();
     })) : (n({
-      type: s.RESET,
+      type: r.RESET,
       payload: {
-        id: c.id,
+        id: u.id,
         items: []
       }
     }), n({
-      type: s.LOAD_DATA,
+      type: r.LOAD_DATA,
       payload: {
-        id: c.id
+        id: u.id
       }
-    }), m({
-      signal: a,
+    }), _({
+      signal: e,
       marker: null,
       searchInput: "",
       level: 1,
       onlySelectableOptions: !1,
       ancestorId: null
-    }).then((t) => {
-      const i = t.options.map(g);
-      L(i, t.marker);
+    }).then((a) => {
+      const c = a.options.map(y);
+      x(c, a.marker);
     }).catch(() => {
-      k();
+      T();
     }));
-  }, [m, g, A, u, S, f, C]);
-  const H = p((a) => {
+  }, [_, y, L, m, R, E, V, x, T]);
+  const J = p((e) => {
     const {
-      isExpanded: t,
-      isDisabled: i,
-      element: e
-    } = a;
-    if (!t || i) {
+      isExpanded: a,
+      isDisabled: c,
+      element: t
+    } = e;
+    if (!a || c) {
       n({
-        type: s.RESET,
+        type: r.RESET,
         payload: {
-          id: e.id,
+          id: t.id,
           items: []
         }
       });
       return;
     }
     const {
-      level: r
-    } = e.metadata, {
+      level: s
+    } = t.metadata, {
       id: o,
-      marker: l
-    } = e, {
-      signal: d
+      marker: O
+    } = t, {
+      signal: z
     } = new AbortController();
     n({
-      type: s.LOAD_DATA,
+      type: r.LOAD_DATA,
       payload: {
         id: o
       }
-    }), m({
-      signal: d,
-      marker: l,
+    }), _({
+      signal: z,
+      marker: O,
       searchInput: "",
-      level: r + 1,
+      level: s + 1,
       ancestorId: o,
       onlySelectableOptions: !1
-    }).then((w) => {
-      const Q = w.options.map((B) => (e.children.push(B.value), g(B)));
+    }).then((B) => {
+      const X = B.options.map((W) => (t.children.push(W.value), y(W)));
       n({
-        type: s.LOAD_SUCCESS,
+        type: r.LOAD_SUCCESS,
         payload: {
           id: o,
-          items: Q,
-          marker: w.marker
+          items: X,
+          marker: B.marker
         }
       });
     }).catch(() => {
       n({
-        type: s.LOAD_ERROR,
+        type: r.LOAD_ERROR,
         payload: {
           id: o
         }
       });
     });
-  }, [m, g]), V = p((a) => {
-    N && (I(!1), _(!0));
-    const t = b[a], {
-      level: i
-    } = t.metadata, {
-      id: e,
-      marker: r
-    } = t, {
+  }, [_, y]), w = p((e) => {
+    I && (S(!1), b(!0));
+    const a = g[e], {
+      level: c
+    } = a.metadata, {
+      id: t,
+      marker: s
+    } = a, {
       signal: o
     } = new AbortController();
     n({
-      type: s.LOAD_DATA,
+      type: r.LOAD_DATA,
       payload: {
-        id: e
+        id: t
       }
-    }), m({
+    }), _({
       signal: o,
-      marker: r,
-      searchInput: u,
-      level: u === "" ? i + 1 : null,
-      ancestorId: e !== c.id ? e.toString() : null,
+      marker: s,
+      searchInput: m,
+      level: m === "" ? c + 1 : null,
+      ancestorId: t !== u.id ? t.toString() : null,
       onlySelectableOptions: !1
-    }).then((l) => {
-      const d = l.options.map(g);
+    }).then((O) => {
+      const z = O.options.map(y);
       n({
-        type: s.LOAD_SUCCESS,
+        type: r.LOAD_SUCCESS,
         payload: {
-          id: e,
-          items: d,
-          marker: l.marker
+          id: t,
+          items: z,
+          marker: O.marker
         }
-      }), _(!1);
+      }), b(!1);
     }).catch(() => {
       n({
-        type: s.LOAD_ERROR,
+        type: r.LOAD_ERROR,
         payload: {
-          id: e,
-          marker: r
+          id: t,
+          marker: s
         }
       });
     });
-  }, [m, g, u, b]), J = y.nodes.length === 0 || y.nodes[0].children.length === 0 && y.nodes[0].id === c.id, K = p((a) => {
+  }, [_, I, y, m, g]), K = h.nodes.length === 0 || h.nodes[0].children.length === 0 && h.nodes[0].id === u.id, Q = p((e) => {
     const {
-      metadata: t
-    } = a.element;
-    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, {
+      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, {
     onReload: () => {
-      V("root");
+      w("root");
     }
-  }) : /* @__PURE__ */ te("div", {
-    children: [E && /* @__PURE__ */ h("div", {
-      className: x.noResultOption,
-      children: /* @__PURE__ */ h(X, {
+  }) : /* @__PURE__ */ ne("div", {
+    children: [N && /* @__PURE__ */ v("div", {
+      className: C.noResultOption,
+      children: /* @__PURE__ */ v(Y, {
         "aria-label": q,
-        className: x.loadingIndicator
+        className: C.loadingIndicator
       })
-    }), J && !E ? /* @__PURE__ */ h("div", {
-      className: x.noResultOption,
+    }), K && !N ? /* @__PURE__ */ v("div", {
+      className: C.noResultOption,
       children: U
-    }) : !E && /* @__PURE__ */ h(Z, {
-      "aria-label": j,
-      data: y.nodes,
+    }) : !N && /* @__PURE__ */ v($, {
+      ref: G,
+      "aria-label": l,
+      data: h.nodes,
       multiSelect: M,
-      onExpand: H,
-      onLoadData: V,
-      onNodeSelect: K,
-      selectedIds: y.selectedIds,
+      onExpand: J,
+      onLoadData: w,
+      onNodeSelect: Q,
+      selectedIds: h.selectedIds,
       size: "large",
       togglableSelect: !0
     })]
   });
-};
+});
 export {
-  Te as D,
-  x as s
+  Le as D,
+  C as s
 };

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

@@ -1,147 +1,162 @@
-import { useComboboxStore as X, ComboboxProvider as q, PopoverAnchor as H, Combobox as J, ComboboxCancel as K, ComboboxPopover as Q } from "@ariakit/react";
-import { useLabelable as U, ChipsGroup as Y, InputChip as Z, IconButton as _ } from "@box/blueprint-web";
-import { XMark as $, Search as ee } from "@box/blueprint-web-assets/icons/Fill";
-import { IconIconOnLightSecondary as oe, Size6 as g, Size1 as te } from "@box/blueprint-web-assets/tokens/tokens";
-import p from "clsx";
-import { forwardRef as le, useId as ae, useState as I, useRef as se, useCallback as re } from "react";
-import { useIntl as ne } from "react-intl";
-import V from "../combobox-with-api-pagination/messages.js";
-import { useControllableState as ie } from "../combobox-with-api-pagination/utils/use-controllable-state.js";
-import { s as t, D as ce } from "../../../../chunks/dynamic-loading-tree.js";
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
-const ue = () => /* @__PURE__ */ o(ee, {
-  color: oe,
-  height: g,
+import { useComboboxStore as X, ComboboxProvider as q, PopoverAnchor as H, Combobox as J, ComboboxCancel as Q, ComboboxPopover as Y, ComboboxItem as Z } from "@ariakit/react";
+import { useLabelable as _, ChipsGroup as $, InputChip as ee, IconButton as oe } from "@box/blueprint-web";
+import { XMark as te, Search as le } from "@box/blueprint-web-assets/icons/Fill";
+import { IconIconOnLightSecondary as ae, Size6 as V, Size1 as se } from "@box/blueprint-web-assets/tokens/tokens";
+import b from "clsx";
+import { forwardRef as re, useId as ne, useState as w, useRef as S, useCallback as ie } from "react";
+import { useIntl as ce } from "react-intl";
+import L from "../combobox-with-api-pagination/messages.js";
+import { useControllableState as ue } from "../combobox-with-api-pagination/utils/use-controllable-state.js";
+import { s as a, D as me } from "../../../../chunks/dynamic-loading-tree.js";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+const pe = () => /* @__PURE__ */ t(le, {
+  color: ae,
+  height: V,
   role: "presentation",
   style: {
-    padding: te,
+    padding: se,
     boxSizing: "border-box"
   },
-  width: g
-}), we = /* @__PURE__ */ le(function(S, pe) {
+  width: V
+}), ye = /* @__PURE__ */ re(function(y, de) {
   const {
-    className: w,
-    dataTargetId: L,
-    defaultFetcher: N,
-    defaultValue: y = [],
-    disabled: A,
+    className: N,
+    dataTargetId: A,
+    defaultFetcher: R,
+    defaultValue: B = [],
+    disabled: k,
     hideLabel: d,
-    label: R,
-    levels: B,
-    loadingAriaLabel: z,
-    multiselect: b = !1,
-    noResultMessage: M,
-    onValueChange: O,
-    placeholder: P,
-    portalElement: T,
-    selectableLevels: W,
-    treeAriaLabel: k,
-    value: D
-  } = S, {
-    formatMessage: h
-  } = ne(), n = ae(), [f, j] = I(!1), [l, i] = ie({
-    prop: D,
-    defaultProp: y,
-    onChange: O
-  }), [x, c] = I(""), E = se(null), F = re((e) => {
-    c(e);
-  }, [c]), u = X({
+    label: z,
+    levels: D,
+    loadingAriaLabel: M,
+    multiselect: h = !1,
+    noResultMessage: O,
+    onValueChange: P,
+    placeholder: T,
+    portalElement: W,
+    selectableLevels: E,
+    treeAriaLabel: F,
+    value: j
+  } = y, {
+    formatMessage: f
+  } = ce(), i = ne(), [C, G] = w(!1), [s, c] = ue({
+    prop: j,
+    defaultProp: B,
+    onChange: P
+  }), [x, u] = w(""), v = S(null), K = ie((e) => {
+    u(e);
+  }, [u]), m = X({
     includesBaseElement: !0,
     virtualFocus: !1,
     value: x,
-    setValue: F,
-    open: f,
-    setOpen: j
-  }), C = l.length > 0, v = l.length > 0, G = U(R, n);
-  return /* @__PURE__ */ r(q, {
-    store: u,
-    children: [/* @__PURE__ */ o(H, {
-      children: /* @__PURE__ */ r("div", {
-        className: p(t.container, w),
-        children: [/* @__PURE__ */ o(G, {
-          className: p(t.label, {
-            [t.hiddenLabel]: d
+    setValue: K,
+    open: C,
+    setOpen: G
+  }), g = s.length > 0, I = s.length > 0, U = _(z, i), p = S(null);
+  return /* @__PURE__ */ n(q, {
+    store: m,
+    children: [/* @__PURE__ */ t(H, {
+      children: /* @__PURE__ */ n("div", {
+        className: b(a.container, N),
+        children: [/* @__PURE__ */ t(U, {
+          className: b(a.label, {
+            [a.hiddenLabel]: d
           }),
           hideLabel: d
-        }), /* @__PURE__ */ r("div", {
-          className: p(t.comboboxContainer, {
-            [t.withChips]: v,
-            [t.withComboboxButtons]: C
+        }), /* @__PURE__ */ n("div", {
+          className: b(a.comboboxContainer, {
+            [a.withChips]: I,
+            [a.withComboboxButtons]: g
           }),
-          children: [v && /* @__PURE__ */ o(Y, {
-            children: l.map((e) => /* @__PURE__ */ o(Z, {
+          children: [I && /* @__PURE__ */ t($, {
+            children: s.map((e) => /* @__PURE__ */ t(ee, {
               label: e.displayValue,
               onDelete: () => {
-                const a = l.filter((s) => s.value !== e.value);
-                i(a);
+                const o = s.filter((l) => l.value !== e.value);
+                c(o);
               },
               tooltip: e.displayValue
             }, e.value))
-          }), /* @__PURE__ */ r("div", {
-            className: t.textInputWrapper,
-            children: [/* @__PURE__ */ o(J, {
-              ref: E,
-              className: t.textInput,
-              "data-target-id": L,
-              disabled: A,
-              id: n,
-              placeholder: P,
-              store: u
-            }), /* @__PURE__ */ o("div", {
-              className: t.comboboxButtons,
-              children: C ? /* @__PURE__ */ o(K, {
+          }), /* @__PURE__ */ n("div", {
+            className: a.textInputWrapper,
+            children: [/* @__PURE__ */ t(J, {
+              ref: v,
+              "aria-haspopup": "tree",
+              className: a.textInput,
+              "data-target-id": A,
+              disabled: k,
+              id: i,
+              placeholder: T,
+              store: m
+            }), /* @__PURE__ */ t("div", {
+              className: a.comboboxButtons,
+              children: g ? /* @__PURE__ */ t(Q, {
                 onClick: () => {
-                  i([]);
+                  c([]);
                 },
-                render: (e) => /* @__PURE__ */ o(_, {
+                render: (e) => /* @__PURE__ */ t(oe, {
                   ...e,
                   "aria-label": "Clear selection",
-                  icon: $,
+                  icon: te,
                   size: "x-small"
                 }),
-                store: u
-              }) : /* @__PURE__ */ o(ue, {})
+                store: m
+              }) : /* @__PURE__ */ t(pe, {})
             })]
           })]
         })]
       })
-    }), /* @__PURE__ */ o(Q, {
-      "aria-labelledby": n,
-      className: t.popover,
+    }), /* @__PURE__ */ t(Y, {
+      "aria-labelledby": i,
+      className: a.popover,
       fitViewport: !0,
       gutter: 8,
-      modal: !0,
       portal: !0,
-      portalElement: T,
+      portalElement: W,
       sameWidth: !0,
-      children: /* @__PURE__ */ o(ce, {
-        ariaLabel: k,
-        defaultFetcher: N,
-        levels: B,
-        loadingAriaLabel: z || h(V.loadingAriaLabel),
-        multiselect: b,
-        noResultMessage: M || h(V.noResults),
-        onSelect: (e) => {
-          const {
-            metadata: a
-          } = e.element;
-          let s = [];
-          e.isSelected ? (b && (s = l.filter((m) => m.value !== e.element.id)), s.push({
-            value: e.element.id,
-            displayValue: a.displayValue,
-            level: a.level,
-            selectable: a.selectable,
-            ancestors: a.ancestors
-          })) : s = l.filter((m) => m.value !== e.element.id), i(s), c("");
+      children: /* @__PURE__ */ t(Z, {
+        onFocusVisible: (e) => {
+          var l;
+          const o = (l = p.current) == null ? void 0 : l.firstChild;
+          o == null || o.focus();
         },
-        open: f,
-        searchInput: x.trimStart(),
-        selectableLevels: W,
-        selectedNodes: l.map((e) => e.value)
+        onKeyDown: (e) => {
+          var o, l;
+          if (e.key === "ArrowUp") {
+            const r = (o = p.current) == null ? void 0 : o.firstChild;
+            document.activeElement === r && (r.blur(), (l = v.current) == null || l.focus());
+          }
+        },
+        children: /* @__PURE__ */ t(me, {
+          ref: p,
+          ariaLabel: F,
+          defaultFetcher: R,
+          levels: D,
+          loadingAriaLabel: M || f(L.loadingAriaLabel),
+          multiselect: h,
+          noResultMessage: O || f(L.noResults),
+          onSelect: (e) => {
+            const {
+              metadata: o
+            } = e.element;
+            let l = [];
+            e.isSelected ? (h && (l = s.filter((r) => r.value !== e.element.id)), l.push({
+              value: e.element.id,
+              displayValue: o.displayValue,
+              level: o.level,
+              selectable: o.selectable,
+              ancestors: o.ancestors
+            })) : l = s.filter((r) => r.value !== e.element.id), c(l), u("");
+          },
+          open: C,
+          searchInput: x.trimStart(),
+          selectableLevels: E,
+          selectedNodes: s.map((e) => e.value)
+        })
       })
     })]
   });
 });
 export {
-  we as ComboboxWithApiTreeView
+  ye as ComboboxWithApiTreeView
 };

package/dist/types/lib/components/combobox-with-api-tree-view/dynamic-loading-tree.d.ts

@@ -14,4 +14,4 @@ export interface DynamicLoadingTreeProps {
     noResultMessage: string | React.ReactElement;
     loadingAriaLabel: string;
 }
-export declare const DynamicLoadingTree: ({ ariaLabel, onSelect, selectedNodes, defaultFetcher, levels, selectableLevels, multiselect, open, searchInput, noResultMessage, loadingAriaLabel, }: DynamicLoadingTreeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DynamicLoadingTree: import('react').ForwardRefExoticComponent<DynamicLoadingTreeProps & import('react').RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/combobox-with-api",
-    "version": "0.44.4",
+    "version": "0.44.8",
     "peerDependencies": {
         "@ariakit/react": "0.4.15",
         "@box/blueprint-web": "^10.3.1",
@@ -11,13 +11,13 @@
         "react-intl": "^6.4.2"
     },
     "dependencies": {
-        "@box/tree": "^0.50.2",
+        "@box/tree": "^0.50.4",
         "react-accessible-treeview": "2.9.0"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^12.9.4",
-        "@box/blueprint-web-assets": "^4.52.0",
-        "@box/storybook-utils": "^0.13.5",
+        "@box/blueprint-web": "^12.10.0",
+        "@box/blueprint-web-assets": "^4.53.0",
+        "@box/storybook-utils": "^0.13.6",
         "react": "^18.3.0",
         "react-dom": "^18.3.0"
     },