@skbkontur/react-ui 3.10.0-fileuploader.2 → 3.10.0

package/cjs/components/ScrollContainer/ScrollContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ScrollContainer.tsx"],"names":["ScrollContainer","scrollX","scrollY","inner","render","props","innerStyle","scrollBehavior","scrollBehaviour","maxHeight","maxWidth","scrollbarY","renderScrollbar","scrollbarX","styles","root","handleMouseMove","handleMouseLeave","refInner","globalClasses","handleNativeScroll","children","axis","refScrollBar","refScrollBarX","refScrollBarY","invert","handleScrollStateChange","scrollState","scrollXState","onScrollStateChangeX","scrollYState","onScrollStateChange","onScrollStateChangeY","scrollbar","element","preventWindowScroll","addEventListener","handleInnerScrollWheel","passive","removeEventListener","event","reflow","onScroll","preventDefault","LayoutEvents","emit","WheelEvent","shiftKey","hasScrollBar","scrollSizeParametersNames","pos","size","offset","deltaY","right","currentTarget","getBoundingClientRect","pageX","bottom","pageY","setHover","componentDidMount","setInnerElement","componentDidUpdate","prevProps","scrollTo","scrollLeft","offsetLeft","scrollTop","scrollToTop","scrollToBottom","scrollHeight","offsetHeight","scrollToLeft","scrollToRight","scrollWidth","offsetWidth","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","oneOfType","string","number","oneOf","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Nullable } from '../../typings/utility-types';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles, globalClasses } from './ScrollContainer.styles';\nimport { scrollSizeParametersNames } from './ScrollContainer.constants';\nimport {\n  getScrollYOffset,\n  convertScrollbarXScrollState,\n  convertScrollbarYScrollState,\n} from './ScrollContainer.helpers';\nimport { ScrollAxis, ScrollBar, ScrollBarScrollState } from './ScrollBar';\n\nexport type ScrollContainerScrollStateX = 'left' | 'scroll' | 'right';\nexport type ScrollContainerScrollStateY = 'top' | 'scroll' | 'bottom';\nexport type ScrollContainerScrollState = ScrollContainerScrollStateY; // deprecated\nexport type ScrollBehaviour = 'auto' | 'smooth';\n\nexport interface ScrollContainerProps extends CommonProps {\n  /**\n   * Инвертировать цвет скроллбара\n   * @default false\n   */\n  invert: boolean;\n  maxHeight?: React.CSSProperties['maxHeight'];\n  maxWidth?: React.CSSProperties['maxWidth'];\n  /**\n   * @default false\n   */\n  preventWindowScroll: boolean;\n  /**\n   * Поведение скролла (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)\n   * @default 'auto'\n   */\n  scrollBehaviour?: ScrollBehaviour;\n  onScrollStateChangeX?: (scrollState: ScrollContainerScrollStateX) => void;\n  onScrollStateChangeY?: (scrollState: ScrollContainerScrollStateY) => void;\n  onScrollStateChange?: (scrollYState: ScrollContainerScrollState) => void; // deprecated\n  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\n}\n\nexport class ScrollContainer extends React.Component<ScrollContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'ScrollContainer';\n\n  public static propTypes = {\n    invert: PropTypes.bool,\n    maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    scrollBehaviour: PropTypes.oneOf(['auto', 'smooth']),\n    preventWindowScroll: PropTypes.bool,\n    onScrollStateChange: PropTypes.func,\n  };\n\n  public static defaultProps = {\n    invert: false,\n    scrollBehaviour: 'auto',\n    preventWindowScroll: false,\n  };\n\n  private scrollX: Nullable<ScrollBar>;\n  private scrollY: Nullable<ScrollBar>;\n  private inner: Nullable<HTMLElement>;\n\n  public componentDidMount() {\n    this.scrollX?.setInnerElement(this.inner);\n    this.scrollY?.setInnerElement(this.inner);\n  }\n\n  public componentDidUpdate(prevProps: ScrollContainerProps) {\n    if (this.inner) {\n      if (prevProps.preventWindowScroll && !this.props.preventWindowScroll) {\n        this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\n      }\n      if (!prevProps.preventWindowScroll && this.props.preventWindowScroll) {\n        this.inner.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\n      }\n    }\n  }\n\n  public render = () => {\n    const props = this.props;\n\n    const innerStyle: React.CSSProperties = {\n      scrollBehavior: props.scrollBehaviour,\n      maxHeight: props.maxHeight,\n      maxWidth: props.maxWidth,\n    };\n\n    const scrollbarY = this.renderScrollbar('y');\n    const scrollbarX = this.renderScrollbar('x');\n\n    return (\n      <CommonWrapper {...this.props}>\n        <div className={styles.root()} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>\n          {scrollbarY}\n          {scrollbarX}\n          <div\n            style={innerStyle}\n            ref={this.refInner}\n            className={cx(styles.inner(), globalClasses.inner)}\n            data-tid=\"ScrollContainer__inner\"\n            onScroll={this.handleNativeScroll}\n          >\n            {props.children}\n          </div>\n        </div>\n      </CommonWrapper>\n    );\n  };\n\n  /**\n   * @public\n   * @param {HTMLElement} element\n   */\n  public scrollTo(element: Nullable<HTMLElement>) {\n    if (!element || !this.inner) {\n      return;\n    }\n\n    this.inner.scrollLeft = element.offsetLeft;\n    this.inner.scrollTop = getScrollYOffset(element, this.inner);\n  }\n\n  /**\n   * @public\n   */\n  public scrollToTop() {\n    if (!this.inner) {\n      return;\n    }\n    this.inner.scrollTop = 0;\n  }\n\n  /**\n   * @public\n   */\n  public scrollToBottom() {\n    if (!this.inner) {\n      return;\n    }\n    this.inner.scrollTop = this.inner.scrollHeight - this.inner.offsetHeight;\n  }\n\n  /**\n   * @public\n   */\n  public scrollToLeft() {\n    if (!this.inner) {\n      return;\n    }\n    this.inner.scrollLeft = 0;\n  }\n\n  /**\n   * @public\n   */\n  public scrollToRight() {\n    if (!this.inner) {\n      return;\n    }\n\n    this.inner.scrollLeft = this.inner.scrollWidth - this.inner.offsetWidth;\n  }\n\n  private hasScrollBar(axis: ScrollAxis) {\n    if (!this.inner) {\n      return false;\n    }\n\n    return axis === 'x'\n      ? this.inner.offsetWidth < this.inner.scrollWidth\n      : this.inner.offsetHeight < this.inner.scrollHeight;\n  }\n\n  private renderScrollbar = (axis: ScrollAxis) => {\n    const refScrollBar = axis === 'x' ? this.refScrollBarX : this.refScrollBarY;\n\n    return (\n      <ScrollBar\n        axis={axis}\n        ref={refScrollBar}\n        invert={this.props.invert}\n        onScrollStateChange={this.handleScrollStateChange}\n      />\n    );\n  };\n\n  private handleScrollStateChange = (scrollState: ScrollBarScrollState, axis: ScrollAxis) => {\n    if (!this.scrollY || !this.scrollX) {\n      return;\n    }\n\n    if (axis === 'x') {\n      const scrollXState = convertScrollbarXScrollState(scrollState);\n\n      this.props.onScrollStateChangeX?.(scrollXState);\n      return;\n    }\n\n    const scrollYState = convertScrollbarYScrollState(scrollState);\n\n    this.props.onScrollStateChange?.(scrollYState);\n    this.props.onScrollStateChangeY?.(scrollYState);\n  };\n\n  private refScrollBarY = (scrollbar: Nullable<ScrollBar>) => {\n    this.scrollY = scrollbar;\n  };\n\n  private refScrollBarX = (scrollbar: Nullable<ScrollBar>) => {\n    this.scrollX = scrollbar;\n  };\n\n  private refInner = (element: HTMLElement | null) => {\n    if (!this.inner && element && this.props.preventWindowScroll) {\n      element.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\n    }\n    if (this.inner && !element) {\n      this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\n    }\n    this.inner = element;\n  };\n\n  private handleNativeScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    this.scrollX?.reflow();\n    this.scrollY?.reflow();\n\n    this.props.onScroll?.(event);\n    if (this.props.preventWindowScroll) {\n      event.preventDefault();\n      return;\n    }\n    LayoutEvents.emit();\n  };\n\n  private handleInnerScrollWheel = (event: Event) => {\n    if (!this.inner || !(event instanceof WheelEvent)) {\n      return;\n    }\n\n    const axis: ScrollAxis = event.shiftKey ? 'x' : 'y';\n\n    if (this.hasScrollBar(axis)) {\n      const { pos, size, offset } = scrollSizeParametersNames[axis];\n\n      if (event.deltaY > 0 && this.inner[size] <= this.inner[pos] + this.inner[offset]) {\n        event.preventDefault();\n        return false;\n      }\n      if (event.deltaY < 0 && this.inner[pos] <= 0) {\n        event.preventDefault();\n        return false;\n      }\n    }\n  };\n\n  private handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const right = event.currentTarget.getBoundingClientRect().right - event.pageX;\n    const bottom = event.currentTarget.getBoundingClientRect().bottom - event.pageY;\n\n    this.scrollY?.setHover(right <= 12);\n    this.scrollX?.setHover(right >= 12 && bottom <= 12);\n  };\n\n  private handleMouseLeave = () => {\n    this.scrollY?.setHover(false);\n    this.scrollX?.setHover(false);\n  };\n}\n"]}
+{"version":3,"sources":["ScrollContainer.tsx"],"names":["ScrollContainer","rootNode","scrollX","scrollY","inner","setRootNode","render","props","innerStyle","scrollBehavior","scrollBehaviour","maxHeight","maxWidth","scrollbarY","renderScrollbar","scrollbarX","styles","root","handleMouseMove","handleMouseLeave","refInner","globalClasses","handleNativeScroll","children","axis","refScrollBar","refScrollBarX","refScrollBarY","invert","handleScrollStateChange","scrollState","scrollXState","onScrollStateChangeX","scrollYState","onScrollStateChange","onScrollStateChangeY","scrollbar","element","preventWindowScroll","addEventListener","handleInnerScrollWheel","passive","removeEventListener","event","reflow","onScroll","preventDefault","LayoutEvents","emit","WheelEvent","shiftKey","hasScrollBar","scrollSizeParametersNames","pos","size","offset","deltaY","right","currentTarget","getBoundingClientRect","pageX","bottom","pageY","setHover","componentDidMount","setInnerElement","componentDidUpdate","prevProps","scrollTo","scrollLeft","offsetLeft","scrollTop","scrollToTop","scrollToBottom","scrollHeight","offsetHeight","scrollToLeft","scrollToRight","scrollWidth","offsetWidth","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","oneOfType","string","number","oneOf","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Nullable } from '../../typings/utility-types';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles, globalClasses } from './ScrollContainer.styles';\nimport { scrollSizeParametersNames } from './ScrollContainer.constants';\nimport {\n  getScrollYOffset,\n  convertScrollbarXScrollState,\n  convertScrollbarYScrollState,\n} from './ScrollContainer.helpers';\nimport { ScrollAxis, ScrollBar, ScrollBarScrollState } from './ScrollBar';\n\nexport type ScrollContainerScrollStateX = 'left' | 'scroll' | 'right';\nexport type ScrollContainerScrollStateY = 'top' | 'scroll' | 'bottom';\nexport type ScrollContainerScrollState = ScrollContainerScrollStateY; // deprecated\nexport type ScrollBehaviour = 'auto' | 'smooth';\n\nexport interface ScrollContainerProps extends CommonProps {\n  /**\n   * Инвертировать цвет скроллбара\n   * @default false\n   */\n  invert: boolean;\n  maxHeight?: React.CSSProperties['maxHeight'];\n  maxWidth?: React.CSSProperties['maxWidth'];\n  /**\n   * @default false\n   */\n  preventWindowScroll: boolean;\n  /**\n   * Поведение скролла (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)\n   * @default 'auto'\n   */\n  scrollBehaviour?: ScrollBehaviour;\n  onScrollStateChangeX?: (scrollState: ScrollContainerScrollStateX) => void;\n  onScrollStateChangeY?: (scrollState: ScrollContainerScrollStateY) => void;\n  onScrollStateChange?: (scrollYState: ScrollContainerScrollState) => void; // deprecated\n  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\n}\n\n@rootNode\nexport class ScrollContainer extends React.Component<ScrollContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'ScrollContainer';\n\n  public static propTypes = {\n    invert: PropTypes.bool,\n    maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    scrollBehaviour: PropTypes.oneOf(['auto', 'smooth']),\n    preventWindowScroll: PropTypes.bool,\n    onScrollStateChange: PropTypes.func,\n  };\n\n  public static defaultProps = {\n    invert: false,\n    scrollBehaviour: 'auto',\n    preventWindowScroll: false,\n  };\n\n  private scrollX: Nullable<ScrollBar>;\n  private scrollY: Nullable<ScrollBar>;\n  private inner: Nullable<HTMLElement>;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.scrollX?.setInnerElement(this.inner);\n    this.scrollY?.setInnerElement(this.inner);\n  }\n\n  public componentDidUpdate(prevProps: ScrollContainerProps) {\n    if (this.inner) {\n      if (prevProps.preventWindowScroll && !this.props.preventWindowScroll) {\n        this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\n      }\n      if (!prevProps.preventWindowScroll && this.props.preventWindowScroll) {\n        this.inner.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\n      }\n    }\n  }\n\n  public render = () => {\n    const props = this.props;\n\n    const innerStyle: React.CSSProperties = {\n      scrollBehavior: props.scrollBehaviour,\n      maxHeight: props.maxHeight,\n      maxWidth: props.maxWidth,\n    };\n\n    const scrollbarY = this.renderScrollbar('y');\n    const scrollbarX = this.renderScrollbar('x');\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div className={styles.root()} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>\n          {scrollbarY}\n          {scrollbarX}\n          <div\n            style={innerStyle}\n            ref={this.refInner}\n            className={cx(styles.inner(), globalClasses.inner)}\n            data-tid=\"ScrollContainer__inner\"\n            onScroll={this.handleNativeScroll}\n          >\n            {props.children}\n          </div>\n        </div>\n      </CommonWrapper>\n    );\n  };\n\n  /**\n   * @public\n   * @param {HTMLElement} element\n   */\n  public scrollTo(element: Nullable<HTMLElement>) {\n    if (!element || !this.inner) {\n      return;\n    }\n\n    this.inner.scrollLeft = element.offsetLeft;\n    this.inner.scrollTop = getScrollYOffset(element, this.inner);\n  }\n\n  /**\n   * @public\n   */\n  public scrollToTop() {\n    if (!this.inner) {\n      return;\n    }\n    this.inner.scrollTop = 0;\n  }\n\n  /**\n   * @public\n   */\n  public scrollToBottom() {\n    if (!this.inner) {\n      return;\n    }\n    this.inner.scrollTop = this.inner.scrollHeight - this.inner.offsetHeight;\n  }\n\n  /**\n   * @public\n   */\n  public scrollToLeft() {\n    if (!this.inner) {\n      return;\n    }\n    this.inner.scrollLeft = 0;\n  }\n\n  /**\n   * @public\n   */\n  public scrollToRight() {\n    if (!this.inner) {\n      return;\n    }\n\n    this.inner.scrollLeft = this.inner.scrollWidth - this.inner.offsetWidth;\n  }\n\n  private hasScrollBar(axis: ScrollAxis) {\n    if (!this.inner) {\n      return false;\n    }\n\n    return axis === 'x'\n      ? this.inner.offsetWidth < this.inner.scrollWidth\n      : this.inner.offsetHeight < this.inner.scrollHeight;\n  }\n\n  private renderScrollbar = (axis: ScrollAxis) => {\n    const refScrollBar = axis === 'x' ? this.refScrollBarX : this.refScrollBarY;\n\n    return (\n      <ScrollBar\n        axis={axis}\n        ref={refScrollBar}\n        invert={this.props.invert}\n        onScrollStateChange={this.handleScrollStateChange}\n      />\n    );\n  };\n\n  private handleScrollStateChange = (scrollState: ScrollBarScrollState, axis: ScrollAxis) => {\n    if (!this.scrollY || !this.scrollX) {\n      return;\n    }\n\n    if (axis === 'x') {\n      const scrollXState = convertScrollbarXScrollState(scrollState);\n\n      this.props.onScrollStateChangeX?.(scrollXState);\n      return;\n    }\n\n    const scrollYState = convertScrollbarYScrollState(scrollState);\n\n    this.props.onScrollStateChange?.(scrollYState);\n    this.props.onScrollStateChangeY?.(scrollYState);\n  };\n\n  private refScrollBarY = (scrollbar: Nullable<ScrollBar>) => {\n    this.scrollY = scrollbar;\n  };\n\n  private refScrollBarX = (scrollbar: Nullable<ScrollBar>) => {\n    this.scrollX = scrollbar;\n  };\n\n  private refInner = (element: HTMLElement | null) => {\n    if (!this.inner && element && this.props.preventWindowScroll) {\n      element.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\n    }\n    if (this.inner && !element) {\n      this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\n    }\n    this.inner = element;\n  };\n\n  private handleNativeScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    this.scrollX?.reflow();\n    this.scrollY?.reflow();\n\n    this.props.onScroll?.(event);\n    if (this.props.preventWindowScroll) {\n      event.preventDefault();\n      return;\n    }\n    LayoutEvents.emit();\n  };\n\n  private handleInnerScrollWheel = (event: Event) => {\n    if (!this.inner || !(event instanceof WheelEvent)) {\n      return;\n    }\n\n    const axis: ScrollAxis = event.shiftKey ? 'x' : 'y';\n\n    if (this.hasScrollBar(axis)) {\n      const { pos, size, offset } = scrollSizeParametersNames[axis];\n\n      if (event.deltaY > 0 && this.inner[size] <= this.inner[pos] + this.inner[offset]) {\n        event.preventDefault();\n        return false;\n      }\n      if (event.deltaY < 0 && this.inner[pos] <= 0) {\n        event.preventDefault();\n        return false;\n      }\n    }\n  };\n\n  private handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const right = event.currentTarget.getBoundingClientRect().right - event.pageX;\n    const bottom = event.currentTarget.getBoundingClientRect().bottom - event.pageY;\n\n    this.scrollY?.setHover(right <= 12);\n    this.scrollX?.setHover(right >= 12 && bottom <= 12);\n  };\n\n  private handleMouseLeave = () => {\n    this.scrollY?.setHover(false);\n    this.scrollX?.setHover(false);\n  };\n}\n"]}

package/cjs/components/ScrollContainer/ScrollContainer.styles.d.ts

@@ -1,16 +1,16 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const globalClasses: {
-    scrollbarX: string;
-    scrollbarY: string;
-    inner: string;
-};
-export declare const styles: {
-    root(): string;
-    inner(): string;
-    scrollBar(t: Theme): string;
-    scrollBarInvert(t: Theme): string;
-    scrollBarY(t: Theme): string;
-    scrollBarYHover(t: Theme): string;
-    scrollBarX(t: Theme): string;
-    scrollBarXHover(t: Theme): string;
-};
+import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    scrollbarX: string;
+    scrollbarY: string;
+    inner: string;
+};
+export declare const styles: {
+    root(): string;
+    inner(): string;
+    scrollBar(t: Theme): string;
+    scrollBarInvert(t: Theme): string;
+    scrollBarY(t: Theme): string;
+    scrollBarYHover(t: Theme): string;
+    scrollBarX(t: Theme): string;
+    scrollBarXHover(t: Theme): string;
+};

package/cjs/components/ScrollContainer/index.d.ts

@@ -1 +1 @@
-export * from './ScrollContainer';
+export * from './ScrollContainer';

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

@@ -1,7 +1,7 @@
-import React from 'react';
-export declare class Item extends React.Component<{
-    children?: React.ReactNode;
-}> {
-    static __KONTUR_REACT_UI__: string;
-    render(): JSX.Element;
-}
+import React from 'react';
+export declare class Item extends React.Component<{
+    children?: React.ReactNode;
+}> {
+    static __KONTUR_REACT_UI__: string;
+    render(): JSX.Element;
+}

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

@@ -1,178 +1,179 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ButtonSize, ButtonUse } from '../Button';
-import { Nullable } from '../../typings/utility-types';
-import { CommonProps } from '../../internal/CommonWrapper';
-import { Item } from './Item';
-export interface ButtonParams {
-    disabled?: boolean;
-    label: React.ReactNode;
-    onClick: () => void;
-    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
-    opened: boolean;
-    isPlaceholder: boolean;
-}
-export interface SelectProps<TValue, TItem> extends CommonProps {
-    /** @ignore */
-    _icon?: React.ReactNode;
-    /** @ignore */
-    _renderButton?: (params: ButtonParams) => React.ReactNode;
-    defaultValue?: TValue;
-    /**
-     * Отключает использование портала
-     */
-    disablePortal?: boolean;
-    disabled?: boolean;
-    /**
-     * Cостояние валидации при ошибке.
-     */
-    error?: boolean;
-    filterItem?: (value: TValue, item: TItem, pattern: string) => boolean;
-    /**
-     * Набор значений. Поддерживаются любые перечисляемые типы, в том числе
-     * `Array`, `Map`, `Immutable.Map`.
-     *
-     * Элементы воспринимаются следующим образом: если элемент — это массив, то
-     * первый элемент является значением, второй — отображается в списке,
-     * а третий – комментарий;
-     * если элемент не является массивом, то он используется и для отображения,
-     * и для значения.
-     *
-     * Для вставки разделителя можно использовать `Select.SEP`.
-     *
-     * Вставить невыделяемый элемент со своей разметкой можно так:
-     * ```
-     * <Select ...
-     *   items={[Select.static(() => <div>My Element</div>)]}
-     * />
-     * ```
-     *
-     * Чтобы добавить стандартный отступ для статического элемента:
-     * ```
-     * <Select.Item>My Element</Select.Item>
-     * ```
-     */
-    items?: Array<[TValue, TItem, React.ReactNode?] | TItem | React.ReactElement | (() => React.ReactElement)>;
-    maxMenuHeight?: number;
-    maxWidth?: React.CSSProperties['maxWidth'];
-    menuAlign?: 'left' | 'right';
-    menuWidth?: React.CSSProperties['width'];
-    onValueChange?: (value: TValue) => void;
-    onClose?: () => void;
-    onMouseEnter?: (e: React.MouseEvent<HTMLElement>) => void;
-    onMouseLeave?: (e: React.MouseEvent<HTMLElement>) => void;
-    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`
-     */
-    areValuesEqual?: (value1: TValue, value2: TValue) => boolean;
-    /**
-     * Показывать строку поиска в списке.
-     */
-    search?: boolean;
-    value?: TValue;
-    width?: number | string;
-    /**
-     * Cостояние валидации при предупреждении.
-     */
-    warning?: boolean;
-    use?: ButtonUse;
-    size?: ButtonSize;
-    onFocus?: React.FocusEventHandler<HTMLElement>;
-    onBlur?: React.FocusEventHandler<HTMLElement>;
-}
-export interface SelectState<TValue> {
-    opened: boolean;
-    searchPattern: string;
-    value: Nullable<TValue>;
-}
-export declare class Select<TValue = {}, TItem = {}> extends React.Component<SelectProps<TValue, TItem>, SelectState<TValue>> {
-    static __KONTUR_REACT_UI__: string;
-    static propTypes: {
-        areValuesEqual: PropTypes.Requireable<(...args: any[]) => any>;
-        defaultValue: PropTypes.Requireable<any>;
-        disablePortal: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        error: PropTypes.Requireable<boolean>;
-        filterItem: PropTypes.Requireable<(...args: any[]) => any>;
-        items: PropTypes.Requireable<object>;
-        maxMenuHeight: PropTypes.Requireable<number>;
-        maxWidth: PropTypes.Requireable<string | number>;
-        placeholder: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        renderItem: PropTypes.Requireable<(...args: any[]) => any>;
-        renderValue: PropTypes.Requireable<(...args: any[]) => any>;
-        search: PropTypes.Requireable<boolean>;
-        value: PropTypes.Requireable<any>;
-        width: PropTypes.Requireable<string | number>;
-        onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
-        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
-        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
-        onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
-        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        renderValue: typeof renderValue;
-        renderItem: typeof renderItem;
-        areValuesEqual: typeof areValuesEqual;
-        filterItem: typeof filterItem;
-        use: string;
-    };
-    static Item: typeof Item;
-    static SEP: () => JSX.Element;
-    static static: (element: React.ReactElement | (() => React.ReactElement)) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | (() => React.ReactElement);
-    state: SelectState<TValue>;
-    private theme;
-    private readonly locale;
-    private menu;
-    private buttonElement;
-    private getProps;
-    componentDidUpdate(_prevProps: SelectProps<TValue, TItem>, prevState: SelectState<TValue>): void;
-    render(): JSX.Element;
-    /**
-     * @public
-     */
-    open: () => void;
-    /**
-     * @public
-     */
-    close: () => void;
-    /**
-     * @public
-     */
-    focus: () => void;
-    private renderMain;
-    private renderLabel;
-    private getLeftIconClass;
-    private renderDefaultButton;
-    private getSelectIconGap;
-    private renderMenu;
-    private dropdownContainerGetParent;
-    private focusInput;
-    private refMenu;
-    private toggle;
-    private handleKey;
-    private handleSearch;
-    private select;
-    private getValue;
-    private mapItems;
-    private getItemByValue;
-    private buttonRef;
-    private getButton;
-}
-declare function renderValue(value: any, item: any): any;
-declare function renderItem(value: any, item: any): any;
-declare function areValuesEqual(value1: any, value2: any): boolean;
-declare function filterItem(value: any, item: any, pattern: string): boolean;
-export {};
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ButtonSize, ButtonUse } from '../Button';
+import { Nullable } from '../../typings/utility-types';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { Item } from './Item';
+export interface ButtonParams {
+    disabled?: boolean;
+    label: React.ReactNode;
+    onClick: () => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+    opened: boolean;
+    isPlaceholder: boolean;
+}
+export interface SelectProps<TValue, TItem> extends CommonProps {
+    /** @ignore */
+    _icon?: React.ReactNode;
+    /** @ignore */
+    _renderButton?: (params: ButtonParams) => React.ReactNode;
+    defaultValue?: TValue;
+    /**
+     * Отключает использование портала
+     */
+    disablePortal?: boolean;
+    disabled?: boolean;
+    /**
+     * Cостояние валидации при ошибке.
+     */
+    error?: boolean;
+    filterItem?: (value: TValue, item: TItem, pattern: string) => boolean;
+    /**
+     * Набор значений. Поддерживаются любые перечисляемые типы, в том числе
+     * `Array`, `Map`, `Immutable.Map`.
+     *
+     * Элементы воспринимаются следующим образом: если элемент — это массив, то
+     * первый элемент является значением, второй — отображается в списке,
+     * а третий – комментарий;
+     * если элемент не является массивом, то он используется и для отображения,
+     * и для значения.
+     *
+     * Для вставки разделителя можно использовать `Select.SEP`.
+     *
+     * Вставить невыделяемый элемент со своей разметкой можно так:
+     * ```
+     * <Select ...
+     *   items={[Select.static(() => <div>My Element</div>)]}
+     * />
+     * ```
+     *
+     * Чтобы добавить стандартный отступ для статического элемента:
+     * ```
+     * <Select.Item>My Element</Select.Item>
+     * ```
+     */
+    items?: Array<[TValue, TItem, React.ReactNode?] | TItem | React.ReactElement | (() => React.ReactElement)>;
+    maxMenuHeight?: number;
+    maxWidth?: React.CSSProperties['maxWidth'];
+    menuAlign?: 'left' | 'right';
+    menuWidth?: React.CSSProperties['width'];
+    onValueChange?: (value: TValue) => void;
+    onClose?: () => void;
+    onMouseEnter?: (e: React.MouseEvent<HTMLElement>) => void;
+    onMouseLeave?: (e: React.MouseEvent<HTMLElement>) => void;
+    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`
+     */
+    areValuesEqual?: (value1: TValue, value2: TValue) => boolean;
+    /**
+     * Показывать строку поиска в списке.
+     */
+    search?: boolean;
+    value?: TValue;
+    width?: number | string;
+    /**
+     * Cостояние валидации при предупреждении.
+     */
+    warning?: boolean;
+    use?: ButtonUse;
+    size?: ButtonSize;
+    onFocus?: React.FocusEventHandler<HTMLElement>;
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+}
+export interface SelectState<TValue> {
+    opened: boolean;
+    searchPattern: string;
+    value: Nullable<TValue>;
+}
+export declare class Select<TValue = {}, TItem = {}> extends React.Component<SelectProps<TValue, TItem>, SelectState<TValue>> {
+    static __KONTUR_REACT_UI__: string;
+    static propTypes: {
+        areValuesEqual: PropTypes.Requireable<(...args: any[]) => any>;
+        defaultValue: PropTypes.Requireable<any>;
+        disablePortal: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        error: PropTypes.Requireable<boolean>;
+        filterItem: PropTypes.Requireable<(...args: any[]) => any>;
+        items: PropTypes.Requireable<object>;
+        maxMenuHeight: PropTypes.Requireable<number>;
+        maxWidth: PropTypes.Requireable<string | number>;
+        placeholder: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        renderItem: PropTypes.Requireable<(...args: any[]) => any>;
+        renderValue: PropTypes.Requireable<(...args: any[]) => any>;
+        search: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<any>;
+        width: PropTypes.Requireable<string | number>;
+        onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        renderValue: typeof renderValue;
+        renderItem: typeof renderItem;
+        areValuesEqual: typeof areValuesEqual;
+        filterItem: typeof filterItem;
+        use: string;
+    };
+    static Item: typeof Item;
+    static SEP: () => JSX.Element;
+    static static: (element: React.ReactElement | (() => React.ReactElement)) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | (() => React.ReactElement);
+    state: SelectState<TValue>;
+    private theme;
+    private readonly locale;
+    private menu;
+    private buttonElement;
+    private getProps;
+    private setRootNode;
+    componentDidUpdate(_prevProps: SelectProps<TValue, TItem>, prevState: SelectState<TValue>): void;
+    render(): JSX.Element;
+    /**
+     * @public
+     */
+    open: () => void;
+    /**
+     * @public
+     */
+    close: () => void;
+    /**
+     * @public
+     */
+    focus: () => void;
+    private renderMain;
+    private renderLabel;
+    private getLeftIconClass;
+    private renderDefaultButton;
+    private getSelectIconGap;
+    private renderMenu;
+    private dropdownContainerGetParent;
+    private focusInput;
+    private refMenu;
+    private toggle;
+    private handleKey;
+    private handleSearch;
+    private select;
+    private getValue;
+    private mapItems;
+    private getItemByValue;
+    private buttonRef;
+    private getButton;
+}
+declare function renderValue(value: any, item: any): any;
+declare function renderItem(value: any, item: any): any;
+declare function areValuesEqual(value1: any, value2: any): boolean;
+declare function filterItem(value: any, item: any, pattern: string): boolean;
+export {};

package/cjs/components/Select/Select.js

@@ -1,6 +1,5 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Select = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _invariant = _interopRequireDefault(require("invariant"));
 
 var _identifiers = require("../../lib/events/keyboard/identifiers");
@@ -29,6 +28,7 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _px = require("../../internal/icons/16px");
 var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
 
 var _Item = require("./Item");
 var _locale = require("./locale");
@@ -149,7 +149,8 @@ var PASS_BUTTON_PROPS = {
 
 
 
-Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Select, _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.
+
+Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper), (0, _rootNode.rootNode)(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Select, _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.
 
 
 
@@ -205,6 +206,7 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
     menu = void 0;_this.
     buttonElement = null;_this.
     getProps = (0, _createPropsGetter.createPropsGetter)(Select.defaultProps);_this.
+    setRootNode = void 0;_this.
 
 
 
@@ -444,7 +446,7 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
 
 
     dropdownContainerGetParent = function () {
-      return _reactDom.default.findDOMNode((0, _assertThisInitialized2.default)(_this));
+      return (0, _rootNode.getRootNode)((0, _assertThisInitialized2.default)(_this));
     };_this.
 
     focusInput = function (input) {
@@ -501,8 +503,9 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
       }
     };_this.
 
-    handleSearch = function (value) {
+    handleSearch = function (value) {var _this$menu;
       _this.setState({ searchPattern: value });
+      (_this$menu = _this.menu) == null ? void 0 : _this$menu.highlightItem(1);
     };_this.
 
 
@@ -579,7 +582,7 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
       buttonElement;
     };return _this;}var _proto = Select.prototype;_proto.componentDidUpdate = function componentDidUpdate(_prevProps, prevState) {if (!prevState.opened && this.state.opened) {window.addEventListener('popstate', this.close);}if (prevState.opened && !this.state.opened) {window.removeEventListener('popstate', this.close);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: (0, _selectTheme.getSelectTheme)(theme, _this2.props) }, _this2.renderMain());});} /**
    * @public
-   */;_proto.renderMain = function renderMain() {var _this$renderLabel = this.renderLabel(),label = _this$renderLabel.label,isPlaceholder = _this$renderLabel.isPlaceholder;var buttonParams = { opened: this.state.opened, label: label, isPlaceholder: isPlaceholder, onClick: this.toggle, onKeyDown: this.handleKey };var style = { width: this.props.width, maxWidth: this.props.maxWidth || undefined };var button = this.getButton(buttonParams);return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.close, onFocusOutside: this.close, active: this.state.opened }, /*#__PURE__*/_react.default.createElement("span", { className: _Select.styles.root(), style: style }, button, !this.props.disabled && this.state.opened && this.renderMenu())));};_proto.renderLabel = function renderLabel() {var value = this.getValue();var item = this.getItemByValue(value);if (item != null || value != null) {return { label: this.getProps().renderValue(value, item), isPlaceholder: false };}return { label: /*#__PURE__*/_react.default.createElement("span", null, this.props.placeholder || this.locale.placeholder), isPlaceholder: true };};_proto.getLeftIconClass = function getLeftIconClass(size) {if (this.props.use === 'link') {return _Select.styles.leftIconLink(this.theme);}switch (size) {case 'large':return _Select.styles.leftIconLarge(this.theme);case 'medium':return _Select.styles.leftIconMedium(this.theme);case 'small':default:return _Select.styles.leftIconSmall(this.theme);}};_proto.renderDefaultButton = function renderDefaultButton(params) {var _cx, _cx2;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 });var labelProps = { className: (0, _Emotion.cx)((_cx = {}, _cx[_Select.styles.label()] = this.props.use !== 'link', _cx[_Select.styles.placeholder(this.theme)] = params.isPlaceholder, _cx[_Select.styles.customUsePlaceholder()] = params.isPlaceholder && this.props.use !== 'default', _cx[_Select.styles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _cx)), style: { paddingRight: this.getSelectIconGap() } };var useIsCustom = this.props.use !== 'default';return /*#__PURE__*/_react.default.createElement(_Button.Button, buttonProps, /*#__PURE__*/_react.default.createElement("div", { className: _Select.styles.selectButtonContainer() }, 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)(_Select.styles.arrowWrap(this.theme), (_cx2 = {}, _cx2[_Select.styles.arrowDisabled(this.theme)] = this.props.disabled, _cx2[_Select.styles.customUseArrow()] = useIsCustom, _cx2)) }, /*#__PURE__*/_react.default.createElement(_px.ArrowChevronDownIcon, null))));};_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 _this4 = this;var search = this.props.search ? /*#__PURE__*/_react.default.createElement("div", { className: _Select.styles.search() }, /*#__PURE__*/_react.default.createElement(_Input.Input, { ref: this.focusInput, onValueChange: this.handleSearch, width: "100%" })) : null;var value = this.getValue();return /*#__PURE__*/_react.default.createElement(_DropdownContainer.DropdownContainer, { getParent: this.dropdownContainerGetParent, offsetY: -1, align: this.props.menuAlign, disablePortal: this.props.disablePortal }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, { ref: this.refMenu, width: this.props.menuWidth, onItemClick: this.close, maxHeight: this.props.maxMenuHeight }, search, this.mapItems(function (iValue, item, i, comment) {if ((0, _utils.isFunction)(item)) {var element = item();if ( /*#__PURE__*/_react.default.isValidElement(element)) {return /*#__PURE__*/_react.default.cloneElement(element, { key: i });}return null;}if ( /*#__PURE__*/_react.default.isValidElement(item)) {return /*#__PURE__*/_react.default.cloneElement(item, { key: i });}return /*#__PURE__*/_react.default.createElement(_MenuItem.MenuItem, { key: i, state: _this4.getProps().areValuesEqual(iValue, value) ? 'selected' : null, onClick: _this4.select.bind(_this4, iValue), comment: comment }, _this4.getProps().renderItem(iValue, item));})));};_proto.select = function select(value) {this.focus();this.setState({ opened: false, value: value });if (this.props.onValueChange && !this.getProps().areValuesEqual(this.getValue(), value)) {this.props.onValueChange(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 = _createForOfIteratorHelperLoose(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 = _createForOfIteratorHelperLoose(items), _step2; !(_step2 = _iterator2()).done;) {var entry = _step2.value;var _normalizeEntry2 = normalizeEntry(entry),itemValue = _normalizeEntry2[0],_item2 = _normalizeEntry2[1];if (this.getProps().areValuesEqual(itemValue, value)) {return _item2;}}return null;};return Select;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Select', _class2.propTypes = { areValuesEqual: _propTypes.default.func, defaultValue: _propTypes.default.any, disablePortal: _propTypes.default.bool, disabled: _propTypes.default.bool, error: _propTypes.default.bool, filterItem: _propTypes.default.func, items: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object]), maxMenuHeight: _propTypes.default.number, maxWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]), placeholder: _propTypes.default.node, renderItem: _propTypes.default.func, renderValue: _propTypes.default.func, search: _propTypes.default.bool, value: _propTypes.default.any, width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]), onValueChange: _propTypes.default.func, onMouseEnter: _propTypes.default.func, onMouseLeave: _propTypes.default.func, onMouseOver: _propTypes.default.func, onKeyDown: _propTypes.default.func }, _class2.defaultProps = { renderValue: renderValue, renderItem: renderItem, areValuesEqual: areValuesEqual, filterItem: filterItem, use: 'default' }, _class2.Item = _Item.Item, _class2.SEP = function () {return /*#__PURE__*/_react.default.createElement(_MenuSeparator.MenuSeparator, null);}, _class2.static = function (element) {(0, _invariant.default)( /*#__PURE__*/_react.default.isValidElement(element) || typeof element === 'function', 'Select.static(element) expects element to be a valid react element.');return element;}, _temp)) || _class);exports.Select = Select;
+   */;_proto.renderMain = function renderMain() {var _this$renderLabel = this.renderLabel(),label = _this$renderLabel.label,isPlaceholder = _this$renderLabel.isPlaceholder;var buttonParams = { opened: this.state.opened, label: label, isPlaceholder: isPlaceholder, onClick: this.toggle, onKeyDown: this.handleKey };var style = { width: this.props.width, maxWidth: this.props.maxWidth || undefined };var button = this.getButton(buttonParams);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: this.state.opened }, /*#__PURE__*/_react.default.createElement("span", { className: _Select.styles.root(), style: style }, button, !this.props.disabled && this.state.opened && this.renderMenu())));};_proto.renderLabel = function renderLabel() {var value = this.getValue();var item = this.getItemByValue(value);if (item != null || value != null) {return { label: this.getProps().renderValue(value, item), isPlaceholder: false };}return { label: /*#__PURE__*/_react.default.createElement("span", null, this.props.placeholder || this.locale.placeholder), isPlaceholder: true };};_proto.getLeftIconClass = function getLeftIconClass(size) {if (this.props.use === 'link') {return _Select.styles.leftIconLink(this.theme);}switch (size) {case 'large':return _Select.styles.leftIconLarge(this.theme);case 'medium':return _Select.styles.leftIconMedium(this.theme);case 'small':default:return _Select.styles.leftIconSmall(this.theme);}};_proto.renderDefaultButton = function renderDefaultButton(params) {var _cx, _cx2;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 });var labelProps = { className: (0, _Emotion.cx)((_cx = {}, _cx[_Select.styles.label()] = this.props.use !== 'link', _cx[_Select.styles.placeholder(this.theme)] = params.isPlaceholder, _cx[_Select.styles.customUsePlaceholder()] = params.isPlaceholder && this.props.use !== 'default', _cx[_Select.styles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _cx)), style: { paddingRight: this.getSelectIconGap() } };var useIsCustom = this.props.use !== 'default';return /*#__PURE__*/_react.default.createElement(_Button.Button, buttonProps, /*#__PURE__*/_react.default.createElement("div", { className: _Select.styles.selectButtonContainer() }, 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)(_Select.styles.arrowWrap(this.theme), (_cx2 = {}, _cx2[_Select.styles.arrowDisabled(this.theme)] = this.props.disabled, _cx2[_Select.styles.customUseArrow()] = useIsCustom, _cx2)) }, /*#__PURE__*/_react.default.createElement(_px.ArrowChevronDownIcon, null))));};_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 _this4 = this;var search = this.props.search ? /*#__PURE__*/_react.default.createElement("div", { className: _Select.styles.search(), onKeyDown: this.handleKey }, /*#__PURE__*/_react.default.createElement(_Input.Input, { ref: this.focusInput, onValueChange: this.handleSearch, width: "100%" })) : null;var value = this.getValue();return /*#__PURE__*/_react.default.createElement(_DropdownContainer.DropdownContainer, { getParent: this.dropdownContainerGetParent, offsetY: -1, align: this.props.menuAlign, disablePortal: this.props.disablePortal }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, { ref: this.refMenu, width: this.props.menuWidth, onItemClick: this.close, maxHeight: this.props.maxMenuHeight }, search, this.mapItems(function (iValue, item, i, comment) {if ((0, _utils.isFunction)(item)) {var element = item();if ( /*#__PURE__*/_react.default.isValidElement(element)) {return /*#__PURE__*/_react.default.cloneElement(element, { key: i });}return null;}if ( /*#__PURE__*/_react.default.isValidElement(item)) {return /*#__PURE__*/_react.default.cloneElement(item, { key: i });}return /*#__PURE__*/_react.default.createElement(_MenuItem.MenuItem, { key: i, state: _this4.getProps().areValuesEqual(iValue, value) ? 'selected' : null, onClick: _this4.select.bind(_this4, iValue), comment: comment }, _this4.getProps().renderItem(iValue, item));})));};_proto.select = function select(value) {this.focus();this.setState({ opened: false, value: value });if (this.props.onValueChange && !this.getProps().areValuesEqual(this.getValue(), value)) {this.props.onValueChange(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 = _createForOfIteratorHelperLoose(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 = _createForOfIteratorHelperLoose(items), _step2; !(_step2 = _iterator2()).done;) {var entry = _step2.value;var _normalizeEntry2 = normalizeEntry(entry),itemValue = _normalizeEntry2[0],_item2 = _normalizeEntry2[1];if (this.getProps().areValuesEqual(itemValue, value)) {return _item2;}}return null;};return Select;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Select', _class2.propTypes = { areValuesEqual: _propTypes.default.func, defaultValue: _propTypes.default.any, disablePortal: _propTypes.default.bool, disabled: _propTypes.default.bool, error: _propTypes.default.bool, filterItem: _propTypes.default.func, items: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object]), maxMenuHeight: _propTypes.default.number, maxWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]), placeholder: _propTypes.default.node, renderItem: _propTypes.default.func, renderValue: _propTypes.default.func, search: _propTypes.default.bool, value: _propTypes.default.any, width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]), onValueChange: _propTypes.default.func, onMouseEnter: _propTypes.default.func, onMouseLeave: _propTypes.default.func, onMouseOver: _propTypes.default.func, onKeyDown: _propTypes.default.func }, _class2.defaultProps = { renderValue: renderValue, renderItem: renderItem, areValuesEqual: areValuesEqual, filterItem: filterItem, use: 'default' }, _class2.Item = _Item.Item, _class2.SEP = function () {return /*#__PURE__*/_react.default.createElement(_MenuSeparator.MenuSeparator, null);}, _class2.static = function (element) {(0, _invariant.default)( /*#__PURE__*/_react.default.isValidElement(element) || typeof element === 'function', 'Select.static(element) expects element to be a valid react element.');return element;}, _temp)) || _class) || _class);exports.Select = Select;
 function renderValue(value, item) {
   return item;
 }