@skbkontur/react-ui 5.1.7 → 5.2.0

package/cjs/components/DateInput/__creevey__/DateInput.creevey.mts

@@ -1,156 +0,0 @@
-import { story, kind, test } from 'creevey';
-import { Key } from 'selenium-webdriver';
-
-import { delay } from '../../../lib/delay';
-
-kind('DateInput', () => {
-  story('Simple', () => {
-    test('idle', async (context) => {
-      await context.matchImage(await context.takeScreenshot(), 'idle');
-    });
-
-    test('focus', async (context) => {
-      await context.webdriver.executeScript(function () {
-        const input = window.document.querySelector("[data-comp-name~='DateInput']");
-        if (input instanceof HTMLElement) {
-          input.focus();
-        }
-      });
-      await context.matchImage(await context.takeScreenshot(), 'focus');
-    });
-  });
-
-  story('Disabled', () => {
-    test('idle', async (context) => {
-      await context.matchImage(await context.takeScreenshot(), 'idle');
-    });
-
-    test('focus', async (context) => {
-      await context.webdriver.executeScript(function () {
-        const input = window.document.querySelector("[data-comp-name~='DateInput']");
-        if (input instanceof HTMLElement) {
-          input.focus();
-        }
-      });
-      await context.matchImage(await context.takeScreenshot(), 'focus');
-    });
-  });
-
-  story('WithWidth', () => {
-    test('idle', async (context) => {
-      await context.matchImage(await context.takeScreenshot(), 'idle');
-    });
-
-    test('focus', async (context) => {
-      await context.webdriver.executeScript(function () {
-        const input = window.document.querySelector("[data-comp-name~='DateInput']");
-        if (input instanceof HTMLElement) {
-          input.focus();
-        }
-      });
-      await context.matchImage(await context.takeScreenshot(), 'focus');
-    });
-  });
-
-  story('BlurAlwaysAfterChange', () => {
-    test('value not changed', async (context) => {
-      await context.webdriver.executeScript(function () {
-        const input = window.document.querySelector("[data-comp-name~='DateInput']");
-        if (input instanceof HTMLElement) {
-          input.focus();
-        }
-      });
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: 'body' }))
-        .perform();
-      await delay(500);
-      await context.matchImage(await context.takeScreenshot(), 'value not changed');
-    });
-
-    test('value changed', async (context) => {
-      await context.webdriver.executeScript(function () {
-        const input = window.document.querySelector("[data-comp-name~='DateInput']");
-        if (input instanceof HTMLElement) {
-          input.focus();
-        }
-      });
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .sendKeys('12')
-        .click(context.webdriver.findElement({ css: 'body' }))
-        .perform();
-      await delay(500);
-      await context.matchImage(await context.takeScreenshot(), 'value changed');
-    });
-
-    test('value restored', async (context) => {
-      await context.webdriver.executeScript(function () {
-        const input = window.document.querySelector("[data-comp-name~='DateInput']");
-        if (input instanceof HTMLElement) {
-          input.focus();
-        }
-      });
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .sendKeys(Key.NUMPAD1)
-        .click(context.webdriver.findElement({ css: 'body' }))
-        .perform();
-      await context.webdriver.executeScript(function () {
-        const input = window.document.querySelector("[data-comp-name~='DateInput']");
-        if (input instanceof HTMLElement) {
-          input.blur();
-        }
-      });
-      await context.matchImage(await context.takeScreenshot(), 'value restored');
-    });
-  });
-
-  story('WithNoValue', () => {
-    test('idle', async (context) => {
-      await context.matchImage(await context.takeScreenshot());
-    });
-
-    test('focused', async (context) => {
-      await context.webdriver.executeScript(function () {
-        const input = window.document.querySelector("[data-comp-name~='DateInput']");
-        if (input instanceof HTMLElement) {
-          input.focus();
-        }
-      });
-      await context.matchImage(await context.takeScreenshot());
-    });
-  });
-
-  story('WithError', () => {
-    test('focused', async (context) => {
-      const plain = await context.takeScreenshot();
-      const DateInputPlaceholder = context.webdriver.findElement({
-        css: '[data-tid~="DateFragmentsView__placeholder"]',
-      });
-      await context.webdriver.actions({ bridge: true }).click(DateInputPlaceholder).perform();
-      await delay(1000);
-      const focused = await context.takeScreenshot();
-      await context.matchImages({ plain, focused });
-    });
-  });
-
-  story('ShouldSetFocusOnPlaceholderClick', ({ setStoryParameters }) => {
-    setStoryParameters({ skip: { 'chrome only': { in: /^(?!\bchrome2022\b)/ } } });
-
-    test('focused', async (context) => {
-      const DateInputPlaceholder = context.webdriver.findElement({
-        css: '[data-tid~="DateFragmentsView__placeholder"]',
-      });
-      await context.webdriver.actions({ bridge: true }).click(DateInputPlaceholder).perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot());
-    });
-  });
-});

package/cjs/components/DateInput/__docs__/DateInput.mdx

@@ -1,23 +0,0 @@
-import * as DateInputStories from './DateInput.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={DateInputStories} />
-
-<Header component="DateInput" guides="https://guides.kontur.ru/components/input-fields/calendar/" />
-
-<Description />
-
-## Базовый пример
-
-<Primary />
-
-## Пропы
-
-<PropsTable />
-
-## Примеры использования
-
-<Stories title="" includePrimary={false} />

package/cjs/components/DatePicker/__creevey__/DatePicker.creevey.mts

@@ -1,209 +0,0 @@
-import { story, kind, test } from 'creevey';
-
-import { delay } from '../../../lib/delay';
-
-kind('DatePicker', () => {
-  story('WithMouseeventHandlers', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: {
-        flaky: {
-          in: ['chrome2022Dark'],
-          tests: ['DateSelect year'],
-        },
-      },
-    });
-    test('opened', async (context) => {
-      await delay(1000);
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'opened');
-    });
-
-    test('DateSelect month', async (context) => {
-      await delay(1000);
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
-        .perform();
-      await delay(1000);
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(
-          context.webdriver.findElement({
-            css: '[data-tid="MonthView__month"]:first-child [data-tid="MonthView__headerMonth"] [data-tid="DateSelect__caption"]',
-          }),
-        )
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'DateSelect month');
-    });
-
-    test('DateSelect year', async (context) => {
-      await delay(1000);
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
-        .perform();
-      await delay(1000);
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(
-          context.webdriver.findElement({
-            css: '[data-comp-name~="MonthView"]:first-child [data-tid="MonthView__headerYear"] [data-tid="DateSelect__caption"]',
-          }),
-        )
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'DateSelect year');
-    });
-  });
-
-  story('DatePickerWithMinMaxDate', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: {
-        flaky: {
-          in: /^(?!\b(chrome|ie11)\b)/,
-          tests: ['DateSelect months', 'DateSelect years'],
-        },
-      },
-    });
-
-    test('DateSelect months', async (context) => {
-      await delay(1000);
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
-        .pause(1000)
-        .perform();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(
-          context.webdriver.findElement({
-            css: '[data-tid="MonthView__month"]:first-child [data-tid="MonthView__headerMonth"] [data-tid="DateSelect__caption"]',
-          }),
-        )
-        .pause(1000)
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'DateSelect months');
-    });
-
-    test('DateSelect years', async (context) => {
-      await delay(1000);
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
-        .pause(1000)
-        .perform();
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(
-          context.webdriver.findElement({
-            css: '[data-comp-name~="MonthView"]:first-child [data-tid="MonthView__headerYear"] [data-tid="DateSelect__caption"]',
-          }),
-        )
-        .pause(1000)
-        .perform();
-      await context.matchImage(await context.takeScreenshot(), 'DateSelect years');
-    });
-  });
-
-  story('DatePickerInRelativeBody', () => {
-    test('opened', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="toggle-relative-position"]' }))
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'opened');
-    });
-  });
-
-  story('WithManualPosition', ({ setStoryParameters }) => {
-    setStoryParameters({ skip: { 'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ } } });
-
-    test('opened top without relative position', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'opened top without relative position');
-    });
-
-    test('opened bottom without relative position', 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~="DatePicker"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'opened bottom without relative position');
-    });
-
-    test('opened top with relative position', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="relative"]' }))
-        .pause(1000)
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'opened top with relative position');
-    });
-
-    test('opened bottom with relative position', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
-        .pause(1000)
-        .click(context.webdriver.findElement({ css: '[data-tid~="relative"]' }))
-        .pause(1000)
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'opened bottom');
-    });
-  });
-  story('MobilePicker', () => {
-    test('MobilePicker on iphone opened', async (context) => {
-      await delay(1000);
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'MobilePicker on iphone opened');
-    });
-  });
-});

package/cjs/components/DatePicker/__docs__/DatePicker.mdx

@@ -1,27 +0,0 @@
-import * as DatePickerStories from './DatePicker.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={DatePickerStories} />
-
-<Header
-  component="DatePicker"
-  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 />
-
-## Базовый пример
-
-<Primary />
-
-## Пропы
-
-<PropsTable />
-
-## Примеры использования
-
-<Stories title="" includePrimary={false} />

package/cjs/components/DateRangePicker/__creevey__/DateRangePicker.creevey.mts

@@ -1,155 +0,0 @@
-import { story, kind, test } from 'creevey';
-
-import { delay } from '../../../lib/delay';
-
-kind('DateRangePicker', () => {
-  story('MinMax', () => {
-    test('opened', async (context) => {
-      await delay(1000);
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid="DateRangePicker__start"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'opened');
-    });
-
-    test('DateSelect month', async (context) => {
-      await delay(1000);
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid="DateRangePicker__start"]' }))
-        .perform();
-      await delay(1000);
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(
-          context.webdriver.findElement({
-            css: '[data-tid="MonthView__month"]:first-child [data-tid="MonthView__headerMonth"] [data-tid="DateSelect__caption"]',
-          }),
-        )
-        .move({ origin: context.webdriver.findElement({ css: 'body' }) })
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'DateSelect month');
-    });
-
-    test('DateSelect year', async (context) => {
-      await delay(1000);
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid="DateRangePicker__start"]' }))
-        .perform();
-      await delay(1000);
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(
-          context.webdriver.findElement({
-            css: '[data-comp-name~="MonthView"]:first-child [data-tid="MonthView__headerYear"] [data-tid="DateSelect__caption"]',
-          }),
-        )
-        .move({ origin: context.webdriver.findElement({ css: 'body' }) })
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'DateSelect year');
-    });
-  });
-
-  story('TodayButton', ({ setStoryParameters }) => {
-    setStoryParameters({ skip: { 'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ } } });
-
-    test('opened', async (context) => {
-      await delay(1000);
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid="DateRangePicker__start"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'opened');
-    });
-  });
-
-  story('OptionalRange', ({ setStoryParameters }) => {
-    setStoryParameters({ skip: { 'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ } } });
-
-    test('opened', async (context) => {
-      await delay(1000);
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid="DateRangePicker__start"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'opened');
-    });
-  });
-
-  story('OptionalRangeWithTodayButton', ({ setStoryParameters }) => {
-    setStoryParameters({ skip: { 'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ } } });
-
-    test('opened', async (context) => {
-      await delay(1000);
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid="DateRangePicker__start"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'opened');
-    });
-  });
-
-  story('MenuPos', ({ setStoryParameters }) => {
-    setStoryParameters({ skip: { 'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ } } });
-
-    test('opened position top', async (context) => {
-      await delay(1000);
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid="position-top"] [data-tid="DateRangePicker__start"]' }))
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'opened position top');
-    });
-
-    test('opened position bottom', async (context) => {
-      await delay(1000);
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(
-          context.webdriver.findElement({ css: '[data-tid="position-bottom"] [data-tid="DateRangePicker__start"]' }),
-        )
-        .perform();
-      await delay(1000);
-      await context.matchImage(await context.takeScreenshot(), 'opened position bottom');
-    });
-  });
-
-  story('MobilePicker', () => {
-    test('MobilePicker on iphone opened', async (context) => {
-      await delay(1000);
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: '[data-tid="DateRangePicker__start"]' }))
-        .perform();
-      await delay(2000);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'MobilePicker on iphone opened');
-    });
-  });
-});

package/cjs/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',
-};
-```