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

package/components/table/Table.types.d.ts

@@ -7,6 +7,7 @@ export type TableViewType = 'TABLE' | 'SINGLE_CARD' | 'MULTI_CARDS';
 export type TableSortDirection = 'asc' | 'desc';
 export type TableRowId = string | number;
 export type TableRowData = Record<string, unknown>;
+export type TableStickyReference = 'applicationLayout' | 'container';
 export type TableCardsStyleSettings = {
     /**
      * Minimum card width for `MULTI_CARDS` view.
@@ -33,6 +34,16 @@ export type TableCardsStyleSettings = {
      */
     contentClassName?: string;
 };
+export type TableResponsiveBreakpoint = {
+    /**
+     * Switch to `MULTI_CARDS` below this rendered table width.
+     */
+    cards?: number | string;
+    /**
+     * Switch to `SINGLE_CARD` below this rendered table width.
+     */
+    list?: number | string;
+};
 /**
  * High-level animation settings for expanded table rows.
  *
@@ -170,6 +181,7 @@ export type TableColumn<RowType extends TableRowData> = TableColumnDefinition<Ro
 export type TableRowClassName<RowType extends TableRowData> = string | ((row: RowType, rowIndex: number) => string);
 export type TableCellClassName<RowType extends TableRowData> = (row: RowType, column: TableColumnDefinition<RowType>, rowIndex: number, columnIndex: number) => string;
 export type TableRowAnimationProps<RowType extends TableRowData> = MotionProps | ((row: RowType, rowIndex: number) => MotionProps);
+export type TableRowSelectable<RowType extends TableRowData> = (row: RowType, rowIndex: number) => boolean;
 export type TableProps<RowType extends TableRowData> = Omit<HTMLAttributes<HTMLDivElement>, 'draggable' | 'onClick'> & {
     /**
      * Row key accessor for resolving a stable unique row id.
@@ -192,6 +204,24 @@ export type TableProps<RowType extends TableRowData> = Omit<HTMLAttributes<HTMLD
      * Card width configuration for `MULTI_CARDS` view.
      */
     cardsStyle?: TableCardsStyleSettings;
+    /**
+     * Automatically switches `TABLE` view when the rendered table width changes.
+     *
+     * Use `cards` to switch to `MULTI_CARDS` and `list` to switch to `SINGLE_CARD`.
+     * The object may contain either key or both.
+     *
+     * Accepts pixel numbers or CSS length values such as `720`, `'720px'`, or `'50vw'`.
+     */
+    responsiveBreakpoint?: TableResponsiveBreakpoint;
+    /**
+     * Called whenever the effective rendered view changes after applying responsive breakpoint logic.
+     *
+     * This can differ from `viewType` when `responsiveBreakpoint` forces an automatic switch.
+     * In controlled setups, you can use this callback to keep the external `viewType` state in sync.
+     *
+     * Only used when `responsiveBreakpoint` is provided.
+     */
+    onViewTypeChange?: (viewType: TableViewType) => void;
     /**
      * Compact row/cell spacing like old `table-condensed`.
      *
@@ -255,6 +285,17 @@ export type TableProps<RowType extends TableRowData> = Omit<HTMLAttributes<HTMLD
      * @default '1px'
      */
     rowSeparatorWidth?: number | string;
+    /**
+     * Controls which scroll context sticky headers and sticky rows align to in `TABLE` view.
+     *
+     * Use `applicationLayout` when the page scroll happens in the default app body.
+     * Use `container` when the table sits inside its own explicit overflow container.
+     *
+     * Sticky rows inside `TableBody maxHeight` continue to pin within that internal body scroller.
+     *
+     * @default 'applicationLayout'
+     */
+    stickyReference?: TableStickyReference;
     /**
      * Sticky column behavior in `TABLE` view.
      *
@@ -324,6 +365,14 @@ export type TableProps<RowType extends TableRowData> = Omit<HTMLAttributes<HTMLD
      * Called when checkbox selection changes.
      */
     onSelectionChange?: (rowIds: TableRowId[]) => void;
+    /**
+     * Hides selection checkboxes for rows marked with `selectable={false}`.
+     *
+     * Those rows stay interactive for hover, click handling, and active-row state.
+     *
+     * @default false
+     */
+    hideSelectionCheckboxesForExcludedRows?: boolean;
     /**
      * Currently selected row keys for multi-selection use cases.
      */
@@ -333,6 +382,12 @@ export type TableProps<RowType extends TableRowData> = Omit<HTMLAttributes<HTMLD
      * If omitted, the header renders the default select-all checkbox.
      */
     selectionHeaderContent?: ReactNode;
+    /**
+     * Vertical alignment for selection checkboxes in the header and body rows.
+     *
+     * @default 'middle'
+     */
+    selectionCheckboxVerticalAlignment?: TableVerticalAlign;
     /**
      * Controlled column order for drag-reordering.
      *

package/components/table/TableExpandAllGroupsButton.d.ts

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

package/components/table/TableExpandAllGroupsButton.js

@@ -0,0 +1,27 @@
+import { jsx as e } from "react/jsx-runtime";
+import r from "../button/Button.js";
+import p from "../../utils/classNames.js";
+const u = (a) => {
+  const { expanded: l = !1, disabled: s = !1, onClick: o, className: t, ...n } = a;
+  return /* @__PURE__ */ e(
+    r,
+    {
+      ...n,
+      bsStyle: "muted",
+      bsSize: "sm",
+      iconOnly: !0,
+      disabled: s,
+      className: p(
+        "table-expand-all-groups-button",
+        l && "table-expand-all-groups-button-expanded",
+        t
+      ),
+      onClick: o,
+      children: /* @__PURE__ */ e("span", { className: "rioglyph rioglyph-angle-double-down text-size-16" })
+    }
+  );
+};
+export {
+  u as default
+};
+//# sourceMappingURL=TableExpandAllGroupsButton.js.map

package/components/table/TableExpandAllGroupsButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableExpandAllGroupsButton.js","sources":["../../../src/components/table/TableExpandAllGroupsButton.tsx"],"sourcesContent":["import type { MouseEventHandler } from 'react';\n\nimport Button from '../button/Button';\nimport classNames from '../../utils/classNames';\n\nexport type TableExpandAllGroupsButtonProps = {\n    /**\n     * Controls whether all related groups are currently expanded.\n     *\n     * @default false\n     */\n    expanded?: boolean;\n\n    /**\n     * Disables the expand all groups button.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback triggered when the expand all groups 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 TableExpandAllGroupsButton = (props: TableExpandAllGroupsButtonProps) => {\n    const { expanded = false, disabled = false, onClick, className, ...remainingProps } = props;\n\n    return (\n        <Button\n            {...remainingProps}\n            bsStyle='muted'\n            bsSize='sm'\n            iconOnly\n            disabled={disabled}\n            className={classNames(\n                'table-expand-all-groups-button',\n                expanded && 'table-expand-all-groups-button-expanded',\n                className\n            )}\n            onClick={onClick}\n        >\n            <span className='rioglyph rioglyph-angle-double-down text-size-16' />\n        </Button>\n    );\n};\n\nexport default TableExpandAllGroupsButton;\n"],"names":["TableExpandAllGroupsButton","props","expanded","disabled","onClick","className","remainingProps","jsx","Button","classNames"],"mappings":";;;AA+BA,MAAMA,IAA6B,CAACC,MAA2C;AAC3E,QAAM,EAAE,UAAAC,IAAW,IAAO,UAAAC,IAAW,IAAO,SAAAC,GAAS,WAAAC,GAAW,GAAGC,EAAA,IAAmBL;AAEtF,SACI,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGF;AAAA,MACJ,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,UAAQ;AAAA,MACR,UAAAH;AAAA,MACA,WAAWM;AAAA,QACP;AAAA,QACAP,KAAY;AAAA,QACZG;AAAA,MAAA;AAAA,MAEJ,SAAAD;AAAA,MAEA,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,mDAAA,CAAmD;AAAA,IAAA;AAAA,EAAA;AAG/E;"}

package/components/table/TableExpandedRow.d.ts

@@ -9,6 +9,10 @@ export type TableExpandedRowProps<RowType extends TableRowData> = TableHtmlAttri
      * Optional class names only for this expanded row.
      */
     className?: string;
+    /**
+     * Excludes this row from table selection while keeping the row interactive.
+     */
+    selectable?: boolean;
     /**
      * Disable table hover styling for this row.
      */

package/components/table/TableExpandedRow.js

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

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

package/components/table/TableExpanderButton.js

@@ -1,24 +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();
+import d from "../button/Button.js";
+import i from "../../utils/classNames.js";
+import { useOptionalTableRenderContext as m } from "./context/TableRenderContext.js";
+const u = (t) => {
+  const { expanded: n = !1, disabled: a = !1, onClick: o, className: r, ...s } = t, e = m();
   return e && (e.renderDraft.hasExpandableRows = !0), /* @__PURE__ */ l(
-    i,
+    d,
     {
       ...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
+      disabled: a,
+      iconName: "rioglyph-chevron-down",
+      className: i("table-expander-button", n && "table-expander-button-expanded", r),
+      onClick: o
     }
   );
 };
 export {
-  x as default
+  u as default
 };
 //# sourceMappingURL=TableExpanderButton.js.map

package/components/table/TableExpanderButton.js.map

@@ -1 +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;"}
+{"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='rioglyph-chevron-down'\n            className={classNames('table-expander-button', expanded && 'table-expander-button-expanded', 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,UAAS;AAAA,MACT,WAAWQ,EAAW,yBAAyBT,KAAY,kCAAkCG,CAAS;AAAA,MACtG,SAAAD;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/components/table/TableGroupRow.d.ts

@@ -1,12 +1,18 @@
 import { ReactNode } from 'react';
-import { TableHtmlAttributes } from './Table.types';
+import { TableHtmlAttributes, TableRowId } from './Table.types';
 export type TableGroupRowProps = TableHtmlAttributes & {
+    /**
+     * Stable row key for selectable group rows.
+     */
+    id?: TableRowId;
     /**
      * The content of the full-width group row.
      */
     children?: ReactNode;
     /**
-     * Keeps the group row sticky at the top of a scrollable table body.
+     * Keeps the group row sticky at the top of the current table scroll context.
+     * When a sticky `TableHeader` is present, the row stacks below the measured header height.
+     * `TableBody maxHeight` continues to pin the row inside the internal body scroller.
      *
      * @default false
      */
@@ -15,6 +21,14 @@ export type TableGroupRowProps = TableHtmlAttributes & {
      * Optional class names only for this group row.
      */
     className?: string;
+    /**
+     * Includes this group row in table selection.
+     *
+     * Group rows are not selectable by default so existing grouped tables keep their current full-width layout.
+     *
+     * @default false
+     */
+    selectable?: boolean;
     /**
      * Disable table hover styling for this row.
      */