@box/combobox-with-api 0.25.0 → 0.26.0

package/chunks/dynamic-loading-tree.js

@@ -1,9 +1,9 @@
 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 { useReducer as J, useState as V, useMemo as K, useCallback as E, useEffect as W } from "react";
+import { RootTreeNode as i, getServiceNode as C } 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 = {
+import '../styles/dynamic-loading-tree.css';const Q = "_container_bezt1_1", X = "_disabled_bezt1_12", Y = "_label_bezt1_15", Z = "_hiddenLabel_bezt1_27", F = "_comboboxContainer_bezt1_30", ee = "_withComboboxButtons_bezt1_46", te = "_error_bezt1_54", ae = "_textInputWrapper_bezt1_62", ne = "_textInput_bezt1_62", le = "_errorIcon_bezt1_84", se = "_comboboxButtons_bezt1_87", oe = "_withChips_bezt1_94", re = "_inlineError_bezt1_104", ie = "_popover_bezt1_108", de = "_option_bezt1_134", ce = "_indicator_bezt1_157", pe = "_indicatorIcon_bezt1_166", me = "_optionWithIndicator_bezt1_169", _e = "_loadingIndicator_bezt1_172", ue = "_noResultOption_bezt1_175", x = {
   container: Q,
   disabled: X,
   label: Y,
@@ -12,27 +12,26 @@ import '../styles/dynamic-loading-tree.css';const Q = "_container_sdpm3_1", X =
   withComboboxButtons: ee,
   error: te,
   textInputWrapper: ae,
-  textInput: se,
-  errorIcon: ne,
-  comboboxButtons: le,
+  textInput: ne,
+  errorIcon: le,
+  comboboxButtons: se,
   withChips: oe,
   inlineError: re,
   popover: ie,
   option: de,
   indicator: ce,
-  indicatorIcon: me,
-  optionWithIndicator: pe,
+  indicatorIcon: pe,
+  optionWithIndicator: me,
   loadingIndicator: _e,
-  noResultOption: ue,
-  treeContainer: he
+  noResultOption: ue
 };
 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 = ({
+const be = ({
   levelName: a,
-  parentDisplayValue: b,
-  displayValue: l
+  parentDisplayValue: y,
+  displayValue: o
 }) => /* @__PURE__ */ N("div", {
   style: {
     display: "flex",
@@ -51,119 +50,101 @@ const ye = ({
     }), /* @__PURE__ */ u(g, {
       as: "span",
       variant: "label",
-      children: `/${b}`
+      children: `/${y}`
     })]
   }), /* @__PURE__ */ u(g, {
     as: "span",
     variant: "bodyDefault",
-    children: l
+    children: o
   })]
-}), Se = (a, b) => {
+}), ye = (a, y) => {
   const {
-    id: l,
+    id: o,
     items: m,
-    marker: y
-  } = b.payload;
-  switch (b.type) {
+    marker: b
+  } = y.payload;
+  switch (y.type) {
     case n.LOAD_DATA:
       return {
         ...a,
-        [l]: {
-          ...a[l],
+        [o]: {
+          ...a[o],
           status: "loading"
         }
       };
     case n.LOAD_ERROR:
       return {
         ...a,
-        [l]: {
-          ...a[l],
-          marker: y,
+        [o]: {
+          ...a[o],
+          marker: b,
           status: "error"
         }
       };
     case n.LOAD_SUCCESS: {
       const {
-        itemsWithParent: S,
-        itemsIds: v
-      } = m.reduce((h, o) => ({
+        itemsWithParent: D,
+        itemsIds: f
+      } = m.reduce((O, d) => ({
         itemsWithParent: {
-          ...h.itemsWithParent,
-          [o.id]: {
-            ...o,
-            parent: l,
+          ...O.itemsWithParent,
+          [d.id]: {
+            ...d,
+            parent: o,
             children: []
           }
         },
-        itemsIds: [...h.itemsIds, o.id]
+        itemsIds: [...O.itemsIds, d.id]
       }), {
         itemsWithParent: {},
         itemsIds: []
       });
       return {
         ...a,
-        [l]: {
-          ...a[l],
+        [o]: {
+          ...a[o],
           status: "success",
-          marker: y,
-          children: [...a[l].children || [], ...v]
+          marker: b,
+          children: [...a[o].children || [], ...f]
         },
-        ...S
+        ...D
       };
     }
-    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: []
-      });
+    case n.RESET:
       return {
-        [l]: {
-          ...a[l],
+        ...a,
+        [o]: {
+          ...a[o],
           status: "success",
-          marker: y,
-          children: [...v]
-        },
-        ...S
+          marker: b,
+          children: []
+        }
       };
-    }
     default:
       return a;
   }
-}, Re = ({
+}, Ee = ({
   ariaLabel: a,
-  onSelect: b,
-  selectedNodes: l,
+  onSelect: y,
+  selectedNodes: o,
   defaultFetcher: m,
-  levels: y,
-  selectableLevels: S,
-  multiselect: v,
-  open: h,
-  searchInput: o,
+  levels: b,
+  selectableLevels: D,
+  multiselect: f,
+  open: O,
+  searchInput: d,
   noResultMessage: B,
   loadingAriaLabel: U
 }) => {
-  const [D, r] = J(Se, {
-    [d.id]: d
-  }), [E, M] = V({
+  const [h, s] = J(ye, {
+    [i.id]: i
+  }), [R, P] = V({
     nodes: [],
     selectedIds: []
-  }), [T, A] = V(!1), I = K(() => Math.max(...S), [S]), k = R((e = D) => {
-    const i = [];
+  }), [T, A] = V(!1), v = K(() => Math.max(...D), [D]), z = E((e = h) => {
+    const r = [];
     return [...Object.values(e).map((t) => {
-      const _ = [...t.children], s = {
+      const _ = [...t.children], l = {
         ...t,
         children: _,
         metadata: {
@@ -173,21 +154,21 @@ const ye = ({
         }
       };
       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) => {
+      return t.children.length && t.status === "loading" && (c = C(l.id, l.metadata.displayValue, "loading")), t.status === "error" && (c = C(l.id, l.metadata.displayValue, "reload")), t.status === "success" && t.marker && (c = C(l.id, l.metadata.displayValue, "loadMore")), c && (r.push(c), l.children.push(c.id)), l;
+    }), ...r];
+  }, [h]), I = E((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, {
+    const r = (_ = e.ancestors) == null ? void 0 : _.find((l) => l.level === e.level - 1), p = b.find((l) => l.level === e.level);
+    return e.level === 1 || d === "" ? e.displayValue : /* @__PURE__ */ u(be, {
       displayValue: e.displayValue,
       levelName: p.displayName,
-      parentDisplayValue: i.displayName
+      parentDisplayValue: r.displayName
     });
-  }, [y, o]), O = R((e) => ({
+  }, [b, d]), S = E((e) => ({
     id: e.value,
-    name: C(e),
-    parent: d.id,
-    isBranch: e.level !== I,
+    name: I(e),
+    parent: i.id,
+    isBranch: e.level !== v,
     children: [],
     metadata: {
       variant: "content",
@@ -197,37 +178,37 @@ const ye = ({
       marker: e.marker,
       ancestors: e.ancestors
     }
-  }), [C, I]);
-  P(() => {
-    M({
-      nodes: k(D),
-      selectedIds: l
+  }), [I, v]);
+  W(() => {
+    P({
+      nodes: z(h),
+      selectedIds: o
     });
-  }, [k, l, D]), P(() => {
-    if (!h)
+  }, [z, o, h]), W(() => {
+    if (!O)
       return;
     const {
       signal: e
     } = new AbortController();
-    A(!0), o ? (r({
+    A(!0), d ? (s({
       type: n.RESET,
       payload: {
-        id: d.id,
+        id: i.id,
         items: []
       }
     }), m({
       signal: e,
       marker: null,
-      searchInput: o,
+      searchInput: d,
       level: null,
       onlySelectableOptions: !1,
       ancestorId: null
-    }).then((i) => {
-      const p = i.options.map((t) => ({
+    }).then((r) => {
+      const p = r.options.map((t) => ({
         id: t.value,
-        name: C(t),
-        parent: d.id,
-        isBranch: t.level < I,
+        name: I(t),
+        parent: i.id,
+        isBranch: t.level < v,
         children: [],
         metadata: {
           variant: "content",
@@ -237,37 +218,37 @@ const ye = ({
           ancestors: t.ancestors
         }
       }));
-      r({
+      s({
         type: n.RESET,
         payload: {
-          id: d.id,
+          id: i.id,
           items: []
         }
-      }), r({
+      }), s({
         type: n.LOAD_SUCCESS,
         payload: {
-          id: d.id,
+          id: i.id,
           items: p,
-          marker: i.marker
+          marker: r.marker
         }
       }), A(!1);
     }).catch(() => {
-      r({
+      s({
         type: n.LOAD_ERROR,
         payload: {
-          id: d.id
+          id: i.id
         }
       }), A(!1);
-    })) : (r({
+    })) : (s({
       type: n.RESET,
       payload: {
-        id: d.id,
+        id: i.id,
         items: []
       }
-    }), r({
+    }), s({
       type: n.LOAD_DATA,
       payload: {
-        id: d.id
+        id: i.id
       }
     }), m({
       signal: e,
@@ -276,101 +257,109 @@ const ye = ({
       level: 1,
       onlySelectableOptions: !1,
       ancestorId: null
-    }).then((i) => {
-      const p = i.options.map(O);
-      r({
+    }).then((r) => {
+      const p = r.options.map(S);
+      s({
         type: n.RESET,
         payload: {
-          id: d.id,
+          id: i.id,
           items: []
         }
-      }), r({
+      }), s({
         type: n.LOAD_SUCCESS,
         payload: {
-          id: d.id,
+          id: i.id,
           items: p,
-          marker: i.marker
+          marker: r.marker
         }
       }), A(!1);
     }).catch(() => {
-      r({
+      s({
         type: n.LOAD_ERROR,
         payload: {
-          id: d.id
+          id: i.id
         }
       }), A(!1);
     }));
-  }, [m, O, h, o, y, I, C]);
-  const j = R((e) => {
+  }, [m, S, O, d, b, v, I]);
+  const M = E((e) => {
     const {
-      isExpanded: i,
+      isExpanded: r,
       isDisabled: p,
       element: t
     } = e;
-    if (!i || p)
+    if (!r || p) {
+      s({
+        type: n.RESET,
+        payload: {
+          id: t.id,
+          items: []
+        }
+      });
       return;
+    }
     const {
       level: _
     } = t.metadata, {
-      id: s,
+      id: l,
       marker: c
     } = t, {
       signal: L
     } = new AbortController();
-    r({
+    s({
       type: n.LOAD_DATA,
       payload: {
-        id: s
+        id: l
       }
     }), m({
       signal: L,
       marker: c,
       searchInput: "",
       level: _ + 1,
-      ancestorId: s,
+      ancestorId: l,
       onlySelectableOptions: !1
-    }).then((W) => {
-      const q = W.options.map((w) => (t.children.push(w.value), O(w)));
-      r({
+    }).then((k) => {
+      const q = k.options.map((w) => (t.children.push(w.value), S(w)));
+      s({
         type: n.LOAD_SUCCESS,
         payload: {
-          id: s,
+          id: l,
           items: q,
-          marker: W.marker
+          marker: k.marker
         }
       });
     }).catch(() => {
-      r({
+      s({
         type: n.LOAD_ERROR,
         payload: {
-          id: s
+          id: l
         }
       });
     });
-  }, [m, O]), $ = R((e) => {
-    const i = D[e], {
+  }, [m, S]), j = E((e) => {
+    const r = h[e], {
       level: p
-    } = i.metadata, {
+    } = r.metadata, {
       id: t,
       marker: _
-    } = i, {
-      signal: s
+    } = r, {
+      signal: l
     } = new AbortController();
-    r({
+    s({
       type: n.LOAD_DATA,
       payload: {
         id: t
       }
     }), m({
-      signal: s,
+      signal: l,
       marker: _,
-      searchInput: o,
-      level: o === "" ? p + 1 : null,
-      ancestorId: t !== d.id ? t.toString() : null,
+      searchInput: d,
+      level: d === "" ? p + 1 : null,
+      ancestorId: t !== i.id ? t.toString() : null,
       onlySelectableOptions: !1
     }).then((c) => {
-      const L = c.options.map(O);
-      r({
+      const L = c.options.map(S);
+      s({
         type: n.LOAD_SUCCESS,
         payload: {
           id: t,
@@ -379,7 +368,7 @@ const ye = ({
         }
       });
     }).catch(() => {
-      r({
+      s({
         type: n.LOAD_ERROR,
         payload: {
           id: t,
@@ -387,37 +376,34 @@ const ye = ({
         }
       });
     });
-  }, [m, O, o, D]), z = E.nodes.length === 0 || E.nodes[0].children.length === 0 && E.nodes[0].id === d.id;
+  }, [m, S, d, h]), $ = R.nodes.length === 0 || R.nodes[0].children.length === 0 && R.nodes[0].id === i.id;
   return /* @__PURE__ */ N("div", {
     children: [T && /* @__PURE__ */ u("div", {
-      className: f.noResultOption,
+      className: x.noResultOption,
       children: /* @__PURE__ */ u(G, {
         "aria-label": U,
-        className: f.loadingIndicator
+        className: x.loadingIndicator
       })
-    }), z && !T ? /* @__PURE__ */ u("div", {
-      className: f.noResultOption,
+    }), $ && !T ? /* @__PURE__ */ u("div", {
+      className: x.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
-      })
+    }) : /* @__PURE__ */ u(H, {
+      "aria-label": a,
+      data: R.nodes,
+      multiSelect: f,
+      onExpand: M,
+      onLoadData: j,
+      onNodeSelect: (e) => {
+        D.includes(e.element.metadata.level) ? y(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
+  Ee as D,
+  be as S,
+  x as s
 };