@rio-cloud/rio-uikit 2.3.0-beta.2 → 2.3.0

package/components/table/TableExpandedRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableExpandedRow.js","sources":["../../../src/components/table/TableExpandedRow.tsx"],"sourcesContent":["import { motion, type HTMLMotionProps, useReducedMotion, type MotionProps } from 'motion/react';\nimport { useMemo, useRef, useState, type ReactNode } from 'react';\n\nimport Checkbox from '../checkbox/Checkbox';\nimport classNames from '../../utils/classNames';\nimport type { TableHtmlAttributes, TableRowData } from './Table.types';\nimport { resolveRowClassName, resolveRowKey } from './model/resolveRowMeta';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport {\n    extractTableHtmlAttributes,\n    TableRowContext,\n    useTableBodyContext,\n    useOptionalTableSection,\n} from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\nimport { getInteractiveRowProps } from './shared/getInteractiveRowProps';\n\nconst DEFAULT_EXPANDED_ROW_DURATION = 0.18;\n\nexport type TableExpandedRowProps<RowType extends TableRowData> = TableHtmlAttributes &\n    Partial<RowType> & {\n        /**\n         * Parent row key used to associate this expanded row with its parent.\n         */\n        parentKey: string | number;\n\n        /**\n         * Optional class names only for this expanded row.\n         */\n        className?: string;\n\n        /**\n         * Disable table hover styling for this row.\n         */\n        noHover?: boolean;\n\n        /**\n         * Table row content.\n         */\n        children?: ReactNode;\n    };\n\ntype TableExpandedRowSelectionCellProps = {\n    isSelected: boolean;\n    isTableView: boolean;\n    onToggleSelection?: () => void;\n    cardCellClassName?: string;\n};\n\nconst TableExpandedRowSelectionCell = (props: TableExpandedRowSelectionCellProps) => {\n    const { isSelected, isTableView, onToggleSelection, cardCellClassName } = props;\n    return (\n        <div\n            className={classNames('table-cell table-selection-cell', !isTableView && cardCellClassName)}\n            role='cell'\n            aria-colindex={1}\n            style={isTableView ? { gridColumn: '1 / span 1' } : undefined}\n            onClick={event => event.stopPropagation()}\n            onKeyDown={event => event.stopPropagation()}\n        >\n            <div className='table-selection-control'>\n                <Checkbox checked={isSelected} onChange={onToggleSelection} />\n            </div>\n        </div>\n    );\n};\n\nconst TableExpandedRow = <RowType extends TableRowData = TableRowData>(props: TableExpandedRowProps<RowType>) => {\n    const { children, className, noHover, parentKey: _parentKey, ...remainingProps } = props;\n\n    const renderConfigContext = useOptionalTableRenderConfigContext<RowType>();\n    const renderContext = useOptionalTableRenderContext<RowType>();\n    const interactionContext = useOptionalTableInteractionContext<RowType>();\n    const section = useOptionalTableSection();\n    const bodyContext = useTableBodyContext();\n\n    const cellIndexRef = useRef(0);\n    cellIndexRef.current = 0;\n\n    const [isAnimating, setIsAnimating] = useState(true);\n    const shouldReduceMotion = useReducedMotion();\n\n    const animation = useMemo(\n        () =>\n            shouldReduceMotion\n                ? {\n                      initial: { opacity: 0 },\n                      animate: {\n                          opacity: 1,\n                          transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeInOut' as const },\n                      },\n                      exit: {\n                          opacity: 0,\n                          transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeInOut' as const },\n                      },\n                  }\n                : {\n                      initial: { opacity: 0, height: 0, y: -8 },\n                      animate: {\n                          opacity: 1,\n                          height: 'auto',\n                          y: 0,\n                          transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeOut' as const },\n                      },\n                      exit: {\n                          opacity: 0,\n                          height: 0,\n                          y: -8,\n                          transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeInOut' as const },\n                      },\n                  },\n        [shouldReduceMotion]\n    );\n\n    if (\n        !renderContext ||\n        !renderConfigContext ||\n        !interactionContext ||\n        renderContext.columns.length === 0 ||\n        section !== 'body' ||\n        !bodyContext\n    ) {\n        return null;\n    }\n\n    const rowData = remainingProps as unknown as RowType;\n    const rowIndex = bodyContext.nextRowIndex();\n    const rowId = resolveRowKey(rowData, rowIndex, renderConfigContext.rowKey);\n\n    const resolvedRowAnimationProps =\n        typeof renderConfigContext.rowAnimationProps === 'function'\n            ? renderConfigContext.rowAnimationProps(rowData, rowIndex)\n            : renderConfigContext.rowAnimationProps;\n\n    const interactiveRowProps = getInteractiveRowProps({\n        isClickable: interactionContext.isClickable,\n        onRowClick: (clickedRow, clickedRowIndex) => {\n            interactionContext.onRowClick?.(clickedRow, clickedRowIndex);\n            interactionContext.onActiveRowChange?.(\n                interactionContext.activeRowId === rowId ? undefined : rowId,\n                clickedRow,\n                clickedRowIndex\n            );\n        },\n        row: rowData,\n        rowIndex,\n    });\n\n    let mergedRowAnimationProps: MotionProps | undefined;\n\n    if (renderConfigContext.expandedRowAnimation !== false) {\n        mergedRowAnimationProps = {\n            ...animation,\n            ...resolvedRowAnimationProps,\n        };\n    }\n\n    const isSelected = interactionContext.selectedRowIdSet.has(rowId);\n\n    const rowClassNames = classNames(\n        'table-row',\n        'table-row-expanded-data',\n        !renderConfigContext.isTableView && 'divider-y-1 divider-color-lighter divider-style-solid',\n        interactionContext.activeRowId === rowId && 'table-row-active',\n        isSelected && 'table-row-selected',\n        interactiveRowProps.isClickableClassName,\n        noHover && 'table-row-no-hover',\n        !renderConfigContext.isTableView && renderConfigContext.cardClasses.rowClassName,\n        className,\n        resolveRowClassName(renderConfigContext.rowClassName, rowData, rowIndex)\n    );\n\n    const selectionCell = interactionContext.showSelectionColumn && (\n        <TableExpandedRowSelectionCell\n            isSelected={isSelected}\n            isTableView={renderConfigContext.isTableView}\n            onToggleSelection={() => interactionContext.onToggleRowSelection?.(rowId)}\n            cardCellClassName={renderConfigContext.cardClasses.cellClassName}\n        />\n    );\n\n    const rowContent = (\n        <>\n            {selectionCell}\n            {children}\n        </>\n    );\n\n    const staticRowProps = {\n        ...extractTableHtmlAttributes(remainingProps),\n        className: rowClassNames,\n        'data-index': rowIndex,\n        'data-row-id': String(rowId),\n        onClick: interactiveRowProps.onClick,\n        onKeyDown: interactiveRowProps.onKeyDown,\n        role: 'row' as const,\n        tabIndex: interactiveRowProps.tabIndex,\n    };\n\n    const animatedRowProps = {\n        ...(extractTableHtmlAttributes(remainingProps) as Omit<\n            HTMLMotionProps<'div'>,\n            'children' | 'className' | 'data-row-id' | 'onClick' | 'onKeyDown' | 'role' | 'style' | 'tabIndex'\n        >),\n        className: rowClassNames,\n        'data-index': rowIndex,\n        'data-row-id': String(rowId),\n        onClick: interactiveRowProps.onClick,\n        onKeyDown: interactiveRowProps.onKeyDown,\n        role: 'row' as const,\n        tabIndex: interactiveRowProps.tabIndex,\n        onAnimationStart: () => setIsAnimating(true),\n        onAnimationComplete: () => setIsAnimating(false),\n        ...mergedRowAnimationProps,\n        style: {\n            ...(mergedRowAnimationProps?.style ?? {}),\n            overflow: isAnimating ? 'hidden' : 'visible',\n        },\n    };\n\n    const rowNode = (\n        <TableRowContext.Provider\n            value={{\n                nextColumnIndex: (explicitColumnIndex, span = 1) => {\n                    if (explicitColumnIndex !== undefined && explicitColumnIndex >= 0) {\n                        cellIndexRef.current = explicitColumnIndex + span;\n                        return explicitColumnIndex;\n                    }\n\n                    const nextIndex = cellIndexRef.current;\n                    cellIndexRef.current += span;\n                    return nextIndex;\n                },\n                rowIndex,\n                rowId,\n                rowData,\n            }}\n        >\n            {mergedRowAnimationProps ? (\n                <motion.div {...animatedRowProps}>{rowContent}</motion.div>\n            ) : (\n                <div {...staticRowProps}>{rowContent}</div>\n            )}\n        </TableRowContext.Provider>\n    );\n\n    renderContext.renderDraft.hasExpandableRows = true;\n    renderContext.renderDraft.bodyRows.push({\n        rowId,\n        rowIndex,\n        kind: 'expanded',\n        render: () => rowNode,\n    });\n\n    return renderContext.isRegisteringBodyRows ? null : rowNode;\n};\n\nexport default TableExpandedRow;\n"],"names":["DEFAULT_EXPANDED_ROW_DURATION","TableExpandedRowSelectionCell","props","isSelected","isTableView","onToggleSelection","cardCellClassName","jsx","classNames","event","Checkbox","TableExpandedRow","children","className","noHover","_parentKey","remainingProps","renderConfigContext","useOptionalTableRenderConfigContext","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","section","useOptionalTableSection","bodyContext","useTableBodyContext","cellIndexRef","useRef","isAnimating","setIsAnimating","useState","shouldReduceMotion","useReducedMotion","animation","useMemo","rowData","rowIndex","rowId","resolveRowKey","resolvedRowAnimationProps","interactiveRowProps","getInteractiveRowProps","clickedRow","clickedRowIndex","mergedRowAnimationProps","rowClassNames","resolveRowClassName","selectionCell","rowContent","jsxs","Fragment","staticRowProps","extractTableHtmlAttributes","animatedRowProps","rowNode","TableRowContext","explicitColumnIndex","span","nextIndex","motion"],"mappings":"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"}
+{"version":3,"file":"TableExpandedRow.js","sources":["../../../src/components/table/TableExpandedRow.tsx"],"sourcesContent":["import { motion, type HTMLMotionProps, useReducedMotion, type MotionProps } from 'motion/react';\nimport { useMemo, useRef, useState, type ReactNode } from 'react';\n\nimport Checkbox from '../checkbox/Checkbox';\nimport classNames from '../../utils/classNames';\nimport type { TableHtmlAttributes, TableRowData } from './Table.types';\nimport { resolveRowClassName, resolveRowKey } from './model/resolveRowMeta';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport {\n    extractTableHtmlAttributes,\n    TableRowContext,\n    useTableBodyContext,\n    useOptionalTableSection,\n} from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\nimport { getInteractiveRowProps } from './shared/getInteractiveRowProps';\n\nconst DEFAULT_EXPANDED_ROW_DURATION = 0.18;\n\nexport type TableExpandedRowProps<RowType extends TableRowData> = TableHtmlAttributes &\n    Partial<RowType> & {\n        /**\n         * Parent row key used to associate this expanded row with its parent.\n         */\n        parentKey: string | number;\n\n        /**\n         * Optional class names only for this expanded row.\n         */\n        className?: string;\n\n        /**\n         * Excludes this row from table selection while keeping the row interactive.\n         */\n        selectable?: boolean;\n\n        /**\n         * Disable table hover styling for this row.\n         */\n        noHover?: boolean;\n\n        /**\n         * Table row content.\n         */\n        children?: ReactNode;\n    };\n\ntype TableExpandedRowSelectionCellProps = {\n    isSelected: boolean;\n    isSelectable: boolean;\n    hideSelectionControl?: boolean;\n    isTableView: boolean;\n    onToggleSelection?: () => void;\n    cardCellClassName?: string;\n};\n\nconst TableExpandedRowSelectionCell = (props: TableExpandedRowSelectionCellProps) => {\n    const { isSelected, isSelectable, hideSelectionControl, isTableView, onToggleSelection, cardCellClassName } = props;\n    return (\n        <div\n            className={classNames('table-cell table-selection-cell', !isTableView && cardCellClassName)}\n            role='cell'\n            aria-colindex={1}\n            style={isTableView ? { gridColumn: '1 / span 1', gridRow: '1 / span 1' } : undefined}\n            onClick={event => event.stopPropagation()}\n            onKeyDown={event => event.stopPropagation()}\n        >\n            {!hideSelectionControl && (\n                <div className='table-selection-control'>\n                    <Checkbox checked={isSelected} disabled={!isSelectable} onChange={onToggleSelection} />\n                </div>\n            )}\n        </div>\n    );\n};\n\nconst TableExpandedRow = <RowType extends TableRowData = TableRowData>(props: TableExpandedRowProps<RowType>) => {\n    const { children, className, noHover, parentKey: _parentKey, selectable, ...remainingProps } = props;\n\n    const renderConfigContext = useOptionalTableRenderConfigContext<RowType>();\n    const renderContext = useOptionalTableRenderContext<RowType>();\n    const interactionContext = useOptionalTableInteractionContext<RowType>();\n    const section = useOptionalTableSection();\n    const bodyContext = useTableBodyContext();\n\n    const cellIndexRef = useRef(0);\n    cellIndexRef.current = 0;\n\n    const [isAnimating, setIsAnimating] = useState(true);\n    const shouldReduceMotion = useReducedMotion();\n\n    const animation = useMemo(\n        () =>\n            shouldReduceMotion\n                ? {\n                      initial: { opacity: 0 },\n                      animate: {\n                          opacity: 1,\n                          transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeInOut' as const },\n                      },\n                      exit: {\n                          opacity: 0,\n                          transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeInOut' as const },\n                      },\n                  }\n                : {\n                      initial: { opacity: 0, height: 0, y: -8 },\n                      animate: {\n                          opacity: 1,\n                          height: 'auto',\n                          y: 0,\n                          transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeOut' as const },\n                      },\n                      exit: {\n                          opacity: 0,\n                          height: 0,\n                          y: -8,\n                          transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeInOut' as const },\n                      },\n                  },\n        [shouldReduceMotion]\n    );\n\n    if (\n        !renderContext ||\n        !renderConfigContext ||\n        !interactionContext ||\n        renderContext.columns.length === 0 ||\n        section !== 'body' ||\n        !bodyContext\n    ) {\n        return null;\n    }\n\n    const rowData = remainingProps as unknown as RowType;\n    const rowIndex = bodyContext.nextRowIndex();\n    const rowId = resolveRowKey(rowData, rowIndex, renderConfigContext.rowKey);\n\n    const resolvedRowAnimationProps =\n        typeof renderConfigContext.rowAnimationProps === 'function'\n            ? renderConfigContext.rowAnimationProps(rowData, rowIndex)\n            : renderConfigContext.rowAnimationProps;\n\n    const interactiveRowProps = getInteractiveRowProps({\n        isClickable: interactionContext.isClickable,\n        onRowClick: (clickedRow, clickedRowIndex) => {\n            interactionContext.onRowClick?.(clickedRow, clickedRowIndex);\n            interactionContext.onActiveRowChange?.(\n                interactionContext.activeRowId === rowId ? undefined : rowId,\n                clickedRow,\n                clickedRowIndex\n            );\n        },\n        row: rowData,\n        rowIndex,\n    });\n\n    let mergedRowAnimationProps: MotionProps | undefined;\n\n    if (renderConfigContext.expandedRowAnimation !== false) {\n        mergedRowAnimationProps = {\n            ...animation,\n            ...resolvedRowAnimationProps,\n        };\n    }\n\n    const isSelectable = interactionContext.selectableRowIdSet.has(rowId);\n    const isSelected = isSelectable && interactionContext.selectedRowIdSet.has(rowId);\n\n    const rowClassNames = classNames(\n        'table-row',\n        'table-row-expanded-data',\n        !renderConfigContext.isTableView && 'divider-y-1 divider-color-lighter divider-style-solid',\n        interactionContext.activeRowId === rowId && 'table-row-active',\n        isSelected && 'table-row-selected',\n        interactiveRowProps.isClickableClassName,\n        noHover && 'table-row-no-hover',\n        !renderConfigContext.isTableView && renderConfigContext.cardClasses.rowClassName,\n        className,\n        resolveRowClassName(renderConfigContext.rowClassName, rowData, rowIndex)\n    );\n\n    const selectionCell = interactionContext.showSelectionColumn && (\n        <TableExpandedRowSelectionCell\n            isSelected={isSelected}\n            isSelectable={isSelectable}\n            hideSelectionControl={!isSelectable && interactionContext.hideSelectionCheckboxesForExcludedRows}\n            isTableView={renderConfigContext.isTableView}\n            onToggleSelection={() => interactionContext.onToggleRowSelection?.(rowId)}\n            cardCellClassName={renderConfigContext.cardClasses.cellClassName}\n        />\n    );\n\n    const rowContent = (\n        <>\n            {selectionCell}\n            {children}\n        </>\n    );\n\n    const staticRowProps = {\n        ...extractTableHtmlAttributes(remainingProps),\n        className: rowClassNames,\n        'data-index': rowIndex,\n        'data-row-id': String(rowId),\n        onClick: interactiveRowProps.onClick,\n        onKeyDown: interactiveRowProps.onKeyDown,\n        role: 'row' as const,\n        tabIndex: interactiveRowProps.tabIndex,\n    };\n\n    const animatedRowProps = {\n        ...(extractTableHtmlAttributes(remainingProps) as Omit<\n            HTMLMotionProps<'div'>,\n            'children' | 'className' | 'data-row-id' | 'onClick' | 'onKeyDown' | 'role' | 'style' | 'tabIndex'\n        >),\n        className: rowClassNames,\n        'data-index': rowIndex,\n        'data-row-id': String(rowId),\n        onClick: interactiveRowProps.onClick,\n        onKeyDown: interactiveRowProps.onKeyDown,\n        role: 'row' as const,\n        tabIndex: interactiveRowProps.tabIndex,\n        onAnimationStart: () => setIsAnimating(true),\n        onAnimationComplete: () => setIsAnimating(false),\n        ...mergedRowAnimationProps,\n        style: {\n            ...(mergedRowAnimationProps?.style ?? {}),\n            overflow: isAnimating ? 'hidden' : 'visible',\n        },\n    };\n\n    const rowNode = (\n        <TableRowContext.Provider\n            value={{\n                nextColumnIndex: (explicitColumnIndex, span = 1) => {\n                    if (explicitColumnIndex !== undefined && explicitColumnIndex >= 0) {\n                        cellIndexRef.current = explicitColumnIndex + span;\n                        return explicitColumnIndex;\n                    }\n\n                    const nextIndex = cellIndexRef.current;\n                    cellIndexRef.current += span;\n                    return nextIndex;\n                },\n                rowIndex,\n                rowId,\n                rowData,\n            }}\n        >\n            {mergedRowAnimationProps ? (\n                <motion.div {...animatedRowProps}>{rowContent}</motion.div>\n            ) : (\n                <div {...staticRowProps}>{rowContent}</div>\n            )}\n        </TableRowContext.Provider>\n    );\n\n    renderContext.renderDraft.hasExpandableRows = true;\n    renderContext.renderDraft.bodyRows.push({\n        rowId,\n        rowIndex,\n        kind: 'expanded',\n        selectable: selectable !== false,\n        render: () => rowNode,\n    });\n\n    return renderContext.isRegisteringBodyRows ? null : rowNode;\n};\n\nexport default TableExpandedRow;\n"],"names":["DEFAULT_EXPANDED_ROW_DURATION","TableExpandedRowSelectionCell","props","isSelected","isSelectable","hideSelectionControl","isTableView","onToggleSelection","cardCellClassName","jsx","classNames","event","Checkbox","TableExpandedRow","children","className","noHover","_parentKey","selectable","remainingProps","renderConfigContext","useOptionalTableRenderConfigContext","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","section","useOptionalTableSection","bodyContext","useTableBodyContext","cellIndexRef","useRef","isAnimating","setIsAnimating","useState","shouldReduceMotion","useReducedMotion","animation","useMemo","rowData","rowIndex","rowId","resolveRowKey","resolvedRowAnimationProps","interactiveRowProps","getInteractiveRowProps","clickedRow","clickedRowIndex","mergedRowAnimationProps","rowClassNames","resolveRowClassName","selectionCell","rowContent","jsxs","Fragment","staticRowProps","extractTableHtmlAttributes","animatedRowProps","rowNode","TableRowContext","explicitColumnIndex","span","nextIndex","motion"],"mappings":"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"}

package/components/table/TableGroupRow.d.ts

@@ -6,7 +6,9 @@ export type TableGroupRowProps = TableHtmlAttributes & {
      */
     children?: ReactNode;
     /**
-     * Keeps the group row sticky at the top of a scrollable table body.
+     * Keeps the group row sticky at the top of the current table scroll context.
+     * When a sticky `TableHeader` is present, the row stacks below the measured header height.
+     * `TableBody maxHeight` continues to pin the row inside the internal body scroller.
      *
      * @default false
      */

package/components/table/TableGroupRow.js

@@ -1,34 +1,35 @@
 import { jsx as t } from "react/jsx-runtime";
-import b from "../../utils/classNames.js";
-import { useOptionalTableInteractionContext as w } from "./context/TableInteractionContext.js";
-import { useOptionalTableSection as x, useTableBodyContext as g } from "./context/TableStructureContext.js";
+import w from "../../utils/classNames.js";
+import { useOptionalTableInteractionContext as x } from "./context/TableInteractionContext.js";
+import { useOptionalTableSection as g, useTableBodyContext as y } from "./context/TableStructureContext.js";
 import { useOptionalTableRenderContext as f } from "./context/TableRenderContext.js";
-const v = (s) => {
-  const { children: a, className: c, noHover: i, sticky: d, ...u } = s, o = f(), n = w(), m = x(), r = g();
-  if (!o || !n || o.columns.length === 0 || m !== "body" || !r)
+const v = (a) => {
+  const { children: c, className: i, noHover: d, sticky: n, ...u } = a, o = f(), r = x(), m = g(), l = y();
+  if (!o || !r || o.columns.length === 0 || m !== "body" || !l)
     return null;
-  const e = r.nextRowIndex(), p = o.columns.length + (n.showSelectionColumn ? 1 : 0), l = /* @__PURE__ */ t(
+  const e = l.nextRowIndex(), p = o.columns.length + (r.showSelectionColumn ? 1 : 0), b = !!o.renderDraft.bodyMaxHeight, s = /* @__PURE__ */ t(
     "div",
     {
       ...u,
-      className: b(
+      className: w(
         "table-row",
         "table-row-group",
-        d && "table-row-group-sticky",
-        i && "table-row-no-hover",
-        c
+        n && "table-row-group-sticky",
+        n && b && "table-row-sticky-in-container",
+        d && "table-row-no-hover",
+        i
       ),
       "data-index": e,
       role: "row",
-      children: /* @__PURE__ */ t("div", { className: "table-cell table-group-cell", role: "cell", "aria-colspan": p, children: /* @__PURE__ */ t("div", { className: "table-cell-content", children: a }) })
+      children: /* @__PURE__ */ t("div", { className: "table-cell table-group-cell", role: "cell", "aria-colspan": p, children: /* @__PURE__ */ t("div", { className: "table-cell-content", children: c }) })
     }
   );
   return o.renderDraft.bodyRows.push({
     rowId: `group-${e}`,
     rowIndex: e,
     kind: "group",
-    render: () => l
-  }), o.isRegisteringBodyRows ? null : l;
+    render: () => s
+  }), o.isRegisteringBodyRows ? null : s;
 };
 export {
   v as default

package/components/table/TableGroupRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableGroupRow.js","sources":["../../../src/components/table/TableGroupRow.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport type { TableHtmlAttributes } from './Table.types';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useTableBodyContext, useOptionalTableSection } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableGroupRowProps = TableHtmlAttributes & {\n    /**\n     * The content of the full-width group row.\n     */\n    children?: ReactNode;\n\n    /**\n     * Keeps the group row sticky at the top of a scrollable table body.\n     *\n     * @default false\n     */\n    sticky?: boolean;\n\n    /**\n     * Optional class names only for this group row.\n     */\n    className?: string;\n\n    /**\n     * Disable table hover styling for this row.\n     */\n    noHover?: boolean;\n};\n\nconst TableGroupRow = (props: TableGroupRowProps) => {\n    const { children, className, noHover, sticky, ...remainingProps } = props;\n\n    const renderContext = useOptionalTableRenderContext();\n    const interactionContext = useOptionalTableInteractionContext();\n    const section = useOptionalTableSection();\n    const bodyContext = useTableBodyContext();\n\n    if (\n        !renderContext ||\n        !interactionContext ||\n        renderContext.columns.length === 0 ||\n        section !== 'body' ||\n        !bodyContext\n    ) {\n        return null;\n    }\n\n    const rowIndex = bodyContext.nextRowIndex();\n    const columnCount = renderContext.columns.length + (interactionContext.showSelectionColumn ? 1 : 0);\n\n    const rowNode = (\n        <div\n            {...remainingProps}\n            className={classNames(\n                'table-row',\n                'table-row-group',\n                sticky && 'table-row-group-sticky',\n                noHover && 'table-row-no-hover',\n                className\n            )}\n            data-index={rowIndex}\n            role='row'\n        >\n            <div className='table-cell table-group-cell' role='cell' aria-colspan={columnCount}>\n                <div className='table-cell-content'>{children}</div>\n            </div>\n        </div>\n    );\n\n    renderContext.renderDraft.bodyRows.push({\n        rowId: `group-${rowIndex}`,\n        rowIndex,\n        kind: 'group',\n        render: () => rowNode,\n    });\n\n    return renderContext.isRegisteringBodyRows ? null : rowNode;\n};\n\nexport default TableGroupRow;\n"],"names":["TableGroupRow","props","children","className","noHover","sticky","remainingProps","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","section","useOptionalTableSection","bodyContext","useTableBodyContext","rowIndex","columnCount","rowNode","jsx","classNames"],"mappings":";;;;;AAgCA,MAAMA,IAAgB,CAACC,MAA8B;AACjD,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,SAAAC,GAAS,QAAAC,GAAQ,GAAGC,MAAmBL,GAE9DM,IAAgBC,EAAA,GAChBC,IAAqBC,EAAA,GACrBC,IAAUC,EAAA,GACVC,IAAcC,EAAA;AAEpB,MACI,CAACP,KACD,CAACE,KACDF,EAAc,QAAQ,WAAW,KACjCI,MAAY,UACZ,CAACE;AAED,WAAO;AAGX,QAAME,IAAWF,EAAY,aAAA,GACvBG,IAAcT,EAAc,QAAQ,UAAUE,EAAmB,sBAAsB,IAAI,IAE3FQ,IACF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGZ;AAAA,MACJ,WAAWa;AAAA,QACP;AAAA,QACA;AAAA,QACAd,KAAU;AAAA,QACVD,KAAW;AAAA,QACXD;AAAA,MAAA;AAAA,MAEJ,cAAYY;AAAA,MACZ,MAAK;AAAA,MAEL,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,+BAA8B,MAAK,QAAO,gBAAcF,GACnE,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAhB,GAAS,EAAA,CAClD;AAAA,IAAA;AAAA,EAAA;AAIR,SAAAK,EAAc,YAAY,SAAS,KAAK;AAAA,IACpC,OAAO,SAASQ,CAAQ;AAAA,IACxB,UAAAA;AAAA,IACA,MAAM;AAAA,IACN,QAAQ,MAAME;AAAA,EAAA,CACjB,GAEMV,EAAc,wBAAwB,OAAOU;AACxD;"}
+{"version":3,"file":"TableGroupRow.js","sources":["../../../src/components/table/TableGroupRow.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport type { TableHtmlAttributes } from './Table.types';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useTableBodyContext, useOptionalTableSection } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableGroupRowProps = TableHtmlAttributes & {\n    /**\n     * The content of the full-width group row.\n     */\n    children?: ReactNode;\n\n    /**\n     * Keeps the group row sticky at the top of the current table scroll context.\n     * When a sticky `TableHeader` is present, the row stacks below the measured header height.\n     * `TableBody maxHeight` continues to pin the row inside the internal body scroller.\n     *\n     * @default false\n     */\n    sticky?: boolean;\n\n    /**\n     * Optional class names only for this group row.\n     */\n    className?: string;\n\n    /**\n     * Disable table hover styling for this row.\n     */\n    noHover?: boolean;\n};\n\nconst TableGroupRow = (props: TableGroupRowProps) => {\n    const { children, className, noHover, sticky, ...remainingProps } = props;\n\n    const renderContext = useOptionalTableRenderContext();\n    const interactionContext = useOptionalTableInteractionContext();\n    const section = useOptionalTableSection();\n    const bodyContext = useTableBodyContext();\n\n    if (\n        !renderContext ||\n        !interactionContext ||\n        renderContext.columns.length === 0 ||\n        section !== 'body' ||\n        !bodyContext\n    ) {\n        return null;\n    }\n\n    const rowIndex = bodyContext.nextRowIndex();\n    const columnCount = renderContext.columns.length + (interactionContext.showSelectionColumn ? 1 : 0);\n    const stickyInBodyScrollContainer = !!renderContext.renderDraft.bodyMaxHeight;\n\n    const rowNode = (\n        <div\n            {...remainingProps}\n            className={classNames(\n                'table-row',\n                'table-row-group',\n                sticky && 'table-row-group-sticky',\n                sticky && stickyInBodyScrollContainer && 'table-row-sticky-in-container',\n                noHover && 'table-row-no-hover',\n                className\n            )}\n            data-index={rowIndex}\n            role='row'\n        >\n            <div className='table-cell table-group-cell' role='cell' aria-colspan={columnCount}>\n                <div className='table-cell-content'>{children}</div>\n            </div>\n        </div>\n    );\n\n    renderContext.renderDraft.bodyRows.push({\n        rowId: `group-${rowIndex}`,\n        rowIndex,\n        kind: 'group',\n        render: () => rowNode,\n    });\n\n    return renderContext.isRegisteringBodyRows ? null : rowNode;\n};\n\nexport default TableGroupRow;\n"],"names":["TableGroupRow","props","children","className","noHover","sticky","remainingProps","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","section","useOptionalTableSection","bodyContext","useTableBodyContext","rowIndex","columnCount","stickyInBodyScrollContainer","rowNode","jsx","classNames"],"mappings":";;;;;AAkCA,MAAMA,IAAgB,CAACC,MAA8B;AACjD,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,SAAAC,GAAS,QAAAC,GAAQ,GAAGC,MAAmBL,GAE9DM,IAAgBC,EAAA,GAChBC,IAAqBC,EAAA,GACrBC,IAAUC,EAAA,GACVC,IAAcC,EAAA;AAEpB,MACI,CAACP,KACD,CAACE,KACDF,EAAc,QAAQ,WAAW,KACjCI,MAAY,UACZ,CAACE;AAED,WAAO;AAGX,QAAME,IAAWF,EAAY,aAAA,GACvBG,IAAcT,EAAc,QAAQ,UAAUE,EAAmB,sBAAsB,IAAI,IAC3FQ,IAA8B,CAAC,CAACV,EAAc,YAAY,eAE1DW,IACF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGb;AAAA,MACJ,WAAWc;AAAA,QACP;AAAA,QACA;AAAA,QACAf,KAAU;AAAA,QACVA,KAAUY,KAA+B;AAAA,QACzCb,KAAW;AAAA,QACXD;AAAA,MAAA;AAAA,MAEJ,cAAYY;AAAA,MACZ,MAAK;AAAA,MAEL,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,+BAA8B,MAAK,QAAO,gBAAcH,GACnE,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAjB,GAAS,EAAA,CAClD;AAAA,IAAA;AAAA,EAAA;AAIR,SAAAK,EAAc,YAAY,SAAS,KAAK;AAAA,IACpC,OAAO,SAASQ,CAAQ;AAAA,IACxB,UAAAA;AAAA,IACA,MAAM;AAAA,IACN,QAAQ,MAAMG;AAAA,EAAA,CACjB,GAEMX,EAAc,wBAAwB,OAAOW;AACxD;"}

package/components/table/TableHeader.d.ts

@@ -5,6 +5,15 @@ export type TableHeaderProps<RowType extends TableRowData> = TableHtmlAttributes
      * Additional class names for the header grid wrapper.
      */
     className?: string;
+    /**
+     * Keeps the table header sticky while the page scrolls.
+     * The sticky top reference follows `Table.stickyReference`.
+     *
+     * This applies in `TABLE` view only.
+     *
+     * @default false
+     */
+    sticky?: boolean;
     /**
      * Table header content.
      */

package/components/table/TableHeader.js

@@ -1,107 +1,136 @@
-import { jsxs as h, jsx as o } from "react/jsx-runtime";
-import { useSensors as K, useSensor as O, PointerSensor as P, DndContext as E, DragOverlay as N } from "@dnd-kit/core";
-import { restrictToHorizontalAxis as j } from "@dnd-kit/modifiers";
-import { SortableContext as z, horizontalListSortingStrategy as L } from "@dnd-kit/sortable";
-import { useRef as W, useState as v } from "react";
-import k from "../../utils/classNames.js";
-import V from "./render/header/TableHeaderDragOverlay.js";
-import _ from "./render/header/TableHeaderSelectionCell.js";
-import { resolveColumnCollisionDetection as $ } from "./render/header/resolveColumnCollisionDetection.js";
-import { useOptionalTableInteractionContext as q } from "./context/TableInteractionContext.js";
-import { useOptionalTableLayoutContext as B } from "./context/TableLayoutContext.js";
-import { useOptionalTableRenderConfigContext as F } from "./context/TableRenderConfigContext.js";
-import { TableSectionContext as f, TableHeaderContext as p } from "./context/TableStructureContext.js";
-import { useOptionalTableRenderContext as G } from "./context/TableRenderContext.js";
-const ie = (x) => {
-  const { children: s, className: S, ...w } = x, l = G(), d = F(), t = q(), n = B();
-  if (!l || !d || !t || !n)
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import { useSensors as N, useSensor as j, PointerSensor as B, DndContext as M, DragOverlay as V } from "@dnd-kit/core";
+import { restrictToHorizontalAxis as W } from "@dnd-kit/modifiers";
+import { SortableContext as $, horizontalListSortingStrategy as G } from "@dnd-kit/sortable";
+import { useRef as Y, useState as b, useLayoutEffect as q } from "react";
+import F from "../../hooks/useMergeRefs.js";
+import J from "../../hooks/useResizeObserver.js";
+import y from "../../utils/classNames.js";
+import Q from "./render/header/TableHeaderDragOverlay.js";
+import U from "./render/header/TableHeaderSelectionCell.js";
+import { resolveColumnCollisionDetection as X } from "./render/header/resolveColumnCollisionDetection.js";
+import { useOptionalTableInteractionContext as Z } from "./context/TableInteractionContext.js";
+import { useOptionalTableLayoutContext as ee } from "./context/TableLayoutContext.js";
+import { useOptionalTableRenderConfigContext as te } from "./context/TableRenderConfigContext.js";
+import { TableSectionContext as R, TableHeaderContext as w } from "./context/TableStructureContext.js";
+import { useOptionalTableRenderContext as oe } from "./context/TableRenderContext.js";
+const d = "--table-sticky-header-height", Se = (D) => {
+  const { children: m, className: H, sticky: i = !1, ...T } = D, s = oe(), u = te(), t = Z(), r = ee();
+  if (!s || !u || !t || !r)
     return null;
-  const D = K(O(P, { activationConstraint: { distance: 6 } })), r = W(0);
-  r.current = 0;
-  const [c, m] = v(void 0), [b, u] = v(void 0), R = !!n.onColumnDragEnd && (n.draggableColumnKeys?.length ?? 0) > 1, i = l.header, a = i?.rowCount ?? 1, y = i ?? {
+  const A = N(j(B, { activationConstraint: { distance: 6 } })), n = Y(0), [g, , { blockSize: C }] = J();
+  n.current = 0;
+  const [h, f] = b(void 0), [E, v] = b(void 0), P = F(
+    r.tableHeadRowRef,
+    g
+  ), I = !!r.onColumnDragEnd && (r.draggableColumnKeys?.length ?? 0) > 1, c = s.header, a = c?.rowCount ?? 1, K = c ?? {
     rowCount: a,
-    totalColumnCount: l.columns.length,
+    totalColumnCount: s.columns.length,
     columns: []
-  }, H = c ? i?.columns.find((e) => (e.columnKey ?? String(e.key)) === c) : void 0, g = () => {
-    m(void 0), u(void 0);
-  }, T = (e) => {
-    m(String(e.active.id)), u(e.active.rect.current.initial?.width ?? void 0);
-  }, A = (e) => {
-    g();
-  }, I = (e) => {
-    g(), n.onColumnDragEnd?.(e);
-  }, C = R && n.draggableColumnKeys ? /* @__PURE__ */ h(
-    E,
+  }, O = h ? c?.columns.find((e) => (e.columnKey ?? String(e.key)) === h) : void 0, p = () => {
+    f(void 0), v(void 0);
+  }, k = (e) => {
+    f(String(e.active.id)), v(e.active.rect.current.initial?.width ?? void 0);
+  }, z = (e) => {
+    p();
+  }, _ = (e) => {
+    p(), r.onColumnDragEnd?.(e);
+  };
+  q(() => {
+    const e = g.current, l = e?.closest(".table");
+    if (!l)
+      return;
+    if (!i || !e) {
+      l.style.removeProperty(d);
+      return;
+    }
+    const L = Math.max(C ?? e.getBoundingClientRect().height ?? 0, 0);
+    return l.style.setProperty(d, `${L}px`), () => {
+      l.style.removeProperty(d);
+    };
+  }, [C, i]);
+  const S = I && r.draggableColumnKeys ? /* @__PURE__ */ x(
+    M,
     {
-      sensors: D,
-      collisionDetection: $,
-      modifiers: [j],
-      onDragStart: T,
-      onDragCancel: A,
-      onDragEnd: I,
+      sensors: A,
+      collisionDetection: X,
+      modifiers: [W],
+      onDragStart: k,
+      onDragCancel: z,
+      onDragEnd: _,
       children: [
-        /* @__PURE__ */ o(z, { items: n.draggableColumnKeys, strategy: L, children: s }),
-        /* @__PURE__ */ o(N, { adjustScale: !1, dropAnimation: null, children: /* @__PURE__ */ o(
-          V,
+        /* @__PURE__ */ o($, { items: r.draggableColumnKeys, strategy: G, children: m }),
+        /* @__PURE__ */ o(V, { adjustScale: !1, dropAnimation: null, children: /* @__PURE__ */ o(
+          Q,
           {
-            column: H,
-            header: y,
+            column: O,
+            header: K,
             showSelectionColumn: t.showSelectionColumn,
-            width: b
+            width: E
           }
         ) })
       ]
     }
-  ) : s;
-  return d.isTableView ? /* @__PURE__ */ o("div", { ...w, className: "table-head", role: "rowgroup", ref: n.tableHeadRowRef, children: /* @__PURE__ */ o(f.Provider, { value: "header", children: /* @__PURE__ */ o(
-    p.Provider,
+  ) : m;
+  return u.isTableView ? /* @__PURE__ */ o(
+    "div",
     {
-      value: {
-        nextHeaderRowIndex: () => {
-          const e = r.current;
-          return r.current += 1, e;
-        }
-      },
-      children: /* @__PURE__ */ h(
-        "div",
+      ...T,
+      className: y("table-head", i && "table-head-sticky"),
+      role: "rowgroup",
+      ref: P,
+      children: /* @__PURE__ */ o(R.Provider, { value: "header", children: /* @__PURE__ */ o(
+        w.Provider,
         {
-          className: k(
-            "table-head-grid",
-            t.selectionHeaderContent && "table-head-grid-custom-selection",
-            S
-          ),
-          role: a === 1 ? "row" : "presentation",
-          style: { gridTemplateRows: `repeat(${a}, auto)` },
-          children: [
-            t.showSelectionColumn && /* @__PURE__ */ o(
-              _,
-              {
-                isAllSelected: t.isAllRowsSelected,
-                isSomeRowsSelected: t.isSomeRowsSelected,
-                onToggleAllSelection: t.onToggleAllSelection,
-                rowCount: a,
-                selectionHeaderContent: t.selectionHeaderContent
-              }
-            ),
-            C
-          ]
+          value: {
+            nextHeaderRowIndex: () => {
+              const e = n.current;
+              return n.current += 1, e;
+            }
+          },
+          children: /* @__PURE__ */ x(
+            "div",
+            {
+              className: y(
+                "table-head-grid",
+                t.selectionHeaderContent && "table-head-grid-custom-selection",
+                H
+              ),
+              role: a === 1 ? "row" : "presentation",
+              style: { gridTemplateRows: `repeat(${a}, auto)` },
+              children: [
+                t.showSelectionColumn && /* @__PURE__ */ o(
+                  U,
+                  {
+                    isAllSelected: t.isAllRowsSelected,
+                    isSomeRowsSelected: t.isSomeRowsSelected,
+                    onToggleAllSelection: t.onToggleAllSelection,
+                    disabled: !t.hasSelectableRows,
+                    rowCount: a,
+                    selectionHeaderContent: t.selectionHeaderContent
+                  }
+                ),
+                S
+              ]
+            }
+          )
         }
-      )
+      ) })
     }
-  ) }) }) : /* @__PURE__ */ o(f.Provider, { value: "header", children: /* @__PURE__ */ o(
-    p.Provider,
+  ) : /* @__PURE__ */ o(R.Provider, { value: "header", children: /* @__PURE__ */ o(
+    w.Provider,
     {
       value: {
         nextHeaderRowIndex: () => {
-          const e = r.current;
-          return r.current += 1, e;
+          const e = n.current;
+          return n.current += 1, e;
         }
       },
-      children: C
+      children: S
     }
   ) });
 };
 export {
-  ie as default
+  Se as default
 };
 //# sourceMappingURL=TableHeader.js.map

package/components/table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {\n    DndContext,\n    DragOverlay,\n    PointerSensor,\n    type DragCancelEvent,\n    type DragEndEvent,\n    type DragStartEvent,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport { restrictToHorizontalAxis } from '@dnd-kit/modifiers';\nimport { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';\nimport { type ReactNode, useRef, useState } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport type { TableHtmlAttributes, TableRowData } from './Table.types';\nimport TableHeaderDragOverlay from './render/header/TableHeaderDragOverlay';\nimport TableHeaderSelectionCell from './render/header/TableHeaderSelectionCell';\nimport { resolveColumnCollisionDetection } from './render/header/resolveColumnCollisionDetection';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableLayoutContext } from './context/TableLayoutContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport { TableHeaderContext, TableSectionContext } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableHeaderProps<RowType extends TableRowData> = TableHtmlAttributes & {\n    /**\n     * Additional class names for the header grid wrapper.\n     */\n    className?: string;\n\n    /**\n     * Table header content.\n     */\n    children?: ReactNode;\n};\n\nconst TableHeader = <RowType extends TableRowData = TableRowData>(props: TableHeaderProps<RowType>) => {\n    const { children, className, ...remainingProps } = props;\n\n    const renderContext = useOptionalTableRenderContext<RowType>();\n    const renderConfigContext = useOptionalTableRenderConfigContext<RowType>();\n    const interactionContext = useOptionalTableInteractionContext<RowType>();\n    const layoutContext = useOptionalTableLayoutContext();\n\n    if (!renderContext || !renderConfigContext || !interactionContext || !layoutContext) {\n        return null;\n    }\n\n    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));\n\n    const headerRowIndexRef = useRef(0);\n    headerRowIndexRef.current = 0;\n\n    const [activeDraggedColumnKey, setActiveDraggedColumnKey] = useState<string | undefined>(undefined);\n    const [activeDraggedColumnWidth, setActiveDraggedColumnWidth] = useState<number | undefined>(undefined);\n\n    const canDragColumns = !!layoutContext.onColumnDragEnd && (layoutContext.draggableColumnKeys?.length ?? 0) > 1;\n    const header = renderContext.header;\n    const headerRowCount = header?.rowCount ?? 1;\n    const overlayHeader = header ?? {\n        rowCount: headerRowCount,\n        totalColumnCount: renderContext.columns.length,\n        columns: [],\n    };\n\n    const activeDraggedColumn = activeDraggedColumnKey\n        ? header?.columns.find(column => (column.columnKey ?? String(column.key)) === activeDraggedColumnKey)\n        : undefined;\n\n    const clearActiveDraggedColumn = () => {\n        setActiveDraggedColumnKey(undefined);\n        setActiveDraggedColumnWidth(undefined);\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        setActiveDraggedColumnKey(String(event.active.id));\n        setActiveDraggedColumnWidth(event.active.rect.current.initial?.width ?? undefined);\n    };\n\n    const handleDragCancel = (_event: DragCancelEvent) => {\n        clearActiveDraggedColumn();\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        clearActiveDraggedColumn();\n        layoutContext.onColumnDragEnd?.(event);\n    };\n\n    const content =\n        canDragColumns && layoutContext.draggableColumnKeys ? (\n            <DndContext\n                sensors={sensors}\n                collisionDetection={resolveColumnCollisionDetection}\n                modifiers={[restrictToHorizontalAxis]}\n                onDragStart={handleDragStart}\n                onDragCancel={handleDragCancel}\n                onDragEnd={handleDragEnd}\n            >\n                <SortableContext items={layoutContext.draggableColumnKeys} strategy={horizontalListSortingStrategy}>\n                    {children}\n                </SortableContext>\n                <DragOverlay adjustScale={false} dropAnimation={null}>\n                    <TableHeaderDragOverlay\n                        column={activeDraggedColumn}\n                        header={overlayHeader}\n                        showSelectionColumn={interactionContext.showSelectionColumn}\n                        width={activeDraggedColumnWidth}\n                    />\n                </DragOverlay>\n            </DndContext>\n        ) : (\n            children\n        );\n\n    if (!renderConfigContext.isTableView) {\n        return (\n            <TableSectionContext.Provider value='header'>\n                <TableHeaderContext.Provider\n                    value={{\n                        nextHeaderRowIndex: () => {\n                            const nextHeaderRowIndex = headerRowIndexRef.current;\n                            headerRowIndexRef.current += 1;\n                            return nextHeaderRowIndex;\n                        },\n                    }}\n                >\n                    {content}\n                </TableHeaderContext.Provider>\n            </TableSectionContext.Provider>\n        );\n    }\n\n    return (\n        <div {...remainingProps} className='table-head' role='rowgroup' ref={layoutContext.tableHeadRowRef}>\n            <TableSectionContext.Provider value='header'>\n                <TableHeaderContext.Provider\n                    value={{\n                        nextHeaderRowIndex: () => {\n                            const nextHeaderRowIndex = headerRowIndexRef.current;\n                            headerRowIndexRef.current += 1;\n                            return nextHeaderRowIndex;\n                        },\n                    }}\n                >\n                    <div\n                        className={classNames(\n                            'table-head-grid',\n                            interactionContext.selectionHeaderContent && 'table-head-grid-custom-selection',\n                            className\n                        )}\n                        role={headerRowCount === 1 ? 'row' : 'presentation'}\n                        style={{ gridTemplateRows: `repeat(${headerRowCount}, auto)` }}\n                    >\n                        {interactionContext.showSelectionColumn && (\n                            <TableHeaderSelectionCell\n                                isAllSelected={interactionContext.isAllRowsSelected}\n                                isSomeRowsSelected={interactionContext.isSomeRowsSelected}\n                                onToggleAllSelection={interactionContext.onToggleAllSelection}\n                                rowCount={headerRowCount}\n                                selectionHeaderContent={interactionContext.selectionHeaderContent}\n                            />\n                        )}\n                        {content}\n                    </div>\n                </TableHeaderContext.Provider>\n            </TableSectionContext.Provider>\n        </div>\n    );\n};\n\nexport default TableHeader;\n"],"names":["TableHeader","props","children","className","remainingProps","renderContext","useOptionalTableRenderContext","renderConfigContext","useOptionalTableRenderConfigContext","interactionContext","useOptionalTableInteractionContext","layoutContext","useOptionalTableLayoutContext","sensors","useSensors","useSensor","PointerSensor","headerRowIndexRef","useRef","activeDraggedColumnKey","setActiveDraggedColumnKey","useState","activeDraggedColumnWidth","setActiveDraggedColumnWidth","canDragColumns","header","headerRowCount","overlayHeader","activeDraggedColumn","column","clearActiveDraggedColumn","handleDragStart","event","handleDragCancel","_event","handleDragEnd","content","jsxs","DndContext","resolveColumnCollisionDetection","restrictToHorizontalAxis","jsx","SortableContext","horizontalListSortingStrategy","DragOverlay","TableHeaderDragOverlay","TableSectionContext","TableHeaderContext","nextHeaderRowIndex","classNames","TableHeaderSelectionCell"],"mappings":"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"}
+{"version":3,"file":"TableHeader.js","sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {\n    DndContext,\n    DragOverlay,\n    PointerSensor,\n    type DragCancelEvent,\n    type DragEndEvent,\n    type DragStartEvent,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport { restrictToHorizontalAxis } from '@dnd-kit/modifiers';\nimport { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';\nimport { type MutableRefObject, type ReactNode, useLayoutEffect, useRef, useState } from 'react';\n\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport useResizeObserver from '../../useResizeObserver';\nimport classNames from '../../utils/classNames';\nimport type { TableHtmlAttributes, TableRowData } from './Table.types';\nimport TableHeaderDragOverlay from './render/header/TableHeaderDragOverlay';\nimport TableHeaderSelectionCell from './render/header/TableHeaderSelectionCell';\nimport { resolveColumnCollisionDetection } from './render/header/resolveColumnCollisionDetection';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableLayoutContext } from './context/TableLayoutContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport { TableHeaderContext, TableSectionContext } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableHeaderProps<RowType extends TableRowData> = TableHtmlAttributes & {\n    /**\n     * Additional class names for the header grid wrapper.\n     */\n    className?: string;\n\n    /**\n     * Keeps the table header sticky while the page scrolls.\n     * The sticky top reference follows `Table.stickyReference`.\n     *\n     * This applies in `TABLE` view only.\n     *\n     * @default false\n     */\n    sticky?: boolean;\n\n    /**\n     * Table header content.\n     */\n    children?: ReactNode;\n};\n\nconst TABLE_STICKY_HEADER_HEIGHT_VAR = '--table-sticky-header-height';\n\nconst TableHeader = <RowType extends TableRowData = TableRowData>(props: TableHeaderProps<RowType>) => {\n    const { children, className, sticky = false, ...remainingProps } = props;\n\n    const renderContext = useOptionalTableRenderContext<RowType>();\n    const renderConfigContext = useOptionalTableRenderConfigContext<RowType>();\n    const interactionContext = useOptionalTableInteractionContext<RowType>();\n    const layoutContext = useOptionalTableLayoutContext();\n\n    if (!renderContext || !renderConfigContext || !interactionContext || !layoutContext) {\n        return null;\n    }\n\n    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));\n\n    const headerRowIndexRef = useRef(0);\n    const [headerElementRef, , { blockSize: headerBlockSize }] = useResizeObserver<HTMLDivElement>();\n    headerRowIndexRef.current = 0;\n\n    const [activeDraggedColumnKey, setActiveDraggedColumnKey] = useState<string | undefined>(undefined);\n    const [activeDraggedColumnWidth, setActiveDraggedColumnWidth] = useState<number | undefined>(undefined);\n    const mergedHeaderRefs = useMergeRefs(\n        layoutContext.tableHeadRowRef as MutableRefObject<HTMLDivElement | null>,\n        headerElementRef\n    );\n\n    const canDragColumns = !!layoutContext.onColumnDragEnd && (layoutContext.draggableColumnKeys?.length ?? 0) > 1;\n    const header = renderContext.header;\n    const headerRowCount = header?.rowCount ?? 1;\n    const overlayHeader = header ?? {\n        rowCount: headerRowCount,\n        totalColumnCount: renderContext.columns.length,\n        columns: [],\n    };\n\n    const activeDraggedColumn = activeDraggedColumnKey\n        ? header?.columns.find(column => (column.columnKey ?? String(column.key)) === activeDraggedColumnKey)\n        : undefined;\n\n    const clearActiveDraggedColumn = () => {\n        setActiveDraggedColumnKey(undefined);\n        setActiveDraggedColumnWidth(undefined);\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        setActiveDraggedColumnKey(String(event.active.id));\n        setActiveDraggedColumnWidth(event.active.rect.current.initial?.width ?? undefined);\n    };\n\n    const handleDragCancel = (_event: DragCancelEvent) => {\n        clearActiveDraggedColumn();\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        clearActiveDraggedColumn();\n        layoutContext.onColumnDragEnd?.(event);\n    };\n\n    useLayoutEffect(() => {\n        const headerElement = headerElementRef.current;\n        const tableElement = headerElement?.closest<HTMLElement>('.table');\n\n        if (!tableElement) {\n            return;\n        }\n\n        if (!sticky || !headerElement) {\n            tableElement.style.removeProperty(TABLE_STICKY_HEADER_HEIGHT_VAR);\n            return;\n        }\n\n        const resolvedHeight = Math.max(headerBlockSize ?? headerElement.getBoundingClientRect().height ?? 0, 0);\n\n        tableElement.style.setProperty(TABLE_STICKY_HEADER_HEIGHT_VAR, `${resolvedHeight}px`);\n\n        return () => {\n            tableElement.style.removeProperty(TABLE_STICKY_HEADER_HEIGHT_VAR);\n        };\n    }, [headerBlockSize, sticky]);\n\n    const content =\n        canDragColumns && layoutContext.draggableColumnKeys ? (\n            <DndContext\n                sensors={sensors}\n                collisionDetection={resolveColumnCollisionDetection}\n                modifiers={[restrictToHorizontalAxis]}\n                onDragStart={handleDragStart}\n                onDragCancel={handleDragCancel}\n                onDragEnd={handleDragEnd}\n            >\n                <SortableContext items={layoutContext.draggableColumnKeys} strategy={horizontalListSortingStrategy}>\n                    {children}\n                </SortableContext>\n                <DragOverlay adjustScale={false} dropAnimation={null}>\n                    <TableHeaderDragOverlay\n                        column={activeDraggedColumn}\n                        header={overlayHeader}\n                        showSelectionColumn={interactionContext.showSelectionColumn}\n                        width={activeDraggedColumnWidth}\n                    />\n                </DragOverlay>\n            </DndContext>\n        ) : (\n            children\n        );\n\n    if (!renderConfigContext.isTableView) {\n        return (\n            <TableSectionContext.Provider value='header'>\n                <TableHeaderContext.Provider\n                    value={{\n                        nextHeaderRowIndex: () => {\n                            const nextHeaderRowIndex = headerRowIndexRef.current;\n                            headerRowIndexRef.current += 1;\n                            return nextHeaderRowIndex;\n                        },\n                    }}\n                >\n                    {content}\n                </TableHeaderContext.Provider>\n            </TableSectionContext.Provider>\n        );\n    }\n\n    return (\n        <div\n            {...remainingProps}\n            className={classNames('table-head', sticky && 'table-head-sticky')}\n            role='rowgroup'\n            ref={mergedHeaderRefs}\n        >\n            <TableSectionContext.Provider value='header'>\n                <TableHeaderContext.Provider\n                    value={{\n                        nextHeaderRowIndex: () => {\n                            const nextHeaderRowIndex = headerRowIndexRef.current;\n                            headerRowIndexRef.current += 1;\n                            return nextHeaderRowIndex;\n                        },\n                    }}\n                >\n                    <div\n                        className={classNames(\n                            'table-head-grid',\n                            interactionContext.selectionHeaderContent && 'table-head-grid-custom-selection',\n                            className\n                        )}\n                        role={headerRowCount === 1 ? 'row' : 'presentation'}\n                        style={{ gridTemplateRows: `repeat(${headerRowCount}, auto)` }}\n                    >\n                        {interactionContext.showSelectionColumn && (\n                            <TableHeaderSelectionCell\n                                isAllSelected={interactionContext.isAllRowsSelected}\n                                isSomeRowsSelected={interactionContext.isSomeRowsSelected}\n                                onToggleAllSelection={interactionContext.onToggleAllSelection}\n                                disabled={!interactionContext.hasSelectableRows}\n                                rowCount={headerRowCount}\n                                selectionHeaderContent={interactionContext.selectionHeaderContent}\n                            />\n                        )}\n                        {content}\n                    </div>\n                </TableHeaderContext.Provider>\n            </TableSectionContext.Provider>\n        </div>\n    );\n};\n\nexport default TableHeader;\n"],"names":["TABLE_STICKY_HEADER_HEIGHT_VAR","TableHeader","props","children","className","sticky","remainingProps","renderContext","useOptionalTableRenderContext","renderConfigContext","useOptionalTableRenderConfigContext","interactionContext","useOptionalTableInteractionContext","layoutContext","useOptionalTableLayoutContext","sensors","useSensors","useSensor","PointerSensor","headerRowIndexRef","useRef","headerElementRef","headerBlockSize","useResizeObserver","activeDraggedColumnKey","setActiveDraggedColumnKey","useState","activeDraggedColumnWidth","setActiveDraggedColumnWidth","mergedHeaderRefs","useMergeRefs","canDragColumns","header","headerRowCount","overlayHeader","activeDraggedColumn","column","clearActiveDraggedColumn","handleDragStart","event","handleDragCancel","_event","handleDragEnd","useLayoutEffect","headerElement","tableElement","resolvedHeight","content","jsxs","DndContext","resolveColumnCollisionDetection","restrictToHorizontalAxis","jsx","SortableContext","horizontalListSortingStrategy","DragOverlay","TableHeaderDragOverlay","classNames","TableSectionContext","TableHeaderContext","nextHeaderRowIndex","TableHeaderSelectionCell"],"mappings":"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"}

package/components/table/TableHeaderColumn.d.ts

@@ -2,7 +2,17 @@ import { PropsWithChildren, ReactNode } from 'react';
 import { TableColumnDefinition, TableHtmlAttributes, TableRowData, TableVerticalAlign } from './Table.types';
 export type TableHeaderColumnProps<RowType extends TableRowData> = Omit<TableColumnDefinition<RowType>, 'className' | 'draggable' | 'filter' | 'headerClassName' | 'icon' | 'key' | 'label' | 'resizeable'> & PropsWithChildren<{
     /**
-     * Column key for leaf header columns.
+     * Column key for a header that represents a single data column.
+     *
+     * These are the lowest header cells in the table structure and should
+     * therefore use `colSpan={1}`.
+     *
+     * For these headers, `columnKey` is effectively required because the table
+     * derives its body/footer column layout, resize/drag behavior, sorting, and
+     * sticky-column logic from these keys.
+     *
+     * Group header cells that only structure other header cells may omit `columnKey`
+     * when they span multiple columns via `colSpan > 1`.
      */
     columnKey?: string;
     /**