@ck-ui/component-library 1.0.1 → 1.0.3

package/dist/components/MultiSelect/SimpleMultiSelect.js

@@ -1,214 +1,228 @@
-import { jsxs as c, jsx as t, Fragment as te } from "react/jsx-runtime";
-import { useState as u, useRef as re, useEffect as ne, useMemo as ae, useCallback as i } from "react";
-import { s as r } from "../../styles.module-DakCndIP.js";
-import { Search as oe } from "../Search/index.js";
-import { S as ce } from "../../info-icon-ooYw3va_.js";
-import { CKCheckbox as ie } from "../CKCheckbox/index.js";
-import de from "./_helpers/TriggerButton.js";
-import me from "./_helpers/OptionRow.js";
-import he from "./_helpers/SearchResult.js";
-import ue from "./_helpers/DropdownFooter.js";
-import { getInitialSelected as J } from "./_utils/getInitialSelected.js";
-import { filterOptions as ge } from "./_utils/filterOptions.js";
-import { mergeClasses as d } from "../../utils/mergeClasses.js";
-function Me({
-  label: x,
-  helperText: S,
-  required: L,
-  placeholder: Q = "Choose parameter",
-  searchPlaceholder: W = "Search",
-  selectAllLabel: M = "Select all",
+import { jsxs as i, jsx as r, Fragment as ae } from "react/jsx-runtime";
+import { useState as v, useRef as ce, useEffect as de, useMemo as ie, useCallback as u } from "react";
+import { s as t } from "../../styles.module-yIHBMSTk.js";
+import { Search as ue } from "../Search/index.js";
+import { S as me } from "../../info-icon-ooYw3va_.js";
+import { CKCheckbox as he } from "../CKCheckbox/index.js";
+import ge from "./_helpers/TriggerButton.js";
+import fe from "./_helpers/OptionRow.js";
+import pe from "./_helpers/SearchResult.js";
+import ve from "./_helpers/DropdownFooter.js";
+import { getInitialSelected as W } from "./_utils/getInitialSelected.js";
+import { filterOptions as Ce } from "./_utils/filterOptions.js";
+import { useDropdownDirection as we } from "./_utils/useDropdownDirection.js";
+import { mergeClasses as m } from "../../utils/mergeClasses.js";
+function je({
+  label: T,
+  helperText: b,
+  required: q,
+  placeholder: x = "Choose parameter",
+  searchPlaceholder: B = "Search",
+  selectAllLabel: j = "Select all",
   options: s,
-  defaultSelected: A = [],
-  onApply: T,
-  exclude: b,
-  setExclude: q,
-  onSelect: D,
-  onClear: E,
-  classNames: m = {},
-  showExcludeBtn: B,
-  width: K = ""
+  defaultSelected: F = [],
+  onApply: k,
+  exclude: C,
+  setExclude: K,
+  onSelect: I,
+  onClear: J,
+  classNames: h = {},
+  showExcludeBtn: P,
+  width: $ = "",
+  maxChips: N = 1
 }) {
-  const { labelWrapperClass: P, helperClass: G } = m, [w, p] = u(!1), [C, v] = u(""), [n, I] = u(
-    () => J(A)
-  ), [a, g] = u(
-    () => J(A)
-  ), [H, f] = u(!1), [U, o] = u(!1), k = re(null);
-  ne(() => {
+  const { labelWrapperClass: G, helperClass: H } = h, [y, O] = v(!1), [R, D] = v(""), [n, L] = v(
+    () => W(F)
+  ), [o, g] = v(
+    () => W(F)
+  ), [U, f] = v(!1), [V, c] = v(!1), M = ce(null), { vertical: z, horizontal: X } = we(M, y);
+  de(() => {
     const e = (l) => {
-      k.current && !k.current.contains(l.target) && (g(n), f(n?.length === s?.length), p(!1), o(!1), v(""));
+      M.current && !M.current.contains(l.target) && (g(n), f(n?.length === s?.length), O(!1), c(!1), D(""));
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
   }, [n, s.length]);
-  const y = ae(
-    () => ge(s, C),
-    [s, C]
-  ), j = 2, z = i(
-    (e, l, h, se) => {
-      h || o(!1);
-      const F = (N) => {
-        const O = N?.some((R) => R?.value === e) ? N?.filter((R) => R?.value !== e) : [...N, { value: e, label: l }];
-        return f(O?.length === s?.length), O?.length <= j && o(!1), O;
+  const A = ie(
+    () => Ce(s, R),
+    [s, R]
+  ), Q = u(
+    (e, l, p, ne) => {
+      p || c(!1);
+      const oe = (E) => {
+        const a = E?.some((w) => w?.value === e) ? E?.filter((w) => w?.value !== e) : [...E, { value: e, label: l }];
+        return f(a?.length === s?.length), a?.length <= N && c(!1), a;
       };
-      se && I(F), g(F), D?.();
+      if (ne) {
+        const a = ((d) => d?.some((S) => S?.value === e) ? d?.filter((S) => S?.value !== e) : [...d, { value: e, label: l }])(n), w = s?.filter((d) => a?.some((S) => S?.value === d?.value))?.map((d) => ({ ...d, isChecked: !0 }));
+        f(a?.length === s?.length), a?.length <= N && c(!1), L(a), g(a), k(w, C), I?.();
+        return;
+      }
+      g(oe), I?.();
     },
-    [s.length, D]
-  ), V = i(() => {
-    o(!1), f((e) => {
+    [s, I, k, C, n, N]
+  ), Y = u(() => {
+    c(!1), f((e) => {
       const l = !e;
       return g(
-        l ? s?.map((h) => ({ value: h?.value, label: h?.label })) : []
+        l ? s?.map((p) => ({ value: p?.value, label: p?.label })) : []
       ), l;
     });
-  }, [s]), X = i(() => {
-    g([]), f(!1), E?.();
-  }, [E]), Y = i(() => {
-    const e = s?.filter((l) => a?.some((h) => h?.value === l?.value))?.map((l) => ({ ...l, isChecked: !0 }));
-    T(e, b), I(a), p(!1);
-  }, [s, a, b, T]), Z = i(() => {
-    g(n), f(n?.length === s?.length), o(!1), p(!1), v("");
-  }, [n, s.length]), _ = i(() => {
-    p((e) => !e), o(!1);
-  }, []), $ = i((e) => {
-    e.stopPropagation(), o((l) => !l);
-  }, []), ee = JSON.stringify(a) === JSON.stringify(n), le = w ? a : n;
-  return /* @__PURE__ */ c("div", { className: r["ckds-wrapper"], style: { width: K }, children: [
-    x && /* @__PURE__ */ c(
+  }, [s]), Z = u(() => {
+    g([]), f(!1), J?.();
+  }, [J]), _ = u(() => {
+    const e = s?.filter((l) => o?.some((p) => p?.value === l?.value))?.map((l) => ({ ...l, isChecked: !0 }));
+    k(e, C), L(o), O(!1);
+  }, [s, o, C, k]), ee = u(() => {
+    g(n), f(n?.length === s?.length), c(!1), O(!1), D("");
+  }, [n, s.length]), le = u(() => {
+    O((e) => !e), c(!1);
+  }, []), te = u((e) => {
+    e.stopPropagation(), c((l) => !l);
+  }, []), se = JSON.stringify(o) === JSON.stringify(n), re = y ? o : n;
+  return /* @__PURE__ */ i("div", { className: t["ckds-wrapper"], style: { width: $ }, children: [
+    T && /* @__PURE__ */ i(
       "span",
       {
-        className: d(
+        className: m(
           "ckds-body-xs-med",
-          r["label-wrapper"],
-          P ?? ""
+          t["label-wrapper"],
+          G ?? ""
         ),
         children: [
-          x,
-          L && /* @__PURE__ */ t("span", { className: r.required, children: " *" })
+          T,
+          q && /* @__PURE__ */ r("span", { className: t.required, children: " *" })
         ]
       }
     ),
-    /* @__PURE__ */ c("div", { className: r["trigger-wrapper"], ref: k, children: [
-      /* @__PURE__ */ t(
-        de,
+    /* @__PURE__ */ i("div", { className: t["trigger-wrapper"], ref: M, children: [
+      /* @__PURE__ */ r(
+        ge,
         {
-          open: w,
-          selected: le,
-          placeholder: Q,
-          showMenu: U,
+          open: y,
+          selected: re,
+          placeholder: x,
+          showMenu: V,
           isAllSelected: !1,
-          selectAllLabel: M,
-          onToggleOpen: _,
-          onToggleMenu: $,
-          onRemove: z,
-          classNames: m,
-          maxChips: j
+          selectAllLabel: j,
+          onToggleOpen: le,
+          onToggleMenu: te,
+          onRemove: Q,
+          classNames: h,
+          maxChips: N
         }
       ),
-      S && /* @__PURE__ */ t(
+      b && /* @__PURE__ */ r(
         "div",
         {
-          className: d(
+          className: m(
             "ckds-body-xs-reg",
-            r["helper-text"],
-            G ?? ""
+            t["helper-text"],
+            H ?? ""
           ),
-          children: /* @__PURE__ */ c(te, { children: [
-            /* @__PURE__ */ t(ce, { width: "12", height: "12" }),
+          children: /* @__PURE__ */ i(ae, { children: [
+            /* @__PURE__ */ r(me, { width: "12", height: "12" }),
             " ",
-            S
+            b
           ] })
         }
       ),
-      w && /* @__PURE__ */ c("div", { className: d(r.dropdown, S ? r["dropdown-helper"] : ""), children: [
-        /* @__PURE__ */ t(
-          oe,
+      y && /* @__PURE__ */ i("div", { className: m(
+        t.dropdown,
+        t[`dropdown-align-${X}`],
+        z === "up" ? t["dropdown-up"] : "",
+        b && z === "down" ? t["dropdown-helper"] : "",
+        b && z === "up" ? t["dropdown-helper-up"] : ""
+      ), children: [
+        /* @__PURE__ */ r(
+          ue,
           {
             size: "medium",
-            value: C,
-            placeholder: W,
-            onChange: v,
-            onClear: () => v(""),
+            value: R,
+            placeholder: B,
+            onChange: D,
+            onClear: () => D(""),
             wrapperClassName: "",
             inputClassName: ""
           }
         ),
-        /* @__PURE__ */ t(
-          he,
+        /* @__PURE__ */ r(
+          pe,
           {
-            totalResults: y?.length,
-            exclude: b,
-            setExclude: q,
-            isToggleDisable: a?.length === 0,
-            showExcludeBtn: B,
-            hideExclude: !1
+            totalResults: A?.length,
+            exclude: C,
+            setExclude: K,
+            isToggleDisable: o?.length === 0,
+            showExcludeBtn: P,
+            hideExclude: !1,
+            selectedCount: o?.length
           }
         ),
-        /* @__PURE__ */ t("div", { className: r.divider }),
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ r("div", { className: t.divider }),
+        /* @__PURE__ */ i(
           "div",
           {
-            className: d(
-              r["ckds-options-list"],
-              m?.optionsListWrapperClass ?? ""
+            className: m(
+              t["ckds-options-list"],
+              h?.optionsListWrapperClass ?? ""
             ),
             children: [
-              C.length === 0 && /* @__PURE__ */ c(
+              R.length === 0 && /* @__PURE__ */ i(
                 "div",
                 {
-                  className: d(
-                    r["option-row"],
-                    m?.optionRowClass ?? ""
+                  className: m(
+                    t["option-row"],
+                    h?.optionRowClass ?? ""
                   ),
-                  onClick: V,
+                  onClick: Y,
                   children: [
-                    /* @__PURE__ */ t(ie, { checked: H, size: "md" }),
-                    /* @__PURE__ */ t(
+                    /* @__PURE__ */ r(he, { checked: U, size: "md" }),
+                    /* @__PURE__ */ r(
                       "span",
                       {
-                        className: d(
+                        className: m(
                           "ckds-body-sm-reg",
-                          r["option-label"]
+                          t["option-label"]
                         ),
-                        children: M
+                        children: j
                       }
                     )
                   ]
                 }
               ),
-              y?.length === 0 ? /* @__PURE__ */ t(
+              A?.length === 0 ? /* @__PURE__ */ r(
                 "span",
                 {
-                  className: d(
+                  className: m(
                     "ckds-body-sm-reg",
-                    r["no-results"]
+                    t["no-results"]
                   ),
                   children: "No results found"
                 }
-              ) : y?.map((e) => /* @__PURE__ */ t(
-                me,
+              ) : A?.map((e) => /* @__PURE__ */ r(
+                fe,
                 {
                   value: e?.value,
                   label: e?.label,
-                  checked: a?.some(
+                  checked: o?.some(
                     (l) => l?.value === e?.value
                   ),
-                  onToggle: z,
-                  classNames: m
+                  onToggle: Q,
+                  classNames: h
                 },
                 e?.value
               ))
             ]
           }
         ),
-        /* @__PURE__ */ t(
-          ue,
+        /* @__PURE__ */ r(
+          ve,
           {
-            onClear: X,
-            onCancel: Z,
-            onApply: Y,
-            classNames: m,
-            isClearDisabled: a?.length === 0,
-            isApplyDisabled: ee,
+            onClear: Z,
+            onCancel: ee,
+            onApply: _,
+            classNames: h,
+            isClearDisabled: o?.length === 0,
+            isApplyDisabled: se,
             hideClear: !1
           }
         )
@@ -217,5 +231,5 @@ function Me({
   ] });
 }
 export {
-  Me as SimpleMultiSelect
+  je as SimpleMultiSelect
 };

package/dist/components/MultiSelect/_helpers/DropdownFooter.js

@@ -1,5 +1,5 @@
 import { jsxs as t, jsx as s } from "react/jsx-runtime";
-import { s as l } from "../../../styles.module-DakCndIP.js";
+import { s as l } from "../../../styles.module-yIHBMSTk.js";
 import { CKButton as r } from "../../CKButton/index.js";
 import { mergeClasses as e } from "../../../utils/mergeClasses.js";
 const y = ({

package/dist/components/MultiSelect/_helpers/OptionRow.js

@@ -1,6 +1,6 @@
 import { jsxs as p, jsx as i } from "react/jsx-runtime";
 import { memo as a, useCallback as l } from "react";
-import { s as m } from "../../../styles.module-DakCndIP.js";
+import { s as m } from "../../../styles.module-yIHBMSTk.js";
 import { CKCheckbox as d } from "../../CKCheckbox/index.js";
 import { mergeClasses as t } from "../../../utils/mergeClasses.js";
 const u = a(function({

package/dist/components/MultiSelect/_helpers/OverflowMenu.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { s } from "../../../styles.module-DakCndIP.js";
+import { s } from "../../../styles.module-yIHBMSTk.js";
 import o from "./OverflowMenuItem.js";
 const a = ({ selected: m, maxChips: t = 2 }) => /* @__PURE__ */ r("div", { className: s["menu-list"], children: m?.map((e, l) => l < t ? null : /* @__PURE__ */ r(o, { item: e }, e?.value)) });
 export {

package/dist/components/MultiSelect/_helpers/OverflowMenuItem.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { s as i } from "../../../styles.module-DakCndIP.js";
+import { s as i } from "../../../styles.module-yIHBMSTk.js";
 import { Tooltip as f } from "../../Tooltip/index.js";
 import { useRef as a, useState as d, useLayoutEffect as u } from "react";
 import { mergeClasses as p } from "../../../utils/mergeClasses.js";

package/dist/components/MultiSelect/_helpers/SearchResult.d.ts

@@ -1,4 +1,4 @@
 import { ResultProps } from '../_types/type';
-declare const SearchResult: ({ totalResults, exclude, setExclude, isToggleDisable, showExcludeBtn, hideExclude, }: ResultProps) => import("react/jsx-runtime").JSX.Element;
+declare const SearchResult: ({ totalResults, exclude, setExclude, isToggleDisable, showExcludeBtn, hideExclude, selectedCount, }: ResultProps) => import("react/jsx-runtime").JSX.Element;
 export default SearchResult;
 //# sourceMappingURL=SearchResult.d.ts.map

package/dist/components/MultiSelect/_helpers/SearchResult.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResult.d.ts","sourceRoot":"","sources":["../../../../lib/components/MultiSelect/_helpers/SearchResult.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,QAAA,MAAM,YAAY,GAAI,sFAOnB,WAAW,4CAmBb,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SearchResult.d.ts","sourceRoot":"","sources":["../../../../lib/components/MultiSelect/_helpers/SearchResult.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,QAAA,MAAM,YAAY,GAAI,qGAQnB,WAAW,4CA6Bb,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/MultiSelect/_helpers/SearchResult.js

@@ -1,33 +1,43 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import { s as e } from "../../../styles.module-DakCndIP.js";
-import { Toggle as p } from "../../Toggle/index.js";
-import { mergeClasses as a } from "../../../utils/mergeClasses.js";
-const g = ({
-  totalResults: l,
-  exclude: c,
-  setExclude: d,
+import { jsxs as s, Fragment as t, jsx as a } from "react/jsx-runtime";
+import { s as e } from "../../../styles.module-yIHBMSTk.js";
+import { Toggle as o } from "../../Toggle/index.js";
+import { mergeClasses as r } from "../../../utils/mergeClasses.js";
+const f = ({
+  totalResults: c,
+  exclude: d,
+  setExclude: i,
   isToggleDisable: m,
-  showExcludeBtn: o,
-  hideExclude: i
+  showExcludeBtn: p,
+  hideExclude: n,
+  selectedCount: l
 }) => /* @__PURE__ */ s("div", { className: e["result-wrapper"], children: [
-  /* @__PURE__ */ s("span", { className: a("ckds-cap-reg", e["result-count"]), children: [
-    l,
-    " ",
-    l === 1 ? "Result" : "Results"
+  /* @__PURE__ */ s("div", { className: e["result-left"], children: [
+    /* @__PURE__ */ s("span", { className: r("ckds-cap-reg", e["result-count"]), children: [
+      c,
+      " ",
+      c === 1 ? "Result" : "Results"
+    ] }),
+    l !== void 0 && l > 0 && /* @__PURE__ */ s(t, { children: [
+      /* @__PURE__ */ a("span", { className: e["result-pipe"] }),
+      /* @__PURE__ */ s("span", { className: r("ckds-cap-reg", e["result-selected"]), children: [
+        l,
+        " Selected"
+      ] })
+    ] })
   ] }),
-  o && !i && /* @__PURE__ */ s("div", { className: e["exclude-row"], children: [
-    /* @__PURE__ */ r("span", { className: a("ckds-cap-reg", e["exclude-label"]), children: "Exclude" }),
-    /* @__PURE__ */ r(
-      p,
+  p && !n && /* @__PURE__ */ s("div", { className: e["exclude-row"], children: [
+    /* @__PURE__ */ a("span", { className: r("ckds-cap-reg", e["exclude-label"]), children: "Exclude" }),
+    /* @__PURE__ */ a(
+      o,
       {
         size: "small",
-        checked: c,
-        onChange: d,
+        checked: d,
+        onChange: i,
         disabled: m
       }
     )
   ] })
 ] });
 export {
-  g as default
+  f as default
 };

package/dist/components/MultiSelect/_helpers/TagContent.js

@@ -1,7 +1,7 @@
 import { jsxs as h, jsx as o } from "react/jsx-runtime";
 import v, { useRef as g, useState as w, useLayoutEffect as C, useCallback as l } from "react";
 import { S as O } from "../../../cancel-BAgTEOGD.js";
-import { s } from "../../../styles.module-DakCndIP.js";
+import { s } from "../../../styles.module-yIHBMSTk.js";
 import { Tooltip as R } from "../../Tooltip/index.js";
 const j = v.memo(function({
   label: t,

package/dist/components/MultiSelect/_helpers/TriggerButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TriggerButton.d.ts","sourceRoot":"","sources":["../../../../lib/components/MultiSelect/_helpers/TriggerButton.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAIzD,QAAA,MAAM,aAAa,GAAI,yJAapB,kBAAkB,4CA6DpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"TriggerButton.d.ts","sourceRoot":"","sources":["../../../../lib/components/MultiSelect/_helpers/TriggerButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAKzD,QAAA,MAAM,aAAa,GAAI,yJAapB,kBAAkB,4CAuFpB,CAAC;AAEF,eAAe,aAAa,CAAC"}