@skbkontur/react-ui 0.0.0-3c309a601b → 0.0.0-3dbb8bef27

package/components/Tooltip/__docs__/Tooltip.mdx

@@ -0,0 +1,28 @@
+import * as TooltipStories from './Tooltip.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={TooltipStories} />
+
+# Tooltip
+
+[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/popup-elements/tooltip/)
+
+[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=230%3A5039)
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<details>
+  <summary>Открыть таблицу с пропами</summary>
+  <ArgTypes />
+</details>
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />

package/components/TooltipMenu/TooltipMenu/TooltipMenu.js

@@ -14,7 +14,7 @@ export var TooltipMenuDataTids = {
 };
 
 /**
- * Меню, раскрывающееся по клику на переданный в `caption` элемент.
+ * Меню `TooltipMenu` раскрывается по клику на переданный в `caption` элемент.
  *
  * Положение меню задаётся с помощью массива `positions` и работает так:
  * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,

package/components/TooltipMenu/TooltipMenu/TooltipMenu.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ThemeFactory","ThemeContext","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","rootNode","createPropsGetter","TooltipMenuDataTids","root","TooltipMenu","_class","_TooltipMenu","_React$Component","props","_this","call","getProps","defaultProps","caption","Error","_inheritsLoose","_proto","prototype","render","_this2","createElement","Consumer","theme","Provider","value","create","popupPinOffsetX","tooltipMenuPinOffsetX","popupPinOffsetY","tooltipMenuPinOffsetY","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","renderMain","_this$getProps","disableAnimations","_extends","rootNodeRef","setRootNode","menuMaxHeight","menuWidth","header","footer","preventIconsOffset","positions","onOpen","onClose","popupHasPin","children","Component","__KONTUR_REACT_UI__","displayName"],"sources":["TooltipMenu.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\nimport { MenuItemProps } from '../MenuItem';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport { MenuHeaderProps } from '../MenuHeader';\nimport { PopupPositionsType } from '../../internal/Popup';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nexport type TooltipMenuChildType = React.ReactElement<MenuItemProps | unknown | MenuHeaderProps>;\n\nexport interface TooltipMenuProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    CommonProps,\n    Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'preventIconsOffset'> {\n  children?: TooltipMenuChildType | TooltipMenuChildType[];\n  /** Максимальная высота меню */\n  menuMaxHeight?: number | string;\n  /** Ширина меню */\n  menuWidth?: number | string;\n  /**\n   * Элемент или функция возвращающая элемент,\n   * если передана, используется вместо `caption`,\n   * в таком случае управлять открытием и закрытием меню\n   * придется в этой функции\n   */\n  caption: PopupMenuProps['caption'];\n  /**\n   * Произвольный элемент, который будет отрендерен в шапке меню.\n   *\n   * _Примечание_: контрол [MenuHeader](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Произвольный элемент, который будет отрендерен в подвале меню.\n   *\n   * Перед элементом переданным в `footer` будет отрендерен [MenuSeparator](#/Components/MenuSeparator).\n   */\n  footer?: React.ReactNode;\n  /**  Список позиций доступных для расположения выпадашки относительно `caption`.\n   *\n   * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.\n   *\n   * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`\n   */\n  positions?: PopupPositionsType[];\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations?: boolean;\n}\n\nexport const TooltipMenuDataTids = {\n  root: 'TooltipMenu__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TooltipMenuProps, 'disableAnimations'>>;\n\n/**\n * Меню, раскрывающееся по клику на переданный в `caption` элемент.\n *\n * Положение меню задаётся с помощью массива `positions` и работает так:\n * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,\n * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.\n *\n * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.\n *\n * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.\n */\n@rootNode\nexport class TooltipMenu extends React.Component<TooltipMenuProps> {\n  public static __KONTUR_REACT_UI__ = 'TooltipMenu';\n  public static displayName = 'TooltipMenu';\n\n  private setRootNode!: TSetRootNode;\n\n  public static defaultProps: DefaultProps = {\n    disableAnimations: isTestEnv,\n  };\n\n  private getProps = createPropsGetter(TooltipMenu.defaultProps);\n\n  constructor(props: TooltipMenuProps) {\n    super(props);\n\n    if (!props.caption && !isProductionEnv) {\n      throw new Error('Prop \"caption\" is required!!!');\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffsetX: theme.tooltipMenuPinOffsetX,\n                  popupPinOffsetY: theme.tooltipMenuPinOffsetY,\n                  popupMargin: theme.tooltipMenuMargin,\n                  popupPinSize: theme.tooltipMenuPinSize,\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    if (!this.props.caption) {\n      return null;\n    }\n\n    const { disableAnimations } = this.getProps();\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <PopupMenu\n          aria-label={this.props['aria-label']}\n          data-tid={TooltipMenuDataTids.root}\n          menuMaxHeight={this.props.menuMaxHeight}\n          menuWidth={this.props.menuWidth}\n          caption={this.props.caption}\n          header={this.props.header}\n          footer={this.props.footer}\n          preventIconsOffset={this.props.preventIconsOffset}\n          positions={this.props.positions}\n          onOpen={this.props.onOpen}\n          onClose={this.props.onClose}\n          popupHasPin\n          disableAnimations={disableAnimations}\n        >\n          {this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","ThemeFactory","ThemeContext","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","rootNode","createPropsGetter","TooltipMenuDataTids","root","TooltipMenu","_class","_TooltipMenu","_React$Component","props","_this","call","getProps","defaultProps","caption","Error","_inheritsLoose","_proto","prototype","render","_this2","createElement","Consumer","theme","Provider","value","create","popupPinOffsetX","tooltipMenuPinOffsetX","popupPinOffsetY","tooltipMenuPinOffsetY","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","renderMain","_this$getProps","disableAnimations","_extends","rootNodeRef","setRootNode","menuMaxHeight","menuWidth","header","footer","preventIconsOffset","positions","onOpen","onClose","popupHasPin","children","Component","__KONTUR_REACT_UI__","displayName"],"sources":["TooltipMenu.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\nimport { MenuItemProps } from '../MenuItem';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport { MenuHeaderProps } from '../MenuHeader';\nimport { PopupPositionsType } from '../../internal/Popup';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nexport type TooltipMenuChildType = React.ReactElement<MenuItemProps | unknown | MenuHeaderProps>;\n\nexport interface TooltipMenuProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    CommonProps,\n    Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'preventIconsOffset'> {\n  /** @ignore */\n  children?: TooltipMenuChildType | TooltipMenuChildType[];\n  /** Задает максимальную высоту меню. */\n  menuMaxHeight?: number | string;\n  /** Задает ширину меню. */\n  menuWidth?: number | string;\n  /** Задает элемент или функцию возвращающую элемент, которые используется вместо `caption`.\n   * В случае функции, внутри нее необходимо управлять открытием и закрытием меню. */\n  caption: PopupMenuProps['caption'];\n  /** Задает элемент, который будет отрендерен в шапке меню.\n   * _Примечание_: контрол [MenuHeader](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`. */\n  header?: React.ReactNode;\n  /** Задает элемент, который будет отрендерен в подвале меню.\n   * Перед элементом переданным в `footer` будет отрендерен [MenuSeparator](#/Components/MenuSeparator). */\n  footer?: React.ReactNode;\n  /** Определяет список позиций, доступных для расположения выпадашки относительно caption.\n   * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка. */\n  positions?: PopupPositionsType[];\n  /** Отключает анимацию. */\n  disableAnimations?: boolean;\n}\n\nexport const TooltipMenuDataTids = {\n  root: 'TooltipMenu__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TooltipMenuProps, 'disableAnimations'>>;\n\n/**\n * Меню `TooltipMenu` раскрывается по клику на переданный в `caption` элемент.\n *\n * Положение меню задаётся с помощью массива `positions` и работает так:\n * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,\n * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.\n *\n * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.\n *\n * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.\n */\n@rootNode\nexport class TooltipMenu extends React.Component<TooltipMenuProps> {\n  public static __KONTUR_REACT_UI__ = 'TooltipMenu';\n  public static displayName = 'TooltipMenu';\n\n  private setRootNode!: TSetRootNode;\n\n  public static defaultProps: DefaultProps = {\n    disableAnimations: isTestEnv,\n  };\n\n  private getProps = createPropsGetter(TooltipMenu.defaultProps);\n\n  constructor(props: TooltipMenuProps) {\n    super(props);\n\n    if (!props.caption && !isProductionEnv) {\n      throw new Error('Prop \"caption\" is required!!!');\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffsetX: theme.tooltipMenuPinOffsetX,\n                  popupPinOffsetY: theme.tooltipMenuPinOffsetY,\n                  popupMargin: theme.tooltipMenuMargin,\n                  popupPinSize: theme.tooltipMenuPinSize,\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    if (!this.props.caption) {\n      return null;\n    }\n\n    const { disableAnimations } = this.getProps();\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <PopupMenu\n          aria-label={this.props['aria-label']}\n          data-tid={TooltipMenuDataTids.root}\n          menuMaxHeight={this.props.menuMaxHeight}\n          menuWidth={this.props.menuWidth}\n          caption={this.props.caption}\n          header={this.props.header}\n          footer={this.props.footer}\n          preventIconsOffset={this.props.preventIconsOffset}\n          positions={this.props.positions}\n          onOpen={this.props.onOpen}\n          onClose={this.props.onClose}\n          popupHasPin\n          disableAnimations={disableAnimations}\n        >\n          {this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/TooltipMenu/TooltipMenu.d.ts

@@ -6,40 +6,25 @@ import { PopupPositionsType } from '../../internal/Popup';
 import { CommonProps } from '../../internal/CommonWrapper';
 export type TooltipMenuChildType = React.ReactElement<MenuItemProps | unknown | MenuHeaderProps>;
 export interface TooltipMenuProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'preventIconsOffset'> {
+    /** @ignore */
     children?: TooltipMenuChildType | TooltipMenuChildType[];
-    /** Максимальная высота меню */
+    /** Задает максимальную высоту меню. */
     menuMaxHeight?: number | string;
-    /** Ширина меню */
+    /** Задает ширину меню. */
     menuWidth?: number | string;
-    /**
-     * Элемент или функция возвращающая элемент,
-     * если передана, используется вместо `caption`,
-     * в таком случае управлять открытием и закрытием меню
-     * придется в этой функции
-     */
+    /** Задает элемент или функцию возвращающую элемент, которые используется вместо `caption`.
+     * В случае функции, внутри нее необходимо управлять открытием и закрытием меню. */
     caption: PopupMenuProps['caption'];
-    /**
-     * Произвольный элемент, который будет отрендерен в шапке меню.
-     *
-     * _Примечание_: контрол [MenuHeader](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.
-     */
+    /** Задает элемент, который будет отрендерен в шапке меню.
+     * _Примечание_: контрол [MenuHeader](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`. */
     header?: React.ReactNode;
-    /**
-     * Произвольный элемент, который будет отрендерен в подвале меню.
-     *
-     * Перед элементом переданным в `footer` будет отрендерен [MenuSeparator](#/Components/MenuSeparator).
-     */
+    /** Задает элемент, который будет отрендерен в подвале меню.
+     * Перед элементом переданным в `footer` будет отрендерен [MenuSeparator](#/Components/MenuSeparator). */
     footer?: React.ReactNode;
-    /**  Список позиций доступных для расположения выпадашки относительно `caption`.
-     *
-     * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.
-     *
-     * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`
-     */
+    /** Определяет список позиций, доступных для расположения выпадашки относительно caption.
+     * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка. */
     positions?: PopupPositionsType[];
-    /**
-     * Не показывать анимацию
-     */
+    /** Отключает анимацию. */
     disableAnimations?: boolean;
 }
 export declare const TooltipMenuDataTids: {
@@ -47,7 +32,7 @@ export declare const TooltipMenuDataTids: {
 };
 type DefaultProps = Required<Pick<TooltipMenuProps, 'disableAnimations'>>;
 /**
- * Меню, раскрывающееся по клику на переданный в `caption` элемент.
+ * Меню `TooltipMenu` раскрывается по клику на переданный в `caption` элемент.
  *
  * Положение меню задаётся с помощью массива `positions` и работает так:
  * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,

package/components/TooltipMenu/TooltipMenu.md

@@ -1,4 +1,4 @@
-Базовый пример тултип-меню.
+### Базовый пример
 
 ```jsx harmony
 import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
@@ -16,6 +16,7 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
 </TooltipMenu>;
 ```
 
+### Управление состоянием тултип-меню
 В проп `caption` помимо компонента можно передать функцию, возвращающую компонент, с помощью которой можно управлять текущим состоянием тултип-меню.
 
 ```jsx harmony
@@ -43,7 +44,7 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
 </TooltipMenu>;
 ```
 
-Тултип-меню с заданной шириной.
+### Ширина
 
 ```jsx harmony
 import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
@@ -64,7 +65,7 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
 </TooltipMenu>;
 ```
 
-Тултип-меню с заданной максимальной высотой.
+### Максимальная высота
 
 ```jsx harmony
 import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
@@ -85,7 +86,7 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
 </TooltipMenu>;
 ```
 
-Тултип-меню с отключенной анимацией.
+### Отключенная анимация
 
 ```jsx harmony
 import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
@@ -102,6 +103,7 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
 </TooltipMenu>;
 ```
 
+### Подпись
 В `caption` можно передать любой элемент.
 
 ```jsx harmony
@@ -122,7 +124,7 @@ import MenuIcon from '@skbkontur/react-icons/Menu';
 </TooltipMenu>;
 ```
 
-Тултип-меню всегда всплывающее справа от `caption`.
+### Тултип-меню всегда всплывающее справа от `caption`
 
 ```jsx harmony
 import { MenuItem } from '@skbkontur/react-ui';
@@ -143,7 +145,7 @@ import LightbulbIcon from '@skbkontur/react-icons/Lightbulb';
 </TooltipMenu>;
 ```
 
-Тултип-меню всегда всплывающее сверху от `caption` и выравненное по правому краю `caption`.
+### Тултип-меню всегда всплывающее сверху от `caption` и выравненное по правому краю `caption`
 
 ```jsx harmony
 import { MenuItem } from '@skbkontur/react-ui';
@@ -164,7 +166,7 @@ import LightbulbIcon from '@skbkontur/react-icons/Lightbulb';
 </TooltipMenu>;
 ```
 
-Тултип-меню c шапкой и подвалом.
+### Тултип-меню c шапкой и подвалом
 
 ```jsx harmony
 import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
@@ -180,7 +182,7 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
 </TooltipMenu>;
 ```
 
-С иконками и включенным по-умолчанию автоматическим выравниванием текста.
+### Иконки и автовыравнивание
 
 ```jsx harmony
 import { Button, MenuHeader, MenuItem, MenuSeparator, TooltipMenu } from '@skbkontur/react-ui';
@@ -194,7 +196,7 @@ import OkIcon from '@skbkontur/react-icons/Ok';
 </TooltipMenu>;
 ```
 
-С иконками и отключенным автоматическим выравниванием текста.
+### Иконки и автовыравнивание
 
 ```jsx harmony
 import { Button, MenuHeader, MenuItem, MenuSeparator, TooltipMenu } from '@skbkontur/react-ui';
@@ -208,7 +210,8 @@ import OkIcon from '@skbkontur/react-icons/Ok';
 </TooltipMenu>
 ```
 
-Условный рендер элементов тултип-меню (с сохранением поведения [MenuItem](#/Components/MenuItem)).
+### Условный рендер элементов тултип-меню
+(с сохранением поведения [MenuItem](#/Components/MenuItem)).
 
 ```jsx harmony
 import {Button, MenuItem, Gapped, MenuSeparator} from '@skbkontur/react-ui';

package/components/TooltipMenu/__creevey__/TooltipMenu.creevey.mts

@@ -0,0 +1,131 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { PopupMenuDataTids } from '../../../internal/PopupMenu/tids';
+import { delay } from '../../../lib/delay';
+
+const textAlignmentTests = () => {
+  test('opened', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: `[data-tid~="${PopupMenuDataTids.caption}"]` }))
+      .perform();
+    await delay(1000);
+    await context.matchImage(await context.takeScreenshot(), 'opened');
+  });
+};
+
+kind('TooltipMenu', () => {
+  story('SimpleExample', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'story-skip-0': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['clickAfterClickedOnCaption', 'clicked'],
+        },
+
+        flaky: { in: ['firefox2022', 'firefox2022Dark'], tests: ['tabPress'] },
+      },
+    });
+
+    test('plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+
+    test('clickAfterClickedOnCaption', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="PopupMenu"]' }))
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="PopupMenu"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'clickAfterClickedOnCaption');
+    });
+
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="PopupMenu"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'clicked');
+    });
+
+    test('clickedOutside', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="PopupMenu"]' }))
+        .click(context.webdriver.findElement({ css: 'body' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'clickedOutside');
+    });
+
+    test('tabPress', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'tabPress');
+    });
+
+    test('enterPress', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .sendKeys(Key.ENTER)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'enterPress');
+    });
+
+    test('escapePress', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .sendKeys(Key.ENTER)
+        .sendKeys(Key.ESCAPE)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'escapePress');
+    });
+  });
+
+  story('MobileExampleHorizontalPaddings', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: null });
+
+    test('opened', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '#test-element' }))
+        .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('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();
+  });
+});

package/components/TooltipMenu/__docs__/TooltipMenu.mdx

@@ -0,0 +1,24 @@
+import * as TooltipMenuStories from './TooltipMenu.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={TooltipMenuStories} />
+
+# TooltipMenu
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<details>
+  <summary>Открыть таблицу с пропами</summary>
+  <ArgTypes />
+</details>
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />

package/index.d.ts

@@ -8,6 +8,7 @@ export * from './components/CurrencyInput';
 export * from './components/CurrencyLabel';
 export * from './components/DateInput';
 export * from './components/DatePicker';
+export * from './components/DateRangePicker';
 export * from './components/Dropdown';
 export * from './components/DropdownMenu';
 export * from './components/FileUploader';
@@ -20,6 +21,7 @@ export * from './components/Input';
 export * from './components/Kebab';
 export * from './components/Link';
 export * from './components/Loader';
+export * from './components/MenuFooter';
 export * from './components/MenuHeader';
 export * from './components/MenuItem';
 export * from './components/MenuSeparator';
@@ -45,12 +47,11 @@ export * from './components/TokenInput';
 export * from './components/Tooltip';
 export * from './components/TooltipMenu';
 export * from './components/ResponsiveLayout';
+export * from './components/MaskedInput';
 export * from './lib/featureFlagsContext';
 export * from './lib/locale';
 export * from './lib/theming/ThemeContext';
 export * from './lib/theming/ThemeFactory';
-export * from './lib/theming/themes/LightTheme2022_0';
-export * from './lib/theming/themes/DarkTheme2022_0';
 export * from './lib/theming/themes/LightTheme';
 export * from './lib/theming/themes/DarkTheme';
 export * from './lib/types/props';

package/index.js

@@ -8,6 +8,7 @@ export * from './components/CurrencyInput';
 export * from './components/CurrencyLabel';
 export * from './components/DateInput';
 export * from './components/DatePicker';
+export * from './components/DateRangePicker';
 export * from './components/Dropdown';
 export * from './components/DropdownMenu';
 export * from './components/FileUploader';
@@ -20,6 +21,7 @@ export * from './components/Input';
 export * from './components/Kebab';
 export * from './components/Link';
 export * from './components/Loader';
+export * from './components/MenuFooter';
 export * from './components/MenuHeader';
 export * from './components/MenuItem';
 export * from './components/MenuSeparator';
@@ -45,12 +47,11 @@ export * from './components/TokenInput';
 export * from './components/Tooltip';
 export * from './components/TooltipMenu';
 export * from './components/ResponsiveLayout';
+export * from './components/MaskedInput';
 export * from './lib/featureFlagsContext';
 export * from './lib/locale';
 export * from './lib/theming/ThemeContext';
 export * from './lib/theming/ThemeFactory';
-export * from './lib/theming/themes/LightTheme2022_0';
-export * from './lib/theming/themes/DarkTheme2022_0';
 export * from './lib/theming/themes/LightTheme';
 export * from './lib/theming/themes/DarkTheme';
 export * from './lib/types/props';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_ColorFunctions","ColorFunctions","_DimensionFunctions","DimensionFunctions"],"sources":["index.ts"],"sourcesContent":["export * from './components/Autocomplete';\nexport * from './components/Button';\nexport * from './components/Calendar';\nexport * from './components/Center';\nexport * from './components/Checkbox';\nexport * from './components/ComboBox';\nexport * from './components/CurrencyInput';\nexport * from './components/CurrencyLabel';\nexport * from './components/DateInput';\nexport * from './components/DatePicker';\nexport * from './components/Dropdown';\nexport * from './components/DropdownMenu';\nexport * from './components/FileUploader';\nexport * from './components/FxInput';\nexport * from './components/Gapped';\nexport * from './components/GlobalLoader';\nexport * from './components/Group';\nexport * from './components/Hint';\nexport * from './components/Input';\nexport * from './components/Kebab';\nexport * from './components/Link';\nexport * from './components/Loader';\nexport * from './components/MenuHeader';\nexport * from './components/MenuItem';\nexport * from './components/MenuSeparator';\nexport * from './components/MiniModal';\nexport * from './components/Modal';\nexport * from './components/Paging';\nexport * from './components/PasswordInput';\nexport * from './components/Radio';\nexport * from './components/RadioGroup';\nexport * from './components/ScrollContainer';\nexport * from './components/Select';\nexport * from './components/SidePage';\nexport * from './components/Spinner';\nexport * from './components/Sticky';\nexport * from './components/Switcher';\nexport * from './components/Tabs';\nexport * from './components/Textarea';\nexport * from './components/Toast';\nexport * from './components/SingleToast';\nexport * from './components/Toggle';\nexport * from './components/Token';\nexport * from './components/TokenInput';\nexport * from './components/Tooltip';\nexport * from './components/TooltipMenu';\nexport * from './components/ResponsiveLayout';\nexport * from './lib/featureFlagsContext';\nexport * from './lib/locale';\nexport * from './lib/theming/ThemeContext';\nexport * from './lib/theming/ThemeFactory';\nexport * from './lib/theming/themes/LightTheme2022_0';\nexport * from './lib/theming/themes/DarkTheme2022_0';\nexport * from './lib/theming/themes/LightTheme';\nexport * from './lib/theming/themes/DarkTheme';\nexport * from './lib/types/props';\nexport * from './internal/Popup/types';\nexport * as ColorFunctions from './lib/styles/ColorFunctions';\nexport * as DimensionFunctions from './lib/styles/DimensionFunctions';\n"],"mappings":"AAAA,cAAc,2BAA2B;AACzC,cAAc,qBAAqB;AACnC,cAAc,uBAAuB;AACrC,cAAc,qBAAqB;AACnC,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;AACrC,cAAc,4BAA4B;AAC1C,cAAc,4BAA4B;AAC1C,cAAc,wBAAwB;AACtC,cAAc,yBAAyB;AACvC,cAAc,uBAAuB;AACrC,cAAc,2BAA2B;AACzC,cAAc,2BAA2B;AACzC,cAAc,sBAAsB;AACpC,cAAc,qBAAqB;AACnC,cAAc,2BAA2B;AACzC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,qBAAqB;AACnC,cAAc,yBAAyB;AACvC,cAAc,uBAAuB;AACrC,cAAc,4BAA4B;AAC1C,cAAc,wBAAwB;AACtC,cAAc,oBAAoB;AAClC,cAAc,qBAAqB;AACnC,cAAc,4BAA4B;AAC1C,cAAc,oBAAoB;AAClC,cAAc,yBAAyB;AACvC,cAAc,8BAA8B;AAC5C,cAAc,qBAAqB;AACnC,cAAc,uBAAuB;AACrC,cAAc,sBAAsB;AACpC,cAAc,qBAAqB;AACnC,cAAc,uBAAuB;AACrC,cAAc,mBAAmB;AACjC,cAAc,uBAAuB;AACrC,cAAc,oBAAoB;AAClC,cAAc,0BAA0B;AACxC,cAAc,qBAAqB;AACnC,cAAc,oBAAoB;AAClC,cAAc,yBAAyB;AACvC,cAAc,sBAAsB;AACpC,cAAc,0BAA0B;AACxC,cAAc,+BAA+B;AAC7C,cAAc,2BAA2B;AACzC,cAAc,cAAc;AAC5B,cAAc,4BAA4B;AAC1C,cAAc,4BAA4B;AAC1C,cAAc,uCAAuC;AACrD,cAAc,sCAAsC;AACpD,cAAc,iCAAiC;AAC/C,cAAc,gCAAgC;AAC9C,cAAc,mBAAmB;AACjC,cAAc,wBAAwB,CAAC,YAAAA,eAAA;AACP,6BAA6B,UAAAA,eAAA,IAAjDC,cAAc,eAAAC,mBAAA;AACU,iCAAiC,UAAAA,mBAAA,IAAzDC,kBAAkB","ignoreList":[]}
+{"version":3,"names":["_ColorFunctions","ColorFunctions","_DimensionFunctions","DimensionFunctions"],"sources":["index.ts"],"sourcesContent":["export * from './components/Autocomplete';\nexport * from './components/Button';\nexport * from './components/Calendar';\nexport * from './components/Center';\nexport * from './components/Checkbox';\nexport * from './components/ComboBox';\nexport * from './components/CurrencyInput';\nexport * from './components/CurrencyLabel';\nexport * from './components/DateInput';\nexport * from './components/DatePicker';\nexport * from './components/DateRangePicker';\nexport * from './components/Dropdown';\nexport * from './components/DropdownMenu';\nexport * from './components/FileUploader';\nexport * from './components/FxInput';\nexport * from './components/Gapped';\nexport * from './components/GlobalLoader';\nexport * from './components/Group';\nexport * from './components/Hint';\nexport * from './components/Input';\nexport * from './components/Kebab';\nexport * from './components/Link';\nexport * from './components/Loader';\nexport * from './components/MenuFooter';\nexport * from './components/MenuHeader';\nexport * from './components/MenuItem';\nexport * from './components/MenuSeparator';\nexport * from './components/MiniModal';\nexport * from './components/Modal';\nexport * from './components/Paging';\nexport * from './components/PasswordInput';\nexport * from './components/Radio';\nexport * from './components/RadioGroup';\nexport * from './components/ScrollContainer';\nexport * from './components/Select';\nexport * from './components/SidePage';\nexport * from './components/Spinner';\nexport * from './components/Sticky';\nexport * from './components/Switcher';\nexport * from './components/Tabs';\nexport * from './components/Textarea';\nexport * from './components/Toast';\nexport * from './components/SingleToast';\nexport * from './components/Toggle';\nexport * from './components/Token';\nexport * from './components/TokenInput';\nexport * from './components/Tooltip';\nexport * from './components/TooltipMenu';\nexport * from './components/ResponsiveLayout';\nexport * from './components/MaskedInput';\nexport * from './lib/featureFlagsContext';\nexport * from './lib/locale';\nexport * from './lib/theming/ThemeContext';\nexport * from './lib/theming/ThemeFactory';\nexport * from './lib/theming/themes/LightTheme';\nexport * from './lib/theming/themes/DarkTheme';\nexport * from './lib/types/props';\nexport * from './internal/Popup/types';\nexport * as ColorFunctions from './lib/styles/ColorFunctions';\nexport * as DimensionFunctions from './lib/styles/DimensionFunctions';\n"],"mappings":"AAAA,cAAc,2BAA2B;AACzC,cAAc,qBAAqB;AACnC,cAAc,uBAAuB;AACrC,cAAc,qBAAqB;AACnC,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;AACrC,cAAc,4BAA4B;AAC1C,cAAc,4BAA4B;AAC1C,cAAc,wBAAwB;AACtC,cAAc,yBAAyB;AACvC,cAAc,8BAA8B;AAC5C,cAAc,uBAAuB;AACrC,cAAc,2BAA2B;AACzC,cAAc,2BAA2B;AACzC,cAAc,sBAAsB;AACpC,cAAc,qBAAqB;AACnC,cAAc,2BAA2B;AACzC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,qBAAqB;AACnC,cAAc,yBAAyB;AACvC,cAAc,yBAAyB;AACvC,cAAc,uBAAuB;AACrC,cAAc,4BAA4B;AAC1C,cAAc,wBAAwB;AACtC,cAAc,oBAAoB;AAClC,cAAc,qBAAqB;AACnC,cAAc,4BAA4B;AAC1C,cAAc,oBAAoB;AAClC,cAAc,yBAAyB;AACvC,cAAc,8BAA8B;AAC5C,cAAc,qBAAqB;AACnC,cAAc,uBAAuB;AACrC,cAAc,sBAAsB;AACpC,cAAc,qBAAqB;AACnC,cAAc,uBAAuB;AACrC,cAAc,mBAAmB;AACjC,cAAc,uBAAuB;AACrC,cAAc,oBAAoB;AAClC,cAAc,0BAA0B;AACxC,cAAc,qBAAqB;AACnC,cAAc,oBAAoB;AAClC,cAAc,yBAAyB;AACvC,cAAc,sBAAsB;AACpC,cAAc,0BAA0B;AACxC,cAAc,+BAA+B;AAC7C,cAAc,0BAA0B;AACxC,cAAc,2BAA2B;AACzC,cAAc,cAAc;AAC5B,cAAc,4BAA4B;AAC1C,cAAc,4BAA4B;AAC1C,cAAc,iCAAiC;AAC/C,cAAc,gCAAgC;AAC9C,cAAc,mBAAmB;AACjC,cAAc,wBAAwB,CAAC,YAAAA,eAAA;AACP,6BAA6B,UAAAA,eAAA,IAAjDC,cAAc,eAAAC,mBAAA;AACU,iCAAiC,UAAAA,mBAAA,IAAzDC,kBAAkB","ignoreList":[]}

package/internal/ClearCrossIcon/ClearCrossIcon/ClearCrossIcon.js

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["size", "style"];
+import React from 'react';
+import { globalObject } from '@skbkontur/global-object';
+import { cx } from "../../../lib/theming/Emotion";
+import { keyListener } from "../../../lib/events/keyListener";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { CommonWrapper } from "../../CommonWrapper";
+import { styles } from "../ClearCrossIcon.styles";
+import { CrossIcon } from "../CrossIcon";
+export var ClearCrossIcon = function ClearCrossIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    style = _ref.style,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var theme = React.useContext(ThemeContext);
+  var getSizeClassName = function getSizeClassName(size) {
+    switch (size) {
+      case 'large':
+        return styles.clearCrossLarge(theme);
+      case 'medium':
+        return styles.clearCrossMedium(theme);
+      case 'small':
+      default:
+        return styles.clearCrossSmall(theme);
+    }
+  };
+  var _React$useState = React.useState(false),
+    focusedByTab = _React$useState[0],
+    setFocusedByTab = _React$useState[1];
+  var handleFocus = function handleFocus() {
+    // focus event fires before keyDown eventlistener so we should check tabPressed in async way
+    globalObject.requestAnimationFrame == null || globalObject.requestAnimationFrame(function () {
+      if (keyListener.isTabPressed) {
+        setFocusedByTab(true);
+      }
+    });
+  };
+  var handleBlur = function handleBlur() {
+    return setFocusedByTab(false);
+  };
+  return /*#__PURE__*/(
+    React.createElement(CommonWrapper, rest, /*#__PURE__*/
+    React.createElement("button", _extends({
+      type: "button",
+      tabIndex: -1,
+      className: cx(styles.root(theme),
+      // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4
+      focusedByTab && styles.focus(theme), getSizeClassName(size)),
+      style: style,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }, rest), /*#__PURE__*/
+
+    React.createElement(CrossIcon, {
+      size: size,
+      focusable: true
+    })))
+  );
+};
+ClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';
+ClearCrossIcon.displayName = 'ClearCrossIcon';

package/internal/ClearCrossIcon/ClearCrossIcon/ClearCrossIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","globalObject","cx","keyListener","ThemeContext","CommonWrapper","styles","CrossIcon","ClearCrossIcon","_ref","_ref$size","size","style","rest","_objectWithoutPropertiesLoose","_excluded","theme","useContext","getSizeClassName","clearCrossLarge","clearCrossMedium","clearCrossSmall","_React$useState","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","createElement","_extends","type","tabIndex","className","root","focus","onFocus","onBlur","focusable","__KONTUR_REACT_UI__","displayName"],"sources":["ClearCrossIcon.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonWrapper, CommonProps } from '../CommonWrapper';\nimport { SizeProp } from '../../lib/types/props';\nimport { TokenSize } from '../../components/Token';\n\nimport { styles } from './ClearCrossIcon.styles';\nimport { CrossIcon } from './CrossIcon';\n\nexport interface ClearCrossIconProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    CommonProps {\n  /** Ширина и высота иконки крестика\n   * @default small */\n  size?: SizeProp;\n}\n\nexport const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps> = ({ size = 'small', style, ...rest }) => {\n  const theme = React.useContext(ThemeContext);\n  const getSizeClassName = (size: TokenSize) => {\n    switch (size) {\n      case 'large':\n        return styles.clearCrossLarge(theme);\n      case 'medium':\n        return styles.clearCrossMedium(theme);\n      case 'small':\n      default:\n        return styles.clearCrossSmall(theme);\n    }\n  };\n\n  const [focusedByTab, setFocusedByTab] = React.useState<boolean>(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  return (\n    <CommonWrapper {...rest}>\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        className={cx(\n          styles.root(theme),\n          // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4\n          focusedByTab && styles.focus(theme),\n          getSizeClassName(size),\n        )}\n        style={style}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...rest}\n      >\n        <CrossIcon size={size} focusable />\n      </button>\n    </CommonWrapper>\n  );\n};\n\nClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';\nClearCrossIcon.displayName = 'ClearCrossIcon';\n"],"mappings":"gMAAA,OAAOA,KAAK,MAA0B,OAAO;AAC7C,SAASC,YAAY,QAAQ,0BAA0B;;AAEvD,SAASC,EAAE,QAAQ,2BAA2B;AAC9C,SAASC,WAAW,QAAQ,8BAA8B;AAC1D,SAASC,YAAY,QAAQ,gCAAgC;AAC7D,SAASC,aAAa,QAAqB,kBAAkB;;;;AAI7D,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,SAAS,QAAQ,aAAa;;;;;;;;;;;AAWvC,OAAO,IAAMC,cAA4D,GAAG,SAA/DA,cAA4DA,CAAAC,IAAA,EAA2C,KAAAC,SAAA,GAAAD,IAAA,CAArCE,IAAI,CAAJA,IAAI,GAAAD,SAAA,cAAG,OAAO,GAAAA,SAAA,CAAEE,KAAK,GAAAH,IAAA,CAALG,KAAK,CAAKC,IAAI,GAAAC,6BAAA,CAAAL,IAAA,EAAAM,SAAA;EAC3G,IAAMC,KAAK,GAAGhB,KAAK,CAACiB,UAAU,CAACb,YAAY,CAAC;EAC5C,IAAMc,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIP,IAAe,EAAK;IAC5C,QAAQA,IAAI;MACV,KAAK,OAAO;QACV,OAAOL,MAAM,CAACa,eAAe,CAACH,KAAK,CAAC;MACtC,KAAK,QAAQ;QACX,OAAOV,MAAM,CAACc,gBAAgB,CAACJ,KAAK,CAAC;MACvC,KAAK,OAAO;MACZ;QACE,OAAOV,MAAM,CAACe,eAAe,CAACL,KAAK,CAAC;IACxC;EACF,CAAC;;EAED,IAAAM,eAAA,GAAwCtB,KAAK,CAACuB,QAAQ,CAAU,KAAK,CAAC,CAA/DC,YAAY,GAAAF,eAAA,IAAEG,eAAe,GAAAH,eAAA;;EAEpC,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxB;IACAzB,YAAY,CAAC0B,qBAAqB,YAAlC1B,YAAY,CAAC0B,qBAAqB,CAAG,YAAM;MACzC,IAAIxB,WAAW,CAACyB,YAAY,EAAE;QAC5BH,eAAe,CAAC,IAAI,CAAC;MACvB;IACF,CAAC,CAAC;EACJ,CAAC;EACD,IAAMI,UAAU,GAAG,SAAbA,UAAUA,CAAA,UAASJ,eAAe,CAAC,KAAK,CAAC;;EAE/C;IACEzB,KAAA,CAAA8B,aAAA,CAACzB,aAAa,EAAKQ,IAAI;IACrBb,KAAA,CAAA8B,aAAA,WAAAC,QAAA;MACEC,IAAI,EAAC,QAAQ;MACbC,QAAQ,EAAE,CAAC,CAAE;MACbC,SAAS,EAAEhC,EAAE;QACXI,MAAM,CAAC6B,IAAI,CAACnB,KAAK,CAAC;QAClB;QACAQ,YAAY,IAAIlB,MAAM,CAAC8B,KAAK,CAACpB,KAAK,CAAC;QACnCE,gBAAgB,CAACP,IAAI;MACvB,CAAE;MACFC,KAAK,EAAEA,KAAM;MACbyB,OAAO,EAAEX,WAAY;MACrBY,MAAM,EAAET,UAAW;IACfhB,IAAI;;IAERb,KAAA,CAAA8B,aAAA,CAACvB,SAAS,IAACI,IAAI,EAAEA,IAAK,EAAC4B,SAAS,QAAE;IAC5B;IACK,CAAC;;AAEpB,CAAC;;AAED/B,cAAc,CAACgC,mBAAmB,GAAG,gBAAgB;AACrDhC,cAAc,CAACiC,WAAW,GAAG,gBAAgB","ignoreList":[]}

package/internal/ClearCrossIcon/ClearCrossIcon/package.json

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

package/internal/ClearCrossIcon/ClearCrossIcon.d.ts

@@ -0,0 +1,9 @@
+import React, { AriaAttributes } from 'react';
+import { CommonProps } from '../CommonWrapper';
+import { SizeProp } from '../../lib/types/props';
+export interface ClearCrossIconProps extends Pick<AriaAttributes, 'aria-label'>, React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
+    /** Ширина и высота иконки крестика
+     * @default small */
+    size?: SizeProp;
+}
+export declare const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps>;

package/internal/ClearCrossIcon/ClearCrossIcon.styles/ClearCrossIcon.styles.js

@@ -0,0 +1,21 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+import { resetButton } from "../../../lib/styles/Mixins";
+export var styles = memoizeStyle({
+  root: function root(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", "\n      color: ", ";\n      cursor: pointer;\n      transition: color ", " ", ";\n      &:hover {\n        color: ", ";\n      }\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    "])), resetButton(), t.clearCrossIconColor, t.transitionDuration, t.transitionTimingFunction, t.clearCrossIconHoverColor);
+  },
+  focus: function focus(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.clearCrossIconHoverColor);
+  },
+  clearCrossSmall: function clearCrossSmall(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n      margin-right: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthSmall, t.clearCrossIconHeightSmall, t.clearCrossIconRightMarginSmall, t.clearCrossIconBorderRadiusSmall);
+  },
+  clearCrossMedium: function clearCrossMedium(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n      margin-right: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthMedium, t.clearCrossIconHeightMedium, t.clearCrossIconRightMarginMedium, t.clearCrossIconBorderRadiusMedium);
+  },
+  clearCrossLarge: function clearCrossLarge(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n      margin-right: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthLarge, t.clearCrossIconHeightLarge, t.clearCrossIconRightMarginLarge, t.clearCrossIconBorderRadiusLarge);
+  }
+});

package/internal/ClearCrossIcon/ClearCrossIcon.styles/ClearCrossIcon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["css","memoizeStyle","resetButton","styles","root","t","_templateObject","_taggedTemplateLiteralLoose","clearCrossIconColor","transitionDuration","transitionTimingFunction","clearCrossIconHoverColor","focus","_templateObject2","clearCrossSmall","_templateObject3","clearCrossIconWidthSmall","clearCrossIconHeightSmall","clearCrossIconRightMarginSmall","clearCrossIconBorderRadiusSmall","clearCrossMedium","_templateObject4","clearCrossIconWidthMedium","clearCrossIconHeightMedium","clearCrossIconRightMarginMedium","clearCrossIconBorderRadiusMedium","clearCrossLarge","_templateObject5","clearCrossIconWidthLarge","clearCrossIconHeightLarge","clearCrossIconRightMarginLarge","clearCrossIconBorderRadiusLarge"],"sources":["ClearCrossIcon.styles.tsx"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      ${resetButton()}\n      color: ${t.clearCrossIconColor};\n      cursor: pointer;\n      transition: color ${t.transitionDuration} ${t.transitionTimingFunction};\n      &:hover {\n        color: ${t.clearCrossIconHoverColor};\n      }\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      color: ${t.clearCrossIconHoverColor};\n    `;\n  },\n\n  clearCrossSmall(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthSmall};\n      height: ${t.clearCrossIconHeightSmall};\n      margin-right: ${t.clearCrossIconRightMarginSmall};\n      border-radius: ${t.clearCrossIconBorderRadiusSmall};\n    `;\n  },\n  clearCrossMedium(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthMedium};\n      height: ${t.clearCrossIconHeightMedium};\n      margin-right: ${t.clearCrossIconRightMarginMedium};\n      border-radius: ${t.clearCrossIconBorderRadiusMedium};\n    `;\n  },\n  clearCrossLarge(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthLarge};\n      height: ${t.clearCrossIconHeightLarge};\n      margin-right: ${t.clearCrossIconRightMarginLarge};\n      border-radius: ${t.clearCrossIconBorderRadiusLarge};\n    `;\n  },\n});\n"],"mappings":"4LAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,SAASC,WAAW,QAAQ,yBAAyB;;AAErD,OAAO,IAAMC,MAAM,GAAGF,YAAY,CAAC;EACjCG,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,OAAOL,GAAG,CAAAM,eAAA,KAAAA,eAAA,GAAAC,2BAAA;IACNL,WAAW,CAAC,CAAC;IACNG,CAAC,CAACG,mBAAmB;;IAEVH,CAAC,CAACI,kBAAkB,EAAIJ,CAAC,CAACK,wBAAwB;;IAE3DL,CAAC,CAACM,wBAAwB;;;;;;EAMzC,CAAC;;EAEDC,KAAK,WAAAA,MAACP,CAAQ,EAAE;IACd,OAAOL,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;IACCF,CAAC,CAACM,wBAAwB;;EAEvC,CAAC;;EAEDG,eAAe,WAAAA,gBAACT,CAAQ,EAAE;IACxB,OAAOL,GAAG,CAAAe,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;IACCF,CAAC,CAACW,wBAAwB;IACzBX,CAAC,CAACY,yBAAyB;IACrBZ,CAAC,CAACa,8BAA8B;IAC/Bb,CAAC,CAACc,+BAA+B;;EAEtD,CAAC;EACDC,gBAAgB,WAAAA,iBAACf,CAAQ,EAAE;IACzB,OAAOL,GAAG,CAAAqB,gBAAA,KAAAA,gBAAA,GAAAd,2BAAA;IACCF,CAAC,CAACiB,yBAAyB;IAC1BjB,CAAC,CAACkB,0BAA0B;IACtBlB,CAAC,CAACmB,+BAA+B;IAChCnB,CAAC,CAACoB,gCAAgC;;EAEvD,CAAC;EACDC,eAAe,WAAAA,gBAACrB,CAAQ,EAAE;IACxB,OAAOL,GAAG,CAAA2B,gBAAA,KAAAA,gBAAA,GAAApB,2BAAA;IACCF,CAAC,CAACuB,wBAAwB;IACzBvB,CAAC,CAACwB,yBAAyB;IACrBxB,CAAC,CAACyB,8BAA8B;IAC/BzB,CAAC,CAAC0B,+BAA+B;;EAEtD;AACF,CAAC,CAAC","ignoreList":[]}