@vkontakte/vkui 6.0.3 → 6.1.0

package/src/components/Alert/Readme.md

@@ -1,168 +0,0 @@
-Передаётся в качестве значения свойства `popout` компонента [`SplitLayout`](#/SplitLayout).
-
-В Алертах особое внимание нужно уделить кнопкам. Всего есть три типа кнопок:
-`cancel`, `destructive` и `default`.
-
-Типом `cancel` нужно подсветить действие, возвращающее пользователя к
-состоянию, когда алерт был закрыт. Пользователь кликнет по нему в случае, когда он открыл алерт для
-совершения какого-то действия и передумал.
-
-Стиль `destructive` используется в случае, когда действие влечёт за собой какие-то деструктивные последствия:
-удаление, разжалование и т.д.
-
-Во всех остальных случаях используйте стиль `default`.
-
-Кнопки могут быть ссылками (передайте `href`) или другим компонентом (передайте `Component`).
-
-> **Важно:**
->
-> 1. Кнопка со стилем `cancel` должна быть одна на алерт.
-> 2. Кнопку со стилем `cancel` нужно располагать либо слева, либо снизу, в зависимости от выбранного `actionsLayout`.
-> 3. В Android версии игнорируется стили `cancel` и `destructive`, и жирность всех кнопок одинаковая.
-> 4. В VKCOM версии возможно только горизонтальное расположение кнопок.
-> 5. Порядок кнопок должен быть одинаковым на всех платформах (см. пункт 2).
-
-```jsx { "props": { "layout": false, "adaptivity": true } }
-const Example = () => {
-  const [popout, setPopout] = React.useState(null);
-  const [actionsLog, setActionsLog] = React.useState([]);
-
-  const addActionLogItem = (value) => {
-    setActionsLog([...actionsLog, value]);
-  };
-
-  const closePopout = () => {
-    setPopout(null);
-  };
-
-  const openAction = () => {
-    setPopout(
-      <Alert
-        actions={[
-          {
-            title: 'Лишить права',
-            mode: 'destructive',
-            action: () => addActionLogItem('Право на модерацию контента убрано.'),
-          },
-          {
-            title: 'Отмена',
-            mode: 'cancel',
-          },
-        ]}
-        actionsLayout="vertical"
-        onClose={closePopout}
-        header="Подтвердите действие"
-        text="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
-      />,
-    );
-  };
-
-  const openDeletion = () => {
-    setPopout(
-      <Alert
-        actions={[
-          {
-            title: 'Отмена',
-            mode: 'cancel',
-          },
-          {
-            title: 'Удалить',
-            mode: 'destructive',
-            action: () => addActionLogItem('Документ удален.'),
-          },
-        ]}
-        actionsLayout="horizontal"
-        dismissButtonMode="inside"
-        onClose={closePopout}
-        header="Удаление документа"
-        text="Вы уверены, что хотите удалить этот документ?"
-      />,
-    );
-  };
-
-  React.useEffect(() => {
-    openDeletion();
-  }, []);
-
-  return (
-    <SplitLayout popout={popout}>
-      <SplitCol>
-        <View activePanel="alert">
-          <Panel id="alert">
-            <PanelHeader>Alert</PanelHeader>
-            <Group>
-              <CellButton onClick={openAction}>Лишить права</CellButton>
-              <CellButton onClick={openDeletion}>Удалить документ</CellButton>
-              {actionsLog.map((value, i) => (
-                <Div key={i}>{value}</Div>
-              ))}
-            </Group>
-          </Panel>
-        </View>
-      </SplitCol>
-    </SplitLayout>
-  );
-};
-
-<Example />;
-```
-
-## renderAction
-
-```jsx { "props": { "layout": false, "adaptivity": true } }
-const renderAction = ({ mode, ...restProps }) => {
-  return <Button mode={mode === 'cancel' ? 'secondary' : 'primary'} size="m" {...restProps} />;
-};
-
-const Example = () => {
-  const [popout, setPopout] = React.useState(null);
-
-  const closePopout = () => {
-    setPopout(null);
-  };
-
-  const openAction = () => {
-    setPopout(
-      <Alert
-        actions={[
-          {
-            title: 'Лишить права',
-            mode: 'destructive',
-          },
-          {
-            title: 'Отмена',
-            mode: 'cancel',
-          },
-        ]}
-        actionsAlign="left"
-        actionsLayout="horizontal"
-        renderAction={renderAction}
-        onClose={closePopout}
-        header="Подтвердите действие"
-        text="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
-      />,
-    );
-  };
-
-  React.useEffect(() => {
-    openAction();
-  }, []);
-
-  return (
-    <SplitLayout popout={popout}>
-      <SplitCol>
-        <View activePanel="alert">
-          <Panel id="alert">
-            <PanelHeader>Alert</PanelHeader>
-            <Group>
-              <CellButton onClick={openAction}>Лишить права</CellButton>
-            </Group>
-          </Panel>
-        </View>
-      </SplitCol>
-    </SplitLayout>
-  );
-};
-
-<Example />;
-```

package/src/components/Alert/__image_snapshots__/alert-desktop-vkcom-chromium-dark-1-snap.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:4ceee05a1d7f3f23a1025abb0ded11ed837a176ef9869b8f31779d8f11a3e93d
-size 44163

package/src/components/Alert/__image_snapshots__/alert-desktop-vkcom-chromium-light-1-snap.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:23c2c053b15a299faa62024b355d5caa9a6ce746c1e6df672faeb4d4f0ee9107
-size 53350

package/src/components/Alert/__image_snapshots__/alert-desktop-vkcom-firefox-dark-1-snap.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:8b1b8775d29ad65ef1b5759fc144d87a0126db95fe922c1e4aab1d067401c371
-size 53480

package/src/components/Alert/__image_snapshots__/alert-desktop-vkcom-firefox-light-1-snap.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:bfdeae881da8b99976794d32e9b3074af9866fa655e637eb72dc27f214a5a1fb
-size 69979

package/src/components/Alert/__image_snapshots__/alert-desktop-vkcom-webkit-dark-1-snap.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:0ad8a93c28e284abff9c44c839ae5acd3110f867eb944d915456782683b720a6
-size 39497

package/src/components/Alert/__image_snapshots__/alert-desktop-vkcom-webkit-light-1-snap.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:b51280b296803b012318e9c045b23baf5be57c79f1182595a17ac10209b5d158
-size 48636

package/src/components/Alert/__image_snapshots__/alert-long-word-android-chromium-light-1-snap.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:0d9d4cd7f94ccbf5187cbe8c011ea61b0e8c08e8ff3349b07e5b5cf8928a9f90
-size 24331

package/src/components/Alert/__image_snapshots__/alert-long-word-ios-webkit-light-1-snap.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:eb1e4d1d39f44da17d2cb7939379b215979533ca921cdcfcf10d7ebb259b6c14
-size 15439

package/src/components/Alert/__image_snapshots__/alert-long-word-vkcom-chromium-light-1-snap.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:1f58b4fb8bbaef09f15888c80345aa8471f71d76a9e403b7845195ea232ba9a1
-size 49753

package/src/components/Alert/__image_snapshots__/alert-long-word-vkcom-firefox-light-1-snap.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:695aa9509126b44d27cef27eb677788907a7048fa57ce3b80fdcdaebaca1726b
-size 67230

package/src/components/Alert/__image_snapshots__/alert-long-word-vkcom-webkit-light-1-snap.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:03dd1a4f69f7342438781705dccdb3dced7e514804e06891bfce75caac0243e7
-size 44387

package/src/components/Alert/__image_snapshots__/alert-mobile-android-chromium-dark-1-snap.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:5cf13e6a9e49025829b1bdcf9652421583758f239225bad09fb741c55c7a7939
-size 77272

package/src/components/Alert/__image_snapshots__/alert-mobile-android-chromium-light-1-snap.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:5b1b3f1023830b10d29f3dae99e60bbd1035dc9a4337d9aaacf62884813f0e6c
-size 81884

package/src/components/Alert/__image_snapshots__/alert-mobile-ios-webkit-dark-1-snap.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:53e8b10354858723522269b2ab94f626c22a64fed563a19598a6e393d2abe693
-size 56604

package/src/components/Alert/__image_snapshots__/alert-mobile-ios-webkit-light-1-snap.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:00e735c2e2e9878e55f79e522153ed662159b713e1905f4ba47841ba20b040b7
-size 54783

package/src/components/AppRoot/AppRoot.stories.mdx

@@ -1,7 +0,0 @@
-import { Meta, Title, ArgTypes, Description } from '@storybook/blocks';
-import { AppRoot } from './AppRoot';
-
-<Meta title="Service/AppRoot" />
-<Title>AppRoot</Title>
-
-<ArgTypes of={AppRoot} />

package/src/components/AppRoot/AppRoot.test.tsx

@@ -1,381 +0,0 @@
-import * as React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { noop } from '@vkontakte/vkjs';
-import { Appearance } from '../../lib/appearance';
-import { Platform } from '../../lib/platform';
-import { DEFAULT_TOKENS_CLASS_NAMES } from '../../lib/tokens';
-import { baselineComponent } from '../../testing/utils';
-import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
-import { ConfigProvider } from '../ConfigProvider/ConfigProvider';
-import { AppRoot, AppRootProps } from './AppRoot';
-import { AppRootContext } from './AppRootContext';
-import { ScrollContext, ScrollContextInterface, useScrollLock } from './ScrollContext';
-import { CUSTOM_PROPERTY_INSET_PREFIX } from './helpers';
-import styles from './AppRoot.module.css';
-
-describe('AppRoot', () => {
-  baselineComponent(AppRoot, { getRootRef: false });
-
-  it('should setup pointer class by hasPointer from AdaptivityProvider', () => {
-    const Template = (props: { hasPointer?: boolean }) => (
-      <AdaptivityProvider {...props}>
-        <AppRoot mode="full" data-testid="app-root" />
-      </AdaptivityProvider>
-    );
-    const result = render(<Template />);
-    expect(result.getByTestId('app-root')).toHaveClass(styles['AppRoot--pointer-none']);
-    result.rerender(<Template hasPointer={false} />);
-    expect(result.getByTestId('app-root')).toHaveClass(styles['AppRoot--pointer-has-not']);
-    result.rerender(<Template hasPointer={true} />);
-    expect(result.getByTestId('app-root')).not.toHaveClass(
-      styles['AppRoot--pointer-none'],
-      styles['AppRoot--pointer-has-not'],
-    );
-  });
-
-  it('should return expected context', () => {
-    let portalRoot: React.RefObject<HTMLElement | null> = React.createRef();
-    const contextCallback = jest.fn().mockImplementation((ctx) => {
-      portalRoot = ctx.portalRoot;
-      return null;
-    });
-    const result = render(
-      <AppRoot mode="full" data-testid="app-root">
-        <AppRootContext.Consumer>{contextCallback}</AppRootContext.Consumer>
-      </AppRoot>,
-    );
-    expect(contextCallback).toHaveBeenCalledWith({
-      appRoot: { current: result.getByTestId('app-root') },
-      portalRoot: portalRoot,
-      embedded: false,
-      mode: 'full',
-      disablePortal: false,
-      layout: undefined,
-      keyboardInput: false,
-    });
-  });
-
-  it('should toggle scroll container', () => {
-    const ScrollToggler = () => {
-      const [enable, setEnable] = React.useState(true);
-      useScrollLock(enable);
-      return (
-        <input
-          type="checkbox"
-          checked={enable}
-          onChange={(event) => setEnable(Boolean(event.target.checked))}
-        />
-      );
-    };
-    const Template = (props: Pick<AppRootProps, 'scroll'>) => (
-      <AppRoot mode="full" data-testid="app-root" {...props}>
-        <ScrollToggler />
-      </AppRoot>
-    );
-
-    const result = render(<Template />);
-    expect(document.body).toHaveStyle('position: fixed');
-    fireEvent.click(result.getByRole('checkbox'));
-    expect(document.body).not.toHaveStyle('position: fixed');
-
-    result.rerender(<Template scroll="contain" />);
-    expect(result.getByTestId('app-root')).toHaveStyle('position: absolute');
-    fireEvent.click(result.getByRole('checkbox'));
-    expect(result.getByTestId('app-root')).not.toHaveStyle('position: absolute');
-  });
-
-  it('should not call enableScrollLock if scroll is already locked', () => {
-    let isScrollLockStub = false;
-    const enableScrollLockStub = jest.fn(() => (isScrollLockStub = true));
-    const disableScrollLockStub = jest.fn();
-    const scrollContextStub: ScrollContextInterface = {
-      getScroll: () => ({ x: 0, y: 0 }),
-      scrollTo: noop,
-      get isScrollLock() {
-        return Boolean(isScrollLockStub);
-      },
-      enableScrollLock: enableScrollLockStub,
-      disableScrollLock: disableScrollLockStub,
-    };
-
-    const ScrollToggler = () => {
-      useScrollLock(true);
-      return null;
-    };
-
-    const ScrollStub = ({ children }: { children: React.ReactNode }) => {
-      return <ScrollContext.Provider value={scrollContextStub}>{children}</ScrollContext.Provider>;
-    };
-
-    const Template = (props: Pick<AppRootProps, 'scroll'>) => {
-      const [showAnotherToggler, setShowAnotherToggler] = React.useState(false);
-      return (
-        <AppRoot mode="full" data-testid="app-root" {...props}>
-          <ScrollStub>
-            <ScrollToggler />
-            {showAnotherToggler && <ScrollToggler />}
-            <button onClick={() => setShowAnotherToggler(true)}>Show another toggler</button>
-          </ScrollStub>
-        </AppRoot>
-      );
-    };
-
-    const { unmount } = render(<Template />);
-    // первый компонент вызвал scrollLock
-    expect(enableScrollLockStub).toHaveBeenCalledTimes(1);
-    // второй появившийся компонент вызвал scrollLock
-    fireEvent.click(screen.getByText('Show another toggler'));
-
-    // enableScrollLock должен быть вызван лишь раз
-    expect(enableScrollLockStub).toHaveBeenCalledTimes(1);
-
-    unmount();
-    // disableScrollLock должен быть вызван лишь раз
-    expect(disableScrollLockStub).toHaveBeenCalledTimes(1);
-  });
-
-  describe('portalRoot in mode="embedded"', () => {
-    it.each(['embedded', 'partial'] as const)(
-      'should create and inject portal in %s mode',
-      (mode) => {
-        let portalRoot: React.RefObject<HTMLElement | null> = React.createRef();
-        const contextCallback = jest.fn().mockImplementation((ctx) => {
-          portalRoot = ctx.portalRoot;
-          return null;
-        });
-        const { unmount } = render(
-          <AppRoot mode={mode}>
-            <AppRootContext.Consumer>{contextCallback}</AppRootContext.Consumer>
-          </AppRoot>,
-        );
-        expect(document.body).toContainElement(portalRoot.current);
-        unmount();
-        expect(document.body).not.toContainElement(portalRoot.current);
-      },
-    );
-
-    it('should not remove external portalRoot provided as prop', () => {
-      const TestComponent = () => {
-        const [shouldMount, setShouldMount] = React.useState(false);
-        const portalRootRef = React.useRef<HTMLDivElement | null>(null);
-        return (
-          <div>
-            {shouldMount && <AppRoot portalRoot={portalRootRef} />}
-            <button onClick={() => setShouldMount((mountFlag) => !mountFlag)}>
-              {shouldMount ? 'unmount' : 'mount'}
-            </button>
-            <div data-testid="portal-root" ref={portalRootRef} />
-          </div>
-        );
-      };
-
-      render(<TestComponent />);
-
-      expect(screen.queryByTestId('portal-root')).toBeTruthy();
-      fireEvent.click(screen.getByText('mount'));
-      expect(screen.queryByTestId('portal-root')).toBeTruthy();
-      fireEvent.click(screen.getByText('unmount'));
-      expect(screen.queryByTestId('portal-root')).toBeTruthy();
-    });
-
-    it('should support multi-instance mode', () => {
-      let portalRoot: React.RefObject<HTMLElement | null> = React.createRef();
-      const contextCallback = jest.fn().mockImplementation((ctx) => {
-        portalRoot = ctx.portalRoot ?? null;
-        return null;
-      });
-      render(
-        <AppRoot mode="embedded">
-          <AppRootContext.Consumer>{contextCallback}</AppRootContext.Consumer>
-        </AppRoot>,
-      );
-      render(<AppRoot mode="embedded" />).unmount();
-      expect(document.body).toContainElement(portalRoot.current);
-    });
-
-    it('should accept custom portal root', () => {
-      const customPortalRoot = document.createElement('div');
-      let portalRoot: React.RefObject<HTMLElement | null> = React.createRef();
-      const contextCallback = jest.fn().mockImplementation((ctx) => {
-        portalRoot = ctx.portalRoot ?? null;
-        return null;
-      });
-      render(
-        <AppRoot portalRoot={customPortalRoot}>
-          <AppRootContext.Consumer>{contextCallback}</AppRootContext.Consumer>
-        </AppRoot>,
-      );
-      expect(portalRoot.current).toEqual(customPortalRoot);
-    });
-  });
-
-  describe('Setup containers', () => {
-    it('should add class="vkui" to html element in full mode', () => {
-      const { unmount } = render(<AppRoot />);
-      expect(document.documentElement).toHaveClass('vkui');
-      unmount();
-      expect(document.documentElement).not.toHaveClass('vkui');
-    });
-
-    it('should add nothing when "partial" mode', () => {
-      const result = render(<AppRoot mode="partial" data-testid="app-root" />);
-      expect(document.documentElement).not.toHaveClass();
-      expect(document.body).not.toHaveClass();
-      expect(result.queryByTestId('app-root')).toBeNull();
-    });
-
-    it('should add "embedded" mode class to container', () => {
-      const { unmount, container: parentElement } = render(<AppRoot mode="embedded" />);
-      expect(parentElement).toHaveClass('vkui__root--embedded');
-      unmount();
-      expect(parentElement).not.toHaveClass();
-    });
-
-    it.each(['embedded', 'full'] as const)('should add adaptivity classes in %s mode', (mode) => {
-      const { unmount, rerender, container } = render(<AppRoot mode={mode} />);
-      const parentElement = mode === 'embedded' ? container : document.documentElement;
-      expect(parentElement).not.toHaveClass('vkui--sizeX-regular');
-      rerender(
-        <AdaptivityProvider sizeX="regular">
-          <AppRoot mode={mode} />
-        </AdaptivityProvider>,
-      );
-      expect(parentElement).toHaveClass('vkui--sizeX-regular');
-      unmount();
-      expect(parentElement).not.toHaveClass();
-    });
-
-    it.each(['embedded', 'full'] as const)('should add safe area insets in %s mode', (mode) => {
-      const CUSTOM_PROPERTY_INSET_TOP = `${CUSTOM_PROPERTY_INSET_PREFIX}top: 0px`;
-      const CUSTOM_PROPERTY_INSET_BOTTOM = `${CUSTOM_PROPERTY_INSET_PREFIX}bottom: 0px`;
-      const CUSTOM_PROPERTY_INSETS = `${CUSTOM_PROPERTY_INSET_TOP}; ${CUSTOM_PROPERTY_INSET_BOTTOM}`;
-
-      const { unmount, rerender, container } = render(
-        <AppRoot mode={mode} safeAreaInsets={{ top: 0 }} />,
-      );
-      const parentElement = mode === 'embedded' ? container : document.documentElement;
-      expect(parentElement).toHaveStyle(CUSTOM_PROPERTY_INSET_TOP);
-
-      rerender(<AppRoot mode={mode} safeAreaInsets={{ top: 0, bottom: 0 }} />);
-      expect(parentElement).toHaveStyle(CUSTOM_PROPERTY_INSETS);
-
-      unmount();
-
-      expect(parentElement).not.toHaveStyle(CUSTOM_PROPERTY_INSETS);
-    });
-
-    it.each([
-      { mode: 'full', layout: 'card' },
-      { mode: 'embedded', layout: 'card' },
-      { mode: 'partial', layout: 'card' },
-      { mode: 'full', layout: 'plain' },
-      { mode: 'embedded', layout: 'plain' },
-      { mode: 'partial', layout: 'plain' },
-    ] as const)('should resolve "$layout" layout prop (mode="$mode")', ({ mode, layout }) => {
-      const { unmount, container, rerender } = render(<AppRoot mode={mode} />);
-      const conditionalContainer = mode === 'full' ? document.documentElement : container;
-      const className = layout === 'card' ? 'vkui--layout-card' : 'vkui--layout-plain';
-
-      expect(conditionalContainer).not.toHaveClass(className);
-
-      rerender(<AppRoot mode={mode} layout={layout} />);
-
-      if (mode === 'partial') {
-        expect(conditionalContainer).not.toHaveClass(className);
-      } else {
-        expect(conditionalContainer).toHaveClass(className);
-      }
-
-      unmount();
-
-      expect(conditionalContainer).not.toHaveClass(className);
-    });
-
-    const CUSTOM_TOKEN_CLASS_NAME = 'myClassName';
-
-    it.each([
-      ['default', Platform.IOS, Appearance.LIGHT, undefined],
-      ['default', Platform.IOS, Appearance.LIGHT, {}],
-      ['default', Platform.IOS, Appearance.DARK, DEFAULT_TOKENS_CLASS_NAMES],
-      ['default', Platform.IOS, Appearance.LIGHT, { dark: CUSTOM_TOKEN_CLASS_NAME }],
-      ['default', Platform.IOS, Appearance.LIGHT, { android: { dark: CUSTOM_TOKEN_CLASS_NAME } }],
-      ['custom', Platform.IOS, Appearance.DARK, { dark: CUSTOM_TOKEN_CLASS_NAME }],
-      ['custom', Platform.ANDROID, Appearance.DARK, { android: { dark: CUSTOM_TOKEN_CLASS_NAME } }],
-    ])(
-      'should use %s tokensClassName if platform="%s" appearance="%s" tokensClassNames={%o}',
-      (type, platform, appearance, tokensClassNames) => {
-        const { unmount } = render(
-          <ConfigProvider
-            platform={platform}
-            appearance={appearance}
-            tokensClassNames={tokensClassNames}
-          >
-            <AppRoot />
-          </ConfigProvider>,
-        );
-        const tokensClassName =
-          type === 'default'
-            ? DEFAULT_TOKENS_CLASS_NAMES[platform][appearance]
-            : CUSTOM_TOKEN_CLASS_NAME;
-        expect(document.documentElement).toHaveClass(tokensClassName);
-        unmount();
-        expect(document.documentElement).not.toHaveClass(tokensClassName);
-      },
-    );
-  });
-
-  it('should add tokensClassName to embedded element of AppRoot inner full AppRoot and removes on unmount', async () => {
-    const configForFullMode = { appearance: Appearance.LIGHT, platform: Platform.VKCOM };
-    const vkuiTokenModeClassNameForFullMode =
-      DEFAULT_TOKENS_CLASS_NAMES[configForFullMode.platform][configForFullMode.appearance];
-
-    const configForEmbeddedMode = { appearance: Appearance.DARK, platform: Platform.VKCOM };
-    const vkuiTokenModeClassNameForEmbeddedMode =
-      DEFAULT_TOKENS_CLASS_NAMES[configForEmbeddedMode.platform][configForEmbeddedMode.appearance];
-
-    const ConfigUserWithOwnProvider = () => {
-      return (
-        <ConfigProvider {...configForEmbeddedMode}>
-          <AppRoot mode="embedded" data-testid="app-root-embedded"></AppRoot>
-        </ConfigProvider>
-      );
-    };
-
-    const TestComponent = () => {
-      const [isMounted, setIsMounted] = React.useState(true);
-      return (
-        <ConfigProvider {...configForFullMode}>
-          <AppRoot>
-            <button onClick={() => setIsMounted(false)}>Unmount child context</button>
-            {isMounted && <ConfigUserWithOwnProvider />}
-          </AppRoot>
-        </ConfigProvider>
-      );
-    };
-
-    const result = render(<TestComponent />);
-
-    expect(document.documentElement).toHaveClass(vkuiTokenModeClassNameForFullMode);
-    expect(result.getByTestId('app-root-embedded')).toHaveClass(
-      vkuiTokenModeClassNameForEmbeddedMode,
-    );
-
-    fireEvent.click(screen.getByRole('button'));
-
-    expect(document.documentElement).toHaveClass(vkuiTokenModeClassNameForFullMode);
-    expect(result.queryByTestId('app-root-embedded')).toBeNull();
-
-    result.unmount();
-
-    expect(document.documentElement).not.toHaveClass(vkuiTokenModeClassNameForFullMode);
-  });
-
-  describe('Workarounds', () => {
-    it('should disable CSS transform on parent for mode="embedded"', () => {
-      const { rerender, container: parentElement } = render(<AppRoot mode="embedded" />);
-      expect(parentElement).toHaveStyle('transform: translate3d(0, 0, 0)');
-      rerender(<AppRoot mode="embedded" disableParentTransformForPositionFixedElements />);
-      expect(parentElement).not.toHaveStyle('transform: translate3d(0, 0, 0)');
-    });
-  });
-});