@box/combobox-with-api 1.5.1 → 1.5.3

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

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

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

@@ -3,18 +3,18 @@ import { Combobox as m, useForkRef as ue, LoadingIndicator as de, InlineNotice a
 import { Search as fe, Loader as he } from "@box/blueprint-web-assets/icons/Fill";
 import { IconIconOnLightSecondary as ge, Size6 as V, Size1 as be } from "@box/blueprint-web-assets/tokens/tokens";
 import N from "clsx";
-import { forwardRef as B, useRef as A, useState as xe, useCallback as k, useMemo as C, useEffect as Oe } from "react";
+import { forwardRef as B, useRef as L, useState as xe, useCallback as k, useMemo as y, useEffect as Oe } 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 ye } from "./utils/use-controllable-state.js";
-import { useTrackVisibility as ve } from "./utils/use-intersection-observer.js";
-import { jsx as r, jsxs as P, Fragment as Re } from "react/jsx-runtime";
-import '../../../../styles/combobox-with-api-pagination.css';const Ae = "_container_syvk5_1", Ce = "_disabled_syvk5_7", Le = "_highlightOptionText_syvk5_11", Ee = "_selected_syvk5_23", Ie = "_option_syvk5_34", Me = "_errorComboboxOption_syvk5_38", Te = "_errorComboboxOptionText_syvk5_43", c = {
-  container: Ae,
-  disabled: Ce,
-  highlightOptionText: Le,
-  selected: Ee,
+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 Ce } from "react/jsx-runtime";
+import '../../../../styles/combobox-with-api-pagination.css';const Le = "_container_19k3s_2", ye = "_disabled_19k3s_8", Ee = "_highlightOptionText_19k3s_12", ve = "_selected_19k3s_24", Ie = "_option_19k3s_35", Me = "_errorComboboxOption_19k3s_39", Te = "_errorComboboxOptionText_19k3s_44", c = {
+  container: Le,
+  disabled: ye,
+  highlightOptionText: Ee,
+  selected: ve,
   option: Ie,
   errorComboboxOption: Me,
   errorComboboxOptionText: Te
@@ -24,7 +24,7 @@ import '../../../../styles/combobox-with-api-pagination.css';const Ae = "_contai
   const {
     formatMessage: h
   } = W();
-  return /* @__PURE__ */ P(Re, {
+  return /* @__PURE__ */ P(Ce, {
     children: [/* @__PURE__ */ r(pe, {
       variant: "error",
       variantIconAriaLabel: h(a.loadingResultsErrorIconLabel),
@@ -50,7 +50,7 @@ import '../../../../styles/combobox-with-api-pagination.css';const Ae = "_contai
       })
     })]
   });
-}), L = "__LOADING__", E = "__LOADING_ERROR__", Se = "0px 0px 20px 0px", Ve = /* @__PURE__ */ r(fe, {
+}), E = "__LOADING__", v = "__LOADING_ERROR__", Se = "0px 0px 20px 0px", Ve = /* @__PURE__ */ r(fe, {
   color: ge,
   height: V,
   role: "presentation",
@@ -78,14 +78,14 @@ import '../../../../styles/combobox-with-api-pagination.css';const Ae = "_contai
     ...X
   } = f, {
     formatMessage: d
-  } = W(), x = A(null), O = A(!0), [Y, M] = xe(G), o = _e({
+  } = W(), x = L(null), O = L(!0), [Y, M] = xe(G), o = _e({
     async load({
       marker: e,
       searchInput: t,
-      signal: R
+      signal: C
     }) {
       const u = await z({
-        signal: R,
+        signal: C,
         marker: e,
         searchInput: t
       });
@@ -94,23 +94,23 @@ import '../../../../styles/combobox-with-api-pagination.css';const Ae = "_contai
         marker: u.marker
       };
     }
-  }), T = A(!1), Z = k(() => {
+  }), T = L(!1), Z = k(() => {
     T.current || (o.reload(), T.current = !0);
-  }, []), [n, _] = ye({
+  }, []), [n, _] = Re({
     prop: j,
     defaultProp: H,
     onChange: U
-  }), y = !i && n.length === 1, $ = k((e) => {
+  }), R = !i && n.length === 1, $ = k((e) => {
     M(e), s == null || s(e);
   }, [s]), ee = (e) => {
     e === void 0 ? (_([]), (!O.current || !b) && (o.search(""), O.current = !0)) : Array.isArray(e) ? _(e) : (_([e]), i || (M(!1), s == null || s(!1)));
-  }, oe = C(() => n.length === 0 ? i ? [] : void 0 : i ? n : n[0], [i, n]), v = C(() => n.filter((e) => !o.items.some((t) => t.value === e.value)), [n, o.items]), te = (e) => {
+  }, oe = y(() => n.length === 0 ? i ? [] : void 0 : i ? n : n[0], [i, n]), A = y(() => n.filter((e) => !o.items.some((t) => t.value === e.value)), [n, o.items]), te = (e) => {
     const {
       value: t,
-      displayValue: R,
+      displayValue: C,
       ...u
     } = e;
-    if (t === L)
+    if (t === E)
       return o.hasNextPage ? /* @__PURE__ */ r(m.Option, {
         ...u,
         ref: se,
@@ -123,14 +123,14 @@ import '../../../../styles/combobox-with-api-pagination.css';const Ae = "_contai
           }
         })
       }) : null;
-    if (t === E && o.hasError && !o.isEmpty)
+    if (t === v && o.hasError && !o.isEmpty)
       return /* @__PURE__ */ r(D, {
         onTryAgain: () => {
           var l;
           o.loadMore(), (l = x.current) == null || l.focus();
         }
       });
-    if (v.some((l) => l.value === t))
+    if (A.some((l) => l.value === t))
       return null;
     const le = n.some((l) => l.value === t);
     return /* @__PURE__ */ r(m.Option, {
@@ -139,11 +139,11 @@ import '../../../../styles/combobox-with-api-pagination.css';const Ae = "_contai
       value: t,
       children: /* @__PURE__ */ r(ce, {
         className: N(c.highlightOptionText, le && c.selected),
-        value: R || t
+        value: C || t
       })
     });
   }, re = (e) => {
-    if (g == null || g(e), y && e === "") {
+    if (g == null || g(e), R && e === "") {
       O.current = !1;
       return;
     }
@@ -159,7 +159,7 @@ import '../../../../styles/combobox-with-api-pagination.css';const Ae = "_contai
   const [se, {
     rootRef: ae,
     isVisible: S
-  }] = ve({
+  }] = Ae({
     rootMargin: Se
   });
   Oe(() => {
@@ -172,27 +172,27 @@ import '../../../../styles/combobox-with-api-pagination.css';const Ae = "_contai
       clearTimeout(t);
     };
   }, [S]);
-  const ie = C(() => {
+  const ie = y(() => {
     const e = o.hasNextPage ? {
-      displayValue: L,
-      value: L
-    } : null, t = !e && o.hasError && !o.isEmpty ? {
       displayValue: E,
       value: E
+    } : null, t = !e && o.hasError && !o.isEmpty ? {
+      displayValue: v,
+      value: v
     } : null;
-    return [...o.items, ...v, e, t].filter(Boolean);
-  }, [o.hasNextPage, o.hasError, o.isEmpty, o.items, v]);
+    return [...o.items, ...A, e, t].filter(Boolean);
+  }, [o.hasNextPage, o.hasError, o.isEmpty, o.items, A]);
   return /* @__PURE__ */ r(m, {
     ...X,
     ref: ue(x, h),
     as: "input",
     className: N({
-      [c.disabled]: y
+      [c.disabled]: R
     }, Q),
     clearButtonAriaLabel: d(a.clearButtonAriaLabel),
     clearOnBlur: !1,
     "data-target-id": w,
-    disabled: K || y && b,
+    disabled: K || R && b,
     displaySingleSelectionAsChip: b,
     displayValue: (e) => e.displayValue || e.value,
     endComboboxIcon: Ve,

package/dist/styles/combobox-with-api-pagination.css

@@ -1 +1 @@
-._container_syvk5_1{display:flex;gap:var(--space-1);justify-content:center}._disabled_syvk5_7._disabled_syvk5_7{opacity:unset}._highlightOptionText_syvk5_11 [data-user-value]{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)}._highlightOptionText_syvk5_11 [data-autocomplete-value]{color:var(--text-text-on-light-secondary)}._highlightOptionText_syvk5_11._selected_syvk5_23,._highlightOptionText_syvk5_11._selected_syvk5_23 span{color:var(--text-text-on-light);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)}._option_syvk5_34:nth-last-child(1 of._option_syvk5_34){scroll-margin-block-end:var(--space-12)}._errorComboboxOption_syvk5_38[role=option]{display:flex;align-items:center;justify-content:center}._errorComboboxOption_syvk5_38[role=option] ._errorComboboxOptionText_syvk5_43{display:flex;gap:var(--space-1);align-items:center}
+._container_19k3s_2{display:flex;gap:var(--space-1);justify-content:center}._disabled_19k3s_8._disabled_19k3s_8{opacity:unset}._highlightOptionText_19k3s_12 [data-user-value]{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)}._highlightOptionText_19k3s_12 [data-autocomplete-value]{color:var(--text-text-on-light-secondary)}._highlightOptionText_19k3s_12._selected_19k3s_24,._highlightOptionText_19k3s_12._selected_19k3s_24 span{color:var(--text-text-on-light);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)}._option_19k3s_35:nth-last-child(1 of._option_19k3s_35){scroll-margin-block-end:var(--space-12)}._errorComboboxOption_19k3s_39[role=option]{display:flex;align-items:center;justify-content:center}._errorComboboxOption_19k3s_39[role=option] ._errorComboboxOptionText_19k3s_44{display:flex;gap:var(--space-1);align-items:center}

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

@@ -1 +1 @@
-._container_z81ug_1{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_z81ug_1._disabled_z81ug_12{opacity:.1}._container_z81ug_1 ._label_z81ug_15{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_z81ug_1 ._label_z81ug_15:not(._hiddenLabel_z81ug_27){margin-block-end:var(--space-2)}._container_z81ug_1 ._comboboxContainer_z81ug_30{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_z81ug_1 ._comboboxContainer_z81ug_30._withComboboxButtons_z81ug_46{padding-inline-end:var(--space-10)}._container_z81ug_1 ._comboboxContainer_z81ug_30: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_z81ug_1 ._comboboxContainer_z81ug_30:not(:disabled)._error_z81ug_54,._container_z81ug_1 ._comboboxContainer_z81ug_30: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_z81ug_1 ._comboboxContainer_z81ug_30 ._textInputWrapper_z81ug_62{display:flex;flex:content;gap:var(--space-2);align-items:center}._container_z81ug_1 ._comboboxContainer_z81ug_30 ._textInputWrapper_z81ug_62 ._textInput_z81ug_62{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_z81ug_1 ._comboboxContainer_z81ug_30 ._textInputWrapper_z81ug_62 ._errorIcon_z81ug_84 path{fill:var(--icon-icon-error-on-light)}._container_z81ug_1 ._comboboxContainer_z81ug_30 ._textInputWrapper_z81ug_62 ._comboboxButtons_z81ug_87{position:absolute;top:var(--space-2);right:var(--space-2);display:flex;align-items:center}._container_z81ug_1 ._comboboxContainer_z81ug_30._withChips_z81ug_94{max-height:calc(2 * var(--space-2) + 3 * var(--space-6));padding-block:calc((40px - var(--space-7)) / 2 - var(--border-1))}._container_z81ug_1 ._comboboxContainer_z81ug_30._withChips_z81ug_94:not(:disabled)._error_z81ug_54{padding-block:calc((40px - var(--space-7)) / 2 - var(--border-2))}._container_z81ug_1 ._comboboxContainer_z81ug_30._withChips_z81ug_94:not(:disabled):has(input:focus){padding-block:calc((40px - var(--space-7)) / 2 - var(--border-2))}._container_z81ug_1 ._inlineError_z81ug_104{margin-block-start:var(--space-2)}._popover_z81ug_108{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_z81ug_108 ul{padding-inline-start:0}._popover_z81ug_108 ._option_z81ug_134{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_z81ug_108 ._option_z81ug_134[aria-disabled]{opacity:.1}._popover_z81ug_108 ._option_z81ug_134[data-active-item]:not([aria-disabled]){background-color:var(--surface-menu-surface-focus);border:var(--border-2) solid var(--outline-focus-on-light)}._popover_z81ug_108 ._option_z81ug_134:hover{background-color:var(--surface-menu-surface-hover)}._popover_z81ug_108 ._option_z81ug_134 ._indicator_z81ug_157{position:absolute;top:0;left:var(--space-2);display:flex;align-items:center;justify-content:center;height:var(--size-9)}._popover_z81ug_108 ._option_z81ug_134 ._indicator_z81ug_157 ._indicatorIcon_z81ug_166 path{fill:var(--icon-icon-on-light)}._popover_z81ug_108 ._optionWithIndicator_z81ug_169{padding-inline:var(--space-10) var(--space-2)}._popover_z81ug_108 ._loadingIndicator_z81ug_172{position:unset}._popover_z81ug_108 ._noResultOption_z81ug_175{color:var(--text-text-on-light);text-align:center;-webkit-user-select:none;user-select:none}
+._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}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/combobox-with-api",
-    "version": "1.5.1",
+    "version": "1.5.3",
     "peerDependencies": {
         "@ariakit/react": "0.4.15",
         "@box/blueprint-web": "^10.3.1",
@@ -11,13 +11,13 @@
         "react-intl": "^6.4.2"
     },
     "dependencies": {
-        "@box/tree": "^1.4.0",
+        "@box/tree": "^1.4.1",
         "react-accessible-treeview": "2.9.0"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^12.92.0",
-        "@box/blueprint-web-assets": "^4.76.0",
-        "@box/storybook-utils": "^0.14.12",
+        "@box/blueprint-web": "^12.92.1",
+        "@box/blueprint-web-assets": "^4.76.2",
+        "@box/storybook-utils": "^0.14.13",
         "react": "^18.3.0",
         "react-dom": "^18.3.0"
     },