@box/metadata-editor 0.54.0 → 0.55.0

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

@@ -1,46 +1,46 @@
 import "../../../../styles/combobox-with-api-pagination.css";
-import { ComboboxItemValue as U } from "@ariakit/react";
-import { Combobox as p, LoadingIndicator as q, InlineNotice as H, Text as J } from "@box/blueprint-web";
-import { Search as K, Loader as Q } from "@box/blueprint-web-assets/icons/Fill";
-import { IconIconOnLightSecondary as X, Size6 as C, Size1 as Y } from "@box/blueprint-web-assets/tokens/tokens";
-import { useRef as E, useCallback as Z, useMemo as v, useEffect as $, forwardRef as oo } from "react";
-import { useIntl as T, FormattedMessage as y } from "react-intl";
+import { ComboboxItemValue as J } from "@ariakit/react";
+import { Combobox as p, LoadingIndicator as K, InlineNotice as Q, Text as X } from "@box/blueprint-web";
+import { Search as Y, Loader as Z } from "@box/blueprint-web-assets/icons/Fill";
+import { IconIconOnLightSecondary as $, Size6 as E, Size1 as oo } from "@box/blueprint-web-assets/tokens/tokens";
+import { useRef as y, useCallback as eo, useMemo as _, useEffect as to, forwardRef as ro } from "react";
+import { useIntl as T, FormattedMessage as v } from "react-intl";
 import i from "./messages.js";
-import { useAsyncList as eo } from "./use-async-list.js";
-import { useControllableState as ro } from "./utils/use-controllable-state.js";
-import { useTrackVisibility as to } from "./utils/use-intersection-observer.js";
-import { jsx as t, jsxs as I, Fragment as no } from "react/jsx-runtime";
-const io = "_container_16dlc_1", ao = "_highlightOptionText_16dlc_7", so = "_option_16dlc_20", lo = "_errorComboboxOption_16dlc_24", co = "_errorComboboxOptionText_16dlc_29", d = {
-  container: io,
-  highlightOptionText: ao,
-  option: so,
-  errorComboboxOption: lo,
-  errorComboboxOptionText: co
-}, M = /* @__PURE__ */ oo(({
-  onTryAgain: f
-}, h) => {
+import { useAsyncList as no } from "./use-async-list.js";
+import { useControllableState as io } from "./utils/use-controllable-state.js";
+import { useTrackVisibility as ao } from "./utils/use-intersection-observer.js";
+import { jsx as r, jsxs as I, Fragment as so } from "react/jsx-runtime";
+const lo = "_container_16dlc_1", co = "_highlightOptionText_16dlc_7", uo = "_option_16dlc_20", po = "_errorComboboxOption_16dlc_24", mo = "_errorComboboxOptionText_16dlc_29", m = {
+  container: lo,
+  highlightOptionText: co,
+  option: uo,
+  errorComboboxOption: po,
+  errorComboboxOptionText: mo
+}, M = /* @__PURE__ */ ro(({
+  onTryAgain: h
+}, f) => {
   const {
     formatMessage: s
   } = T();
-  return /* @__PURE__ */ I(no, {
-    children: [/* @__PURE__ */ t(H, {
+  return /* @__PURE__ */ I(so, {
+    children: [/* @__PURE__ */ r(Q, {
       variant: "error",
       variantIconAriaLabel: s(i.loadingResultsErrorIconLabel),
-      children: /* @__PURE__ */ t(y, {
+      children: /* @__PURE__ */ r(v, {
         ...i.loadingResultsErrorMessage
       })
-    }), /* @__PURE__ */ t(p.Option, {
-      ref: h,
-      className: d.errorComboboxOption,
-      onClick: f,
-      children: /* @__PURE__ */ I(J, {
+    }), /* @__PURE__ */ r(p.Option, {
+      ref: f,
+      className: m.errorComboboxOption,
+      onClick: h,
+      children: /* @__PURE__ */ I(X, {
         as: "span",
-        className: d.errorComboboxOptionText,
+        className: m.errorComboboxOptionText,
         color: "textOnLightLink",
         variant: "bodyDefaultBold",
-        children: [/* @__PURE__ */ t(y, {
+        children: [/* @__PURE__ */ r(v, {
           ...i.loadingResultsErrorAction
-        }), /* @__PURE__ */ t(Q, {
+        }), /* @__PURE__ */ r(Z, {
           color: "currentColor",
           height: "12px",
           width: "12px"
@@ -48,144 +48,148 @@ const io = "_container_16dlc_1", ao = "_highlightOptionText_16dlc_7", so = "_opt
       })
     })]
   });
-}), x = "__LOADING__", O = "__LOADING_ERROR__", uo = "0px 0px 20px 0px", mo = /* @__PURE__ */ t(K, {
-  color: X,
-  height: C,
+}), R = "__LOADING__", L = "__LOADING_ERROR__", ho = "0px 0px 20px 0px", fo = /* @__PURE__ */ r(Y, {
+  color: $,
+  height: E,
   role: "presentation",
   style: {
-    padding: Y,
+    padding: oo,
     boxSizing: "border-box"
   },
-  width: C
-}), Eo = (f) => {
+  width: E
+}), Io = (h) => {
   const {
-    defaultFetcher: h,
+    defaultFetcher: f,
     onInputValueChange: s,
-    value: N,
-    onValueChange: S,
-    noResultMessage: V,
-    defaultValue: D,
+    value: V,
+    onValueChange: N,
+    noResultMessage: S,
+    defaultValue: D = [],
     loadingAriaLabel: P,
-    multiselect: _ = !1,
+    multiselect: c = !1,
     ...k
-  } = f, {
-    formatMessage: l
-  } = T(), g = E(null), o = eo({
+  } = h, {
+    formatMessage: u
+  } = T(), g = y(null), o = no({
     async load({
       marker: e,
-      searchInput: r,
-      signal: u
+      searchInput: t,
+      signal: O
     }) {
-      const m = await h({
-        signal: u,
+      const l = await f({
+        signal: O,
         marker: e,
-        searchInput: r
+        searchInput: t
       });
       return {
-        items: m.options,
-        marker: m.marker
+        items: l.options,
+        marker: l.marker
       };
     }
-  }), R = E(!1), F = Z(() => {
-    R.current || (o.reload(), R.current = !0);
-  }, []), [n, A] = ro({
-    prop: N,
+  }), C = y(!1), F = eo(() => {
+    C.current || (o.reload(), C.current = !0);
+  }, []), [n, b] = io({
+    prop: V,
     defaultProp: D,
-    onChange: S
-  }), b = v(() => Array.isArray(n) ? n.filter((e) => !o.items.some((r) => r.value === e.value)) : [], [n, o.items]), w = (e) => {
+    onChange: N
+  }), w = (e) => {
+    e === void 0 ? b([]) : Array.isArray(e) ? b(e) : b([e]);
+  }, B = _(() => n.length === 0 ? c ? [] : void 0 : c ? n : n[0], [c, n]), x = _(() => n.filter((e) => !o.items.some((t) => t.value === e.value)), [n, o.items]), z = (e) => {
     const {
-      value: r,
-      ...u
+      value: t,
+      displayValue: O,
+      ...l
     } = e;
-    if (r === x)
-      return o.hasNextPage ? /* @__PURE__ */ t(p.Option, {
-        ...u,
-        ref: G,
+    if (t === R)
+      return o.hasNextPage ? /* @__PURE__ */ r(p.Option, {
+        ...l,
+        ref: j,
         disabled: !0,
-        value: r,
-        children: /* @__PURE__ */ t(q, {
-          "aria-label": l(i.loadingMoreAriaLabel),
+        value: t,
+        children: /* @__PURE__ */ r(K, {
+          "aria-label": u(i.loadingMoreAriaLabel),
           style: {
             position: "unset"
           }
         })
       }) : null;
-    if (r === O && o.hasError && !o.isEmpty)
-      return /* @__PURE__ */ t(M, {
+    if (t === L && o.hasError && !o.isEmpty)
+      return /* @__PURE__ */ r(M, {
         onTryAgain: () => {
           var a;
           o.loadMore(), (a = g.current) == null || a.focus();
         }
       });
-    if (b.some((a) => a.value === r))
+    if (x.some((a) => a.value === t))
       return null;
-    const m = () => n ? Array.isArray(n) ? n.some((a) => a.value === r) : n.value === r : !1;
-    return /* @__PURE__ */ t(p.Option, {
-      ...u,
-      className: d.option,
-      disabled: m(),
-      value: r,
-      children: /* @__PURE__ */ t(U, {
-        className: d.highlightOptionText,
-        value: r
+    const H = () => n.some((a) => a.value === t);
+    return /* @__PURE__ */ r(p.Option, {
+      ...l,
+      className: m.option,
+      disabled: H(),
+      value: t,
+      children: /* @__PURE__ */ r(J, {
+        className: m.highlightOptionText,
+        value: O || t
       })
     });
-  }, B = (e) => {
-    s == null || s(e), o.search(e), e.trim() === "" && !_ && A(null);
-  }, z = () => {
+  }, G = (e) => {
+    s == null || s(e), o.search(e);
+  }, W = () => {
     var e;
     o.reload(), (e = g.current) == null || e.focus();
   };
-  let c;
-  o.hasError && !o.isLoading ? c = /* @__PURE__ */ t(M, {
-    onTryAgain: z
-  }) : o.isEmpty && !o.isLoading ? c = V || l(i.noResults) : c = void 0;
-  const [G, {
-    rootRef: W,
-    isVisible: L
-  }] = to({
-    rootMargin: uo
+  let d;
+  o.hasError && !o.isLoading ? d = /* @__PURE__ */ r(M, {
+    onTryAgain: W
+  }) : o.isEmpty && !o.isLoading ? d = S || u(i.noResults) : d = void 0;
+  const [j, {
+    rootRef: U,
+    isVisible: A
+  }] = ao({
+    rootMargin: ho
   });
-  $(() => {
-    if (!(L && o.hasNextPage))
+  to(() => {
+    if (!(A && o.hasNextPage))
       return;
-    const r = setTimeout(() => {
+    const t = setTimeout(() => {
       o.loadMore();
     }, 100);
     return () => {
-      clearTimeout(r);
+      clearTimeout(t);
     };
-  }, [L]);
-  const j = v(() => {
+  }, [A]);
+  const q = _(() => {
     const e = o.hasNextPage ? {
-      id: x,
-      value: x
-    } : null, r = !e && o.hasError && !o.isEmpty ? {
-      id: O,
-      value: O
+      displayValue: R,
+      value: R
+    } : null, t = !e && o.hasError && !o.isEmpty ? {
+      displayValue: L,
+      value: L
     } : null;
-    return [...o.items, ...b, e, r].filter(Boolean);
-  }, [o.hasNextPage, o.hasError, o.isEmpty, o.items, b]);
-  return /* @__PURE__ */ t(p, {
+    return [...o.items, ...x, e, t].filter(Boolean);
+  }, [o.hasNextPage, o.hasError, o.isEmpty, o.items, x]);
+  return /* @__PURE__ */ r(p, {
     as: "input",
     ...k,
     ref: g,
-    clearButtonAriaLabel: l(i.clearButtonAriaLabel),
-    endComboboxIcon: mo,
+    clearButtonAriaLabel: u(i.clearButtonAriaLabel),
+    displayValue: (e) => e.displayValue || e.value,
+    endComboboxIcon: fo,
     focusLoop: !1,
-    getPopoverRef: W,
+    getPopoverRef: U,
     loading: o.isReloading,
-    loadingAriaLabel: P || l(i.loadingAriaLabel),
-    multiselect: _,
-    noResultMessage: c,
+    loadingAriaLabel: P || u(i.loadingAriaLabel),
+    multiselect: c,
+    noResultMessage: d,
     onFocus: F,
-    onInputValueChange: B,
-    onValueChange: A,
-    options: j,
-    renderOption: w,
-    value: n
+    onInputValueChange: G,
+    onValueChange: w,
+    options: q,
+    renderOption: z,
+    value: B
   });
 };
 export {
-  Eo as ComboboxWithApiPagination
+  Io as ComboboxWithApiPagination
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box/metadata-editor",
-  "version": "0.54.0",
+  "version": "0.55.0",
   "peerDependencies": {
     "@ariakit/react": "0.4.5",
     "@box/blueprint-web": "^7.20.0",
@@ -52,5 +52,5 @@
     "**/*.css"
   ],
   "license": "SEE LICENSE IN LICENSE",
-  "gitHead": "c4e8483378415e000dd6bb2a9ca046d5176f98f0"
+  "gitHead": "c8b17c1172f3189aeab0378c577c87b79f3a837f"
 }

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

@@ -12,7 +12,7 @@ export interface FetcherResponse<T> {
     options: T[];
 }
 export interface BaseOptionType {
-    id?: string;
+    displayValue?: string;
     value: string;
 }
 interface BaseComboboxProps<T extends BaseOptionType, M extends boolean> {
@@ -21,9 +21,9 @@ interface BaseComboboxProps<T extends BaseOptionType, M extends boolean> {
     noResultMessage?: ReactElement | string;
     onInputValueChange?: (inputValue: string) => void;
     multiselect: M;
-    onValueChange?: (selectedOptions: M extends true ? T[] : T) => void;
-    value?: M extends true ? T[] : T;
-    defaultValue?: M extends true ? T[] : T;
+    onValueChange?: (selectedOptions: T[]) => void;
+    value?: T[];
+    defaultValue?: T[];
     label: string;
     loadingAriaLabel?: string;
     portalElement?: HTMLElement | (() => HTMLElement);