@box/combobox-with-api 0.38.10 → 0.40.0

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

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

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

@@ -15,4 +15,5 @@ export declare const ComboboxWithApiPagination: import('react').ForwardRefExotic
     experimentalVirtualization?: boolean;
     className?: string;
     dataTargetId?: string;
+    displaySingleSelectionAsChip?: boolean;
 } & import('@box/blueprint-web').Labelable & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -47,4 +47,5 @@ export type ComboboxWithApiPaginationProps<T extends BaseOptionType> = {
     experimentalVirtualization?: boolean;
     className?: string;
     dataTargetId?: string;
+    displaySingleSelectionAsChip?: boolean;
 } & Labelable;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/combobox-with-api",
-    "version": "0.38.10",
+    "version": "0.40.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.8",
+        "@box/tree": "^0.48.9",
         "react-accessible-treeview": "2.9.0"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^12.2.0",
+        "@box/blueprint-web": "^12.3.0",
         "@box/blueprint-web-assets": "^4.46.0",
         "@box/storybook-utils": "^0.12.5",
         "react": "^18.3.0",