@box/combobox-with-api 1.29.1 → 1.30.0

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

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

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

@@ -1,47 +1,47 @@
-import { ComboboxItemValue as ce } from "@ariakit/react";
-import { Combobox as d, useForkRef as ue, LoadingIndicator as de, InlineNotice as pe, Text as me } from "@box/blueprint-web";
-import { Search as he, Loader as fe } from "@box/blueprint-web-assets/icons/Fill";
-import { Size6 as V, Size1 as ge, IconIconOnLightSecondary as be } from "@box/blueprint-web-assets/tokens/tokens";
-import S from "clsx";
-import { forwardRef as D, useRef as A, useState as xe, useCallback as N, useMemo as L, useEffect as Oe } from "react";
-import { useIntl as B, FormattedMessage as k } from "react-intl";
+import { ComboboxItemValue as ue } from "@ariakit/react";
+import { Combobox as d, useForkRef as de, LoadingIndicator as pe, InlineNotice as me, Text as he } from "@box/blueprint-web";
+import { Search as fe, Loader as ge } from "@box/blueprint-web-assets/icons/Fill";
+import { Size6 as V, Size1 as be, IconIconOnLightSecondary as Oe } from "@box/blueprint-web-assets/tokens/tokens";
+import N from "clsx";
+import { forwardRef as B, useRef as L, useState as xe, useCallback as k, useMemo as y, useEffect as _e } from "react";
+import { useIntl as W, FormattedMessage as F } from "react-intl";
 import a from "./messages.js";
-import { useAsyncList as _e } from "./use-async-list.js";
-import { useControllableState as Ce } from "./utils/use-controllable-state.js";
-import { useTrackVisibility as Re } from "./utils/use-intersection-observer.js";
-import { jsx as r, jsxs as F, Fragment as Ae } from "react/jsx-runtime";
-import '../../../../styles/combobox-with-api-pagination.css';const Le = "_disabled_19k3s_8", ye = "_highlightOptionText_19k3s_12", Ee = "_selected_19k3s_24", Ie = "_option_19k3s_35", ve = "_errorComboboxOption_19k3s_39", Me = "_errorComboboxOptionText_19k3s_44", i = {
-  disabled: Le,
-  highlightOptionText: ye,
-  selected: Ee,
-  option: Ie,
-  errorComboboxOption: ve,
-  errorComboboxOptionText: Me
-}, P = /* @__PURE__ */ D(({
-  onTryAgain: I
+import { useAsyncList as Ce } from "./use-async-list.js";
+import { useControllableState as Re } from "./utils/use-controllable-state.js";
+import { useTrackVisibility as Ae } from "./utils/use-intersection-observer.js";
+import { jsx as r, jsxs as P, Fragment as Le } from "react/jsx-runtime";
+import '../../../../styles/combobox-with-api-pagination.css';const ye = "_disabled_19k3s_8", Ee = "_highlightOptionText_19k3s_12", Ie = "_selected_19k3s_24", ve = "_option_19k3s_35", Me = "_errorComboboxOption_19k3s_39", Se = "_errorComboboxOptionText_19k3s_44", i = {
+  disabled: ye,
+  highlightOptionText: Ee,
+  selected: Ie,
+  option: ve,
+  errorComboboxOption: Me,
+  errorComboboxOptionText: Se
+}, D = /* @__PURE__ */ B(({
+  onTryAgain: v
 }, p) => {
   const {
     formatMessage: m
-  } = B();
-  return /* @__PURE__ */ F(Ae, {
-    children: [/* @__PURE__ */ r(pe, {
+  } = W();
+  return /* @__PURE__ */ P(Le, {
+    children: [/* @__PURE__ */ r(me, {
       variant: "error",
       variantIconAriaLabel: m(a.loadingResultsErrorIconLabel),
-      children: /* @__PURE__ */ r(k, {
+      children: /* @__PURE__ */ r(F, {
         ...a.loadingResultsErrorMessage
       })
     }), /* @__PURE__ */ r(d.Option, {
       ref: p,
       className: i.errorComboboxOption,
-      onClick: I,
-      children: /* @__PURE__ */ F(me, {
+      onClick: v,
+      children: /* @__PURE__ */ P(he, {
         as: "span",
         className: i.errorComboboxOptionText,
         color: "textOnLightLink",
         variant: "bodyDefaultBold",
-        children: [/* @__PURE__ */ r(k, {
+        children: [/* @__PURE__ */ r(F, {
           ...a.loadingResultsErrorAction
-        }), /* @__PURE__ */ r(fe, {
+        }), /* @__PURE__ */ r(ge, {
           color: "currentColor",
           height: "12px",
           width: "12px"
@@ -49,42 +49,42 @@ import '../../../../styles/combobox-with-api-pagination.css';const Le = "_disabl
       })
     })]
   });
-}), y = "__LOADING__", E = "__LOADING_ERROR__", Te = "0px 0px 20px 0px", Ve = /* @__PURE__ */ r(he, {
-  color: be,
+}), E = "__LOADING__", I = "__LOADING_ERROR__", Te = "0px 0px 20px 0px", Ve = /* @__PURE__ */ r(fe, {
+  color: Oe,
   height: V,
   role: "presentation",
   style: {
-    padding: ge,
+    padding: be,
     boxSizing: "border-box"
   },
   width: V
-}), Ue = /* @__PURE__ */ D(function(p, m) {
+}), qe = /* @__PURE__ */ B(function(p, m) {
   const {
-    dataTargetId: W,
-    defaultFetcher: w,
-    initialOpen: z = !1,
-    onInputValueChange: G,
-    value: j,
-    onValueChange: U,
+    dataTargetId: w,
+    defaultFetcher: z,
+    initialOpen: G = !1,
+    onInputValueChange: j,
+    value: U,
+    onValueChange: q,
     onOpenChange: h,
-    noResultMessage: q,
-    defaultValue: H = [],
-    loadingAriaLabel: J,
+    noResultMessage: H,
+    defaultValue: J = [],
+    loadingAriaLabel: K,
     multiselect: s = !1,
-    disabled: K,
+    disabled: f,
     className: Q,
-    displaySingleSelectionAsChip: f = !0,
+    displaySingleSelectionAsChip: g = !0,
     ...X
   } = p, {
     formatMessage: c
-  } = B(), g = A(null), b = A(!0), [Y, v] = xe(z), e = _e({
+  } = W(), b = L(null), O = L(!0), [Y, M] = xe(G), e = Ce({
     async load({
       marker: o,
       searchInput: t,
-      signal: C
+      signal: R
     }) {
-      const l = await w({
-        signal: C,
+      const l = await z({
+        signal: R,
         marker: o,
         searchInput: t
       });
@@ -93,73 +93,73 @@ import '../../../../styles/combobox-with-api-pagination.css';const Le = "_disabl
         marker: l.marker
       };
     }
-  }), M = A(!1), Z = N(() => {
-    M.current || (e.reload(), M.current = !0);
-  }, []), [n, x] = Ce({
-    prop: j,
-    defaultProp: H,
-    onChange: U
-  }), O = !s && n.length === 1, $ = N((o) => {
-    v(o), h?.(o);
-  }, [h]), ee = (o) => {
-    o === void 0 ? (x([]), (!b.current || !f) && (e.search(""), b.current = !0)) : Array.isArray(o) ? x(o) : (x([o]), s || (v(!1), h?.(!1)));
-  }, oe = L(() => n.length === 0 ? s ? [] : void 0 : s ? n : n[0], [s, n]), _ = L(() => n.filter((o) => !e.items.some((t) => t.value === o.value)), [n, e.items]), te = (o) => {
+  }), S = L(!1), Z = k(() => {
+    S.current || (e.reload(), S.current = !0);
+  }, []), [n, x] = Re({
+    prop: U,
+    defaultProp: J,
+    onChange: q
+  }), _ = !s && n.length === 1, $ = _ && !f, ee = k((o) => {
+    M(o), h?.(o);
+  }, [h]), oe = (o) => {
+    f || (o === void 0 ? (x([]), (!O.current || !g) && (e.search(""), O.current = !0)) : Array.isArray(o) ? x(o) : (x([o]), s || (M(!1), h?.(!1))));
+  }, te = y(() => n.length === 0 ? s ? [] : void 0 : s ? n : n[0], [s, n]), C = y(() => n.filter((o) => !e.items.some((t) => t.value === o.value)), [n, e.items]), re = (o) => {
     const {
       value: t,
-      displayValue: C,
+      displayValue: R,
       ...l
     } = o;
-    if (t === y)
+    if (t === E)
       return e.hasNextPage ? /* @__PURE__ */ r(d.Option, {
         ...l,
-        ref: ae,
+        ref: se,
         disabled: !0,
         value: t,
-        children: /* @__PURE__ */ r(de, {
+        children: /* @__PURE__ */ r(pe, {
           "aria-label": c(a.loadingMoreAriaLabel),
           style: {
             position: "unset"
           }
         })
       }) : null;
-    if (t === E && e.hasError && !e.isEmpty)
-      return /* @__PURE__ */ r(P, {
+    if (t === I && e.hasError && !e.isEmpty)
+      return /* @__PURE__ */ r(D, {
         onTryAgain: () => {
-          e.loadMore(), g.current?.focus();
+          e.loadMore(), b.current?.focus();
         }
       });
-    if (_.some((R) => R.value === t))
+    if (C.some((A) => A.value === t))
       return null;
-    const le = n.some((R) => R.value === t);
+    const ce = n.some((A) => A.value === t);
     return /* @__PURE__ */ r(d.Option, {
       ...l,
       className: i.option,
       value: t,
-      children: /* @__PURE__ */ r(ce, {
-        className: S(i.highlightOptionText, le && i.selected),
-        value: C || t
+      children: /* @__PURE__ */ r(ue, {
+        className: N(i.highlightOptionText, ce && i.selected),
+        value: R || t
       })
     });
-  }, re = (o) => {
-    if (G?.(o), O && o === "") {
-      b.current = !1;
+  }, ne = (o) => {
+    if (j?.(o), _ && o === "") {
+      O.current = !1;
       return;
     }
     e.search(o);
-  }, ne = () => {
-    e.reload(), g.current?.focus();
+  }, ae = () => {
+    e.reload(), b.current?.focus();
   };
   let u;
-  e.hasError && !e.isLoading ? u = /* @__PURE__ */ r(P, {
-    onTryAgain: ne
-  }) : e.isEmpty && !e.isLoading ? u = q || c(a.noResults) : u = void 0;
-  const [ae, {
-    rootRef: se,
+  e.hasError && !e.isLoading ? u = /* @__PURE__ */ r(D, {
+    onTryAgain: ae
+  }) : e.isEmpty && !e.isLoading ? u = H || c(a.noResults) : u = void 0;
+  const [se, {
+    rootRef: ie,
     isVisible: T
-  }] = Re({
+  }] = Ae({
     rootMargin: Te
   });
-  Oe(() => {
+  _e(() => {
     if (!(T && e.hasNextPage))
       return;
     const t = setTimeout(() => {
@@ -169,46 +169,46 @@ import '../../../../styles/combobox-with-api-pagination.css';const Le = "_disabl
       clearTimeout(t);
     };
   }, [T]);
-  const ie = L(() => {
+  const le = y(() => {
     const o = e.hasNextPage ? {
-      displayValue: y,
-      value: y
-    } : null, t = !o && e.hasError && !e.isEmpty ? {
       displayValue: E,
       value: E
+    } : null, t = !o && e.hasError && !e.isEmpty ? {
+      displayValue: I,
+      value: I
     } : null;
-    return [...e.items, ..._, o, t].filter(Boolean);
-  }, [e.hasNextPage, e.hasError, e.isEmpty, e.items, _]);
+    return [...e.items, ...C, o, t].filter(Boolean);
+  }, [e.hasNextPage, e.hasError, e.isEmpty, e.items, C]);
   return /* @__PURE__ */ r(d, {
     ...X,
-    ref: ue(g, m),
+    ref: de(b, m),
     as: "input",
-    className: S({
-      [i.disabled]: O
-    }, Q),
+    className: N(Q, {
+      [i.disabled]: $
+    }),
     clearButtonAriaLabel: c(a.clearButtonAriaLabel),
     clearOnBlur: !1,
-    "data-target-id": W,
-    disabled: K || O && f,
-    displaySingleSelectionAsChip: f,
+    "data-target-id": w,
+    disabled: f || _ && g,
+    displaySingleSelectionAsChip: g,
     displayValue: (o) => o.displayValue || o.value,
     endComboboxIcon: Ve,
     focusLoop: !1,
-    getPopoverRef: se,
+    getPopoverRef: ie,
     loading: e.isReloading,
-    loadingAriaLabel: J || c(a.loadingAriaLabel),
+    loadingAriaLabel: K || c(a.loadingAriaLabel),
     multiselect: s,
     noResultMessage: u,
     onFocus: Z,
-    onInputValueChange: re,
-    onOpenChange: $,
-    onValueChange: ee,
+    onInputValueChange: ne,
+    onOpenChange: ee,
+    onValueChange: oe,
     open: Y,
-    options: ie,
-    renderOption: te,
-    value: oe
+    options: le,
+    renderOption: re,
+    value: te
   });
 });
 export {
-  Ue as ComboboxWithApiPagination
+  qe as ComboboxWithApiPagination
 };

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

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

package/dist/styles/dynamic-loading-tree.css

@@ -1 +1 @@
-._container_1wa8l_2{font-weight:var(--body-default-font-weight);font-size:var(--body-default-font-size);font-family:var(--body-default-font-family);line-height:var(--body-default-line-height);letter-spacing:var(--body-default-letter-spacing);text-transform:var(--body-default-text-case);text-decoration:var(--body-default-text-decoration);display:flex;flex-direction:column}._container_1wa8l_2._disabled_1wa8l_13{opacity:.1}._container_1wa8l_2 ._label_1wa8l_16{font-weight:var(--body-default-bold-font-weight);font-size:var(--body-default-bold-font-size);font-family:var(--body-default-bold-font-family);line-height:var(--body-default-bold-line-height);letter-spacing:var(--body-default-bold-letter-spacing);text-transform:var(--body-default-bold-text-case);text-decoration:var(--body-default-bold-text-decoration);flex:0 0 fit-content;color:var(--text-text-on-light);overflow-wrap:break-word}._container_1wa8l_2 ._label_1wa8l_16:not(._hiddenLabel_1wa8l_28){margin-block-end:var(--space-2)}._container_1wa8l_2 ._comboboxContainer_1wa8l_31{position:relative;display:flex;flex-wrap:wrap;gap:var(--space-2);overflow-y:auto;background-color:var(--surface-dropdown-surface);border-top:var(--blueprint-combobox-border-top-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));border-right:var(--blueprint-combobox-border-right-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));border-bottom:var(--blueprint-combobox-border-bottom-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));border-left:var(--blueprint-combobox-border-left-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));border-radius:var(--blueprint-combobox-input-radius, var(--radius-2));box-shadow:var(--innershadow-1);padding-block:calc((40px - var(--space-5)) / 2 - var(--border-1));padding-inline:var(--space-3)}._container_1wa8l_2 ._comboboxContainer_1wa8l_31._withComboboxButtons_1wa8l_47{padding-inline-end:var(--space-10)}._container_1wa8l_2 ._comboboxContainer_1wa8l_31:not(:disabled):has(input:focus){background-color:var(--surface-dropdown-surface-focus);border:var(--border-2) solid var(--outline-focus-on-light);padding-block:calc((40px - var(--space-5)) / 2 - var(--border-2))}._container_1wa8l_2 ._comboboxContainer_1wa8l_31:not(:disabled)._error_1wa8l_55,._container_1wa8l_2 ._comboboxContainer_1wa8l_31:not(:disabled):has([aria-invalid=true]){background-color:var(--surface-dropdown-surface-error);border-top:var(--blueprint-combobox-border-error-top-width, var(--border-2)) solid var(--border-input-border-error);border-right:var(--blueprint-combobox-border-error-right-width, var(--border-2)) solid var(--border-input-border-error);border-bottom:var(--blueprint-combobox-border-error-bottom-width, var(--border-2)) solid var(--border-input-border-error);border-left:var(--blueprint-combobox-border-error-left-width, var(--border-2)) solid var(--border-input-border-error);padding-block:calc((40px - var(--space-5)) / 2 - var(--border-2))}._container_1wa8l_2 ._comboboxContainer_1wa8l_31 ._textInputWrapper_1wa8l_63{display:flex;flex:content;gap:var(--space-2);align-items:center}._container_1wa8l_2 ._comboboxContainer_1wa8l_31 ._textInputWrapper_1wa8l_63 ._textInput_1wa8l_63{font-weight:var(--body-default-font-weight);font-size:var(--body-default-font-size);font-family:var(--body-default-font-family);line-height:var(--body-default-line-height);letter-spacing:var(--body-default-letter-spacing);text-transform:var(--body-default-text-case);text-decoration:var(--body-default-text-decoration);width:100%;height:var(--space-5);padding:0;color:var(--text-text-on-light);background-color:transparent;border:none;outline:none}._container_1wa8l_2 ._comboboxContainer_1wa8l_31 ._textInputWrapper_1wa8l_63 ._errorIcon_1wa8l_85 path{fill:var(--icon-icon-error-on-light)}._container_1wa8l_2 ._comboboxContainer_1wa8l_31 ._textInputWrapper_1wa8l_63 ._comboboxButtons_1wa8l_88{position:absolute;top:var(--space-2);right:var(--space-2);display:flex;align-items:center}._container_1wa8l_2 ._comboboxContainer_1wa8l_31._withChips_1wa8l_95{max-height:calc(2 * var(--space-2) + 3 * var(--space-6));padding-block:calc((40px - var(--space-7)) / 2 - var(--border-1))}._container_1wa8l_2 ._comboboxContainer_1wa8l_31._withChips_1wa8l_95:not(:disabled)._error_1wa8l_55{padding-block:calc((40px - var(--space-7)) / 2 - var(--border-2))}._container_1wa8l_2 ._comboboxContainer_1wa8l_31._withChips_1wa8l_95:not(:disabled):has(input:focus){padding-block:calc((40px - var(--space-7)) / 2 - var(--border-2))}._container_1wa8l_2 ._inlineError_1wa8l_105{margin-block-start:var(--space-2)}._popover_1wa8l_109{font-weight:var(--body-default-font-weight);font-size:var(--body-default-font-size);font-family:var(--body-default-font-family);line-height:var(--body-default-line-height);letter-spacing:var(--body-default-letter-spacing);text-transform:var(--body-default-text-case);text-decoration:var(--body-default-text-decoration);z-index:380;max-height:300px;overflow:auto;background-color:var(--surface-menu-surface);border:var(--border-1) solid var(--border-card-border);border-radius:var(--radius-3);padding-block:var(--space-3);padding-inline:var(--space-3);box-shadow:var(--dropshadow-3)}._popover_1wa8l_109 ul{padding-inline-start:0}._popover_1wa8l_109 ._option_1wa8l_135{position:relative;box-sizing:border-box;width:100%;overflow-wrap:break-word;border:var(--border-2) solid transparent;border-radius:var(--radius-3);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;padding-block:var(--space-2);padding-inline:var(--space-2)}._popover_1wa8l_109 ._option_1wa8l_135[aria-disabled]{opacity:.1}._popover_1wa8l_109 ._option_1wa8l_135[data-active-item]:not([aria-disabled]){background-color:var(--surface-menu-surface-focus);border:var(--border-2) solid var(--outline-focus-on-light)}._popover_1wa8l_109 ._option_1wa8l_135:hover{background-color:var(--surface-menu-surface-hover)}._popover_1wa8l_109 ._option_1wa8l_135 ._indicator_1wa8l_158{position:absolute;top:0;left:var(--space-2);display:flex;align-items:center;justify-content:center;height:var(--size-9)}._popover_1wa8l_109 ._option_1wa8l_135 ._indicator_1wa8l_158 ._indicatorIcon_1wa8l_167 path{fill:var(--icon-icon-on-light)}._popover_1wa8l_109 ._optionWithIndicator_1wa8l_170{padding-inline:var(--space-10) var(--space-2)}._popover_1wa8l_109 ._loadingIndicator_1wa8l_173{position:unset}._popover_1wa8l_109 ._noResultOption_1wa8l_176{color:var(--text-text-on-light);text-align:center;-webkit-user-select:none;user-select:none}
+._container_15bxn_2{font-weight:var(--body-default-font-weight);font-size:var(--body-default-font-size);font-family:var(--body-default-font-family);line-height:var(--body-default-line-height);letter-spacing:var(--body-default-letter-spacing);text-transform:var(--body-default-text-case);text-decoration:var(--body-default-text-decoration);display:flex;flex-direction:column}._container_15bxn_2._disabled_15bxn_13{opacity:.6}._container_15bxn_2 ._label_15bxn_16{font-weight:var(--body-default-bold-font-weight);font-size:var(--body-default-bold-font-size);font-family:var(--body-default-bold-font-family);line-height:var(--body-default-bold-line-height);letter-spacing:var(--body-default-bold-letter-spacing);text-transform:var(--body-default-bold-text-case);text-decoration:var(--body-default-bold-text-decoration);flex:0 0 fit-content;color:var(--text-text-on-light);overflow-wrap:break-word}._container_15bxn_2 ._label_15bxn_16:not(._hiddenLabel_15bxn_28){margin-block-end:var(--space-2)}._container_15bxn_2 ._comboboxContainer_15bxn_31{position:relative;display:flex;flex-wrap:wrap;gap:var(--space-2);overflow-y:auto;background-color:var(--surface-dropdown-surface);border-top:var(--blueprint-combobox-border-top-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));border-right:var(--blueprint-combobox-border-right-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));border-bottom:var(--blueprint-combobox-border-bottom-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));border-left:var(--blueprint-combobox-border-left-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));border-radius:var(--blueprint-combobox-input-radius, var(--radius-2));box-shadow:var(--innershadow-1);padding-block:calc((40px - var(--space-5)) / 2 - var(--border-1));padding-inline:var(--space-3)}._container_15bxn_2 ._comboboxContainer_15bxn_31._withComboboxButtons_15bxn_47{padding-inline-end:var(--space-10)}._container_15bxn_2 ._comboboxContainer_15bxn_31:not(:disabled):has(input:focus){background-color:var(--surface-dropdown-surface-focus);border:var(--border-2) solid var(--outline-focus-on-light);padding-block:calc((40px - var(--space-5)) / 2 - var(--border-2))}._container_15bxn_2 ._comboboxContainer_15bxn_31:not(:disabled)._error_15bxn_55,._container_15bxn_2 ._comboboxContainer_15bxn_31:not(:disabled):has([aria-invalid=true]){background-color:var(--surface-dropdown-surface-error);border-top:var(--blueprint-combobox-border-error-top-width, var(--border-2)) solid var(--border-input-border-error);border-right:var(--blueprint-combobox-border-error-right-width, var(--border-2)) solid var(--border-input-border-error);border-bottom:var(--blueprint-combobox-border-error-bottom-width, var(--border-2)) solid var(--border-input-border-error);border-left:var(--blueprint-combobox-border-error-left-width, var(--border-2)) solid var(--border-input-border-error);padding-block:calc((40px - var(--space-5)) / 2 - var(--border-2))}._container_15bxn_2 ._comboboxContainer_15bxn_31 ._textInputWrapper_15bxn_63{display:flex;flex:content;gap:var(--space-2);align-items:center}._container_15bxn_2 ._comboboxContainer_15bxn_31 ._textInputWrapper_15bxn_63 ._textInput_15bxn_63{font-weight:var(--body-default-font-weight);font-size:var(--body-default-font-size);font-family:var(--body-default-font-family);line-height:var(--body-default-line-height);letter-spacing:var(--body-default-letter-spacing);text-transform:var(--body-default-text-case);text-decoration:var(--body-default-text-decoration);width:100%;height:var(--space-5);padding:0;color:var(--text-text-on-light);background-color:transparent;border:none;outline:none}._container_15bxn_2 ._comboboxContainer_15bxn_31 ._textInputWrapper_15bxn_63 ._errorIcon_15bxn_85 path{fill:var(--icon-icon-error-on-light)}._container_15bxn_2 ._comboboxContainer_15bxn_31 ._textInputWrapper_15bxn_63 ._comboboxButtons_15bxn_88{position:absolute;top:var(--space-2);right:var(--space-2);display:flex;align-items:center}._container_15bxn_2 ._comboboxContainer_15bxn_31._withChips_15bxn_95{max-height:calc(2 * var(--space-2) + 3 * var(--space-6));padding-block:calc((40px - var(--space-7)) / 2 - var(--border-1))}._container_15bxn_2 ._comboboxContainer_15bxn_31._withChips_15bxn_95:not(:disabled)._error_15bxn_55{padding-block:calc((40px - var(--space-7)) / 2 - var(--border-2))}._container_15bxn_2 ._comboboxContainer_15bxn_31._withChips_15bxn_95:not(:disabled):has(input:focus){padding-block:calc((40px - var(--space-7)) / 2 - var(--border-2))}._container_15bxn_2 ._inlineError_15bxn_105{margin-block-start:var(--space-2)}._popover_15bxn_109{font-weight:var(--body-default-font-weight);font-size:var(--body-default-font-size);font-family:var(--body-default-font-family);line-height:var(--body-default-line-height);letter-spacing:var(--body-default-letter-spacing);text-transform:var(--body-default-text-case);text-decoration:var(--body-default-text-decoration);z-index:380;max-height:300px;overflow:auto;background-color:var(--surface-menu-surface);border:var(--border-1) solid var(--border-card-border);border-radius:var(--radius-3);padding-block:var(--space-3);padding-inline:var(--space-3);box-shadow:var(--dropshadow-3)}._popover_15bxn_109 ul{padding-inline-start:0}._popover_15bxn_109 ._option_15bxn_135{position:relative;box-sizing:border-box;width:100%;overflow-wrap:break-word;border:var(--border-2) solid transparent;border-radius:var(--radius-3);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;padding-block:var(--space-2);padding-inline:var(--space-2)}._popover_15bxn_109 ._option_15bxn_135[aria-disabled]{opacity:.6}._popover_15bxn_109 ._option_15bxn_135[data-active-item]:not([aria-disabled]){background-color:var(--surface-menu-surface-focus);border:var(--border-2) solid var(--outline-focus-on-light)}._popover_15bxn_109 ._option_15bxn_135:hover{background-color:var(--surface-menu-surface-hover)}._popover_15bxn_109 ._option_15bxn_135 ._indicator_15bxn_158{position:absolute;top:0;left:var(--space-2);display:flex;align-items:center;justify-content:center;height:var(--size-9)}._popover_15bxn_109 ._option_15bxn_135 ._indicator_15bxn_158 ._indicatorIcon_15bxn_167 path{fill:var(--icon-icon-on-light)}._popover_15bxn_109 ._optionWithIndicator_15bxn_170{padding-inline:var(--space-10) var(--space-2)}._popover_15bxn_109 ._loadingIndicator_15bxn_173{position:unset}._popover_15bxn_109 ._noResultOption_15bxn_176{color:var(--text-text-on-light);text-align:center;-webkit-user-select:none;user-select:none}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/combobox-with-api",
-    "version": "1.29.1",
+    "version": "1.30.0",
     "peerDependencies": {
         "@ariakit/react": "0.4.15",
         "@box/blueprint-web": "^12.133.1",