@skbkontur/react-ui 0.0.0-a59755ee68 → 0.0.0-a6f09fbded

package/components/DateRangePicker/DateRangePicker.md

@@ -1,298 +0,0 @@
-Компонент `DateRangePicker` состоит из двух [DateInput](#/Components/DateInput) и одного общего [Calendar](#/Components/Calendar).
-
-- Период задается через `start` и `end`
-- Минимальное и максимальные даты указываются через `minDate` и `maxDate`
-- Значения задаются строкой в формате `dd.mm.yyyy`
-- Пустыми значениями считаются `""`, `null` и `undefined`
-
-```jsx harmony
-const [startValue, setStartValue] = React.useState();
-const [toValue, setEndValue] = React.useState();
-const minDate = "08.07.2024";
-const maxDate = "18.08.2024";
-
-<DateRangePicker
-  start={startValue}
-  end={toValue}
-  minDate={minDate}
-  maxDate={maxDate}
-  onValueChange={console.log}
-  onStartValueChange={setStartValue}
-  onEndValueChange={setEndValue}
-/>
-```
-
-<br />
-
-## Внешний вид
-
-Внешний вид кастомизируется через [дизайн-токены](#/Customization/ThemeShowcase) `dateInput*` и `calendar*`.
-
-
-### Размеры
-
-Через параметр `size` доступны размеры `large`, `medium` и `small`.
-
-```jsx harmony
-import { Gapped, ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
-
-const theme = React.useContext(ThemeContext);
-const createTheme = (tokens) => ThemeFactory.create(tokens, theme);
-
-<Gapped vertical gap={16}>
-  <ThemeContext.Provider value={createTheme({ calendarCellWidth: '44px', calendarCellHeight: '44px' })}>
-    <DateRangePicker size="large" />
-  </ThemeContext.Provider>
-  
-  <ThemeContext.Provider value={createTheme({ calendarCellWidth: '36px', calendarCellHeight: '36px' })}>
-    <DateRangePicker size="medium" />
-  </ThemeContext.Provider>
-
-  <DateRangePicker size="small" />
-</Gapped>
-
-```
-
-### Адаптивность
-
-На мобильных устройствах доступны 2 варианта отображения:
-
-- Адаптивная версия в попапе (по умолчанию)
-- 2 нативных календаря через `useMobileNativeDatePicker`. Ограничение: [календарь в iOS не поддерживает параметры min и max](https://bugs.webkit.org/show_bug.cgi?id=225639)
-
-<br />
-<br />
-
-## Произвольная настройка полей
-
-Для более гибкой кастомизации каждого из полей доступны дочерние элементы:
-- `<DateRangePicker.Start />` — поле «от», настройки как у [DateInput](#/Components/DateInput)
-- `<DateRangePicker.End />` — поле «до», настройки как у [DateInput](#/Components/DateInput)
-- `<DateRangePicker.Separator />` — разделитель
-
-<br />
-
-### Поля без тире
-
-```jsx harmony
-<DateRangePicker>
-  <DateRangePicker.Start style={{ borderRadius: 0 }} />
-  <DateRangePicker.End style={{ marginLeft: -1, borderRadius: 0 }} />
-</DateRangePicker>
-```
-
-### Вертикальное расположение
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<DateRangePicker>
-    <Gapped gap={4} vertical>
-      <DateRangePicker.Start />
-      <DateRangePicker.End />
-    </Gapped>
-</DateRangePicker>
-```
-
-
-### Открытые даты начала или конца
-
-Для полей достпен параметр `optional`, чтобы указывать поля открытыми.
-
-```jsx harmony
-import { Checkbox } from '@skbkontur/react-ui';
-
-<DateRangePicker>
-  <DateRangePicker.Start optional />
-  <DateRangePicker.Separator />
-  <DateRangePicker.End optional />
-</DateRangePicker>
-```
-
-
-<!--
-TODO: ручное форатирование даты
--->
-
-<br />
-
-## Форматирование даты
-
-
-```jsx harmony
-import { DateInput, DateOrder, DateSeparator, Gapped, LocaleContext, Select } from '@skbkontur/react-ui';
-
-class DateInputFormatting extends React.Component {
-  constructor() {
-    this.state = {
-      order: DateOrder.YMD,
-      separator: 'Dot',
-      value: '21.12.2012',
-    };
-  }
-
-  render() {
-    return (
-      <Gapped vertical gap={10}>
-        <div>
-          <span style={{ width: '300px', display: 'inline-block' }}>
-            Порядок компонентов (<tt>DateOrder</tt>)
-          </span>
-          <Select
-            value={this.state.order}
-            items={Object.keys(DateOrder)}
-            onValueChange={order => this.setState({ order })}
-          />
-        </div>
-        <div>
-          <span style={{ width: '300px', display: 'inline-block' }}>
-            Разделитель (<tt>DateSeparator</tt>)
-          </span>
-          <Select
-            value={this.state.separator}
-            items={Object.keys(DateSeparator)}
-            onValueChange={separator => this.setState({ separator })}
-          />
-        </div>
-        <LocaleContext.Provider value={{
-          locale:{
-            DatePicker: {
-              separator: DateSeparator[this.state.separator],
-              order: this.state.order,
-            },
-          }}}
-        >
-          <DateRangePicker onValueChange={value => this.setState({ value })} start={this.state.value} />
-        </LocaleContext.Provider>
-      </Gapped>
-    );
-  }
-}
-
-<DateInputFormatting />;
-```
-
-<!--
-TODO: раздел валидации
--->
-
-<br />
-
-### Выбор дат с ценами
-
-Пример с кастомизацией темы и кастомным рендером дня 
-
-```jsx harmony
-import { ThemeContext, ThemeFactory, CalendarDay } from '@skbkontur/react-ui';
-
-const theme = React.useContext(ThemeContext);
-
-function renderDay(props) {
-  const [date, month] = props.date.split('.').map(Number);
-  const randomDay = date % 6 === 0 || date % 7 === 0 || date % 8 === 0;
-  const randomPrice = Math.round((date / month) * 1000);
-
-  return (
-    <CalendarDay {...props}>
-      <div style={{ fontSize: theme.calendarCellFontSize }}>{date}</div>
-      <div style={{ fontSize: '11px', fontFeatureSettings: 'tnum', fontVariantNumeric: 'tabular-nums' }}>
-        {randomDay ? <>{randomPrice}&thinsp;₽</> : <span style={{ color: theme.endkenTextColorDisabled }}>—</span>}
-      </div>
-    </CalendarDay>
-  );
-}
-
- const [startValue, setStartValue] = React.useState();
- const [toValue, setEndValue] = React.useState();
- const minDate = "08.07.2024";
- const maxDate = "18.08.2024";
-
-<ThemeContext.Provider
-  value={ThemeFactory.create({
-    calendarCellWidth: '48px',
-    calendarCellHeight: '48px',
-    calendarCellLineHeight: '18px',
-    calendarWrapperHeight: '700px',
-    calendarCellBorderRadius: '10px'
-  }, theme)}
->
-  <DateRangePicker
-    start={startValue}
-    end={toValue}
-    minDate={minDate}
-    maxDate={maxDate}
-    size="medium"
-    onValueChange={console.log}
-    onStartValueChange={setStartValue}
-    onEndValueChange={setEndValue}
-    renderDay={renderDay}
-  />
-</ThemeContext.Provider>
-```
-
-## Локали по умолчанию
-
-```typescript static
-interface DatePickerLocale {
-  today?: string;
-  months?: string[];
-  order?: DateOrder;
-  separator?: DateSeparator;
-  todayAriaLabel?: string
-  selectMonthAriaLabel?: string;
-  selectYearAriaLabel?: string;
-  selectChosenAriaLabel?: string;
-  dayCellChooseDateAriaLabel?: string;
-}
-
-const ru_RU = {
-  today: 'Сегодня',
-  months: [
-  'Январь',
-  'Февраль',
-  'Март',
-  'Апрель',
-  'Май',
-  'Июнь',
-  'Июль',
-  'Август',
-  'Сентябрь',
-  'Октябрь',
-  'Ноябрь',
-  'Декабрь',
-  ],
-  order: DateOrder.DMY,
-  separator: DateSeparator.Dot,
-  todayAriaLabel: 'Перейти к сегодняшней дате',
-  selectMonthAriaLabel: 'месяц',
-  selectYearAriaLabel: 'год',
-  selectChosenAriaLabel: 'Выбранный',
-  dayCellChooseDateAriaLabel: 'Выбрать дату',
-};
-
-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',
-};
-```
-

package/components/DateRangePicker/DateRangePickerField/DateRangePickerField.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","useContext","useEffect","DateInput","useResponsiveLayout","DateRangePickerContext","DateRangePickerDataTids","DateRangePickerField","props","_useContext","startValue","endValue","size","setStartValue","setStartOptional","setStartDisabled","setEndValue","setEndOptional","setEndDisabled","setMinDate","setMaxDate","setFocusField","open","close","dateRangePickerRef","startRef","endRef","isStart","type","isEnd","_useResponsiveLayout","isMobile","value","optional","disabled","minDate","maxDate","onValueChange","commonProps","_extends","withIcon","onClick","onFocus","e","onBlur","_dateRangePickerRef$c","nextFocusedElement","relatedTarget","current","contains","createElement","start","ref","end"],"sources":["DateRangePickerField.tsx"],"sourcesContent":["import React, { useContext, useEffect } from 'react';\n\nimport { DateInput, DateInputProps } from '../DateInput';\nimport { useResponsiveLayout } from '../ResponsiveLayout';\n\nimport { DateRangePickerContext } from './DateRangePickerContext';\nimport { DateRangePickerDataTids } from './DateRangePicker';\n\nexport type DateRangePickerFieldType = 'start' | 'end';\n\nexport interface DateRangePickerFieldProps extends Omit<DateInputProps, 'value'> {\n  type: DateRangePickerFieldType;\n  value?: string | null;\n  optional?: boolean;\n  onValueChange: (value: string) => void;\n}\nexport type DateRangePickerFieldWithTypeProps = Omit<DateRangePickerFieldProps, 'type'>;\n\nexport function DateRangePickerField(props: DateRangePickerFieldProps) {\n  const {\n    startValue,\n    endValue,\n    size,\n    setStartValue,\n    setStartOptional,\n    setStartDisabled,\n    setEndValue,\n    setEndOptional,\n    setEndDisabled,\n    setMinDate,\n    setMaxDate,\n    setFocusField,\n    open,\n    close,\n    dateRangePickerRef,\n    startRef,\n    endRef,\n  } = useContext(DateRangePickerContext);\n  const isStart = props.type === 'start';\n  const isEnd = props.type === 'end';\n  const { isMobile } = useResponsiveLayout();\n\n  useEffect(() => {\n    if (isStart) {\n      setStartValue(props.value || '');\n    } else if (isEnd) {\n      setEndValue(props.value || '');\n    }\n  }, []);\n\n  useEffect(() => {\n    if (isStart) {\n      setStartOptional(props.optional || false);\n      setStartDisabled(props.disabled || false);\n      setMinDate(props.minDate || '');\n    } else if (isEnd) {\n      setEndOptional(props.optional || false);\n      setEndDisabled(props.disabled || false);\n      setMaxDate(props.maxDate || '');\n    }\n  }, [props.optional, props.disabled, props.minDate, props.maxDate]);\n\n  useEffect(() => {\n    if (isStart && startValue !== null) {\n      props.onValueChange(startValue);\n    }\n  }, [startValue]);\n\n  useEffect(() => {\n    if (isEnd && endValue !== null) {\n      props.onValueChange(endValue);\n    }\n  }, [endValue]);\n\n  const commonProps: DateRangePickerFieldProps = {\n    withIcon: true,\n    size,\n    ...props,\n    value: props.value,\n    onValueChange: (value) => {\n      if (isStart) {\n        setStartValue(value || '');\n      } else if (isEnd) {\n        setEndValue(value || '');\n      }\n      props.onValueChange(value);\n    },\n    onClick: () => {\n      if (props.disabled) {\n        return;\n      }\n      open(props.type);\n    },\n    onFocus: (e) => {\n      open(props.type);\n      props.onFocus?.(e);\n    },\n    onBlur: (e) => {\n      props.onBlur?.(e);\n\n      if (isMobile) {\n        return;\n      }\n      const nextFocusedElement = e.relatedTarget;\n      if (!dateRangePickerRef.current?.contains(nextFocusedElement)) {\n        close();\n      }\n      setFocusField(null);\n    },\n  };\n\n  switch (props.type) {\n    case 'start':\n      return (\n        <DateInput {...commonProps} value={props.value || ''} data-tid={DateRangePickerDataTids.start} ref={startRef} />\n      );\n\n    case 'end':\n      return (\n        <DateInput {...commonProps} value={props.value || ''} data-tid={DateRangePickerDataTids.end} ref={endRef} />\n      );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/DateRangePicker/DateRangePickerField/package.json

@@ -1,6 +0,0 @@
-{
-  "main": "../../../cjs/components/DateRangePicker/DateRangePickerField.js",
-  "module": "DateRangePickerField",
-  "types": "../DateRangePickerField.d.ts",
-  "sideEffects": false
-}

package/components/DateRangePicker/DateRangePickerField.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { DateInputProps } from '../DateInput';
-export type DateRangePickerFieldType = 'start' | 'end';
-export interface DateRangePickerFieldProps extends Omit<DateInputProps, 'value'> {
-    type: DateRangePickerFieldType;
-    value?: string | null;
-    optional?: boolean;
-    onValueChange: (value: string) => void;
-}
-export type DateRangePickerFieldWithTypeProps = Omit<DateRangePickerFieldProps, 'type'>;
-export declare function DateRangePickerField(props: DateRangePickerFieldProps): React.JSX.Element;

package/components/DateRangePicker/__docs__/DateRangePicker.mdx

@@ -1,115 +0,0 @@
-import * as DateRangePickerStories from './DateRangePicker.docs.stories.tsx';
-import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
-import { Meta } from '../../../.storybook/Meta';
-
-<Meta of={DateRangePickerStories} />
-
-# DateRangePicker
-
-[Компонент в Контур.Гайдах](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 />
-
-<br />
-<br />
-
-## Базовый пример
-
-Компонент выбора периода состоит из 3-х дочерних компонентов:
-
-- `<DateRangePicker.Start>` — начало периода с настройками как у `DateInput`
-- `<DateRangePicker.End>` — окончание периода с настройками как у `DateInput`
-- `<DateRangePicker.Separator>` — разделитель между полями
-
-Значения задается через пропы у компонентов `Start` и `End`:
-
-- 2 значения указываются в пропах `value={'dd.mm.yyyy'}` (формат настраивается)
-- Пустыми значениями считаются `""`, `null` и `undefined`
-- Минимальная дата задаётся в `Start` через `minDate`, максимальная — в `End` через `maxDate`
-
-<Primary />
-
-## Пропы
-
-<details>
-  <summary>Открыть таблицу с пропами</summary>
-  <ArgTypes />
-</details>
-
-<Stories title="" includePrimary={false} />
-
-## Адаптивность
-
-На мобильных устройствах доступны 2 варианта отображения:
-
-- Адаптивная версия в попапе (по умолчанию)
-
-- 2 нативных календаря через `useMobileNativeDatePicker`. <br /> Ограничение: [календарь в iOS не поддерживает параметры min и max](https://bugs.webkit.org/show_bug.cgi?id=225639)
-
-## Локали по умолчанию
-
-```typescript static
-interface DatePickerLocale {
-  today?: string;
-  months?: string[];
-  order?: DateOrder;
-  separator?: DateSeparator;
-  todayAriaLabel?: string;
-  selectMonthAriaLabel?: string;
-  selectYearAriaLabel?: string;
-  selectChosenAriaLabel?: string;
-  dayCellChooseDateAriaLabel?: string;
-}
-
-const ru_RU = {
-  today: 'Сегодня',
-  months: [
-    'Январь',
-    'Февраль',
-    'Март',
-    'Апрель',
-    'Май',
-    'Июнь',
-    'Июль',
-    'Август',
-    'Сентябрь',
-    'Октябрь',
-    'Ноябрь',
-    'Декабрь',
-  ],
-  order: DateOrder.DMY,
-  separator: DateSeparator.Dot,
-  todayAriaLabel: 'Перейти к сегодняшней дате',
-  selectMonthAriaLabel: 'месяц',
-  selectYearAriaLabel: 'год',
-  selectChosenAriaLabel: 'Выбранный',
-  dayCellChooseDateAriaLabel: 'Выбрать дату',
-};
-
-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',
-};
-```

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,28 +0,0 @@
-import * as DropdownStories from './Dropdown.docs.stories.tsx';
-import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
-import { Meta } from '../../../.storybook/Meta';
-
-<Meta of={DropdownStories} />
-
-# Dropdown
-
-[Компонент в Контур.Гайдах](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 />
-
-## Пропы
-
-<details>
-  <summary>Открыть таблицу с пропами</summary>
-  <ArgTypes />
-</details>
-
-## Примеры использования
-
-<Stories title="" includePrimary={false} />

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

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