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

package/components/table/TableColumn.js

@@ -1,35 +1,35 @@
-import { jsx as u, jsxs as F } from "react/jsx-runtime";
-import a from "../../utils/classNames.js";
-import { getVerticalAlignClassName as K, getHorizontalAlignClassName as I } from "./shared/getAlignClassName.js";
-import L from "./shared/getCellContentOverflowClassName.js";
-import { resolveAriaSpan as V, resolveAriaColIndex as R } from "./shared/resolveTableAria.js";
-import { useOptionalTableInteractionContext as j } from "./context/TableInteractionContext.js";
-import { useOptionalTableLayoutContext as H } from "./context/TableLayoutContext.js";
-import { useOptionalTableRenderConfigContext as P } from "./context/TableRenderConfigContext.js";
-import { useOptionalTableSection as $, useTableRowContext as q } from "./context/TableStructureContext.js";
-import { useOptionalTableRenderContext as E } from "./context/TableRenderContext.js";
-const oe = (T) => {
+import { jsx as b, jsxs as j } from "react/jsx-runtime";
+import c from "../../utils/classNames.js";
+import { getVerticalAlignClassName as I, getHorizontalAlignClassName as L } from "./shared/getAlignClassName.js";
+import T from "./shared/getCellContentOverflowClassName.js";
+import { resolveAriaSpan as H, resolveAriaColIndex as D } from "./shared/resolveTableAria.js";
+import { useOptionalTableInteractionContext as P } from "./context/TableInteractionContext.js";
+import { useOptionalTableLayoutContext as $ } from "./context/TableLayoutContext.js";
+import { useOptionalTableRenderConfigContext as q } from "./context/TableRenderConfigContext.js";
+import { useOptionalTableSection as E, useTableRowContext as G } from "./context/TableStructureContext.js";
+import { useOptionalTableRenderContext as J } from "./context/TableRenderContext.js";
+const ne = (F) => {
   const {
-    children: h,
+    children: f,
     className: g,
-    colSpan: b = 1,
-    columnKey: o,
-    horizontalAlign: D,
-    overflow: p = "hidden",
-    preventRowClick: s = !1,
-    value: x,
-    verticalAlign: M,
-    ...v
-  } = T, n = P(), t = E(), r = j(), f = H(), y = $(), i = q(), c = y === "body", m = y === "footer";
-  if (!t || !n || !r || !f || t.columns.length === 0 || !c && !m || c && !i)
+    colSpan: h = 1,
+    columnKey: t,
+    horizontalAlign: M,
+    overflow: y = "hidden",
+    preventRowClick: m = !1,
+    value: p,
+    verticalAlign: W,
+    ...x
+  } = F, n = q(), o = J(), d = P(), i = $(), v = E(), a = G(), s = v === "body", r = v === "footer";
+  if (!o || !n || !d || !i || o.columns.length === 0 || !s && !r || s && !a)
     return null;
-  const N = o !== void 0 ? t.columnIndexByKey.get(o) : void 0, d = i?.nextColumnIndex(N, b) ?? N ?? -1;
-  if (d < 0)
+  const N = t !== void 0 ? o.columnIndexByKey.get(t) : void 0, u = a?.nextColumnIndex(N, h) ?? N ?? -1;
+  if (u < 0)
     return null;
-  const e = t.columns[d], l = d + 1, W = l + (r.showSelectionColumn ? 1 : 0), w = D ?? e?.horizontalAlign, z = M ?? e?.verticalAlign, A = c && i?.rowData && n.cellClassName?.(
-    i.rowData,
-    t.columnDefinitionsByKey.get(e?.columnKey ?? o ?? "") ?? {
-      key: e?.columnKey ?? o ?? String(l),
+  const e = o.columns[u], l = u + 1, B = l + (d.showSelectionColumn ? 1 : 0), w = M ?? e?.horizontalAlign, k = W ?? e?.verticalAlign, S = s && a?.rowData && n.cellClassName?.(
+    a.rowData,
+    o.columnDefinitionsByKey.get(e?.columnKey ?? t ?? "") ?? {
+      key: e?.columnKey ?? t ?? String(l),
       label: e?.label ?? "",
       icon: e?.icon,
       filter: e?.filter,
@@ -45,64 +45,66 @@ const oe = (T) => {
       hideOnMobile: e?.hideOnMobile,
       sortable: e?.sortable
     },
-    i.rowIndex,
-    d
-  ), S = f.stickyLeftColumnCount ?? 0, k = S > 0 && l <= S, O = e?.mobileLabel ?? (typeof e?.label == "string" ? e.label : ""), C = (B) => {
-    B.stopPropagation();
+    a.rowIndex,
+    u
+  ), z = i.stickyLeftColumnCount ?? 0, A = i.stickyRightColumnCount ?? 0, R = z > 0 && l <= z, O = A > 0 && l > o.columns.length - A, K = e?.mobileLabel ?? (typeof e?.label == "string" ? e.label : ""), C = (V) => {
+    V.stopPropagation();
   };
-  return m && (t.renderDraft.hasFooterCells = !0), n.isTableView ? /* @__PURE__ */ u(
+  return r && (o.renderDraft.hasFooterCells = !0), n.isTableView ? /* @__PURE__ */ b(
     "div",
     {
-      ...v,
-      className: a(
+      ...x,
+      className: c(
         "table-cell",
-        m && "table-footer-cell",
-        c && k && "table-cell-sticky-left-column",
-        m && f.stickyFooter && k && "table-footer-cell-sticky-left-column",
-        I(w),
-        K(z),
+        r && "table-footer-cell",
+        s && R && "table-cell-sticky-left-column",
+        s && O && "table-cell-sticky-right-column",
+        r && i.stickyFooter && R && "table-footer-cell-sticky-left-column",
+        r && i.stickyFooter && O && "table-footer-cell-sticky-right-column",
+        L(w),
+        I(k),
         e?.hideOnMobile && "table-hide-mobile",
-        A,
+        S,
         g
       ),
-      "data-column": e?.columnKey ?? o ?? l,
+      "data-column": e?.columnKey ?? t ?? l,
       role: "cell",
-      "aria-colindex": R(l, r.showSelectionColumn),
-      "aria-colspan": V(b),
-      onClick: s ? C : void 0,
-      onKeyDown: s ? C : void 0,
-      style: { gridColumn: `${W} / span ${b}` },
-      children: /* @__PURE__ */ u("div", { className: a("table-cell-content", L(p)), children: x ?? h ?? "" })
+      "aria-colindex": D(l, d.showSelectionColumn),
+      "aria-colspan": H(h),
+      onClick: m ? C : void 0,
+      onKeyDown: m ? C : void 0,
+      style: { gridColumn: `${B} / span ${h}`, gridRow: "1 / span 1" },
+      children: /* @__PURE__ */ b("div", { className: c("table-cell-content", T(y)), children: p ?? f ?? "" })
     }
-  ) : /* @__PURE__ */ F(
+  ) : /* @__PURE__ */ j(
     "div",
     {
-      ...v,
-      className: a(
+      ...x,
+      className: c(
         "table-cell",
         n.cardClasses.cellClassName,
-        I(w),
-        K(z),
+        L(w),
+        I(k),
         e?.hideOnMobile && "table-hide-mobile",
-        A,
+        S,
         g
       ),
-      "data-column": e?.columnKey ?? o ?? l,
+      "data-column": e?.columnKey ?? t ?? l,
       role: "cell",
-      "aria-colindex": R(l, r.showSelectionColumn),
-      onClick: s ? C : void 0,
-      onKeyDown: s ? C : void 0,
+      "aria-colindex": D(l, d.showSelectionColumn),
+      onClick: m ? C : void 0,
+      onKeyDown: m ? C : void 0,
       children: [
-        O && /* @__PURE__ */ u("div", { className: a("table-cell-label", n.cardClasses.labelClassName), children: O }),
-        /* @__PURE__ */ u(
+        K && /* @__PURE__ */ b("div", { className: c("table-cell-label", n.cardClasses.labelClassName), children: K }),
+        /* @__PURE__ */ b(
           "div",
           {
-            className: a(
+            className: c(
               "table-cell-content",
               n.cardClasses.contentClassName,
-              L(p)
+              T(y)
             ),
-            children: x ?? h ?? ""
+            children: p ?? f ?? ""
           }
         )
       ]
@@ -110,6 +112,6 @@ const oe = (T) => {
   );
 };
 export {
-  oe as default
+  ne as default
 };
 //# sourceMappingURL=TableColumn.js.map

package/components/table/TableColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableColumn.js","sources":["../../../src/components/table/TableColumn.tsx"],"sourcesContent":["import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport { getHorizontalAlignClassName, getVerticalAlignClassName } from './shared/getAlignClassName';\nimport getCellContentOverflowClassName from './shared/getCellContentOverflowClassName';\nimport { resolveAriaColIndex, resolveAriaSpan } from './shared/resolveTableAria';\nimport type { TableCellOverflow, TableHorizontalAlign, TableHtmlAttributes, TableVerticalAlign } from './Table.types';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableLayoutContext } from './context/TableLayoutContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport { useOptionalTableSection, useTableRowContext } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableColumnProps = TableHtmlAttributes & {\n    /**\n     * `TableColumn` may be rendered directly inside `TableFooter`.\n     *\n     * In `TableBody`, columns must be rendered inside a row component such as\n     * `TableRow` or `TableExpandedRow`. Direct `TableColumn` children of\n     * `TableBody` are ignored.\n     */\n    children?: ReactNode;\n\n    /**\n     * Optional explicit column key.\n     * If omitted, the cell is matched by its position inside `<TableRow>`.\n     */\n    columnKey?: string;\n\n    /**\n     * Optional explicit value.\n     */\n    value?: ReactNode;\n\n    /**\n     * Additional classes for this cell only.\n     */\n    className?: string;\n\n    /**\n     * Horizontal alignment override for this cell.\n     */\n    horizontalAlign?: TableHorizontalAlign;\n\n    /**\n     * Vertical alignment override for this cell.\n     */\n    verticalAlign?: TableVerticalAlign;\n\n    /**\n     * Overflow behavior for the cell content wrapper.\n     *\n     * @default 'hidden'\n     */\n    overflow?: TableCellOverflow;\n\n    /**\n     * Number of columns this cell should span.\n     *\n     * Currently used by header and footer-style declarative table sections.\n     */\n    colSpan?: number;\n\n    /**\n     * Prevents clicks and keyboard interactions inside this cell from triggering the parent row click handler.\n     *\n     * Useful for interactive cell content such as dropdowns, inputs, or buttons.\n     *\n     * @default false\n     */\n    preventRowClick?: boolean;\n};\n\nconst TableColumn = (props: TableColumnProps) => {\n    const {\n        children,\n        className,\n        colSpan = 1,\n        columnKey,\n        horizontalAlign,\n        overflow = 'hidden',\n        preventRowClick = false,\n        value,\n        verticalAlign,\n        ...remainingProps\n    } = props;\n\n    const renderConfigContext = useOptionalTableRenderConfigContext();\n    const renderContext = useOptionalTableRenderContext();\n    const interactionContext = useOptionalTableInteractionContext();\n    const layoutContext = useOptionalTableLayoutContext();\n    const section = useOptionalTableSection();\n    const rowContext = useTableRowContext();\n\n    const isBodySection = section === 'body';\n    const isFooterSection = section === 'footer';\n\n    if (\n        !renderContext ||\n        !renderConfigContext ||\n        !interactionContext ||\n        !layoutContext ||\n        renderContext.columns.length === 0 ||\n        (!isBodySection && !isFooterSection)\n    ) {\n        return null;\n    }\n\n    if (isBodySection && !rowContext) {\n        return null;\n    }\n\n    const explicitColumnIndex = columnKey !== undefined ? renderContext.columnIndexByKey.get(columnKey) : undefined;\n    const columnIndex = rowContext?.nextColumnIndex(explicitColumnIndex, colSpan) ?? explicitColumnIndex ?? -1;\n\n    if (columnIndex < 0) {\n        return null;\n    }\n\n    const renderColumn = renderContext.columns[columnIndex];\n    const baseColumnStart = columnIndex + 1;\n    const resolvedColumnStart = baseColumnStart + (interactionContext.showSelectionColumn ? 1 : 0);\n    const resolvedHorizontalAlign = horizontalAlign ?? renderColumn?.horizontalAlign;\n    const resolvedVerticalAlign = verticalAlign ?? renderColumn?.verticalAlign;\n\n    const resolvedCellClassName =\n        isBodySection &&\n        rowContext?.rowData &&\n        renderConfigContext.cellClassName?.(\n            rowContext.rowData,\n            renderContext.columnDefinitionsByKey.get(renderColumn?.columnKey ?? columnKey ?? '') ?? {\n                key: renderColumn?.columnKey ?? columnKey ?? String(baseColumnStart),\n                label: renderColumn?.label ?? '',\n                icon: renderColumn?.icon,\n                filter: renderColumn?.filter,\n                hideLabel: renderColumn?.hideLabel,\n                width: renderColumn?.width,\n                minResizeWidth: renderColumn?.minResizeWidth,\n                maxResizeWidth: renderColumn?.maxResizeWidth,\n                draggable: renderColumn?.draggable,\n                resizeable: renderColumn?.resizeable,\n                horizontalAlign: renderColumn?.horizontalAlign,\n                className: undefined,\n                headerClassName: renderColumn?.headerClassName,\n                hideOnMobile: renderColumn?.hideOnMobile,\n                sortable: renderColumn?.sortable,\n            },\n            rowContext.rowIndex,\n            columnIndex\n        );\n\n    const stickyLeftColumns = layoutContext.stickyLeftColumnCount ?? 0;\n    const isStickyLeftColumn = stickyLeftColumns > 0 && baseColumnStart <= stickyLeftColumns;\n\n    const mobileLabel =\n        renderColumn?.mobileLabel ?? (typeof renderColumn?.label === 'string' ? renderColumn.label : '');\n\n    const handleCellInteraction = (event: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n    };\n\n    if (isFooterSection) {\n        renderContext.renderDraft.hasFooterCells = true;\n    }\n\n    if (renderConfigContext.isTableView) {\n        return (\n            <div\n                {...remainingProps}\n                className={classNames(\n                    'table-cell',\n                    isFooterSection && 'table-footer-cell',\n                    isBodySection && isStickyLeftColumn && 'table-cell-sticky-left-column',\n                    isFooterSection &&\n                        layoutContext.stickyFooter &&\n                        isStickyLeftColumn &&\n                        'table-footer-cell-sticky-left-column',\n                    getHorizontalAlignClassName(resolvedHorizontalAlign),\n                    getVerticalAlignClassName(resolvedVerticalAlign),\n                    renderColumn?.hideOnMobile && 'table-hide-mobile',\n                    resolvedCellClassName,\n                    className\n                )}\n                data-column={renderColumn?.columnKey ?? columnKey ?? baseColumnStart}\n                role='cell'\n                aria-colindex={resolveAriaColIndex(baseColumnStart, interactionContext.showSelectionColumn)}\n                aria-colspan={resolveAriaSpan(colSpan)}\n                onClick={preventRowClick ? handleCellInteraction : undefined}\n                onKeyDown={preventRowClick ? handleCellInteraction : undefined}\n                style={{ gridColumn: `${resolvedColumnStart} / span ${colSpan}` }}\n            >\n                <div className={classNames('table-cell-content', getCellContentOverflowClassName(overflow))}>\n                    {value ?? children ?? ''}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div\n            {...remainingProps}\n            className={classNames(\n                'table-cell',\n                renderConfigContext.cardClasses.cellClassName,\n                getHorizontalAlignClassName(resolvedHorizontalAlign),\n                getVerticalAlignClassName(resolvedVerticalAlign),\n                renderColumn?.hideOnMobile && 'table-hide-mobile',\n                resolvedCellClassName,\n                className\n            )}\n            data-column={renderColumn?.columnKey ?? columnKey ?? baseColumnStart}\n            role='cell'\n            aria-colindex={resolveAriaColIndex(baseColumnStart, interactionContext.showSelectionColumn)}\n            onClick={preventRowClick ? handleCellInteraction : undefined}\n            onKeyDown={preventRowClick ? handleCellInteraction : undefined}\n        >\n            {mobileLabel && (\n                <div className={classNames('table-cell-label', renderConfigContext.cardClasses.labelClassName)}>\n                    {mobileLabel}\n                </div>\n            )}\n            <div\n                className={classNames(\n                    'table-cell-content',\n                    renderConfigContext.cardClasses.contentClassName,\n                    getCellContentOverflowClassName(overflow)\n                )}\n            >\n                {value ?? children ?? ''}\n            </div>\n        </div>\n    );\n};\n\nexport default TableColumn;\n"],"names":["TableColumn","props","children","className","colSpan","columnKey","horizontalAlign","overflow","preventRowClick","value","verticalAlign","remainingProps","renderConfigContext","useOptionalTableRenderConfigContext","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","layoutContext","useOptionalTableLayoutContext","section","useOptionalTableSection","rowContext","useTableRowContext","isBodySection","isFooterSection","explicitColumnIndex","columnIndex","renderColumn","baseColumnStart","resolvedColumnStart","resolvedHorizontalAlign","resolvedVerticalAlign","resolvedCellClassName","stickyLeftColumns","isStickyLeftColumn","mobileLabel","handleCellInteraction","event","jsx","classNames","getHorizontalAlignClassName","getVerticalAlignClassName","resolveAriaColIndex","resolveAriaSpan","getCellContentOverflowClassName","jsxs"],"mappings":"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"}
+{"version":3,"file":"TableColumn.js","sources":["../../../src/components/table/TableColumn.tsx"],"sourcesContent":["import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport { getHorizontalAlignClassName, getVerticalAlignClassName } from './shared/getAlignClassName';\nimport getCellContentOverflowClassName from './shared/getCellContentOverflowClassName';\nimport { resolveAriaColIndex, resolveAriaSpan } from './shared/resolveTableAria';\nimport type { TableCellOverflow, TableHorizontalAlign, TableHtmlAttributes, TableVerticalAlign } from './Table.types';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableLayoutContext } from './context/TableLayoutContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport { useOptionalTableSection, useTableRowContext } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableColumnProps = TableHtmlAttributes & {\n    /**\n     * `TableColumn` may be rendered directly inside `TableFooter`.\n     *\n     * In `TableBody`, columns must be rendered inside a row component such as\n     * `TableRow` or `TableExpandedRow`. Direct `TableColumn` children of\n     * `TableBody` are ignored.\n     */\n    children?: ReactNode;\n\n    /**\n     * Optional explicit column key.\n     *\n     * In `TableBody`, this should usually match the `columnKey` of the corresponding\n     * `TableHeaderColumn` for the same data column. If omitted, the cell is matched by its position inside\n     * the current row.\n     *\n     * Position-based matching is mainly useful for simple rows that mirror the header\n     * order exactly. For spanned cells, reordered columns, or more complex row layouts,\n     * prefer an explicit `columnKey`.\n     */\n    columnKey?: string;\n\n    /**\n     * Optional explicit value.\n     */\n    value?: ReactNode;\n\n    /**\n     * Additional classes for this cell only.\n     */\n    className?: string;\n\n    /**\n     * Horizontal alignment override for this cell.\n     */\n    horizontalAlign?: TableHorizontalAlign;\n\n    /**\n     * Vertical alignment override for this cell.\n     */\n    verticalAlign?: TableVerticalAlign;\n\n    /**\n     * Overflow behavior for the cell content wrapper.\n     *\n     * @default 'hidden'\n     */\n    overflow?: TableCellOverflow;\n\n    /**\n     * Number of columns this cell should span.\n     *\n     * Currently used by header and footer-style declarative table sections.\n     */\n    colSpan?: number;\n\n    /**\n     * Prevents clicks and keyboard interactions inside this cell from triggering the parent row click handler.\n     *\n     * Useful for interactive cell content such as dropdowns, inputs, or buttons.\n     *\n     * @default false\n     */\n    preventRowClick?: boolean;\n};\n\nconst TableColumn = (props: TableColumnProps) => {\n    const {\n        children,\n        className,\n        colSpan = 1,\n        columnKey,\n        horizontalAlign,\n        overflow = 'hidden',\n        preventRowClick = false,\n        value,\n        verticalAlign,\n        ...remainingProps\n    } = props;\n\n    const renderConfigContext = useOptionalTableRenderConfigContext();\n    const renderContext = useOptionalTableRenderContext();\n    const interactionContext = useOptionalTableInteractionContext();\n    const layoutContext = useOptionalTableLayoutContext();\n    const section = useOptionalTableSection();\n    const rowContext = useTableRowContext();\n\n    const isBodySection = section === 'body';\n    const isFooterSection = section === 'footer';\n\n    if (\n        !renderContext ||\n        !renderConfigContext ||\n        !interactionContext ||\n        !layoutContext ||\n        renderContext.columns.length === 0 ||\n        (!isBodySection && !isFooterSection)\n    ) {\n        return null;\n    }\n\n    if (isBodySection && !rowContext) {\n        return null;\n    }\n\n    const explicitColumnIndex = columnKey !== undefined ? renderContext.columnIndexByKey.get(columnKey) : undefined;\n    const columnIndex = rowContext?.nextColumnIndex(explicitColumnIndex, colSpan) ?? explicitColumnIndex ?? -1;\n\n    if (columnIndex < 0) {\n        return null;\n    }\n\n    const renderColumn = renderContext.columns[columnIndex];\n    const baseColumnStart = columnIndex + 1;\n    const resolvedColumnStart = baseColumnStart + (interactionContext.showSelectionColumn ? 1 : 0);\n    const resolvedHorizontalAlign = horizontalAlign ?? renderColumn?.horizontalAlign;\n    const resolvedVerticalAlign = verticalAlign ?? renderColumn?.verticalAlign;\n\n    const resolvedCellClassName =\n        isBodySection &&\n        rowContext?.rowData &&\n        renderConfigContext.cellClassName?.(\n            rowContext.rowData,\n            renderContext.columnDefinitionsByKey.get(renderColumn?.columnKey ?? columnKey ?? '') ?? {\n                key: renderColumn?.columnKey ?? columnKey ?? String(baseColumnStart),\n                label: renderColumn?.label ?? '',\n                icon: renderColumn?.icon,\n                filter: renderColumn?.filter,\n                hideLabel: renderColumn?.hideLabel,\n                width: renderColumn?.width,\n                minResizeWidth: renderColumn?.minResizeWidth,\n                maxResizeWidth: renderColumn?.maxResizeWidth,\n                draggable: renderColumn?.draggable,\n                resizeable: renderColumn?.resizeable,\n                horizontalAlign: renderColumn?.horizontalAlign,\n                className: undefined,\n                headerClassName: renderColumn?.headerClassName,\n                hideOnMobile: renderColumn?.hideOnMobile,\n                sortable: renderColumn?.sortable,\n            },\n            rowContext.rowIndex,\n            columnIndex\n        );\n\n    const stickyLeftColumns = layoutContext.stickyLeftColumnCount ?? 0;\n    const stickyRightColumns = layoutContext.stickyRightColumnCount ?? 0;\n    const isStickyLeftColumn = stickyLeftColumns > 0 && baseColumnStart <= stickyLeftColumns;\n    const isStickyRightColumn =\n        stickyRightColumns > 0 && baseColumnStart > renderContext.columns.length - stickyRightColumns;\n\n    const mobileLabel =\n        renderColumn?.mobileLabel ?? (typeof renderColumn?.label === 'string' ? renderColumn.label : '');\n\n    const handleCellInteraction = (event: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n    };\n\n    if (isFooterSection) {\n        renderContext.renderDraft.hasFooterCells = true;\n    }\n\n    if (renderConfigContext.isTableView) {\n        return (\n            <div\n                {...remainingProps}\n                className={classNames(\n                    'table-cell',\n                    isFooterSection && 'table-footer-cell',\n                    isBodySection && isStickyLeftColumn && 'table-cell-sticky-left-column',\n                    isBodySection && isStickyRightColumn && 'table-cell-sticky-right-column',\n                    isFooterSection &&\n                        layoutContext.stickyFooter &&\n                        isStickyLeftColumn &&\n                        'table-footer-cell-sticky-left-column',\n                    isFooterSection &&\n                        layoutContext.stickyFooter &&\n                        isStickyRightColumn &&\n                        'table-footer-cell-sticky-right-column',\n                    getHorizontalAlignClassName(resolvedHorizontalAlign),\n                    getVerticalAlignClassName(resolvedVerticalAlign),\n                    renderColumn?.hideOnMobile && 'table-hide-mobile',\n                    resolvedCellClassName,\n                    className\n                )}\n                data-column={renderColumn?.columnKey ?? columnKey ?? baseColumnStart}\n                role='cell'\n                aria-colindex={resolveAriaColIndex(baseColumnStart, interactionContext.showSelectionColumn)}\n                aria-colspan={resolveAriaSpan(colSpan)}\n                onClick={preventRowClick ? handleCellInteraction : undefined}\n                onKeyDown={preventRowClick ? handleCellInteraction : undefined}\n                style={{ gridColumn: `${resolvedColumnStart} / span ${colSpan}`, gridRow: '1 / span 1' }}\n            >\n                <div className={classNames('table-cell-content', getCellContentOverflowClassName(overflow))}>\n                    {value ?? children ?? ''}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div\n            {...remainingProps}\n            className={classNames(\n                'table-cell',\n                renderConfigContext.cardClasses.cellClassName,\n                getHorizontalAlignClassName(resolvedHorizontalAlign),\n                getVerticalAlignClassName(resolvedVerticalAlign),\n                renderColumn?.hideOnMobile && 'table-hide-mobile',\n                resolvedCellClassName,\n                className\n            )}\n            data-column={renderColumn?.columnKey ?? columnKey ?? baseColumnStart}\n            role='cell'\n            aria-colindex={resolveAriaColIndex(baseColumnStart, interactionContext.showSelectionColumn)}\n            onClick={preventRowClick ? handleCellInteraction : undefined}\n            onKeyDown={preventRowClick ? handleCellInteraction : undefined}\n        >\n            {mobileLabel && (\n                <div className={classNames('table-cell-label', renderConfigContext.cardClasses.labelClassName)}>\n                    {mobileLabel}\n                </div>\n            )}\n            <div\n                className={classNames(\n                    'table-cell-content',\n                    renderConfigContext.cardClasses.contentClassName,\n                    getCellContentOverflowClassName(overflow)\n                )}\n            >\n                {value ?? children ?? ''}\n            </div>\n        </div>\n    );\n};\n\nexport default TableColumn;\n"],"names":["TableColumn","props","children","className","colSpan","columnKey","horizontalAlign","overflow","preventRowClick","value","verticalAlign","remainingProps","renderConfigContext","useOptionalTableRenderConfigContext","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","layoutContext","useOptionalTableLayoutContext","section","useOptionalTableSection","rowContext","useTableRowContext","isBodySection","isFooterSection","explicitColumnIndex","columnIndex","renderColumn","baseColumnStart","resolvedColumnStart","resolvedHorizontalAlign","resolvedVerticalAlign","resolvedCellClassName","stickyLeftColumns","stickyRightColumns","isStickyLeftColumn","isStickyRightColumn","mobileLabel","handleCellInteraction","event","jsx","classNames","getHorizontalAlignClassName","getVerticalAlignClassName","resolveAriaColIndex","resolveAriaSpan","getCellContentOverflowClassName","jsxs"],"mappings":"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"}

package/components/table/TableExpandedRow.js

@@ -10,23 +10,23 @@ import { useOptionalTableSection as G, useTableBodyContext as J, extractTableHtm
 import { useOptionalTableRenderContext as Y } from "./context/TableRenderContext.js";
 import { getInteractiveRowProps as Z } from "./shared/getInteractiveRowProps.js";
 const u = 0.18, $ = (C) => {
-  const { isSelected: b, isTableView: m, onToggleSelection: x, cardCellClassName: R } = C;
+  const { isSelected: b, isTableView: m, onToggleSelection: R, cardCellClassName: x } = C;
   return /* @__PURE__ */ s(
     "div",
     {
-      className: A("table-cell table-selection-cell", !m && R),
+      className: A("table-cell table-selection-cell", !m && x),
       role: "cell",
       "aria-colindex": 1,
-      style: m ? { gridColumn: "1 / span 1" } : void 0,
+      style: m ? { gridColumn: "1 / span 1", gridRow: "1 / span 1" } : void 0,
       onClick: (a) => a.stopPropagation(),
       onKeyDown: (a) => a.stopPropagation(),
-      children: /* @__PURE__ */ s("div", { className: "table-selection-control", children: /* @__PURE__ */ s(L, { checked: b, onChange: x }) })
+      children: /* @__PURE__ */ s("div", { className: "table-selection-control", children: /* @__PURE__ */ s(L, { checked: b, onChange: R }) })
     }
   );
 }, me = (C) => {
-  const { children: b, className: m, noHover: x, parentKey: R, ...a } = C, e = z(), l = Y(), o = q(), P = G(), y = J(), w = F(0);
+  const { children: b, className: m, noHover: R, parentKey: x, ...a } = C, e = z(), l = Y(), o = q(), P = G(), g = J(), w = F(0);
   w.current = 0;
-  const [S, g] = H(!0), f = j(), D = U(
+  const [S, y] = H(!0), f = j(), D = U(
     () => f ? {
       initial: { opacity: 0 },
       animate: {
@@ -54,9 +54,9 @@ const u = 0.18, $ = (C) => {
     },
     [f]
   );
-  if (!l || !e || !o || l.columns.length === 0 || P !== "body" || !y)
+  if (!l || !e || !o || l.columns.length === 0 || P !== "body" || !g)
     return null;
-  const c = a, n = y.nextRowIndex(), t = W(c, n, e.rowKey), k = typeof e.rowAnimationProps == "function" ? e.rowAnimationProps(c, n) : e.rowAnimationProps, i = Z({
+  const c = a, n = g.nextRowIndex(), t = W(c, n, e.rowKey), k = typeof e.rowAnimationProps == "function" ? e.rowAnimationProps(c, n) : e.rowAnimationProps, i = Z({
     isClickable: o.isClickable,
     onRowClick: (r, d) => {
       o.onRowClick?.(r, d), o.onActiveRowChange?.(
@@ -80,7 +80,7 @@ const u = 0.18, $ = (C) => {
     o.activeRowId === t && "table-row-active",
     h && "table-row-selected",
     i.isClickableClassName,
-    x && "table-row-no-hover",
+    R && "table-row-no-hover",
     !e.isTableView && e.cardClasses.rowClassName,
     m,
     X(e.rowClassName, c, n)
@@ -113,8 +113,8 @@ const u = 0.18, $ = (C) => {
     onKeyDown: i.onKeyDown,
     role: "row",
     tabIndex: i.tabIndex,
-    onAnimationStart: () => g(!0),
-    onAnimationComplete: () => g(!1),
+    onAnimationStart: () => y(!0),
+    onAnimationComplete: () => y(!1),
     ...p,
     style: {
       ...p?.style ?? {},

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         * 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', gridRow: '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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"}

package/components/table/TableHeader.d.ts

@@ -5,6 +5,23 @@ 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.
+     *
+     * This applies in `TABLE` view only.
+     *
+     * @default false
+     */
+    sticky?: boolean;
+    /**
+     * Keeps the sticky header pinned to the top edge of an explicit scroll container.
+     *
+     * Use this when the table sits inside a wrapper with an overflow class like `overflow-y-scroll`.
+     * When omitted, sticky headers compensate the default `ApplicationLayout` body padding.
+     *
+     * @default false
+     */
+    stickyInContainer?: boolean;
     /**
      * Table header content.
      */

package/components/table/TableHeader.js

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