[UIK-3877][data-table] fixed focusing after opening the accordion via mouse

semcore/data-table/CHANGELOG.md

@@ -14,6 +14,7 @@
 
 - Low performance when opening an accordion with a large number of rows.
 - Keyboard interaction after mouse clicking in Safari.
+- The focus did not move to the trigger via `Escape` when opening the accordion with the mouse.
 
 ## [16.4.1] - 2025-10-17
 

semcore/data-table/src/components/AccordionRows/AccordionRows.tsx

@@ -4,6 +4,7 @@ import trottle from '@semcore/core/lib/utils/rafTrottle';
 import React from 'react';
 
 import type { CellRenderProps } from '../Body/Body.types';
+import type { DataTableCellProps } from '../Body/Cell.types';
 import { Row } from '../Body/Row';
 import type { DTRow, DTRows } from '../Body/Row.types';
 import styles from '../Body/style.shadow.css';
@@ -31,6 +32,7 @@ type AccordionRowsProps<Data extends DataTableData, UniqKeyType> = {
     cell: Pick<DTColumn, 'name' | 'fixed'>,
   ) => [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined];
 
+  onCellClick: DataTableCellProps<Data, UniqKeyType>['onClick'];
   renderCell: ((props: CellRenderProps<Data[number], UniqKeyType>) => React.ReactNode | Record<string, any>) | undefined;
   rawData: DataRowItem[];
   shadowVertical: '' | 'end' | 'start' | 'median' | undefined;
@@ -92,6 +94,7 @@ export class AccordionRows<Data extends DataTableData, UniqKeyType> extends Reac
       renderCell,
       rawData,
       limit,
+      onCellClick,
     } = this.props;
 
     return sstyled(styles)(
@@ -133,6 +136,7 @@ export class AccordionRows<Data extends DataTableData, UniqKeyType> extends Reac
               renderCell={renderCell}
               rawData={rawData}
               limit={limit}
+              onCellClick={onCellClick}
             />
           );
         })}

semcore/data-table/src/components/Body/Cell.tsx

@@ -34,9 +34,17 @@ class CellRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
   };
 
   handleClickCell = (e: React.SyntheticEvent<HTMLElement>) => {
-    const { rowIndex, columnIndex, onClick, row } = this.asProps;
+    const { rowIndex, columnIndex, onClick, row, accordionRowIndex } = this.asProps;
 
-    onClick?.(e, { rowIndex, colIndex: columnIndex, row });
+    const rowElement = e.currentTarget.parentElement?.parentElement;
+    const ariaRowindex = Number(rowElement?.getAttribute('aria-rowindex'));
+    let rowIndexValue = accordionRowIndex === undefined ? rowIndex : rowIndex + 1 + accordionRowIndex;
+
+    if (!isNaN(ariaRowindex)) {
+      rowIndexValue = ariaRowindex - 2;
+    }
+
+    onClick(e, { rowIndex: rowIndexValue, colIndex: columnIndex, row });
   };
 
   render() {

semcore/data-table/src/components/Body/Row.tsx

@@ -452,6 +452,7 @@ export class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<
       tableRef,
       scrollAreaRef,
       accordionAnimationRows,
+      onCellClick,
     } = this.asProps;
 
     const { expandedForAnimation, accordionRows, accordionComponent } = this.state;
@@ -605,7 +606,7 @@ export class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<
               rowIndex={rowIndex}
               rows={[row]}
               row={row}
-              columnIndex={1}
+              columnIndex={0}
               // @ts-ignore
               column={{ name: ACCORDION }}
               w='100%'
@@ -639,6 +640,7 @@ export class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<
             limit={limit}
             renderCell={renderCell}
             sideIndents={sideIndents}
+            onCellClick={onCellClick}
           />
         )}
       </>,