Merge branch 'main' into playwright-light-dark-theme

src/components/Table/Table.tsx

@@ -346,9 +346,15 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
 
         return (
             <colgroup>
-                {columnsStyles.map(({width}, index) => (
-                    <col style={{width}} key={columns[index].id} />
-                ))}
+                {columnsStyles.flatMap(({width}, index) => {
+                    const key = columns[index]?.id;
+
+                    if (!key) {
+                        return [];
+                    }
+
+                    return <col style={{width}} key={key} />;
+                })}
             </colgroup>
         );
     }
@@ -553,10 +559,11 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
         return style;
     }
 
-    private getCellStyles({
-        width: _width,
-        ...styles
-    }: React.CSSProperties): React.CSSProperties | undefined {
+    private getCellStyles(
+        columnStyles: React.CSSProperties | undefined,
+    ): React.CSSProperties | undefined {
+        const {width: _width, ...styles} = columnStyles || {};
+
         return Object.keys(styles).length ? styles : undefined;
     }
 

src/components/Table/hoc/withTableSettings/__tests__/withTableSettings.test.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import {Table, TableColumnConfig} from '../../../Table';
+import {TableSettingsData, withTableSettings} from '../withTableSettings';
+
+const item = {name: 'John Doe', occupation: 'Worker'};
+
+const TableWithSettings = withTableSettings<typeof item>(Table);
+
+const columns: TableColumnConfig<typeof item>[] = [
+    {
+        id: 'name',
+    },
+    {
+        id: 'occupation',
+    },
+];
+
+const data = [item];
+
+const settings: TableSettingsData = columns.map((column) => ({id: column.id, isSelected: true}));
+
+test('should change table columns', async () => {
+    const updateSettings = jest.fn();
+
+    render(
+        <TableWithSettings
+            columns={columns}
+            data={data}
+            settings={settings}
+            updateSettings={updateSettings}
+        />,
+    );
+
+    await userEvent.click(screen.getByRole('button', {name: 'Table settings'}));
+    await userEvent.click(await screen.findByRole('button', {name: 'occupation'}));
+    await userEvent.click(screen.getByRole('button', {name: 'Apply'}));
+
+    expect(updateSettings).toHaveBeenCalledWith([
+        {
+            id: 'name',
+            isSelected: true,
+        },
+        {
+            id: 'occupation',
+            isSelected: false,
+        },
+    ]);
+});

src/components/Table/hoc/withTableSettings/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "label_settings": "Table settings"
+}

src/components/Table/hoc/withTableSettings/i18n/index.ts

@@ -0,0 +1,8 @@
+import {addComponentKeysets} from '../../../../utils/addComponentKeysets';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'withTableSettings';
+
+export default addComponentKeysets({en, ru}, COMPONENT);

src/components/Table/hoc/withTableSettings/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "label_settings": "Настройки таблицы"
+}

src/components/Table/hoc/withTableSettings/withTableSettings.tsx

@@ -14,6 +14,7 @@ import {actionsColumnId, enhanceSystemColumn} from '../withTableActions/withTabl
 import {selectionColumnId} from '../withTableSelection/withTableSelection';
 
 import {TableColumnSetup} from './TableColumnSetup/TableColumnSetup';
+import i18n from './i18n';
 
 import './withTableSettings.scss';
 
@@ -191,6 +192,7 @@ export function withTableSettings<I extends TableDataItem, E extends {} = {}>(
                                         <Button
                                             view="flat"
                                             className={b('settings-button')}
+                                            extraProps={{'aria-label': i18n('label_settings')}}
                                             onClick={onClick}
                                         >
                                             <Icon data={Gear} />