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

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

@@ -0,0 +1,84 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useState as m, useMemo as p } from "react";
+import { useReducedMotion as x, motion as r } from "motion/react";
+import w from "../../../../utils/classNames.js";
+const i = 0.22, n = 0.14, f = (l) => {
+  const { columnCount: c, row: e, dataIndex: d } = l, [u, o] = m(!0), s = x(), t = p(
+    () => s ? {
+      row: {
+        initial: { opacity: 0 },
+        animate: { opacity: 1, transition: { duration: 0.12, ease: "easeInOut" } },
+        exit: { opacity: 0, transition: { duration: 0.12, ease: "easeInOut" } }
+      },
+      content: {
+        initial: { opacity: 0 },
+        animate: { opacity: 1, transition: { duration: 0.12, ease: "easeInOut" } },
+        exit: { opacity: 0, transition: { duration: 0.12, ease: "easeInOut" } }
+      }
+    } : {
+      row: {
+        initial: { height: 0 },
+        animate: {
+          height: "auto",
+          transition: { duration: i, ease: "easeInOut" }
+        },
+        exit: {
+          height: 0,
+          transition: {
+            duration: i,
+            delay: n,
+            ease: "easeInOut"
+          }
+        }
+      },
+      content: {
+        initial: { opacity: 0 },
+        animate: {
+          opacity: 1,
+          transition: {
+            duration: n,
+            delay: i,
+            ease: "easeOut"
+          }
+        },
+        exit: {
+          opacity: 0,
+          transition: { duration: n, ease: "easeInOut" }
+        }
+      }
+    },
+    [s]
+  );
+  return /* @__PURE__ */ a(
+    r.div,
+    {
+      className: w(
+        "table-row table-row-expanded-full-width",
+        e.noHover && "table-row-no-hover",
+        e.className
+      ),
+      role: "row",
+      initial: t.row.initial,
+      animate: t.row.animate,
+      exit: t.row.exit,
+      onAnimationStart: () => o(!0),
+      onAnimationComplete: () => o(!1),
+      "data-index": d,
+      style: { overflow: u ? "hidden" : "visible" },
+      children: /* @__PURE__ */ a("div", { className: "table-cell table-expanded-cell", role: "cell", "aria-colspan": c, children: /* @__PURE__ */ a(
+        r.div,
+        {
+          className: "table-cell-content",
+          initial: t.content.initial,
+          animate: t.content.animate,
+          exit: t.content.exit,
+          children: e.content
+        }
+      ) })
+    }
+  );
+};
+export {
+  f as default
+};
+//# sourceMappingURL=TableExpandedRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableExpandedRow.js","sources":["../../../../../src/components/table/render/body/TableExpandedRow.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport { motion, useReducedMotion } from 'motion/react';\n\nimport classNames from '../../../../utils/classNames';\nimport type { TableExpandedContentViewRow } from '../../model/tableViewModel.types';\n\ntype TableExpandedRowProps<RowType extends Record<string, unknown>> = {\n    columnCount: number;\n    row: TableExpandedContentViewRow<RowType>;\n    dataIndex?: number;\n};\n\nconst expandedRowHeightDuration = 0.22;\nconst expandedRowContentFadeDuration = 0.14;\n\nconst TableExpandedRow = <RowType extends Record<string, unknown>>(props: TableExpandedRowProps<RowType>) => {\n    const { columnCount, row, dataIndex } = props;\n\n    const [isAnimating, setIsAnimating] = useState(true);\n\n    const shouldReduceMotion = useReducedMotion();\n\n    const animation = useMemo(\n        () =>\n            shouldReduceMotion\n                ? {\n                      row: {\n                          initial: { opacity: 0 },\n                          animate: { opacity: 1, transition: { duration: 0.12, ease: 'easeInOut' as const } },\n                          exit: { opacity: 0, transition: { duration: 0.12, ease: 'easeInOut' as const } },\n                      },\n                      content: {\n                          initial: { opacity: 0 },\n                          animate: { opacity: 1, transition: { duration: 0.12, ease: 'easeInOut' as const } },\n                          exit: { opacity: 0, transition: { duration: 0.12, ease: 'easeInOut' as const } },\n                      },\n                  }\n                : {\n                      row: {\n                          initial: { height: 0 },\n                          animate: {\n                              height: 'auto',\n                              transition: { duration: expandedRowHeightDuration, ease: 'easeInOut' as const },\n                          },\n                          exit: {\n                              height: 0,\n                              transition: {\n                                  duration: expandedRowHeightDuration,\n                                  delay: expandedRowContentFadeDuration,\n                                  ease: 'easeInOut' as const,\n                              },\n                          },\n                      },\n                      content: {\n                          initial: { opacity: 0 },\n                          animate: {\n                              opacity: 1,\n                              transition: {\n                                  duration: expandedRowContentFadeDuration,\n                                  delay: expandedRowHeightDuration,\n                                  ease: 'easeOut' as const,\n                              },\n                          },\n                          exit: {\n                              opacity: 0,\n                              transition: { duration: expandedRowContentFadeDuration, ease: 'easeInOut' as const },\n                          },\n                      },\n                  },\n        [shouldReduceMotion]\n    );\n\n    return (\n        <motion.div\n            className={classNames(\n                'table-row table-row-expanded-full-width',\n                row.noHover && 'table-row-no-hover',\n                row.className\n            )}\n            role='row'\n            initial={animation.row.initial}\n            animate={animation.row.animate}\n            exit={animation.row.exit}\n            onAnimationStart={() => setIsAnimating(true)}\n            onAnimationComplete={() => setIsAnimating(false)}\n            data-index={dataIndex}\n            style={{ overflow: isAnimating ? 'hidden' : 'visible' }}\n        >\n            <div className='table-cell table-expanded-cell' role='cell' aria-colspan={columnCount}>\n                <motion.div\n                    className='table-cell-content'\n                    initial={animation.content.initial}\n                    animate={animation.content.animate}\n                    exit={animation.content.exit}\n                >\n                    {row.content}\n                </motion.div>\n            </div>\n        </motion.div>\n    );\n};\n\nexport default TableExpandedRow;\n"],"names":["expandedRowHeightDuration","expandedRowContentFadeDuration","TableExpandedRow","props","columnCount","row","dataIndex","isAnimating","setIsAnimating","useState","shouldReduceMotion","useReducedMotion","animation","useMemo","jsx","motion","classNames"],"mappings":";;;;AAYA,MAAMA,IAA4B,MAC5BC,IAAiC,MAEjCC,IAAmB,CAA0CC,MAA0C;AACzG,QAAM,EAAE,aAAAC,GAAa,KAAAC,GAAK,WAAAC,EAAA,IAAcH,GAElC,CAACI,GAAaC,CAAc,IAAIC,EAAS,EAAI,GAE7CC,IAAqBC,EAAA,GAErBC,IAAYC;AAAA,IACd,MACIH,IACM;AAAA,MACI,KAAK;AAAA,QACD,SAAS,EAAE,SAAS,EAAA;AAAA,QACpB,SAAS,EAAE,SAAS,GAAG,YAAY,EAAE,UAAU,MAAM,MAAM,cAAqB;AAAA,QAChF,MAAM,EAAE,SAAS,GAAG,YAAY,EAAE,UAAU,MAAM,MAAM,YAAA,EAAqB;AAAA,MAAE;AAAA,MAEnF,SAAS;AAAA,QACL,SAAS,EAAE,SAAS,EAAA;AAAA,QACpB,SAAS,EAAE,SAAS,GAAG,YAAY,EAAE,UAAU,MAAM,MAAM,cAAqB;AAAA,QAChF,MAAM,EAAE,SAAS,GAAG,YAAY,EAAE,UAAU,MAAM,MAAM,YAAA,EAAqB;AAAA,MAAE;AAAA,IACnF,IAEJ;AAAA,MACI,KAAK;AAAA,QACD,SAAS,EAAE,QAAQ,EAAA;AAAA,QACnB,SAAS;AAAA,UACL,QAAQ;AAAA,UACR,YAAY,EAAE,UAAUV,GAA2B,MAAM,YAAA;AAAA,QAAqB;AAAA,QAElF,MAAM;AAAA,UACF,QAAQ;AAAA,UACR,YAAY;AAAA,YACR,UAAUA;AAAA,YACV,OAAOC;AAAA,YACP,MAAM;AAAA,UAAA;AAAA,QACV;AAAA,MACJ;AAAA,MAEJ,SAAS;AAAA,QACL,SAAS,EAAE,SAAS,EAAA;AAAA,QACpB,SAAS;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,YACR,UAAUA;AAAA,YACV,OAAOD;AAAA,YACP,MAAM;AAAA,UAAA;AAAA,QACV;AAAA,QAEJ,MAAM;AAAA,UACF,SAAS;AAAA,UACT,YAAY,EAAE,UAAUC,GAAgC,MAAM,YAAA;AAAA,QAAqB;AAAA,MACvF;AAAA,IACJ;AAAA,IAEd,CAACS,CAAkB;AAAA,EAAA;AAGvB,SACI,gBAAAI;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACG,WAAWC;AAAA,QACP;AAAA,QACAX,EAAI,WAAW;AAAA,QACfA,EAAI;AAAA,MAAA;AAAA,MAER,MAAK;AAAA,MACL,SAASO,EAAU,IAAI;AAAA,MACvB,SAASA,EAAU,IAAI;AAAA,MACvB,MAAMA,EAAU,IAAI;AAAA,MACpB,kBAAkB,MAAMJ,EAAe,EAAI;AAAA,MAC3C,qBAAqB,MAAMA,EAAe,EAAK;AAAA,MAC/C,cAAYF;AAAA,MACZ,OAAO,EAAE,UAAUC,IAAc,WAAW,UAAA;AAAA,MAE5C,4BAAC,OAAA,EAAI,WAAU,kCAAiC,MAAK,QAAO,gBAAcH,GACtE,UAAA,gBAAAU;AAAA,QAACC,EAAO;AAAA,QAAP;AAAA,UACG,WAAU;AAAA,UACV,SAASH,EAAU,QAAQ;AAAA,UAC3B,SAASA,EAAU,QAAQ;AAAA,UAC3B,MAAMA,EAAU,QAAQ;AAAA,UAEvB,UAAAP,EAAI;AAAA,QAAA;AAAA,MAAA,EACT,CACJ;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

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

@@ -0,0 +1,8 @@
+import { TableGroupFooterViewRow, TableGroupViewRow } from '../../model/tableViewModel.types';
+type TableGroupRowProps = {
+    columnCount: number;
+    row: TableGroupViewRow | TableGroupFooterViewRow;
+    dataIndex?: number;
+};
+declare const TableGroupRow: ({ columnCount, row, dataIndex }: TableGroupRowProps) => import("react/jsx-runtime").JSX.Element;
+export default TableGroupRow;

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

@@ -0,0 +1,21 @@
+import { jsx as l } from "react/jsx-runtime";
+import r from "../../../../utils/classNames.js";
+const s = ({ columnCount: a, row: e, dataIndex: o }) => /* @__PURE__ */ l(
+  "div",
+  {
+    className: r(
+      "table-row",
+      e.kind === "group" ? "table-row-group" : "table-row-group-footer",
+      e.kind === "group" && e.sticky && "table-row-group-sticky",
+      e.noHover && "table-row-no-hover",
+      e.className
+    ),
+    "data-index": o,
+    role: "row",
+    children: /* @__PURE__ */ l("div", { className: "table-cell table-group-cell", role: "cell", "aria-colspan": a, children: /* @__PURE__ */ l("div", { className: "table-cell-content", children: e.content }) })
+  }
+);
+export {
+  s as default
+};
+//# sourceMappingURL=TableGroupRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableGroupRow.js","sources":["../../../../../src/components/table/render/body/TableGroupRow.tsx"],"sourcesContent":["import classNames from '../../../../utils/classNames';\nimport type { TableGroupFooterViewRow, TableGroupViewRow } from '../../model/tableViewModel.types';\n\ntype TableGroupRowProps = {\n    columnCount: number;\n    row: TableGroupViewRow | TableGroupFooterViewRow;\n    dataIndex?: number;\n};\n\nconst TableGroupRow = ({ columnCount, row, dataIndex }: TableGroupRowProps) => (\n    <div\n        className={classNames(\n            'table-row',\n            row.kind === 'group' ? 'table-row-group' : 'table-row-group-footer',\n            row.kind === 'group' && row.sticky && 'table-row-group-sticky',\n            row.noHover && 'table-row-no-hover',\n            row.className\n        )}\n        data-index={dataIndex}\n        role='row'\n    >\n        <div className='table-cell table-group-cell' role='cell' aria-colspan={columnCount}>\n            <div className='table-cell-content'>{row.content}</div>\n        </div>\n    </div>\n);\n\nexport default TableGroupRow;\n"],"names":["TableGroupRow","columnCount","row","dataIndex","jsx","classNames"],"mappings":";;AASA,MAAMA,IAAgB,CAAC,EAAE,aAAAC,GAAa,KAAAC,GAAK,WAAAC,QACvC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAWC;AAAA,MACP;AAAA,MACAH,EAAI,SAAS,UAAU,oBAAoB;AAAA,MAC3CA,EAAI,SAAS,WAAWA,EAAI,UAAU;AAAA,MACtCA,EAAI,WAAW;AAAA,MACfA,EAAI;AAAA,IAAA;AAAA,IAER,cAAYC;AAAA,IACZ,MAAK;AAAA,IAEL,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,+BAA8B,MAAK,QAAO,gBAAcH,GACnE,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAF,EAAI,SAAQ,EAAA,CACrD;AAAA,EAAA;AACJ;"}

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

@@ -0,0 +1,7 @@
+import { TableSpacerViewRow } from '../../model/tableViewModel.types';
+type TableSpacerRowProps = {
+    row: TableSpacerViewRow;
+    dataIndex?: number;
+};
+declare const TableSpacerRow: ({ row, dataIndex }: TableSpacerRowProps) => import("react/jsx-runtime").JSX.Element;
+export default TableSpacerRow;

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

@@ -0,0 +1,15 @@
+import { jsx as a } from "react/jsx-runtime";
+import o from "../../../../utils/classNames.js";
+const t = ({ row: e, dataIndex: l }) => /* @__PURE__ */ a(
+  "div",
+  {
+    className: o("table-row table-row-spacer", e.noHover && "table-row-no-hover", e.className),
+    "data-index": l,
+    role: "presentation",
+    children: /* @__PURE__ */ a("div", { className: "table-cell table-spacer-cell", role: "presentation" })
+  }
+);
+export {
+  t as default
+};
+//# sourceMappingURL=TableSpacerRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableSpacerRow.js","sources":["../../../../../src/components/table/render/body/TableSpacerRow.tsx"],"sourcesContent":["import classNames from '../../../../utils/classNames';\nimport type { TableSpacerViewRow } from '../../model/tableViewModel.types';\n\ntype TableSpacerRowProps = {\n    row: TableSpacerViewRow;\n    dataIndex?: number;\n};\n\nconst TableSpacerRow = ({ row, dataIndex }: TableSpacerRowProps) => (\n    <div\n        className={classNames('table-row table-row-spacer', row.noHover && 'table-row-no-hover', row.className)}\n        data-index={dataIndex}\n        role='presentation'\n    >\n        <div className='table-cell table-spacer-cell' role='presentation' />\n    </div>\n);\n\nexport default TableSpacerRow;\n"],"names":["TableSpacerRow","row","dataIndex","jsx","classNames"],"mappings":";;AAQA,MAAMA,IAAiB,CAAC,EAAE,KAAAC,GAAK,WAAAC,QAC3B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAWC,EAAW,8BAA8BH,EAAI,WAAW,sBAAsBA,EAAI,SAAS;AAAA,IACtG,cAAYC;AAAA,IACZ,MAAK;AAAA,IAEL,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,gCAA+B,MAAK,eAAA,CAAe;AAAA,EAAA;AACtE;"}

package/components/table/render/footer/TableFooterCell.d.ts

@@ -0,0 +1,8 @@
+import { TableViewFooterCell } from '../../model/tableViewModel.types';
+type TableFooterCellProps = {
+    cell: TableViewFooterCell;
+    cellIndex: number;
+    showSelectionColumn?: boolean;
+};
+declare const TableFooterCell: (props: TableFooterCellProps) => import("react/jsx-runtime").JSX.Element;
+export default TableFooterCell;

package/components/table/render/footer/TableFooterCell.js

@@ -0,0 +1,31 @@
+import { jsx as n } from "react/jsx-runtime";
+import i from "../../../../utils/classNames.js";
+import { getVerticalAlignClassName as c, getHorizontalAlignClassName as s } from "../../shared/getAlignClassName.js";
+import { resolveAriaColIndex as m, resolveAriaSpan as p } from "../../shared/resolveTableAria.js";
+const d = (o, l, e) => e ? l === 0 ? `1 / span ${o.colSpan + 1}` : `${o.columnStart + 1} / span ${o.colSpan}` : `${o.columnStart} / span ${o.colSpan}`, f = (o) => {
+  const { cell: l, cellIndex: e, showSelectionColumn: a } = o, t = a && e === 0 ? l.colSpan + 1 : l.colSpan, r = a && e === 0 ? 1 : m(l.columnStart, a);
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: i(
+        "table-cell table-footer-cell",
+        s(l.horizontalAlign),
+        c(l.verticalAlign),
+        l.hideOnMobile && "table-hide-mobile",
+        l.className
+      ),
+      "data-column": l.key,
+      role: "cell",
+      "aria-colindex": r,
+      "aria-colspan": p(t),
+      style: {
+        gridColumn: d(l, e, a)
+      },
+      children: /* @__PURE__ */ n("div", { className: "table-cell-content", children: l.content })
+    }
+  );
+};
+export {
+  f as default
+};
+//# sourceMappingURL=TableFooterCell.js.map

package/components/table/render/footer/TableFooterCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFooterCell.js","sources":["../../../../../src/components/table/render/footer/TableFooterCell.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nimport classNames from '../../../../utils/classNames';\nimport type { TableViewFooterCell } from '../../model/tableViewModel.types';\nimport { getHorizontalAlignClassName, getVerticalAlignClassName } from '../../shared/getAlignClassName';\nimport { resolveAriaColIndex, resolveAriaSpan } from '../../shared/resolveTableAria';\n\ntype TableFooterCellProps = {\n    cell: TableViewFooterCell;\n    cellIndex: number;\n    showSelectionColumn?: boolean;\n};\n\nconst resolveFooterCellGridColumn = (cell: TableViewFooterCell, cellIndex: number, showSelectionColumn?: boolean) => {\n    if (!showSelectionColumn) {\n        return `${cell.columnStart} / span ${cell.colSpan}`;\n    }\n\n    return cellIndex === 0 ? `1 / span ${cell.colSpan + 1}` : `${cell.columnStart + 1} / span ${cell.colSpan}`;\n};\n\nconst TableFooterCell = (props: TableFooterCellProps) => {\n    const { cell, cellIndex, showSelectionColumn } = props;\n    const ariaColSpan = showSelectionColumn && cellIndex === 0 ? cell.colSpan + 1 : cell.colSpan;\n    const ariaColIndex =\n        showSelectionColumn && cellIndex === 0 ? 1 : resolveAriaColIndex(cell.columnStart, showSelectionColumn);\n\n    return (\n        <div\n            className={classNames(\n                'table-cell table-footer-cell',\n                getHorizontalAlignClassName(cell.horizontalAlign),\n                getVerticalAlignClassName(cell.verticalAlign),\n                cell.hideOnMobile && 'table-hide-mobile',\n                cell.className\n            )}\n            data-column={cell.key}\n            role='cell'\n            aria-colindex={ariaColIndex}\n            aria-colspan={resolveAriaSpan(ariaColSpan)}\n            style={\n                {\n                    gridColumn: resolveFooterCellGridColumn(cell, cellIndex, showSelectionColumn),\n                } satisfies CSSProperties\n            }\n        >\n            <div className='table-cell-content'>{cell.content}</div>\n        </div>\n    );\n};\n\nexport default TableFooterCell;\n"],"names":["resolveFooterCellGridColumn","cell","cellIndex","showSelectionColumn","TableFooterCell","props","ariaColSpan","ariaColIndex","resolveAriaColIndex","jsx","classNames","getHorizontalAlignClassName","getVerticalAlignClassName","resolveAriaSpan"],"mappings":";;;;AAaA,MAAMA,IAA8B,CAACC,GAA2BC,GAAmBC,MAC1EA,IAIED,MAAc,IAAI,YAAYD,EAAK,UAAU,CAAC,KAAK,GAAGA,EAAK,cAAc,CAAC,WAAWA,EAAK,OAAO,KAH7F,GAAGA,EAAK,WAAW,WAAWA,EAAK,OAAO,IAMnDG,IAAkB,CAACC,MAAgC;AACrD,QAAM,EAAE,MAAAJ,GAAM,WAAAC,GAAW,qBAAAC,EAAA,IAAwBE,GAC3CC,IAAcH,KAAuBD,MAAc,IAAID,EAAK,UAAU,IAAIA,EAAK,SAC/EM,IACFJ,KAAuBD,MAAc,IAAI,IAAIM,EAAoBP,EAAK,aAAaE,CAAmB;AAE1G,SACI,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC;AAAA,QACP;AAAA,QACAC,EAA4BV,EAAK,eAAe;AAAA,QAChDW,EAA0BX,EAAK,aAAa;AAAA,QAC5CA,EAAK,gBAAgB;AAAA,QACrBA,EAAK;AAAA,MAAA;AAAA,MAET,eAAaA,EAAK;AAAA,MAClB,MAAK;AAAA,MACL,iBAAeM;AAAA,MACf,gBAAcM,EAAgBP,CAAW;AAAA,MACzC,OACI;AAAA,QACI,YAAYN,EAA4BC,GAAMC,GAAWC,CAAmB;AAAA,MAAA;AAAA,MAIpF,UAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,sBAAsB,YAAK,QAAA,CAAQ;AAAA,IAAA;AAAA,EAAA;AAG9D;"}

package/components/table/render/footer/TableFooterContent.d.ts

@@ -0,0 +1,6 @@
+type TableFooterContentProps = {
+    columnCount: number;
+    content: React.ReactNode;
+};
+declare const TableFooterContent: ({ columnCount, content }: TableFooterContentProps) => import("react/jsx-runtime").JSX.Element;
+export default TableFooterContent;

package/components/table/render/footer/TableFooterContent.js

@@ -0,0 +1,6 @@
+import { jsx as e } from "react/jsx-runtime";
+const o = ({ columnCount: l, content: t }) => /* @__PURE__ */ e("div", { className: "table-cell table-footer-content", role: "cell", "aria-colspan": l, children: /* @__PURE__ */ e("div", { className: "table-cell-content", children: t }) });
+export {
+  o as default
+};
+//# sourceMappingURL=TableFooterContent.js.map

package/components/table/render/footer/TableFooterContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFooterContent.js","sources":["../../../../../src/components/table/render/footer/TableFooterContent.tsx"],"sourcesContent":["type TableFooterContentProps = {\n    columnCount: number;\n    content: React.ReactNode;\n};\n\nconst TableFooterContent = ({ columnCount, content }: TableFooterContentProps) => (\n    <div className='table-cell table-footer-content' role='cell' aria-colspan={columnCount}>\n        <div className='table-cell-content'>{content}</div>\n    </div>\n);\n\nexport default TableFooterContent;\n"],"names":["TableFooterContent","columnCount","content","jsx"],"mappings":";AAKA,MAAMA,IAAqB,CAAC,EAAE,aAAAC,GAAa,SAAAC,EAAA,wBACtC,OAAA,EAAI,WAAU,mCAAkC,MAAK,QAAO,gBAAcD,GACvE,UAAA,gBAAAE,EAAC,SAAI,WAAU,sBAAsB,aAAQ,EAAA,CACjD;"}

package/components/table/render/footer/TableFooterSection.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'react';
+import { TableViewFooter } from '../../model/tableViewModel.types';
+type TableFooterSectionProps = {
+    columnCount: number;
+    footer: TableViewFooter;
+    showSelectionColumn?: boolean;
+    tableFooterRowRef: Ref<HTMLDivElement>;
+};
+declare const TableFooterSection: (props: TableFooterSectionProps) => import("react/jsx-runtime").JSX.Element;
+export default TableFooterSection;

package/components/table/render/footer/TableFooterSection.js

@@ -0,0 +1,28 @@
+import { jsx as e } from "react/jsx-runtime";
+import m from "../../../../utils/classNames.js";
+import c from "./TableFooterCell.js";
+import f from "./TableFooterContent.js";
+const w = (r) => {
+  const { columnCount: l, footer: o, showSelectionColumn: a, tableFooterRowRef: n } = r;
+  return /* @__PURE__ */ e("div", { className: "table-footer", role: "rowgroup", children: /* @__PURE__ */ e(
+    "div",
+    {
+      className: m("table-row table-row-footer", o.className),
+      role: "row",
+      ref: n,
+      children: o.cells ? o.cells.map((t, s) => /* @__PURE__ */ e(
+        c,
+        {
+          cell: t,
+          cellIndex: s,
+          showSelectionColumn: a
+        },
+        `footer-${t.key}`
+      )) : /* @__PURE__ */ e(f, { columnCount: l, content: o.content })
+    }
+  ) });
+};
+export {
+  w as default
+};
+//# sourceMappingURL=TableFooterSection.js.map

package/components/table/render/footer/TableFooterSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFooterSection.js","sources":["../../../../../src/components/table/render/footer/TableFooterSection.tsx"],"sourcesContent":["import type { Ref } from 'react';\n\nimport classNames from '../../../../utils/classNames';\nimport type { TableViewFooter } from '../../model/tableViewModel.types';\nimport TableFooterCell from './TableFooterCell';\nimport TableFooterContent from './TableFooterContent';\n\ntype TableFooterSectionProps = {\n    columnCount: number;\n    footer: TableViewFooter;\n    showSelectionColumn?: boolean;\n    tableFooterRowRef: Ref<HTMLDivElement>;\n};\n\nconst TableFooterSection = (props: TableFooterSectionProps) => {\n    const { columnCount, footer, showSelectionColumn, tableFooterRowRef } = props;\n\n    return (\n        <div className='table-footer' role='rowgroup'>\n            <div\n                className={classNames('table-row table-row-footer', footer.className)}\n                role='row'\n                ref={tableFooterRowRef}\n            >\n                {footer.cells ? (\n                    footer.cells.map((cell, cellIndex) => (\n                        <TableFooterCell\n                            key={`footer-${cell.key}`}\n                            cell={cell}\n                            cellIndex={cellIndex}\n                            showSelectionColumn={showSelectionColumn}\n                        />\n                    ))\n                ) : (\n                    <TableFooterContent columnCount={columnCount} content={footer.content} />\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default TableFooterSection;\n"],"names":["TableFooterSection","props","columnCount","footer","showSelectionColumn","tableFooterRowRef","jsx","classNames","cell","cellIndex","TableFooterCell","TableFooterContent"],"mappings":";;;;AAcA,MAAMA,IAAqB,CAACC,MAAmC;AAC3D,QAAM,EAAE,aAAAC,GAAa,QAAAC,GAAQ,qBAAAC,GAAqB,mBAAAC,MAAsBJ;AAExE,SACI,gBAAAK,EAAC,OAAA,EAAI,WAAU,gBAAe,MAAK,YAC/B,UAAA,gBAAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAW,8BAA8BJ,EAAO,SAAS;AAAA,MACpE,MAAK;AAAA,MACL,KAAKE;AAAA,MAEJ,YAAO,QACJF,EAAO,MAAM,IAAI,CAACK,GAAMC,MACpB,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UAEG,MAAAF;AAAA,UACA,WAAAC;AAAA,UACA,qBAAAL;AAAA,QAAA;AAAA,QAHK,UAAUI,EAAK,GAAG;AAAA,MAAA,CAK9B,IAED,gBAAAF,EAACK,KAAmB,aAAAT,GAA0B,SAASC,EAAO,QAAA,CAAS;AAAA,IAAA;AAAA,EAAA,GAGnF;AAER;"}

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

@@ -0,0 +1,9 @@
+import { ButtonDropdownProps } from '../../../dropdown/ButtonDropdown';
+export type TableBatchDropdownProps = {
+    /**
+     * Dropdown items rendered for batch actions in the selection header.
+     */
+    items: NonNullable<ButtonDropdownProps['items']>;
+};
+declare const TableBatchDropdown: ({ items }: TableBatchDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export default TableBatchDropdown;

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

@@ -0,0 +1,28 @@
+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,
+    {
+      title: /* @__PURE__ */ t("span", { className: "rioglyph rioglyph-checkboxes" }),
+      variant: "outline",
+      bsSize: "sm",
+      toggleClassName: "table-batch-dropdown-button no-hover-scale",
+      iconOnly: !0,
+      items: r,
+      open: s,
+      onOpen: () => e(!0),
+      onClose: () => e(!1)
+    }
+  );
+};
+export {
+  f as default
+};
+//# sourceMappingURL=TableBatchDropdown.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,66 @@
+import { ReactNode } from 'react';
+import { ButtonDropdownProps } from '../../../dropdown/ButtonDropdown';
+export type TableColumnFilterProps = {
+    /**
+     * Custom dropdown content rendered below the filter trigger.
+     */
+    children?: ReactNode;
+    /**
+     * Optional classes for the outer dropdown component.
+     */
+    className?: ButtonDropdownProps['className'];
+    /**
+     * Optional classes for the dropdown menu.
+     */
+    dropdownClassName?: ButtonDropdownProps['dropdownClassName'];
+    /**
+     * Optional DOM id for the dropdown trigger.
+     */
+    id?: ButtonDropdownProps['id'];
+    /**
+     * Called when the dropdown closes.
+     */
+    onClose?: ButtonDropdownProps['onClose'];
+    /**
+     * Called when the dropdown opens.
+     */
+    onOpen?: ButtonDropdownProps['onOpen'];
+    /**
+     * Controlled open state for the dropdown.
+     */
+    open?: ButtonDropdownProps['open'];
+    /**
+     * Optional Popper configuration passed to the underlying dropdown.
+     */
+    popperConfig?: ButtonDropdownProps['popperConfig'];
+    /**
+     * Aligns the dropdown menu to the right side of the trigger.
+     *
+     * @default true
+     */
+    pullRight?: ButtonDropdownProps['pullRight'];
+    /**
+     * Optional classes for the dropdown toggle button.
+     */
+    toggleClassName?: ButtonDropdownProps['toggleClassName'];
+    /**
+     * Renders the dropdown through a portal.
+     *
+     * @default true
+     */
+    usePortal?: ButtonDropdownProps['usePortal'];
+    /**
+     * Renders the active filter icon variant.
+     *
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Optional number of currently active filters shown next to the filter icon.
+     *
+     * @default 0
+     */
+    activeCount?: number;
+};
+declare const TableColumnFilter: (props: TableColumnFilterProps) => import("react/jsx-runtime").JSX.Element;
+export default TableColumnFilter;

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

@@ -0,0 +1,70 @@
+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) => {
+  const {
+    activeCount: a = 0,
+    active: c = !1,
+    children: m,
+    className: f,
+    dropdownClassName: u,
+    id: g,
+    onClose: o,
+    onOpen: h,
+    open: i,
+    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(() => {
+    const t = () => {
+      r && (e || n(!1), o?.());
+    };
+    return window.addEventListener(d, t), () => window.removeEventListener(d, t);
+  }, [e, r, o]), /* @__PURE__ */ s(
+    L,
+    {
+      id: g,
+      title: /* @__PURE__ */ x("span", { className: "display-flex gap-0 align-items-center text-color-dark", children: [
+        /* @__PURE__ */ s(
+          "span",
+          {
+            className: `text-size-16 rioglyph ${c ? "rioglyph-filter-active" : "rioglyph-filter"}`,
+            "aria-hidden": "true"
+          }
+        ),
+        l && /* @__PURE__ */ s("span", { className: "text-medium", children: a })
+      ] }),
+      bsStyle: "default",
+      variant: "outline",
+      bsSize: "xs",
+      noCaret: !0,
+      iconOnly: !l,
+      open: r,
+      onOpen: (t) => {
+        e || n(!0), h?.(t);
+      },
+      onClose: () => {
+        e || n(!1), o?.();
+      },
+      pullRight: C,
+      usePortal: O,
+      className: f,
+      popperConfig: v,
+      toggleClassName: E(
+        "table-head-filter-button no-hover-scale border-color-light bg-decent hover-bg-lighter rounded-small",
+        l && "padding-left-2",
+        N
+      ),
+      dropdownClassName: u,
+      customDropdown: m
+    }
+  );
+};
+export {
+  _ as default
+};
+//# sourceMappingURL=TableColumnFilter.js.map

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

@@ -0,0 +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;"}

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

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

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

@@ -0,0 +1,54 @@
+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
+  };
+  return /* @__PURE__ */ S(
+    "div",
+    {
+      ref: p,
+      className: y(e, n, {
+        isDraggable: !0,
+        isDragging: u,
+        isResizable: m
+      }),
+      "data-column": l,
+      role: "columnheader",
+      "aria-colindex": R(e.columnStart, t),
+      "aria-colspan": s(e.colSpan),
+      "aria-rowindex": e.rowStart,
+      "aria-rowspan": s(e.rowSpan),
+      "aria-sort": h(e),
+      style: H(e, t, {
+        pointerEvents: a ? "none" : void 0,
+        transform: a ? void 0 : o ? `translate3d(${o.x}px, ${o.y}px, 0)` : void 0,
+        transition: g
+      }),
+      children: [
+        /* @__PURE__ */ i(
+          C,
+          {
+            ...r,
+            dragActivatorProps: b,
+            dragActivatorRef: f
+          }
+        ),
+        /* @__PURE__ */ i(A, { ...r })
+      ]
+    }
+  );
+};
+export {
+  E as default
+};
+//# sourceMappingURL=TableDraggableHeaderCell.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,35 @@
+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']>;
+    headerClassName?: string;
+    draggableColumnKeys?: string[];
+    draggableColumns?: boolean;
+    isAllSelected?: boolean;
+    isSomeRowsSelected?: boolean;
+    lastResizableColumnKey?: string;
+    onColumnDragEnd?: (event: DragEndEvent) => void;
+    onColumnResizeReset?: (columnKey: string) => void;
+    onColumnResizeStart?: (columnKey: string, event: ReactPointerEvent<HTMLDivElement>) => void;
+    onToggleAllSelection?: () => void;
+    selectionHeaderContent?: ReactNode;
+    showSelectionColumn?: boolean;
+    tableHeadRowRef: Ref<HTMLDivElement>;
+    onSortChange?: (columnKey: string, direction: TableSortDirection, event: ReactMouseEvent<HTMLButtonElement>) => void;
+    resizeableColumns?: boolean;
+};
+export type SharedHeaderCellProps<RowType extends Record<string, unknown>> = {
+    column: HeaderColumn<RowType>;
+    header: NonNullable<TableViewModel<RowType>['header']>;
+    dragActivatorProps?: HTMLAttributes<HTMLSpanElement>;
+    dragActivatorRef?: Ref<HTMLSpanElement>;
+    hideWhileDragging?: 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;
+};

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

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