@box/combobox-with-api 0.51.31 → 0.52.1

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

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

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

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

package/dist/i18n/en-x-pseudo.js

@@ -1,10 +1,10 @@
 export default {
-  "comboboxWithApi.apiError": "⟦萬萬萬萬萬萬萬萬萬萬萬萬 Ćøûľďи'ť ľõåď гêśùļŧѕ. Ċľìĉĸ ťó ţяỳ ãĝáįπ. 國國國國國國國國國國國國⟧",
-  "comboboxWithApiPagination.clearButtonAriaLabel": "⟦萬萬萬萬萬萬萬 Čļёâг ĩпΡµτ åηď şêļèçţιőπ 國國國國國國國⟧",
-  "comboboxWithApiPagination.errorAction": "⟦萬 Řєľŏąď 國⟧",
-  "comboboxWithApiPagination.errorIconLabel": "⟦萬 Ėŗřõŗ 國⟧",
-  "comboboxWithApiPagination.errorMessage": "⟦萬萬萬萬萬萬 ₣άĭĺέď ţσ ļøąď őΡťìôňś 國國國國國國⟧",
-  "comboboxWithApiPagination.loadingAriaLabel": "⟦萬萬 Ľôáďīŋġ... 國國⟧",
-  "comboboxWithApiPagination.loadingMoreAriaLabel": "⟦萬萬萬萬 Ľόåďïпĝ móѓè... 國國國國⟧",
-  "comboboxWithApiPagination.noResults": "⟦萬萬萬萬 Йο ŕĕŝцĺŧŝ ƒõůňď 國國國國⟧"
+  "comboboxWithApi.apiError": "⟦萬萬萬萬萬萬萬萬萬萬萬萬 Ćόüĺďń'ţ ļøąď ґěśùļŧś. Çľіçĸ ťο τгγ ăĝăίи. 國國國國國國國國國國國國⟧",
+  "comboboxWithApiPagination.clearButtonAriaLabel": "⟦萬萬萬萬萬萬萬 Ćĺëäґ ιпΡůτ åńď şèľėĉτіŏη 國國國國國國國⟧",
+  "comboboxWithApiPagination.errorAction": "⟦萬 Ŕëĺóǻď 國⟧",
+  "comboboxWithApiPagination.errorIconLabel": "⟦萬 Ēѓгоя 國⟧",
+  "comboboxWithApiPagination.errorMessage": "⟦萬萬萬萬萬萬 ₣äįľεď τσ ļóäď õΡŧίöʼnѕ 國國國國國國⟧",
+  "comboboxWithApiPagination.loadingAriaLabel": "⟦萬萬 Ļσãďĭňġ... 國國⟧",
+  "comboboxWithApiPagination.loadingMoreAriaLabel": "⟦萬萬萬萬 Ŀõάďïπġ mōŗę... 國國國國⟧",
+  "comboboxWithApiPagination.noResults": "⟦萬萬萬萬 Ņσ гěşūļŧś ƒöůńď 國國國國⟧"
 }

package/dist/i18n/en-x-pseudo.properties

@@ -1,16 +1,16 @@
 # Error message displayed as combobox item when an API failed and the suggestions could not load
-comboboxWithApi.apiError = ⟦萬萬萬萬萬萬萬萬萬萬萬萬 Ćøûľďи'ť ľõåď гêśùļŧѕ. Ċľìĉĸ ťó ţяỳ ãĝáįπ. 國國國國國國國國國國國國⟧
+comboboxWithApi.apiError = ⟦萬萬萬萬萬萬萬萬萬萬萬萬 Ćόüĺďń'ţ ļøąď ґěśùļŧś. Çľіçĸ ťο τгγ ăĝăίи. 國國國國國國國國國國國國⟧
 # Aria label for the clear button visible at the end of the combobox. When clicked, it will clear all text in the input, as well as the current selection.
-comboboxWithApiPagination.clearButtonAriaLabel = ⟦萬萬萬萬萬萬萬 Čļёâг ĩпΡµτ åηď şêļèçţιőπ 國國國國國國國⟧
+comboboxWithApiPagination.clearButtonAriaLabel = ⟦萬萬萬萬萬萬萬 Ćĺëäґ ιпΡůτ åńď şèľėĉτіŏη 國國國國國國國⟧
 # Error message displayed resembling button that calls to action to reload the results
-comboboxWithApiPagination.errorAction = ⟦萬 Řєľŏąď 國⟧
+comboboxWithApiPagination.errorAction = ⟦萬 Ŕëĺóǻď 國⟧
 # Aria-label text for the error icon in the loading results error message
-comboboxWithApiPagination.errorIconLabel = ⟦萬 Ėŗřõŗ 國⟧
+comboboxWithApiPagination.errorIconLabel = ⟦萬 Ēѓгоя 國⟧
 # Error message displayed as inline notice that informs the user that the options failed to load
-comboboxWithApiPagination.errorMessage = ⟦萬萬萬萬萬萬 ₣άĭĺέď ţσ ļøąď őΡťìôňś 國國國國國國⟧
+comboboxWithApiPagination.errorMessage = ⟦萬萬萬萬萬萬 ₣äįľεď τσ ļóäď õΡŧίöʼnѕ 國國國國國國⟧
 # Visually hidden aria-label text for the loading spinner
-comboboxWithApiPagination.loadingAriaLabel = ⟦萬萬 Ľôáďīŋġ... 國國⟧
+comboboxWithApiPagination.loadingAriaLabel = ⟦萬萬 Ļσãďĭňġ... 國國⟧
 # Visually hidden aria-label text for the loading spinner show when loading more results from infinite scrolling list
-comboboxWithApiPagination.loadingMoreAriaLabel = ⟦萬萬萬萬 Ľόåďïпĝ móѓè... 國國國國⟧
+comboboxWithApiPagination.loadingMoreAriaLabel = ⟦萬萬萬萬 Ŀõάďïπġ mōŗę... 國國國國⟧
 # Message displayed when no results are found in the combobox
-comboboxWithApiPagination.noResults = ⟦萬萬萬萬 Йο ŕĕŝцĺŧŝ ƒõůňď 國國國國⟧
+comboboxWithApiPagination.noResults = ⟦萬萬萬萬 Ņσ гěşūļŧś ƒöůńď 國國國國⟧

package/dist/types/lib/components/combobox-with-api-pagination/combobox-with-api-pagination.d.ts

@@ -7,6 +7,8 @@ export declare const ComboboxWithApiPagination: import('react').ForwardRefExotic
     onInputValueChange?: (inputValue: string) => void;
     multiselect?: boolean;
     onValueChange?: (selectedOptions: BaseOptionType[]) => void;
+    onOpenChange?: (isOpen: boolean) => void;
+    initialOpen?: boolean;
     value?: BaseOptionType[];
     defaultValue?: BaseOptionType[];
     disabled?: boolean;

package/dist/types/lib/components/combobox-with-api-pagination/types.d.ts

@@ -39,6 +39,8 @@ export type ComboboxWithApiPaginationProps<T extends BaseOptionType> = {
     onInputValueChange?: (inputValue: string) => void;
     multiselect?: boolean;
     onValueChange?: (selectedOptions: T[]) => void;
+    onOpenChange?: (isOpen: boolean) => void;
+    initialOpen?: boolean;
     value?: T[];
     defaultValue?: T[];
     disabled?: boolean;

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

@@ -9,6 +9,9 @@ export declare const ComboboxWithApiTreeView: import('react').ForwardRefExoticCo
     onInputValueChange?: (inputValue: string) => void;
     multiselect?: boolean;
     onValueChange?: (selectedOptions: TreeOptionType[]) => void;
+    onOpenChange?: (isOpen: boolean) => void;
+    initialOpen?: boolean;
+    closeOnSelection?: boolean;
     value?: TreeOptionType[];
     defaultValue?: TreeOptionType[];
     disabled?: boolean;

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

@@ -48,6 +48,9 @@ export type ComboboxWithApiTreeViewProps<T extends TreeOptionType> = {
     onInputValueChange?: (inputValue: string) => void;
     multiselect?: boolean;
     onValueChange?: (selectedOptions: T[]) => void;
+    onOpenChange?: (isOpen: boolean) => void;
+    initialOpen?: boolean;
+    closeOnSelection?: boolean;
     value?: T[];
     defaultValue?: T[];
     disabled?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/combobox-with-api",
-    "version": "0.51.31",
+    "version": "0.52.1",
     "peerDependencies": {
         "@ariakit/react": "0.4.15",
         "@box/blueprint-web": "^10.3.1",
@@ -11,11 +11,11 @@
         "react-intl": "^6.4.2"
     },
     "dependencies": {
-        "@box/tree": "^0.56.15",
+        "@box/tree": "^0.57.0",
         "react-accessible-treeview": "2.9.0"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^12.59.0",
+        "@box/blueprint-web": "^12.59.1",
         "@box/blueprint-web-assets": "^4.63.0",
         "@box/storybook-utils": "^0.13.18",
         "react": "^18.3.0",