Merge remote-tracking branch 'origin/develop' into develop

changelog.md

@@ -14,6 +14,7 @@
 * [NotificationCard]: changed size of actions from '36' to '30'
 * [MainMenuButton]: removed unnecessary `role` and `aria-haspopup` attributes ([#2733](https://github.com/epam/UUI/pull/2733))
 * [MainMenuButton]: Add `aria-current` attribute with value `page` for active links ([#2734](https://github.com/epam/UUI/pull/2734))
+* [DataTableRow]: fixed `ref` prop
 
 
 # 5.12.1 - 17.12.2024

uui-components/src/table/DataTableCellContainer.tsx

@@ -38,6 +38,7 @@ export const DataTableCellContainer = React.forwardRef<HTMLDivElement, DataTable
     return (
         <FlexCell
             { ...props.column }
+            key={ props.column.key }
             minWidth={ 'width' in props.column ? props.column.width : undefined }
             rawProps={ props.rawProps }
             cx={ ['uui-dt-vars', css.root, props.column.cx, props.cx] }

uui-core/src/helpers/withMods.ts

@@ -58,7 +58,11 @@ export function withMods<TSource, TResult>(
     } else {
         // Any other type of component. E.g. React.memo.
         // Wrap it in another functional component
-        wrappedComponent = (props: TResult) => React.createElement(Component, applyMods(props));
+        wrappedComponent = forwardRef<any, Readonly<TResult>>((props: TResult, ref) => {
+            const resultProps = applyMods(props);
+            (resultProps as any).ref = ref;
+            return React.createElement(Component, resultProps);
+        });
     }
 
     wrappedComponent.displayName = `${Component?.displayName || Component?.name || 'unknown'} (withMods)`;

uui/components/tables/DataTable.tsx

@@ -81,11 +81,11 @@ export function DataTable<TItem, TId>(props: React.PropsWithChildren<DataTablePr
     const defaultRenderRow = React.useCallback((rowProps: DataRowProps<TItem, TId> & DataTableRowMods) => {
         return (
             <DataTableRow
-                key={ rowProps.rowKey }
                 size={ props.size || settings.sizes.dataTable.body.row.default as UuiDataTableRowProps['size'] }
                 columnsGap={ props.columnsGap }
                 borderBottom={ props.border }
                 { ...rowProps }
+                key={ rowProps.rowKey }
                 cx={ css.cell }
             />
         );

uui/components/tables/DataTableRow.tsx

@@ -15,7 +15,7 @@ import css from './DataTableRow.module.scss';
 // As we need our mods to style the cell properly, we extract them from DataTableCellProps.rowProps, which is a hack, but it's reliable enough.
 export const renderCell = (props: DataTableCellProps) => {
     const mods = props.rowProps as DataTableRowMods & DataTableRowProps;
-    return <DataTableCell { ...props } size={ mods.size } columnsGap={ mods.columnsGap } />;
+    return <DataTableCell { ...props } key={ props.key } size={ mods.size } columnsGap={ mods.columnsGap } />;
 };
 
 export const renderDropMarkers = (props: DndActorRenderParams) => <DropMarker { ...props } enableBlocker={ true } />;