@bikdotai/bik-component-library 0.0.821-beta.9 → 0.0.821

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

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