@box/metadata-editor 0.62.0 → 0.63.0

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box/metadata-editor",
-  "version": "0.62.0",
+  "version": "0.63.0",
   "peerDependencies": {
     "@ariakit/react": "0.4.5",
     "@box/blueprint-web": "^7.30.3",
@@ -53,5 +53,5 @@
     "**/*.css"
   ],
   "license": "SEE LICENSE IN LICENSE",
-  "gitHead": "ab664c931e214b862035e211809f92f711a0a2d4"
+  "gitHead": "ed629b47ecaf845602ef01a10843bf1831b8c028"
 }