@ck-ui/component-library 1.0.8 → 1.0.10

package/dist/components/Table/_helpers/FilterColumnToolbar.js

@@ -1,6 +1,6 @@
-import { jsxs as x, Fragment as N, jsx as e } from "react/jsx-runtime";
-import { useRef as O, useState as r, useCallback as y } from "react";
-import { Popover as M } from "../../Popover/index.js";
+import { jsxs as N, Fragment as O, jsx as e } from "react/jsx-runtime";
+import { useRef as x, useState as r, useCallback as M } from "react";
+import { Popover as y } from "../../Popover/index.js";
 import P from "./TableFilterModal/index.js";
 import V from "./ColumnManager/index.js";
 import { isTableConfigChanged as W, isTableConfigDefault as E } from "../_utils/table.utils.js";
@@ -9,7 +9,7 @@ import { S as U, a as $ } from "../../../table-filter-C0zetUfo.js";
 import { CKButton as F } from "../../CKButton/index.js";
 function ie({
   dynamicFilters: b,
-  columnFilters: t,
+  columnFilters: s,
   onColumnFiltersChange: R,
   tableConfig: l,
   onTableConfigChange: T,
@@ -17,38 +17,38 @@ function ie({
   columnManagerConfig: D = {},
   virtualization: S = !1
 }) {
-  const m = O(null), p = O(null), [w, i] = r(!1), [I, o] = r(!1), [f, d] = r(t), [s, a] = r({ ...l }), u = {
+  const m = x(null), d = x(null), [k, i] = r(!1), [w, o] = r(!1), [c, p] = r(s), [t, a] = r({ ...l }), u = {
     ...K,
     ...D,
     columns: l.columns
-  }, h = y((n) => {
+  }, h = M((n) => {
     (typeof n == "function" ? n({ open: !1, type: "", activeOption: "" }) : n).open || (i(!1), o(!1));
-  }, []), k = () => {
-    d(t), o(!1), i((n) => !n);
-  }, z = () => {
-    R(f), i(!1);
+  }, []), I = () => {
+    p(s), o(!1), i((n) => !n);
   }, B = () => {
+    R(c), i(!1);
+  }, _ = () => {
     a({
       ...l,
       columnVisibility: { ...l.columnVisibility },
       columns: [...l.columns]
     }), i(!1), o((n) => !n);
-  }, _ = y((n, C) => {
+  }, j = M((n, C) => {
     a((v) => {
-      const c = [...v.columns], [L] = c.splice(n, 1);
-      return c.splice(C, 0, L), { ...v, columns: c };
+      const f = [...v.columns], [L] = f.splice(n, 1);
+      return f.splice(C, 0, L), { ...v, columns: f };
     });
-  }, []), j = () => {
-    T(s), o(!1);
+  }, []), z = () => {
+    T(t), o(!1);
   }, G = () => {
     a(u);
-  }, J = t.length > 0, g = A === "list";
-  return /* @__PURE__ */ x(N, { children: [
-    g && /* @__PURE__ */ x(N, { children: [
-      /* @__PURE__ */ e("div", { ref: p, className: "inline-flex", children: /* @__PURE__ */ e(
+  }, J = s.length > 0, g = A === "list";
+  return /* @__PURE__ */ N(O, { children: [
+    g && /* @__PURE__ */ N(O, { children: [
+      /* @__PURE__ */ e("div", { ref: d, className: "inline-flex", children: /* @__PURE__ */ e(
         F,
         {
-          onClick: B,
+          onClick: _,
           variant: "secondary",
           size: "medium",
           className: "min-w-0!",
@@ -61,18 +61,18 @@ function ie({
     /* @__PURE__ */ e("div", { ref: m, className: "inline-flex", children: /* @__PURE__ */ e(
       F,
       {
-        onClick: k,
+        onClick: I,
         variant: "secondary",
         size: "medium",
-        className: `min-w-0! relative ${J ? "after:content-[''] after:absolute after:-top-[1px] after:-right-[1px] after:size-[5px] after:rounded-full after:bg-primary" : ""}`,
+        className: `min-w-0! ${J ? "ckds-toolbar-btn-indicator" : ""}`,
         "aria-label": "Open filters",
         icons: { left: /* @__PURE__ */ e($, {}) }
       }
     ) }),
     /* @__PURE__ */ e(
-      M,
+      y,
       {
-        open: w,
+        open: k,
         onClose: () => i(!1),
         anchorRef: m,
         align: "right",
@@ -81,35 +81,35 @@ function ie({
           P,
           {
             filters: b,
-            draftColumnFilters: f,
-            setDraftColumnFilters: d,
-            handleApplyFilters: z,
+            draftColumnFilters: c,
+            setDraftColumnFilters: p,
+            handleApplyFilters: B,
             setModalOpen: h,
             virtualization: S,
-            isFilterChanged: JSON.stringify(f) !== JSON.stringify(t)
+            isFilterChanged: JSON.stringify(c) !== JSON.stringify(s)
           }
         ) })
       }
     ),
     g && /* @__PURE__ */ e(
-      M,
+      y,
       {
-        open: I,
+        open: w,
         onClose: () => o(!1),
-        anchorRef: p,
+        anchorRef: d,
         align: "right",
         minWidth: "680px",
         children: /* @__PURE__ */ e("div", { className: "min-h-[562px] relative", children: /* @__PURE__ */ e(
           V,
           {
-            draftConfig: s,
+            draftConfig: t,
             setDraftConfig: a,
-            moveDraftColumn: _,
-            handleApplyPref: j,
+            moveDraftColumn: j,
+            handleApplyPref: z,
             setModalOpen: h,
             handleResetToDefault: G,
-            isDefault: E(s, u),
-            isConfigChanged: W(s, l)
+            isDefault: E(t, u),
+            isConfigChanged: W(t, l)
           }
         ) })
       }

package/dist/components/Table/_helpers/GroupedHeader/index.d.ts

@@ -8,8 +8,9 @@ interface GroupedHeaderProps<TData> {
     selectionCell?: React.ReactNode;
     lastColId: string | null;
     columnSizing?: Record<string, number>;
-    pinnedStyle: (column: Header<TData, unknown>["column"], table: Table<TData>, offset: number) => React.CSSProperties;
+    pinnedStyle: (column: Header<TData, unknown>["column"], table: Table<TData>, offset: number, columnSizing?: Record<string, number>) => React.CSSProperties;
     selectionOffset: number;
+    handleResizeWithScrollFollow?: (handler: ((e: unknown) => void) | undefined) => (e: React.MouseEvent | React.TouchEvent) => void;
 }
 /**
  * Renders the double header as a SINGLE <tr> where:
@@ -19,6 +20,6 @@ interface GroupedHeaderProps<TData> {
  *
  * This avoids the rowspan problem with display:flex rows.
  */
-export default function GroupedHeader<TData>({ headerGroups, table, hasSelection, getSortIcon, selectionCell, lastColId, columnSizing, pinnedStyle: getPinnedStyle, selectionOffset, }: GroupedHeaderProps<TData>): import("react/jsx-runtime").JSX.Element | null;
+export default function GroupedHeader<TData>({ headerGroups, table, hasSelection, getSortIcon, selectionCell, lastColId, columnSizing, pinnedStyle: getPinnedStyle, selectionOffset, handleResizeWithScrollFollow, }: GroupedHeaderProps<TData>): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../lib/components/Table/_helpers/GroupedHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,KAAK,EAAE,KAAK,MAAM,EAAoB,MAAM,uBAAuB,CAAC;AAC9F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG/D,UAAU,kBAAkB,CAAC,KAAK;IAChC,YAAY,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;IACtC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,CAAC,SAAS,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACpE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,KAAK,KAAK,CAAC,aAAa,CAAC;IACpH,eAAe,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,EAC3C,YAAY,EACZ,KAAK,EACL,YAAoB,EACpB,WAAW,EACX,aAAa,EACb,SAAS,EACT,YAAY,EACZ,WAAW,EAAE,cAAc,EAC3B,eAAe,GAChB,EAAE,kBAAkB,CAAC,KAAK,CAAC,kDAgQ3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../lib/components/Table/_helpers/GroupedHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,KAAK,EAAE,KAAK,MAAM,EAAoB,MAAM,uBAAuB,CAAC;AAC9F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG/D,UAAU,kBAAkB,CAAC,KAAK;IAChC,YAAY,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;IACtC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,CAAC,SAAS,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACpE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,KAAK,CAAC,aAAa,CAAC;IAC3J,eAAe,EAAE,MAAM,CAAC;IACxB,4BAA4B,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAClI;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,EAC3C,YAAY,EACZ,KAAK,EACL,YAAoB,EACpB,WAAW,EACX,aAAa,EACb,SAAS,EACT,YAAY,EACZ,WAAW,EAAE,cAAc,EAC3B,eAAe,EACf,4BAA4B,GAC7B,EAAE,kBAAkB,CAAC,KAAK,CAAC,kDA8P3B"}

package/dist/components/Table/_helpers/GroupedHeader/index.js

@@ -1,47 +1,48 @@
-import { jsxs as r, jsx as o, Fragment as y } from "react/jsx-runtime";
+import { jsxs as d, jsx as l } from "react/jsx-runtime";
 import { f as S } from "../../../../index-Bcvmezbu.js";
-import { columnLayoutStyle as x, columnsLayoutStyle as T } from "../../_utils/table.utils.js";
+import { columnLayoutStyle as w, columnsLayoutStyle as T } from "../../_utils/table.utils.js";
 function K({
-  headerGroups: I,
+  headerGroups: D,
   table: h,
-  hasSelection: N = !1,
-  getSortIcon: u,
-  selectionCell: v,
-  lastColId: w,
-  columnSizing: m,
-  pinnedStyle: D,
-  selectionOffset: H
+  hasSelection: G = !1,
+  getSortIcon: p,
+  selectionCell: z,
+  lastColId: R,
+  columnSizing: i,
+  pinnedStyle: C,
+  selectionOffset: y,
+  handleResizeWithScrollFollow: f
 }) {
-  const t = h.getVisibleLeafColumns();
-  if (t.length === 0) return null;
-  const i = /* @__PURE__ */ new Map();
-  t.forEach((l) => i.set(l.id, null)), I.forEach((l) => {
-    l.columns.forEach((s) => {
-      i.has(s) && i.set(s, l.label);
+  const o = h.getVisibleLeafColumns();
+  if (o.length === 0) return null;
+  const u = /* @__PURE__ */ new Map();
+  o.forEach((t) => u.set(t.id, null)), D.forEach((t) => {
+    t.columns.forEach((s) => {
+      u.has(s) && u.set(s, t.label);
     });
   });
-  const R = h.getHeaderGroups()[0], p = /* @__PURE__ */ new Map();
-  R?.headers.forEach((l) => p.set(l.column.id, l));
-  const z = t[t.length - 1]?.id, f = [];
-  let d = 0;
-  for (; d < t.length; ) {
-    const l = t[d], s = i.get(l.id);
+  const E = h.getHeaderGroups()[0], g = /* @__PURE__ */ new Map();
+  E?.headers.forEach((t) => g.set(t.column.id, t));
+  const L = o[o.length - 1]?.id, b = [];
+  let r = 0;
+  for (; r < o.length; ) {
+    const t = o[r], s = u.get(t.id);
     if (s === null)
-      f.push({ type: "ungrouped", colIds: [l.id] }), d++;
+      b.push({ type: "ungrouped", colIds: [t.id] }), r++;
     else {
-      const g = [];
-      for (; d < t.length && i.get(t[d].id) === s; )
-        g.push(t[d].id), d++;
-      f.push({ type: "group", colIds: g, label: s });
+      const m = [];
+      for (; r < o.length && u.get(o[r].id) === s; )
+        m.push(o[r].id), r++;
+      b.push({ type: "group", colIds: m, label: s });
     }
   }
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ d(
     "tr",
     {
       className: "ckds-dragable-tr ckds-dragable-tr-double",
       style: { display: "flex", width: "100%", minWidth: "inherit" },
       children: [
-        N && /* @__PURE__ */ o(
+        G && /* @__PURE__ */ l(
           "th",
           {
             className: "ckds-dragable-th ckds-dragable-th-double-ungrouped",
@@ -54,135 +55,135 @@ function K({
               left: 0,
               zIndex: 2
             },
-            children: v
+            children: z
           }
         ),
-        f.map((l, s) => {
-          const g = l.colIds.map((e) => t.find((c) => c.id === e)).filter((e) => !!e), L = l.colIds.includes(z);
-          if (l.type === "ungrouped") {
-            const e = p.get(l.colIds[0]), c = e?.column.getIsPinned(), n = e?.column.id === w;
-            return /* @__PURE__ */ r(y, { children: [
-              n && c === "right" && /* @__PURE__ */ o("th", { "aria-hidden": "true", className: "ckds-dragable-th ckds-dragable-th-double-ungrouped ckds-dragable-th-filler", style: { flex: "1 1 auto", minWidth: 0, padding: 0, border: "none", boxShadow: "none" } }, `dh-cell-${s}-filler`),
-              /* @__PURE__ */ r(
-                "th",
-                {
-                  className: "ckds-dragable-th ckds-dragable-th-double-ungrouped",
-                  style: {
-                    ...e ? D(e.column, h, H) : {},
-                    ...e ? x(e.column, t, m) : {},
-                    position: c ? "sticky" : "relative",
-                    zIndex: c ? 2 : void 0
-                  },
-                  children: [
-                    e && /* @__PURE__ */ r(
-                      "div",
-                      {
-                        style: {
-                          display: "flex",
-                          alignItems: "center",
-                          flex: "1 1 auto",
-                          minWidth: 0,
-                          justifyContent: e.column.getCanSort() ? "space-between" : e.column.columnDef.align === "right" ? "flex-end" : e.column.columnDef.align === "center" ? "center" : "flex-start",
-                          cursor: e.column.getCanSort() ? "pointer" : "default"
-                        },
-                        onClick: e.column.getCanSort() ? e.column.getToggleSortingHandler() : void 0,
-                        role: "button",
-                        tabIndex: e.column.getCanSort() ? 0 : -1,
-                        onKeyDown: (a) => {
-                          e.column.getCanSort() && (a.key === "Enter" || a.key === " ") && e.column.getToggleSortingHandler()?.(a);
-                        },
-                        children: [
-                          e.column.columnDef.align === "right" && e.column.getCanSort() && /* @__PURE__ */ o("span", { className: "ckds-sort-icon ckds-sort-icon-left", children: u(e.column.getIsSorted()) }),
-                          S(e.column.columnDef.header, e.getContext()),
-                          e.column.columnDef.align !== "right" && e.column.getCanSort() && /* @__PURE__ */ o("span", { className: "ckds-sort-icon", children: u(e.column.getIsSorted()) })
-                        ]
-                      }
-                    ),
-                    e && !n && e.column.getCanResize() && /* @__PURE__ */ o(
-                      "div",
-                      {
-                        onMouseDown: e.getResizeHandler(),
-                        onTouchStart: e.getResizeHandler(),
-                        className: "ckds-col-resize-handle",
-                        role: "separator",
-                        "aria-orientation": "vertical",
-                        children: /* @__PURE__ */ o("div", { className: "ckds-col-resize-line" })
-                      }
-                    )
-                  ]
-                },
-                `dh-cell-${s}`
-              )
-            ] });
-          }
-          const G = l.colIds[l.colIds.length - 1], E = t.find((e) => e.id === G), M = L && E?.getIsPinned() === "right";
-          return /* @__PURE__ */ r(y, { children: [
-            M && /* @__PURE__ */ o("th", { "aria-hidden": "true", className: "ckds-dragable-th ckds-dragable-th-double-group ckds-dragable-th-filler", style: { flex: "1 1 auto", minWidth: 0, padding: 0, border: "none", boxShadow: "none" } }, `dh-cell-${s}-filler`),
-            /* @__PURE__ */ r(
+        b.map((t, s) => {
+          const m = t.colIds.map((e) => o.find((n) => n.id === e)).filter((e) => !!e);
+          if (t.type === "ungrouped") {
+            const e = g.get(t.colIds[0]), n = e?.column.getIsPinned(), c = e?.column.id === R;
+            return /* @__PURE__ */ d(
               "th",
               {
-                className: "ckds-dragable-th ckds-dragable-th-double-group",
+                className: "ckds-dragable-th ckds-dragable-th-double-ungrouped",
                 style: {
-                  ...T(g, t, m)
+                  ...e ? C(e.column, h, y, i) : {},
+                  ...e ? w(e.column, o, i) : {},
+                  position: n ? "sticky" : "relative",
+                  zIndex: n ? 2 : void 0,
+                  ...n ? { backgroundColor: "var(--ckcl-black-50, #F9F9F9)" } : {}
                 },
                 children: [
-                  /* @__PURE__ */ o("div", { className: "ckds-dragable-th-double-group-label", children: /* @__PURE__ */ o("span", { className: "ckds-group-label-text", children: l.label }) }),
-                  /* @__PURE__ */ o("div", { className: "ckds-dragable-th-double-group-subheaders", children: l.colIds.map((e, c) => {
-                    const n = p.get(e), C = c === l.colIds.length - 1, a = n?.column.columnDef?.align, b = n?.column.getCanSort() ?? !1, P = b ? "space-between" : a === "right" ? "flex-end" : a === "center" ? "center" : "flex-start";
-                    return /* @__PURE__ */ r(
-                      "div",
-                      {
-                        className: "ckds-dragable-th-double-subheader",
-                        style: {
-                          ...n ? x(n.column, t, m) : {},
-                          position: "relative"
-                        },
-                        children: [
-                          n && /* @__PURE__ */ r(
-                            "div",
-                            {
-                              style: {
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: P,
-                                width: "100%",
-                                height: "100%",
-                                cursor: n.column.getCanSort() ? "pointer" : "default"
-                              },
-                              onClick: n.column.getCanSort() ? n.column.getToggleSortingHandler() : void 0,
-                              role: "button",
-                              tabIndex: n.column.getCanSort() ? 0 : -1,
-                              onKeyDown: (k) => {
-                                n.column.getCanSort() && (k.key === "Enter" || k.key === " ") && n.column.getToggleSortingHandler()?.(k);
-                              },
-                              children: [
-                                a === "right" && b && /* @__PURE__ */ o("span", { className: "ckds-sort-icon ckds-sort-icon-left", children: u(n.column.getIsSorted()) }),
-                                S(n.column.columnDef.header, n.getContext()),
-                                a !== "right" && b && /* @__PURE__ */ o("span", { className: "ckds-sort-icon", children: u(n.column.getIsSorted()) })
-                              ]
-                            }
-                          ),
-                          n && !C && n.column.getCanResize() && /* @__PURE__ */ o(
-                            "div",
-                            {
-                              onMouseDown: n.getResizeHandler(),
-                              onTouchStart: n.getResizeHandler(),
-                              className: "ckds-col-resize-handle",
-                              role: "separator",
-                              "aria-orientation": "vertical",
-                              children: /* @__PURE__ */ o("div", { className: "ckds-col-resize-line" })
-                            }
-                          )
-                        ]
+                  e && /* @__PURE__ */ d(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        flex: "1 1 auto",
+                        minWidth: 0,
+                        justifyContent: e.column.getCanSort() ? "space-between" : e.column.columnDef.align === "right" ? "flex-end" : e.column.columnDef.align === "center" ? "center" : "flex-start",
+                        cursor: e.column.getCanSort() ? "pointer" : "default"
                       },
-                      `dh-sub-${e}`
-                    );
-                  }) })
+                      onClick: e.column.getCanSort() ? e.column.getToggleSortingHandler() : void 0,
+                      role: "button",
+                      tabIndex: e.column.getCanSort() ? 0 : -1,
+                      onKeyDown: (a) => {
+                        e.column.getCanSort() && (a.key === "Enter" || a.key === " ") && e.column.getToggleSortingHandler()?.(a);
+                      },
+                      children: [
+                        e.column.columnDef.align === "right" && e.column.getCanSort() && /* @__PURE__ */ l("span", { className: "ckds-sort-icon ckds-sort-icon-left", children: p(e.column.getIsSorted()) }),
+                        S(e.column.columnDef.header, e.getContext()),
+                        e.column.columnDef.align !== "right" && e.column.getCanSort() && /* @__PURE__ */ l("span", { className: "ckds-sort-icon", children: p(e.column.getIsSorted()) })
+                      ]
+                    }
+                  ),
+                  e && !c && e.column.getCanResize() && /* @__PURE__ */ l(
+                    "div",
+                    {
+                      onMouseDown: f ? f(e.getResizeHandler()) : e.getResizeHandler(),
+                      onTouchStart: e.getResizeHandler(),
+                      className: "ckds-col-resize-handle",
+                      role: "separator",
+                      "aria-orientation": "vertical",
+                      children: /* @__PURE__ */ l("div", { className: "ckds-col-resize-line" })
+                    }
+                  )
                 ]
               },
               `dh-cell-${s}`
-            )
-          ] });
+            );
+          }
+          const x = g.get(t.colIds[0]), v = g.get(t.colIds[t.colIds.length - 1]), I = x?.column.getIsPinned() === "left", M = v?.column.getIsPinned() === "right", H = I || M, N = I ? x : v;
+          return /* @__PURE__ */ d(
+            "th",
+            {
+              className: "ckds-dragable-th ckds-dragable-th-double-group",
+              style: {
+                ...T(m, o, i),
+                ...H && N ? C(N.column, h, y, i) : {},
+                ...H ? { position: "sticky", zIndex: 3, backgroundColor: "var(--ckcl-black-50, #F9F9F9)" } : {}
+              },
+              children: [
+                /* @__PURE__ */ l("div", { className: "ckds-dragable-th-double-group-label", children: /* @__PURE__ */ l("span", { className: "ckds-group-label-text", children: t.label }) }),
+                /* @__PURE__ */ l("div", { className: "ckds-dragable-th-double-group-subheaders", children: t.colIds.map((e) => {
+                  const n = g.get(e), c = n?.column.columnDef?.align, a = n?.column.getCanSort() ?? !1, P = a ? "space-between" : c === "right" ? "flex-end" : c === "center" ? "center" : "flex-start";
+                  return /* @__PURE__ */ d(
+                    "div",
+                    {
+                      className: "ckds-dragable-th-double-subheader",
+                      style: {
+                        // Sub-headers are flex children of the group container, not the row.
+                        // Compute layout relative to only sibling columns within this group
+                        // so they divide the group's width correctly.
+                        ...n ? w(n.column, m, i) : {},
+                        position: "relative"
+                      },
+                      children: [
+                        n && /* @__PURE__ */ d(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: P,
+                              width: "100%",
+                              height: "100%",
+                              cursor: n.column.getCanSort() ? "pointer" : "default"
+                            },
+                            onClick: n.column.getCanSort() ? n.column.getToggleSortingHandler() : void 0,
+                            role: "button",
+                            tabIndex: n.column.getCanSort() ? 0 : -1,
+                            onKeyDown: (k) => {
+                              n.column.getCanSort() && (k.key === "Enter" || k.key === " ") && n.column.getToggleSortingHandler()?.(k);
+                            },
+                            children: [
+                              c === "right" && a && /* @__PURE__ */ l("span", { className: "ckds-sort-icon ckds-sort-icon-left", children: p(n.column.getIsSorted()) }),
+                              S(n.column.columnDef.header, n.getContext()),
+                              c !== "right" && a && /* @__PURE__ */ l("span", { className: "ckds-sort-icon", children: p(n.column.getIsSorted()) })
+                            ]
+                          }
+                        ),
+                        n && e !== L && n.column.getCanResize() && /* @__PURE__ */ l(
+                          "div",
+                          {
+                            onMouseDown: f ? f(n.getResizeHandler()) : n.getResizeHandler(),
+                            onTouchStart: n.getResizeHandler(),
+                            className: "ckds-col-resize-handle",
+                            role: "separator",
+                            "aria-orientation": "vertical",
+                            children: /* @__PURE__ */ l("div", { className: "ckds-col-resize-line" })
+                          }
+                        )
+                      ]
+                    },
+                    `dh-sub-${e}`
+                  );
+                }) })
+              ]
+            },
+            `dh-cell-${s}`
+          );
         })
       ]
     }

package/dist/components/Table/_helpers/TableFilterModal/OptionList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OptionList.d.ts","sourceRoot":"","sources":["../../../../../lib/components/Table/_helpers/TableFilterModal/OptionList.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAKhE,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,cAAc,EACd,UAAU,EACV,OAAO,EACP,qBAAqB,EACrB,cAAc,GACf,EAAE,eAAe,2CA2HjB"}
+{"version":3,"file":"OptionList.d.ts","sourceRoot":"","sources":["../../../../../lib/components/Table/_helpers/TableFilterModal/OptionList.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAKhE,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,cAAc,EACd,UAAU,EACV,OAAO,EACP,qBAAqB,EACrB,cAAc,GACf,EAAE,eAAe,2CAoIjB"}

package/dist/components/Table/_helpers/TableFilterModal/OptionList.js

@@ -1,11 +1,11 @@
 import "react/jsx-runtime";
 import "react";
-import { O as d } from "../../../../OptionList-BM4AleXV.js";
+import { O as d } from "../../../../OptionList-DU0iA8Y4.js";
 import "../../../CKCheckbox/index.js";
 import "./OptionListItems.js";
-import "../../../../search-B_cup-NN.js";
 import "../../../Typography/index.js";
-import "../../../Switch/index.js";
+import "../../../Toggle/index.js";
+import "../../../Search/index.js";
 export {
   d as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../lib/components/Table/_helpers/TableFilterModal/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,qBAAqB,EAItB,MAAM,0BAA0B,CAAC;AAClC,OAAO,eAAe,CAAC;AAEvB,iBAAS,gBAAgB,CAAC,EACxB,OAAO,EACP,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,EACZ,cAAqB,EACrB,eAAe,GAChB,EAAE,qBAAqB,2CAgIvB;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../lib/components/Table/_helpers/TableFilterModal/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,qBAAqB,EAItB,MAAM,0BAA0B,CAAC;AAClC,OAAO,eAAe,CAAC;AAEvB,iBAAS,gBAAgB,CAAC,EACxB,OAAO,EACP,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,EACZ,cAAqB,EACrB,eAAe,GAChB,EAAE,qBAAqB,2CA+HvB;AAED,eAAe,gBAAgB,CAAC"}