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

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

@@ -0,0 +1,247 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+kind('ScrollContainer', () => {
+  story('WithDynamicContent', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: '#test-container' });
+
+    test('changeContent', async (context) => {
+      const idle = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#add' }))
+        .perform();
+      const addContent = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll50' }))
+        .perform();
+      const scroll50 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll100' }))
+        .perform();
+      const scroll100 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#remove' }))
+        .perform();
+      const removeContent = await context.takeScreenshot();
+      await context.matchImages({ idle, addContent, scroll50, scroll100, removeContent });
+    });
+  });
+
+  story('WithOnlyCustomHorizontalScroll', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: '#test-container' });
+
+    test('moveScroll', async (context) => {
+      const idle = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll50' }))
+        .perform();
+      const scroll50 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll100' }))
+        .perform();
+      const scroll100 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll0' }))
+        .perform();
+      const scroll0 = await context.takeScreenshot();
+      await context.matchImages({ idle, scroll50, scroll100, scroll0 });
+    });
+
+    test('changeContent', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#add' }))
+        .perform();
+      const addContent = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll50' }))
+        .perform();
+      const scroll50 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll100' }))
+        .perform();
+      const scroll100 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll0' }))
+        .perform();
+      const scroll0 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#remove' }))
+        .perform();
+      const removeContent = await context.takeScreenshot();
+      await context.matchImages({ addContent, scroll50, scroll100, scroll0, removeContent });
+    });
+  });
+
+  story('WithScrollTo', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: '#test-container' });
+
+    test('scrollTo', async (context) => {
+      const idle = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scrollTo' }))
+        .perform();
+      const scrollTo = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scrollToTop' }))
+        .perform();
+      const scrollToTop = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scrollToLeft' }))
+        .perform();
+      const scrollToLeft = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scrollToBottom' }))
+        .perform();
+      const scrollToBottom = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scrollToRight' }))
+        .perform();
+      const scrollToRight = await context.takeScreenshot();
+      await context.matchImages({
+        idle,
+        scrollTo,
+        scrollToTop,
+        scrollToBottom,
+        scrollToLeft,
+        scrollToRight,
+      });
+    });
+  });
+
+  story('ScrollBarVisibleAfterTogglingDisabled', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
+
+    test('toggleDisabled', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="disable-button"]' }))
+        .click(context.webdriver.findElement({ css: '[data-tid="disable-button"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'toggleDisabled');
+    });
+  });
+
+  story('ShowScrollBarOnScroll', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\b(firefox2022|chrome2022)\b)/ } } });
+
+    test('hideScroll', async (context) => {
+      const beforeScroll = await context.takeScreenshot();
+      await context.webdriver.executeScript(function () {
+        const scrollContainer = window.document.querySelector('[data-tid~="ScrollContainer__inner"]');
+        if (scrollContainer) {
+          scrollContainer.scrollTop = 500;
+        }
+      });
+      context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({ origin: context.webdriver.findElement({ css: 'body' }) });
+      await delay(200);
+      const duringScroll = await context.takeScreenshot();
+      await delay(3000);
+      const afterScroll = await context.takeScreenshot();
+      await context.matchImages({ beforeScroll, duringScroll, afterScroll });
+    });
+  });
+
+  story('ShowScrollBarOnHover', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'hover works only in firefox': { in: /^(?!\b(firefox2022)\b)/ } } });
+
+    test('hideScroll', async (context) => {
+      context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: '[data-tid~="ScrollContainer__root"]' }),
+        })
+        .perform();
+      await delay(500);
+      const hovered = await context.takeScreenshot();
+      context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({ x: 1000, y: 700 })
+        .perform();
+      await delay(3000);
+      const withoutHover = await context.takeScreenshot();
+      await context.matchImages({ hovered, withoutHover });
+    });
+  });
+  story('NeverShowScrollBar', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\b(firefox2022|chrome2022)\b)/ } },
+    });
+  });
+  story('OffsetY', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+    });
+  });
+  story('OffsetX', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+    });
+  });
+  story('OffsetYAndX', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+    });
+  });
+});

package/cjs/components/ScrollContainer/__docs__/ScrollContainer.mdx

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

package/cjs/components/Select/Item.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 interface ItemProps {
+    /** @ignore */
     children?: React.ReactNode;
+    /** Запрещает выделение и выбор данного пункта. */
     isNotSelectable?: boolean;
 }
 export declare class Item extends React.Component<ItemProps> {

package/cjs/components/Select/Item.js

@@ -6,6 +6,9 @@ var _MenuItem = require("../MenuItem");var
 
 
 
+
+
+
 Item = exports.Item = /*#__PURE__*/function (_React$Component) {function Item() {return _React$Component.apply(this, arguments) || this;}(0, _inheritsLoose2.default)(Item, _React$Component);var _proto = Item.prototype;_proto.
 
 

package/cjs/components/Select/Item.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_MenuItem","Item","exports","_React$Component","apply","arguments","_inheritsLoose2","default","_proto","prototype","render","createElement","MenuItem","isNotSelectable","props","children","React","Component","__KONTUR_REACT_UI__","displayName"],"sources":["Item.tsx"],"sourcesContent":["import React from 'react';\n\nimport { MenuItem } from '../MenuItem';\n\ninterface ItemProps {\n  children?: React.ReactNode;\n  isNotSelectable?: boolean;\n}\nexport class Item extends React.Component<ItemProps> {\n  public static __KONTUR_REACT_UI__ = 'SelectItem';\n  public static displayName = 'SelectItem';\n\n  public render() {\n    return <MenuItem isNotSelectable={this.props.isNotSelectable}>{this.props.children}</MenuItem>;\n  }\n}\n"],"mappings":"wPAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;;AAEA,IAAAC,SAAA,GAAAD,OAAA,gBAAuC;;;;;;AAM1BE,IAAI,GAAAC,OAAA,CAAAD,IAAA,0BAAAE,gBAAA,YAAAF,KAAA,UAAAE,gBAAA,CAAAC,KAAA,OAAAC,SAAA,eAAAC,eAAA,CAAAC,OAAA,EAAAN,IAAA,EAAAE,gBAAA,MAAAK,MAAA,GAAAP,IAAA,CAAAQ,SAAA,CAAAD,MAAA;;;;EAIRE,MAAM,GAAb,SAAAA,OAAA,EAAgB;IACd,oBAAOb,MAAA,CAAAU,OAAA,CAAAI,aAAA,CAACX,SAAA,CAAAY,QAAQ,IAACC,eAAe,EAAE,IAAI,CAACC,KAAK,CAACD,eAAgB,IAAE,IAAI,CAACC,KAAK,CAACC,QAAmB,CAAC;EAChG,CAAC,QAAAd,IAAA,GANuBe,cAAK,CAACC,SAAS,EAA5BhB,IAAI,CACDiB,mBAAmB,GAAG,YAAY,CADrCjB,IAAI,CAEDkB,WAAW,GAAG,YAAY","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_MenuItem","Item","exports","_React$Component","apply","arguments","_inheritsLoose2","default","_proto","prototype","render","createElement","MenuItem","isNotSelectable","props","children","React","Component","__KONTUR_REACT_UI__","displayName"],"sources":["Item.tsx"],"sourcesContent":["import React from 'react';\n\nimport { MenuItem } from '../MenuItem';\n\ninterface ItemProps {\n  /** @ignore */\n  children?: React.ReactNode;\n\n  /** Запрещает выделение и выбор данного пункта. */\n  isNotSelectable?: boolean;\n}\nexport class Item extends React.Component<ItemProps> {\n  public static __KONTUR_REACT_UI__ = 'SelectItem';\n  public static displayName = 'SelectItem';\n\n  public render() {\n    return <MenuItem isNotSelectable={this.props.isNotSelectable}>{this.props.children}</MenuItem>;\n  }\n}\n"],"mappings":"wPAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;;AAEA,IAAAC,SAAA,GAAAD,OAAA,gBAAuC;;;;;;;;;AAS1BE,IAAI,GAAAC,OAAA,CAAAD,IAAA,0BAAAE,gBAAA,YAAAF,KAAA,UAAAE,gBAAA,CAAAC,KAAA,OAAAC,SAAA,eAAAC,eAAA,CAAAC,OAAA,EAAAN,IAAA,EAAAE,gBAAA,MAAAK,MAAA,GAAAP,IAAA,CAAAQ,SAAA,CAAAD,MAAA;;;;EAIRE,MAAM,GAAb,SAAAA,OAAA,EAAgB;IACd,oBAAOb,MAAA,CAAAU,OAAA,CAAAI,aAAA,CAACX,SAAA,CAAAY,QAAQ,IAACC,eAAe,EAAE,IAAI,CAACC,KAAK,CAACD,eAAgB,IAAE,IAAI,CAACC,KAAK,CAACC,QAAmB,CAAC;EAChG,CAAC,QAAAd,IAAA,GANuBe,cAAK,CAACC,SAAS,EAA5BhB,IAAI,CACDiB,mBAAmB,GAAG,YAAY,CADrCjB,IAAI,CAEDkB,WAAW,GAAG,YAAY","ignoreList":[]}

package/cjs/components/Select/Select.d.ts

@@ -5,20 +5,23 @@ import { Theme, ThemeIn } from '../../lib/theming/Theme';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { SizeProp } from '../../lib/types/props';
 import { Item } from './Item';
+export * from './tids';
 export interface ButtonParams extends Pick<AriaAttributes, 'aria-describedby' | 'aria-controls' | 'aria-label' | 'aria-expanded'> {
+    /** Делает компонент недоступным. */
     disabled?: boolean;
+    /** Задает лейбл. */
     label: React.ReactNode;
+    /** Задает функцию, которая вызывается при клике на селект. */
     onClick: () => void;
+    /** Задает функцию, которая вызывается при нажатии кнопки на клавиатуре. */
     onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+    /** Определяет, открыто ли выпадающее меню. */
     opened: boolean;
+    /** Определяет, есть ли Placeholder. */
     isPlaceholder: boolean;
+    /** Задает размер контрола. */
     size: SizeProp;
 }
-export declare const SelectDataTids: {
-    readonly root: "Select__root";
-    readonly menu: "Select__menu";
-    readonly label: "Select__label";
-};
 export declare const SelectIds: {
     readonly menu: "Select__menu";
 };
@@ -28,31 +31,29 @@ export interface SelectProps<TValue, TItem> extends CommonProps, Pick<AriaAttrib
     _icon?: React.ReactNode;
     /** @ignore */
     _renderButton?: (params: ButtonParams) => React.ReactNode;
+    /** @ignore */
+    corners?: React.CSSProperties;
+    /** Задает значение по умолчанию. */
     defaultValue?: TValue;
     menuOffset?: number;
-    /**
-     * Отключает использование портала
-     */
+    /** Отключает использование портала. */
     disablePortal?: boolean;
+    /** Делает компонент недоступным.*/
     disabled?: boolean;
-    /**
-     * Состояние валидации при ошибке.
-     */
+    /** Переводит контрол в состояние валидации "ошибка". */
     error?: boolean;
+    /** Задает функцию, которая отфильтровывает элементы по заданному паттерну. */
     filterItem?: (value: TValue, item: TItem, pattern: string) => boolean;
-    /**
-     * Набор значений. Поддерживаются любые перечисляемые типы, в том числе
-     * `Array`, `Map`, `Immutable.Map`.
+    /** Задает набор значений. Поддерживаются любые перечисляемые типы, в том числе `Array`, `Map`, `Immutable.Map`.
      *
-     * Элементы воспринимаются следующим образом: если элемент — это массив, то
-     * первый элемент является значением, второй — отображается в списке,
-     * а третий – комментарий;
-     * если элемент не является массивом, то он используется и для отображения,
-     * и для значения.
+     * Элементы воспринимаются следующим образом: если элемент — это массив, то первый элемент является значением,
+     * второй — отображается в списке, а третий – комментарий;
+     * если элемент не является массивом, то он используется и для отображения, и для значения.
      *
      * Для вставки разделителя можно использовать `Select.SEP`.
      *
      * Вставить невыделяемый элемент со своей разметкой можно так:
+     * @example
      * ```
      * <Select ...
      *   items={[Select.staticElement(() => <div>My Element</div>)]}
@@ -60,58 +61,61 @@ export interface SelectProps<TValue, TItem> extends CommonProps, Pick<AriaAttrib
      * ```
      *
      * Чтобы добавить стандартный отступ для статического элемента:
+     * @example
      * ```
      * <Select.Item>My Element</Select.Item>
-     * ```
-     */
+     * ``` */
     items?: Array<SelectItem<TValue, TItem>>;
+    /** Задает максимальную высоту меню. */
     maxMenuHeight?: number;
+    /** Задает максимальную ширину. */
     maxWidth?: React.CSSProperties['maxWidth'];
-    /**
-     * Позволяет вручную задать текущую позицию выпадающего окна
-     */
+    /** Задает текущую позицию выпадающего окна вручную. */
     menuPos?: 'top' | 'bottom' | 'middle';
+    /** Задает выравнивание меню. */
     menuAlign?: 'left' | 'right';
+    /** Задает ширину выпадающего меню. */
     menuWidth?: React.CSSProperties['width'];
+    /** Задает функцию, вызывающуюся при изменении value. */
     onValueChange?: (value: TValue) => void;
+    /** Задает функцию, которая вызывается при закрытии меню. */
     onClose?: () => void;
+    /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). См разницу с onMouseOver в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave) */
     onMouseEnter?: (e: React.MouseEvent<HTMLElement>) => void;
+    /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */
     onMouseLeave?: (e: React.MouseEvent<HTMLElement>) => void;
+    /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseover`). */
     onMouseOver?: (e: React.MouseEvent<HTMLElement>) => void;
+    /** Задает функцию, которая вызывается при нажатии кнопки на клавиатуре. */
     onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+    /** Задает функцию, которая вызывается при открытии меню. */
     onOpen?: () => void;
+    /** Задает текст, который отображается если не введено никакое значение. */
     placeholder?: React.ReactNode;
-    /**
-     * Функция для отрисовки элемента в выпадающем списке. Аргументы — *value*,
-     * *item*.
-     */
+    /** Задает функцию, которая отображает элемент в выпадающем списке. */
     renderItem?: (value: TValue, item?: TItem) => React.ReactNode;
-    /**
-     * Функция для отрисовки выбранного элемента. Аргументы — *value*, *item*.
-     */
+    /** Задает функцию, которая отображает выбранный элемент. */
     renderValue?: (value: TValue, item?: TItem) => React.ReactNode;
-    /**
-     * Функция для сравнения `value` с элементом из `items`
-     */
+    /** Задает функцию сравнения `value` с элементом из `items`. */
     areValuesEqual?: (value1: TValue, value2: TValue) => boolean;
-    /**
-     * Показывать строку поиска в списке.
-     */
+    /** Показывает строку поиска в списке. */
     search?: boolean;
+    /** Задает значение. */
     value?: TValue;
     theme?: ThemeIn | Theme;
+    /** Задает длину контрола. */
     width?: number | string;
-    /**
-     * Состояние валидации при предупреждении.
-     */
+    /** Переводит контрол в состояние валидации "предупреждение". */
     warning?: boolean;
+    /** Задаёт стиль кнопки. */
     use?: ButtonUse;
+    /** Задает размер. */
     size?: SizeProp;
+    /** Задаёт HTML-событие `onfocus`. */
     onFocus?: React.FocusEventHandler<HTMLElement>;
+    /** Задаёт HTML-событие `onblur`. */
     onBlur?: React.FocusEventHandler<HTMLElement>;
-    /**
-     * Текст заголовка выпадающего меню в мобильной версии
-     */
+    /** Задает текст заголовка выпадающего меню в мобильной версии. */
     mobileMenuHeaderText?: string;
 }
 export interface SelectState<TValue> {
@@ -120,6 +124,16 @@ export interface SelectState<TValue> {
     value: Nullable<TValue>;
 }
 type DefaultProps<TValue, TItem> = Required<Pick<SelectProps<TValue, TItem>, 'renderValue' | 'renderItem' | 'areValuesEqual' | 'filterItem' | 'use' | 'size'>>;
+/**
+ * Раскрывающийся список `Select` позволяет выбрать значение из заранее известного набора вариантов.
+ *
+ * Используйте `Select` при:
+ * * заполнении форм, например для выбора месяца.
+ * * переключении состояний, например, фильтра.
+ * * выборе предустановленных настроек, например, частоты уведомлений, часового пояса.
+ *
+ * Не используйте `Select` для выбора элементов меню. В таком случае воспользуйтесь компонентом Dropdown.
+ */
 export declare class Select<TValue = {}, TItem = {}> extends React.Component<SelectProps<TValue, TItem>, SelectState<TValue>> {
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
@@ -177,4 +191,3 @@ export declare class Select<TValue = {}, TItem = {}> extends React.Component<Sel
     private buttonRef;
     private getButton;
 }
-export {};

package/cjs/components/Select/Select.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.SelectIds = exports.SelectDataTids = exports.Select = void 0;var _createForOfIteratorHelperLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelperLoose"));var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;var _exportNames = { SelectIds: true, Select: true };exports.SelectIds = exports.Select = void 0;var _createForOfIteratorHelperLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelperLoose"));var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _invariant = _interopRequireDefault(require("invariant"));
 var _globalObject = require("@skbkontur/global-object");
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
@@ -42,7 +42,23 @@ var _ArrowDownIcon = require("./ArrowDownIcon");
 var _Item = require("./Item");
 var _locale = require("./locale");
 var _Select2 = require("./Select.styles");
-var _selectTheme = require("./selectTheme");var _dec, _class, _Select;
+var _selectTheme = require("./selectTheme");
+var _tids = require("./tids");
+
+Object.keys(_tids).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _tids[key]) return;exports[key] = _tids[key];});var _dec, _class, _Select;
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -62,21 +78,17 @@ var PASS_BUTTON_PROPS = {
   use: true,
   size: true,
   warning: true,
+  corners: true,
 
   onMouseEnter: true,
   onMouseLeave: true,
   onMouseOver: true
 };
 
-var SelectDataTids = exports.SelectDataTids = {
-  root: 'Select__root',
-  menu: 'Select__menu',
-  label: 'Select__label'
+var SelectIds = exports.SelectIds = {
+  menu: _tids.SelectDataTids.menu
 };
 
-var SelectIds = exports.SelectIds = {
-  menu: SelectDataTids.menu
-};var
 
 
 
@@ -199,6 +211,51 @@ var SelectIds = exports.SelectIds = {
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/**
+ * Раскрывающийся список `Select` позволяет выбрать значение из заранее известного набора вариантов.
+ *
+ * Используйте `Select` при:
+ * * заполнении форм, например для выбора месяца.
+ * * переключении состояний, например, фильтра.
+ * * выборе предустановленных настроек, например, частоты уведомлений, часового пояса.
+ *
+ * Не используйте `Select` для выбора элементов меню. В таком случае воспользуйтесь компонентом Dropdown.
+ */var
+
+
+
+
+
 Select = exports.Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper), (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class = _dec(_class = (_Select = /*#__PURE__*/function (_React$Component) {function Select() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
@@ -728,7 +785,7 @@ Select = exports.Select = (_dec = (0, _decorators.locale)('Select', _locale.Sele
         'aria-label': (_props$ariaLabel = buttonElement.props['aria-label']) != null ? _props$ariaLabel : _this.props['aria-label']
       }) :
       buttonElement;
-    };return _this;}(0, _inheritsLoose2.default)(Select, _React$Component);var _proto = Select.prototype;_proto.componentDidUpdate = function componentDidUpdate(_prevProps, prevState) {if (!prevState.opened && this.state.opened) {_globalObject.globalObject.addEventListener == null || _globalObject.globalObject.addEventListener('popstate', this.close);}if (prevState.opened && !this.state.opened) {_globalObject.globalObject.removeEventListener == null || _globalObject.globalObject.removeEventListener('popstate', this.close);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = _ThemeFactory.ThemeFactory.create({ menuOffsetY: theme.selectMenuOffsetY }, theme);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});};_proto.getMenuRenderer = function getMenuRenderer() {if (this.props.disabled) {return null;}if (this.isMobileLayout) {return this.renderMobileMenu();}if (this.state.opened) {return this.renderMenu();}return null;};_proto.renderMain = function renderMain() {var _this$getProps$dataT, _cx;var buttonParams = this.getDefaultButtonParams();var dataTid = (_this$getProps$dataT = this.getProps()['data-tid']) != null ? _this$getProps$dataT : SelectDataTids.root;var button = /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: (0, _selectTheme.getSelectTheme)(this.theme, this.props) }, this.getButton(buttonParams));var isMobile = this.isMobileLayout;var style = { width: this.props.width, maxWidth: this.props.maxWidth || undefined };var root = /*#__PURE__*/_react.default.createElement("span", { "data-tid": dataTid, className: (0, _Emotion.cx)((_cx = {}, _cx[_Select2.styles.root()] = true, _cx[_Select2.styles.rootMobile(this.theme)] = isMobile, _cx)), style: style }, button, this.getMenuRenderer());return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.close, onFocusOutside: this.close, active: isMobile ? false : this.state.opened }, root));};_proto.renderLabel = function renderLabel() {var _this$locale;var value = this.getValue();var item = this.getItemByValue(value);if ((0, _utils.isNonNullable)(value)) {return { label: this.getProps().renderValue(value, item), isPlaceholder: false };}return { label: /*#__PURE__*/_react.default.createElement("span", null, this.props.placeholder || ((_this$locale = this.locale) == null ? void 0 : _this$locale.placeholder)), isPlaceholder: true };};_proto.getLeftIconClass = function getLeftIconClass(size) {if (this.getProps().use === 'link') {return _Select2.styles.leftIconLink(this.theme);}switch (size) {case 'large':return _Select2.styles.leftIconLarge(this.theme);case 'medium':return _Select2.styles.leftIconMedium(this.theme);case 'small':default:return _Select2.styles.leftIconSmall(this.theme);}};_proto.renderDefaultButton = function renderDefaultButton(params) {var _cx2, _cx3, _cx4;var buttonProps = (0, _extends2.default)({}, (0, _filterProps.filterProps)(this.props, PASS_BUTTON_PROPS), { align: 'left', disabled: this.props.disabled, width: '100%', onClick: params.onClick, onKeyDown: params.onKeyDown, active: params.opened, size: params.size });var use = this.getProps().use;var labelProps = { 'data-tid': SelectDataTids.label, className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_Select2.styles.label()] = use !== 'link', _cx2[_Select2.styles.placeholder(this.theme)] = params.isPlaceholder, _cx2[_Select2.styles.customUsePlaceholder()] = params.isPlaceholder && use !== 'default', _cx2[_Select2.styles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _cx2)), style: { paddingRight: this.getSelectIconGap() } };var useIsCustom = use !== 'default';var icon = /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, { size: this.props.size });return /*#__PURE__*/_react.default.createElement(_Button.Button, buttonProps, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Select2.styles.selectButtonContainer(), (_cx3 = {}, _cx3[_Link.styles.root(this.theme)] = use === 'link', _cx3)) }, this.props._icon && /*#__PURE__*/_react.default.createElement("div", { className: this.getLeftIconClass(this.props.size) }, this.props._icon), /*#__PURE__*/_react.default.createElement("span", labelProps, params.label), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Select2.styles.arrowWrap(this.theme), (_cx4 = {}, _cx4[_Select2.styles.arrowDisabled(this.theme)] = this.props.disabled, _cx4[_Select2.styles.customUseArrow()] = useIsCustom, _cx4)) }, icon)));};_proto.getSelectIconGap = function getSelectIconGap() {var _this3 = this;var getArrowPadding = function getArrowPadding() {switch (_this3.props.size) {case 'large':return _this3.theme.selectIconGapLarge;case 'medium':return _this3.theme.selectIconGapMedium;case 'small':default:return _this3.theme.selectIconGapSmall;}};var arrowLeftPadding = parseFloat(getArrowPadding()) || 0;return arrowLeftPadding;};_proto.renderMenu = function renderMenu() {var search = this.props.search ? this.getSearch() : null;var value = this.getValue();var _this$getProps = this.getProps(),menuWidth = _this$getProps.menuWidth,menuPos = _this$getProps.menuPos,menuAlign = _this$getProps.menuAlign;return /*#__PURE__*/_react.default.createElement(_Popup.Popup, { opened: true, hasShadow: true, id: this.menuId, "data-tid": SelectDataTids.menu, positions: (0, _getMenuPositions.getMenuPositions)(menuPos, menuAlign), anchorElement: this.popupGetParent(), priority: _ZIndex.ZIndex.priorities.PopupMenu, disablePortal: this.props.disablePortal, margin: parseInt(this.theme.menuOffsetY) - 1, width: menuWidth, minWidth: menuWidth === undefined ? '100%' : undefined, popupOffset: this.props.menuOffset }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, { hasMargin: false, ref: this.refMenu, onItemClick: this.close, maxHeight: this.props.maxMenuHeight, align: menuAlign }, search, this.getMenuItems(value)));};_proto.renderMobileMenu = function renderMobileMenu() {var search = this.props.search ? this.getMobileSearch() : null;var value = this.getValue();return /*#__PURE__*/_react.default.createElement(_MobilePopup.MobilePopup, { headerChildComponent: search, caption: this.props.mobileMenuHeaderText, onCloseRequest: this.close, opened: this.state.opened }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, { onItemClick: this.close, disableScrollContainer: true, maxHeight: 'auto' }, this.getMenuItems(value)));};_proto.select = function select(value) {this.focus();this.setState({ opened: false, value: value });if (!this.areValuesEqual(this.getValue(), value)) {var _this$props$onValueCh, _this$props;(_this$props$onValueCh = (_this$props = this.props).onValueChange) == null || _this$props$onValueCh.call(_this$props, value);}};_proto.getValue = function getValue() {if (this.props.value !== undefined) {return this.props.value;}return this.state.value;};_proto.mapItems = function mapItems(fn) {var items = this.props.items;if (!items) {return [];}var pattern = this.state.searchPattern && this.state.searchPattern.toLowerCase();var result = [];var index = 0;for (var _iterator = (0, _createForOfIteratorHelperLoose2.default)(items), _step; !(_step = _iterator()).done;) {var entry = _step.value;var _normalizeEntry = normalizeEntry(entry),value = _normalizeEntry[0],item = _normalizeEntry[1],comment = _normalizeEntry[2];if (!pattern || this.getProps().filterItem(value, item, pattern)) {result.push(fn(value, item, index, comment));++index;}}return result;};_proto.getItemByValue = function getItemByValue(value) {if (value === null || value === undefined) {return null;}var items = this.props.items || [];for (var _iterator2 = (0, _createForOfIteratorHelperLoose2.default)(items), _step2; !(_step2 = _iterator2()).done;) {var entry = _step2.value;var _normalizeEntry2 = normalizeEntry(entry),itemValue = _normalizeEntry2[0],item = _normalizeEntry2[1];if (this.areValuesEqual(itemValue, value)) {return item;}}return null;};_proto.areValuesEqual = function areValuesEqual(value1, value2) {return (0, _utils.isNonNullable)(value1) && (0, _utils.isNonNullable)(value2) && this.getProps().areValuesEqual(value1, value2);};return Select;}(_react.default.Component), _Select.__KONTUR_REACT_UI__ = 'Select', _Select.displayName = 'Select', _Select.defaultProps = { renderValue: renderValue, renderItem: renderItem, areValuesEqual: areValuesEqual, filterItem: filterItem, use: 'default', size: 'small' }, _Select.Item = _Item.Item, _Select.SEP = function () {return /*#__PURE__*/_react.default.createElement(_MenuSeparator.MenuSeparator, null);}, _Select.staticElement = function (element) {(0, _invariant.default)( /*#__PURE__*/_react.default.isValidElement(element) || typeof element === 'function', 'Select.staticElement(element) expects element to be a valid react element.');return element;}, _Select)) || _class) || _class) || _class);
+    };return _this;}(0, _inheritsLoose2.default)(Select, _React$Component);var _proto = Select.prototype;_proto.componentDidUpdate = function componentDidUpdate(_prevProps, prevState) {if (!prevState.opened && this.state.opened) {_globalObject.globalObject.addEventListener == null || _globalObject.globalObject.addEventListener('popstate', this.close);}if (prevState.opened && !this.state.opened) {_globalObject.globalObject.removeEventListener == null || _globalObject.globalObject.removeEventListener('popstate', this.close);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = _ThemeFactory.ThemeFactory.create({ menuOffsetY: theme.selectMenuOffsetY }, theme);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});};_proto.getMenuRenderer = function getMenuRenderer() {if (this.props.disabled) {return null;}if (this.isMobileLayout) {return this.renderMobileMenu();}if (this.state.opened) {return this.renderMenu();}return null;};_proto.renderMain = function renderMain() {var _this$getProps$dataT, _cx;var buttonParams = this.getDefaultButtonParams();var dataTid = (_this$getProps$dataT = this.getProps()['data-tid']) != null ? _this$getProps$dataT : _tids.SelectDataTids.root;var button = /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: (0, _selectTheme.getSelectTheme)(this.theme, this.props) }, this.getButton(buttonParams));var isMobile = this.isMobileLayout;var style = { width: this.props.width, maxWidth: this.props.maxWidth || undefined };var root = /*#__PURE__*/_react.default.createElement("span", { "data-tid": dataTid, className: (0, _Emotion.cx)((_cx = {}, _cx[_Select2.styles.root()] = true, _cx[_Select2.styles.rootMobile(this.theme)] = isMobile, _cx)), style: style }, button, this.getMenuRenderer());return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.close, onFocusOutside: this.close, active: isMobile ? false : this.state.opened }, root));};_proto.renderLabel = function renderLabel() {var _this$locale;var value = this.getValue();var item = this.getItemByValue(value);if ((0, _utils.isNonNullable)(value)) {return { label: this.getProps().renderValue(value, item), isPlaceholder: false };}return { label: /*#__PURE__*/_react.default.createElement("span", null, this.props.placeholder || ((_this$locale = this.locale) == null ? void 0 : _this$locale.placeholder)), isPlaceholder: true };};_proto.getLeftIconClass = function getLeftIconClass(size) {if (this.getProps().use === 'link') {return _Select2.styles.leftIconLink(this.theme);}switch (size) {case 'large':return _Select2.styles.leftIconLarge(this.theme);case 'medium':return _Select2.styles.leftIconMedium(this.theme);case 'small':default:return _Select2.styles.leftIconSmall(this.theme);}};_proto.renderDefaultButton = function renderDefaultButton(params) {var _cx2, _cx3, _cx4;var buttonProps = (0, _extends2.default)({}, (0, _filterProps.filterProps)(this.props, PASS_BUTTON_PROPS), { align: 'left', disabled: this.props.disabled, width: '100%', onClick: params.onClick, onKeyDown: params.onKeyDown, active: params.opened, size: params.size });var use = this.getProps().use;var labelProps = { 'data-tid': _tids.SelectDataTids.label, className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_Select2.styles.label()] = use !== 'link', _cx2[_Select2.styles.placeholder(this.theme)] = params.isPlaceholder, _cx2[_Select2.styles.customUsePlaceholder()] = params.isPlaceholder && use !== 'default', _cx2[_Select2.styles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _cx2)), style: { paddingRight: this.getSelectIconGap() } };var useIsCustom = use !== 'default';var icon = /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, { size: this.props.size });return /*#__PURE__*/_react.default.createElement(_Button.Button, buttonProps, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Select2.styles.selectButtonContainer(), (_cx3 = {}, _cx3[_Link.styles.root(this.theme)] = use === 'link', _cx3)) }, this.props._icon && /*#__PURE__*/_react.default.createElement("div", { className: this.getLeftIconClass(this.props.size) }, this.props._icon), /*#__PURE__*/_react.default.createElement("span", labelProps, params.label), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Select2.styles.arrowWrap(this.theme), (_cx4 = {}, _cx4[_Select2.styles.arrowDisabled(this.theme)] = this.props.disabled, _cx4[_Select2.styles.customUseArrow()] = useIsCustom, _cx4)) }, icon)));};_proto.getSelectIconGap = function getSelectIconGap() {var _this3 = this;var getArrowPadding = function getArrowPadding() {switch (_this3.props.size) {case 'large':return _this3.theme.selectIconGapLarge;case 'medium':return _this3.theme.selectIconGapMedium;case 'small':default:return _this3.theme.selectIconGapSmall;}};var arrowLeftPadding = parseFloat(getArrowPadding()) || 0;return arrowLeftPadding;};_proto.renderMenu = function renderMenu() {var search = this.props.search ? this.getSearch() : null;var value = this.getValue();var _this$getProps = this.getProps(),menuWidth = _this$getProps.menuWidth,menuPos = _this$getProps.menuPos,menuAlign = _this$getProps.menuAlign;return /*#__PURE__*/_react.default.createElement(_Popup.Popup, { opened: true, hasShadow: true, id: this.menuId, "data-tid": _tids.SelectDataTids.menu, positions: (0, _getMenuPositions.getMenuPositions)(menuPos, menuAlign), anchorElement: this.popupGetParent(), priority: _ZIndex.ZIndex.priorities.PopupMenu, disablePortal: this.props.disablePortal, margin: parseInt(this.theme.menuOffsetY) - 1, width: menuWidth, minWidth: menuWidth === undefined ? '100%' : undefined, popupOffset: this.props.menuOffset }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, { hasMargin: false, ref: this.refMenu, onItemClick: this.close, maxHeight: this.props.maxMenuHeight, align: menuAlign }, search, this.getMenuItems(value)));};_proto.renderMobileMenu = function renderMobileMenu() {var search = this.props.search ? this.getMobileSearch() : null;var value = this.getValue();return /*#__PURE__*/_react.default.createElement(_MobilePopup.MobilePopup, { headerChildComponent: search, caption: this.props.mobileMenuHeaderText, onCloseRequest: this.close, opened: this.state.opened }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, { onItemClick: this.close, disableScrollContainer: true, maxHeight: 'auto' }, this.getMenuItems(value)));};_proto.select = function select(value) {this.focus();this.setState({ opened: false, value: value });if (!this.areValuesEqual(this.getValue(), value)) {var _this$props$onValueCh, _this$props;(_this$props$onValueCh = (_this$props = this.props).onValueChange) == null || _this$props$onValueCh.call(_this$props, value);}};_proto.getValue = function getValue() {if (this.props.value !== undefined) {return this.props.value;}return this.state.value;};_proto.mapItems = function mapItems(fn) {var items = this.props.items;if (!items) {return [];}var pattern = this.state.searchPattern && this.state.searchPattern.toLowerCase();var result = [];var index = 0;for (var _iterator = (0, _createForOfIteratorHelperLoose2.default)(items), _step; !(_step = _iterator()).done;) {var entry = _step.value;var _normalizeEntry = normalizeEntry(entry),value = _normalizeEntry[0],item = _normalizeEntry[1],comment = _normalizeEntry[2];if (!pattern || this.getProps().filterItem(value, item, pattern)) {result.push(fn(value, item, index, comment));++index;}}return result;};_proto.getItemByValue = function getItemByValue(value) {if (value === null || value === undefined) {return null;}var items = this.props.items || [];for (var _iterator2 = (0, _createForOfIteratorHelperLoose2.default)(items), _step2; !(_step2 = _iterator2()).done;) {var entry = _step2.value;var _normalizeEntry2 = normalizeEntry(entry),itemValue = _normalizeEntry2[0],item = _normalizeEntry2[1];if (this.areValuesEqual(itemValue, value)) {return item;}}return null;};_proto.areValuesEqual = function areValuesEqual(value1, value2) {return (0, _utils.isNonNullable)(value1) && (0, _utils.isNonNullable)(value2) && this.getProps().areValuesEqual(value1, value2);};return Select;}(_react.default.Component), _Select.__KONTUR_REACT_UI__ = 'Select', _Select.displayName = 'Select', _Select.defaultProps = { renderValue: renderValue, renderItem: renderItem, areValuesEqual: areValuesEqual, filterItem: filterItem, use: 'default', size: 'small' }, _Select.Item = _Item.Item, _Select.SEP = function () {return /*#__PURE__*/_react.default.createElement(_MenuSeparator.MenuSeparator, null);}, _Select.staticElement = function (element) {(0, _invariant.default)( /*#__PURE__*/_react.default.isValidElement(element) || typeof element === 'function', 'Select.staticElement(element) expects element to be a valid react element.');return element;}, _Select)) || _class) || _class) || _class);
 
 
 function renderValue(value, item) {