@box/combobox-with-api 0.25.0

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

@@ -0,0 +1,207 @@
+import { ComboboxItemValue as oe } from "@ariakit/react";
+import { Combobox as m, LoadingIndicator as te, InlineNotice as re, Text as ne } from "@box/blueprint-web";
+import { Search as ie, Loader as se } from "@box/blueprint-web-assets/icons/Fill";
+import { IconIconOnLightSecondary as ae, Size6 as M, Size1 as le } from "@box/blueprint-web-assets/tokens/tokens";
+import { useForkRef as ce } from "@box/blueprint-web/lib-esm/utils/useForkRef";
+import T from "clsx";
+import { forwardRef as F, useRef as C, useCallback as ue, useMemo as L, useEffect as de } 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_1m7se_1", ge = "_disabled_1m7se_7", xe = "_highlightOptionText_1m7se_11", _e = "_selected_1m7se_23", Oe = "_option_1m7se_34", Re = "_errorComboboxOption_1m7se_38", Ce = "_errorComboboxOptionText_1m7se_43", a = {
+  container: be,
+  disabled: ge,
+  highlightOptionText: xe,
+  selected: _e,
+  option: Oe,
+  errorComboboxOption: Re,
+  errorComboboxOptionText: Ce
+}, S = /* @__PURE__ */ F(({
+  onTryAgain: y
+}, p) => {
+  const {
+    formatMessage: h
+  } = P();
+  return /* @__PURE__ */ N(fe, {
+    children: [/* @__PURE__ */ r(re, {
+      variant: "error",
+      variantIconAriaLabel: h(i.loadingResultsErrorIconLabel),
+      children: /* @__PURE__ */ r(V, {
+        ...i.loadingResultsErrorMessage
+      })
+    }), /* @__PURE__ */ r(m.Option, {
+      ref: p,
+      className: a.errorComboboxOption,
+      onClick: y,
+      children: /* @__PURE__ */ N(ne, {
+        as: "span",
+        className: a.errorComboboxOptionText,
+        color: "textOnLightLink",
+        variant: "bodyDefaultBold",
+        children: [/* @__PURE__ */ r(V, {
+          ...i.loadingResultsErrorAction
+        }), /* @__PURE__ */ r(se, {
+          color: "currentColor",
+          height: "12px",
+          width: "12px"
+        })]
+      })
+    })]
+  });
+}), A = "__LOADING__", E = "__LOADING_ERROR__", Le = "0px 0px 20px 0px", Ae = /* @__PURE__ */ r(ie, {
+  color: ae,
+  height: M,
+  role: "presentation",
+  style: {
+    padding: le,
+    boxSizing: "border-box"
+  },
+  width: M
+}), we = /* @__PURE__ */ F(function(p, h) {
+  const {
+    defaultFetcher: k,
+    onInputValueChange: f,
+    value: D,
+    onValueChange: w,
+    noResultMessage: B,
+    defaultValue: W = [],
+    loadingAriaLabel: z,
+    multiselect: l = !1,
+    disabled: G,
+    className: j,
+    ...U
+  } = p, {
+    formatMessage: u
+  } = P(), b = C(null), g = C(!0), e = me({
+    async load({
+      marker: o,
+      searchInput: t,
+      signal: R
+    }) {
+      const c = await k({
+        signal: R,
+        marker: o,
+        searchInput: t
+      });
+      return {
+        items: c.options,
+        marker: c.marker
+      };
+    }
+  }), v = C(!1), q = ue(() => {
+    v.current || (e.reload(), v.current = !0);
+  }, []), [n, x] = pe({
+    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 = L(() => n.length === 0 ? l ? [] : void 0 : l ? n : n[0], [l, n]), O = L(() => n.filter((o) => !e.items.some((t) => t.value === o.value)), [n, e.items]), K = (o) => {
+    const {
+      value: t,
+      displayValue: R,
+      ...c
+    } = o;
+    if (t === A)
+      return e.hasNextPage ? /* @__PURE__ */ r(m.Option, {
+        ...c,
+        ref: Y,
+        disabled: !0,
+        value: t,
+        children: /* @__PURE__ */ r(te, {
+          "aria-label": u(i.loadingMoreAriaLabel),
+          style: {
+            position: "unset"
+          }
+        })
+      }) : null;
+    if (t === E && e.hasError && !e.isEmpty)
+      return /* @__PURE__ */ r(S, {
+        onTryAgain: () => {
+          var s;
+          e.loadMore(), (s = b.current) == null || s.focus();
+        }
+      });
+    if (O.some((s) => s.value === t))
+      return null;
+    const ee = 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),
+        value: R || t
+      })
+    });
+  }, Q = (o) => {
+    if (f == null || f(o), _ && o === "") {
+      g.current = !1;
+      return;
+    }
+    e.search(o);
+  }, X = () => {
+    var o;
+    e.reload(), (o = b.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: Le
+  });
+  de(() => {
+    if (!(I && e.hasNextPage))
+      return;
+    const t = setTimeout(() => {
+      e.loadMore();
+    }, 100);
+    return () => {
+      clearTimeout(t);
+    };
+  }, [I]);
+  const $ = L(() => {
+    const o = e.hasNextPage ? {
+      displayValue: A,
+      value: A
+    } : null, t = !o && e.hasError && !e.isEmpty ? {
+      displayValue: E,
+      value: E
+    } : 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: ce(b, h),
+    className: T({
+      [a.disabled]: _
+    }, j),
+    clearButtonAriaLabel: u(i.clearButtonAriaLabel),
+    disabled: G || _,
+    displayValue: (o) => o.displayValue || o.value,
+    endComboboxIcon: Ae,
+    focusLoop: !1,
+    getPopoverRef: Z,
+    loading: e.isReloading,
+    loadingAriaLabel: z || u(i.loadingAriaLabel),
+    multiselect: l,
+    noResultMessage: d,
+    onFocus: q,
+    onInputValueChange: Q,
+    onValueChange: H,
+    options: $,
+    renderOption: K,
+    value: J
+  });
+});
+export {
+  we as ComboboxWithApiPagination
+};

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

@@ -0,0 +1,4 @@
+import { ComboboxWithApiPagination as t } from "./combobox-with-api-pagination.js";
+export {
+  t as ComboboxWithApiPagination
+};

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

@@ -0,0 +1,34 @@
+import { defineMessages as o } from "react-intl";
+const e = o({
+  loadingResultsErrorAction: {
+    id: "comboboxWithApiPagination.errorAction",
+    defaultMessage: "Reload"
+  },
+  loadingResultsErrorMessage: {
+    id: "comboboxWithApiPagination.errorMessage",
+    defaultMessage: "Failed to load options"
+  },
+  loadingResultsErrorIconLabel: {
+    id: "comboboxWithApiPagination.errorIconLabel",
+    defaultMessage: "Error"
+  },
+  loadingAriaLabel: {
+    id: "comboboxWithApiPagination.loadingAriaLabel",
+    defaultMessage: "Loading..."
+  },
+  loadingMoreAriaLabel: {
+    id: "comboboxWithApiPagination.loadingMoreAriaLabel",
+    defaultMessage: "Loading more..."
+  },
+  noResults: {
+    id: "comboboxWithApiPagination.noResults",
+    defaultMessage: "No results found"
+  },
+  clearButtonAriaLabel: {
+    id: "comboboxWithApiPagination.clearButtonAriaLabel",
+    defaultMessage: "Clear input and selection"
+  }
+});
+export {
+  e as default
+};

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

@@ -0,0 +1,6 @@
+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/esm/lib/components/combobox-with-api-pagination/use-async-list.js

@@ -0,0 +1,137 @@
+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) {
+  return r.LOAD_MORE = "LOAD_MORE", r.RELOAD = "RELOAD", r.SEARCH = "SEARCH", r.SET_ERROR = "SET_ERROR", r.SET_LOADING = "SET_LOADING", r;
+}(s || {});
+function a(r, e) {
+  switch (e.type) {
+    case s.LOAD_MORE:
+      return {
+        ...r,
+        abortController: e.abortController,
+        error: null,
+        items: [...r.items, ...e.items],
+        marker: e.marker,
+        requestState: u.SUCCESS
+      };
+    case s.RELOAD:
+      return e.abortController !== r.abortController ? r : {
+        ...r,
+        abortController: null,
+        error: null,
+        items: [...e.items],
+        marker: e.marker,
+        requestState: u.SUCCESS,
+        searchInput: ""
+      };
+    case s.SEARCH:
+      return {
+        ...r,
+        abortController: e.abortController,
+        error: null,
+        items: [...e.items],
+        marker: e.marker,
+        requestState: u.SUCCESS,
+        searchInput: e.searchInput ?? r.searchInput
+      };
+    case s.SET_ERROR:
+      return {
+        ...r,
+        items: s.LOAD_MORE ? r.items : [],
+        error: e.error,
+        requestState: u.ERROR
+      };
+    case s.SET_LOADING:
+      return {
+        ...r,
+        requestInitiator: e.requestInitiator,
+        requestState: u.IN_PROGRESS,
+        abortController: e.abortController
+      };
+    default:
+      throw new Error(`Invalid action type "${e.type}"`);
+  }
+}
+function E(r, e) {
+  return r.type === s.SEARCH && e.requestState === u.IN_PROGRESS;
+}
+function S(r, e) {
+  return e.requestInitiator === s.LOAD_MORE && e.requestState === u.IN_PROGRESS && r.type === s.LOAD_MORE;
+}
+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());
+}
+function h(r, e) {
+  return S(r, e);
+}
+async function R(r, e, t, n) {
+  const o = new AbortController();
+  if (m(r, t) && p(r, t), !h(r, t)) {
+    n({
+      type: s.SET_LOADING,
+      requestInitiator: r.type,
+      abortController: o
+    });
+    try {
+      const l = await e({
+        items: t.items.slice(),
+        signal: o.signal,
+        marker: r.type === s.LOAD_MORE ? t.marker : null,
+        searchInput: r.searchInput ?? t.searchInput
+      }), i = l.searchInput ?? r.searchInput ?? t.searchInput;
+      n({
+        type: r.type,
+        ...l,
+        searchInput: i,
+        abortController: o
+      });
+    } catch (l) {
+      if (I(l))
+        return;
+      n({
+        type: s.SET_ERROR,
+        error: l,
+        abortController: o
+      });
+    }
+  }
+}
+function _(r) {
+  const {
+    load: e
+  } = r, [t, n] = O(a, {
+    error: null,
+    items: [],
+    requestInitiator: null,
+    requestState: u.NOT_STARTED,
+    searchInput: ""
+  });
+  return {
+    hasError: t.requestState === u.ERROR,
+    hasNextPage: t.requestState === u.ERROR ? !1 : t.marker != null,
+    isEmpty: t.items.length === 0,
+    isLoading: t.requestState === u.IN_PROGRESS,
+    isReloading: t.requestState === u.IN_PROGRESS && (t.requestInitiator === s.RELOAD || t.requestInitiator === s.SEARCH),
+    items: t.items,
+    loadMore: () => R({
+      type: s.LOAD_MORE
+    }, e, t, n),
+    reload: () => R({
+      type: s.RELOAD
+    }, e, t, n),
+    requestInitiator: t.requestInitiator,
+    searchInput: t.searchInput,
+    search: (o) => R({
+      type: s.SEARCH,
+      searchInput: o
+    }, e, t, n)
+  };
+}
+export {
+  _ as useAsyncList
+};

package/esm/lib/components/combobox-with-api-pagination/utils/is-abort-error.js

@@ -0,0 +1,13 @@
+const o = "AbortError";
+function t(r) {
+  return !!(r && r.__CANCEL__);
+}
+function n(r) {
+  return !!(r && typeof r == "object" && r.name === o);
+}
+function c(r) {
+  return t(r) || n(r);
+}
+export {
+  c as isAbortError
+};

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

@@ -0,0 +1,40 @@
+import * as s 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);
+  }, []);
+}
+function R({
+  prop: e,
+  defaultProp: n,
+  onChange: o = () => {
+  }
+}) {
+  const [t, c] = C({
+    defaultProp: n,
+    onChange: o
+  }), r = e !== void 0, i = r ? e : t, l = a(o), d = s.useCallback((u) => {
+    if (r) {
+      const f = typeof u == "function" ? u(e) : u;
+      f !== e && l(f);
+    } else
+      c(u);
+  }, [r, e, c, l]);
+  return [i, d];
+}
+function C({
+  defaultProp: e,
+  onChange: n
+}) {
+  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;
+}
+export {
+  R as useControllableState
+};

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

@@ -0,0 +1,87 @@
+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
+  }) {
+    let r = o.get(c);
+    r || (r = /* @__PURE__ */ new Map(), o.set(c, r));
+    const i = JSON.stringify({
+      rootMargin: s,
+      threshold: u
+    });
+    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);
+          });
+        }, {
+          root: c,
+          rootMargin: s,
+          threshold: u
+        }),
+        entryCallbacks: n
+      }, r.set(i, e);
+    }
+    return {
+      observe: (n, l) => {
+        e == null || e.entryCallbacks.set(n, l), e == null || e.observer.observe(n);
+      },
+      unobserve: (n) => {
+        e == null || e.entryCallbacks.delete(n), e == null || e.observer.unobserve(n);
+      }
+    };
+  }
+  return {
+    getObserver: b
+  };
+}
+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);
+      return;
+    }
+    const f = M.getObserver({
+      root: u.current,
+      rootMargin: b,
+      threshold: c
+    });
+    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, {
+    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
+  }];
+}
+export {
+  w as createObserverCache,
+  V as useTrackVisibility
+};

package/esm/lib/components/combobox-with-api-tree-view/combobox-with-api-tree-view.js

@@ -0,0 +1,125 @@
+import { useComboboxStore as j, ComboboxProvider as F, PopoverAnchor as G, Combobox as z, ComboboxCancel as E, ComboboxPopover as X } from "@ariakit/react";
+import { useLabelable as q, InputChip as H, IconButton as J } from "@box/blueprint-web";
+import { XMark as K } from "@box/blueprint-web-assets/icons/Fill";
+import { ChipsGroup as Q } from "@box/blueprint-web/lib-esm/combobox/chips-group";
+import c from "clsx";
+import { forwardRef as U, useId as Y, useState as g, useRef as Z, useCallback as _ } from "react";
+import { useIntl as $ } from "react-intl";
+import V from "../combobox-with-api-pagination/messages.js";
+import { useControllableState as ee } from "../combobox-with-api-pagination/utils/use-controllable-state.js";
+import { s as l, D as oe } from "../../../../chunks/dynamic-loading-tree.js";
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+const fe = /* @__PURE__ */ U(function(I, te) {
+  const {
+    defaultFetcher: L,
+    value: N,
+    onValueChange: w,
+    noResultMessage: S,
+    defaultValue: A = [],
+    loadingAriaLabel: R,
+    multiselect: m = !1,
+    className: y,
+    levels: B,
+    selectableLevels: M,
+    label: P,
+    hideLabel: p,
+    treeAriaLabel: k
+  } = I, {
+    formatMessage: b
+  } = $(), d = Y(), [f, D] = g(!1), [t, n] = ee({
+    prop: N,
+    defaultProp: A,
+    onChange: w
+  }), [h, C] = g(""), O = Z(null), T = _((e) => {
+    C(e);
+  }, [C]), i = j({
+    includesBaseElement: !0,
+    virtualFocus: !1,
+    value: h,
+    setValue: T,
+    open: f,
+    setOpen: D
+  }), v = t.length > 0, x = t.length > 0, W = q(P, d);
+  return /* @__PURE__ */ u(F, {
+    store: i,
+    children: [/* @__PURE__ */ o(W, {
+      className: c(l.label, {
+        [l.hiddenLabel]: p
+      }),
+      hideLabel: p
+    }), /* @__PURE__ */ o(G, {
+      children: /* @__PURE__ */ o("div", {
+        className: c(l.container, y),
+        children: /* @__PURE__ */ u("div", {
+          className: c(l.comboboxContainer, {
+            [l.withChips]: x,
+            [l.withComboboxButtons]: v
+          }),
+          children: [x && /* @__PURE__ */ o(Q, {
+            children: t.map((e) => /* @__PURE__ */ o(H, {
+              label: e.displayValue,
+              onDelete: () => {
+                const a = t.filter((r) => r.value !== e.value);
+                n(a);
+              },
+              tooltip: e.displayValue
+            }, e.value))
+          }), /* @__PURE__ */ u("div", {
+            className: l.textInputWrapper,
+            children: [/* @__PURE__ */ o(z, {
+              ref: O,
+              className: l.textInput,
+              id: d,
+              store: i
+            }), /* @__PURE__ */ o("div", {
+              className: l.comboboxButtons,
+              children: v ? /* @__PURE__ */ o(E, {
+                onClick: () => {
+                  n([]);
+                },
+                render: (e) => /* @__PURE__ */ o(J, {
+                  ...e,
+                  "aria-label": "Clear selection",
+                  icon: K,
+                  size: "x-small"
+                }),
+                store: i
+              }) : null
+            })]
+          })]
+        })
+      })
+    }), /* @__PURE__ */ o(X, {
+      className: l.popover,
+      gutter: 8,
+      children: /* @__PURE__ */ o(oe, {
+        ariaLabel: k,
+        defaultFetcher: L,
+        levels: B,
+        loadingAriaLabel: R || b(V.loadingAriaLabel),
+        multiselect: m,
+        noResultMessage: S || b(V.noResults),
+        onSelect: (e) => {
+          const {
+            metadata: s
+          } = e.element;
+          let a = [];
+          e.isSelected ? (m && (a = t.filter((r) => r.value !== e.element.id)), a.push({
+            value: e.element.id,
+            displayValue: s.displayValue,
+            level: s.level,
+            selectable: s.selectable,
+            ancestors: s.ancestors
+          })) : a = t.filter((r) => r.value !== e.element.id), n(a);
+        },
+        open: f,
+        searchInput: h.trimStart(),
+        selectableLevels: M,
+        selectedNodes: t.map((e) => e.value)
+      })
+    })]
+  });
+});
+export {
+  fe as ComboboxWithApiTreeView
+};

package/esm/lib/components/combobox-with-api-tree-view/dynamic-loading-tree.js

@@ -0,0 +1,10 @@
+import "@box/blueprint-web";
+import "@box/tree";
+import "react";
+import "./tree-utils.js";
+import { D as p, S as s } from "../../../../chunks/dynamic-loading-tree.js";
+import "react/jsx-runtime";
+export {
+  p as DynamicLoadingTree,
+  s as SearchResultsName
+};

package/esm/lib/components/combobox-with-api-tree-view/index.js

@@ -0,0 +1,4 @@
+import { ComboboxWithApiTreeView as i } from "./combobox-with-api-tree-view.js";
+export {
+  i as ComboboxWithApiTreeView
+};

package/esm/lib/components/combobox-with-api-tree-view/tree-utils.js

@@ -0,0 +1,26 @@
+const r = (t, n, e) => {
+  const o = {
+    name: n,
+    id: `${t}_${e}`,
+    parent: t,
+    children: [],
+    metadata: {
+      variant: e
+    }
+  };
+  return o;
+}, d = {
+  name: "Root",
+  id: "root",
+  parent: null,
+  children: [],
+  metadata: {
+    variant: "content",
+    level: 0,
+    displayValue: "Root"
+  }
+};
+export {
+  d as RootTreeNode,
+  r as getServiceNode
+};