@snack-uikit/table 0.31.1 → 0.32.0

package/src/components/Table/styles.module.scss

@@ -14,20 +14,13 @@
   box-sizing: border-box;
   width: 100%;
   height: auto;
-  max-height: calc(
-    (var(--page-size, 10) * #{table.$size-table-line-height}) + #{table.$size-table-line-height} + #{table.$border-width-table} * 2
-  );
 
   background-color: table.$sys-neutral-background1-level;
   border-color: table.$sys-neutral-background1-level;
   border-style: solid;
-}
 
-.scrollWrapper {
   &[data-outline] {
-    .table {
-      border-color: table.$sys-neutral-decor-default;
-    }
+    border-color: table.$sys-neutral-decor-default;
   }
 }
 
@@ -59,7 +52,10 @@
 }
 
 .wrapper {
+  display: grid;
+  grid-template-rows: max-content minmax(auto, 100%) max-content;
   max-width: 100%;
+  max-height: 100%;
 }
 
 .scrollStub {

package/src/components/types.ts

@@ -80,6 +80,9 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
   /** Включить нечеткий поиск  */
   enableFuzzySearch?: boolean;
 
+  /* Включает автоматическую высоту строк */
+  rowAutoHeight?: boolean;
+
   /** Максимальное кол-во строк на страницу @default 10 */
   pageSize?: number;
 

package/src/helperComponents/Cells/BodyCell/BodyCell.tsx

@@ -9,9 +9,10 @@ import styles from './styles.module.scss';
 
 type BodyCellProps<TData> = Omit<CellProps, 'style' | 'children'> & {
   cell: TableCell<TData, unknown>;
+  rowAutoHeight?: boolean;
 };
 
-export function BodyCell<TData>({ cell, className, ...props }: BodyCellProps<TData>) {
+export function BodyCell<TData>({ cell, className, rowAutoHeight, ...props }: BodyCellProps<TData>) {
   const columnDef: ColumnDefinition<TData> = cell.column.columnDef;
 
   const style = useCellSizes(cell);
@@ -21,6 +22,7 @@ export function BodyCell<TData>({ cell, className, ...props }: BodyCellProps<TDa
       {...props}
       style={style}
       className={cn(styles.tableBodyCell, className, columnDef.cellClassName)}
+      data-row-auto-height={rowAutoHeight || undefined}
       data-align={columnDef.align}
       data-no-padding={columnDef.noBodyCellPadding || undefined}
       data-column-id={cell.column.id}

package/src/helperComponents/Cells/BodyCell/styles.module.scss

@@ -1,4 +1,4 @@
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table' as styles-tokens-table;
 
 .tableBodyCell {
   @include styles-tokens-table.composite-var(styles-tokens-table.$table-cells);
@@ -12,4 +12,9 @@
   &[data-no-padding] {
     padding: 0;
   }
+
+  &:not([data-row-auto-height]) {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
 }

package/src/helperComponents/Cells/CopyCell/CopyCell.tsx

@@ -41,7 +41,7 @@ export function CopyCell({ value }: CopyCellProps) {
         data-test-id='button-copy-value'
         type='button'
         icon={isChecked ? <CheckSVG /> : <CopySVG />}
-        size='s'
+        size='xs'
         className={styles.copyButton}
       />
     </div>

package/src/helperComponents/Cells/CopyCell/styles.module.scss

@@ -16,7 +16,7 @@
   }
 
   &:hover {
-    margin-right: calc(0px - calc(styles-theme-variables.$dimension-4m + styles-theme-variables.$dimension-050m));
+    margin-right: calc(0px - calc(#{styles-theme-variables.$dimension-4m} + #{styles-theme-variables.$dimension-050m}));
 
     .copyButton {
       display: inline-flex;

package/src/helperComponents/Cells/HeaderCell/HeaderCell.tsx

@@ -15,9 +15,10 @@ import styles from './styles.module.scss';
 type HeaderCellProps<TData> = Omit<CellProps, 'align' | 'children' | 'onClick' | 'style'> & {
   header: Header<TData, unknown>;
   pinPosition?: ColumnPinPosition;
+  rowAutoHeight?: boolean;
 };
 
-export function HeaderCell<TData>({ header, pinPosition, className }: HeaderCellProps<TData>) {
+export function HeaderCell<TData>({ header, pinPosition, className, rowAutoHeight }: HeaderCellProps<TData>) {
   const cellRef = useRef<HTMLDivElement>(null);
   const isSortable = header.column.getCanSort();
   const isResizable = header.column.getCanResize();
@@ -51,6 +52,7 @@ export function HeaderCell<TData>({ header, pinPosition, className }: HeaderCell
       data-header-id={header.id}
       data-resizing={isResizing || undefined}
       data-pin-position={pinPosition || undefined}
+      data-row-auto-height={rowAutoHeight || undefined}
       role='columnheader'
       className={cn(styles.tableHeaderCell, className, columnDef.headerClassName)}
       ref={cellRef}
@@ -58,7 +60,11 @@ export function HeaderCell<TData>({ header, pinPosition, className }: HeaderCell
       <div className={styles.tableHeaderCellMain}>
         {columnDef.header && (
           <div className={styles.tableHeaderCellName}>
-            <TruncateString text={flexRender(columnDef.header, header.getContext()) as string} />
+            {rowAutoHeight ? (
+              flexRender(columnDef.header, header.getContext())
+            ) : (
+              <TruncateString text={flexRender(columnDef.header, header.getContext()) as string} />
+            )}
           </div>
         )}
 

package/src/helperComponents/Cells/HeaderCell/styles.module.scss

@@ -140,6 +140,15 @@
       }
     }
   }
+
+  &[data-row-auto-height] {
+    align-items: flex-end;
+  }
+
+  &:not([data-row-auto-height]) {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
 }
 
 .tableHeaderCellMain {

package/src/helperComponents/Cells/StatusCell/styles.module.scss

@@ -10,7 +10,7 @@ $appearances: 'primary', 'neutral', 'red', 'orange', 'yellow', 'green', 'blue',
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  padding-right: styles-tokens-table.$space-table-cell-padding;
+  padding-right: styles-tokens-table.$space-table-cell-padding-horizontal;
 
   &[data-no-label] {
     padding-right: 0;
@@ -35,6 +35,7 @@ $appearances: 'primary', 'neutral', 'red', 'orange', 'yellow', 'green', 'blue',
 
   box-sizing: border-box;
   width: styles-tokens-table.$size-table-cell-status-indicator-horizontal;
+  height: calc(100% + #{styles-tokens-table.$border-width-table} * 2);
 
   background-color: inherit;
 
@@ -50,6 +51,7 @@ $appearances: 'primary', 'neutral', 'red', 'orange', 'yellow', 'green', 'blue',
 
     box-sizing: border-box;
     width: 100%;
+    height: 100%;
   }
 
   @each $appearance in $appearances {
@@ -65,15 +67,15 @@ $appearances: 'primary', 'neutral', 'red', 'orange', 'yellow', 'green', 'blue',
   
     &::after {
       content: '';
-  
+
       position: absolute;
       left:0;
-      
+
       width: 100%;
       height: auto;
-      
+
       background-color: styles-tokens-table.$sys-neutral-decor-default;
-  
+
       animation: loading ease-in-out 0.8s infinite alternate;
     }
   }
@@ -82,14 +84,14 @@ $appearances: 'primary', 'neutral', 'red', 'orange', 'yellow', 'green', 'blue',
 @keyframes loading {
   0% {
     top: 0;
-    bottom: calc(100% - styles-tokens-table.$dimension-050m);
+    bottom: calc(100% - #{styles-tokens-table.$dimension-050m});
   }
   50% {
     top: 0;
     bottom: 0;
   }
   100% {
-    top: calc(100% - styles-tokens-table.$dimension-050m);
+    top: calc(100% - #{styles-tokens-table.$dimension-050m});
     bottom: 0;
   }
 }

package/src/helperComponents/Cells/TreeCell/TreeCell.tsx

@@ -33,7 +33,7 @@ type TreeColumnDef = BaseTreeColumnDef & {
 
 type TreeColumnDefWithDescription<TData> = BaseTreeColumnDef & {
   /** Заголовок колонки */
-  renderDescription?: (cellValue: string, row: TData) => string;
+  renderDescription?(cellValue: string, row: TData): string;
   /** Рендер функция заголовка колонки */
   header?: ColumnDefinition<TData>['header'];
 };
@@ -62,16 +62,17 @@ export function getTreeColumnDef<TData>({
       skipOnExport: false,
     },
     enableSorting: false,
-    header: header,
-    cell: function Cell<TData>({ row, cell }: CellContext<TData, unknown>) {
+    header,
+    cell: function TreeCell<TData>({ row, cell }: CellContext<TData, unknown>) {
       const isExpanded = row.getIsExpanded();
       const isExpandable = row.getCanExpand();
       const isMultiSelect = row.getCanMultiSelect();
       const parent = row.getParentRow();
       const isRowsSelectionEnabled = row.getCanSelect();
-      const isAlSubRowsSelected = row.getIsAllSubRowsSelected();
+      const isAllSubRowsSelected = row.getIsAllSubRowsSelected();
       const isSomeSubRowSelected = row.getIsSomeSelected();
       const isRowSelected = row.getIsSelected();
+      const isLastChildRow = parent?.subRows.at(-1)?.id === row.id;
       const depth = row.depth;
       const { ref } = useCellResize(TREE_CELL_ID, cell);
 
@@ -89,56 +90,59 @@ export function getTreeColumnDef<TData>({
         });
       }, [row, depth]);
 
-      const lines = new Array(depth)
-        .fill('')
-        .map((_, index) => (
-          <TreeLine
-            key={index}
-            visible={linesVisibilityByIndex.at(index)}
-            className={index !== 0 ? styles.line : styles.firstLine}
-          />
-        ));
+      const lines = useMemo(
+        () =>
+          Array.from({ length: depth }, (_, index) => (
+            <TreeLine
+              key={index}
+              visible={linesVisibilityByIndex.at(index)}
+              className={index !== 0 ? styles.line : styles.firstLine}
+              halfHeight={index === depth - 1 && isLastChildRow}
+            />
+          )),
+        [depth, linesVisibilityByIndex, isLastChildRow],
+      );
 
       useEffect(() => {
-        if (!isMultiSelect || !isExpandable) {
+        if (!isMultiSelect || !isExpandable || !isRowsSelectionEnabled) {
           return;
         }
-        if (isAlSubRowsSelected && !isRowSelected) {
+
+        if (isAllSubRowsSelected && !isRowSelected) {
           row.toggleSelected(true, { selectChildren: false });
           return;
         }
-        if (!isAlSubRowsSelected && isRowSelected && !isSomeSubRowSelected) {
+
+        if (isRowSelected && !isAllSubRowsSelected && isSomeSubRowSelected) {
           row.toggleSelected(false, { selectChildren: false });
           return;
         }
-      }, [isAlSubRowsSelected, isSomeSubRowSelected, row, isRowSelected, isMultiSelect, isExpandable]);
-
-      const recursiveToggleSubRows = useCallback(
-        (row: Row<TData>, value?: boolean, opts?: { selectChildren?: boolean }) => {
-          row.toggleSelected(value, opts);
-          if (row.subRows.length > 0) {
-            row.subRows.forEach(subRow => {
-              recursiveToggleSubRows(subRow, value, opts);
-            });
-          }
-        },
-        [],
-      );
-
-      const toggleClickHandler = useCallback(
-        (event: React.MouseEvent) => {
+      }, [
+        isAllSubRowsSelected,
+        isSomeSubRowSelected,
+        row,
+        isRowSelected,
+        isMultiSelect,
+        isExpandable,
+        isRowsSelectionEnabled,
+      ]);
+
+      const toggleClickHandler: MouseEventHandler<HTMLElement> = useCallback(
+        event => {
           event.stopPropagation();
-          if (isMultiSelect && isSomeSubRowSelected && !isRowSelected) {
-            recursiveToggleSubRows(row, false, { selectChildren: true });
-            return;
-          }
-          if (!isMultiSelect) {
-            row.toggleSelected(!isRowSelected, { selectChildren: false });
+
+          if (isMultiSelect) {
+            const shouldToggleOn = !isAllSubRowsSelected && !isRowSelected;
+            const selectChildren = isAllSubRowsSelected || isSomeSubRowSelected || shouldToggleOn;
+
+            row.toggleSelected(shouldToggleOn, { selectChildren });
+
             return;
           }
-          row.toggleSelected();
+
+          row.toggleSelected(!isRowSelected, { selectChildren: false });
         },
-        [isRowSelected, row, isSomeSubRowSelected, isMultiSelect, recursiveToggleSubRows],
+        [isMultiSelect, row, isAllSubRowsSelected, isSomeSubRowSelected, isRowSelected],
       );
 
       const chevronClickHandler: MouseEventHandler<HTMLElement> = useCallback(
@@ -176,7 +180,12 @@ export function getTreeColumnDef<TData>({
                 data-expanded={isExpanded || undefined}
               />
             )}
-            <div className={styles.treeNodeContent}>
+            <div
+              className={styles.treeNodeContent}
+              data-disabled={!isRowsSelectionEnabled || undefined}
+              data-selected={isRowSelected || undefined}
+              data-multiselect={isMultiSelect || undefined}
+            >
               {showToggle && (
                 <div tabIndex={-1} className={styles.treeCheckboxWrap}>
                   {isMultiSelect ? (
@@ -185,7 +194,7 @@ export function getTreeColumnDef<TData>({
                       disabled={!isRowsSelectionEnabled}
                       checked={isRowSelected}
                       data-test-id={TEST_IDS.tree.checkbox}
-                      indeterminate={isSomeSubRowSelected && !isAlSubRowsSelected}
+                      indeterminate={isSomeSubRowSelected && !isAllSubRowsSelected}
                     />
                   ) : (
                     <Radio

package/src/helperComponents/Cells/TreeCell/TreeLine/TreeLine.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import cn from 'classnames';
 
 import styles from './styles.module.scss';
 
@@ -12,7 +12,7 @@ export type TreeLineProps = {
 export function TreeLine({ halfHeight, horizontal, visible, className }: TreeLineProps) {
   return (
     <div
-      className={classNames(styles.treeLine, className)}
+      className={cn(styles.treeLine, className)}
       data-horizontal={horizontal || undefined}
       data-half-height={halfHeight || undefined}
       data-visible={visible || undefined}

package/src/helperComponents/Cells/TreeCell/TreeLine/styles.module.scss

@@ -1,22 +1,22 @@
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table' as table;
 
 .treeLine {
   width: 1px;
-  height: styles-tokens-table.$size-markdown-table-cell-height;
+  height: 100%;
   opacity: 0;
-  &[data-visible] {
-      opacity: 1;
-      background-color: styles-tokens-table.$sys-neutral-decor-default;
 
+  &[data-visible] {
+    opacity: 1;
+    background-color: table.$sys-neutral-decor-default;
   }
 
   &[data-half-height] {
-      align-self: start;
-      height:calc(styles-tokens-table.$size-markdown-table-cell-height / 2);
+    align-self: start;
+    height: 50%;
   }
 
   &[data-horizontal] {
-    width: calc(styles-tokens-table.$size-markdown-table-cell-height / 2);
+    width: calc(#{table.$size-markdown-table-cell-height} / 2);
     height: 1px
   }
 }

package/src/helperComponents/Cells/TreeCell/styles.module.scss

@@ -2,23 +2,27 @@
 @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table' as table;
 @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tree' as tree;
 
+.treeCellContainer {
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+
+  @include table.composite-var(table.$sans-body-m);
+}
+
 .treeCell {
-    display: flex;
-    align-items: center;
-    justify-content: start;
+  display: flex;
+  align-items: center;
+  justify-content: start;
 
-    width: fit-content;
-    height: table.$size-markdown-table-cell-height;
+  width: fit-content;
+  height: 100%;
 }
 
 .cellUserToggleIcon {
-  cursor: pointer;
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  svg {
-    color: tree.$sys-neutral-text-support;
-  }
 }
 
 .treeNodeContent {
@@ -26,12 +30,13 @@
 
   cursor: pointer;
 
-
   display: flex;
   align-items: center;
 
   box-sizing: border-box;
-  height: table.$size-markdown-table-cell-height;
+  height: 100%;
+
+  color: tree.$sys-neutral-text-support;
 
   &:focus-visible {
     @include element.outline-inside-var(element.$container-focused-s);
@@ -43,64 +48,40 @@
     cursor: default;
   }
 
-  &[aria-disabled='true'] {
+  &[data-disabled] {
     cursor: not-allowed;
-
-    &::before {
-      display: none;
-    }
-
-    .treeNodeTitle, .treeNodeIcon {
-      color: tree.$sys-neutral-text-disabled;
-    }
-  }
-
-  &[aria-selected='true']:not([data-multiselect]) {
-      opacity: tree.$opacity-a008;
-      background-color: tree.$sys-primary-accent-default;
-
-    &:hover {
-        opacity: tree.$opacity-a016;
-    }
+    color: tree.$sys-neutral-text-disabled;
   }
 }
 
 .userContent {
-  cursor: pointer;
   display: flex;
   align-items: center;
-  svg {
-    color: tree.$sys-neutral-text-support;
-  }
 }
-  .treeCellContainer {
-    position: relative;
-    overflow: hidden;
 
-    @include table.composite-var(table.$sans-body-m);
-  }
-  .line {
-    margin-left: calc(#{table.$dimension-4m} + #{table.$dimension-025m});
-  }
-  .firstLine {
-    margin-left: table.$dimension-2m
-  }
-  .cellExpandButton {
-    box-sizing: border-box;
+.line {
+  margin-left: calc(#{table.$dimension-4m} + #{table.$dimension-025m});
+}
 
+.firstLine {
+  margin-left: table.$dimension-2m
+}
 
-    svg {
-      width: element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
-      height: element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
-      transition: transform 0.2s ease;
-    }
+.cellExpandButton {
+  box-sizing: border-box;
+
+  svg {
+    width: element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
+    height: element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
+    transition: transform 0.2s ease;
+  }
 
-    &[data-expanded] {
-      svg {
-        transform: rotate(90deg);
-      }
+  &[data-expanded] {
+    svg {
+      transform: rotate(90deg);
     }
   }
+}
 
 .treeCheckboxWrap {
   @include tree.composite-var(tree.$tree-item-toggle-wrap);

package/src/helperComponents/Rows/BodyRow.tsx

@@ -6,7 +6,7 @@ import { BodyCell } from '../Cells';
 import { RowContext } from '../contexts';
 import { useRowCells } from '../hooks';
 import { PinnedCells } from './PinnedCells';
-import { Row } from './Row';
+import { Row, RowProps } from './Row';
 import styles from './styles.module.scss';
 
 export type RowInfo<TData> = {
@@ -18,12 +18,12 @@ export type RowInfo<TData> = {
 
 export type RowClickHandler<TData> = (e: MouseEvent<HTMLDivElement>, row: RowInfo<TData>) => void;
 
-export type BodyRowProps<TData> = {
+export type BodyRowProps<TData> = Pick<RowProps, 'rowAutoHeight'> & {
   row: TableRow<TData>;
   onRowClick?: RowClickHandler<TData>;
 };
 
-export function BodyRow<TData>({ row, onRowClick }: BodyRowProps<TData>) {
+export function BodyRow<TData>({ row, onRowClick, rowAutoHeight }: BodyRowProps<TData>) {
   const { pinnedLeft, pinnedRight, unpinned } = useRowCells(row);
 
   const [dropListOpened, setDropListOpen] = useState(false);
@@ -56,23 +56,24 @@ export function BodyRow<TData>({ row, onRowClick }: BodyRowProps<TData>) {
         data-test-id={TEST_IDS.bodyRow}
         data-row-id={row.id}
         className={styles.bodyRow}
+        rowAutoHeight={rowAutoHeight}
       >
         {pinnedLeft && (
           <PinnedCells position={COLUMN_PIN_POSITION.Left}>
             {pinnedLeft.map(cell => (
-              <BodyCell key={cell.id} cell={cell} />
+              <BodyCell key={cell.id} cell={cell} rowAutoHeight={rowAutoHeight} />
             ))}
           </PinnedCells>
         )}
 
         {unpinned.map(cell => (
-          <BodyCell key={cell.id} cell={cell} />
+          <BodyCell key={cell.id} cell={cell} rowAutoHeight={rowAutoHeight} />
         ))}
 
         {pinnedRight && (
           <PinnedCells position={COLUMN_PIN_POSITION.Right}>
             {pinnedRight.map(cell => (
-              <BodyCell key={cell.id} cell={cell} />
+              <BodyCell key={cell.id} cell={cell} rowAutoHeight={rowAutoHeight} />
             ))}
           </PinnedCells>
         )}

package/src/helperComponents/Rows/HeaderRow.tsx

@@ -2,32 +2,41 @@ import { COLUMN_PIN_POSITION, TEST_IDS } from '../../constants';
 import { HeaderCell } from '../Cells';
 import { useHeaderGroups } from '../hooks';
 import { PinnedCells } from './PinnedCells';
-import { Row } from './Row';
+import { Row, RowProps } from './Row';
 import styles from './styles.module.scss';
 
-export function HeaderRow() {
+export function HeaderRow({ rowAutoHeight }: Pick<RowProps, 'rowAutoHeight'>) {
   const { leftPinned, unpinned, rightPinned } = useHeaderGroups();
 
   return (
-    <Row className={styles.tableHeader} data-test-id={TEST_IDS.headerRow}>
+    <Row className={styles.tableHeader} data-test-id={TEST_IDS.headerRow} rowAutoHeight={rowAutoHeight}>
       {leftPinned && (
         <PinnedCells position={COLUMN_PIN_POSITION.Left}>
           {leftPinned.map(headerGroup =>
             headerGroup.headers.map(header =>
-              header.isPlaceholder ? null : <HeaderCell key={header.id} header={header} />,
+              header.isPlaceholder ? null : (
+                <HeaderCell key={header.id} header={header} rowAutoHeight={rowAutoHeight} />
+              ),
             ),
           )}
         </PinnedCells>
       )}
 
-      {unpinned.map(headerGroup => headerGroup.headers.map(header => <HeaderCell key={header.id} header={header} />))}
+      {unpinned.map(headerGroup =>
+        headerGroup.headers.map(header => <HeaderCell key={header.id} header={header} rowAutoHeight={rowAutoHeight} />),
+      )}
 
       {rightPinned && (
         <PinnedCells position={COLUMN_PIN_POSITION.Right}>
           {rightPinned.map(headerGroup =>
             headerGroup.headers.map(header =>
               header.isPlaceholder ? null : (
-                <HeaderCell key={header.id} header={header} pinPosition={COLUMN_PIN_POSITION.Right} />
+                <HeaderCell
+                  key={header.id}
+                  header={header}
+                  pinPosition={COLUMN_PIN_POSITION.Right}
+                  rowAutoHeight={rowAutoHeight}
+                />
               ),
             ),
           )}

package/src/helperComponents/Rows/Row.tsx

@@ -4,16 +4,23 @@ import { MouseEvent, ReactNode } from 'react';
 import { DataAttributes } from '../types';
 import styles from './styles.module.scss';
 
-type RowProps = {
+export type RowProps = {
   children: ReactNode;
   onClick?(e: MouseEvent<HTMLDivElement>): void;
   className?: string;
+  rowAutoHeight?: boolean;
 } & DataAttributes;
 
-export function Row({ onClick, children, className, ...attributes }: RowProps) {
+export function Row({ onClick, children, className, rowAutoHeight, ...attributes }: RowProps) {
   return (
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    <div onClick={onClick} className={cn(styles.tableRow, className)} role='row' {...attributes}>
+    <div
+      onClick={onClick}
+      className={cn(styles.tableRow, className)}
+      data-auto-height={rowAutoHeight || undefined}
+      role='row'
+      {...attributes}
+    >
       {children}
     </div>
   );