@vkontakte/vkui 6.0.3 → 6.1.0

package/src/components/OnboardingTooltip/Readme.md

@@ -1,318 +0,0 @@
-`OnboardingTooltip` – это компонент для отрисовки подсказки, как правило в случаях, когда
-пользователю хочется представить новый функционал. Это достаточно сложный с точки зрения управления
-компонент, поэтому он требует подробной документации.
-
-Для показа тултипа по ховеру воспользуйтесь [`Tooltip`](#/Tooltip).
-
-### Концепция
-
-Этот тултип служит для ознакомительных целей. То есть показывать его надо один раз, запоминая факт показа между
-сессиями. Рекомендуется показывать тултип сразу после того, как нуждающийся в нем элемент появился в зоне видимости.
-Это значит, что если, например, до элемента нужно скроллить, то показывать тултип нужно не сразу при попадании
-на страницу, а именно в момент, когда пользователь доскроллил до элемента.
-
-> **Важно**
->
-> На странице не может быть два одновременно показанных тултипа. Они всегда должны показываться
-> последовательно: следующий показывается при закрытии текущего и так до конца.
-
-### API
-
-Если хочется снабдить какой-то элемент интерфейса подсказкой, достаточно просто «обернуть» его тултипом:
-
-```jsx static
-import { OnboardingTooltip, Button } from '@vkontakte/vkui';
-
-<OnboardingTooltip text="Обновлённый раздел поможет найти друзей">
-  <Button>Друзья</Button>
-</OnboardingTooltip>;
-```
-
-О возможностях тултипа можно прочитать в описании свойств и методов.
-
-```jsx
-const Example = () => {
-  const [tooltip, setTooltip] = React.useState(true);
-  const [tooltip2, setTooltip2] = React.useState(true);
-  const [tooltip3, setTooltip3] = React.useState(false);
-  const [activePanel, setActivePanel] = React.useState('tooltip');
-
-  return (
-    <View activePanel={activePanel}>
-      <Panel id="tooltip">
-        <PanelHeader>OnboardingTooltip</PanelHeader>
-        <Group>
-          <List>
-            <SimpleCell>Музыка</SimpleCell>
-            <SimpleCell>Видео</SimpleCell>
-            <SimpleCell>Игры</SimpleCell>
-            <SimpleCell>Закладки</SimpleCell>
-            <SimpleCell>Документы</SimpleCell>
-            <SimpleCell>Денежные переводы</SimpleCell>
-          </List>
-        </Group>
-        <Group>
-          <OnboardingTooltip
-            text="У нас тут brand new функционал подвезли. Зацените!"
-            shown={tooltip}
-            onClose={() => setTooltip(false)}
-            offsetByMainAxis={8}
-            offsetByCrossAxis={10}
-          >
-            <SimpleCell onClick={() => setActivePanel('tooltip2')}>VK Pay</SimpleCell>
-          </OnboardingTooltip>
-        </Group>
-      </Panel>
-
-      <Panel id="tooltip2">
-        <PanelHeader
-          before={
-            <OnboardingTooltip
-              shown={tooltip2}
-              onClose={() => {
-                setTooltip2(false);
-                setTooltip3(true);
-              }}
-              text="Нажмите на кнопку, если хотите вернуться"
-              header="Назад"
-            >
-              <PanelHeaderBack onClick={() => setActivePanel('tooltip')} />
-            </OnboardingTooltip>
-          }
-        >
-          OnboardingTooltip
-        </PanelHeader>
-        <Group>
-          <List>
-            <SimpleCell
-              before={
-                <OnboardingTooltip
-                  text="Теперь у нас появились аватарки в списках. Правда круто?"
-                  shown={tooltip3}
-                  onClose={() => setTooltip3(false)}
-                  arrowOffset={-6}
-                >
-                  <Avatar />
-                </OnboardingTooltip>
-              }
-              subtitle="Веб-сайт"
-            >
-              Команда ВКонтакте
-            </SimpleCell>
-            <SimpleCell before={<Avatar />} subtitle="Музыкант">
-              Robbie Williams
-            </SimpleCell>
-            <SimpleCell before={<Avatar />} subtitle="Издательский дом">
-              ПостНаука
-            </SimpleCell>
-            <SimpleCell before={<Avatar />} subtitle="Издательский дом">
-              ПостНаука
-            </SimpleCell>
-            <SimpleCell before={<Avatar />} subtitle="Издательский дом">
-              ПостНаука
-            </SimpleCell>
-            <SimpleCell before={<Avatar />} subtitle="Издательский дом">
-              ПостНаука
-            </SimpleCell>
-            <SimpleCell before={<Avatar />} subtitle="Издательский дом">
-              ПостНаука
-            </SimpleCell>
-          </List>
-        </Group>
-      </Panel>
-    </View>
-  );
-};
-
-<Example />;
-```
-
-## OnboardingTooltipContainer
-
-Чтобы использовать тултип без [`Panel`](#/Panel), [`PanelHeader`](#/PanelHeader) или [`FixedLayout`](#/FixedLayout):
-
-- в скроллящемся контейнере — замените какой-нибудь элемент, внутри которого нет скролла, на `<OnboardingTooltipContainer>` и добавьте ему `position: relative` (или другую не-static).
-- внутри `position: fixed` — `<OnboardingTooltipContainer fixed>`
-
-```jsx { "props": { "layout": false } }
-<>
-  <OnboardingTooltipContainer style={{ minHeight: '120vh' }}>
-    <OnboardingTooltip text="Я скроллюсь">
-      <div style={{ display: 'inline-block' }}>
-        <Avatar />
-      </div>
-    </OnboardingTooltip>
-    <OnboardingTooltip text="Двигаем стрелочку" arrowOffset={20}>
-      <div style={{ display: 'inline-block', marginLeft: 100 }}>
-        <Avatar />
-      </div>
-    </OnboardingTooltip>
-  </OnboardingTooltipContainer>
-  <OnboardingTooltipContainer
-    fixed
-    style={{
-      minHeight: '30px',
-      border: '1px solid',
-      margin: '100px 100px 0',
-      position: 'relative',
-      background: 'var(--vkui--color_background_content)',
-      zIndex: 1,
-    }}
-  >
-    <OnboardingTooltip text="Я вылезаю (fixed)">
-      <div style={{ display: 'inline-block' }}>
-        <Avatar />
-      </div>
-    </OnboardingTooltip>
-  </OnboardingTooltipContainer>
-  <OnboardingTooltipContainer
-    style={{
-      minHeight: '100vh',
-      border: '1px solid',
-      margin: '64px 100px 100px',
-      position: 'relative',
-      background: 'var(--vkui--color_background_content)',
-      zIndex: 1,
-    }}
-  >
-    <OnboardingTooltip text="Я прилип слева">
-      <div style={{ display: 'inline-block', position: 'absolute', right: 0 }}>
-        <Avatar />
-      </div>
-    </OnboardingTooltip>
-    <OnboardingTooltip text="Я прилип справа">
-      <div style={{ display: 'inline-block' }}>
-        <Avatar />
-      </div>
-    </OnboardingTooltip>
-    <OnboardingTooltip text="Я прилип слева">
-      <div
-        style={{
-          display: 'inline-block',
-          position: 'absolute',
-          left: 0,
-          bottom: 0,
-        }}
-      >
-        <Avatar />
-      </div>
-    </OnboardingTooltip>
-    <OnboardingTooltip text="Я прилип справа">
-      <div
-        style={{
-          display: 'inline-block',
-          position: 'absolute',
-          right: 0,
-          bottom: 0,
-        }}
-      >
-        <Avatar />
-      </div>
-    </OnboardingTooltip>
-    <OnboardingTooltip text="Я по центру 😎">
-      <div
-        style={{
-          display: 'inline-block',
-          position: 'absolute',
-          left: '50%',
-          top: '50%',
-          transform: 'translate(50%, 50%)',
-        }}
-      >
-        <Avatar />
-      </div>
-    </OnboardingTooltip>
-  </OnboardingTooltipContainer>
-  <div style={{ height: '100vh' }}></div>
-  <OnboardingTooltipContainer fixed style={{ position: 'fixed', bottom: 0, width: '100%' }}>
-    <OnboardingTooltip text="Я прибит к низу">
-      <div style={{ display: 'inline-block' }}>
-        <Avatar />
-      </div>
-    </OnboardingTooltip>
-  </OnboardingTooltipContainer>
-</>
-```
-
-## Цветовые варианты
-
-```jsx { "props": { "layout": false } }
-<OnboardingTooltipContainer>
-  <OnboardingTooltip placement="right" text={`appearance="accent"`} appearance="accent">
-    <div style={{ width: 50, margin: 10 }}>
-      <Avatar />
-    </div>
-  </OnboardingTooltip>
-  <OnboardingTooltip placement="right" text={`appearance="neutral"`} appearance="neutral">
-    <div style={{ width: 50, margin: 10 }}>
-      <Avatar />
-    </div>
-  </OnboardingTooltip>
-  <OnboardingTooltip placement="right" text={`appearance="white`} appearance="white">
-    <div style={{ width: 50, margin: 10 }}>
-      <Avatar />
-    </div>
-  </OnboardingTooltip>
-  <OnboardingTooltip placement="right" text={`appearance="black"`} appearance="black">
-    <div style={{ width: 50, margin: 10 }}>
-      <Avatar />
-    </div>
-  </OnboardingTooltip>
-  <OnboardingTooltip placement="right" text={`appearance="inversion"`} appearance="inversion">
-    <div style={{ width: 50, margin: 10 }}>
-      <Avatar />
-    </div>
-  </OnboardingTooltip>
-</OnboardingTooltipContainer>
-```
-
-## Кастомная стрелка – `ArrowIcon`
-
-> ⚠️ Для начала, следует ознакомиться с описанием параметра `ArrowIcon`.
-
-```jsx { "props": { "layout": false, "adaptivity": true } }
-const ARROW_HEIGHT = 11;
-
-/**
- * @param {React.SVGAttributes<SVGSVGElement>} props
- */
-const CustomIcon = (props) => {
-  return (
-    <svg
-      width="80"
-      height={ARROW_HEIGHT}
-      viewBox={`0 0 80 ${ARROW_HEIGHT}`}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path d="M40 0C33 5.5 20 10 0 10v1h80v-1C60 10 47 5.5 40 0Z" fill="currentColor" />
-    </svg>
-  );
-};
-
-const App = () => {
-  return (
-    <OnboardingTooltipContainer>
-      <OnboardingTooltip
-        text="У этого тултипа кастомная стрелка"
-        arrowHeight={ARROW_HEIGHT}
-        arrowPadding={6}
-        ArrowIcon={CustomIcon}
-      >
-        <div
-          style={{
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-          }}
-        >
-          Якорь
-        </div>
-      </OnboardingTooltip>
-    </OnboardingTooltipContainer>
-  );
-};
-
-<App />;
-```

package/src/components/OnboardingTooltip/__image_snapshots__/onboardingtooltip-android-chromium-dark-1-snap.png

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

package/src/components/OnboardingTooltip/__image_snapshots__/onboardingtooltip-android-chromium-light-1-snap.png

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

package/src/components/OnboardingTooltip/__image_snapshots__/onboardingtooltip-ios-webkit-dark-1-snap.png

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

package/src/components/OnboardingTooltip/__image_snapshots__/onboardingtooltip-ios-webkit-light-1-snap.png

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

package/src/components/OnboardingTooltip/__image_snapshots__/onboardingtooltip-vkcom-chromium-dark-1-snap.png

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

package/src/components/OnboardingTooltip/__image_snapshots__/onboardingtooltip-vkcom-chromium-light-1-snap.png

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

package/src/components/OnboardingTooltip/__image_snapshots__/onboardingtooltip-vkcom-firefox-dark-1-snap.png

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

package/src/components/OnboardingTooltip/__image_snapshots__/onboardingtooltip-vkcom-firefox-light-1-snap.png

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

package/src/components/OnboardingTooltip/__image_snapshots__/onboardingtooltip-vkcom-webkit-dark-1-snap.png

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

package/src/components/OnboardingTooltip/__image_snapshots__/onboardingtooltip-vkcom-webkit-light-1-snap.png

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

package/src/components/Pagination/Pagination.e2e-playground.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { ComponentPlayground, type ComponentPlaygroundProps } from '@vkui-e2e/playground-helpers';
-import { Pagination, type PaginationProps } from './Pagination';
-
-export const PaginationPlayground = (props: ComponentPlaygroundProps) => {
-  return (
-    <ComponentPlayground
-      {...props}
-      propSets={[
-        {
-          $adaptivity: 'y',
-        },
-        {
-          currentPage: [1],
-          totalPages: [3],
-          disabled: [undefined, true],
-          $adaptivity: 'y',
-        },
-        {
-          currentPage: [4],
-          totalPages: [123],
-          siblingCount: [0],
-          $adaptivity: 'y',
-        },
-      ]}
-    >
-      {(props: PaginationProps) => <Pagination {...props} />}
-    </ComponentPlayground>
-  );
-};

package/src/components/Pagination/Pagination.e2e.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { test } from '@vkui-e2e/test';
-import { PaginationPlayground } from './Pagination.e2e-playground';
-
-test('Pagination', async ({
-  mount,
-  expectScreenshotClippedToContent,
-  componentPlaygroundProps,
-}) => {
-  await mount(<PaginationPlayground {...componentPlaygroundProps} />);
-  await expectScreenshotClippedToContent();
-});

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { useArgs } from '@storybook/preview-api';
-import { Meta, StoryObj } from '@storybook/react';
-import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
-import { Pagination, PaginationProps } from './Pagination';
-
-const story: Meta<PaginationProps> = {
-  title: 'Blocks/Pagination',
-  component: Pagination,
-  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
-};
-
-export default story;
-
-type Story = StoryObj<PaginationProps>;
-
-export const Playground: Story = {
-  render: function Render(args) {
-    const [, updateArg] = useArgs();
-    const onPageChange = (page: number) => {
-      updateArg({ currentPage: page });
-    };
-
-    return <Pagination {...args} onChange={onPageChange} />;
-  },
-  args: {
-    currentPage: 1,
-    boundaryCount: 2,
-    totalPages: 25,
-  },
-};

package/src/components/Pagination/Pagination.test.tsx

@@ -1,6 +0,0 @@
-import { baselineComponent } from '../../testing/utils';
-import { Pagination } from './Pagination';
-
-describe('Pagination', () => {
-  baselineComponent(Pagination);
-});

package/src/components/Pagination/Readme.md

@@ -1,105 +0,0 @@
-Чаще всего используется в больших списках или таблицах, для более понятного структурирования и деления информации.
-
-По умолчанию многоточие показывается когда кол-во страниц `> 7`. Чтобы повлиять на это поведение, существуют параметры `siblingCount` и `boundaryCount`.
-К примеру, если выставить `siblingCount={0}` или `boundaryCount={0}`, то многоточие появится уже при `> 5`.
-Если выставить и `siblingCount={0}`, и `boundaryCount={0}`, то `> 4`.
-
-> При ширине `< 380px` рекомендуется отключать `siblingCount` передав в него значение `0`.
-
-## `usePagination`
-
-Для полной кастомизации можно использовать хук `usePagination()`. Возвращает массив типа `[1, 2, 3, 4, 5, 'end-ellipsis', 8]`. Принимает почти те же параметры, что и `Pagination`.
-
-```jsx { "props": { "layout": false, "adaptivity": true, "iframe": false } }
-const Example = () => {
-  const [sizeY, setSizeY] = useState('compact');
-  const [currentPage, setCurrentPage] = useState(1);
-  const [siblingCount, setSiblingCount] = useState(0);
-  const [boundaryCount, setBoundaryCount] = useState(1);
-  const [totalPages, setTotalPages] = useState(123);
-  const [disabled, setDisabled] = useState(false);
-
-  const handleChange = React.useCallback((page) => {
-    setCurrentPage(page);
-  }, []);
-
-  return (
-    <div style={rootContainerStyles}>
-      <AdaptivityProvider sizeY={sizeY}>
-        <div style={demoContainerStyles}>
-          <Pagination
-            currentPage={currentPage}
-            siblingCount={siblingCount}
-            boundaryCount={boundaryCount}
-            totalPages={totalPages}
-            disabled={disabled}
-            onChange={handleChange}
-          />
-        </div>
-      </AdaptivityProvider>
-      <div style={propsContainerStyles}>
-        <FormItem top="sizeY">
-          <Select
-            value={sizeY}
-            onChange={(e) => setSizeY(e.target.value)}
-            options={[
-              { label: 'compact', value: 'compact' },
-              { label: 'regular', value: 'regular' },
-            ]}
-          />
-        </FormItem>
-        <FormItem top="prop[currentPage]">
-          <Input
-            type="number"
-            value={currentPage}
-            onChange={({ target: { value } }) => setCurrentPage(Number(value))}
-          />
-        </FormItem>
-        <FormItem top="prop[siblingCount]">
-          <Input
-            type="number"
-            value={siblingCount}
-            onChange={({ target: { value } }) => setSiblingCount(Number(value))}
-          />
-        </FormItem>
-        <FormItem top="prop[boundaryCount]">
-          <Input
-            type="number"
-            value={boundaryCount}
-            onChange={({ target: { value } }) => setBoundaryCount(Number(value))}
-          />
-        </FormItem>
-        <FormItem top="prop[totalPages]">
-          <Input
-            type="number"
-            value={totalPages}
-            onChange={({ target: { value } }) => setTotalPages(Number(value))}
-          />
-        </FormItem>
-        <FormItem top="prop[disabled]">
-          <Checkbox value={disabled} onChange={({ target: { checked } }) => setDisabled(checked)}>
-            disabled
-          </Checkbox>
-        </FormItem>
-      </div>
-    </div>
-  );
-};
-
-const rootContainerStyles = {
-  display: 'flex',
-  flexDirection: 'row-reverse',
-  flexWrap: 'wrap',
-  justifyContent: 'center',
-};
-
-const demoContainerStyles = {
-  flexGrow: 2,
-  paddingTop: 24,
-  paddingBottom: 24,
-};
-
-const propsContainerStyles = { minWidth: 200 };
-
-<Example />;
-```

package/src/components/Pagination/__image_snapshots__/pagination-android-chromium-dark-1-snap.png

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

package/src/components/Pagination/__image_snapshots__/pagination-android-chromium-light-1-snap.png

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

package/src/components/Pagination/__image_snapshots__/pagination-ios-webkit-dark-1-snap.png

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

package/src/components/Pagination/__image_snapshots__/pagination-ios-webkit-light-1-snap.png

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

package/src/components/Pagination/__image_snapshots__/pagination-vkcom-chromium-dark-1-snap.png

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

package/src/components/Pagination/__image_snapshots__/pagination-vkcom-chromium-light-1-snap.png

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

package/src/components/Pagination/__image_snapshots__/pagination-vkcom-firefox-dark-1-snap.png

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

package/src/components/Pagination/__image_snapshots__/pagination-vkcom-firefox-light-1-snap.png

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

package/src/components/Pagination/__image_snapshots__/pagination-vkcom-webkit-dark-1-snap.png

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

package/src/components/Pagination/__image_snapshots__/pagination-vkcom-webkit-light-1-snap.png

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

package/src/components/Panel/Panel.e2e-playground.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { ComponentPlayground, type ComponentPlaygroundProps } from '@vkui-e2e/playground-helpers';
-import { Group } from '../Group/Group';
-import { PanelHeader } from '../PanelHeader/PanelHeader';
-import { Panel, type PanelProps } from './Panel';
-
-const content = (h: number) => (
-  <Group>
-    <div style={{ minHeight: `${h}px`, width: '100px' }}>top text</div>
-  </Group>
-);
-
-export const PanelPlayground = (props: ComponentPlaygroundProps) => {
-  return (
-    <ComponentPlayground
-      {...props}
-      propSets={[
-        {
-          centered: [true, false],
-          children: [
-            <React.Fragment key="">
-              <PanelHeader>Head</PanelHeader>
-              {content(500)}
-            </React.Fragment>,
-            <React.Fragment key="">
-              <PanelHeader>Head</PanelHeader>
-              {content(30)}
-            </React.Fragment>,
-          ],
-          $adaptivity: 'x',
-        },
-      ]}
-    >
-      {(props: PanelProps) => (
-        <div
-          style={{
-            height: '200px',
-            overflow: 'auto',
-            transform: 'translateZ(0)',
-            // чтобы было проще видеть разницу скриншотов
-            border: '1px solid blue',
-            marginBottom: '10px',
-          }}
-        >
-          <Panel {...props} />
-        </div>
-      )}
-    </ComponentPlayground>
-  );
-};