@ck-ui/component-library 0.3.0 → 1.0.1

package/dist/components/SingleSelectDropdown/index.js

@@ -1,64 +1,67 @@
-import { jsxs as l, jsx as s } from "react/jsx-runtime";
-import { useState as d, useRef as g, useMemo as V, useEffect as x } from "react";
-import { s as r, D as A } from "../../DropdownFooter-C20yRiDR.js";
-import { S as B } from "../../chevron-down-Cm9R64Fe.js";
-import { S as M } from "../../info-icon-ooYw3va_.js";
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { useState as d, useRef as g, useMemo as T, useEffect as y } from "react";
+import { s as r, D as V } from "../../DropdownFooter-Dm6aLDx8.js";
+import { S as A } from "../../chevron-down-Cm9R64Fe.js";
+import { S as B } from "../../info-icon-ooYw3va_.js";
 import "../Avatar/index.js";
 import "../CKButton/index.js";
 import "../IconButton/index.js";
 import "../Stepper/index.js";
-import { Tooltip as q } from "../Tooltip/index.js";
+import { Tooltip as M } from "../Tooltip/index.js";
 import "../../index-C8cPPHJD.js";
-import '../../assets/theme-gJHYUL9y.css';import '../../assets/styles-CbbBUzsN.css';import '../../assets/styles-BTZL03H2.css';import '../../assets/styles-D8sahtFb.css';import '../../assets/ReactToastify-tlSLHgLC.css';/* empty css                           */
-import { RadioButton as G } from "../RadioButton/index.js";
-import { Search as H } from "../Search/index.js";
+import '../../assets/theme-gJHYUL9y.css';import '../../assets/styles-DngCqCGW.css';import '../../assets/styles-DLJzdWsF.css';import '../../assets/styles-O-5pBCak.css';import '../../assets/ReactToastify-tlSLHgLC.css';/* empty css                           */
+import { RadioButton as q } from "../RadioButton/index.js";
+import { Search as G } from "../Search/index.js";
 import "../GroupedMultiSelect/_helpers/TagContent.js";
 import "../GroupedMultiSelect/_helpers/OptionRow.js";
 import "../GroupedSingleSelect/_helpers/OptionRow.js";
+import "../Pagination/index.js";
 import "../DateRangePicker/DateRangePicker.js";
+import "../Loader/index.js";
 /* empty css                    */
 /* empty css                    */
 /* empty css                    */
 import "../MultiSelect/_helpers/TagContent.js";
 import "../MultiSelect/_helpers/OptionRow.js";
+import "../ProfileDropdown/index.js";
+import "../MAVDropdown/index.js";
 /* empty css                   */
 import "../FusionChart/index.js";
-function ve({
+function Ce({
   options: u,
-  value: t = null,
-  onChange: y,
+  value: o = null,
+  onChange: D,
   label: v,
-  placeholder: D = "Select",
+  placeholder: O = "Select",
   helperText: N,
-  disabled: o = !1,
-  searchable: O = !0,
-  className: k = "",
-  mandatory: I = !1,
-  width: b = "100%",
-  minWidth: L = "260px",
-  maxWidth: R = "400px"
+  disabled: s = !1,
+  searchable: k = !0,
+  showClearButton: x = !0,
+  className: I = "",
+  mandatory: L = !1,
+  width: b = ""
 }) {
-  const [a, c] = d(!1), [h, i] = d(""), [f, m] = d(t), C = g(null), S = g(null), [E, W] = d(!1), n = u.find((e) => e.value === t), $ = V(() => u.filter(
+  const [a, c] = d(!1), [h, i] = d(""), [f, m] = d(o), C = g(null), S = g(null), [R, E] = d(!1), n = u.find((e) => e.value === o), $ = T(() => u.filter(
     (e) => e.label.toLowerCase().includes(h.toLowerCase())
-  ), [h, u]), j = (e) => {
+  ), [h, u]), W = (e) => {
     m?.(e);
-  }, z = () => {
+  }, j = () => {
     m(null);
+  }, z = () => {
+    D?.(f), c(!1);
   }, F = () => {
-    y?.(f), c(!1);
-  }, T = () => {
-    m(t), c(!1), i("");
+    m(o), c(!1), i("");
   };
-  return x(() => {
+  return y(() => {
     const e = (p) => {
-      C.current?.contains(p.target) || (c(!1), m(t), i(""));
+      C.current?.contains(p.target) || (c(!1), m(o), i(""));
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [t]), x(() => {
+  }, [o]), y(() => {
     const e = S.current;
     if (!e) return;
     const p = () => {
-      W(e.scrollWidth > e.clientWidth);
+      E(e.scrollWidth > e.clientWidth);
     };
     p();
     const w = new ResizeObserver(p);
@@ -67,46 +70,46 @@ function ve({
     "div",
     {
       ref: C,
-      style: { width: b, minWidth: L, maxWidth: R },
-      className: `${r["ckds-single-select"]} ${o ? r.disabled : ""} ${k}`,
+      style: { width: b },
+      className: `${r["ckds-single-select"]} ${s ? r.disabled : ""} ${I}`,
       children: [
-        v && /* @__PURE__ */ l("label", { className: `${r.label} ${o ? r.disabled : ""}`, children: [
+        v && /* @__PURE__ */ l("label", { className: `${r.label} ${s ? r.disabled : ""}`, children: [
           v,
-          I && /* @__PURE__ */ s("span", { className: r.mandatory, children: "*" })
+          L && /* @__PURE__ */ t("span", { className: r.mandatory, children: "*" })
         ] }),
         /* @__PURE__ */ l(
           "button",
           {
             type: "button",
             className: `${r.trigger} ${a ? r.active : ""}`,
-            onClick: () => !o && c((e) => !e),
+            onClick: () => !s && c((e) => !e),
             "aria-haspopup": "listbox",
             "aria-expanded": a,
-            disabled: o,
+            disabled: s,
             children: [
-              /* @__PURE__ */ s(
-                q,
+              /* @__PURE__ */ t(
+                M,
                 {
-                  title: E ? n?.label : "",
+                  title: R ? n?.label : "",
                   placement: "bottom",
-                  children: /* @__PURE__ */ s(
+                  children: /* @__PURE__ */ t(
                     "span",
                     {
                       ref: S,
-                      className: `${n ? r.value : r.placeholder} ${o ? r.disabled : ""}`,
-                      children: n ? n.label : D
+                      className: `${n ? r.value : r.placeholder} ${s ? r.disabled : ""}`,
+                      children: n ? n.label : O
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ s("span", { className: `${r.arrow} ${a ? r.open : ""}`, children: /* @__PURE__ */ s(B, {}) })
+              /* @__PURE__ */ t("span", { className: `${r.arrow} ${a ? r.open : ""}`, children: /* @__PURE__ */ t(A, {}) })
             ]
           }
         ),
         a && /* @__PURE__ */ l("div", { className: r.dropdown, children: [
           /* @__PURE__ */ l("div", { children: [
-            O && /* @__PURE__ */ s("div", { className: r["search-wrapper"], children: /* @__PURE__ */ s(
-              H,
+            k && /* @__PURE__ */ t("div", { className: r["search-wrapper"], children: /* @__PURE__ */ t(
+              G,
               {
                 value: h,
                 placeholder: "Search",
@@ -117,35 +120,36 @@ function ve({
                 inputClassName: r.searchInput
               }
             ) }),
-            /* @__PURE__ */ s("div", { className: r.options, children: $.length === 0 ? /* @__PURE__ */ s("span", { className: r.noData, children: "0 results" }) : $.map((e) => /* @__PURE__ */ s(
-              G,
+            /* @__PURE__ */ t("div", { className: r.options, children: $.length === 0 ? /* @__PURE__ */ t("span", { className: r.noData, children: "0 results" }) : $.map((e) => /* @__PURE__ */ t(
+              q,
               {
                 label: e.label,
                 color: "",
                 selected: f === e.value,
-                onChange: () => j(e.value)
+                onChange: () => W(e.value)
               }
             )) })
           ] }),
-          /* @__PURE__ */ s(
-            A,
+          /* @__PURE__ */ t(
+            V,
             {
-              value: t,
+              value: o,
               selectedValue: f,
-              onClear: z,
-              onCancel: T,
-              onApply: F
+              showClearButton: x,
+              onClear: j,
+              onCancel: F,
+              onApply: z
             }
           )
         ] }),
         N && /* @__PURE__ */ l("div", { className: r.helper, children: [
-          /* @__PURE__ */ s("div", { className: r["helper-icon"], children: /* @__PURE__ */ s(M, {}) }),
-          /* @__PURE__ */ s("div", { className: `${o ? r.disabled : ""}`, children: N })
+          /* @__PURE__ */ t("div", { className: r["helper-icon"], children: /* @__PURE__ */ t(B, {}) }),
+          /* @__PURE__ */ t("div", { className: `${s ? r.disabled : ""}`, children: N })
         ] })
       ]
     }
   );
 }
 export {
-  ve as SingleSelectDropdown
+  Ce as SingleSelectDropdown
 };

package/dist/components/Table/_helpers/ColumnManager/ColumnConfig.d.ts

@@ -1,4 +1,5 @@
 import { ColumnConfigProps } from '../../_types/table.types';
 declare function ColumnConfig<TData>({ draftConfig, setDraftConfig }: ColumnConfigProps<TData>): import("react/jsx-runtime").JSX.Element;
+export { ColumnConfig };
 export default ColumnConfig;
 //# sourceMappingURL=ColumnConfig.d.ts.map

package/dist/components/Table/_helpers/ColumnManager/ColumnConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnConfig.d.ts","sourceRoot":"","sources":["../../../../../lib/components/Table/_helpers/ColumnManager/ColumnConfig.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAElE,iBAAS,YAAY,CAAC,KAAK,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,2CAsFrF;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ColumnConfig.d.ts","sourceRoot":"","sources":["../../../../../lib/components/Table/_helpers/ColumnManager/ColumnConfig.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAElE,iBAAS,YAAY,CAAC,KAAK,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,2CA4FrF;AAED,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,eAAe,YAAY,CAAC"}

package/dist/components/Table/_helpers/ColumnManager/ColumnConfig.js

@@ -1,85 +1,87 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { CKCheckbox as t } from "../../../CKCheckbox/index.js";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { CKCheckbox as d } from "../../../CKCheckbox/index.js";
 import { Typography as l } from "../../../Typography/index.js";
-import { RadioGroup as m } from "../../../RadioGroup/index.js";
-function u({ draftConfig: s, setDraftConfig: c }) {
-  return /* @__PURE__ */ a("div", { className: "ckds-column-config-panel", children: [
-    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ a("label", { className: "ckds-column-config-label", children: [
+import { RadioGroup as c } from "../../../RadioGroup/index.js";
+function h({ draftConfig: a, setDraftConfig: r }) {
+  return /* @__PURE__ */ i("div", { className: "ckds-column-config-panel", children: [
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ i("label", { className: "ckds-column-config-label", children: [
       /* @__PURE__ */ e(
-        t,
+        d,
         {
-          checked: s.wrapText,
-          onChange: (i) => c((n) => ({
-            ...n,
-            wrapText: i
-          }))
+          checked: a.wrapText,
+          onChange: (n) => r((o) => ({
+            ...o,
+            wrapText: n
+          })),
+          size: "md"
         }
       ),
-      /* @__PURE__ */ a("div", { className: "flex flex-col gap-[4px]", children: [
+      /* @__PURE__ */ i("div", { style: { display: "flex", flexDirection: "column", gap: "4px", marginTop: "-1px" }, children: [
         /* @__PURE__ */ e(l, { variant: "body-sm", weight: "medium", children: "Wrap Text" }),
-        /* @__PURE__ */ e(l, { variant: "caption", className: "text-base-400", children: "Show full content in cells instead of truncating" })
+        /* @__PURE__ */ e(l, { color: "secondary", variant: "body-xs", children: "Show full content in cells instead of truncating" })
       ] })
     ] }) }),
-    /* @__PURE__ */ e("div", { className: "mt-4", children: /* @__PURE__ */ a("label", { className: "ckds-column-config-label", children: [
+    /* @__PURE__ */ e("div", { style: { marginTop: "16px" }, children: /* @__PURE__ */ i("label", { className: "ckds-column-config-label", children: [
       /* @__PURE__ */ e(
-        t,
+        d,
         {
-          checked: s.stripedRows,
-          onChange: (i) => c((n) => ({
-            ...n,
-            stripedRows: i
-          }))
+          checked: a.stripedRows,
+          onChange: (n) => r((o) => ({
+            ...o,
+            stripedRows: n
+          })),
+          size: "md"
         }
       ),
-      /* @__PURE__ */ a("div", { className: "flex flex-col gap-[4px]", children: [
+      /* @__PURE__ */ i("div", { style: { display: "flex", flexDirection: "column", gap: "4px", marginTop: "-1px" }, children: [
         /* @__PURE__ */ e(l, { variant: "body-sm", weight: "medium", children: "Zebra Striping" }),
-        /* @__PURE__ */ e(l, { variant: "caption", className: "text-base-400", children: "Alternate row colors for easier reading" })
+        /* @__PURE__ */ e(l, { variant: "body-xs", color: "secondary", children: "Alternate row colors for easier reading" })
       ] })
     ] }) }),
     /* @__PURE__ */ e("div", { className: "ckds-column-config-divider" }),
-    /* @__PURE__ */ a("div", { className: "mt-4", children: [
-      /* @__PURE__ */ a("div", { className: "mb-4", children: [
-        /* @__PURE__ */ e(l, { variant: "body-sm", className: "text-base-400", children: "Pin Start Column" }),
-        /* @__PURE__ */ e(l, { variant: "caption", weight: "medium", children: "Keep columns fixed when scrolling" })
+    /* @__PURE__ */ i("div", { style: { marginTop: "16px" }, children: [
+      /* @__PURE__ */ i("div", { style: { marginBottom: "16px" }, children: [
+        /* @__PURE__ */ e(l, { variant: "body-sm", weight: "medium", children: "Pin Start Column" }),
+        /* @__PURE__ */ e(l, { variant: "body-xs", color: "secondary", children: "Keep columns fixed when scrolling" })
       ] }),
-      /* @__PURE__ */ e(
-        m,
+      /* @__PURE__ */ e("div", { style: { marginTop: "8px" }, children: /* @__PURE__ */ e(
+        c,
         {
           name: "stickyStart",
-          value: s.stickyStart,
-          onChange: (i) => c((n) => ({ ...n, stickyStart: i })),
-          className: "mt-2",
-          size: "small",
+          value: a.stickyStart,
+          onChange: (n) => r((o) => ({ ...o, stickyStart: n })),
           options: [
             { label: "None", value: "none" },
             { label: "First Column", value: "first" },
             { label: "First Two Columns", value: "firstTwo" }
-          ]
+          ],
+          gap: "8px"
         }
-      )
+      ) })
     ] }),
-    /* @__PURE__ */ a("div", { className: "mt-4", children: [
-      /* @__PURE__ */ a("div", { className: "mb-4", children: [
-        /* @__PURE__ */ e(l, { variant: "body-sm", className: "text-base-400", children: "Pin End Column" }),
-        /* @__PURE__ */ e(l, { variant: "caption", weight: "medium", children: "Keep the last column fixed while scrolling" })
+    /* @__PURE__ */ i("div", { style: { marginTop: "16px" }, children: [
+      /* @__PURE__ */ i("div", { style: { marginBottom: "16px" }, children: [
+        /* @__PURE__ */ e(l, { variant: "body-sm", weight: "medium", children: "Pin End Column" }),
+        /* @__PURE__ */ e(l, { variant: "body-xs", color: "secondary", children: "Keep the last column fixed while scrolling" })
       ] }),
-      /* @__PURE__ */ e(
-        m,
+      /* @__PURE__ */ e("div", { style: { marginTop: "8px" }, children: /* @__PURE__ */ e(
+        c,
         {
           name: "stickyEnd",
-          value: s.stickyEnd,
-          onChange: (i) => c((n) => ({ ...n, stickyEnd: i })),
-          className: "mt-2",
+          value: a.stickyEnd,
+          onChange: (n) => r((o) => ({ ...o, stickyEnd: n })),
           size: "small",
           options: [
             { label: "None", value: "none" },
             { label: "Last Column", value: "last" }
-          ]
+          ],
+          gap: "8px"
         }
-      )
+      ) })
     ] })
   ] });
 }
 export {
-  u as default
+  h as ColumnConfig,
+  h as default
 };

package/dist/components/Table/_helpers/ColumnManager/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../lib/components/Table/_helpers/ColumnManager/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,kBAAkB,EAA0B,MAAM,0BAA0B,CAAC;AAC3F,OAAO,eAAe,CAAC;AA8DvB,iBAAS,aAAa,CAAC,KAAK,EAAE,EAC5B,WAAW,EACX,cAAc,EACd,eAAe,EACf,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,SAAS,EACT,eAAe,GAChB,EAAE,kBAAkB,CAAC,KAAK,CAAC,2CAkG3B;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../lib/components/Table/_helpers/ColumnManager/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,kBAAkB,EAA0B,MAAM,0BAA0B,CAAC;AAC3F,OAAO,eAAe,CAAC;AAkEvB,iBAAS,aAAa,CAAC,KAAK,EAAE,EAC5B,WAAW,EACX,cAAc,EACd,eAAe,EACf,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,SAAS,EACT,eAAe,GAChB,EAAE,kBAAkB,CAAC,KAAK,CAAC,2CAoG3B;AAED,eAAe,aAAa,CAAC"}