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

package/components/table/TableExpandedContentRow.js

@@ -0,0 +1,110 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useReducedMotion as O, motion as u } from "motion/react";
+import { useState as g, useMemo as R } from "react";
+import C from "../../utils/classNames.js";
+import { useOptionalTableInteractionContext as N } from "./context/TableInteractionContext.js";
+import { useOptionalTableSection as v, useTableBodyContext as A } from "./context/TableStructureContext.js";
+import { useOptionalTableRenderContext as T } from "./context/TableRenderContext.js";
+const t = 0.22, U = (m) => {
+  const { children: p, className: x, noHover: w, parentKey: i, ...h } = m, e = T(), a = N(), b = v(), r = A(), [y, s] = g(!0), l = O(), n = R(
+    () => l ? {
+      row: {
+        initial: { opacity: 0 },
+        animate: {
+          opacity: 1,
+          transition: { duration: t, ease: "easeInOut" }
+        },
+        exit: {
+          opacity: 0,
+          transition: { duration: t, ease: "easeInOut" }
+        }
+      },
+      content: {
+        initial: { opacity: 0 },
+        animate: {
+          opacity: 1,
+          transition: { duration: t, ease: "easeInOut" }
+        },
+        exit: {
+          opacity: 0,
+          transition: { duration: t, ease: "easeInOut" }
+        }
+      }
+    } : {
+      row: {
+        initial: { height: 0 },
+        animate: {
+          height: "auto",
+          transition: { duration: t, ease: "easeInOut" }
+        },
+        exit: {
+          height: 0,
+          transition: { duration: t, ease: "easeInOut" }
+        }
+      },
+      content: {
+        initial: { opacity: 0 },
+        animate: {
+          opacity: 1,
+          transition: {
+            duration: t * 0.65,
+            delay: t,
+            ease: "easeOut"
+          }
+        },
+        exit: {
+          opacity: 0,
+          transition: {
+            duration: t * 0.65,
+            ease: "easeInOut"
+          }
+        }
+      }
+    },
+    [l]
+  );
+  if (!e || !a || e.columns.length === 0 || b !== "body" || !r)
+    return null;
+  const d = r.nextRowIndex(), f = e.columns.length + (a.showSelectionColumn ? 1 : 0), I = `expanded-content-${String(i)}`, c = /* @__PURE__ */ o(
+    u.div,
+    {
+      ...h,
+      className: C(
+        "table-row table-row-expanded-full-width",
+        w && "table-row-no-hover",
+        x
+      ),
+      "data-index": d,
+      "data-parent-row-id": String(i),
+      role: "row",
+      initial: n.row.initial,
+      animate: n.row.animate,
+      exit: n.row.exit,
+      onAnimationStart: () => s(!0),
+      onAnimationComplete: () => s(!1),
+      style: {
+        overflow: y ? "hidden" : "visible"
+      },
+      children: /* @__PURE__ */ o("div", { className: "table-cell table-expanded-cell", role: "cell", "aria-colspan": f, children: /* @__PURE__ */ o(
+        u.div,
+        {
+          className: "table-cell-content",
+          initial: n.content.initial,
+          animate: n.content.animate,
+          exit: n.content.exit,
+          children: p
+        }
+      ) })
+    }
+  );
+  return e.renderDraft.hasExpandableRows = !0, e.renderDraft.bodyRows.push({
+    rowId: I,
+    rowIndex: d,
+    kind: "expanded-full-width",
+    render: () => c
+  }), e.isRegisteringBodyRows ? null : c;
+};
+export {
+  U as default
+};
+//# sourceMappingURL=TableExpandedContentRow.js.map

package/components/table/TableExpandedContentRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableExpandedContentRow.js","sources":["../../../src/components/table/TableExpandedContentRow.tsx"],"sourcesContent":["import { motion, useReducedMotion } from 'motion/react';\nimport { useMemo, useState, 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 TableExpandedContentRowProps = TableHtmlAttributes & {\n    /**\n     * Parent row key used to associate this expanded content row with its parent.\n     */\n    parentKey: string | number;\n\n    /**\n     * The content of the full-width expanded row.\n     */\n    children?: ReactNode;\n\n    /**\n     * Optional class names only for this expanded content row.\n     */\n    className?: string;\n\n    /**\n     * Disable table hover styling for this row.\n     */\n    noHover?: boolean;\n};\n\nconst DEFAULT_EXPANDED_ROW_DURATION = 0.22;\n\nconst TableExpandedContentRow = (props: TableExpandedContentRowProps) => {\n    const { children, className, noHover, parentKey, ...remainingProps } = props;\n\n    const renderContext = useOptionalTableRenderContext();\n    const interactionContext = useOptionalTableInteractionContext();\n    const section = useOptionalTableSection();\n    const bodyContext = useTableBodyContext();\n\n    const [isAnimating, setIsAnimating] = useState(true);\n\n    const shouldReduceMotion = useReducedMotion();\n\n    const animation = useMemo(\n        () =>\n            shouldReduceMotion\n                ? {\n                      row: {\n                          initial: { opacity: 0 },\n                          animate: {\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                      content: {\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                : {\n                      row: {\n                          initial: { height: 0 },\n                          animate: {\n                              height: 'auto',\n                              transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeInOut' as const },\n                          },\n                          exit: {\n                              height: 0,\n                              transition: { duration: DEFAULT_EXPANDED_ROW_DURATION, ease: 'easeInOut' as const },\n                          },\n                      },\n                      content: {\n                          initial: { opacity: 0 },\n                          animate: {\n                              opacity: 1,\n                              transition: {\n                                  duration: DEFAULT_EXPANDED_ROW_DURATION * 0.65,\n                                  delay: DEFAULT_EXPANDED_ROW_DURATION,\n                                  ease: 'easeOut' as const,\n                              },\n                          },\n                          exit: {\n                              opacity: 0,\n                              transition: {\n                                  duration: DEFAULT_EXPANDED_ROW_DURATION * 0.65,\n                                  ease: 'easeInOut' as const,\n                              },\n                          },\n                      },\n                  },\n        [shouldReduceMotion]\n    );\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    // Expanded rows stay keyed by their parent row, so toggling\n    // rows above does not remount already open expanded rows below. This is important\n    // to avid other rows to animate again.\n    const stableExpandedRowId = `expanded-content-${String(parentKey)}`;\n\n    const rowNode = (\n        <motion.div\n            {...remainingProps}\n            className={classNames(\n                'table-row table-row-expanded-full-width',\n                noHover && 'table-row-no-hover',\n                className\n            )}\n            data-index={rowIndex}\n            data-parent-row-id={String(parentKey)}\n            role='row'\n            initial={animation.row.initial}\n            animate={animation.row.animate}\n            exit={animation.row.exit}\n            onAnimationStart={() => setIsAnimating(true)}\n            onAnimationComplete={() => setIsAnimating(false)}\n            style={{\n                overflow: isAnimating ? 'hidden' : 'visible',\n            }}\n        >\n            <div className='table-cell table-expanded-cell' role='cell' aria-colspan={columnCount}>\n                <motion.div\n                    className='table-cell-content'\n                    initial={animation.content.initial}\n                    animate={animation.content.animate}\n                    exit={animation.content.exit}\n                >\n                    {children}\n                </motion.div>\n            </div>\n        </motion.div>\n    );\n\n    renderContext.renderDraft.hasExpandableRows = true;\n    renderContext.renderDraft.bodyRows.push({\n        rowId: stableExpandedRowId,\n        rowIndex,\n        kind: 'expanded-full-width',\n        render: () => rowNode,\n    });\n\n    return renderContext.isRegisteringBodyRows ? null : rowNode;\n};\n\nexport default TableExpandedContentRow;\n"],"names":["DEFAULT_EXPANDED_ROW_DURATION","TableExpandedContentRow","props","children","className","noHover","parentKey","remainingProps","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","section","useOptionalTableSection","bodyContext","useTableBodyContext","isAnimating","setIsAnimating","useState","shouldReduceMotion","useReducedMotion","animation","useMemo","rowIndex","columnCount","stableExpandedRowId","rowNode","jsx","motion","classNames"],"mappings":"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"}

package/components/table/TableExpandedRow.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { TableHtmlAttributes, TableRowData } from './Table.types';
+export type TableExpandedRowProps<RowType extends TableRowData> = TableHtmlAttributes & Partial<RowType> & {
+    /**
+     * Parent row key used to associate this expanded row with its parent.
+     */
+    parentKey: string | number;
+    /**
+     * Optional class names only for this expanded row.
+     */
+    className?: string;
+    /**
+     * Disable table hover styling for this row.
+     */
+    noHover?: boolean;
+    /**
+     * Table row content.
+     */
+    children?: ReactNode;
+};
+declare const TableExpandedRow: <RowType extends TableRowData = TableRowData>(props: TableExpandedRowProps<RowType>) => import("react/jsx-runtime").JSX.Element | null;
+export default TableExpandedRow;

package/components/table/TableExpandedRow.js

@@ -0,0 +1,150 @@
+import { jsx as s, jsxs as _, Fragment as M } from "react/jsx-runtime";
+import { useReducedMotion as j, motion as B } from "motion/react";
+import { useRef as F, useState as H, useMemo as U } from "react";
+import L from "../checkbox/Checkbox.js";
+import A from "../../utils/classNames.js";
+import { resolveRowKey as W, resolveRowClassName as X } from "./model/resolveRowMeta.js";
+import { useOptionalTableInteractionContext as q } from "./context/TableInteractionContext.js";
+import { useOptionalTableRenderConfigContext as z } from "./context/TableRenderConfigContext.js";
+import { useOptionalTableSection as G, useTableBodyContext as J, extractTableHtmlAttributes as I, TableRowContext as Q } from "./context/TableStructureContext.js";
+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;
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: A("table-cell table-selection-cell", !m && R),
+      role: "cell",
+      "aria-colindex": 1,
+      style: m ? { gridColumn: "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 }) })
+    }
+  );
+}, 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);
+  w.current = 0;
+  const [S, g] = H(!0), f = j(), D = U(
+    () => f ? {
+      initial: { opacity: 0 },
+      animate: {
+        opacity: 1,
+        transition: { duration: u, ease: "easeInOut" }
+      },
+      exit: {
+        opacity: 0,
+        transition: { duration: u, ease: "easeInOut" }
+      }
+    } : {
+      initial: { opacity: 0, height: 0, y: -8 },
+      animate: {
+        opacity: 1,
+        height: "auto",
+        y: 0,
+        transition: { duration: u, ease: "easeOut" }
+      },
+      exit: {
+        opacity: 0,
+        height: 0,
+        y: -8,
+        transition: { duration: u, ease: "easeInOut" }
+      }
+    },
+    [f]
+  );
+  if (!l || !e || !o || l.columns.length === 0 || P !== "body" || !y)
+    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({
+    isClickable: o.isClickable,
+    onRowClick: (r, d) => {
+      o.onRowClick?.(r, d), o.onActiveRowChange?.(
+        o.activeRowId === t ? void 0 : t,
+        r,
+        d
+      );
+    },
+    row: c,
+    rowIndex: n
+  });
+  let p;
+  e.expandedRowAnimation !== !1 && (p = {
+    ...D,
+    ...k
+  });
+  const h = o.selectedRowIdSet.has(t), v = A(
+    "table-row",
+    "table-row-expanded-data",
+    !e.isTableView && "divider-y-1 divider-color-lighter divider-style-solid",
+    o.activeRowId === t && "table-row-active",
+    h && "table-row-selected",
+    i.isClickableClassName,
+    x && "table-row-no-hover",
+    !e.isTableView && e.cardClasses.rowClassName,
+    m,
+    X(e.rowClassName, c, n)
+  ), O = o.showSelectionColumn && /* @__PURE__ */ s(
+    $,
+    {
+      isSelected: h,
+      isTableView: e.isTableView,
+      onToggleSelection: () => o.onToggleRowSelection?.(t),
+      cardCellClassName: e.cardClasses.cellClassName
+    }
+  ), T = /* @__PURE__ */ _(M, { children: [
+    O,
+    b
+  ] }), K = {
+    ...I(a),
+    className: v,
+    "data-index": n,
+    "data-row-id": String(t),
+    onClick: i.onClick,
+    onKeyDown: i.onKeyDown,
+    role: "row",
+    tabIndex: i.tabIndex
+  }, E = {
+    ...I(a),
+    className: v,
+    "data-index": n,
+    "data-row-id": String(t),
+    onClick: i.onClick,
+    onKeyDown: i.onKeyDown,
+    role: "row",
+    tabIndex: i.tabIndex,
+    onAnimationStart: () => g(!0),
+    onAnimationComplete: () => g(!1),
+    ...p,
+    style: {
+      ...p?.style ?? {},
+      overflow: S ? "hidden" : "visible"
+    }
+  }, N = /* @__PURE__ */ s(
+    Q.Provider,
+    {
+      value: {
+        nextColumnIndex: (r, d = 1) => {
+          if (r !== void 0 && r >= 0)
+            return w.current = r + d, r;
+          const V = w.current;
+          return w.current += d, V;
+        },
+        rowIndex: n,
+        rowId: t,
+        rowData: c
+      },
+      children: p ? /* @__PURE__ */ s(B.div, { ...E, children: T }) : /* @__PURE__ */ s("div", { ...K, children: T })
+    }
+  );
+  return l.renderDraft.hasExpandableRows = !0, l.renderDraft.bodyRows.push({
+    rowId: t,
+    rowIndex: n,
+    kind: "expanded",
+    render: () => N
+  }), l.isRegisteringBodyRows ? null : N;
+};
+export {
+  me as default
+};
+//# sourceMappingURL=TableExpandedRow.js.map

package/components/table/TableExpandedRow.js.map

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

package/components/table/TableExpanderButton.d.ts

@@ -0,0 +1,25 @@
+import { MouseEventHandler } from 'react';
+export type TableExpanderButtonProps = {
+    /**
+     * Controls whether the related row is currently expanded.
+     *
+     * @default false
+     */
+    expanded?: boolean;
+    /**
+     * Disables the expander button.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback triggered when the expander button is clicked.
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Optional additional class names for the button element.
+     */
+    className?: string;
+};
+declare const TableExpanderButton: (props: TableExpanderButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default TableExpanderButton;

package/components/table/TableExpanderButton.js

@@ -0,0 +1,24 @@
+import { jsx as l } from "react/jsx-runtime";
+import i from "../button/Button.js";
+import m from "../../utils/classNames.js";
+import { useOptionalTableRenderContext as p } from "./context/TableRenderContext.js";
+const x = (o) => {
+  const { expanded: r = !1, disabled: t = !1, onClick: n, className: a, ...s } = o, e = p();
+  return e && (e.renderDraft.hasExpandableRows = !0), /* @__PURE__ */ l(
+    i,
+    {
+      ...s,
+      bsStyle: "muted",
+      bsSize: "xs",
+      iconOnly: !0,
+      disabled: t,
+      iconName: r ? "rioglyph-chevron-up" : "rioglyph-chevron-down",
+      className: m("table-expander-button", a),
+      onClick: n
+    }
+  );
+};
+export {
+  x as default
+};
+//# sourceMappingURL=TableExpanderButton.js.map

package/components/table/TableExpanderButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableExpanderButton.js","sources":["../../../src/components/table/TableExpanderButton.tsx"],"sourcesContent":["import type { MouseEventHandler } from 'react';\n\nimport Button from '../button/Button';\nimport classNames from '../../utils/classNames';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableExpanderButtonProps = {\n    /**\n     * Controls whether the related row is currently expanded.\n     *\n     * @default false\n     */\n    expanded?: boolean;\n\n    /**\n     * Disables the expander button.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback triggered when the expander button is clicked.\n     */\n    onClick?: MouseEventHandler<HTMLButtonElement>;\n\n    /**\n     * Optional additional class names for the button element.\n     */\n    className?: string;\n};\n\nconst TableExpanderButton = (props: TableExpanderButtonProps) => {\n    const { expanded = false, disabled = false, onClick, className, ...remainingProps } = props;\n\n    const renderContext = useOptionalTableRenderContext();\n\n    if (renderContext) {\n        renderContext.renderDraft.hasExpandableRows = true;\n    }\n\n    return (\n        <Button\n            {...remainingProps}\n            bsStyle='muted'\n            bsSize='xs'\n            iconOnly\n            disabled={disabled}\n            iconName={expanded ? 'rioglyph-chevron-up' : 'rioglyph-chevron-down'}\n            className={classNames('table-expander-button', className)}\n            onClick={onClick}\n        />\n    );\n};\n\nexport default TableExpanderButton;\n"],"names":["TableExpanderButton","props","expanded","disabled","onClick","className","remainingProps","renderContext","useOptionalTableRenderContext","jsx","Button","classNames"],"mappings":";;;;AAgCA,MAAMA,IAAsB,CAACC,MAAoC;AAC7D,QAAM,EAAE,UAAAC,IAAW,IAAO,UAAAC,IAAW,IAAO,SAAAC,GAAS,WAAAC,GAAW,GAAGC,EAAA,IAAmBL,GAEhFM,IAAgBC,EAAA;AAEtB,SAAID,MACAA,EAAc,YAAY,oBAAoB,KAI9C,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGJ;AAAA,MACJ,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,UAAQ;AAAA,MACR,UAAAH;AAAA,MACA,UAAUD,IAAW,wBAAwB;AAAA,MAC7C,WAAWS,EAAW,yBAAyBN,CAAS;AAAA,MACxD,SAAAD;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/components/table/TableFooter.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { TableHtmlAttributes } from './Table.types';
+export type TableFooterProps = TableHtmlAttributes & {
+    /**
+     * The footer content.
+     *
+     * Use `TableColumn` children for cell-based footers, or arbitrary content
+     * for a full-width footer row.
+     */
+    children?: ReactNode;
+    /**
+     * Optional class names for footer row.
+     */
+    className?: string;
+};
+declare const TableFooter: (props: TableFooterProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TableFooter;

package/components/table/TableFooter.js

@@ -0,0 +1,52 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useRef as p } from "react";
+import f from "../../utils/classNames.js";
+import w from "./render/footer/TableFooterContent.js";
+import { useOptionalTableInteractionContext as x } from "./context/TableInteractionContext.js";
+import { useOptionalTableLayoutContext as F } from "./context/TableLayoutContext.js";
+import { useOptionalTableRenderConfigContext as T } from "./context/TableRenderConfigContext.js";
+import { TableSectionContext as R, TableRowContext as v } from "./context/TableStructureContext.js";
+import { useOptionalTableRenderContext as g } from "./context/TableRenderContext.js";
+const L = (u) => {
+  const { children: n, className: m, ...d } = u, l = T(), e = g(), a = x(), s = F(), t = p(0);
+  if (t.current = 0, !l || !e || !a || !s || e.columns.length === 0 || !l.isTableView)
+    return null;
+  const C = e.columns.length + (a.showSelectionColumn ? 1 : 0), i = e.hasFooterCells !== !1, b = !i;
+  return e.renderDraft.hasFooter = !0, e.renderDraft.hasFooterCells = !1, /* @__PURE__ */ o(
+    "div",
+    {
+      ...d,
+      className: f("table-footer", b && "table-footer-full-width"),
+      role: "rowgroup",
+      children: /* @__PURE__ */ o(
+        "div",
+        {
+          className: f("table-row table-row-footer", m),
+          role: "row",
+          ref: s.tableFooterRowRef,
+          children: i ? /* @__PURE__ */ o(R.Provider, { value: "footer", children: /* @__PURE__ */ o(
+            v.Provider,
+            {
+              value: {
+                nextColumnIndex: (r, c = 1) => {
+                  if (r !== void 0 && r >= 0)
+                    return t.current = r + c, r;
+                  const h = t.current;
+                  return t.current += c, h;
+                },
+                rowData: {},
+                rowId: "__footer__",
+                rowIndex: -1
+              },
+              children: n
+            }
+          ) }) : /* @__PURE__ */ o(w, { columnCount: C, content: n })
+        }
+      )
+    }
+  );
+};
+export {
+  L as default
+};
+//# sourceMappingURL=TableFooter.js.map

package/components/table/TableFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFooter.js","sources":["../../../src/components/table/TableFooter.tsx"],"sourcesContent":["import { useRef, type ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport type { TableHtmlAttributes } from './Table.types';\nimport TableFooterContent from './render/footer/TableFooterContent';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableLayoutContext } from './context/TableLayoutContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport { TableRowContext, TableSectionContext } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableFooterProps = TableHtmlAttributes & {\n    /**\n     * The footer content.\n     *\n     * Use `TableColumn` children for cell-based footers, or arbitrary content\n     * for a full-width footer row.\n     */\n    children?: ReactNode;\n\n    /**\n     * Optional class names for footer row.\n     */\n    className?: string;\n};\n\nconst TableFooter = (props: TableFooterProps) => {\n    const { children, className, ...remainingProps } = props;\n\n    const renderConfigContext = useOptionalTableRenderConfigContext();\n    const renderContext = useOptionalTableRenderContext();\n    const interactionContext = useOptionalTableInteractionContext();\n    const layoutContext = useOptionalTableLayoutContext();\n\n    const cellIndexRef = useRef(0);\n    cellIndexRef.current = 0;\n\n    if (\n        !renderConfigContext ||\n        !renderContext ||\n        !interactionContext ||\n        !layoutContext ||\n        renderContext.columns.length === 0\n    ) {\n        return null;\n    }\n\n    if (!renderConfigContext.isTableView) {\n        return null;\n    }\n\n    const columnCount = renderContext.columns.length + (interactionContext.showSelectionColumn ? 1 : 0);\n    const shouldRenderFooterCells = renderContext.hasFooterCells !== false;\n    const isFullWidthFooter = !shouldRenderFooterCells;\n\n    renderContext.renderDraft.hasFooter = true;\n    renderContext.renderDraft.hasFooterCells = false;\n\n    return (\n        <div\n            {...remainingProps}\n            className={classNames('table-footer', isFullWidthFooter && 'table-footer-full-width')}\n            role='rowgroup'\n        >\n            <div\n                className={classNames('table-row table-row-footer', className)}\n                role='row'\n                ref={layoutContext.tableFooterRowRef}\n            >\n                {shouldRenderFooterCells ? (\n                    <TableSectionContext.Provider value='footer'>\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                                rowData: {},\n                                rowId: '__footer__',\n                                rowIndex: -1,\n                            }}\n                        >\n                            {children}\n                        </TableRowContext.Provider>\n                    </TableSectionContext.Provider>\n                ) : (\n                    <TableFooterContent columnCount={columnCount} content={children} />\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default TableFooter;\n"],"names":["TableFooter","props","children","className","remainingProps","renderConfigContext","useOptionalTableRenderConfigContext","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","layoutContext","useOptionalTableLayoutContext","cellIndexRef","useRef","columnCount","shouldRenderFooterCells","isFullWidthFooter","jsx","classNames","TableSectionContext","TableRowContext","explicitColumnIndex","span","nextIndex","TableFooterContent"],"mappings":";;;;;;;;;AA0BA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,MAAmBH,GAE7CI,IAAsBC,EAAA,GACtBC,IAAgBC,EAAA,GAChBC,IAAqBC,EAAA,GACrBC,IAAgBC,EAAA,GAEhBC,IAAeC,EAAO,CAAC;AAa7B,MAZAD,EAAa,UAAU,GAGnB,CAACR,KACD,CAACE,KACD,CAACE,KACD,CAACE,KACDJ,EAAc,QAAQ,WAAW,KAKjC,CAACF,EAAoB;AACrB,WAAO;AAGX,QAAMU,IAAcR,EAAc,QAAQ,UAAUE,EAAmB,sBAAsB,IAAI,IAC3FO,IAA0BT,EAAc,mBAAmB,IAC3DU,IAAoB,CAACD;AAE3B,SAAAT,EAAc,YAAY,YAAY,IACtCA,EAAc,YAAY,iBAAiB,IAGvC,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGd;AAAA,MACJ,WAAWe,EAAW,gBAAgBF,KAAqB,yBAAyB;AAAA,MACpF,MAAK;AAAA,MAEL,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWC,EAAW,8BAA8BhB,CAAS;AAAA,UAC7D,MAAK;AAAA,UACL,KAAKQ,EAAc;AAAA,UAElB,cACG,gBAAAO,EAACE,EAAoB,UAApB,EAA6B,OAAM,UAChC,UAAA,gBAAAF;AAAA,YAACG,EAAgB;AAAA,YAAhB;AAAA,cACG,OAAO;AAAA,gBACH,iBAAiB,CAACC,GAAqBC,IAAO,MAAM;AAChD,sBAAID,MAAwB,UAAaA,KAAuB;AAC5D,2BAAAT,EAAa,UAAUS,IAAsBC,GACtCD;AAGX,wBAAME,IAAYX,EAAa;AAC/B,yBAAAA,EAAa,WAAWU,GACjBC;AAAA,gBACX;AAAA,gBACA,SAAS,CAAA;AAAA,gBACT,OAAO;AAAA,gBACP,UAAU;AAAA,cAAA;AAAA,cAGb,UAAAtB;AAAA,YAAA;AAAA,UAAA,GAET,IAEA,gBAAAgB,EAACO,GAAA,EAAmB,aAAAV,GAA0B,SAASb,EAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAEzE;AAAA,EAAA;AAGZ;"}

package/components/table/TableGroupFooterRow.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { TableHtmlAttributes } from './Table.types';
+export type TableGroupFooterRowProps = TableHtmlAttributes & {
+    /**
+     * The content of the full-width group footer row.
+     */
+    children?: ReactNode;
+    /**
+     * Optional class names only for this group footer row.
+     */
+    className?: string;
+    /**
+     * Disable table hover styling for this row.
+     */
+    noHover?: boolean;
+};
+declare const TableGroupFooterRow: (props: TableGroupFooterRowProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TableGroupFooterRow;

package/components/table/TableGroupFooterRow.js

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

package/components/table/TableGroupFooterRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableGroupFooterRow.js","sources":["../../../src/components/table/TableGroupFooterRow.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 TableGroupFooterRowProps = TableHtmlAttributes & {\n    /**\n     * The content of the full-width group footer row.\n     */\n    children?: ReactNode;\n\n    /**\n     * Optional class names only for this group footer row.\n     */\n    className?: string;\n\n    /**\n     * Disable table hover styling for this row.\n     */\n    noHover?: boolean;\n};\n\nconst TableGroupFooterRow = (props: TableGroupFooterRowProps) => {\n    const { children, className, noHover, ...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('table-row', 'table-row-group-footer', noHover && 'table-row-no-hover', className)}\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-footer-${rowIndex}`,\n        rowIndex,\n        kind: 'group-footer',\n        render: () => rowNode,\n    });\n\n    return renderContext.isRegisteringBodyRows ? null : rowNode;\n};\n\nexport default TableGroupFooterRow;\n"],"names":["TableGroupFooterRow","props","children","className","noHover","remainingProps","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","section","useOptionalTableSection","bodyContext","useTableBodyContext","rowIndex","columnCount","rowNode","jsx","classNames"],"mappings":";;;;;AAyBA,MAAMA,IAAsB,CAACC,MAAoC;AAC7D,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,SAAAC,GAAS,GAAGC,MAAmBJ,GAEtDK,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,EAAW,aAAa,0BAA0Bd,KAAW,sBAAsBD,CAAS;AAAA,MACvG,cAAYW;AAAA,MACZ,MAAK;AAAA,MAEL,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,+BAA8B,MAAK,QAAO,gBAAcF,GACnE,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAf,GAAS,EAAA,CAClD;AAAA,IAAA;AAAA,EAAA;AAIR,SAAAI,EAAc,YAAY,SAAS,KAAK;AAAA,IACpC,OAAO,gBAAgBQ,CAAQ;AAAA,IAC/B,UAAAA;AAAA,IACA,MAAM;AAAA,IACN,QAAQ,MAAME;AAAA,EAAA,CACjB,GAEMV,EAAc,wBAAwB,OAAOU;AACxD;"}

package/components/table/TableGroupRow.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { TableHtmlAttributes } from './Table.types';
+export type TableGroupRowProps = TableHtmlAttributes & {
+    /**
+     * The content of the full-width group row.
+     */
+    children?: ReactNode;
+    /**
+     * Keeps the group row sticky at the top of a scrollable table body.
+     *
+     * @default false
+     */
+    sticky?: boolean;
+    /**
+     * Optional class names only for this group row.
+     */
+    className?: string;
+    /**
+     * Disable table hover styling for this row.
+     */
+    noHover?: boolean;
+};
+declare const TableGroupRow: (props: TableGroupRowProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TableGroupRow;

package/components/table/TableGroupRow.js

@@ -0,0 +1,36 @@
+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 { 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)
+    return null;
+  const e = r.nextRowIndex(), p = o.columns.length + (n.showSelectionColumn ? 1 : 0), l = /* @__PURE__ */ t(
+    "div",
+    {
+      ...u,
+      className: b(
+        "table-row",
+        "table-row-group",
+        d && "table-row-group-sticky",
+        i && "table-row-no-hover",
+        c
+      ),
+      "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 }) })
+    }
+  );
+  return o.renderDraft.bodyRows.push({
+    rowId: `group-${e}`,
+    rowIndex: e,
+    kind: "group",
+    render: () => l
+  }), o.isRegisteringBodyRows ? null : l;
+};
+export {
+  v as default
+};
+//# sourceMappingURL=TableGroupRow.js.map

package/components/table/TableGroupRow.js.map

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

package/components/table/TableHeader.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { TableHtmlAttributes, TableRowData } from './Table.types';
+export type TableHeaderProps<RowType extends TableRowData> = TableHtmlAttributes & {
+    /**
+     * Additional class names for the header grid wrapper.
+     */
+    className?: string;
+    /**
+     * Table header content.
+     */
+    children?: ReactNode;
+};
+declare const TableHeader: <RowType extends TableRowData = TableRowData>(props: TableHeaderProps<RowType>) => import("react/jsx-runtime").JSX.Element | null;
+export default TableHeader;