fix(ThemeProvider): inner provider should overwrite specified props a…

…nd only them (#1235)

src/components/ActionTooltip/__tests__/ActionTooltip.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {createEvent, fireEvent, render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {createEvent, fireEvent, render, screen} from '../../../../test-utils/utils';
 import {ActionTooltip} from '../ActionTooltip';
 
 export function fireAnimationEndEvent(el: Node | Window, animationName = 'animation') {

src/components/Alert/Alert.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {render, screen} from '../../../test-utils/utils';
 import {Flex} from '../layout';
 
 import {Alert} from './Alert';

src/components/Breadcrumbs/__tests__/Breadcrumbs.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import {render, screen} from '@testing-library/react';
-
+import {render, screen} from '../../../../test-utils/utils';
 import {Breadcrumbs} from '../Breadcrumbs';
 
 const items = [

src/components/Button/__tests__/Button.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 import {Gear} from '@gravity-ui/icons';
-import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {render, screen} from '../../../../test-utils/utils';
 import {Button} from '../Button';
 import type {ButtonPin, ButtonProps, ButtonSize, ButtonView} from '../Button';
 

src/components/Card/__tests__/Card.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {render, screen} from '../../../../test-utils/utils';
 import {Button} from '../../Button';
 import type {CardSize, CardTheme, CardType, CardView} from '../Card';
 import {Card} from '../Card';

src/components/Checkbox/__tests__/Checkbox.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {render, screen} from '../../../../test-utils/utils';
 import {Checkbox} from '../Checkbox';
 import type {CheckboxSize} from '../Checkbox';
 

src/components/ClipboardButton/__tests__/ClipboardButton.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {render, screen} from '../../../../test-utils/utils';
 import {ClipboardButton} from '../ClipboardButton';
 
 describe('ClipboardButton', () => {

src/components/Dialog/__tests__/Dialog.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import {render, screen} from '@testing-library/react';
-
+import {render, screen} from '../../../../test-utils/utils';
 import {Dialog} from '../Dialog';
 
 test('should label dialog with header text', () => {

src/components/Disclosure/__tests__/Disclosure .test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {render, screen} from '../../../../test-utils/utils';
 import {Disclosure} from '../Disclosure';
 import type {DisclosureSize} from '../Disclosure';
 

src/components/DropdownMenu/DropdownMenu.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {render, screen} from '../../../test-utils/utils';
+
 import {DropdownMenu} from './DropdownMenu';
 
 test('do not trigger `onOpenToggle` on mount', () => {

src/components/Link/__tests__/Link.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import {render, screen} from '@testing-library/react';
-
+import {render, screen} from '../../../../test-utils/utils';
 import {Link} from '../Link';
 
 describe('Link', () => {

src/components/List/List.tsx

@@ -13,12 +13,13 @@ import {
     DroppableProvided,
 } from 'react-beautiful-dnd';
 import AutoSizer, {Size} from 'react-virtualized-auto-sizer';
-import {VariableSizeList as ListContainer} from 'react-window';
+import {VariableSizeList} from 'react-window';
+import type {VariableSizeListProps} from 'react-window';
 
 import {SelectLoadingIndicator} from '../Select/components/SelectList/SelectLoadingIndicator';
 import {TextInput} from '../controls';
 import {MobileContext} from '../mobile';
-import {ThemeContext} from '../theme';
+import {useDirection} from '../theme';
 import {block} from '../utils/cn';
 import {getUniqId} from '../utils/common';
 
@@ -56,9 +57,13 @@ const reorder = <T extends unknown>(list: T[], startIndex: number, endIndex: num
     return result;
 };
 
+const ListContainer = React.forwardRef<VariableSizeList, VariableSizeListProps>((props, ref) => {
+    return <VariableSizeList ref={ref} {...props} direction={useDirection()} />;
+});
+ListContainer.displayName = 'ListContainer';
+
 export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T>> {
     static defaultProps: Partial<ListProps<ListItemData<unknown>>> = listDefaultProps;
-    static contextType = ThemeContext;
 
     static moveListElement<T = unknown>(
         list: ListItemData<T>[],
@@ -87,7 +92,6 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
         return undefined;
     }
 
-    context!: React.ContextType<typeof ThemeContext>;
     state: ListState<T> = {
         items: this.props.items,
         filter: '',
@@ -437,7 +441,6 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
                                         itemCount={items.length}
                                         overscanCount={10}
                                         onItemsRendered={this.onItemsRendered}
-                                        direction={this.context.direction}
                                         // this property used to rerender items in viewport
                                         // must be last, typescript skips checks for all props behind ts-ignore/ts-expect-error
                                         // @ts-expect-error
@@ -465,7 +468,6 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
                         itemCount={items.length}
                         overscanCount={10}
                         onItemsRendered={this.onItemsRendered}
-                        direction={this.context.direction}
                         // this property used to rerender items in viewport
                         // must be last, typescript skips checks for all props behind ts-ignore/ts-expect-error
                         // @ts-expect-error

src/components/List/__tests__/ListItem.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import {render, screen} from '@testing-library/react';
-
+import {render, screen} from '../../../../test-utils/utils';
 import {ListItem} from '../components';
 import type {ListItemData, ListItemProps} from '../types';
 

src/components/Persona/__tests__/Persona.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {queryByAttribute, render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {queryByAttribute, render, screen} from '../../../../test-utils/utils';
 import {getAvatarDisplayText} from '../../Avatar';
 import {Persona} from '../Persona';
 import i18n from '../i18n';

src/components/Popover/__tests__/Popover.test.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
-import {act, fireEvent, render, screen} from '@testing-library/react';
-
 import {setupTimersMock} from '../../../../test-utils/setupTimersMock';
+import {act, fireEvent, render, screen} from '../../../../test-utils/utils';
 import {Popover} from '../Popover';
 import {PopoverBehavior, delayByBehavior} from '../config';
 import type {PopoverProps} from '../types';

src/components/Popup/__tests__/Popup.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {render, screen} from '../../../../test-utils/utils';
 import {Button} from '../../Button/Button';
 import {Popup} from '../Popup';
 

src/components/Radio/__tests__/Radio.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {render, screen} from '../../../../test-utils/utils';
 import {Radio} from '../Radio';
 import type {RadioSize} from '../Radio';
 

src/components/RadioButton/__tests__/RadioButton.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import {render, screen, within} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import {RadioButton} from '../';
 import type {RadioButtonOption, RadioButtonProps, RadioButtonSize, RadioButtonWidth} from '../';
+import {render, screen, within} from '../../../../test-utils/utils';
 import {block} from '../../../components/utils/cn';
 
 const qaId = 'radio-button-component';

src/components/RadioGroup/__tests__/RadioGroup.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {render, screen, within} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {render, screen, within} from '../../../../test-utils/utils';
 import {RadioGroup} from '../RadioGroup';
 import type {RadioGroupDirection, RadioGroupOption, RadioGroupSize} from '../RadioGroup';
 

src/components/Select/__tests__/Select.base-actions.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import {act, render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import {SelectQa} from '..';
+import {act, render, screen} from '../../../../test-utils/utils';
 import {ListQa} from '../../List';
 import {DEFAULT_VIRTUALIZATION_THRESHOLD, QUICK_SEARCH_TIMEOUT} from '../constants';
 

src/components/Select/__tests__/Select.clear.test.tsx

@@ -1,6 +1,6 @@
-import {cleanup} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {cleanup} from '../../../../test-utils/utils';
 import {SelectQa} from '../constants';
 import type {SelectProps} from '../types';
 

src/components/Select/__tests__/Select.filter.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {cleanup} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {cleanup} from '../../../../test-utils/utils';
 import {TextInput} from '../../controls';
 import type {SelectOption, SelectProps} from '../types';
 

src/components/Select/__tests__/Select.muitiple.test.tsx

@@ -1,6 +1,7 @@
-import {cleanup} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {cleanup} from '../../../../test-utils/utils';
+
 import {
     DEFAULT_OPTIONS,
     GROUPED_OPTIONS,

src/components/Select/__tests__/Select.single.test.tsx

@@ -1,6 +1,7 @@
-import {cleanup} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {cleanup} from '../../../../test-utils/utils';
+
 import {
     DEFAULT_OPTIONS,
     GROUPED_OPTIONS,

src/components/Select/__tests__/utils.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import {act, render} from '@testing-library/react';
 import range from 'lodash/range';
 
 import {Select} from '..';
 import type {SelectOption, SelectOptionGroup, SelectProps, SelectRenderControlProps} from '..';
+import {act, render} from '../../../../test-utils/utils';
 import {MobileProvider} from '../../mobile';
 import {selectControlBlock, selectControlButtonBlock, selectListBlock} from '../constants';
 

src/components/Sheet/__tests__/Sheet.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import {render, screen} from '@testing-library/react';
-
+import {render, screen} from '../../../../test-utils/utils';
 import {Sheet} from '../Sheet';
 import {sheetBlock} from '../constants';
 

src/components/Switch/__tests__/Switch.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {render, screen} from '../../../../test-utils/utils';
 import {Switch} from '../Switch';
 
 const qaId = 'switch';

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

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {render, screen, within} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {render, screen, within} from '../../../../test-utils/utils';
 import {Table} from '../Table';
 
 import {columns, data} from './utils';

src/components/Tabs/__tests__/Tabs.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {render, screen} from '../../../../test-utils/utils';
 import {Tabs, TabsDirection} from '../Tabs';
 import type {TabsItemProps, TabsSize} from '../Tabs';
 

src/components/Tabs/__tests__/TabsItem.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 import {Flame} from '@gravity-ui/icons';
-import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {render, screen} from '../../../../test-utils/utils';
 import {TabsItem} from '../TabsItem';
 
 const tabId = 'tab-id';

src/components/Toaster/__mocks__/fireAnimationEndEvent.ts

@@ -1,4 +1,4 @@
-import {createEvent, fireEvent} from '@testing-library/react';
+import {createEvent, fireEvent} from '../../../../test-utils/utils';
 
 export function fireAnimationEndEvent(el: Node | Window, animationName: string) {
     const ev = createEvent.animationEnd(el, {animationName});

src/components/Toaster/__mocks__/getToast.ts

@@ -1,4 +1,4 @@
-import {screen} from '@testing-library/react';
+import {screen} from '../../../../test-utils/utils';
 
 import {fireAnimationEndEvent} from './fireAnimationEndEvent';
 

src/components/Toaster/__mocks__/tick.ts

@@ -1,4 +1,4 @@
-import {act} from '@testing-library/react';
+import {act} from '../../../../test-utils/utils';
 
 import {fireAnimationEndEvent} from './fireAnimationEndEvent';
 

src/components/Toaster/__tests__/ToasterProvider.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import {act, fireEvent, render, screen, within} from '@testing-library/react';
-
+import {act, fireEvent, render, screen, within} from '../../../../test-utils/utils';
 import {Modal} from '../../../components/Modal/Modal';
 import {ToasterProvider} from '../Provider/ToasterProvider';
 import {ToasterComponent} from '../ToasterComponent/ToasterComponent';

src/components/Toc/__tests__/Toc.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {render, screen} from '../../../../test-utils/utils';
 import {Toc} from '../Toc';
 
 const defaultItems = [

src/components/Tooltip/__tests__/Tooltip.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {createEvent, fireEvent, render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import {createEvent, fireEvent, render, screen} from '../../../../test-utils/utils';
 import {Tooltip} from '../Tooltip';
 
 export function fireAnimationEndEvent(el: Node | Window, animationName = 'animation') {

src/components/User/__tests__/User.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import {render, screen} from '@testing-library/react';
-
+import {render, screen} from '../../../../test-utils/utils';
 import {User} from '../User';
 
 describe('User', () => {