@skbkontur/react-ui 5.1.7 → 5.2.0

package/components/DateRangePicker/__docs__/DateRangePicker.mdx

@@ -1,123 +0,0 @@
-import * as DateRangePickerStories from './DateRangePicker.docs.stories.tsx';
-import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
-import { Meta } from '../../../.storybook/Meta';
-import { Header } from '../../../.storybook/Header';
-import { PropsTable } from '../../../.storybook/PropsTable';
-
-<Meta of={DateRangePickerStories} />
-
-<Header
-  component="DateRangePicker"
-  guides="https://guides.kontur.ru/components/input-fields/calendar/"
-  figma="https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=281%3A18389"
-/>
-
-<Description />
-
-## Базовый пример
-
-Компонент выбора периода состоит из 3-х дочерних компонентов:
-
-- `<DateRangePicker.Start>` — начало периода с настройками как у `DateInput`
-- `<DateRangePicker.End>` — окончание периода с настройками как у `DateInput`
-- `<DateRangePicker.Separator>` — разделитель между полями
-
-Значения задается через пропы у компонентов `Start` и `End`:
-
-- 2 значения указываются в пропах `value={'dd.mm.yyyy'}` (формат настраивается)
-- Пустыми значениями считаются `""`, `null` и `undefined`
-- Минимальная дата задаётся в `Start` через `minDate`, максимальная — в `End` через `maxDate`
-
-<Primary />
-
-## Пропы
-
-<PropsTable />
-
-<Stories title="" includePrimary={false} />
-
-## Адаптивность
-
-На мобильных устройствах доступны 2 варианта отображения:
-
-- Адаптивная версия в попапе (по умолчанию)
-
-- 2 нативных календаря через `useMobileNativeDatePicker`. <br /> Ограничение: [календарь в iOS не поддерживает параметры min и max](https://bugs.webkit.org/show_bug.cgi?id=225639)
-
-## Локали по умолчанию
-
-```typescript static
-interface DateRangePickerLocale {
-  today?: string;
-  months?: string[];
-  order?: DateOrder;
-  separator?: DateSeparator;
-  todayAriaLabel?: string;
-  selectMonthAriaLabel?: string;
-  selectYearAriaLabel?: string;
-  selectChosenAriaLabel?: string;
-  dayCellChooseDateAriaLabel?: string;
-  startDateLabel?: string;
-  endDateLabel?: string;
-  startDateEmpty?: string;
-  endDateEmpty?: string;
-}
-
-const ru_RU = {
-  today: 'Сегодня',
-  months: [
-    'Январь',
-    'Февраль',
-    'Март',
-    'Апрель',
-    'Май',
-    'Июнь',
-    'Июль',
-    'Август',
-    'Сентябрь',
-    'Октябрь',
-    'Ноябрь',
-    'Декабрь',
-  ],
-  order: DateOrder.DMY,
-  separator: DateSeparator.Dot,
-  todayAriaLabel: 'Перейти к сегодняшней дате',
-  selectMonthAriaLabel: 'месяц',
-  selectYearAriaLabel: 'год',
-  selectChosenAriaLabel: 'Выбранный',
-  dayCellChooseDateAriaLabel: 'Выбрать дату',
-  startDateLabel: 'Дата начала',
-  endDateLabel: 'Дата окончания',
-  startDateEmpty: 'Без первой даты',
-  endDateEmpty: 'Без второй даты',
-};
-
-const en_GB = {
-  today: 'Endday',
-  months: [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ],
-  order: DateOrder.MDY,
-  separator: DateSeparator.Slash,
-  todayAriaLabel: "Go end today's date",
-  selectMonthAriaLabel: 'month',
-  selectYearAriaLabel: 'year',
-  selectChosenAriaLabel: 'Chosen',
-  dayCellChooseDateAriaLabel: 'Choose date',
-  startDateLabel: 'Start date',
-  endDateLabel: 'End date',
-  startDateEmpty: 'No start date',
-  endDateEmpty: 'No end date',
-};
-```

package/components/Dropdown/__creevey__/Dropdown.creevey.d.mts

@@ -1 +0,0 @@
-export {};

package/components/Dropdown/__creevey__/Dropdown.creevey.mts

@@ -1,184 +0,0 @@
-import { story, kind, test } from 'creevey';
-
-import { delay } from '../../../lib/delay';
-
-kind('Dropdown', () => {
-  story('SimpleDropdown', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: {
-        'hover does not work in chrome': { in: ['chrome2022', 'chrome2022Dark'], tests: ['MenuItem hover'] },
-      },
-    });
-
-    test('idle', async (context) => {
-      const element = await context.webdriver.findElement({ css: '.dropdown-test-container' });
-      await delay(1000);
-      await context.matchImage(await element.takeScreenshot(), 'idle');
-    });
-
-    test('clicked', async (context) => {
-      const element = await context.webdriver.findElement({ css: '.dropdown-test-container' });
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await element.takeScreenshot(), 'clicked');
-    });
-
-    test('MenuItem hover', async (context) => {
-      const element = await context.webdriver.findElement({ css: '.dropdown-test-container' });
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
-        .perform();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .move({
-          origin: context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }),
-        })
-        .perform();
-      await delay(1000);
-      await context.matchImage(await element.takeScreenshot(), 'MenuItem hover');
-    });
-
-    test('selected item', async (context) => {
-      const element = await context.webdriver.findElement({ css: '.dropdown-test-container' });
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
-        .perform();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await element.takeScreenshot(), 'selected item');
-    });
-  });
-
-  story('WithMenuItemIcon', ({ setStoryParameters }) => {
-    setStoryParameters({ captureElement: '.dropdown-test-container' });
-
-    test('clicked', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'clicked');
-    });
-  });
-
-  story('InsideScrollableContainer', ({ setStoryParameters }) => {
-    setStoryParameters({ captureElement: '.dropdown-test-container' });
-
-    test('scrolled', async (context) => {
-      await context.webdriver
-        .actions()
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
-        .perform();
-      const opened = await context.takeScreenshot();
-      await context.webdriver.executeScript(function () {
-        const scrollContainer = window.document.querySelector('.dropdown-test-container') as HTMLElement;
-        scrollContainer.scrollTop = scrollContainer.scrollHeight;
-      });
-      const scrolled = await context.takeScreenshot();
-      await context.matchImages({ opened, scrolled });
-    });
-  });
-
-  story('WithCustomSelectTheme', () => {
-    test('clicked', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'clicked');
-    });
-  });
-
-  story('WithManualPosition', ({ setStoryParameters }) => {
-    setStoryParameters({ skip: { 'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ } } });
-
-    test('opened top with portal', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'opened top with portal');
-    });
-
-    test('opened bottom with portal', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
-        .pause(1000)
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'opened bottom with portal');
-    });
-
-    test('opened top without portal', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="portal"]' }))
-        .pause(1000)
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'opened top without portal');
-    });
-
-    test('opened bottom without portal', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="portal"]' }))
-        .pause(1000)
-        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
-        .pause(1000)
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'opened bottom without portal');
-    });
-  });
-
-  story('Size', () => {
-    test('clicked all', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid="open-all"]' }))
-        .pause(500)
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'ClickedAll');
-    });
-  });
-});

package/components/Dropdown/__docs__/Dropdown.mdx

@@ -1,27 +0,0 @@
-import * as DropdownStories from './Dropdown.docs.stories.tsx';
-import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
-import { Meta } from '../../../.storybook/Meta';
-import { Header } from '../../../.storybook/Header';
-import { PropsTable } from '../../../.storybook/PropsTable';
-
-<Meta of={DropdownStories} />
-
-<Header
-  component="Dropdown"
-  guides="https://guides.kontur.ru/components/actions/menu-button/"
-  figma="https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=200%3A2498"
-/>
-
-<Description />
-
-## Базовый пример
-
-<Primary />
-
-## Пропы
-
-<PropsTable />
-
-## Примеры использования
-
-<Stories title="" includePrimary={false} />

package/components/DropdownMenu/__creevey__/DropdownMenu.creevey.d.mts

@@ -1 +0,0 @@
-export {};

package/components/DropdownMenu/__creevey__/DropdownMenu.creevey.mts

@@ -1,263 +0,0 @@
-import { story, kind, test } from 'creevey';
-import { Key } from 'selenium-webdriver';
-
-import { delay } from '../../../lib/delay';
-
-const outOfViewTests = (side: 'left' | 'right') => {
-  test('out of viewport', async (context) => {
-    if (side === 'left') {
-      await context.webdriver.executeScript(function () {
-        const container = window.document.querySelector('[data-tid="container"]') as HTMLElement;
-        container.scrollLeft = container.scrollWidth;
-      });
-    }
-
-    await context.webdriver
-      .actions({
-        bridge: true,
-      })
-      .click(context.webdriver.findElement({ css: '[data-tid="firstMenu"]' }))
-      .perform();
-    await delay(1000);
-
-    await context.matchImage(await context.takeScreenshot(), 'out of viewport');
-  });
-
-  test('out of edge with min menu width', async (context) => {
-    if (side === 'left') {
-      await context.webdriver.executeScript(function () {
-        const container = window.document.querySelector('[data-tid="container"]') as HTMLElement;
-        container.scrollLeft = container.scrollWidth;
-      });
-    }
-
-    await context.webdriver
-      .actions({
-        bridge: true,
-      })
-      .click(context.webdriver.findElement({ css: '[data-tid="secondMenu"]' }))
-      .perform();
-    await delay(1000);
-
-    await context.matchImage(await context.takeScreenshot(), 'out of viewport with min menu width');
-  });
-};
-
-const textAlignmentTests = () => {
-  test('opened', async (context) => {
-    await context.webdriver
-      .actions({
-        bridge: true,
-      })
-      .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
-      .perform();
-    await delay(1000);
-    await context.matchImage(await context.takeScreenshot(), 'opened');
-  });
-};
-
-const navigateInNestedMenuItems = () => {
-  test('navigate', async (context) => {
-    await context.webdriver
-      .actions({
-        bridge: true,
-      })
-      .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
-      .sendKeys(Key.DOWN)
-      .sendKeys(Key.DOWN)
-      .perform();
-    const arrowDown = await context.webdriver.takeScreenshot();
-    await context.webdriver
-      .actions({
-        bridge: true,
-      })
-      .sendKeys(Key.ENTER)
-      .perform();
-    await delay(1000);
-    const enter = await context.webdriver.takeScreenshot();
-    await context.matchImages({ arrowDown, enter });
-  });
-};
-
-kind('DropdownMenu', () => {
-  story('SimpleExample', () => {
-    test('plain', async (context) => {
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'plain');
-    });
-
-    test('clickAfterClickedOnCaption', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
-        .perform();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'clickAfterClickedOnCaption');
-    });
-
-    test('clicked', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'clicked');
-    });
-
-    test('tabPress', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .sendKeys(Key.TAB)
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'tabPress');
-    });
-
-    test('enterPress', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .sendKeys(Key.TAB)
-        .perform();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .sendKeys(Key.ENTER)
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'enterPress');
-    });
-
-    test('escapePress', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .sendKeys(Key.TAB)
-        .perform();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .sendKeys(Key.ENTER)
-        .perform();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .sendKeys(Key.ESCAPE)
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'escapePress');
-    });
-  });
-
-  story('CaptionWidth', () => {
-    test('plain', async (context) => {
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'plain');
-    });
-  });
-
-  story('WithHeaderAndFooter', () => {
-    test('clicked', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'clicked');
-    });
-
-    test('scrolled by 100', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
-        .perform();
-      await context.webdriver.executeScript(function () {
-        const scrollContainer = window.document.querySelector('[data-tid~="ScrollContainer__inner"]') as HTMLElement;
-        scrollContainer.scrollTop += 100;
-      });
-      await delay(2000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'scrolled by 100');
-    });
-
-    test('scrolled down to bottom', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
-        .perform();
-      await context.webdriver.executeScript(function () {
-        const scrollContainer = window.document.querySelector('[data-tid~="ScrollContainer__inner"]') as HTMLElement;
-        scrollContainer.scrollTop += scrollContainer.scrollHeight;
-      });
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'scrolled down to bottom');
-    });
-  });
-
-  story('MobileExampleWithHorizontalPadding', ({ setStoryParameters }) => {
-    setStoryParameters({ captureElement: null });
-
-    test('opened', async (context) => {
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="DropdownMenu"]' }))
-        .perform();
-      await delay(200);
-      await context.webdriver
-        .actions({ bridge: true })
-        .move({ origin: context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }) })
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'opened');
-    });
-  });
-  story('MenuOutOfViewPortRight', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: { flacky: { in: ['firefox2022', 'firefox2022Dark'] } },
-    });
-    outOfViewTests('right');
-  });
-  story('MenuOutOfViewPortLeft', () => {
-    outOfViewTests('left');
-  });
-
-  story('WithItemsAndIcons', ({ setStoryParameters }) => {
-    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
-
-    textAlignmentTests();
-  });
-
-  story('WithItemsAndIconsWithoutTextAlignment', ({ setStoryParameters }) => {
-    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
-
-    textAlignmentTests();
-  });
-
-  story('WithNestedMenuItems', ({ setStoryParameters }) => {
-    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
-
-    navigateInNestedMenuItems();
-  });
-});

package/components/DropdownMenu/__docs__/DropdownMenu.mdx

@@ -1,27 +0,0 @@
-import * as DropdownMenuStories from './DropdownMenu.docs.stories.tsx';
-import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
-import { Meta } from '../../../.storybook/Meta';
-import { Header } from '../../../.storybook/Header';
-import { PropsTable } from '../../../.storybook/PropsTable';
-
-<Meta of={DropdownMenuStories} />
-
-<Header
-  component="DropdownMenu"
-  guides="https://guides.kontur.ru/components/actions/menu-button/"
-  figma="https://www.figma.com/design/87ScqxPzJpF9DcVBNYWOjM/⚡-Kontur-UI?node-id=200-2498&t=I8Bp7OCi6jgkyIbR-0"
-/>
-
-<Description />
-
-## Базовый пример
-
-<Primary />
-
-## Пропы
-
-<PropsTable />
-
-## Примеры использования
-
-<Stories title="" includePrimary={false} />

package/components/FileUploader/__docs__/FileUploader.mdx

@@ -1,27 +0,0 @@
-import * as FileUploaderStories from './FileUploader.docs.stories.tsx';
-import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
-import { Meta } from '../../../.storybook/Meta';
-import { Header } from '../../../.storybook/Header';
-import { PropsTable } from '../../../.storybook/PropsTable';
-
-<Meta of={FileUploaderStories} />
-
-<Header
-  component="FileUploader"
-  guides="https://guides.kontur.ru/components/input-fields/file-uploader/"
-  figma="https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=284%3A11938"
-/>
-
-<Description />
-
-## Базовый пример
-
-<Primary />
-
-## Пропы
-
-<PropsTable />
-
-## Примеры использования
-
-<Stories title="" includePrimary={false} />

package/components/FxInput/__creevey__/FxInput.creevey.d.mts

@@ -1 +0,0 @@
-export {};

package/components/FxInput/__creevey__/FxInput.creevey.mts

@@ -1,21 +0,0 @@
-import { story, kind, test } from 'creevey';
-
-kind('FxInput', () => {
-  story('WithWidthStory', () => {
-    test('inside auto container', async (context) => {
-      const element = await context.webdriver.findElement({ css: '[data-tid="container"]' });
-      await context.matchImage(await element.takeScreenshot(), 'inside auto container');
-    });
-
-    test('inside fixed container', async (context) => {
-      const element = await context.webdriver.findElement({ css: '[data-tid="container"]' });
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '#toggle-width' }))
-        .perform();
-      await context.matchImage(await element.takeScreenshot(), 'inside fixed container');
-    });
-  });
-});