@box/combobox-with-api 0.41.2 → 0.42.0

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/combobox-with-api",
-    "version": "0.41.2",
+    "version": "0.42.0",
     "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.48.13",
+        "@box/tree": "^0.48.14",
         "react-accessible-treeview": "2.9.0"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^12.5.1",
+        "@box/blueprint-web": "^12.6.0",
         "@box/blueprint-web-assets": "^4.48.0",
         "@box/storybook-utils": "^0.13.1",
         "react": "^18.3.0",