@box/metadata-editor 0.108.3 → 0.109.0

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

@@ -1,48 +1,48 @@
-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 { 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 M, Size1 as ue } 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 { forwardRef as k, useRef as v, useCallback as de, useMemo as R, useEffect as me } from "react";
+import { useIntl as F, FormattedMessage as S } 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 V, Fragment as ge } from "react/jsx-runtime";
+import '../../../../styles/combobox-with-api-pagination.css';const be = "_container_syvk5_1", xe = "_disabled_syvk5_7", _e = "_highlightOptionText_syvk5_11", Oe = "_selected_syvk5_23", ye = "_option_syvk5_34", ve = "_errorComboboxOption_syvk5_38", Re = "_errorComboboxOptionText_syvk5_43", a = {
   container: be,
-  disabled: ge,
-  highlightOptionText: xe,
-  selected: _e,
-  option: Oe,
-  errorComboboxOption: ye,
-  errorComboboxOptionText: ve
-}, S = /* @__PURE__ */ k(({
-  onTryAgain: A
+  disabled: xe,
+  highlightOptionText: _e,
+  selected: Oe,
+  option: ye,
+  errorComboboxOption: ve,
+  errorComboboxOptionText: Re
+}, N = /* @__PURE__ */ k(({
+  onTryAgain: L
 }, p) => {
   const {
     formatMessage: h
   } = F();
-  return /* @__PURE__ */ N(fe, {
-    children: [/* @__PURE__ */ r(ne, {
+  return /* @__PURE__ */ V(ge, {
+    children: [/* @__PURE__ */ r(ie, {
       variant: "error",
       variantIconAriaLabel: h(i.loadingResultsErrorIconLabel),
-      children: /* @__PURE__ */ r(V, {
+      children: /* @__PURE__ */ r(S, {
         ...i.loadingResultsErrorMessage
       })
     }), /* @__PURE__ */ r(m.Option, {
       ref: p,
       className: a.errorComboboxOption,
-      onClick: A,
-      children: /* @__PURE__ */ N(ie, {
+      onClick: L,
+      children: /* @__PURE__ */ V(se, {
         as: "span",
         className: a.errorComboboxOptionText,
         color: "textOnLightLink",
         variant: "bodyDefaultBold",
-        children: [/* @__PURE__ */ r(V, {
+        children: [/* @__PURE__ */ r(S, {
           ...i.loadingResultsErrorAction
-        }), /* @__PURE__ */ r(ae, {
+        }), /* @__PURE__ */ r(le, {
           color: "currentColor",
           height: "12px",
           width: "12px"
@@ -50,16 +50,16 @@ 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,
+}), C = "__LOADING__", A = "__LOADING_ERROR__", Ce = "0px 0px 20px 0px", Ae = /* @__PURE__ */ r(ae, {
+  color: ce,
   height: M,
   role: "presentation",
   style: {
-    padding: ce,
+    padding: ue,
     boxSizing: "border-box"
   },
   width: M
-}), De = /* @__PURE__ */ k(function(p, h) {
+}), we = /* @__PURE__ */ k(function(p, h) {
   const {
     defaultFetcher: P,
     onInputValueChange: f,
@@ -71,10 +71,11 @@ import '../../../../styles/combobox-with-api-pagination.css';const be = "_contai
     multiselect: l = !1,
     disabled: G,
     className: j,
-    ...U
+    displaySingleSelectionAsChip: U = !0,
+    ...q
   } = p, {
     formatMessage: u
-  } = F(), b = v(null), g = v(!0), e = me({
+  } = F(), g = v(null), b = v(!0), e = pe({
     async load({
       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 = v(!1), H = de(() => {
     E.current || (e.reload(), E.current = !0);
-  }, []), [n, x] = pe({
+  }, []), [n, x] = he({
     prop: D,
     defaultProp: W,
     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) => {
+  }), _ = !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]), O = R(() => n.filter((o) => !e.items.some((t) => t.value === o.value)), [n, e.items]), Q = (o) => {
     const {
       value: t,
       displayValue: y,
@@ -107,56 +108,56 @@ 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(N, {
         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))
       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: T(a.highlightOptionText, oe && a.selected),
         value: y || t
       })
     });
-  }, Q = (o) => {
+  }, X = (o) => {
     if (f == null || f(o), _ && o === "") {
-      g.current = !1;
+      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.hasError && !e.isLoading ? d = /* @__PURE__ */ r(N, {
+    onTryAgain: Y
   }) : e.isEmpty && !e.isLoading ? d = B || u(i.noResults) : d = void 0;
-  const [Y, {
-    rootRef: Z,
+  const [Z, {
+    rootRef: $,
     isVisible: I
-  }] = he({
-    rootMargin: Re
+  }] = fe({
+    rootMargin: Ce
   });
-  de(() => {
+  me(() => {
     if (!(I && e.hasNextPage))
       return;
     const t = setTimeout(() => {
@@ -166,41 +167,42 @@ import '../../../../styles/combobox-with-api-pagination.css';const be = "_contai
       clearTimeout(t);
     };
   }, [I]);
-  const $ = R(() => {
+  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 /* @__PURE__ */ r(m, {
     as: "input",
-    ...U,
-    ref: te(b, h),
+    ...q,
+    ref: re(g, h),
     className: T({
       [a.disabled]: _
     }, j),
     clearButtonAriaLabel: u(i.clearButtonAriaLabel),
     disabled: G || _,
+    displaySingleSelectionAsChip: U,
     displayValue: (o) => o.displayValue || o.value,
-    endComboboxIcon: Ce,
+    endComboboxIcon: Ae,
     focusLoop: !1,
-    getPopoverRef: Z,
+    getPopoverRef: $,
     loading: e.isReloading,
     loadingAriaLabel: z || 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
+  we as ComboboxWithApiPagination
 };

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

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

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

@@ -31,4 +31,5 @@ export type ComboboxWithApiPaginationProps<T extends BaseOptionType> = {
     portalElement?: HTMLElement | (() => HTMLElement);
     experimentalVirtualization?: boolean;
     className?: string;
+    displaySingleSelectionAsChip?: boolean;
 } & Labelable;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-editor",
-    "version": "0.108.3",
+    "version": "0.109.0",
     "peerDependencies": {
         "@ariakit/react": "0.4.15",
         "@box/blueprint-web": "^7.30.3",
@@ -15,7 +15,7 @@
     "devDependencies": {
         "@ariakit/react": "0.4.15",
         "@box/babel-plugin-target-attributes": "1.3.0",
-        "@box/blueprint-web": "^12.1.3",
+        "@box/blueprint-web": "^12.3.0",
         "@box/blueprint-web-assets": "^4.46.0",
         "@box/storybook-utils": "^0.12.5",
         "@testing-library/react": "^15.0.6",