tech: Apply no-useless-computed-key eslint rule

.eslintrc.json

@@ -82,6 +82,7 @@
     "eqeqeq": "error", // Only type-safe equality operators
     "unicorn/expiring-todo-comments": ["error"],
     "no-console": "error",
-    "react-compiler/react-compiler": 2
+    "react-compiler/react-compiler": 2,
+    "no-useless-computed-key": "error"
   }
 }

packages/vkui/src/components/AspectRatio/AspectRatio.tsx

@@ -30,7 +30,7 @@ export function AspectRatio({
   ...props
 }: AspectRatioProps): JSX.Element {
   const style: React.CSSProperties & CSSCustomProperties = {
-    ['--vkui_internal--aspect_ratio']: String(ratio),
+    '--vkui_internal--aspect_ratio': String(ratio),
   };
 
   return (

packages/vkui/src/components/Button/Button.tsx

@@ -39,7 +39,7 @@ const stylesAlign = {
 
 const sizeYClassNames = {
   none: styles['Button--sizeY-none'],
-  ['regular']: styles['Button--sizeY-regular'],
+  regular: styles['Button--sizeY-regular'],
 };
 
 export interface VKUIButtonProps extends HasAlign {

packages/vkui/src/components/CardGrid/CardGrid.tsx

@@ -6,7 +6,7 @@ import styles from './CardGrid.module.css';
 
 const sizeXClassNames = {
   none: styles['CardGrid--sizeX-none'],
-  ['compact']: styles['CardGrid--sizeX-compact'],
+  compact: styles['CardGrid--sizeX-compact'],
 };
 
 const stylesSize = {

packages/vkui/src/components/CustomSelect/CustomSelect.tsx

@@ -34,7 +34,7 @@ import styles from './CustomSelect.module.css';
 
 const sizeYClassNames = {
   none: styles['CustomSelect--sizeY-none'],
-  ['compact']: styles['CustomSelect--sizeY-compact'],
+  compact: styles['CustomSelect--sizeY-compact'],
 };
 
 const warn = warnOnce('CustomSelect');
@@ -179,7 +179,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     style,
     onChange,
     children,
-    onInputChange: onInputChangeProp,
+    'onInputChange': onInputChangeProp,
     renderDropdown,
     onOpen,
     onClose,
@@ -189,17 +189,17 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     autoHideScrollbar,
     autoHideScrollbarDelay,
     searchable = false,
-    renderOption: renderOptionProp = defaultRenderOptionFn,
-    options: optionsProp,
+    'renderOption': renderOptionProp = defaultRenderOptionFn,
+    'options': optionsProp,
     emptyText = 'Ничего не найдено',
     filterFn = defaultFilterFn,
-    icon: iconProp,
+    'icon': iconProp,
     ClearButton = CustomSelectClearButton,
     allowClearButton = false,
     dropdownOffsetDistance = 0,
     dropdownAutoWidth = false,
     noMaxHeight = false,
-    ['aria-labelledby']: ariaLabelledBy,
+    'aria-labelledby': ariaLabelledBy,
     clearButtonTestId,
     nativeSelectTestId,
     defaultValue,
@@ -790,7 +790,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     'role': 'combobox',
     'aria-controls': popupAriaId,
     'aria-expanded': opened,
-    ['aria-activedescendant']:
+    'aria-activedescendant':
       ariaActiveDescendantId && opened ? `${popupAriaId}-${ariaActiveDescendantId}` : undefined,
     'aria-labelledby': ariaLabelledBy,
     'aria-haspopup': 'listbox',

packages/vkui/src/components/CustomSelectOption/CustomSelectOption.tsx

@@ -10,7 +10,7 @@ import styles from './CustomSelectOption.module.css';
 
 const sizeYClassNames = {
   none: styles['CustomSelectOption--sizeY-none'],
-  ['regular']: styles['CustomSelectOption--sizeY-regular'],
+  regular: styles['CustomSelectOption--sizeY-regular'],
 };
 
 export interface CustomSelectOptionProps extends HTMLAttributesWithRootRef<HTMLDivElement> {

packages/vkui/src/components/DateInput/DateInput.tsx

@@ -20,7 +20,7 @@ import styles from './DateInput.module.css';
 
 const sizeYClassNames = {
   none: styles['DateInput--sizeY-none'],
-  ['compact']: styles['DateInput--sizeY-compact'],
+  compact: styles['DateInput--sizeY-compact'],
 };
 
 export interface DateInputProps

packages/vkui/src/components/DateRangeInput/DateRangeInput.tsx

@@ -26,7 +26,7 @@ import dateInputStyles from '../DateInput/DateInput.module.css';
 
 const sizeYClassNames = {
   none: styles['DateRangeInput--sizeY-none'],
-  ['compact']: styles['DateRangeInput--sizeY-compact'],
+  compact: styles['DateRangeInput--sizeY-compact'],
 };
 
 export interface DateRangeInputProps

packages/vkui/src/components/FormField/FormField.tsx

@@ -9,7 +9,7 @@ import styles from './FormField.module.css';
 
 const sizeYClassNames = {
   none: styles['FormField--sizeY-none'],
-  ['compact']: styles['FormField--sizeY-compact'],
+  compact: styles['FormField--sizeY-compact'],
 };
 
 const stylesStatus = {

packages/vkui/src/components/FormItem/FormItem.tsx

@@ -15,7 +15,7 @@ import styles from './FormItem.module.css';
 
 const sizeYClassNames = {
   none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),
-  ['compact']: classNames(styles['FormItem--sizeY-compact'], 'vkuiInternalFormItem--sizeY-compact'),
+  compact: classNames(styles['FormItem--sizeY-compact'], 'vkuiInternalFormItem--sizeY-compact'),
 };
 
 const stylesStatus = {

packages/vkui/src/components/FormLayoutGroup/FormLayoutGroup.tsx

@@ -12,7 +12,7 @@ const sizeYClassNames = {
     styles['FormLayoutGroup--sizeY-none'],
     'vkuiInternalFormLayoutGroup--sizeY-none',
   ),
-  ['compact']: classNames(
+  compact: classNames(
     styles['FormLayoutGroup--sizeY-compact'],
     'vkuiInternalFormLayoutGroup--sizeY-compact',
   ),

packages/vkui/src/components/Input/Input.tsx

@@ -8,7 +8,7 @@ import styles from './Input.module.css';
 
 const sizeYClassNames = {
   none: styles['Input--sizeY-none'],
-  ['compact']: styles['Input--sizeY-compact'],
+  compact: styles['Input--sizeY-compact'],
 };
 
 export interface InputProps

packages/vkui/src/components/NativeSelect/NativeSelect.tsx

@@ -14,7 +14,7 @@ import styles from '../Select/Select.module.css';
 
 const sizeYClassNames = {
   none: styles['Select--sizeY-none'],
-  ['compact']: styles['Select--sizeY-compact'],
+  compact: styles['Select--sizeY-compact'],
 };
 
 export interface NativeSelectProps

packages/vkui/src/components/Panel/Panel.tsx

@@ -13,8 +13,8 @@ import styles from './Panel.module.css';
 
 const sizeXClassNames = {
   none: styles['Panel--sizeX-none'],
-  ['compact']: styles['Panel--sizeX-compact'],
-  ['regular']: styles['Panel--sizeX-regular'],
+  compact: styles['Panel--sizeX-compact'],
+  regular: styles['Panel--sizeX-regular'],
 };
 
 const stylesMode = {

packages/vkui/src/components/RichCell/RichCell.tsx

@@ -8,7 +8,7 @@ import styles from './RichCell.module.css';
 
 const sizeYClassNames = {
   none: styles['RichCell--sizeY-none'],
-  ['compact']: styles['RichCell--sizeY-compact'],
+  compact: styles['RichCell--sizeY-compact'],
 };
 
 const alignAfterClassNames = {

packages/vkui/src/components/SegmentedControl/SegmentedControl.tsx

@@ -11,7 +11,7 @@ import styles from './SegmentedControl.module.css';
 
 const sizeYClassNames = {
   none: styles['SegmentedControl--sizeY-none'],
-  ['regular']: styles['SegmentedControl--sizeY-regular'],
+  regular: styles['SegmentedControl--sizeY-regular'],
 };
 
 export type SegmentedControlValue = string | number | undefined;

packages/vkui/src/components/SelectMimicry/SelectMimicry.tsx

@@ -13,7 +13,7 @@ import styles from '../Select/Select.module.css';
 
 const sizeYClassNames = {
   none: styles['Select--sizeY-none'],
-  ['compact']: styles['Select--sizeY-compact'],
+  compact: styles['Select--sizeY-compact'],
 };
 
 export interface SelectMimicryProps

packages/vkui/src/components/SimpleCell/SimpleCell.tsx

@@ -12,7 +12,7 @@ import styles from './SimpleCell.module.css';
 
 const sizeYClassNames = {
   none: styles['SimpleCell--sizeY-none'],
-  ['compact']: styles['SimpleCell--sizeY-compact'],
+  compact: styles['SimpleCell--sizeY-compact'],
 };
 
 export interface SimpleCellOwnProps extends HasComponent {

packages/vkui/src/components/Slider/Slider.tsx

@@ -21,7 +21,7 @@ import styles from './Slider.module.css';
 
 const sizeYClassNames = {
   none: styles['Slider--sizeY-none'],
-  ['compact']: styles['Slider--sizeY-compact'],
+  compact: styles['Slider--sizeY-compact'],
 };
 
 const sizeClassNames = {

packages/vkui/src/components/SubnavigationButton/SubnavigationButton.tsx

@@ -27,7 +27,7 @@ const sizeStyles = {
 
 const sizeYClassNames = {
   none: styles['SubnavigationButton--sizeY-none'],
-  ['compact']: styles['SubnavigationButton--sizeY-compact'],
+  compact: styles['SubnavigationButton--sizeY-compact'],
 };
 
 export interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {

packages/vkui/src/components/TabsItem/TabsItem.tsx

@@ -15,7 +15,7 @@ import styles from './TabsItem.module.css';
 
 const sizeYClassNames = {
   none: styles['TabsItem--sizeY-none'],
-  ['compact']: styles['TabsItem--sizeY-compact'],
+  compact: styles['TabsItem--sizeY-compact'],
 };
 
 const stylesMode = {

packages/vkui/src/components/Textarea/Textarea.tsx

@@ -14,7 +14,7 @@ import styles from './Textarea.module.css';
 
 const sizeYClassNames = {
   none: styles['Textarea--sizeY-none'],
-  ['compact']: styles['Textarea--sizeY-compact'],
+  compact: styles['Textarea--sizeY-compact'],
 };
 
 export interface TextareaProps

packages/vkui/src/components/Typography/Headline/Headline.tsx

@@ -10,7 +10,7 @@ const stylesLevel = {
 
 const sizeYClassNames = {
   none: styles['Headline--sizeY-none'],
-  ['compact']: styles['Headline--sizeY-compact'],
+  compact: styles['Headline--sizeY-compact'],
 };
 
 export interface HeadlineProps extends TypographyProps {

packages/vkui/src/components/Typography/Subhead/Subhead.tsx

@@ -5,7 +5,7 @@ import styles from './Subhead.module.css';
 
 const sizeYClassNames = {
   none: styles['Subhead--sizeY-none'],
-  ['compact']: styles['Subhead--sizeY-compact'],
+  compact: styles['Subhead--sizeY-compact'],
 };
 
 export type SubheadProps = TypographyProps;

packages/vkui/src/components/Typography/Text/Text.tsx

@@ -5,7 +5,7 @@ import styles from './Text.module.css';
 
 const sizeYClassNames = {
   none: styles['Text--sizeY-none'],
-  ['compact']: styles['Text--sizeY-compact'],
+  compact: styles['Text--sizeY-compact'],
 };
 
 export type TextProps = TypographyProps;

packages/vkui/src/hooks/useAdaptivityConditionalRender/constants.ts

@@ -2,22 +2,22 @@ import styles from '../../styles/adaptivity.module.css';
 
 export const sizeXCompactClassNames: Record<'mq' | 'compact', { className: string }> = {
   mq: { className: styles['-sizeX--compact-mq'] },
-  ['compact']: { className: styles['-sizeX--compact-forced'] },
+  compact: { className: styles['-sizeX--compact-forced'] },
 };
 
 export const sizeXRegularClassNames: Record<'mq' | 'regular', { className: string }> = {
   mq: { className: styles['-sizeX--regular-mq'] },
-  ['regular']: { className: styles['-sizeX--regular-forced'] },
+  regular: { className: styles['-sizeX--regular-forced'] },
 };
 
 export const sizeYCompactClassNames: Record<'mq' | 'compact', { className: string }> = {
   mq: { className: styles['-sizeY--compact-mq'] },
-  ['compact']: { className: styles['-sizeY--compact-forced'] },
+  compact: { className: styles['-sizeY--compact-forced'] },
 };
 
 export const sizeYRegularClassNames: Record<'mq' | 'regular', { className: string }> = {
   mq: { className: styles['-sizeY--regular-mq'] },
-  ['regular']: { className: styles['-sizeY--regular-forced'] },
+  regular: { className: styles['-sizeY--regular-forced'] },
 };
 
 export const viewWidthClassNames: Record<