@box/combobox-with-api 0.25.0

package/chunks/dynamic-loading-tree.js

@@ -0,0 +1,423 @@
+import { Text as g, LoadingIndicator as G } from "@box/blueprint-web";
+import { Tree as H } from "@box/tree";
+import { useReducer as J, useState as V, useMemo as K, useCallback as R, useEffect as P } from "react";
+import { RootTreeNode as d, getServiceNode as x } from "../esm/lib/components/combobox-with-api-tree-view/tree-utils.js";
+import { jsxs as N, jsx as u } from "react/jsx-runtime";
+import '../styles/dynamic-loading-tree.css';const Q = "_container_sdpm3_1", X = "_disabled_sdpm3_12", Y = "_label_sdpm3_15", Z = "_hiddenLabel_sdpm3_27", F = "_comboboxContainer_sdpm3_30", ee = "_withComboboxButtons_sdpm3_46", te = "_error_sdpm3_54", ae = "_textInputWrapper_sdpm3_62", se = "_textInput_sdpm3_62", ne = "_errorIcon_sdpm3_84", le = "_comboboxButtons_sdpm3_87", oe = "_withChips_sdpm3_94", re = "_inlineError_sdpm3_104", ie = "_popover_sdpm3_108", de = "_option_sdpm3_134", ce = "_indicator_sdpm3_157", me = "_indicatorIcon_sdpm3_166", pe = "_optionWithIndicator_sdpm3_169", _e = "_loadingIndicator_sdpm3_172", ue = "_noResultOption_sdpm3_175", he = "_treeContainer_sdpm3_181", f = {
+  container: Q,
+  disabled: X,
+  label: Y,
+  hiddenLabel: Z,
+  comboboxContainer: F,
+  withComboboxButtons: ee,
+  error: te,
+  textInputWrapper: ae,
+  textInput: se,
+  errorIcon: ne,
+  comboboxButtons: le,
+  withChips: oe,
+  inlineError: re,
+  popover: ie,
+  option: de,
+  indicator: ce,
+  indicatorIcon: me,
+  optionWithIndicator: pe,
+  loadingIndicator: _e,
+  noResultOption: ue,
+  treeContainer: he
+};
+let n = /* @__PURE__ */ function(a) {
+  return a.LOAD_DATA = "LOAD_DATA", a.LOAD_ERROR = "LOAD_DATA_ERROR", a.LOAD_SUCCESS = "LOAD_DATA_SUCCESS", a.LOAD_MORE = "LOAD_DATA_SUCCESS", a.RESET = "RESET", a;
+}({});
+const ye = ({
+  levelName: a,
+  parentDisplayValue: b,
+  displayValue: l
+}) => /* @__PURE__ */ N("div", {
+  style: {
+    display: "flex",
+    alignItems: "flex-start",
+    flexDirection: "column"
+  },
+  children: [/* @__PURE__ */ N("div", {
+    style: {
+      display: "flex",
+      alignItems: "flex-start"
+    },
+    children: [/* @__PURE__ */ u(g, {
+      as: "span",
+      variant: "labelBold",
+      children: `${a}`
+    }), /* @__PURE__ */ u(g, {
+      as: "span",
+      variant: "label",
+      children: `/${b}`
+    })]
+  }), /* @__PURE__ */ u(g, {
+    as: "span",
+    variant: "bodyDefault",
+    children: l
+  })]
+}), Se = (a, b) => {
+  const {
+    id: l,
+    items: m,
+    marker: y
+  } = b.payload;
+  switch (b.type) {
+    case n.LOAD_DATA:
+      return {
+        ...a,
+        [l]: {
+          ...a[l],
+          status: "loading"
+        }
+      };
+    case n.LOAD_ERROR:
+      return {
+        ...a,
+        [l]: {
+          ...a[l],
+          marker: y,
+          status: "error"
+        }
+      };
+    case n.LOAD_SUCCESS: {
+      const {
+        itemsWithParent: S,
+        itemsIds: v
+      } = m.reduce((h, o) => ({
+        itemsWithParent: {
+          ...h.itemsWithParent,
+          [o.id]: {
+            ...o,
+            parent: l,
+            children: []
+          }
+        },
+        itemsIds: [...h.itemsIds, o.id]
+      }), {
+        itemsWithParent: {},
+        itemsIds: []
+      });
+      return {
+        ...a,
+        [l]: {
+          ...a[l],
+          status: "success",
+          marker: y,
+          children: [...a[l].children || [], ...v]
+        },
+        ...S
+      };
+    }
+    case n.RESET: {
+      const {
+        itemsWithParent: S,
+        itemsIds: v
+      } = m.reduce((h, o) => ({
+        itemsWithParent: {
+          ...h.itemsWithParent,
+          [o.id]: {
+            ...o,
+            parent: l,
+            children: []
+          }
+        },
+        itemsIds: [...h.itemsIds, o.id]
+      }), {
+        itemsWithParent: {},
+        itemsIds: []
+      });
+      return {
+        [l]: {
+          ...a[l],
+          status: "success",
+          marker: y,
+          children: [...v]
+        },
+        ...S
+      };
+    }
+    default:
+      return a;
+  }
+}, Re = ({
+  ariaLabel: a,
+  onSelect: b,
+  selectedNodes: l,
+  defaultFetcher: m,
+  levels: y,
+  selectableLevels: S,
+  multiselect: v,
+  open: h,
+  searchInput: o,
+  noResultMessage: B,
+  loadingAriaLabel: U
+}) => {
+  const [D, r] = J(Se, {
+    [d.id]: d
+  }), [E, M] = V({
+    nodes: [],
+    selectedIds: []
+  }), [T, A] = V(!1), I = K(() => Math.max(...S), [S]), k = R((e = D) => {
+    const i = [];
+    return [...Object.values(e).map((t) => {
+      const _ = [...t.children], s = {
+        ...t,
+        children: _,
+        metadata: {
+          ...t.metadata,
+          variant: "content",
+          isLoading: t.status === "loading" && !t.children.length
+        }
+      };
+      let c;
+      return t.children.length && t.status === "loading" && (c = x(s.id, s.metadata.displayValue, "loading")), t.status === "error" && (c = x(s.id, s.metadata.displayValue, "reload")), t.status === "success" && t.marker && (c = x(s.id, s.metadata.displayValue, "loadMore")), c && (i.push(c), s.children.push(c.id)), s;
+    }), ...i];
+  }, [D]), C = R((e) => {
+    var _;
+    const i = (_ = e.ancestors) == null ? void 0 : _.find((s) => s.level === e.level - 1), p = y.find((s) => s.level === e.level);
+    return e.level === 1 || o === "" ? e.displayValue : /* @__PURE__ */ u(ye, {
+      displayValue: e.displayValue,
+      levelName: p.displayName,
+      parentDisplayValue: i.displayName
+    });
+  }, [y, o]), O = R((e) => ({
+    id: e.value,
+    name: C(e),
+    parent: d.id,
+    isBranch: e.level !== I,
+    children: [],
+    metadata: {
+      variant: "content",
+      level: e.level,
+      selectable: e.selectable,
+      displayValue: e.displayValue,
+      marker: e.marker,
+      ancestors: e.ancestors
+    }
+  }), [C, I]);
+  P(() => {
+    M({
+      nodes: k(D),
+      selectedIds: l
+    });
+  }, [k, l, D]), P(() => {
+    if (!h)
+      return;
+    const {
+      signal: e
+    } = new AbortController();
+    A(!0), o ? (r({
+      type: n.RESET,
+      payload: {
+        id: d.id,
+        items: []
+      }
+    }), m({
+      signal: e,
+      marker: null,
+      searchInput: o,
+      level: null,
+      onlySelectableOptions: !1,
+      ancestorId: null
+    }).then((i) => {
+      const p = i.options.map((t) => ({
+        id: t.value,
+        name: C(t),
+        parent: d.id,
+        isBranch: t.level < I,
+        children: [],
+        metadata: {
+          variant: "content",
+          level: t.level,
+          selectable: t.selectable,
+          displayValue: t.displayValue,
+          ancestors: t.ancestors
+        }
+      }));
+      r({
+        type: n.RESET,
+        payload: {
+          id: d.id,
+          items: []
+        }
+      }), r({
+        type: n.LOAD_SUCCESS,
+        payload: {
+          id: d.id,
+          items: p,
+          marker: i.marker
+        }
+      }), A(!1);
+    }).catch(() => {
+      r({
+        type: n.LOAD_ERROR,
+        payload: {
+          id: d.id
+        }
+      }), A(!1);
+    })) : (r({
+      type: n.RESET,
+      payload: {
+        id: d.id,
+        items: []
+      }
+    }), r({
+      type: n.LOAD_DATA,
+      payload: {
+        id: d.id
+      }
+    }), m({
+      signal: e,
+      marker: null,
+      searchInput: "",
+      level: 1,
+      onlySelectableOptions: !1,
+      ancestorId: null
+    }).then((i) => {
+      const p = i.options.map(O);
+      r({
+        type: n.RESET,
+        payload: {
+          id: d.id,
+          items: []
+        }
+      }), r({
+        type: n.LOAD_SUCCESS,
+        payload: {
+          id: d.id,
+          items: p,
+          marker: i.marker
+        }
+      }), A(!1);
+    }).catch(() => {
+      r({
+        type: n.LOAD_ERROR,
+        payload: {
+          id: d.id
+        }
+      }), A(!1);
+    }));
+  }, [m, O, h, o, y, I, C]);
+  const j = R((e) => {
+    const {
+      isExpanded: i,
+      isDisabled: p,
+      element: t
+    } = e;
+    if (!i || p)
+      return;
+    const {
+      level: _
+    } = t.metadata, {
+      id: s,
+      marker: c
+    } = t, {
+      signal: L
+    } = new AbortController();
+    r({
+      type: n.LOAD_DATA,
+      payload: {
+        id: s
+      }
+    }), m({
+      signal: L,
+      marker: c,
+      searchInput: "",
+      level: _ + 1,
+      ancestorId: s,
+      onlySelectableOptions: !1
+    }).then((W) => {
+      const q = W.options.map((w) => (t.children.push(w.value), O(w)));
+      r({
+        type: n.LOAD_SUCCESS,
+        payload: {
+          id: s,
+          items: q,
+          marker: W.marker
+        }
+      });
+    }).catch(() => {
+      r({
+        type: n.LOAD_ERROR,
+        payload: {
+          id: s
+        }
+      });
+    });
+  }, [m, O]), $ = R((e) => {
+    const i = D[e], {
+      level: p
+    } = i.metadata, {
+      id: t,
+      marker: _
+    } = i, {
+      signal: s
+    } = new AbortController();
+    r({
+      type: n.LOAD_DATA,
+      payload: {
+        id: t
+      }
+    }), m({
+      signal: s,
+      marker: _,
+      searchInput: o,
+      level: o === "" ? p + 1 : null,
+      ancestorId: t !== d.id ? t.toString() : null,
+      onlySelectableOptions: !1
+    }).then((c) => {
+      const L = c.options.map(O);
+      r({
+        type: n.LOAD_SUCCESS,
+        payload: {
+          id: t,
+          items: L,
+          marker: c.marker
+        }
+      });
+    }).catch(() => {
+      r({
+        type: n.LOAD_ERROR,
+        payload: {
+          id: t,
+          marker: _
+        }
+      });
+    });
+  }, [m, O, o, D]), z = E.nodes.length === 0 || E.nodes[0].children.length === 0 && E.nodes[0].id === d.id;
+  return /* @__PURE__ */ N("div", {
+    children: [T && /* @__PURE__ */ u("div", {
+      className: f.noResultOption,
+      children: /* @__PURE__ */ u(G, {
+        "aria-label": U,
+        className: f.loadingIndicator
+      })
+    }), z && !T ? /* @__PURE__ */ u("div", {
+      className: f.noResultOption,
+      children: B
+    }) : /* @__PURE__ */ u("div", {
+      className: f.treeContainer,
+      children: /* @__PURE__ */ u(H, {
+        "aria-label": a,
+        data: E.nodes,
+        multiSelect: v,
+        onExpand: j,
+        onLoadData: $,
+        onNodeSelect: (e) => {
+          S.includes(e.element.metadata.level) ? b(e) : (e.isSelected = !1, e.treeState.selectedIds.delete(e.element.id));
+        },
+        size: "large",
+        togglableSelect: !0,
+        withIcons: !1
+      })
+    })]
+  });
+};
+export {
+  Re as D,
+  ye as S,
+  f as s
+};

package/esm/index.js

@@ -0,0 +1,8 @@
+import { ComboboxWithApiPagination as t } from "./lib/components/combobox-with-api-pagination/combobox-with-api-pagination.js";
+import { ComboboxWithApiTreeView as r } from "./lib/components/combobox-with-api-tree-view/combobox-with-api-tree-view.js";
+import { ComboboxWithApiContainer as m } from "./lib/components/combobox-with-api/combobox-with-api-container.js";
+export {
+  m as ComboboxWithApi,
+  t as ComboboxWithApiPagination,
+  r as ComboboxWithApiTreeView
+};

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

@@ -0,0 +1,47 @@
+import L from "lodash/debounce";
+import { useState as e, useMemo as S, useCallback as V, useEffect as T } from "react";
+import { ComboboxWithApi as w } from "./combobox-with-api.js";
+import { jsx as Q } from "react/jsx-runtime";
+const W = "AbortError", _ = (b) => {
+  const {
+    debounceTime: l = 250,
+    fetcher: u,
+    onInputValueChange: s,
+    includeTextInputOption: f = !1,
+    ...h
+  } = b, [m, p] = e(!1), [d, y] = e(!1), [E, g] = e(!1), [o, x] = e(""), [A, r] = e([]), i = S(() => L(x, l), [l]), C = (n) => {
+    i(n), s == null || s(n);
+  }, a = V(async (n) => {
+    const c = n.trim();
+    if (c) {
+      y(!1), p(!0);
+      try {
+        const t = await u(c);
+        if ((t.length > 0 ? typeof t[0] == "string" : !0) && f) {
+          const O = c.toLocaleLowerCase();
+          r([O, ...t]);
+        } else
+          g((t == null ? void 0 : t.length) === 0), r(t);
+      } catch (t) {
+        (t == null ? void 0 : t.name) !== W && y(!0);
+      } finally {
+        p(!1);
+      }
+    }
+  }, [u, f]), I = () => {
+    a(o);
+  };
+  return T(() => (o.trim().length ? a(o) : (r([]), g(!1)), () => i.cancel()), [i, a, o]), /* @__PURE__ */ Q(w, {
+    ...h,
+    isEmpty: E,
+    isError: d,
+    isLoading: m,
+    loading: m,
+    onInputValueChange: C,
+    onTryAgain: I,
+    options: A
+  });
+};
+export {
+  _ as ComboboxWithApiContainer
+};

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

@@ -0,0 +1,26 @@
+import { Combobox as e, Text as i } from "@box/blueprint-web";
+import { forwardRef as n } from "react";
+import { FormattedMessage as s } from "react-intl";
+import a from "./messages.js";
+import { jsx as o } from "react/jsx-runtime";
+import '../../../../styles/combobox-with-api-error.css';const m = "_container_1ozsi_1", c = {
+  container: m
+}, h = /* @__PURE__ */ n(({
+  onTryAgain: r
+}, t) => /* @__PURE__ */ o(e.Option, {
+  onClick: r,
+  children: /* @__PURE__ */ o("div", {
+    ref: t,
+    className: c.container,
+    children: /* @__PURE__ */ o(i, {
+      as: "span",
+      color: "textOnLightLink",
+      children: /* @__PURE__ */ o(s, {
+        ...a.loadingResultsError
+      })
+    })
+  })
+}));
+export {
+  h as default
+};

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

@@ -0,0 +1,37 @@
+import { Combobox as f } from "@box/blueprint-web";
+import v from "lodash/uniqBy";
+import { useMemo as b } from "react";
+import g from "./combobox-with-api-error.js";
+import { jsx as n } from "react/jsx-runtime";
+const h = (m) => {
+  const {
+    isError: u,
+    isEmpty: p,
+    isLoading: r,
+    noResultMessage: i,
+    options: t,
+    onTryAgain: a,
+    value: e,
+    ...l
+  } = m, c = b(() => {
+    if (Array.isArray(e)) {
+      const d = [...t, ...e].reverse();
+      return v(d, (s) => (typeof s == "string" ? s : s.value).toLocaleLowerCase().trim()).reverse();
+    }
+    return t;
+  }, [t, e]);
+  let o;
+  return u && !r ? o = /* @__PURE__ */ n(g, {
+    onTryAgain: a
+  }) : p && i && !r ? o = i : o = void 0, /* @__PURE__ */ n(f, {
+    ...l,
+    hideSelectedOptions: !0,
+    loading: r,
+    noResultMessage: o,
+    options: c,
+    value: e
+  });
+};
+export {
+  h as ComboboxWithApi
+};

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

@@ -0,0 +1,10 @@
+import { defineMessages as s } from "react-intl";
+const o = s({
+  loadingResultsError: {
+    id: "comboboxWithApi.apiError",
+    defaultMessage: "Couldn't load results. Click to try again."
+  }
+});
+export {
+  o as default
+};