@skbkontur/react-ui 0.0.0-bcbd5e6112 → 0.0.0-c13bb5f4ca

package/cjs/components/ComboBox/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_CustomComboBox","_rootNode","_createPropsGetter","_class","_ComboBox","ComboBox","exports","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","createPropsGetter","defaultProps","comboboxElement","customComboBoxRef","element","setRootNode","_inheritsLoose2","default","_proto","prototype","focus","opts","blur","search","query","cancelSearch","open","close","selectInputText","reset","render","createElement","CustomComboBox","_extends2","size","props","ref","React","Component","__KONTUR_REACT_UI__","displayName","itemToValue","item","value","valueToString","label","renderValue","renderItem","menuAlign","searchOnFocus","drawArrow","showClearIcon"],"sources":["ComboBox.tsx"],"sourcesContent":["import type { AriaAttributes, HTMLAttributes } from 'react';\nimport React from 'react';\n\nimport { CustomComboBox } from '../../internal/CustomComboBox';\nimport type { Nullable } from '../../typings/utility-types';\nimport type { MenuItemState } from '../MenuItem';\nimport type { ShowClearIcon, InputIconType } from '../Input';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport type { SizeProp } from '../../lib/types/props';\n\nexport interface ComboBoxProps<T>\n  extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n    Pick<HTMLAttributes<HTMLElement>, 'id'>,\n    CommonProps {\n  /** Показывать иконку очистки значения в непустом поле:\n   * - `always` — всегда показывать иконку\n   * - `auto` — показывать иконку при hover/focus\n   * - `never` — не показывать иконку\n   * При одновременной настройке `showClearIcon` и `rightIcon` показывается иконка очистки.\n   * @default never */\n  showClearIcon?: ShowClearIcon;\n\n  /** Задает выравнивание контента. */\n  align?: 'left' | 'center' | 'right';\n\n  /** Вызывает функцию поиска getItems при фокусе и очистке поля ввода. */\n  searchOnFocus?: boolean;\n\n  /** Отображает справа иконку в виде стрелки. */\n  drawArrow?: boolean;\n\n  /** Устанавливает фокус на контроле после окончания загрузки страницы. */\n  autoFocus?: boolean;\n\n  /** Убирает обводку. */\n  borderless?: boolean;\n\n  /** Отключает использование портала для рендеринга меню.\n   * См. https://github.com/skbkontur/retail-ui/issues/15 */\n  disablePortal?: boolean;\n\n  /** Делает компонент недоступным. */\n  disabled?: boolean;\n\n  /** Переводит контрол в состояние валидации \"ошибка\". */\n  error?: boolean;\n\n  /** Добавляет иконку слева.\n   При использовании `ReactNode` применяются дефолтные стили для иконки.\n   При использовании `() => ReactNode` применяются только стили для позиционирования. */\n  leftIcon?: InputIconType;\n\n  /** Добавляет иконку справа.\n   При использовании `ReactNode` применяются дефолтные стили для иконки.\n   При использовании `() => ReactNode` применяются только стили для позиционирования. */\n  rightIcon?: InputIconType;\n\n  /** Задает функцию поиска элементов, которая должна возвращать Promise с массивом элементов.\n   * По умолчанию ожидаются объекты с типом `{ value: string, label: string }`.\n   * Элементы могут быть любого типа. В этом случае необходимо определить свойства `itemToValue`, `renderValue`, `renderItem`, `valueToString`. */\n  getItems: (query: string) => Promise<Array<ComboBoxExtendedItem<T>>>;\n\n  /** Задает функцию сравнения полученных результатов с value. */\n  itemToValue?: (item: T) => string | number;\n\n  /** Задает максимальную длину инпута. */\n  maxLength?: number;\n\n  /** Задает текущую позицию выпадающего окна вручную.\n   */\n  menuPos?: 'top' | 'bottom';\n\n  /** Задает выравнивание выпадающего меню. */\n  menuAlign?: 'left' | 'right';\n\n  /** Задает функцию, которая вызывается при потере комбобоксом фокуса. */\n  onBlur?: () => void;\n\n  /** Вызывается при изменении `value` */\n  onValueChange?: (value: T) => void;\n\n  /** Задает функцию, которая вызывается при получении комбобоксом фокуса. */\n  onFocus?: () => void;\n\n  /** Задает функцию, которая вызывается при изменении текста в поле ввода, если результатом функции будет строка, то она станет следующим состоянием полем ввода. */\n  onInputValueChange?: (value: string) => Nullable<string> | void;\n\n  /** Задает функцию для обработки ввода строки в инпут и последующей потерей фокуса компонентом.\n   * Функция срабатывает с аргументом инпута строки.\n   * Если при потере фокуса в выпадающем списке будет только один элемент и результат valueToString с этим элементом будет совпадать со значение в текстовом поле, то сработает onValueChange со значением данного элемента.\n   * Сама функция также может вернуть значение, неравное undefined, с которым будет вызван onValueChange. Если возвращаемое значение будет равно null, то сработает очистка текущего значения инпута, а в режиме редактирования токен будет удален. */\n  onUnexpectedInput?: (value: string) => void | null | T;\n\n  /** Задает текст, который отображается если не введено никакое значение. */\n  placeholder?: string;\n\n  /** Задает функцию отрисовки элементов результата поиска.\n   * Не применяется если элемент является функцией или React-элементом\n   * @default item => item.label\n   * @param {T} item - элемент из результата поиска.\n   * @param {MenuItemState} state? - состояние элемента.\n   * @returns {React.ReactNode} React-элемент. */\n  renderItem?: (item: T, state?: MenuItemState) => React.ReactNode;\n\n  /** Устанавливает компонент, заменяющий собой обёртку элементов результата поиска.\n   * По умолчанию все элементы результата поиска оборачиваются в тег <button />.\n   * @example\n   * itemWrapper={(item) => {\n   *    if (item.value === 3) {\n   *      return (props) => {\n   *        return <a {...props} />\n   *      }\n   *    }\n   * }}\n   */\n  itemWrapper?: (item: T) => React.ComponentType;\n\n  /** Задает функцию, которая отображает сообщение о пустом результате поиска. При renderAddButton не работает. */\n  renderNotFound?: () => React.ReactNode;\n\n  /** Задает функцию, которая отображает сообщение об общем количестве элементов.\n   * @param {number} found - количество элементов по результатам поиска. Учитывает только компонент MenuItem. Им \"оборачиваются\" элементы, возвращаемые getItems().\n   * @param {number} total - количество всех элементов. */\n  renderTotalCount?: (found: number, total: number) => React.ReactNode;\n\n  /** Задает функцию, которая отображает выбранное значение.\n   * @default item => item.label */\n  renderValue?: (item: T) => React.ReactNode;\n\n  /** Задает функцию отрисовки кнопки добавления в выпадающем списке. */\n  renderAddButton?: (query?: string) => React.ReactNode;\n\n  /** Определяет общее количество элементов. Необходим для работы renderTotalCount. */\n  totalCount?: number;\n\n  /** Устанавливает выбранное в комбобоксе значение. Тип `value` совпадает с типом элементов в массиве, возвращаемом в `getItems`. */\n  value?: Nullable<T>;\n\n  /** Задает функцию, которая возвращает строковое представление value. Необходимо при фокусировке. */\n  valueToString?: (item: T) => string;\n\n  /** Задает размер компонента. */\n  size?: SizeProp;\n\n  /** Переводит контрол в состояние валидации \"предупреждение\". */\n  warning?: boolean;\n\n  /** Задает длину комбобокса. */\n  width?: string | number;\n\n  /** Задает максимальную высоту меню. */\n  maxMenuHeight?: number | string;\n\n  /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). См разницу с onMouseOver в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave)  */\n  onMouseEnter?: (e: React.MouseEvent) => void;\n\n  /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseover`). */\n  onMouseOver?: (e: React.MouseEvent) => void;\n\n  /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */\n  onMouseLeave?: (e: React.MouseEvent) => void;\n\n  /** Задает функцию, которая вызывается при нажатии кнопки на клавиатуре. */\n  onInputKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;\n\n  /** Задает типы вводимых данных. */\n  inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];\n}\n\nexport interface ComboBoxItem {\n  value: string;\n  label: string;\n}\n\nexport type ComboBoxExtendedItem<T> = T | (() => React.ReactElement<T>) | React.ReactElement<T>;\n\ntype DefaultProps<T> = Required<\n  Pick<\n    ComboBoxProps<T>,\n    | 'itemToValue'\n    | 'valueToString'\n    | 'renderValue'\n    | 'renderItem'\n    | 'menuAlign'\n    | 'searchOnFocus'\n    | 'drawArrow'\n    | 'showClearIcon'\n  >\n>;\n\n/**\n * `ComboBox` — это поле ввода со списком подсказок.\n *\n * `ComboBox` используют:\n * * для выбора значения из справочника.\n * * для добавления своего значения в справочник.\n *\n * `ComboBox` может работать в двух режимах — обычном и в режиме автокомплита.\n * Основное их отличие в том, что в режиме автокомплита список вариантов появляется только после ввода первого символа или изменении уже введенного значения.\n */\n@rootNode\nexport class ComboBox<T = ComboBoxItem> extends React.Component<ComboBoxProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'ComboBox';\n  public static displayName = 'ComboBox';\n\n  public static defaultProps: DefaultProps<any> = {\n    itemToValue: (item: ComboBoxItem) => item.value,\n    valueToString: (item: ComboBoxItem) => item.label,\n    renderValue: (item: ComboBoxItem) => item.label,\n    renderItem: (item: ComboBoxItem) => item.label,\n    menuAlign: 'left',\n    searchOnFocus: true,\n    drawArrow: true,\n    showClearIcon: 'never',\n  };\n\n  private getProps = createPropsGetter(ComboBox.defaultProps);\n\n  private comboboxElement: Nullable<CustomComboBox<T>> = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  /**\n   * @public\n   */\n  public focus(opts?: { withoutOpenDropdown?: boolean }) {\n    if (this.comboboxElement) {\n      this.comboboxElement.focus(opts);\n    }\n  }\n\n  /**\n   * @public\n   */\n  public blur() {\n    if (this.comboboxElement) {\n      this.comboboxElement.blur();\n    }\n  }\n\n  /**\n   * Открывает выпадающий список и запускает поиск элементов\n   *\n   * @public\n   * @param {string} [query] Текст поиска. По умолчанию берется\n   * текст из инпута или результат `valueToString(value)`\n   */\n  public search(query?: string) {\n    if (this.comboboxElement) {\n      this.comboboxElement.search(query);\n    }\n  }\n\n  /**\n   * @public\n   */\n  public cancelSearch() {\n    if (this.comboboxElement) {\n      this.comboboxElement.cancelSearch();\n    }\n  }\n\n  /**\n   * @public Открывает выпадающий список\n   */\n  public open() {\n    if (this.comboboxElement) {\n      this.comboboxElement.open();\n    }\n  }\n\n  /**\n   * @public Закрывает выпадающий список\n   */\n  public close() {\n    if (this.comboboxElement) {\n      this.comboboxElement.close();\n    }\n  }\n\n  /**\n   * Выделяет текст внутри input\n   * @public\n   */\n  public selectInputText() {\n    if (this.comboboxElement) {\n      this.comboboxElement.selectInputText();\n    }\n  }\n\n  /**\n   * Сбрасывает введенное пользователем значение\n   * @public\n   */\n  public reset() {\n    if (this.comboboxElement) {\n      this.comboboxElement.reset();\n    }\n  }\n\n  public render() {\n    return <CustomComboBox {...this.getProps()} size={this.props.size} ref={this.customComboBoxRef} />;\n  }\n\n  private customComboBoxRef = (element: Nullable<CustomComboBox<T>>) => {\n    this.setRootNode(element);\n    this.comboboxElement = element;\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_CustomComboBox","_rootNode","_createPropsGetter","_class","_ComboBox","ComboBox","exports","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","createPropsGetter","defaultProps","comboboxElement","customComboBoxRef","element","setRootNode","_inheritsLoose2","default","_proto","prototype","focus","opts","blur","search","query","cancelSearch","open","close","selectInputText","reset","setValue","value","changeValue","render","createElement","CustomComboBox","_extends2","size","props","ref","React","Component","__KONTUR_REACT_UI__","displayName","itemToValue","item","valueToString","label","renderValue","renderItem","menuAlign","searchOnFocus","drawArrow","showClearIcon"],"sources":["ComboBox.tsx"],"sourcesContent":["import type { AriaAttributes, HTMLAttributes } from 'react';\nimport React from 'react';\n\nimport { CustomComboBox } from '../../internal/CustomComboBox';\nimport type { Nullable } from '../../typings/utility-types';\nimport type { MenuItemState } from '../MenuItem';\nimport type { ShowClearIcon, InputIconType } from '../Input';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport type { SizeProp } from '../../lib/types/props';\nimport type { MaskedInputProps } from '../MaskedInput';\n\nexport interface ComboBoxProps<T>\n  extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n    Pick<HTMLAttributes<HTMLElement>, 'id'>,\n    Pick<HTMLAttributes<HTMLInputElement>, 'onPaste'>,\n    Partial<Pick<MaskedInputProps, 'mask' | 'maskChar' | 'formatChars'>>,\n    CommonProps {\n  /** Показывать иконку очистки значения в непустом поле:\n   * - `always` — всегда показывать иконку\n   * - `auto` — показывать иконку при hover/focus\n   * - `never` — не показывать иконку\n   * При одновременной настройке `showClearIcon` и `rightIcon` показывается иконка очистки.\n   * @default never */\n  showClearIcon?: ShowClearIcon;\n\n  /** Задает выравнивание контента. */\n  align?: 'left' | 'center' | 'right';\n\n  /** Вызывает функцию поиска getItems при фокусе и очистке поля ввода. */\n  searchOnFocus?: boolean;\n\n  /** Отображает справа иконку в виде стрелки. */\n  drawArrow?: boolean;\n\n  /** Устанавливает фокус на контроле после окончания загрузки страницы. */\n  autoFocus?: boolean;\n\n  /** Убирает обводку. */\n  borderless?: boolean;\n\n  /** Отключает использование портала для рендеринга меню.\n   * См. https://github.com/skbkontur/retail-ui/issues/15 */\n  disablePortal?: boolean;\n\n  /** Делает компонент недоступным. */\n  disabled?: boolean;\n\n  /** Переводит контрол в состояние валидации \"ошибка\". */\n  error?: boolean;\n\n  /** Добавляет иконку слева.\n   При использовании `ReactNode` применяются дефолтные стили для иконки.\n   При использовании `() => ReactNode` применяются только стили для позиционирования. */\n  leftIcon?: InputIconType;\n\n  /** Добавляет иконку справа.\n   При использовании `ReactNode` применяются дефолтные стили для иконки.\n   При использовании `() => ReactNode` применяются только стили для позиционирования. */\n  rightIcon?: InputIconType;\n\n  /** Задает функцию поиска элементов, которая должна возвращать Promise с массивом элементов.\n   * По умолчанию ожидаются объекты с типом `{ value: string, label: string }`.\n   * Элементы могут быть любого типа. В этом случае необходимо определить свойства `itemToValue`, `renderValue`, `renderItem`, `valueToString`. */\n  getItems: (query: string) => Promise<Array<ComboBoxExtendedItem<T>>>;\n\n  /** Задает функцию сравнения полученных результатов с value. */\n  itemToValue?: (item: T) => string | number;\n\n  /** Задает максимальную длину инпута. */\n  maxLength?: number;\n\n  /** Задает текущую позицию выпадающего окна вручную.\n   */\n  menuPos?: 'top' | 'bottom';\n\n  /** Задает выравнивание выпадающего меню. */\n  menuAlign?: 'left' | 'right';\n\n  /** Задает функцию, которая вызывается при потере комбобоксом фокуса. */\n  onBlur?: () => void;\n\n  /** Вызывается при изменении `value` */\n  onValueChange?: (value: T) => void;\n\n  /** Задает функцию, которая вызывается при получении комбобоксом фокуса. */\n  onFocus?: () => void;\n\n  /** Задает функцию, которая вызывается при изменении текста в поле ввода, если результатом функции будет строка, то она станет следующим состоянием полем ввода. */\n  onInputValueChange?: (value: string) => Nullable<string> | void;\n\n  /** Задает функцию для обработки ввода строки в инпут и последующей потерей фокуса компонентом.\n   * Функция срабатывает с аргументом инпута строки.\n   * Если при потере фокуса в выпадающем списке будет только один элемент и результат valueToString с этим элементом будет совпадать со значение в текстовом поле, то сработает onValueChange со значением данного элемента.\n   * Сама функция также может вернуть значение, неравное undefined, с которым будет вызван onValueChange. Если возвращаемое значение будет равно null, то сработает очистка текущего значения инпута, а в режиме редактирования токен будет удален. */\n  onUnexpectedInput?: (value: string) => void | null | T;\n\n  /** Задает текст, который отображается если не введено никакое значение. */\n  placeholder?: string;\n\n  /** Задает функцию отрисовки элементов результата поиска.\n   * Не применяется если элемент является функцией или React-элементом\n   * @default item => item.label\n   * @param {T} item - элемент из результата поиска.\n   * @param {MenuItemState} state? - состояние элемента.\n   * @returns {React.ReactNode} React-элемент. */\n  renderItem?: (item: T, state?: MenuItemState) => React.ReactNode;\n\n  /** Устанавливает компонент, заменяющий собой обёртку элементов результата поиска.\n   * По умолчанию все элементы результата поиска оборачиваются в тег <button />.\n   * @example\n   * itemWrapper={(item) => {\n   *    if (item.value === 3) {\n   *      return (props) => {\n   *        return <a {...props} />\n   *      }\n   *    }\n   * }}\n   */\n  itemWrapper?: (item: T) => React.ComponentType;\n\n  /** Задает функцию, которая отображает сообщение о пустом результате поиска. При renderAddButton не работает. */\n  renderNotFound?: () => React.ReactNode;\n\n  /** Задает функцию, которая отображает сообщение об общем количестве элементов.\n   * @param {number} found - количество элементов по результатам поиска. Учитывает только компонент MenuItem. Им \"оборачиваются\" элементы, возвращаемые getItems().\n   * @param {number} total - количество всех элементов. */\n  renderTotalCount?: (found: number, total: number) => React.ReactNode;\n\n  /** Задает функцию, которая отображает выбранное значение.\n   * @default item => item.label */\n  renderValue?: (item: T) => React.ReactNode;\n\n  /** Задает функцию отрисовки кнопки добавления в выпадающем списке. */\n  renderAddButton?: (query?: string) => React.ReactNode;\n\n  /** Определяет общее количество элементов. Необходим для работы renderTotalCount. */\n  totalCount?: number;\n\n  /** Устанавливает выбранное в комбобоксе значение. Тип `value` совпадает с типом элементов в массиве, возвращаемом в `getItems`. */\n  value?: Nullable<T>;\n\n  /** Задает функцию, которая возвращает строковое представление value. Необходимо при фокусировке. */\n  valueToString?: (item: T) => string;\n\n  /** Задает размер компонента. */\n  size?: SizeProp;\n\n  /** Переводит контрол в состояние валидации \"предупреждение\". */\n  warning?: boolean;\n\n  /** Задает длину комбобокса. */\n  width?: string | number;\n\n  /** Задает максимальную высоту меню. */\n  maxMenuHeight?: number | string;\n\n  /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). См разницу с onMouseOver в [документации](https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave)  */\n  onMouseEnter?: (e: React.MouseEvent) => void;\n\n  /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseover`). */\n  onMouseOver?: (e: React.MouseEvent) => void;\n\n  /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */\n  onMouseLeave?: (e: React.MouseEvent) => void;\n\n  /** Задает функцию, которая вызывается при нажатии кнопки на клавиатуре. */\n  onInputKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;\n\n  /** Задает типы вводимых данных. */\n  inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];\n}\n\nexport interface ComboBoxItem {\n  value: string;\n  label: string;\n}\n\nexport type ComboBoxExtendedItem<T> = T | (() => React.ReactElement<T>) | React.ReactElement<T>;\n\ntype DefaultProps<T> = Required<\n  Pick<\n    ComboBoxProps<T>,\n    | 'itemToValue'\n    | 'valueToString'\n    | 'renderValue'\n    | 'renderItem'\n    | 'menuAlign'\n    | 'searchOnFocus'\n    | 'drawArrow'\n    | 'showClearIcon'\n  >\n>;\n\n/**\n * `ComboBox` — это поле ввода со списком подсказок.\n *\n * `ComboBox` используют:\n * * для выбора значения из справочника.\n * * для добавления своего значения в справочник.\n *\n * `ComboBox` может работать в двух режимах — обычном и в режиме автокомплита.\n * Основное их отличие в том, что в режиме автокомплита список вариантов появляется только после ввода первого символа или изменении уже введенного значения.\n */\n@rootNode\nexport class ComboBox<T = ComboBoxItem> extends React.Component<ComboBoxProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'ComboBox';\n  public static displayName = 'ComboBox';\n\n  public static defaultProps: DefaultProps<any> = {\n    itemToValue: (item: ComboBoxItem) => item.value,\n    valueToString: (item: ComboBoxItem) => item.label,\n    renderValue: (item: ComboBoxItem) => item.label,\n    renderItem: (item: ComboBoxItem) => item.label,\n    menuAlign: 'left',\n    searchOnFocus: true,\n    drawArrow: true,\n    showClearIcon: 'never',\n  };\n\n  private getProps = createPropsGetter(ComboBox.defaultProps);\n\n  private comboboxElement: Nullable<CustomComboBox<T>> = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  /**\n   * @public\n   */\n  public focus(opts?: { withoutOpenDropdown?: boolean }) {\n    if (this.comboboxElement) {\n      this.comboboxElement.focus(opts);\n    }\n  }\n\n  /**\n   * @public\n   */\n  public blur() {\n    if (this.comboboxElement) {\n      this.comboboxElement.blur();\n    }\n  }\n\n  /**\n   * Открывает выпадающий список и запускает поиск элементов\n   *\n   * @public\n   * @param {string} [query] Текст поиска. По умолчанию берется\n   * текст из инпута или результат `valueToString(value)`\n   */\n  public search(query?: string) {\n    if (this.comboboxElement) {\n      this.comboboxElement.search(query);\n    }\n  }\n\n  /**\n   * @public\n   */\n  public cancelSearch() {\n    if (this.comboboxElement) {\n      this.comboboxElement.cancelSearch();\n    }\n  }\n\n  /**\n   * @public Открывает выпадающий список\n   */\n  public open() {\n    if (this.comboboxElement) {\n      this.comboboxElement.open();\n    }\n  }\n\n  /**\n   * @public Закрывает выпадающий список\n   */\n  public close() {\n    if (this.comboboxElement) {\n      this.comboboxElement.close();\n    }\n  }\n\n  /**\n   * Выделяет текст внутри input\n   * @public\n   */\n  public selectInputText() {\n    if (this.comboboxElement) {\n      this.comboboxElement.selectInputText();\n    }\n  }\n\n  /**\n   * Сбрасывает введенное пользователем значение\n   * @public\n   */\n  public reset() {\n    if (this.comboboxElement) {\n      this.comboboxElement.reset();\n    }\n  }\n\n  /**\n   * Изменяет значение combobox\n   * @public\n   */\n  public setValue(value: T) {\n    if (this.comboboxElement) {\n      this.comboboxElement.changeValue(value);\n    }\n  }\n\n  public render() {\n    return <CustomComboBox {...this.getProps()} size={this.props.size} ref={this.customComboBoxRef} />;\n  }\n\n  private customComboBoxRef = (element: Nullable<CustomComboBox<T>>) => {\n    this.setRootNode(element);\n    this.comboboxElement = element;\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/cjs/components/ComboBox/ComboBox.md

@@ -0,0 +1,574 @@
+### Комбобокс с валидацией
+
+```jsx harmony
+import { Tooltip } from '@skbkontur/react-ui';
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+let maybeReject = x => (Math.random() * 3 < 1 ? Promise.reject() : Promise.resolve(x));
+
+let getItems = q =>
+  Promise.resolve(
+    [
+      { value: 1, label: 'First' },
+      { value: 2, label: 'Second' },
+      { value: 3, label: 'Third' },
+      { value: 4, label: 'Fourth' },
+      { value: 5, label: 'Fifth' },
+      { value: 6, label: 'Sixth' },
+    ].filter(x => x.label.toLowerCase().includes(q.toLowerCase()) || x.value.toString(10) === q),
+  )
+    .then(delay(500))
+    .then(maybeReject);
+
+const [selected, setSelected] = React.useState({ value: 3, label: 'Third' });
+const [error, setError] = React.useState(false);
+
+let handleValueChange = value => {
+  setSelected(value);
+  setError(false);
+};
+
+let handleUnexpectedInput = () => {
+  setSelected(null);
+  setError(true);
+};
+
+let handleFocus = () => setError(false);
+
+<Tooltip closeButton={false} render={() => 'Item must be selected!'} trigger={error ? 'opened' : 'closed'}>
+  <ComboBox
+    error={error}
+    getItems={getItems}
+    onValueChange={handleValueChange}
+    onFocus={handleFocus}
+    onUnexpectedInput={handleUnexpectedInput}
+    placeholder="Enter number"
+    value={selected}
+  />
+</Tooltip>;
+```
+
+### Очистка комбобокса
+Очистить значение в `ComboBox`'е можно с помощью пустой строки, `null` или `undefined`
+```jsx harmony
+import { Group, ComboBox, Button } from '@skbkontur/react-ui';
+
+const [value, setValue] = React.useState({ value: 2, label: 'Second' });
+
+const getItems = q => {
+  return Promise.resolve(
+    [
+      { value: 1, label: 'First' },
+      { value: 2, label: 'Second' },
+      { value: 3, label: 'Third' },
+      { value: 4, label: 'Fourth' },
+      { value: 5, label: 'Fifth' },
+      { value: 6, label: 'Sixth' },
+    ].filter(x => x.label.toLowerCase().includes(q.toLowerCase()) || x.value.toString(10) === q),
+  )
+};
+
+<Group>
+  <ComboBox
+    getItems={getItems}
+    onValueChange={setValue}
+    placeholder="Введите число"
+    value={value}
+  />
+  <Button onClick={() => setValue(null)}>Null</Button>
+  <Button onClick={() => setValue(undefined)}>Undefined</Button>
+  <Button onClick={() => setValue('')}>Пустая строка</Button>
+</Group>
+```
+
+### ComboBox with popular values, complex menu items and total count message
+
+```jsx harmony
+import { getCities } from '@skbkontur/react-ui/components/ComboBox/__mocks__/getCities';
+import { Gapped, MenuSeparator } from '@skbkontur/react-ui';
+import {MenuFooter} from "@skbkontur/react-ui/components/MenuFooter";
+
+let popularItems = [
+  { Id: 956, City: 'Махачкала' },
+  { Id: 4974, City: 'Верхняя-Пышма' },
+  { Id: 4980, City: 'Екатеринбург' },
+];
+
+const [value, setValue] = React.useState(null);
+
+let mapCity = ({ Id, City }) => ({
+  value: Id,
+  label: City,
+});
+
+let hasSelectedItem = itemsSets => itemsSets.some(items => items.find(item => value.value === item.Id));
+
+let shouldInsertSelectedItem = (query, items) => value && !query && !hasSelectedItem([items, popularItems]);
+
+let getPopularItems = query => (query ? [] : popularItems.map(mapCity));
+let renderSeparator = query => (query ? [] : <MenuSeparator />);
+let getSelectedItem = (query, items) => (!shouldInsertSelectedItem(query, items) ? [] : value);
+
+let prepareItems = (query, items) =>
+  (!shouldInsertSelectedItem(query, items) ? items : items.slice(0, -1)).map(mapCity);
+
+let renderTotalCount = (foundCount, totalCount) =>
+  foundCount < totalCount ? (
+    <MenuFooter>
+      Показано {foundCount} из {totalCount} найденных городов.
+    </MenuFooter>
+  ) : (
+    []
+  );
+
+let getItems = query =>
+  getCities(query).then(({ foundItems, totalCount }) =>
+    [].concat(
+      getPopularItems(query),
+      renderSeparator(query),
+      getSelectedItem(query, foundItems),
+      prepareItems(query, foundItems),
+      renderTotalCount(foundItems.length, totalCount),
+    ),
+  );
+
+let renderItem = item => (
+  <Gapped>
+    <div style={{ width: 40 }}>{item.value}</div>
+    <div style={{ width: 210, whiteSpace: 'normal' }}>{item.label}</div>
+  </Gapped>
+);
+
+<ComboBox
+  onValueChange={setValue}
+  getItems={getItems}
+  placeholder="Начните вводить название"
+  value={value}
+  renderItem={renderItem}
+/>;
+```
+
+### Переопределение `renderValue`, `renderItem` и `itemWrapper`
+
+```jsx harmony
+import { CheckAIcon16Regular } from '@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular';
+import { Tooltip } from '@skbkontur/react-ui';
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+const getItems = q =>
+  Promise.resolve(
+    [
+      { approved: true, value: 1, label: 'Леонид Долецкий', email: 'first@skbkontur.ru' },
+      { approved: true, value: 2, label: 'Владислав Нашкодивший', email: 'second@skbkontur.ru' },
+      { approved: false, value: 3, label: 'Розенкранц Харитонов', email: 'third@skbkontur.ru' },
+      { approved: false, value: 4, label: 'Надежда Дубова', email: 'fourth@skbkontur.ru' },
+      { approved: true, value: 5, label: 'Владислав Сташкеевич', email: 'fifth@skbkontur.ru' },
+      { approved: true, value: 6, label: 'Василиса Александровна Поволоцкая', email: 'sixth@skbkontur.ru' },
+    ].filter(x => x.label.toLowerCase().includes(q.toLowerCase()) || x.value.toString(10) === q),
+  ).then(delay(500));
+
+const [selected, setSelected] = React.useState({
+  approved: false,
+  value: 3,
+  label: 'Розенкранц Харитонов',
+  email: 'third@skbkontur.ru',
+});
+const [error, setError] = React.useState(false);
+
+const handleValueChange = value => {
+  setSelected(value);
+  setError(false);
+};
+
+const handleUnexpectedInput = () => {
+  setSelected(null);
+  setError(true);
+};
+
+const handleFocus = () => setError(false);
+
+const customRenderItem = item => (
+  <div
+    style={{
+      display: 'flex',
+    }}
+  >
+    <div
+      style={{
+        width: '55%',
+        display: 'flex',
+      }}
+    >
+      <span
+        style={{
+          minWidth: '20px',
+        }}
+      >
+        {item.approved ? <CheckAIcon16Regular size={14} /> : null}
+      </span>
+      <span
+        style={{
+          flexGrow: '1',
+        }}
+      >
+        {item.label}
+      </span>
+    </div>
+    <div
+      style={{
+        opacity: '0.6',
+        paddingLeft: '10px',
+        boxSizing: 'border-box',
+      }}
+    >
+      {item.email}
+    </div>
+  </div>
+);
+
+const customItemWrapper = item => {
+  if (item.value === 3) {
+    return (props) => <div {...props} />;
+  }
+
+  return (props) => <button {...props} />
+}
+
+const customRenderValue = item => (
+  <div
+    style={{
+      display: 'flex',
+    }}
+  >
+    <div
+      style={{
+        width: '55%',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+      }}
+    >
+      {item.label}
+    </div>
+    <div
+      style={{
+        opacity: '0.6',
+        paddingLeft: '10px',
+        boxSizing: 'border-box',
+      }}
+    >
+      {item.email}
+    </div>
+  </div>
+);
+
+<Tooltip closeButton={false} render={() => 'Item must be selected!'} trigger={error ? 'opened' : 'closed'}>
+  <ComboBox
+    error={error}
+    getItems={getItems}
+    onValueChange={handleValueChange}
+    onFocus={handleFocus}
+    onUnexpectedInput={handleUnexpectedInput}
+    placeholder="Enter number"
+    value={selected}
+    renderItem={customRenderItem}
+    itemWrapper={customItemWrapper}
+    renderValue={customRenderValue}
+    width="400px"
+  />
+</Tooltip>;
+```
+
+### Подсветка результата поиска
+
+```jsx harmony
+import { Tooltip } from '@skbkontur/react-ui';
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+const getItems = query =>
+  Promise.resolve(
+    [
+      { value: 1, label: 'First' },
+      { value: 2, label: 'Second' },
+      { value: 3, label: 'Third' },
+      { value: 4, label: 'Fourth' },
+      { value: 5, label: 'Fifth' },
+      { value: 6, label: 'Sixth' },
+    ]
+      .filter(x => x.label.toLowerCase().includes(query.toLowerCase()) || x.value.toString(10) === query)
+      .map(({ label, ...rest }) => {
+        const start = label.toLowerCase().indexOf(query.toLowerCase());
+        const end = start + query.length;
+
+        return {
+          ...rest,
+          label,
+          highlightedLabel:
+            start >= 0 ? (
+              <span>
+                {label.substring(0, start)}
+                <strong
+                  style={{
+                    fontSize: '1.1em',
+                  }}
+                >
+                  {label.substring(start, end)}
+                </strong>
+                {label.substring(end)}
+              </span>
+            ) : null,
+        };
+      }),
+  ).then(delay(500));
+
+const [selected, setSelected] = React.useState({ value: 3, label: 'Third' });
+const [error, setError] = React.useState(false);
+
+let handleValueChange = value => {
+  setSelected(value);
+  setError(false);
+};
+
+let handleUnexpectedInput = () => {
+  setSelected(null);
+  setError(true);
+};
+
+let handleFocus = () => setError(false);
+
+const renderItem = item => {
+  if (item.highlightedLabel) {
+    return item.highlightedLabel;
+  }
+
+  return item.label;
+};
+
+<Tooltip closeButton={false} render={() => 'Item must be selected!'} trigger={error ? 'opened' : 'closed'}>
+  <ComboBox
+    error={error}
+    getItems={getItems}
+    onValueChange={handleValueChange}
+    onFocus={handleFocus}
+    onUnexpectedInput={handleUnexpectedInput}
+    placeholder="Enter number"
+    value={selected}
+    renderItem={renderItem}
+  />
+</Tooltip>;
+```
+
+### Добавление элементов в меню
+
+```jsx harmony
+import { MenuItem } from '@skbkontur/react-ui';
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+class ComboboxExample extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      items: [
+        { value: 1, label: 'First' },
+        { value: 2, label: 'Second' },
+        { value: 3, label: 'Third' },
+        { value: 4, label: 'Fourth' },
+        { value: 5, label: 'Fifth' },
+        { value: 6, label: 'Sixth' },
+      ],
+      query: '',
+      selected: { value: 3, label: 'Third' },
+      error: false,
+      shouldRenderAddButton: false,
+    };
+
+    this.comboBoxElement = null;
+
+    this.getItems = this.getItems.bind(this);
+    this.handleValueChange = this.handleValueChange.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleInputValueChange = this.handleInputValueChange.bind(this);
+    this.renderAddButton = this.renderAddButton.bind(this);
+    this.refComboBox = this.refComboBox.bind(this);
+    this.addItem = this.addItem.bind(this);
+  }
+
+  render() {
+    return (
+      <ComboBox
+        error={this.state.error}
+        getItems={this.getItems}
+        onValueChange={this.handleValueChange}
+        onFocus={this.handleFocus}
+        placeholder="Enter number"
+        value={this.state.selected}
+        onInputValueChange={this.handleInputValueChange}
+        renderAddButton={this.renderAddButton}
+        ref={this.refComboBox}
+      />
+    );
+  }
+
+  getItems(q) {
+    return Promise.resolve(
+      this.state.items.filter(x => x.label.toLowerCase().includes(q.toLowerCase()) || x.value.toString(10) === q),
+    ).then(delay(500));
+  }
+
+  handleInputValueChange(query) {
+    const isItemExists = this.state.items.find(x => x.label.toLowerCase() == query.toLowerCase());
+    this.setState({ query, shouldRenderAddButton: !isItemExists });
+  }
+
+  handleValueChange(value) {
+    this.setState({ selected: value, error: false, shouldRenderAddButton: false });
+  }
+
+  handleFocus() {
+    this.setState({ error: false });
+  }
+
+  renderAddButton() {
+    if (!this.state.shouldRenderAddButton) {
+      return null;
+    }
+    return (
+      <MenuItem link onClick={this.addItem}>
+        + Добавить "{this.state.query}"
+      </MenuItem>
+    );
+  }
+
+  refComboBox(element) {
+    this.comboBoxElement = element;
+  }
+
+  addItem() {
+    this.setState(currentState => {
+      const newItem = {
+        value: Math.max(...currentState.items.map(({ value }) => value)) + 1,
+        label: currentState.query,
+      };
+
+      return {
+        items: [...currentState.items, newItem],
+        selected: newItem,
+        error: false,
+        shouldRenderAddButton: false,
+      };
+    });
+  }
+}
+
+<ComboboxExample />;
+```
+
+### Сброс контрола
+Если нужно сбросить контрол без изменения `value`, то можно использовать метод `reset`.
+
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+
+const [selected, setSelected] = React.useState({ value: 1, label: "First" });
+const ref = React.useRef(null);
+
+const handleReset = () => {
+  if (ref.current) {
+    ref.current.reset();
+  }
+};
+
+const getItems = (q) =>
+  Promise.resolve(
+    [
+      { value: 1, label: "First" },
+      { value: 2, label: "Second" },
+      { value: 3, label: "Third" }
+    ].filter(
+      (x) =>
+        x.label.toLowerCase().includes(q.toLowerCase()) ||
+        x.value.toString(10) === q
+    )
+  );
+
+<div>
+  <ComboBox
+    ref={ref}
+    getItems={getItems}
+    onValueChange={setSelected}
+    placeholder="Enter number"
+    value={selected}
+  />
+  <Button onClick={handleReset}>Reset</Button>
+</div>
+
+```
+
+### Локали по умолчанию
+
+```typescript static
+interface ComboBoxLocale {
+  notFound?: string;
+  errorNetworkButton?: string;
+  errorNetworkMessage?: string;
+}
+
+const ru_RU = {
+  notFound: 'Не найдено',
+  errorNetworkButton: 'Обновить',
+  errorNetworkMessage: 'Что-то пошло не так. Проверьте соединение с интернетом и попробуйте еще раз',
+};
+
+const en_GB = {
+  notFound: 'Not found',
+  errorNetworkButton: 'Refresh',
+  errorNetworkMessage: 'Something went wrong. Check your internet connection and try again',
+};
+```
+
+### Размер
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+const getItems = q => {
+  return Promise.resolve(
+    [
+      { value: 1, label: 'Маленький' },
+      { value: 2, label: 'Средний' },
+      { value: 3, label: 'Большой' },
+    ].filter(x => x.label.toLowerCase().includes(q.toLowerCase()) || x.value.toString(10) === q),
+  )
+};
+
+const [valueSmall, setValueSmall] = React.useState('Маленький');
+const [valueMedium, setValueMedium] = React.useState('Средний');
+const [valueLarge, setValueLarge] = React.useState('Большой');
+
+<Gapped vertical>
+  <ComboBox
+    getItems={getItems}
+    onValueChange={setValueSmall}
+    placeholder="Введите число"
+    value={valueSmall}
+    size={'small'}
+  />
+  <ComboBox
+    getItems={getItems}
+    onValueChange={setValueMedium}
+    placeholder="Введите число"
+    value={valueMedium}
+    size={'medium'}
+  />
+  <ComboBox
+    getItems={getItems}
+    onValueChange={setValueLarge}
+    placeholder="Введите число"
+    value={valueLarge}
+    size={'large'}
+  />
+</Gapped>
+```

package/cjs/components/CurrencyInput/CurrencyInput.js

@@ -2,8 +2,8 @@
 var _react = _interopRequireDefault(require("react"));
 var _warning = _interopRequireDefault(require("warning"));
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
+var _globalObject = require("@skbkontur/global-object");
 
-var _globalObject = require("../../lib/globalObject");
 var _utils = require("../../lib/utils");
 var _client = require("../../lib/client");
 
@@ -236,7 +236,7 @@ CurrencyInput = exports.CurrencyInput = (0, _rootNode.rootNode)(_class = (_Curre
         }
       }
 
-      var action = (0, _CurrencyInputKeyboardActions.extractAction)()(event);
+      var action = (0, _CurrencyInputKeyboardActions.extractAction)(event);
 
       if (action === _CurrencyInputKeyboardActions.CURRENCY_INPUT_ACTIONS.Ignore) {
         return;
@@ -467,7 +467,7 @@ CurrencyInput = exports.CurrencyInput = (0, _rootNode.rootNode)(_class = (_Curre
 
 
 function getInputSelectionFromEvent(input) {var _input$selectionStart, _input$selectionEnd;
-  if (!(0, _isInstanceOf.isInstanceOf)(input, (0, _globalObject.getOwnerGlobalObject)(input).HTMLInputElement)) {
+  if (!(0, _isInstanceOf.isInstanceOf)(input, _globalObject.globalObject.HTMLInputElement)) {
     throw new Error('input is not HTMLInputElement');
   }