@bikdotai/bik-component-library 0.0.876-beta.1 → 0.0.876-beta.3

package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js

@@ -1,403 +1,425 @@
-import { jsx as u, jsxs as N } from "react/jsx-runtime";
-import Me from "../../../../assets/icons/errorInfo.svg.js";
-import Ne from "../../../../assets/icons/refresh-purple.svg.js";
-import { useCallback as se, useState as A, useRef as m, useEffect as f } from "react";
-import { ZeroState as Ge } from "../../../zeroState/ZeroState.js";
-import { useOutside as Je } from "../../../../hooks/useOutside.js";
-import { COLORS as E } from "../../../../constants/Theme.js";
-import { useDropdown as Qe } from "../../hooks/useDropdown.js";
-import { Description as Xe } from "./description/Description.js";
-import { FreeFormMenu as Ye } from "./menu/FreeFormMenu.js";
-import { MenuList as _e } from "./menu/MenuList.js";
-import { SelectAllMenu as et } from "./menu/SelectAllMenu.js";
-import tt from "./multiSelect/MultiSelectDropdownBottomBar.js";
-import { OpennedDropdownContainer as nt, MenuListContainer as ot } from "./OpennedDropdown.styled.js";
-import { SearchBox as rt } from "./searchbox/SearchBox.js";
-import { SearchZeroState as st } from "./searchbox/SearchZeroState.js";
-const G = {
+import { jsx as u, jsxs as _ } from "react/jsx-runtime";
+import et from "../../../../assets/icons/errorInfo.svg.js";
+import tt from "../../../../assets/icons/refresh-purple.svg.js";
+import { useCallback as ae, useState as E, useRef as g, useEffect as a } from "react";
+import { ZeroState as nt } from "../../../zeroState/ZeroState.js";
+import { useOutside as ot } from "../../../../hooks/useOutside.js";
+import { COLORS as R } from "../../../../constants/Theme.js";
+import { useDropdown as rt } from "../../hooks/useDropdown.js";
+import { getNestedParentValues as fe, flattenSelectableOptions as st } from "../utils/iterationOnOptions.js";
+import { Description as lt } from "./description/Description.js";
+import { FreeFormMenu as ct } from "./menu/FreeFormMenu.js";
+import { MenuList as it } from "./menu/MenuList.js";
+import { SelectAllMenu as ut } from "./menu/SelectAllMenu.js";
+import dt from "./multiSelect/MultiSelectDropdownBottomBar.js";
+import { OpennedDropdownContainer as at, MenuListContainer as ft } from "./OpennedDropdown.styled.js";
+import { SearchBox as pt } from "./searchbox/SearchBox.js";
+import { SearchZeroState as ht } from "./searchbox/SearchZeroState.js";
+const ee = {
   height: 304,
   width: 290
-}, Tt = ({
-  options: k,
-  isSearchable: g,
-  searchPlaceholder: ie,
-  staticMenuHeight: J,
-  isMultiSelect: i,
-  maxSelections: I,
-  width: B,
-  allowFreeForm: Q,
-  height: le,
-  onClose: X,
-  onSelect: ce,
-  onSearch: d,
-  version: l,
-  skipSorting: ue,
-  headerRef: de,
-  hideSelectAll: ae,
-  primaryButtonText: fe,
-  onInfiniteScroll: pe,
-  onMultiSelectClear: he,
-  onDropdownItemClick: R,
-  buttonOptions: me,
-  isSearchLoading: ge,
-  isOptionsLoading: we,
-  optionsErrorState: w,
-  disableSearchOptions: ye,
-  disableSearchedOptionExcept: be,
-  useDefaultCursor: Oe,
-  containerStyle: xe = {},
-  zeroState: H = void 0,
-  isDraggable: y = !1,
-  onOptionsReorder: b,
-  hideClearButton: Le = !1,
-  showCheckboxForCustomElement: Te = !1,
-  checkboxActiveColor: U,
-  brandSelectedRow: q
+}, Bt = ({
+  options: f,
+  isSearchable: T,
+  searchPlaceholder: pe,
+  staticMenuHeight: te,
+  isMultiSelect: l,
+  maxSelections: D,
+  width: v,
+  allowFreeForm: ne,
+  height: he,
+  onClose: oe,
+  onSelect: me,
+  onSearch: p,
+  version: c,
+  skipSorting: ge,
+  headerRef: we,
+  hideSelectAll: ye,
+  primaryButtonText: Te,
+  onInfiniteScroll: be,
+  onMultiSelectClear: xe,
+  onDropdownItemClick: W,
+  buttonOptions: Oe,
+  isSearchLoading: Se,
+  isOptionsLoading: Le,
+  optionsErrorState: b,
+  disableSearchOptions: Ce,
+  disableSearchedOptionExcept: ke,
+  useDefaultCursor: Ie,
+  containerStyle: Ee = {},
+  zeroState: q = void 0,
+  isDraggable: x = !1,
+  onOptionsReorder: O,
+  hideClearButton: Re = !1,
+  showCheckboxForCustomElement: De = !1,
+  checkboxActiveColor: V,
+  brandSelectedRow: Z,
+  childrenLayout: h,
+  collapsibleChildren: A,
+  defaultCollapsed: j,
+  hideSelectedCount: We
 }) => {
-  const Z = se(
+  const K = ae(
     (e) => {
-      if (!y || !i) return e;
-      const t = [], n = [];
-      return e.forEach((s) => {
-        s.options ? n.push(s) : s.selected ? t.push(s) : n.push(s);
-      }), [...t, ...n];
+      if (!x || !l) return e;
+      const t = [], o = [];
+      return e.forEach((i) => {
+        i.options ? o.push(i) : i.selected ? t.push(i) : o.push(i);
+      }), [...t, ...o];
     },
-    [y, i]
-  ), [v, Y] = A(
-    () => Z(k)
-  ), _ = m(v), ee = m(!1), j = m(b);
-  f(() => {
-    Y(Z(k));
-  }, [k, Z]), f(() => {
-    _.current = v;
-  }, [v]), f(() => {
-    j.current = b;
-  }, [b]), f(() => () => {
-    ee.current && j.current && j.current(_.current);
+    [x, l]
+  ), [B, re] = E(
+    () => K(f)
+  ), se = g(B), le = g(!1), N = g(O);
+  a(() => {
+    re(K(f));
+  }, [f, K]), a(() => {
+    se.current = B;
+  }, [B]), a(() => {
+    N.current = O;
+  }, [O]), a(() => () => {
+    le.current && N.current && N.current(se.current);
   }, []);
-  const Se = se(
+  const Ae = ae(
     (e) => {
-      Y(e), l === "2.0" ? b?.(e) : ee.current = !0;
+      re(e), c === "2.0" ? O?.(e) : le.current = !0;
     },
-    [b, l]
-  ), Ce = y ? v : k, {
-    dropdownOptions: a,
-    search: Ee,
-    searchedString: o,
-    searchedOptions: O,
-    searchError: ke,
-    retrySearch: Ie,
-    onApplyHandler: K,
-    selectAllHandler: Re,
+    [O, c]
+  ), Be = x ? B : f, {
+    dropdownOptions: m,
+    search: Fe,
+    searchedString: n,
+    searchedOptions: S,
+    searchError: Pe,
+    retrySearch: He,
+    onApplyHandler: $,
+    selectAllHandler: Ue,
     onMultiSelectClear: ve,
-    onFreeFormSelect: De,
-    onMultiSelectApply: Fe,
-    latestDropdownOptionsRef: We,
-    getSelectedOptions: Ae,
-    getCurrentSelectionCount: Be
-  } = Qe(
+    onFreeFormSelect: qe,
+    onMultiSelectApply: Ve,
+    latestDropdownOptionsRef: Ze,
+    getSelectedOptions: je,
+    getCurrentSelectionCount: Ke
+  } = rt(
+    c,
+    Be,
+    me,
+    ge || x,
     l,
+    p,
     Ce,
-    ce,
-    ue || y,
-    i,
-    d,
-    ye,
-    be,
-    I
-  ), [He, P] = A(B ?? G.width), [p, V] = A(null), [D, te] = A(-1), x = m(null), ne = m([]), $ = m(null);
-  Je(
-    x,
+    ke,
+    D,
+    h
+  ), [Ne, z] = E(v ?? ee.width), [w, M] = E(null), [F, G] = E(-1), [P, ce] = E(
+    () => A && j ? fe(f) : []
+  ), J = g(P);
+  a(() => {
+    if (!A || !j) return;
+    const e = fe(f).filter(
+      (t) => !J.current.includes(t)
+    );
+    e.length && (J.current = [
+      ...J.current,
+      ...e
+    ], ce((t) => [...t, ...e]));
+  }, [f, A, j]);
+  const $e = (e) => {
+    ce(
+      (t) => t.includes(e) ? t.filter((o) => o !== e) : [...t, e]
+    ), G(-1);
+  }, L = g(null), ie = g([]), Q = g(null);
+  ot(
+    L,
     () => {
-      if (V(null), i && l === "2.0") {
-        const e = Ae(
-          We.current
+      if (M(null), l && c === "2.0") {
+        const e = je(
+          Ze.current
         );
-        X?.(e);
+        oe?.(e);
       } else
-        X?.(a);
+        oe?.(m);
     },
-    [de, ne]
-  ), f(() => {
+    [we, ie]
+  ), a(() => {
     const e = setTimeout(() => {
-      x.current && x.current.focus({ preventScroll: !0 });
+      L.current && L.current.focus({ preventScroll: !0 });
     }, 0);
     return () => clearTimeout(e);
-  }, []);
-  const Ue = (e) => {
-    const t = [];
-    return e.forEach((n) => {
-      if (n.options)
-        n.options.forEach((r) => {
-          r.disabled || t.push(r);
-        });
-      else {
-        const s = n;
-        s.disabled || t.push(s);
-      }
-    }), t;
-  };
-  f(() => {
-    const e = (n) => {
-      const r = Ue(o && d ? O : a);
-      if (r.length !== 0) {
-        if (n.key === "ArrowDown")
-          n.preventDefault(), te((c) => {
-            const S = c < r.length - 1 ? c + 1 : 0;
+  }, []), a(() => {
+    const e = (o) => {
+      const d = st(
+        n && p ? S : m,
+        h === "nested" ? { collapsedParents: P } : void 0
+      );
+      if (d.length !== 0) {
+        if (o.key === "ArrowDown")
+          o.preventDefault(), G((r) => {
+            const s = r < d.length - 1 ? r + 1 : 0;
             return setTimeout(() => {
-              const C = $.current?.querySelector(
-                `[data-option-index="${S}"]`
+              const I = Q.current?.querySelector(
+                `[data-option-index="${s}"]`
               );
-              C && C.scrollIntoView({
+              I && I.scrollIntoView({
                 block: "nearest",
                 behavior: "smooth"
               });
-            }, 0), S;
+            }, 0), s;
           });
-        else if (n.key === "ArrowUp")
-          n.preventDefault(), te((c) => {
-            const S = c > 0 ? c - 1 : r.length - 1;
+        else if (o.key === "ArrowUp")
+          o.preventDefault(), G((r) => {
+            const s = r > 0 ? r - 1 : d.length - 1;
             return setTimeout(() => {
-              const C = $.current?.querySelector(
-                `[data-option-index="${S}"]`
+              const I = Q.current?.querySelector(
+                `[data-option-index="${s}"]`
               );
-              C && C.scrollIntoView({
+              I && I.scrollIntoView({
                 block: "nearest",
                 behavior: "smooth"
               });
-            }, 0), S;
+            }, 0), s;
           });
-        else if (n.key === "Enter" && D >= 0) {
-          n.preventDefault();
-          const c = r[D];
-          c && (K({
-            ...c,
-            selected: !c.selected
-          }), R && R(c));
+        else if (o.key === "Enter" && F >= 0) {
+          o.preventDefault();
+          const r = d[F];
+          r && ($({
+            ...r,
+            selected: !r.selected
+          }), W && W(r));
         }
       }
-    }, t = x.current;
+    }, t = L.current;
     if (t)
       return t.addEventListener("keydown", e), () => {
         t.removeEventListener("keydown", e);
       };
   }, [
-    D,
-    o,
-    O,
-    a,
-    d,
-    K,
-    R
+    F,
+    n,
+    S,
+    m,
+    p,
+    $,
+    W,
+    h,
+    P
   ]);
-  const h = le ?? G.height, F = typeof h == "number" ? g && i ? h - 96 : g && !i || !g && i ? h - 48 : h : h;
-  function qe(e, t) {
-    V(e && t ? {
+  const y = he ?? ee.height, H = typeof y == "number" ? T && l ? y - 96 : T && !l || !T && l ? y - 48 : y : y;
+  function ze(e, t) {
+    M(e && t ? {
       title: e,
       description: t
     } : null);
   }
-  f(() => {
-    const e = B ?? G.width;
-    if (p === null)
-      P(e);
+  a(() => {
+    const e = v ?? ee.width;
+    if (w === null)
+      z(e);
     else if (typeof e == "number")
-      P(e * 2);
+      z(e * 2);
     else if (typeof e == "string" && e.endsWith("px")) {
       const t = parseInt(e.replace("px", "")) * 2;
-      P(t);
+      z(t);
     }
-  }, [p]);
-  const W = [], z = ((e) => {
-    if (!i || !I && I !== 0)
+  }, [w]);
+  const U = [], X = ((e) => {
+    if (!l || !D && D !== 0)
       return e;
-    const n = Be(a) >= I;
-    return n ? e.map((s) => {
-      if (s.options)
+    const o = Ke(m) >= D;
+    return o ? e.map((i) => {
+      if (i.options)
         return {
-          ...s,
-          options: s.options.map((r) => ({
-            ...r,
-            disabled: r.disabled || !r.selected && n
+          ...i,
+          options: i.options.map((s) => ({
+            ...s,
+            disabled: s.disabled || !s.selected && o
           }))
         };
-      {
-        const r = s;
-        return {
-          ...r,
-          disabled: r.disabled || !r.selected && n
-        };
-      }
+      const d = (s) => ({
+        ...s,
+        disabled: s.disabled || !s.selected
+      }), r = d(i);
+      return h === "nested" && r.children?.length ? {
+        ...r,
+        children: r.children.map(d)
+      } : r;
     }) : e;
   })(
-    (o && d ? O : a).map((e) => {
-      if (o && !d)
+    (n && p ? S : m).map((e) => {
+      if (n && !p)
         if (e.options) {
           const t = { ...e };
-          return t.options = t.options.filter((n) => n.label?.toLowerCase().includes(o.toLowerCase()) ? (W.push(
-            !o || n.label === o
+          return t.options = t.options.filter((o) => o.label?.toLowerCase().includes(n.toLowerCase()) ? (U.push(
+            !n || o.label === n
           ), !0) : !1), t.options.length > 0 ? t : null;
         } else
-          return e.label?.toLowerCase().includes(o.toLowerCase()) || e.searchKey?.toLowerCase().includes(o.toLowerCase()) ? (W.push(
-            !o || e.label === o
+          return e.label?.toLowerCase().includes(n.toLowerCase()) || e.searchKey?.toLowerCase().includes(n.toLowerCase()) ? (U.push(
+            !n || e.label === n
           ), e) : null;
       return e;
     }).filter((e) => e !== null)
-  ), M = !!g && o && z.length === 0, L = !o && !!we, T = !o && !!w && !L, Ze = !o && !z.length && !L && !T, oe = L || T || Ze, je = H?.title || "No results found", Ke = H?.subTitle || "Please try again later or contact us at support@bik.ai if you require further assistance.", Pe = w?.title || "Failed to load options", Ve = w?.subTitle || "Something went wrong while fetching the list. Please try again", $e = {
+  ), Y = !!T && n && X.length === 0, C = !n && !!Le, k = !n && !!b && !C, Me = !n && !X.length && !C && !k, ue = C || k || Me, Ge = q?.title || "No results found", Je = q?.subTitle || "Please try again later or contact us at support@bik.ai if you require further assistance.", Qe = b?.title || "Failed to load options", Xe = b?.subTitle || "Something went wrong while fetching the list. Please try again", Ye = {
     buttonText: "Try again",
     buttonType: "text",
     size: "small",
-    buttonTextColor: E.background.inverseLight,
-    customIconColor: E.background.inverseLight,
-    LeadingIcon: Ne
-  }, re = {
+    buttonTextColor: R.background.inverseLight,
+    customIconColor: R.background.inverseLight,
+    LeadingIcon: tt
+  }, de = {
     IconHolderStyle: {
-      background: E.background.negative.light
+      background: R.background.negative.light
     },
-    Icon: /* @__PURE__ */ u(Me, { color: E.content.negative, width: 24, height: 24 }),
-    ...w
+    Icon: /* @__PURE__ */ u(et, { color: R.content.negative, width: 24, height: 24 }),
+    ...b
   };
-  re.actionButton = {
-    ...$e,
-    ...w?.actionButton ?? {}
+  de.actionButton = {
+    ...Ye,
+    ...b?.actionButton ?? {}
   };
-  const ze = L ? void 0 : T ? re : H;
-  return /* @__PURE__ */ N(
-    nt,
+  const _e = C ? void 0 : k ? de : q;
+  return /* @__PURE__ */ _(
+    at,
     {
-      version: l,
-      ref: x,
+      version: c,
+      ref: L,
       tabIndex: -1,
       style: {
         // maxWidth: descriptionInfo ? 800 : 400,
-        width: He,
-        ...xe,
+        width: Ne,
+        ...Ee,
         outline: "none"
       },
       children: [
-        /* @__PURE__ */ N(
+        /* @__PURE__ */ _(
           "div",
           {
             style: {
-              width: p ? "50%" : "100%",
+              width: w ? "50%" : "100%",
               display: "flex",
               flexDirection: "column",
               background: "white"
             },
             children: [
-              !!g && /* @__PURE__ */ u(
-                rt,
+              !!T && /* @__PURE__ */ u(
+                pt,
                 {
-                  onSearch: Ee,
-                  version: l,
-                  placeholder: ie
+                  onSearch: Fe,
+                  version: c,
+                  placeholder: pe
                 }
               ),
-              oe ? /* @__PURE__ */ u(
+              ue ? /* @__PURE__ */ u(
                 "div",
                 {
                   "data-testid": "dropdown-options-zero-state",
                   style: {
-                    height: J ? F : h,
+                    height: te ? H : y,
                     display: "flex",
-                    background: E.background.base
+                    background: R.background.base
                   },
                   children: /* @__PURE__ */ u(
-                    Ge,
+                    nt,
                     {
-                      ...ze ?? {},
-                      isLoading: L,
-                      title: T ? Pe : je,
-                      subTitle: T ? Ve : Ke
+                      ..._e ?? {},
+                      isLoading: C,
+                      title: k ? Qe : Ge,
+                      subTitle: k ? Xe : Je
                     }
                   )
                 }
-              ) : /* @__PURE__ */ N(
-                ot,
+              ) : /* @__PURE__ */ _(
+                ft,
                 {
                   "data-testid": "dropdown-menu-list",
-                  minHeight: J ? F : void 0,
-                  maxHeight: F,
-                  ref: $,
+                  minHeight: te ? H : void 0,
+                  maxHeight: H,
+                  ref: Q,
                   children: [
-                    !!i && !M && !ae && /* @__PURE__ */ u(
-                      et,
+                    !!l && !Y && !ye && /* @__PURE__ */ u(
+                      ut,
                       {
-                        version: l,
-                        options: o && d ? O : a,
-                        onSelect: Re,
-                        checkboxActiveColor: U,
-                        brandSelectedRow: q
+                        version: c,
+                        options: n && p ? S : m,
+                        onSelect: Ue,
+                        checkboxActiveColor: V,
+                        brandSelectedRow: Z,
+                        childrenLayout: h
                       }
                     ),
-                    !Q && M && /* @__PURE__ */ u(
-                      st,
+                    !ne && Y && /* @__PURE__ */ u(
+                      ht,
                       {
-                        isLoading: ge,
-                        errorMessage: ke,
-                        onRetry: Ie,
-                        height: F,
-                        searchedString: o,
-                        containerWidth: B,
-                        version: l
+                        isLoading: Se,
+                        errorMessage: Pe,
+                        onRetry: He,
+                        height: H,
+                        searchedString: n,
+                        containerWidth: v,
+                        version: c
                       }
                     ),
-                    Q && (M || !!W.length && W.every((e) => e === !1)) && /* @__PURE__ */ u(
-                      Ye,
+                    ne && (Y || !!U.length && U.every((e) => e === !1)) && /* @__PURE__ */ u(
+                      ct,
                       {
-                        version: l,
-                        isMultiSelect: i,
-                        onSelect: De,
-                        searchedString: o,
-                        checkboxActiveColor: U,
-                        brandSelectedRow: q
+                        version: c,
+                        isMultiSelect: l,
+                        onSelect: qe,
+                        searchedString: n,
+                        checkboxActiveColor: V,
+                        brandSelectedRow: Z
                       }
                     ),
                     /* @__PURE__ */ u(
-                      _e,
+                      it,
                       {
-                        onInfiniteScroll: pe,
-                        onDropdownItemClick: R,
-                        version: l,
-                        onSelect: K,
-                        showDescription: qe,
-                        isMultiSelect: i,
-                        options: z,
-                        useDefaultCursor: Oe,
-                        ref: ne,
-                        focusedIndex: D,
-                        isDraggable: y,
-                        onOptionsReorder: Se,
-                        showCheckboxForCustomElement: Te,
-                        checkboxActiveColor: U,
-                        brandSelectedRow: q
+                        onInfiniteScroll: be,
+                        onDropdownItemClick: W,
+                        version: c,
+                        onSelect: $,
+                        showDescription: ze,
+                        isMultiSelect: l,
+                        options: X,
+                        useDefaultCursor: Ie,
+                        ref: ie,
+                        focusedIndex: F,
+                        isDraggable: x,
+                        onOptionsReorder: Ae,
+                        showCheckboxForCustomElement: De,
+                        checkboxActiveColor: V,
+                        brandSelectedRow: Z,
+                        childrenLayout: h,
+                        collapsibleChildren: A,
+                        collapsedParents: P,
+                        onToggleCollapsed: $e
                       }
                     )
                   ]
                 }
               ),
-              !!i && !oe && l !== "2.0" && /* @__PURE__ */ u(
-                tt,
+              !!l && !ue && c !== "2.0" && /* @__PURE__ */ u(
+                dt,
                 {
                   onClear: () => {
-                    ve(), he?.();
+                    ve(), xe?.();
                   },
-                  onApply: Fe,
-                  list: o && d ? O : a,
-                  buttonText: fe,
-                  buttonOptions: me,
-                  hideClearButton: Le
+                  onApply: Ve,
+                  list: n && p ? S : m,
+                  buttonText: Te,
+                  buttonOptions: Oe,
+                  hideClearButton: Re,
+                  hideSelectedCount: We,
+                  childrenLayout: h
                 }
               )
             ]
           }
         ),
-        !!p && /* @__PURE__ */ u(
-          Xe,
+        !!w && /* @__PURE__ */ u(
+          lt,
           {
-            title: p.title,
-            description: p.description,
-            version: l
+            title: w.title,
+            description: w.description,
+            version: c
           }
         )
       ]
@@ -405,6 +427,6 @@ const G = {
   );
 };
 export {
-  Tt as OpenedDropdown
+  Bt as OpenedDropdown
 };
 //# sourceMappingURL=OpennedDropdown.js.map