@box/combobox-with-api 1.15.9 → 1.16.0

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

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

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

@@ -1,6 +1,6 @@
-let C = /* @__PURE__ */ function(E) {
+let C = /* @__PURE__ */ (function(E) {
   return E.NOT_STARTED = "NOT_STARTED", E.IN_PROGRESS = "IN_PROGRESS", E.ERROR = "ERROR", E.SUCCESS = "SUCCESS", E.CANCELLED = "CANCELLED", E;
-}({});
+})({});
 export {
   C as RequestStates
 };

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

@@ -1,9 +1,9 @@
 import { useReducer as O } from "react";
 import { RequestStates as u } from "./request.js";
 import { isAbortError as I } from "./utils/is-abort-error.js";
-var s = /* @__PURE__ */ function(r) {
+var s = /* @__PURE__ */ (function(r) {
   return r.LOAD_MORE = "LOAD_MORE", r.RELOAD = "RELOAD", r.SEARCH = "SEARCH", r.SET_ERROR = "SET_ERROR", r.SET_LOADING = "SET_LOADING", r;
-}(s || {});
+})(s || {});
 function a(r, e) {
   switch (e.type) {
     case s.LOAD_MORE:
@@ -63,8 +63,7 @@ function m(r, e) {
   return E(r, e) || S(r, e);
 }
 function p(r, e) {
-  var t;
-  E(r, e) && e.abortController.abort(), S(r, e) && ((t = r.abortController) == null || t.abort());
+  E(r, e) && e.abortController.abort(), S(r, e) && r.abortController?.abort();
 }
 function h(r, e) {
   return S(r, e);

package/dist/esm/lib/components/combobox-with-api-pagination/utils/use-controllable-state.js

@@ -1,40 +1,37 @@
-import * as s from "react";
+import * as o from "react";
 function a(e) {
-  const n = s.useRef(e);
-  return s.useEffect(() => {
-    n.current = e;
-  }), s.useMemo(() => (...o) => {
-    var t;
-    return (t = n.current) == null ? void 0 : t.call(n, ...o);
-  }, []);
+  const c = o.useRef(e);
+  return o.useEffect(() => {
+    c.current = e;
+  }), o.useMemo(() => (...t) => c.current?.(...t), []);
 }
-function R({
+function v({
   prop: e,
-  defaultProp: n,
-  onChange: o = () => {
+  defaultProp: c,
+  onChange: t = () => {
   }
 }) {
-  const [t, c] = C({
-    defaultProp: n,
-    onChange: o
-  }), r = e !== void 0, i = r ? e : t, l = a(o), d = s.useCallback((u) => {
+  const [n, s] = R({
+    defaultProp: c,
+    onChange: t
+  }), r = e !== void 0, i = r ? e : n, l = a(t), d = o.useCallback((u) => {
     if (r) {
       const f = typeof u == "function" ? u(e) : u;
       f !== e && l(f);
     } else
-      c(u);
-  }, [r, e, c, l]);
+      s(u);
+  }, [r, e, s, l]);
   return [i, d];
 }
-function C({
+function R({
   defaultProp: e,
-  onChange: n
+  onChange: c
 }) {
-  const o = s.useState(e), [t] = o, c = s.useRef(t), r = a(n);
-  return s.useEffect(() => {
-    c.current !== t && (r(t), c.current = t);
-  }, [t, c, r]), o;
+  const t = o.useState(e), [n] = t, s = o.useRef(n), r = a(c);
+  return o.useEffect(() => {
+    s.current !== n && (r(n), s.current = n);
+  }, [n, s, r]), t;
 }
 export {
-  R as useControllableState
+  v as useControllableState
 };

package/dist/esm/lib/components/combobox-with-api-pagination/utils/use-intersection-observer.js

@@ -1,87 +1,85 @@
-import { useState as C, useRef as y, useCallback as a } from "react";
-const k = "0px", p = [0];
-function w() {
-  const o = /* @__PURE__ */ new Map();
-  function b({
-    root: c,
-    rootMargin: s,
-    threshold: u
+import { useState as y, useRef as R, useCallback as f } from "react";
+const k = "0px", g = [0];
+function C() {
+  const b = /* @__PURE__ */ new Map();
+  function a({
+    root: s,
+    rootMargin: t,
+    threshold: c
   }) {
-    let r = o.get(c);
-    r || (r = /* @__PURE__ */ new Map(), o.set(c, r));
+    let r = b.get(s);
+    r || (r = /* @__PURE__ */ new Map(), b.set(s, r));
     const i = JSON.stringify({
-      rootMargin: s,
-      threshold: u
+      rootMargin: t,
+      threshold: c
     });
-    let e = r.get(i);
-    if (!e) {
-      const n = /* @__PURE__ */ new Map();
-      e = {
-        observer: new IntersectionObserver((R) => {
-          R.forEach((v) => {
-            const t = n.get(v.target);
-            t == null || t(v);
+    let n = r.get(i);
+    if (!n) {
+      const e = /* @__PURE__ */ new Map();
+      n = {
+        observer: new IntersectionObserver((O) => {
+          O.forEach((v) => {
+            e.get(v.target)?.(v);
           });
         }, {
-          root: c,
-          rootMargin: s,
-          threshold: u
+          root: s,
+          rootMargin: t,
+          threshold: c
         }),
-        entryCallbacks: n
-      }, r.set(i, e);
+        entryCallbacks: e
+      }, r.set(i, n);
     }
     return {
-      observe: (n, l) => {
-        e == null || e.entryCallbacks.set(n, l), e == null || e.observer.observe(n);
+      observe: (e, l) => {
+        n?.entryCallbacks.set(e, l), n?.observer.observe(e);
       },
-      unobserve: (n) => {
-        e == null || e.entryCallbacks.delete(n), e == null || e.observer.unobserve(n);
+      unobserve: (e) => {
+        n?.entryCallbacks.delete(e), n?.observer.unobserve(e);
       }
     };
   }
   return {
-    getObserver: b
+    getObserver: a
   };
 }
-const M = w();
-function T(o) {
-  const b = (o == null ? void 0 : o.rootMargin) ?? k, c = (o == null ? void 0 : o.threshold) ?? p, s = y(null), u = y(null), r = y(null), [i, e] = C(), n = a(() => {
-    const t = s.current;
-    if (!t) {
-      e(void 0);
+const E = C();
+function p(b) {
+  const a = b?.rootMargin ?? k, s = b?.threshold ?? g, t = R(null), c = R(null), r = R(null), [i, n] = y(), e = f(() => {
+    const o = t.current;
+    if (!o) {
+      n(void 0);
       return;
     }
-    const f = M.getObserver({
-      root: u.current,
-      rootMargin: b,
-      threshold: c
+    const u = E.getObserver({
+      root: c.current,
+      rootMargin: a,
+      threshold: s
     });
-    f.observe(t, (E) => {
-      e(E);
-    }), r.current = f;
-  }, [b, c]), l = a(() => {
-    const t = r.current, f = s.current;
-    f && (t == null || t.unobserve(f)), r.current = null;
-  }, []), R = a((t) => {
-    l(), s.current = t, n();
-  }, [n, l]), v = a((t) => {
-    l(), u.current = t, n();
-  }, [n, l]);
-  return [R, {
+    u.observe(o, (h) => {
+      n(h);
+    }), r.current = u;
+  }, [a, s]), l = f(() => {
+    const o = r.current, u = t.current;
+    u && o?.unobserve(u), r.current = null;
+  }, []), O = f((o) => {
+    l(), t.current = o, e();
+  }, [e, l]), v = f((o) => {
+    l(), c.current = o, e();
+  }, [e, l]);
+  return [O, {
     entry: i,
     rootRef: v
   }];
 }
-function V(o) {
-  var i;
-  const [b, c] = T(o), s = !!((i = c.entry) != null && i.isIntersecting), [u, r] = C(s);
-  return s && !u && r(!0), [b, {
-    ...c,
-    isVisible: s,
-    wasEverVisible: u
+function w(b) {
+  const [a, s] = p(b), t = !!s.entry?.isIntersecting, [c, r] = y(t);
+  return t && !c && r(!0), [a, {
+    ...s,
+    isVisible: t,
+    wasEverVisible: c
   }];
 }
 export {
-  w as createObserverCache,
-  V as useTrackVisibility
+  C as createObserverCache,
+  w as useTrackVisibility
 };