@rio-cloud/rio-uikit 2.3.0-beta.1 → 2.3.0-beta.3

package/components/table/render/body/TableBodyContent.d.ts

@@ -0,0 +1,21 @@
+import { MutableRefObject } from 'react';
+import { TableHtmlAttributes, TableRowData } from '../../Table.types';
+import { RenderBodyRow, TableRenderContextValue } from '../../context/TableRenderContext';
+import { TableRenderConfigContextValue } from '../../context/TableRenderConfigContext';
+export type TableBodyContentProps = {
+    columnCount: number;
+    hasDeclaredChildren: boolean;
+    htmlAttributes: TableHtmlAttributes;
+    isVirtualized: boolean;
+    itemsRef: MutableRefObject<HTMLDivElement | null>;
+    paddingBottom: number;
+    paddingTop: number;
+    renderConfigContext: TableRenderConfigContextValue<TableRowData>;
+    renderContext: TableRenderContextValue<TableRowData>;
+    shouldAnimateBodyRows: boolean;
+    virtualRows: Array<{
+        row: RenderBodyRow<TableRowData>;
+    }>;
+};
+declare const TableBodyContent: (props: TableBodyContentProps) => import("react/jsx-runtime").JSX.Element;
+export default TableBodyContent;

package/components/table/render/body/TableBodyContent.js

@@ -0,0 +1,52 @@
+import { jsxs as w, Fragment as g, jsx as t } from "react/jsx-runtime";
+import { AnimatePresence as v } from "motion/react";
+import { isValidElement as B, cloneElement as C } from "react";
+import x from "./TableEmptyRow.js";
+const j = (m) => {
+  const {
+    columnCount: c,
+    hasDeclaredChildren: u,
+    htmlAttributes: p,
+    isVirtualized: d,
+    itemsRef: y,
+    paddingBottom: i,
+    paddingTop: l,
+    renderConfigContext: h,
+    renderContext: o,
+    shouldAnimateBodyRows: f,
+    virtualRows: R
+  } = m, a = (e) => {
+    const n = `${e.kind}-${String(e.rowId)}`, s = o.renderBodyRow?.(e);
+    return B(s) ? C(s, { key: n }) : null;
+  }, b = (e) => {
+    y.current = e;
+  }, r = (e) => /* @__PURE__ */ t(
+    "div",
+    {
+      ...p,
+      className: "table-body",
+      ref: d ? b : void 0,
+      role: "rowgroup",
+      children: e
+    }
+  );
+  if (d)
+    return r(
+      /* @__PURE__ */ w(g, { children: [
+        l > 0 ? /* @__PURE__ */ t("div", { "aria-hidden": !0, className: "table-body-virtual-spacer", style: { height: l } }) : null,
+        R.map(({ row: e }) => a(e)),
+        i > 0 ? /* @__PURE__ */ t("div", { "aria-hidden": !0, className: "table-body-virtual-spacer", style: { height: i } }) : null
+      ] })
+    );
+  if (o.bodyRows.length > 0) {
+    const e = o.bodyRows.map((n) => a(n));
+    return r(
+      f ? /* @__PURE__ */ t(v, { initial: !1, children: e }) : e
+    );
+  }
+  return r(u ? null : /* @__PURE__ */ t(x, { columnCount: c, content: h.noRowsState }));
+};
+export {
+  j as default
+};
+//# sourceMappingURL=TableBodyContent.js.map

package/components/table/render/body/TableBodyContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBodyContent.js","sources":["../../../../../src/components/table/render/body/TableBodyContent.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport { cloneElement, isValidElement, type MutableRefObject, type ReactElement, type ReactNode } from 'react';\n\nimport type { TableHtmlAttributes, TableRowData } from '../../Table.types';\nimport type { RenderBodyRow, TableRenderContextValue } from '../../context/TableRenderContext';\nimport type { TableRenderConfigContextValue } from '../../context/TableRenderConfigContext';\nimport TableEmptyRow from './TableEmptyRow';\n\nexport type TableBodyContentProps = {\n    columnCount: number;\n    hasDeclaredChildren: boolean;\n    htmlAttributes: TableHtmlAttributes;\n    isVirtualized: boolean;\n    itemsRef: MutableRefObject<HTMLDivElement | null>;\n    paddingBottom: number;\n    paddingTop: number;\n    renderConfigContext: TableRenderConfigContextValue<TableRowData>;\n    renderContext: TableRenderContextValue<TableRowData>;\n    shouldAnimateBodyRows: boolean;\n    virtualRows: Array<{ row: RenderBodyRow<TableRowData> }>;\n};\n\nconst TableBodyContent = (props: TableBodyContentProps) => {\n    const {\n        columnCount,\n        hasDeclaredChildren,\n        htmlAttributes,\n        isVirtualized,\n        itemsRef,\n        paddingBottom,\n        paddingTop,\n        renderConfigContext,\n        renderContext,\n        shouldAnimateBodyRows,\n        virtualRows,\n    } = props;\n\n    const renderResolvedBodyRow = (row: RenderBodyRow<TableRowData>) => {\n        const rowKey = `${row.kind}-${String(row.rowId)}`;\n        const renderedRow = renderContext.renderBodyRow?.(row);\n\n        return isValidElement(renderedRow) ? cloneElement(renderedRow as ReactElement, { key: rowKey }) : null;\n    };\n\n    const handleItemsRef = (element: HTMLDivElement | null) => {\n        itemsRef.current = element;\n    };\n\n    const renderBodyWrapper = (content: ReactNode) => (\n        <div\n            {...htmlAttributes}\n            className='table-body'\n            ref={isVirtualized ? handleItemsRef : undefined}\n            role='rowgroup'\n        >\n            {content}\n        </div>\n    );\n\n    if (isVirtualized) {\n        return renderBodyWrapper(\n            <>\n                {paddingTop > 0 ? (\n                    <div aria-hidden className='table-body-virtual-spacer' style={{ height: paddingTop }} />\n                ) : null}\n                {virtualRows.map(({ row }) => renderResolvedBodyRow(row))}\n                {paddingBottom > 0 ? (\n                    <div aria-hidden className='table-body-virtual-spacer' style={{ height: paddingBottom }} />\n                ) : null}\n            </>\n        );\n    }\n\n    if (renderContext.bodyRows.length > 0) {\n        const renderedBodyRows = renderContext.bodyRows.map(row => renderResolvedBodyRow(row));\n\n        return renderBodyWrapper(\n            shouldAnimateBodyRows ? (\n                <AnimatePresence initial={false}>{renderedBodyRows}</AnimatePresence>\n            ) : (\n                renderedBodyRows\n            )\n        );\n    }\n\n    if (!hasDeclaredChildren) {\n        return renderBodyWrapper(<TableEmptyRow columnCount={columnCount} content={renderConfigContext.noRowsState} />);\n    }\n\n    return renderBodyWrapper(null);\n};\n\nexport default TableBodyContent;\n"],"names":["TableBodyContent","props","columnCount","hasDeclaredChildren","htmlAttributes","isVirtualized","itemsRef","paddingBottom","paddingTop","renderConfigContext","renderContext","shouldAnimateBodyRows","virtualRows","renderResolvedBodyRow","row","rowKey","renderedRow","isValidElement","cloneElement","handleItemsRef","element","renderBodyWrapper","content","jsx","jsxs","Fragment","renderedBodyRows","AnimatePresence","TableEmptyRow"],"mappings":";;;;AAsBA,MAAMA,IAAmB,CAACC,MAAiC;AACvD,QAAM;AAAA,IACF,aAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,aAAAC;AAAA,EAAA,IACAX,GAEEY,IAAwB,CAACC,MAAqC;AAChE,UAAMC,IAAS,GAAGD,EAAI,IAAI,IAAI,OAAOA,EAAI,KAAK,CAAC,IACzCE,IAAcN,EAAc,gBAAgBI,CAAG;AAErD,WAAOG,EAAeD,CAAW,IAAIE,EAAaF,GAA6B,EAAE,KAAKD,EAAA,CAAQ,IAAI;AAAA,EACtG,GAEMI,IAAiB,CAACC,MAAmC;AACvD,IAAAd,EAAS,UAAUc;AAAA,EACvB,GAEMC,IAAoB,CAACC,MACvB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGnB;AAAA,MACJ,WAAU;AAAA,MACV,KAAKC,IAAgBc,IAAiB;AAAA,MACtC,MAAK;AAAA,MAEJ,UAAAG;AAAA,IAAA;AAAA,EAAA;AAIT,MAAIjB;AACA,WAAOgB;AAAA,MACH,gBAAAG,EAAAC,GAAA,EACK,UAAA;AAAA,QAAAjB,IAAa,IACV,gBAAAe,EAAC,OAAA,EAAI,eAAW,IAAC,WAAU,6BAA4B,OAAO,EAAE,QAAQf,EAAA,EAAW,CAAG,IACtF;AAAA,QACHI,EAAY,IAAI,CAAC,EAAE,KAAAE,QAAUD,EAAsBC,CAAG,CAAC;AAAA,QACvDP,IAAgB,IACb,gBAAAgB,EAAC,OAAA,EAAI,eAAW,IAAC,WAAU,6BAA4B,OAAO,EAAE,QAAQhB,EAAA,GAAiB,IACzF;AAAA,MAAA,EAAA,CACR;AAAA,IAAA;AAIR,MAAIG,EAAc,SAAS,SAAS,GAAG;AACnC,UAAMgB,IAAmBhB,EAAc,SAAS,IAAI,CAAAI,MAAOD,EAAsBC,CAAG,CAAC;AAErF,WAAOO;AAAA,MACHV,IACI,gBAAAY,EAACI,GAAA,EAAgB,SAAS,IAAQ,aAAiB,IAEnDD;AAAA,IAAA;AAAA,EAGZ;AAEA,SAIOL,EAJFlB,IAIoB,OAHI,gBAAAoB,EAACK,GAAA,EAAc,aAAA1B,GAA0B,SAASO,EAAoB,aAAa,CAGnF;AACjC;"}

package/components/table/render/body/TableEmptyRow.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-const o = ({ columnCount: l, content: a, dataIndex: t }) => /* @__PURE__ */ e("div", { className: "table-row table-row-empty", "data-index": t, role: "row", children: /* @__PURE__ */ e("div", { className: "table-cell table-empty", role: "cell", "aria-colspan": l, children: /* @__PURE__ */ e("div", { className: "table-cell-content", children: a }) }) });
+const r = ({ columnCount: l, content: a, dataIndex: t }) => /* @__PURE__ */ e("div", { className: "table-row table-row-empty table-row-no-hover", "data-index": t, role: "row", children: /* @__PURE__ */ e("div", { className: "table-cell table-empty", role: "cell", "aria-colspan": l, children: /* @__PURE__ */ e("div", { className: "table-cell-content", children: a }) }) });
 export {
-  o as default
+  r as default
 };
 //# sourceMappingURL=TableEmptyRow.js.map

package/components/table/render/body/TableEmptyRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableEmptyRow.js","sources":["../../../../../src/components/table/render/body/TableEmptyRow.tsx"],"sourcesContent":["type TableEmptyRowProps = {\n    columnCount: number;\n    content: React.ReactNode;\n    dataIndex?: number;\n};\n\nconst TableEmptyRow = ({ columnCount, content, dataIndex }: TableEmptyRowProps) => (\n    <div className='table-row table-row-empty' data-index={dataIndex} role='row'>\n        <div className='table-cell table-empty' role='cell' aria-colspan={columnCount}>\n            <div className='table-cell-content'>{content}</div>\n        </div>\n    </div>\n);\n\nexport default TableEmptyRow;\n"],"names":["TableEmptyRow","columnCount","content","dataIndex","jsx"],"mappings":";AAMA,MAAMA,IAAgB,CAAC,EAAE,aAAAC,GAAa,SAAAC,GAAS,WAAAC,EAAA,MAC3C,gBAAAC,EAAC,OAAA,EAAI,WAAU,6BAA4B,cAAYD,GAAW,MAAK,OACnE,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,0BAAyB,MAAK,QAAO,gBAAcH,GAC9D,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAF,EAAA,CAAQ,GACjD,EAAA,CACJ;"}
+{"version":3,"file":"TableEmptyRow.js","sources":["../../../../../src/components/table/render/body/TableEmptyRow.tsx"],"sourcesContent":["type TableEmptyRowProps = {\n    columnCount: number;\n    content: React.ReactNode;\n    dataIndex?: number;\n};\n\nconst TableEmptyRow = ({ columnCount, content, dataIndex }: TableEmptyRowProps) => (\n    <div className='table-row table-row-empty table-row-no-hover' data-index={dataIndex} role='row'>\n        <div className='table-cell table-empty' role='cell' aria-colspan={columnCount}>\n            <div className='table-cell-content'>{content}</div>\n        </div>\n    </div>\n);\n\nexport default TableEmptyRow;\n"],"names":["TableEmptyRow","columnCount","content","dataIndex","jsx"],"mappings":";AAMA,MAAMA,IAAgB,CAAC,EAAE,aAAAC,GAAa,SAAAC,GAAS,WAAAC,EAAA,MAC3C,gBAAAC,EAAC,OAAA,EAAI,WAAU,gDAA+C,cAAYD,GAAW,MAAK,OACtF,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,0BAAyB,MAAK,QAAO,gBAAcH,GAC9D,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAF,EAAA,CAAQ,GACjD,EAAA,CACJ;"}

package/components/table/render/header/TableBatchDropdown.d.ts

@@ -4,6 +4,10 @@ export type TableBatchDropdownProps = {
      * Dropdown items rendered for batch actions in the selection header.
      */
     items: NonNullable<ButtonDropdownProps['items']>;
+    /**
+     * Optional class names for the dropdown menu.
+     */
+    dropdownClassName?: ButtonDropdownProps['dropdownClassName'];
 };
-declare const TableBatchDropdown: ({ items }: TableBatchDropdownProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableBatchDropdown: ({ items, dropdownClassName, ...remainingProps }: TableBatchDropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default TableBatchDropdown;

package/components/table/render/header/TableBatchDropdown.js

@@ -1,28 +1,30 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useState as a, useEffect as l } from "react";
-import i from "../../../dropdown/ButtonDropdown.js";
-import { TABLE_HORIZONTAL_SCROLL_EVENT as n } from "../../layout/useHorizontalSectionSync.js";
-const f = ({ items: r }) => {
-  const [s, e] = a(!1);
-  return l(() => {
-    const o = () => e(!1);
-    return window.addEventListener(n, o), () => window.removeEventListener(n, o);
-  }, []), /* @__PURE__ */ t(
-    i,
+import { jsx as n } from "react/jsx-runtime";
+import { useState as i, useEffect as m } from "react";
+import p from "../../../dropdown/ButtonDropdown.js";
+import { TABLE_HORIZONTAL_SCROLL_EVENT as r } from "../../layout/useHorizontalSectionSync.js";
+const h = ({ items: a, dropdownClassName: o, ...s }) => {
+  const [l, e] = i(!1);
+  return m(() => {
+    const t = () => e(!1);
+    return window.addEventListener(r, t), () => window.removeEventListener(r, t);
+  }, []), /* @__PURE__ */ n(
+    p,
     {
-      title: /* @__PURE__ */ t("span", { className: "rioglyph rioglyph-checkboxes" }),
+      ...s,
+      title: /* @__PURE__ */ n("span", { className: "rioglyph rioglyph-checkboxes" }),
       variant: "outline",
       bsSize: "sm",
       toggleClassName: "table-batch-dropdown-button no-hover-scale",
+      dropdownClassName: o ? `text-normal ${o}` : "text-normal",
       iconOnly: !0,
-      items: r,
-      open: s,
+      items: a,
+      open: l,
       onOpen: () => e(!0),
       onClose: () => e(!1)
     }
   );
 };
 export {
-  f as default
+  h as default
 };
 //# sourceMappingURL=TableBatchDropdown.js.map

package/components/table/render/header/TableBatchDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBatchDropdown.js","sources":["../../../../../src/components/table/render/header/TableBatchDropdown.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport ButtonDropdown, { type ButtonDropdownProps } from '../../../dropdown/ButtonDropdown';\nimport { TABLE_HORIZONTAL_SCROLL_EVENT } from '../../layout/useHorizontalSectionSync';\n\nexport type TableBatchDropdownProps = {\n    /**\n     * Dropdown items rendered for batch actions in the selection header.\n     */\n    items: NonNullable<ButtonDropdownProps['items']>;\n};\n\nconst TableBatchDropdown = ({ items }: TableBatchDropdownProps) => {\n    const [open, setOpen] = useState(false);\n\n    useEffect(() => {\n        const handleHorizontalScroll = () => setOpen(false);\n\n        window.addEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n\n        return () => window.removeEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n    }, []);\n\n    return (\n        <ButtonDropdown\n            title={<span className='rioglyph rioglyph-checkboxes' />}\n            variant='outline'\n            bsSize='sm'\n            toggleClassName='table-batch-dropdown-button no-hover-scale'\n            iconOnly\n            items={items}\n            open={open}\n            onOpen={() => setOpen(true)}\n            onClose={() => setOpen(false)}\n        />\n    );\n};\n\nexport default TableBatchDropdown;\n"],"names":["TableBatchDropdown","items","open","setOpen","useState","useEffect","handleHorizontalScroll","TABLE_HORIZONTAL_SCROLL_EVENT","jsx","ButtonDropdown"],"mappings":";;;;AAYA,MAAMA,IAAqB,CAAC,EAAE,OAAAC,QAAqC;AAC/D,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK;AAEtC,SAAAC,EAAU,MAAM;AACZ,UAAMC,IAAyB,MAAMH,EAAQ,EAAK;AAElD,kBAAO,iBAAiBI,GAA+BD,CAAsB,GAEtE,MAAM,OAAO,oBAAoBC,GAA+BD,CAAsB;AAAA,EACjG,GAAG,CAAA,CAAE,GAGD,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,OAAO,gBAAAD,EAAC,QAAA,EAAK,WAAU,+BAAA,CAA+B;AAAA,MACtD,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,iBAAgB;AAAA,MAChB,UAAQ;AAAA,MACR,OAAAP;AAAA,MACA,MAAAC;AAAA,MACA,QAAQ,MAAMC,EAAQ,EAAI;AAAA,MAC1B,SAAS,MAAMA,EAAQ,EAAK;AAAA,IAAA;AAAA,EAAA;AAGxC;"}
+{"version":3,"file":"TableBatchDropdown.js","sources":["../../../../../src/components/table/render/header/TableBatchDropdown.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport ButtonDropdown, { type ButtonDropdownProps } from '../../../dropdown/ButtonDropdown';\nimport { TABLE_HORIZONTAL_SCROLL_EVENT } from '../../layout/useHorizontalSectionSync';\n\nexport type TableBatchDropdownProps = {\n    /**\n     * Dropdown items rendered for batch actions in the selection header.\n     */\n    items: NonNullable<ButtonDropdownProps['items']>;\n\n    /**\n     * Optional class names for the dropdown menu.\n     */\n    dropdownClassName?: ButtonDropdownProps['dropdownClassName'];\n};\n\nconst TableBatchDropdown = ({ items, dropdownClassName, ...remainingProps }: TableBatchDropdownProps) => {\n    const [open, setOpen] = useState(false);\n\n    useEffect(() => {\n        const handleHorizontalScroll = () => setOpen(false);\n\n        window.addEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n\n        return () => window.removeEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n    }, []);\n\n    return (\n        <ButtonDropdown\n            {...remainingProps}\n            title={<span className='rioglyph rioglyph-checkboxes' />}\n            variant='outline'\n            bsSize='sm'\n            toggleClassName='table-batch-dropdown-button no-hover-scale'\n            dropdownClassName={dropdownClassName ? `text-normal ${dropdownClassName}` : 'text-normal'}\n            iconOnly\n            items={items}\n            open={open}\n            onOpen={() => setOpen(true)}\n            onClose={() => setOpen(false)}\n        />\n    );\n};\n\nexport default TableBatchDropdown;\n"],"names":["TableBatchDropdown","items","dropdownClassName","remainingProps","open","setOpen","useState","useEffect","handleHorizontalScroll","TABLE_HORIZONTAL_SCROLL_EVENT","jsx","ButtonDropdown"],"mappings":";;;;AAiBA,MAAMA,IAAqB,CAAC,EAAE,OAAAC,GAAO,mBAAAC,GAAmB,GAAGC,QAA8C;AACrG,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK;AAEtC,SAAAC,EAAU,MAAM;AACZ,UAAMC,IAAyB,MAAMH,EAAQ,EAAK;AAElD,kBAAO,iBAAiBI,GAA+BD,CAAsB,GAEtE,MAAM,OAAO,oBAAoBC,GAA+BD,CAAsB;AAAA,EACjG,GAAG,CAAA,CAAE,GAGD,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,OAAO,gBAAAO,EAAC,QAAA,EAAK,WAAU,+BAAA,CAA+B;AAAA,MACtD,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,iBAAgB;AAAA,MAChB,mBAAmBR,IAAoB,eAAeA,CAAiB,KAAK;AAAA,MAC5E,UAAQ;AAAA,MACR,OAAAD;AAAA,MACA,MAAAG;AAAA,MACA,QAAQ,MAAMC,EAAQ,EAAI;AAAA,MAC1B,SAAS,MAAMA,EAAQ,EAAK;AAAA,IAAA;AAAA,EAAA;AAGxC;"}

package/components/table/render/header/TableColumnFilter.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { ButtonDropdownProps } from '../../../dropdown/ButtonDropdown';
-export type TableColumnFilterProps = {
+export type TableColumnFilterProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'onClick' | 'role'> & {
     /**
      * Custom dropdown content rendered below the filter trigger.
      */

package/components/table/render/header/TableColumnFilter.js

@@ -1,9 +1,9 @@
-import { jsx as s, jsxs as x } from "react/jsx-runtime";
-import { useState as w, useEffect as y } from "react";
-import E from "../../../../utils/classNames.js";
-import L from "../../../dropdown/ButtonDropdown.js";
-import { TABLE_HORIZONTAL_SCROLL_EVENT as d } from "../../layout/useHorizontalSectionSync.js";
-const _ = (p) => {
+import { jsx as s, jsxs as w } from "react/jsx-runtime";
+import { useState as y, useEffect as E } from "react";
+import L from "../../../../utils/classNames.js";
+import S from "../../../dropdown/ButtonDropdown.js";
+import { TABLE_HORIZONTAL_SCROLL_EVENT as p } from "../../layout/useHorizontalSectionSync.js";
+const j = (d) => {
   const {
     activeCount: a = 0,
     active: c = !1,
@@ -17,18 +17,20 @@ const _ = (p) => {
     popperConfig: v,
     pullRight: C = !0,
     toggleClassName: N,
-    usePortal: O = !0
-  } = p, [b, n] = w(!1), e = i !== void 0, r = e ? i : b, l = a > 0;
-  return y(() => {
+    usePortal: O = !0,
+    ...b
+  } = d, [x, n] = y(!1), e = i !== void 0, r = e ? i : x, l = a > 0;
+  return E(() => {
     const t = () => {
       r && (e || n(!1), o?.());
     };
-    return window.addEventListener(d, t), () => window.removeEventListener(d, t);
+    return window.addEventListener(p, t), () => window.removeEventListener(p, t);
   }, [e, r, o]), /* @__PURE__ */ s(
-    L,
+    S,
     {
+      ...b,
       id: g,
-      title: /* @__PURE__ */ x("span", { className: "display-flex gap-0 align-items-center text-color-dark", children: [
+      title: /* @__PURE__ */ w("span", { className: "display-flex gap-0 align-items-center text-color-dark", children: [
         /* @__PURE__ */ s(
           "span",
           {
@@ -54,7 +56,7 @@ const _ = (p) => {
       usePortal: O,
       className: f,
       popperConfig: v,
-      toggleClassName: E(
+      toggleClassName: L(
         "table-head-filter-button no-hover-scale border-color-light bg-decent hover-bg-lighter rounded-small",
         l && "padding-left-2",
         N
@@ -65,6 +67,6 @@ const _ = (p) => {
   );
 };
 export {
-  _ as default
+  j as default
 };
 //# sourceMappingURL=TableColumnFilter.js.map

package/components/table/render/header/TableColumnFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableColumnFilter.js","sources":["../../../../../src/components/table/render/header/TableColumnFilter.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from 'react';\n\nimport classNames from '../../../../utils/classNames';\nimport ButtonDropdown, { type ButtonDropdownProps } from '../../../dropdown/ButtonDropdown';\nimport { TABLE_HORIZONTAL_SCROLL_EVENT } from '../../layout/useHorizontalSectionSync';\n\nexport type TableColumnFilterProps = {\n    /**\n     * Custom dropdown content rendered below the filter trigger.\n     */\n    children?: ReactNode;\n\n    /**\n     * Optional classes for the outer dropdown component.\n     */\n    className?: ButtonDropdownProps['className'];\n\n    /**\n     * Optional classes for the dropdown menu.\n     */\n    dropdownClassName?: ButtonDropdownProps['dropdownClassName'];\n\n    /**\n     * Optional DOM id for the dropdown trigger.\n     */\n    id?: ButtonDropdownProps['id'];\n\n    /**\n     * Called when the dropdown closes.\n     */\n    onClose?: ButtonDropdownProps['onClose'];\n\n    /**\n     * Called when the dropdown opens.\n     */\n    onOpen?: ButtonDropdownProps['onOpen'];\n\n    /**\n     * Controlled open state for the dropdown.\n     */\n    open?: ButtonDropdownProps['open'];\n\n    /**\n     * Optional Popper configuration passed to the underlying dropdown.\n     */\n    popperConfig?: ButtonDropdownProps['popperConfig'];\n\n    /**\n     * Aligns the dropdown menu to the right side of the trigger.\n     *\n     * @default true\n     */\n    pullRight?: ButtonDropdownProps['pullRight'];\n\n    /**\n     * Optional classes for the dropdown toggle button.\n     */\n    toggleClassName?: ButtonDropdownProps['toggleClassName'];\n\n    /**\n     * Renders the dropdown through a portal.\n     *\n     * @default true\n     */\n    usePortal?: ButtonDropdownProps['usePortal'];\n\n    /**\n     * Renders the active filter icon variant.\n     *\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Optional number of currently active filters shown next to the filter icon.\n     *\n     * @default 0\n     */\n    activeCount?: number;\n};\n\nconst TableColumnFilter = (props: TableColumnFilterProps) => {\n    const {\n        activeCount = 0,\n        active = false,\n        children,\n        className,\n        dropdownClassName,\n        id,\n        onClose,\n        onOpen,\n        open,\n        popperConfig,\n        pullRight = true,\n        toggleClassName,\n        usePortal = true,\n    } = props;\n\n    const [internalOpen, setInternalOpen] = useState(false);\n\n    const isControlled = open !== undefined;\n    const isOpen = isControlled ? open : internalOpen;\n    const hasActiveFilters = activeCount > 0;\n\n    useEffect(() => {\n        const handleHorizontalScroll = () => {\n            if (!isOpen) {\n                return;\n            }\n\n            if (!isControlled) {\n                setInternalOpen(false);\n            }\n\n            onClose?.();\n        };\n\n        window.addEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n\n        return () => window.removeEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n    }, [isControlled, isOpen, onClose]);\n\n    return (\n        <ButtonDropdown\n            id={id}\n            title={\n                <span className='display-flex gap-0 align-items-center text-color-dark'>\n                    <span\n                        className={`text-size-16 rioglyph ${active ? 'rioglyph-filter-active' : 'rioglyph-filter'}`}\n                        aria-hidden='true'\n                    />\n                    {hasActiveFilters && <span className='text-medium'>{activeCount}</span>}\n                </span>\n            }\n            bsStyle='default'\n            variant='outline'\n            bsSize='xs'\n            noCaret\n            iconOnly={!hasActiveFilters}\n            open={isOpen}\n            onOpen={event => {\n                if (!isControlled) {\n                    setInternalOpen(true);\n                }\n\n                onOpen?.(event);\n            }}\n            onClose={() => {\n                if (!isControlled) {\n                    setInternalOpen(false);\n                }\n\n                onClose?.();\n            }}\n            pullRight={pullRight}\n            usePortal={usePortal}\n            className={className}\n            popperConfig={popperConfig}\n            toggleClassName={classNames(\n                'table-head-filter-button no-hover-scale border-color-light bg-decent hover-bg-lighter rounded-small',\n                hasActiveFilters && 'padding-left-2',\n                toggleClassName\n            )}\n            dropdownClassName={dropdownClassName}\n            customDropdown={children}\n        />\n    );\n};\n\nexport default TableColumnFilter;\n"],"names":["TableColumnFilter","props","activeCount","active","children","className","dropdownClassName","id","onClose","onOpen","open","popperConfig","pullRight","toggleClassName","usePortal","internalOpen","setInternalOpen","useState","isControlled","isOpen","hasActiveFilters","useEffect","handleHorizontalScroll","TABLE_HORIZONTAL_SCROLL_EVENT","jsx","ButtonDropdown","jsxs","event","classNames"],"mappings":";;;;;AAiFA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM;AAAA,IACF,aAAAC,IAAc;AAAA,IACd,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,IAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,iBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,EAAA,IACZb,GAEE,CAACc,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAEhDC,IAAeR,MAAS,QACxBS,IAASD,IAAeR,IAAOK,GAC/BK,IAAmBlB,IAAc;AAEvC,SAAAmB,EAAU,MAAM;AACZ,UAAMC,IAAyB,MAAM;AACjC,MAAKH,MAIAD,KACDF,EAAgB,EAAK,GAGzBR,IAAA;AAAA,IACJ;AAEA,kBAAO,iBAAiBe,GAA+BD,CAAsB,GAEtE,MAAM,OAAO,oBAAoBC,GAA+BD,CAAsB;AAAA,EACjG,GAAG,CAACJ,GAAcC,GAAQX,CAAO,CAAC,GAG9B,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,IAAAlB;AAAA,MACA,OACI,gBAAAmB,EAAC,QAAA,EAAK,WAAU,yDACZ,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW,yBAAyBrB,IAAS,2BAA2B,iBAAiB;AAAA,YACzF,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEfiB,KAAoB,gBAAAI,EAAC,QAAA,EAAK,WAAU,eAAe,UAAAtB,EAAA,CAAY;AAAA,MAAA,GACpE;AAAA,MAEJ,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,SAAO;AAAA,MACP,UAAU,CAACkB;AAAA,MACX,MAAMD;AAAA,MACN,QAAQ,CAAAQ,MAAS;AACb,QAAKT,KACDF,EAAgB,EAAI,GAGxBP,IAASkB,CAAK;AAAA,MAClB;AAAA,MACA,SAAS,MAAM;AACX,QAAKT,KACDF,EAAgB,EAAK,GAGzBR,IAAA;AAAA,MACJ;AAAA,MACA,WAAAI;AAAA,MACA,WAAAE;AAAA,MACA,WAAAT;AAAA,MACA,cAAAM;AAAA,MACA,iBAAiBiB;AAAA,QACb;AAAA,QACAR,KAAoB;AAAA,QACpBP;AAAA,MAAA;AAAA,MAEJ,mBAAAP;AAAA,MACA,gBAAgBF;AAAA,IAAA;AAAA,EAAA;AAG5B;"}
+{"version":3,"file":"TableColumnFilter.js","sources":["../../../../../src/components/table/render/header/TableColumnFilter.tsx"],"sourcesContent":["import { useEffect, useState, type HTMLAttributes, type ReactNode } from 'react';\n\nimport classNames from '../../../../utils/classNames';\nimport ButtonDropdown, { type ButtonDropdownProps } from '../../../dropdown/ButtonDropdown';\nimport { TABLE_HORIZONTAL_SCROLL_EVENT } from '../../layout/useHorizontalSectionSync';\n\nexport type TableColumnFilterProps = Omit<\n    HTMLAttributes<HTMLDivElement>,\n    'children' | 'className' | 'onClick' | 'role'\n> & {\n    /**\n     * Custom dropdown content rendered below the filter trigger.\n     */\n    children?: ReactNode;\n\n    /**\n     * Optional classes for the outer dropdown component.\n     */\n    className?: ButtonDropdownProps['className'];\n\n    /**\n     * Optional classes for the dropdown menu.\n     */\n    dropdownClassName?: ButtonDropdownProps['dropdownClassName'];\n\n    /**\n     * Optional DOM id for the dropdown trigger.\n     */\n    id?: ButtonDropdownProps['id'];\n\n    /**\n     * Called when the dropdown closes.\n     */\n    onClose?: ButtonDropdownProps['onClose'];\n\n    /**\n     * Called when the dropdown opens.\n     */\n    onOpen?: ButtonDropdownProps['onOpen'];\n\n    /**\n     * Controlled open state for the dropdown.\n     */\n    open?: ButtonDropdownProps['open'];\n\n    /**\n     * Optional Popper configuration passed to the underlying dropdown.\n     */\n    popperConfig?: ButtonDropdownProps['popperConfig'];\n\n    /**\n     * Aligns the dropdown menu to the right side of the trigger.\n     *\n     * @default true\n     */\n    pullRight?: ButtonDropdownProps['pullRight'];\n\n    /**\n     * Optional classes for the dropdown toggle button.\n     */\n    toggleClassName?: ButtonDropdownProps['toggleClassName'];\n\n    /**\n     * Renders the dropdown through a portal.\n     *\n     * @default true\n     */\n    usePortal?: ButtonDropdownProps['usePortal'];\n\n    /**\n     * Renders the active filter icon variant.\n     *\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Optional number of currently active filters shown next to the filter icon.\n     *\n     * @default 0\n     */\n    activeCount?: number;\n};\n\nconst TableColumnFilter = (props: TableColumnFilterProps) => {\n    const {\n        activeCount = 0,\n        active = false,\n        children,\n        className,\n        dropdownClassName,\n        id,\n        onClose,\n        onOpen,\n        open,\n        popperConfig,\n        pullRight = true,\n        toggleClassName,\n        usePortal = true,\n        ...remainingProps\n    } = props;\n\n    const [internalOpen, setInternalOpen] = useState(false);\n\n    const isControlled = open !== undefined;\n    const isOpen = isControlled ? open : internalOpen;\n    const hasActiveFilters = activeCount > 0;\n\n    useEffect(() => {\n        const handleHorizontalScroll = () => {\n            if (!isOpen) {\n                return;\n            }\n\n            if (!isControlled) {\n                setInternalOpen(false);\n            }\n\n            onClose?.();\n        };\n\n        window.addEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n\n        return () => window.removeEventListener(TABLE_HORIZONTAL_SCROLL_EVENT, handleHorizontalScroll);\n    }, [isControlled, isOpen, onClose]);\n\n    return (\n        <ButtonDropdown\n            {...remainingProps}\n            id={id}\n            title={\n                <span className='display-flex gap-0 align-items-center text-color-dark'>\n                    <span\n                        className={`text-size-16 rioglyph ${active ? 'rioglyph-filter-active' : 'rioglyph-filter'}`}\n                        aria-hidden='true'\n                    />\n                    {hasActiveFilters && <span className='text-medium'>{activeCount}</span>}\n                </span>\n            }\n            bsStyle='default'\n            variant='outline'\n            bsSize='xs'\n            noCaret\n            iconOnly={!hasActiveFilters}\n            open={isOpen}\n            onOpen={event => {\n                if (!isControlled) {\n                    setInternalOpen(true);\n                }\n\n                onOpen?.(event);\n            }}\n            onClose={() => {\n                if (!isControlled) {\n                    setInternalOpen(false);\n                }\n\n                onClose?.();\n            }}\n            pullRight={pullRight}\n            usePortal={usePortal}\n            className={className}\n            popperConfig={popperConfig}\n            toggleClassName={classNames(\n                'table-head-filter-button no-hover-scale border-color-light bg-decent hover-bg-lighter rounded-small',\n                hasActiveFilters && 'padding-left-2',\n                toggleClassName\n            )}\n            dropdownClassName={dropdownClassName}\n            customDropdown={children}\n        />\n    );\n};\n\nexport default TableColumnFilter;\n"],"names":["TableColumnFilter","props","activeCount","active","children","className","dropdownClassName","id","onClose","onOpen","open","popperConfig","pullRight","toggleClassName","usePortal","remainingProps","internalOpen","setInternalOpen","useState","isControlled","isOpen","hasActiveFilters","useEffect","handleHorizontalScroll","TABLE_HORIZONTAL_SCROLL_EVENT","jsx","ButtonDropdown","jsxs","event","classNames"],"mappings":";;;;;AAoFA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM;AAAA,IACF,aAAAC,IAAc;AAAA,IACd,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,IAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,iBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHd,GAEE,CAACe,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAEhDC,IAAeT,MAAS,QACxBU,IAASD,IAAeT,IAAOM,GAC/BK,IAAmBnB,IAAc;AAEvC,SAAAoB,EAAU,MAAM;AACZ,UAAMC,IAAyB,MAAM;AACjC,MAAKH,MAIAD,KACDF,EAAgB,EAAK,GAGzBT,IAAA;AAAA,IACJ;AAEA,kBAAO,iBAAiBgB,GAA+BD,CAAsB,GAEtE,MAAM,OAAO,oBAAoBC,GAA+BD,CAAsB;AAAA,EACjG,GAAG,CAACJ,GAAcC,GAAQZ,CAAO,CAAC,GAG9B,gBAAAiB;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGX;AAAA,MACJ,IAAAR;AAAA,MACA,OACI,gBAAAoB,EAAC,QAAA,EAAK,WAAU,yDACZ,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW,yBAAyBtB,IAAS,2BAA2B,iBAAiB;AAAA,YACzF,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEfkB,KAAoB,gBAAAI,EAAC,QAAA,EAAK,WAAU,eAAe,UAAAvB,EAAA,CAAY;AAAA,MAAA,GACpE;AAAA,MAEJ,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,SAAO;AAAA,MACP,UAAU,CAACmB;AAAA,MACX,MAAMD;AAAA,MACN,QAAQ,CAAAQ,MAAS;AACb,QAAKT,KACDF,EAAgB,EAAI,GAGxBR,IAASmB,CAAK;AAAA,MAClB;AAAA,MACA,SAAS,MAAM;AACX,QAAKT,KACDF,EAAgB,EAAK,GAGzBT,IAAA;AAAA,MACJ;AAAA,MACA,WAAAI;AAAA,MACA,WAAAE;AAAA,MACA,WAAAT;AAAA,MACA,cAAAM;AAAA,MACA,iBAAiBkB;AAAA,QACb;AAAA,QACAR,KAAoB;AAAA,QACpBR;AAAA,MAAA;AAAA,MAEJ,mBAAAP;AAAA,MACA,gBAAgBF;AAAA,IAAA;AAAA,EAAA;AAG5B;"}

package/components/table/render/header/TableDraggableHeaderCell.d.ts

@@ -1,3 +1,4 @@
+import { TableRowData } from '../../Table.types';
 import { SharedHeaderCellProps } from './TableHeader.types';
-declare const TableDraggableHeaderCell: <RowType extends Record<string, unknown>>(props: SharedHeaderCellProps<RowType>) => import("react/jsx-runtime").JSX.Element;
+declare const TableDraggableHeaderCell: (props: SharedHeaderCellProps<TableRowData>) => import("react/jsx-runtime").JSX.Element;
 export default TableDraggableHeaderCell;

package/components/table/render/header/TableDraggableHeaderCell.js

@@ -1,54 +1,66 @@
-import { jsxs as S, jsx as i } from "react/jsx-runtime";
-import { useSortable as x } from "@dnd-kit/sortable";
-import C from "./TableHeaderCellContent.js";
-import A from "./TableHeaderCellResizeHandle.js";
-import { resolveAriaSort as h } from "./resolveAriaSort.js";
-import { resolveHeaderCellClassName as y } from "./resolveHeaderCellClassName.js";
-import { resolveHeaderCellStyle as H } from "./resolveHeaderCellStyle.js";
-import { resolveAriaSpan as s, resolveAriaColIndex as R } from "../../shared/resolveTableAria.js";
-const E = (r) => {
-  const { column: e, header: n, hideWhileDragging: a, isResizable: m, showSelectionColumn: t } = r, l = e.columnKey ?? String(e.key), { attributes: d, listeners: c, setActivatorNodeRef: f, setNodeRef: p, transform: o, transition: g, isDragging: u } = x({
-    id: l
-  }), { role: w, ...v } = d, b = {
-    ...v,
-    ...c
+import { jsxs as R, jsx as m } from "react/jsx-runtime";
+import { useSortable as A } from "@dnd-kit/sortable";
+import k from "./TableHeaderCellContent.js";
+import H from "./TableHeaderCellResizeHandle.js";
+import { resolveAriaSort as w } from "./resolveAriaSort.js";
+import { resolveHeaderCellClassName as D } from "./resolveHeaderCellClassName.js";
+import { resolveHeaderCellStyle as N } from "./resolveHeaderCellStyle.js";
+import { resolveAriaSpan as c, resolveAriaColIndex as L } from "../../shared/resolveTableAria.js";
+const _ = (t) => {
+  const {
+    column: e,
+    header: r,
+    hideWhileDragging: a,
+    htmlAttributes: u,
+    isResizable: d,
+    showSelectionColumn: l,
+    stickyLeftColumnCount: C,
+    stickyRightColumnCount: f
+  } = t, i = C ?? 0, n = f ?? 0, s = e.columnKey ?? String(e.key), { attributes: g, listeners: p, setActivatorNodeRef: S, setNodeRef: v, transform: o, transition: b, isDragging: y } = A({
+    id: s
+  }), { role: T, ...h } = g, x = {
+    ...h,
+    ...p
   };
-  return /* @__PURE__ */ S(
+  return /* @__PURE__ */ R(
     "div",
     {
-      ref: p,
-      className: y(e, n, {
+      ref: v,
+      ...u,
+      className: D(e, r, {
         isDraggable: !0,
-        isDragging: u,
-        isResizable: m
+        isDragging: y,
+        isResizable: d,
+        isStickyLeftColumn: i > 0 && e.columnStart <= i,
+        isStickyRightColumn: n > 0 && e.columnStart + e.colSpan - 1 > r.totalColumnCount - n
       }),
-      "data-column": l,
+      "data-column": s,
       role: "columnheader",
-      "aria-colindex": R(e.columnStart, t),
-      "aria-colspan": s(e.colSpan),
+      "aria-colindex": L(e.columnStart, l),
+      "aria-colspan": c(e.colSpan),
       "aria-rowindex": e.rowStart,
-      "aria-rowspan": s(e.rowSpan),
-      "aria-sort": h(e),
-      style: H(e, t, {
+      "aria-rowspan": c(e.rowSpan),
+      "aria-sort": w(e),
+      style: N(e, l, {
         pointerEvents: a ? "none" : void 0,
         transform: a ? void 0 : o ? `translate3d(${o.x}px, ${o.y}px, 0)` : void 0,
-        transition: g
+        transition: b
       }),
       children: [
-        /* @__PURE__ */ i(
-          C,
+        /* @__PURE__ */ m(
+          k,
           {
-            ...r,
-            dragActivatorProps: b,
-            dragActivatorRef: f
+            ...t,
+            dragActivatorProps: x,
+            dragActivatorRef: S
           }
         ),
-        /* @__PURE__ */ i(A, { ...r })
+        /* @__PURE__ */ m(H, { ...t })
       ]
     }
   );
 };
 export {
-  E as default
+  _ as default
 };
 //# sourceMappingURL=TableDraggableHeaderCell.js.map

package/components/table/render/header/TableDraggableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableDraggableHeaderCell.js","sources":["../../../../../src/components/table/render/header/TableDraggableHeaderCell.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable';\n\nimport TableHeaderCellContent from './TableHeaderCellContent';\nimport TableHeaderCellResizeHandle from './TableHeaderCellResizeHandle';\nimport { resolveAriaSort } from './resolveAriaSort';\nimport { resolveHeaderCellClassName } from './resolveHeaderCellClassName';\nimport { resolveHeaderCellStyle } from './resolveHeaderCellStyle';\nimport type { SharedHeaderCellProps } from './TableHeader.types';\nimport { resolveAriaColIndex, resolveAriaSpan } from '../../shared/resolveTableAria';\n\nconst TableDraggableHeaderCell = <RowType extends Record<string, unknown>>(props: SharedHeaderCellProps<RowType>) => {\n    const { column, header, hideWhileDragging, isResizable, showSelectionColumn } = props;\n\n    const columnKey = column.columnKey ?? String(column.key);\n\n    const { attributes, listeners, setActivatorNodeRef, setNodeRef, transform, transition, isDragging } = useSortable({\n        id: columnKey,\n    });\n\n    const { role: _sortableRole, ...sortableAttributes } = attributes;\n\n    const dragActivatorProps = {\n        ...sortableAttributes,\n        ...listeners,\n    };\n\n    return (\n        <div\n            ref={setNodeRef}\n            className={resolveHeaderCellClassName(column, header, {\n                isDraggable: true,\n                isDragging,\n                isResizable,\n            })}\n            data-column={columnKey}\n            role='columnheader'\n            aria-colindex={resolveAriaColIndex(column.columnStart, showSelectionColumn)}\n            aria-colspan={resolveAriaSpan(column.colSpan)}\n            aria-rowindex={column.rowStart}\n            aria-rowspan={resolveAriaSpan(column.rowSpan)}\n            aria-sort={resolveAriaSort(column)}\n            style={resolveHeaderCellStyle(column, showSelectionColumn, {\n                pointerEvents: hideWhileDragging ? 'none' : undefined,\n                transform: hideWhileDragging\n                    ? undefined\n                    : transform\n                      ? `translate3d(${transform.x}px, ${transform.y}px, 0)`\n                      : undefined,\n                transition,\n            })}\n        >\n            <TableHeaderCellContent\n                {...props}\n                dragActivatorProps={dragActivatorProps}\n                dragActivatorRef={setActivatorNodeRef}\n            />\n            <TableHeaderCellResizeHandle {...props} />\n        </div>\n    );\n};\n\nexport default TableDraggableHeaderCell;\n"],"names":["TableDraggableHeaderCell","props","column","header","hideWhileDragging","isResizable","showSelectionColumn","columnKey","attributes","listeners","setActivatorNodeRef","setNodeRef","transform","transition","isDragging","useSortable","_sortableRole","sortableAttributes","dragActivatorProps","jsxs","resolveHeaderCellClassName","resolveAriaColIndex","resolveAriaSpan","resolveAriaSort","resolveHeaderCellStyle","jsx","TableHeaderCellContent","TableHeaderCellResizeHandle"],"mappings":";;;;;;;;AAUA,MAAMA,IAA2B,CAA0CC,MAA0C;AACjH,QAAM,EAAE,QAAAC,GAAQ,QAAAC,GAAQ,mBAAAC,GAAmB,aAAAC,GAAa,qBAAAC,MAAwBL,GAE1EM,IAAYL,EAAO,aAAa,OAAOA,EAAO,GAAG,GAEjD,EAAE,YAAAM,GAAY,WAAAC,GAAW,qBAAAC,GAAqB,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,YAAAC,EAAA,IAAeC,EAAY;AAAA,IAC9G,IAAIR;AAAA,EAAA,CACP,GAEK,EAAE,MAAMS,GAAe,GAAGC,MAAuBT,GAEjDU,IAAqB;AAAA,IACvB,GAAGD;AAAA,IACH,GAAGR;AAAA,EAAA;AAGP,SACI,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKR;AAAA,MACL,WAAWS,EAA2BlB,GAAQC,GAAQ;AAAA,QAClD,aAAa;AAAA,QACb,YAAAW;AAAA,QACA,aAAAT;AAAA,MAAA,CACH;AAAA,MACD,eAAaE;AAAA,MACb,MAAK;AAAA,MACL,iBAAec,EAAoBnB,EAAO,aAAaI,CAAmB;AAAA,MAC1E,gBAAcgB,EAAgBpB,EAAO,OAAO;AAAA,MAC5C,iBAAeA,EAAO;AAAA,MACtB,gBAAcoB,EAAgBpB,EAAO,OAAO;AAAA,MAC5C,aAAWqB,EAAgBrB,CAAM;AAAA,MACjC,OAAOsB,EAAuBtB,GAAQI,GAAqB;AAAA,QACvD,eAAeF,IAAoB,SAAS;AAAA,QAC5C,WAAWA,IACL,SACAQ,IACE,eAAeA,EAAU,CAAC,OAAOA,EAAU,CAAC,WAC5C;AAAA,QACR,YAAAC;AAAA,MAAA,CACH;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACI,GAAGzB;AAAA,YACJ,oBAAAiB;AAAA,YACA,kBAAkBR;AAAA,UAAA;AAAA,QAAA;AAAA,QAEtB,gBAAAe,EAACE,GAAA,EAA6B,GAAG1B,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD;"}
+{"version":3,"file":"TableDraggableHeaderCell.js","sources":["../../../../../src/components/table/render/header/TableDraggableHeaderCell.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable';\n\nimport type { TableRowData } from '../../Table.types';\nimport TableHeaderCellContent from './TableHeaderCellContent';\nimport TableHeaderCellResizeHandle from './TableHeaderCellResizeHandle';\nimport { resolveAriaSort } from './resolveAriaSort';\nimport { resolveHeaderCellClassName } from './resolveHeaderCellClassName';\nimport { resolveHeaderCellStyle } from './resolveHeaderCellStyle';\nimport type { SharedHeaderCellProps } from './TableHeader.types';\nimport { resolveAriaColIndex, resolveAriaSpan } from '../../shared/resolveTableAria';\n\nconst TableDraggableHeaderCell = (props: SharedHeaderCellProps<TableRowData>) => {\n    const {\n        column,\n        header,\n        hideWhileDragging,\n        htmlAttributes,\n        isResizable,\n        showSelectionColumn,\n        stickyLeftColumnCount,\n        stickyRightColumnCount,\n    } = props;\n\n    const stickyLeftColumns = stickyLeftColumnCount ?? 0;\n    const stickyRightColumns = stickyRightColumnCount ?? 0;\n\n    const columnKey = column.columnKey ?? String(column.key);\n\n    const { attributes, listeners, setActivatorNodeRef, setNodeRef, transform, transition, isDragging } = useSortable({\n        id: columnKey,\n    });\n\n    const { role: _sortableRole, ...sortableAttributes } = attributes;\n\n    const dragActivatorProps = {\n        ...sortableAttributes,\n        ...listeners,\n    };\n\n    return (\n        <div\n            ref={setNodeRef}\n            {...htmlAttributes}\n            className={resolveHeaderCellClassName(column, header, {\n                isDraggable: true,\n                isDragging,\n                isResizable,\n                isStickyLeftColumn: stickyLeftColumns > 0 && column.columnStart <= stickyLeftColumns,\n                isStickyRightColumn:\n                    stickyRightColumns > 0 &&\n                    column.columnStart + column.colSpan - 1 > header.totalColumnCount - stickyRightColumns,\n            })}\n            data-column={columnKey}\n            role='columnheader'\n            aria-colindex={resolveAriaColIndex(column.columnStart, showSelectionColumn)}\n            aria-colspan={resolveAriaSpan(column.colSpan)}\n            aria-rowindex={column.rowStart}\n            aria-rowspan={resolveAriaSpan(column.rowSpan)}\n            aria-sort={resolveAriaSort(column)}\n            style={resolveHeaderCellStyle(column, showSelectionColumn, {\n                pointerEvents: hideWhileDragging ? 'none' : undefined,\n                transform: hideWhileDragging\n                    ? undefined\n                    : transform\n                      ? `translate3d(${transform.x}px, ${transform.y}px, 0)`\n                      : undefined,\n                transition,\n            })}\n        >\n            <TableHeaderCellContent\n                {...props}\n                dragActivatorProps={dragActivatorProps}\n                dragActivatorRef={setActivatorNodeRef}\n            />\n            <TableHeaderCellResizeHandle {...props} />\n        </div>\n    );\n};\n\nexport default TableDraggableHeaderCell;\n"],"names":["TableDraggableHeaderCell","props","column","header","hideWhileDragging","htmlAttributes","isResizable","showSelectionColumn","stickyLeftColumnCount","stickyRightColumnCount","stickyLeftColumns","stickyRightColumns","columnKey","attributes","listeners","setActivatorNodeRef","setNodeRef","transform","transition","isDragging","useSortable","_sortableRole","sortableAttributes","dragActivatorProps","jsxs","resolveHeaderCellClassName","resolveAriaColIndex","resolveAriaSpan","resolveAriaSort","resolveHeaderCellStyle","jsx","TableHeaderCellContent","TableHeaderCellResizeHandle"],"mappings":";;;;;;;;AAWA,MAAMA,IAA2B,CAACC,MAA+C;AAC7E,QAAM;AAAA,IACF,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,wBAAAC;AAAA,EAAA,IACAR,GAEES,IAAoBF,KAAyB,GAC7CG,IAAqBF,KAA0B,GAE/CG,IAAYV,EAAO,aAAa,OAAOA,EAAO,GAAG,GAEjD,EAAE,YAAAW,GAAY,WAAAC,GAAW,qBAAAC,GAAqB,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,YAAAC,EAAA,IAAeC,EAAY;AAAA,IAC9G,IAAIR;AAAA,EAAA,CACP,GAEK,EAAE,MAAMS,GAAe,GAAGC,MAAuBT,GAEjDU,IAAqB;AAAA,IACvB,GAAGD;AAAA,IACH,GAAGR;AAAA,EAAA;AAGP,SACI,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKR;AAAA,MACJ,GAAGX;AAAA,MACJ,WAAWoB,EAA2BvB,GAAQC,GAAQ;AAAA,QAClD,aAAa;AAAA,QACb,YAAAgB;AAAA,QACA,aAAAb;AAAA,QACA,oBAAoBI,IAAoB,KAAKR,EAAO,eAAeQ;AAAA,QACnE,qBACIC,IAAqB,KACrBT,EAAO,cAAcA,EAAO,UAAU,IAAIC,EAAO,mBAAmBQ;AAAA,MAAA,CAC3E;AAAA,MACD,eAAaC;AAAA,MACb,MAAK;AAAA,MACL,iBAAec,EAAoBxB,EAAO,aAAaK,CAAmB;AAAA,MAC1E,gBAAcoB,EAAgBzB,EAAO,OAAO;AAAA,MAC5C,iBAAeA,EAAO;AAAA,MACtB,gBAAcyB,EAAgBzB,EAAO,OAAO;AAAA,MAC5C,aAAW0B,EAAgB1B,CAAM;AAAA,MACjC,OAAO2B,EAAuB3B,GAAQK,GAAqB;AAAA,QACvD,eAAeH,IAAoB,SAAS;AAAA,QAC5C,WAAWA,IACL,SACAa,IACE,eAAeA,EAAU,CAAC,OAAOA,EAAU,CAAC,WAC5C;AAAA,QACR,YAAAC;AAAA,MAAA,CACH;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACI,GAAG9B;AAAA,YACJ,oBAAAsB;AAAA,YACA,kBAAkBR;AAAA,UAAA;AAAA,QAAA;AAAA,QAEtB,gBAAAe,EAACE,GAAA,EAA6B,GAAG/B,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD;"}

package/components/table/render/header/TableHeader.types.d.ts

@@ -1,13 +1,12 @@
 import { DragEndEvent } from '@dnd-kit/core';
 import { HTMLAttributes, MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, ReactNode, Ref } from 'react';
-import { TableViewModel } from '../../model/tableViewModel.types';
-import { TableSortDirection } from '../../Table.types';
-export type HeaderColumn<RowType extends Record<string, unknown>> = NonNullable<TableViewModel<RowType>['header']>['columns'][number];
-export type TableHeaderSectionProps<RowType extends Record<string, unknown>> = {
-    header: NonNullable<TableViewModel<RowType>['header']>;
+import { TableViewHeader } from '../../model/tableView.types';
+import { TableHtmlAttributes, TableRowData, TableSortDirection } from '../../Table.types';
+export type HeaderColumn<RowType extends TableRowData = TableRowData> = TableViewHeader<RowType>['columns'][number];
+export type TableHeaderSectionProps<RowType extends TableRowData = TableRowData> = {
+    header: TableViewHeader<RowType>;
     headerClassName?: string;
     draggableColumnKeys?: string[];
-    draggableColumns?: boolean;
     isAllSelected?: boolean;
     isSomeRowsSelected?: boolean;
     lastResizableColumnKey?: string;
@@ -17,19 +16,24 @@ export type TableHeaderSectionProps<RowType extends Record<string, unknown>> = {
     onToggleAllSelection?: () => void;
     selectionHeaderContent?: ReactNode;
     showSelectionColumn?: boolean;
+    stickyLeftColumnCount?: number;
+    stickyRightColumnCount?: number;
     tableHeadRowRef: Ref<HTMLDivElement>;
     onSortChange?: (columnKey: string, direction: TableSortDirection, event: ReactMouseEvent<HTMLButtonElement>) => void;
-    resizeableColumns?: boolean;
 };
-export type SharedHeaderCellProps<RowType extends Record<string, unknown>> = {
+export type SharedHeaderCellProps<RowType extends TableRowData = TableRowData> = {
     column: HeaderColumn<RowType>;
-    header: NonNullable<TableViewModel<RowType>['header']>;
+    header: TableViewHeader<RowType>;
     dragActivatorProps?: HTMLAttributes<HTMLSpanElement>;
     dragActivatorRef?: Ref<HTMLSpanElement>;
+    htmlAttributes?: TableHtmlAttributes;
     hideWhileDragging?: boolean;
+    hasResettableWidth?: boolean;
     isResizable: boolean;
     onColumnResizeReset?: (columnKey: string) => void;
     onColumnResizeStart?: (columnKey: string, event: ReactPointerEvent<HTMLDivElement>) => void;
     onSortChange?: (columnKey: string, direction: TableSortDirection, event: ReactMouseEvent<HTMLButtonElement>) => void;
     showSelectionColumn?: boolean;
+    stickyLeftColumnCount?: number;
+    stickyRightColumnCount?: number;
 };

package/components/table/render/header/TableHeaderCellContent.d.ts

@@ -1,3 +1,4 @@
+import { TableRowData } from '../../Table.types';
 import { SharedHeaderCellProps } from './TableHeader.types';
-declare const TableHeaderCellContent: <RowType extends Record<string, unknown>>(props: SharedHeaderCellProps<RowType>) => import("react/jsx-runtime").JSX.Element;
+declare const TableHeaderCellContent: (props: SharedHeaderCellProps<TableRowData>) => import("react/jsx-runtime").JSX.Element;
 export default TableHeaderCellContent;

package/components/table/render/header/TableHeaderCellContent.js

@@ -7,7 +7,7 @@ const u = (c) => {
     /* @__PURE__ */ a("span", { children: e.label })
   ] }) : e.label, o = s === null ? null : /* @__PURE__ */ a("span", { className: "table-head-label", children: s });
   return /* @__PURE__ */ a("div", { className: l("table-head-cell-content", d && "table-head-cell-content-hidden"), children: /* @__PURE__ */ r("div", { className: "table-head-cell-content-row", children: [
-    e.sortable ? /* @__PURE__ */ r(
+    e.sortable ? /* @__PURE__ */ a(
       "button",
       {
         type: "button",
@@ -18,21 +18,21 @@ const u = (c) => {
           e.sortDirection === "asc" ? "desc" : "asc",
           h
         ),
-        children: [
-          /* @__PURE__ */ a(p, { direction: e.sortDirection }),
-          /* @__PURE__ */ a(
-            "span",
-            {
-              ref: n,
-              className: l(
-                "table-head-button-label",
-                t && "table-head-drag-label"
-              ),
-              ...t,
-              children: o
-            }
-          )
-        ]
+        children: /* @__PURE__ */ r(
+          "span",
+          {
+            ref: n,
+            className: l(
+              "table-head-button-label",
+              t && "table-head-drag-label"
+            ),
+            ...t,
+            children: [
+              /* @__PURE__ */ a(p, { direction: e.sortDirection }),
+              o
+            ]
+          }
+        )
       }
     ) : /* @__PURE__ */ a(
       "span",

package/components/table/render/header/TableHeaderCellContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCellContent.js","sources":["../../../../../src/components/table/render/header/TableHeaderCellContent.tsx"],"sourcesContent":["import classNames from '../../../../utils/classNames';\nimport SortArrows from '../../SortArrows';\nimport type { SharedHeaderCellProps } from './TableHeader.types';\n\nconst TableHeaderCellContent = <RowType extends Record<string, unknown>>(props: SharedHeaderCellProps<RowType>) => {\n    const { column, dragActivatorProps, dragActivatorRef, hideWhileDragging, onSortChange } = props;\n    const ariaLabel = column.hideLabel && typeof column.label === 'string' ? column.label : undefined;\n    const labelContent = column.hideLabel ? null : column.icon ? (\n        <span className='display-inline-flex align-items-center gap-5'>\n            <span className={classNames('text-color-dark rioglyph', column.icon)} />\n            <span>{column.label}</span>\n        </span>\n    ) : (\n        column.label\n    );\n    const wrappedLabelContent = labelContent === null ? null : <span className='table-head-label'>{labelContent}</span>;\n\n    return (\n        <div className={classNames('table-head-cell-content', hideWhileDragging && 'table-head-cell-content-hidden')}>\n            <div className='table-head-cell-content-row'>\n                {column.sortable ? (\n                    <button\n                        type='button'\n                        className={classNames('table-head-button', column.filter && 'table-head-button-has-filter')}\n                        aria-label={ariaLabel}\n                        onClick={event =>\n                            onSortChange?.(\n                                column.columnKey ?? String(column.key),\n                                column.sortDirection === 'asc' ? 'desc' : 'asc',\n                                event\n                            )\n                        }\n                    >\n                        <SortArrows direction={column.sortDirection} />\n                        <span\n                            ref={dragActivatorRef}\n                            className={classNames(\n                                'table-head-button-label',\n                                dragActivatorProps && 'table-head-drag-label'\n                            )}\n                            {...dragActivatorProps}\n                        >\n                            {wrappedLabelContent}\n                        </span>\n                    </button>\n                ) : (\n                    <span\n                        ref={dragActivatorRef}\n                        className={classNames(\n                            'table-head-label-wrapper',\n                            column.filter && 'table-head-label-wrapper-has-filter',\n                            dragActivatorProps && 'table-head-drag-label'\n                        )}\n                        aria-label={ariaLabel}\n                        {...dragActivatorProps}\n                    >\n                        {wrappedLabelContent}\n                    </span>\n                )}\n                {column.filter && <span className='table-head-filter'>{column.filter}</span>}\n            </div>\n        </div>\n    );\n};\n\nexport default TableHeaderCellContent;\n"],"names":["TableHeaderCellContent","props","column","dragActivatorProps","dragActivatorRef","hideWhileDragging","onSortChange","ariaLabel","labelContent","jsxs","jsx","classNames","wrappedLabelContent","event","SortArrows"],"mappings":";;;AAIA,MAAMA,IAAyB,CAA0CC,MAA0C;AAC/G,QAAM,EAAE,QAAAC,GAAQ,oBAAAC,GAAoB,kBAAAC,GAAkB,mBAAAC,GAAmB,cAAAC,MAAiBL,GACpFM,IAAYL,EAAO,aAAa,OAAOA,EAAO,SAAU,WAAWA,EAAO,QAAQ,QAClFM,IAAeN,EAAO,YAAY,OAAOA,EAAO,OAClD,gBAAAO,EAAC,QAAA,EAAK,WAAU,gDACZ,UAAA;AAAA,IAAA,gBAAAC,EAAC,UAAK,WAAWC,EAAW,4BAA4BT,EAAO,IAAI,GAAG;AAAA,IACtE,gBAAAQ,EAAC,QAAA,EAAM,UAAAR,EAAO,MAAA,CAAM;AAAA,EAAA,EAAA,CACxB,IAEAA,EAAO,OAELU,IAAsBJ,MAAiB,OAAO,yBAAQ,QAAA,EAAK,WAAU,oBAAoB,UAAAA,EAAA,CAAa;AAE5G,SACI,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAW,2BAA2BN,KAAqB,gCAAgC,GACvG,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,+BACV,UAAA;AAAA,IAAAP,EAAO,WACJ,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,WAAWE,EAAW,qBAAqBT,EAAO,UAAU,8BAA8B;AAAA,QAC1F,cAAYK;AAAA,QACZ,SAAS,CAAAM,MACLP;AAAA,UACIJ,EAAO,aAAa,OAAOA,EAAO,GAAG;AAAA,UACrCA,EAAO,kBAAkB,QAAQ,SAAS;AAAA,UAC1CW;AAAA,QAAA;AAAA,QAIR,UAAA;AAAA,UAAA,gBAAAH,EAACI,GAAA,EAAW,WAAWZ,EAAO,cAAA,CAAe;AAAA,UAC7C,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,KAAKN;AAAA,cACL,WAAWO;AAAA,gBACP;AAAA,gBACAR,KAAsB;AAAA,cAAA;AAAA,cAEzB,GAAGA;AAAA,cAEH,UAAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QACL;AAAA,MAAA;AAAA,IAAA,IAGJ,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKN;AAAA,QACL,WAAWO;AAAA,UACP;AAAA,UACAT,EAAO,UAAU;AAAA,UACjBC,KAAsB;AAAA,QAAA;AAAA,QAE1B,cAAYI;AAAA,QACX,GAAGJ;AAAA,QAEH,UAAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAGRV,EAAO,UAAU,gBAAAQ,EAAC,UAAK,WAAU,qBAAqB,YAAO,OAAA,CAAO;AAAA,EAAA,EAAA,CACzE,EAAA,CACJ;AAER;"}
+{"version":3,"file":"TableHeaderCellContent.js","sources":["../../../../../src/components/table/render/header/TableHeaderCellContent.tsx"],"sourcesContent":["import classNames from '../../../../utils/classNames';\nimport SortArrows from '../../SortArrows';\nimport type { TableRowData } from '../../Table.types';\nimport type { SharedHeaderCellProps } from './TableHeader.types';\n\nconst TableHeaderCellContent = (props: SharedHeaderCellProps<TableRowData>) => {\n    const { column, dragActivatorProps, dragActivatorRef, hideWhileDragging, onSortChange } = props;\n\n    const ariaLabel = column.hideLabel && typeof column.label === 'string' ? column.label : undefined;\n\n    const labelContent = column.hideLabel ? null : column.icon ? (\n        <span className='display-inline-flex align-items-center gap-5'>\n            <span className={classNames('text-color-dark rioglyph', column.icon)} />\n            <span>{column.label}</span>\n        </span>\n    ) : (\n        column.label\n    );\n\n    const wrappedLabelContent = labelContent === null ? null : <span className='table-head-label'>{labelContent}</span>;\n\n    return (\n        <div className={classNames('table-head-cell-content', hideWhileDragging && 'table-head-cell-content-hidden')}>\n            <div className='table-head-cell-content-row'>\n                {column.sortable ? (\n                    <button\n                        type='button'\n                        className={classNames('table-head-button', column.filter && 'table-head-button-has-filter')}\n                        aria-label={ariaLabel}\n                        onClick={event =>\n                            onSortChange?.(\n                                column.columnKey ?? String(column.key),\n                                column.sortDirection === 'asc' ? 'desc' : 'asc',\n                                event\n                            )\n                        }\n                    >\n                        <span\n                            ref={dragActivatorRef}\n                            className={classNames(\n                                'table-head-button-label',\n                                dragActivatorProps && 'table-head-drag-label'\n                            )}\n                            {...dragActivatorProps}\n                        >\n                            <SortArrows direction={column.sortDirection} />\n                            {wrappedLabelContent}\n                        </span>\n                    </button>\n                ) : (\n                    <span\n                        ref={dragActivatorRef}\n                        className={classNames(\n                            'table-head-label-wrapper',\n                            column.filter && 'table-head-label-wrapper-has-filter',\n                            dragActivatorProps && 'table-head-drag-label'\n                        )}\n                        aria-label={ariaLabel}\n                        {...dragActivatorProps}\n                    >\n                        {wrappedLabelContent}\n                    </span>\n                )}\n                {column.filter && <span className='table-head-filter'>{column.filter}</span>}\n            </div>\n        </div>\n    );\n};\n\nexport default TableHeaderCellContent;\n"],"names":["TableHeaderCellContent","props","column","dragActivatorProps","dragActivatorRef","hideWhileDragging","onSortChange","ariaLabel","labelContent","jsxs","jsx","classNames","wrappedLabelContent","event","SortArrows"],"mappings":";;;AAKA,MAAMA,IAAyB,CAACC,MAA+C;AAC3E,QAAM,EAAE,QAAAC,GAAQ,oBAAAC,GAAoB,kBAAAC,GAAkB,mBAAAC,GAAmB,cAAAC,MAAiBL,GAEpFM,IAAYL,EAAO,aAAa,OAAOA,EAAO,SAAU,WAAWA,EAAO,QAAQ,QAElFM,IAAeN,EAAO,YAAY,OAAOA,EAAO,OAClD,gBAAAO,EAAC,QAAA,EAAK,WAAU,gDACZ,UAAA;AAAA,IAAA,gBAAAC,EAAC,UAAK,WAAWC,EAAW,4BAA4BT,EAAO,IAAI,GAAG;AAAA,IACtE,gBAAAQ,EAAC,QAAA,EAAM,UAAAR,EAAO,MAAA,CAAM;AAAA,EAAA,EAAA,CACxB,IAEAA,EAAO,OAGLU,IAAsBJ,MAAiB,OAAO,yBAAQ,QAAA,EAAK,WAAU,oBAAoB,UAAAA,EAAA,CAAa;AAE5G,SACI,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAW,2BAA2BN,KAAqB,gCAAgC,GACvG,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,+BACV,UAAA;AAAA,IAAAP,EAAO,WACJ,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,WAAWC,EAAW,qBAAqBT,EAAO,UAAU,8BAA8B;AAAA,QAC1F,cAAYK;AAAA,QACZ,SAAS,CAAAM,MACLP;AAAA,UACIJ,EAAO,aAAa,OAAOA,EAAO,GAAG;AAAA,UACrCA,EAAO,kBAAkB,QAAQ,SAAS;AAAA,UAC1CW;AAAA,QAAA;AAAA,QAIR,UAAA,gBAAAJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,KAAKL;AAAA,YACL,WAAWO;AAAA,cACP;AAAA,cACAR,KAAsB;AAAA,YAAA;AAAA,YAEzB,GAAGA;AAAA,YAEJ,UAAA;AAAA,cAAA,gBAAAO,EAACI,GAAA,EAAW,WAAWZ,EAAO,cAAA,CAAe;AAAA,cAC5CU;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACL;AAAA,IAAA,IAGJ,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKN;AAAA,QACL,WAAWO;AAAA,UACP;AAAA,UACAT,EAAO,UAAU;AAAA,UACjBC,KAAsB;AAAA,QAAA;AAAA,QAE1B,cAAYI;AAAA,QACX,GAAGJ;AAAA,QAEH,UAAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAGRV,EAAO,UAAU,gBAAAQ,EAAC,UAAK,WAAU,qBAAqB,YAAO,OAAA,CAAO;AAAA,EAAA,EAAA,CACzE,EAAA,CACJ;AAER;"}

package/components/table/render/header/TableHeaderCellResizeHandle.d.ts

@@ -1,3 +1,4 @@
+import { TableRowData } from '../../Table.types';
 import { SharedHeaderCellProps } from './TableHeader.types';
-declare const TableHeaderCellResizeHandle: <RowType extends Record<string, unknown>>(props: SharedHeaderCellProps<RowType>) => import("react/jsx-runtime").JSX.Element | null;
+declare const TableHeaderCellResizeHandle: (props: SharedHeaderCellProps<TableRowData>) => import("react/jsx-runtime").JSX.Element | null;
 export default TableHeaderCellResizeHandle;

package/components/table/render/header/TableHeaderCellResizeHandle.js

@@ -1,17 +1,17 @@
-import { jsx as r } from "react/jsx-runtime";
-import c from "../../../../utils/classNames.js";
+import { jsx as i } from "react/jsx-runtime";
+import u from "../../../../utils/classNames.js";
 const d = (n) => {
-  const { column: l, isResizable: s, onColumnResizeReset: t, onColumnResizeStart: a } = n, o = l.columnKey, i = l.source?.width !== void 0;
-  return !s || !o ? null : /* @__PURE__ */ r(
+  const { column: t, hasResettableWidth: o, isResizable: s, onColumnResizeReset: a, onColumnResizeStart: r } = n, l = t.columnKey;
+  return !s || !l ? null : /* @__PURE__ */ i(
     "div",
     {
-      className: c(
+      className: u(
         "table-column-resize-handle",
-        i && "table-column-resize-handle-has-width"
+        o && "table-column-resize-handle-has-width"
       ),
-      onPointerDown: (e) => a?.(o, e),
+      onPointerDown: (e) => r?.(l, e),
       onDoubleClick: (e) => {
-        e.preventDefault(), e.stopPropagation(), t?.(o);
+        o && (e.preventDefault(), e.stopPropagation(), a?.(l));
       }
     }
   );

package/components/table/render/header/TableHeaderCellResizeHandle.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCellResizeHandle.js","sources":["../../../../../src/components/table/render/header/TableHeaderCellResizeHandle.tsx"],"sourcesContent":["import classNames from '../../../../utils/classNames';\nimport type { SharedHeaderCellProps } from './TableHeader.types';\n\nconst TableHeaderCellResizeHandle = <RowType extends Record<string, unknown>>(\n    props: SharedHeaderCellProps<RowType>\n) => {\n    const { column, isResizable, onColumnResizeReset, onColumnResizeStart } = props;\n\n    const columnKey = column.columnKey;\n    const hasExplicitWidth = column.source?.width !== undefined;\n\n    if (!isResizable || !columnKey) {\n        return null;\n    }\n\n    return (\n        <div\n            className={classNames(\n                'table-column-resize-handle',\n                hasExplicitWidth && 'table-column-resize-handle-has-width'\n            )}\n            onPointerDown={event => onColumnResizeStart?.(columnKey, event)}\n            onDoubleClick={event => {\n                event.preventDefault();\n                event.stopPropagation();\n                onColumnResizeReset?.(columnKey);\n            }}\n        />\n    );\n};\n\nexport default TableHeaderCellResizeHandle;\n"],"names":["TableHeaderCellResizeHandle","props","column","isResizable","onColumnResizeReset","onColumnResizeStart","columnKey","hasExplicitWidth","jsx","classNames","event"],"mappings":";;AAGA,MAAMA,IAA8B,CAChCC,MACC;AACD,QAAM,EAAE,QAAAC,GAAQ,aAAAC,GAAa,qBAAAC,GAAqB,qBAAAC,MAAwBJ,GAEpEK,IAAYJ,EAAO,WACnBK,IAAmBL,EAAO,QAAQ,UAAU;AAElD,SAAI,CAACC,KAAe,CAACG,IACV,OAIP,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC;AAAA,QACP;AAAA,QACAF,KAAoB;AAAA,MAAA;AAAA,MAExB,eAAe,CAAAG,MAASL,IAAsBC,GAAWI,CAAK;AAAA,MAC9D,eAAe,CAAAA,MAAS;AACpB,QAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNN,IAAsBE,CAAS;AAAA,MACnC;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"TableHeaderCellResizeHandle.js","sources":["../../../../../src/components/table/render/header/TableHeaderCellResizeHandle.tsx"],"sourcesContent":["import classNames from '../../../../utils/classNames';\nimport type { TableRowData } from '../../Table.types';\nimport type { SharedHeaderCellProps } from './TableHeader.types';\n\nconst TableHeaderCellResizeHandle = (props: SharedHeaderCellProps<TableRowData>) => {\n    const { column, hasResettableWidth, isResizable, onColumnResizeReset, onColumnResizeStart } = props;\n\n    const columnKey = column.columnKey;\n\n    if (!isResizable || !columnKey) {\n        return null;\n    }\n\n    return (\n        <div\n            className={classNames(\n                'table-column-resize-handle',\n                hasResettableWidth && 'table-column-resize-handle-has-width'\n            )}\n            onPointerDown={event => onColumnResizeStart?.(columnKey, event)}\n            onDoubleClick={event => {\n                if (!hasResettableWidth) {\n                    return;\n                }\n\n                event.preventDefault();\n                event.stopPropagation();\n                onColumnResizeReset?.(columnKey);\n            }}\n        />\n    );\n};\n\nexport default TableHeaderCellResizeHandle;\n"],"names":["TableHeaderCellResizeHandle","props","column","hasResettableWidth","isResizable","onColumnResizeReset","onColumnResizeStart","columnKey","jsx","classNames","event"],"mappings":";;AAIA,MAAMA,IAA8B,CAACC,MAA+C;AAChF,QAAM,EAAE,QAAAC,GAAQ,oBAAAC,GAAoB,aAAAC,GAAa,qBAAAC,GAAqB,qBAAAC,MAAwBL,GAExFM,IAAYL,EAAO;AAEzB,SAAI,CAACE,KAAe,CAACG,IACV,OAIP,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC;AAAA,QACP;AAAA,QACAN,KAAsB;AAAA,MAAA;AAAA,MAE1B,eAAe,CAAAO,MAASJ,IAAsBC,GAAWG,CAAK;AAAA,MAC9D,eAAe,CAAAA,MAAS;AACpB,QAAKP,MAILO,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNL,IAAsBE,CAAS;AAAA,MACnC;AAAA,IAAA;AAAA,EAAA;AAGZ;"}