@skbkontur/react-ui 0.0.0-13d2191267 → 0.0.0-151f385a39

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

@@ -1 +1 @@
-{"version":3,"sources":["ScrollContainer.tsx"],"names":["HIDE_SCROLLBAR_OFFSET","MIN_SCROLL_SIZE","ScrollContainer","state","scrollActive","scrollSize","scrollPos","hover","scrolling","scrollState","inner","scroll","refInner","element","props","preventWindowScroll","addEventListener","handleInnerScrollWheel","passive","removeEventListener","refScroll","handleScrollWheel","handleNativeScroll","event","reflow","onScroll","preventDefault","LayoutEvents","emit","containerHeight","offsetHeight","contentHeight","scrollHeight","scrollTop","Math","max","getImmediateScrollState","onScrollStateChange","setState","handleScrollMouseDown","target","window","document","initialY","clientY","initialScrollTop","mouseMove","mouseMoveEvent","ratio","deltaY","Object","prototype","hasOwnProperty","call","returnValue","mouseUp","WheelEvent","handleMouseMove","right","currentTarget","getBoundingClientRect","pageX","setHover","handleMouseLeave","componentDidMount","componentDidUpdate","prevProps","render","scrollClass","jsStyles","scrollInvert","Boolean","invert","scrollHover","scrollStyle","top","height","innerStyle","marginRight","paddingRight","maxHeight","scrollBehavior","scrollBehaviour","root","children","scrollTo","maxScroll","offsetTop","minScroll","scrollToTop","scrollToBottom","clientHeight","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","oneOfType","string","number","oneOf","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport * as LayoutEvents from '../../lib/LayoutEvents';\r\nimport { getScrollWidth } from '../../lib/dom/getScrollWidth';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './ScrollContainer.styles';\r\n\r\nconst HIDE_SCROLLBAR_OFFSET = 30;\r\nconst MIN_SCROLL_SIZE = 20;\r\n\r\nexport type ScrollContainerScrollState = 'top' | 'scroll' | 'bottom';\r\n\r\nexport type ScrollBehaviour = 'auto' | 'smooth';\r\n\r\nexport interface ScrollContainerProps extends CommonProps {\r\n  invert?: boolean;\r\n  maxHeight?: React.CSSProperties['maxHeight'];\r\n  preventWindowScroll?: boolean;\r\n  /**\r\n   * Поведение скролла (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)\r\n   * @default 'auto'\r\n   */\r\n  scrollBehaviour?: ScrollBehaviour;\r\n  onScrollStateChange?: (scrollState: ScrollContainerScrollState) => void;\r\n  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\r\n}\r\n\r\nexport interface ScrollContainerState {\r\n  scrollActive: boolean;\r\n  hover: boolean;\r\n  scrolling: boolean;\r\n  scrollSize: number;\r\n  scrollPos: number;\r\n  scrollState: ScrollContainerScrollState;\r\n}\r\n\r\nexport class ScrollContainer extends React.Component<ScrollContainerProps, ScrollContainerState> {\r\n  public static __KONTUR_REACT_UI__ = 'ScrollContainer';\r\n\r\n  public static propTypes = {\r\n    invert: PropTypes.bool,\r\n    maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n    scrollBehaviour: PropTypes.oneOf(['auto', 'smooth']),\r\n    preventWindowScroll: PropTypes.bool,\r\n    onScrollStateChange: PropTypes.func,\r\n  };\r\n\r\n  public static defaultProps = {\r\n    scrollBehaviour: 'auto',\r\n  };\r\n\r\n  public state: ScrollContainerState = {\r\n    scrollActive: false,\r\n    scrollSize: 0,\r\n    scrollPos: 0,\r\n\r\n    // Mouse is moving where big scrollbar can be located.\r\n    hover: false,\r\n    // True when scroll is following mouse (mouse down on scroll).\r\n    scrolling: false,\r\n    scrollState: 'top',\r\n  };\r\n\r\n  private inner: Nullable<HTMLElement>;\r\n  private scroll: Nullable<HTMLElement>;\r\n\r\n  public componentDidMount() {\r\n    this.reflow();\r\n  }\r\n\r\n  public componentDidUpdate(prevProps: ScrollContainerProps) {\r\n    if (this.inner) {\r\n      if (prevProps.preventWindowScroll && !this.props.preventWindowScroll) {\r\n        this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\r\n      }\r\n      if (!prevProps.preventWindowScroll && this.props.preventWindowScroll) {\r\n        this.inner.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\r\n      }\r\n    }\r\n    this.reflow();\r\n  }\r\n\r\n  public render() {\r\n    const state = this.state;\r\n    const props = this.props;\r\n    let scroll = null;\r\n\r\n    if (state.scrollActive) {\r\n      const scrollClass = cn({\r\n        [jsStyles.scroll()]: true,\r\n        [jsStyles.scrollInvert()]: Boolean(props.invert),\r\n        [jsStyles.scrollHover()]: state.hover || state.scrolling,\r\n      });\r\n      const scrollStyle = {\r\n        top: state.scrollPos,\r\n        height: state.scrollSize,\r\n      };\r\n      scroll = (\r\n        <div\r\n          ref={this.refScroll}\r\n          className={scrollClass}\r\n          style={scrollStyle}\r\n          onMouseDown={this.handleScrollMouseDown}\r\n        />\r\n      );\r\n    }\r\n\r\n    const innerStyle: React.CSSProperties = {\r\n      // hide vertical scrollbar with a little extra space\r\n      marginRight: -1 * HIDE_SCROLLBAR_OFFSET,\r\n      paddingRight: HIDE_SCROLLBAR_OFFSET - getScrollWidth(),\r\n\r\n      maxHeight: props.maxHeight,\r\n      scrollBehavior: props.scrollBehaviour,\r\n    };\r\n\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <div className={jsStyles.root()} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>\r\n          {scroll}\r\n          <div\r\n            data-tid=\"ScrollContainer__inner\"\r\n            className={jsStyles.inner()}\r\n            style={innerStyle}\r\n            ref={this.refInner}\r\n            onScroll={this.handleNativeScroll}\r\n          >\r\n            {props.children}\r\n          </div>\r\n        </div>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public scrollTo(element: HTMLElement) {\r\n    if (!element || !this.inner) {\r\n      return;\r\n    }\r\n    const maxScroll = element.offsetTop;\r\n    if (this.inner.scrollTop > maxScroll) {\r\n      this.inner.scrollTop = maxScroll;\r\n      return;\r\n    }\r\n\r\n    const minScroll = element.offsetTop + element.scrollHeight - this.inner.offsetHeight;\r\n    if (this.inner.scrollTop < minScroll) {\r\n      this.inner.scrollTop = minScroll;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public scrollToTop() {\r\n    if (!this.inner) {\r\n      return;\r\n    }\r\n    this.inner.scrollTop = 0;\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public scrollToBottom() {\r\n    if (!this.inner) {\r\n      return;\r\n    }\r\n    this.inner.scrollTop = this.inner.scrollHeight - this.inner.offsetHeight;\r\n  }\r\n\r\n  private refInner = (element: HTMLElement | null) => {\r\n    if (!this.inner && element && this.props.preventWindowScroll) {\r\n      element.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\r\n    }\r\n    if (this.inner && !element) {\r\n      this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\r\n    }\r\n    this.inner = element;\r\n  };\r\n\r\n  private refScroll = (element: HTMLElement | null) => {\r\n    if (!this.scroll && element) {\r\n      element.addEventListener('wheel', this.handleScrollWheel, { passive: false });\r\n    }\r\n    if (this.scroll && !element) {\r\n      this.scroll.removeEventListener('wheel', this.handleScrollWheel);\r\n    }\r\n    this.scroll = element;\r\n  };\r\n\r\n  private handleNativeScroll = (event: React.UIEvent<HTMLDivElement>) => {\r\n    this.reflow();\r\n    this.props.onScroll?.(event);\r\n    if (this.props.preventWindowScroll) {\r\n      event.preventDefault();\r\n      return;\r\n    }\r\n    LayoutEvents.emit();\r\n  };\r\n\r\n  private reflow = () => {\r\n    if (!this.inner) {\r\n      return;\r\n    }\r\n\r\n    const containerHeight = this.inner.offsetHeight;\r\n    const contentHeight = this.inner.scrollHeight;\r\n    const scrollTop = this.inner.scrollTop;\r\n\r\n    const scrollActive = containerHeight < contentHeight;\r\n\r\n    if (!scrollActive && !this.state.scrollActive) {\r\n      return;\r\n    }\r\n\r\n    let scrollSize = 0;\r\n    let scrollPos = 0;\r\n    let scrollState = this.state.scrollState;\r\n\r\n    if (scrollActive) {\r\n      scrollSize = Math.max((containerHeight / contentHeight) * containerHeight, MIN_SCROLL_SIZE);\r\n      scrollPos = (scrollTop / (contentHeight - containerHeight)) * (containerHeight - scrollSize);\r\n    }\r\n\r\n    if (\r\n      this.state.scrollActive !== scrollActive ||\r\n      this.state.scrollSize !== scrollSize ||\r\n      this.state.scrollPos !== scrollPos\r\n    ) {\r\n      scrollState = this.getImmediateScrollState();\r\n\r\n      if (scrollState !== this.state.scrollState) {\r\n        this.props.onScrollStateChange?.(scrollState);\r\n      }\r\n\r\n      this.setState({\r\n        scrollActive,\r\n        scrollSize,\r\n        scrollPos,\r\n        scrollState,\r\n      });\r\n    }\r\n  };\r\n\r\n  private handleScrollMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\r\n    if (!this.inner) {\r\n      return;\r\n    }\r\n\r\n    const target: Document = window.document;\r\n    const initialY = event.clientY;\r\n    const initialScrollTop = this.inner.scrollTop;\r\n\r\n    const mouseMove = (mouseMoveEvent: MouseEvent) => {\r\n      if (!this.inner) {\r\n        return;\r\n      }\r\n\r\n      const ratio =\r\n        (this.inner.scrollHeight - this.inner.offsetHeight) / (this.inner.offsetHeight - this.state.scrollSize);\r\n      const deltaY = (mouseMoveEvent.clientY - initialY) * ratio;\r\n\r\n      this.inner.scrollTop = initialScrollTop + deltaY;\r\n\r\n      if (mouseMoveEvent.preventDefault) {\r\n        mouseMoveEvent.preventDefault();\r\n      }\r\n\r\n      if (Object.prototype.hasOwnProperty.call(mouseMoveEvent, 'returnValue')) {\r\n        (mouseMoveEvent as MouseEvent & {\r\n          returnValue: boolean;\r\n        }).returnValue = false;\r\n      }\r\n    };\r\n\r\n    const mouseUp = () => {\r\n      target.removeEventListener('mousemove', mouseMove);\r\n      target.removeEventListener('mouseup', mouseUp);\r\n      this.setState({ scrolling: false });\r\n    };\r\n\r\n    target.addEventListener('mousemove', mouseMove);\r\n    target.addEventListener('mouseup', mouseUp);\r\n    this.setState({ scrolling: true });\r\n\r\n    event.preventDefault();\r\n  };\r\n\r\n  private handleScrollWheel = (event: Event) => {\r\n    if (!this.inner || !(event instanceof WheelEvent)) {\r\n      return;\r\n    }\r\n\r\n    if (event.deltaY > 0 && this.inner.scrollHeight <= this.inner.scrollTop + this.inner.offsetHeight) {\r\n      return;\r\n    }\r\n    if (event.deltaY < 0 && this.inner.scrollTop <= 0) {\r\n      return;\r\n    }\r\n\r\n    this.inner.scrollTop += event.deltaY;\r\n    event.preventDefault();\r\n  };\r\n\r\n  private handleInnerScrollWheel = (event: Event) => {\r\n    if (!this.inner || !(event instanceof WheelEvent)) {\r\n      return;\r\n    }\r\n\r\n    if (this.state.scrollActive) {\r\n      if (event.deltaY > 0 && this.inner.scrollHeight <= this.inner.scrollTop + this.inner.offsetHeight) {\r\n        event.preventDefault();\r\n        return false;\r\n      }\r\n      if (event.deltaY < 0 && this.inner.scrollTop <= 0) {\r\n        event.preventDefault();\r\n        return false;\r\n      }\r\n    }\r\n  };\r\n\r\n  private handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\r\n    const right = event.currentTarget.getBoundingClientRect().right - event.pageX;\r\n    this.setHover(right <= 12);\r\n  };\r\n\r\n  private handleMouseLeave = () => {\r\n    this.setHover(false);\r\n  };\r\n\r\n  private setHover(hover: boolean) {\r\n    if (this.state.hover !== hover) {\r\n      this.setState({ hover });\r\n    }\r\n  }\r\n\r\n  private getImmediateScrollState(): ScrollContainerScrollState {\r\n    if (!this.inner || this.inner.scrollTop === 0) {\r\n      return 'top';\r\n    } else if (this.inner.scrollTop === this.inner.scrollHeight - this.inner.clientHeight) {\r\n      return 'bottom';\r\n    } else {\r\n      return 'scroll';\r\n    }\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["ScrollContainer.tsx"],"names":["ScrollContainer","rootNode","render","props","disabled","children","innerStyle","scrollBehavior","scrollBehaviour","maxHeight","maxWidth","scrollbarY","renderScrollbar","scrollbarX","setRootNode","styles","root","handleMouseMove","handleMouseLeave","refInner","inner","globalClasses","isIE11","innerIE11","handleNativeScroll","axis","refScrollBar","refScrollBarX","refScrollBarY","invert","handleScrollStateChange","scrollState","scrollY","scrollX","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","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 { isIE11 } from '../../lib/client';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\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   */\n  disabled?: boolean;\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    if (this.props.disabled) {\n      return this.props.children;\n    }\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, isIE11 && styles.innerIE11())}\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 = getDOMRect(event.currentTarget).right - event.pageX;\n    const bottom = getDOMRect(event.currentTarget).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.md

@@ -1,94 +1,143 @@
-```jsx harmony
-function items(count) {
-  var items = [];
-  for (var i = 0; i < count; ++i) {
-    items.push(i);
-  }
-  return items;
-}
-
-var divStyle = {
-  display: 'inline-block',
-  border: '1px solid #f99',
-  height: 200,
-  margin: 1,
-  position: 'relative',
-  verticalAlign: 'top',
-  width: 200,
-};
-var absStyle = {
-  border: '1px solid #000',
-  boxSizing: 'border-box',
-  position: 'absolute',
-  width: '100%',
-};
-
-<div>
-  <div style={divStyle}>
-    <ScrollContainer>
-      {items(20).map(i => (
-        <div key={i}>{i}</div>
-      ))}
-    </ScrollContainer>
-  </div>
-  <div style={{ ...divStyle, background: '#888' }}>
-    <ScrollContainer invert>
-      {items(20).map(i => (
-        <div key={i}>{i}</div>
-      ))}
-    </ScrollContainer>
-  </div>
-  <div style={divStyle}>
-    <div style={absStyle}>
-      <ScrollContainer>
-        {items(3).map(i => (
-          <div key={i}>{i}</div>
-        ))}
-      </ScrollContainer>
-    </div>
-  </div>
-  <div style={divStyle}>
-    <div style={absStyle}>
-      <ScrollContainer maxHeight={150}>
-        {items(30).map(i => (
-          <div key={i}>{i}</div>
-        ))}
-      </ScrollContainer>
-    </div>
-  </div>
-</div>;
-```
-
-На данный момент кастомизируется только вертикальный scrollbar. Горизонтальный, при наличии, остается нативным.
-
-```jsx harmony
-function items(count) {
-  var items = [];
-  for (var i = 0; i < count; ++i) {
-    items.push(i);
-  }
-  return items;
-}
-
-var containerStyle = {
-  display: 'inline-block',
-  border: '1px solid #f99',
-  height: 200,
-  margin: 1,
-  width: 200,
-};
-
-var innerStyle = {
-  width: 400,
-};
-
-<div style={containerStyle}>
-  <ScrollContainer>
-    {items(20).map(i => (
-      <div style={innerStyle} key={i}>
-        {i}
-      </div>
-    ))}
-  </ScrollContainer>
-</div>;
-```
+```jsx harmony
+function items(count) {
+  var items = [];
+  for (var i = 0; i < count; ++i) {
+    items.push(i);
+  }
+  return items;
+}
+
+var divStyle = {
+  display: 'inline-block',
+  border: '1px solid #f99',
+  height: 200,
+  margin: 1,
+  position: 'relative',
+  verticalAlign: 'top',
+  width: 200,
+};
+var absStyle = {
+  border: '1px solid',
+  boxSizing: 'border-box',
+  position: 'absolute',
+  width: '100%',
+};
+
+<div>
+  <div style={divStyle}>
+    <ScrollContainer>
+      {items(20).map((i) => (
+        <div key={i}>{i}</div>
+      ))}
+    </ScrollContainer>
+  </div>
+  <div style={{ ...divStyle, background: '#888' }}>
+    <ScrollContainer invert>
+      {items(20).map((i) => (
+        <div key={i}>{i}</div>
+      ))}
+    </ScrollContainer>
+  </div>
+  <div style={divStyle}>
+    <div style={absStyle}>
+      <ScrollContainer>
+        {items(3).map((i) => (
+          <div key={i}>{i}</div>
+        ))}
+      </ScrollContainer>
+    </div>
+  </div>
+  <div style={divStyle}>
+    <div style={absStyle}>
+      <ScrollContainer maxHeight={150}>
+        {items(30).map((i) => (
+          <div key={i}>{i}</div>
+        ))}
+      </ScrollContainer>
+    </div>
+  </div>
+</div>;
+```
+
+Горизонтальный scrollbar.
+
+```jsx harmony
+var divStyle = {
+  display: 'inline-block',
+  border: '1px solid #f99',
+  height: 200,
+  margin: 1,
+  position: 'relative',
+  verticalAlign: 'top',
+  width: 200,
+};
+var absStyle = {
+  border: '1px solid',
+  boxSizing: 'border-box',
+  position: 'absolute',
+  width: '100%',
+};
+
+function items(count) {
+  var items = [];
+  for (var i = 0; i < count; ++i) {
+    items.push(i);
+  }
+  return items;
+}
+
+var containerStyle = {
+  display: 'inline-block',
+  border: '1px solid #f99',
+  height: 200,
+  margin: 1,
+  width: 200,
+};
+
+var innerStyle = {
+  width: 400,
+};
+
+<div>
+  <div style={divStyle}>
+    <ScrollContainer>
+      {items(5).map((i) => (
+        <div style={innerStyle} key={i}>
+          {i}
+        </div>
+      ))}
+    </ScrollContainer>
+  </div>
+  <div style={{ ...divStyle, background: '#888' }}>
+    <ScrollContainer invert>
+      {items(20).map((i) => (
+        <div style={innerStyle} key={i}>
+          {i}
+        </div>
+      ))}
+    </ScrollContainer>
+  </div>
+  <div style={divStyle}>
+    <div style={absStyle}>
+      <ScrollContainer maxHeight={150}>
+        {items(3).map((i) => (
+          <div style={innerStyle} key={i}>
+            {i}
+          </div>
+        ))}
+      </ScrollContainer>
+    </div>
+  </div>
+  <div style={divStyle}>
+    <div style={absStyle}>
+      <ScrollContainer maxHeight={150} maxWidth={200}>
+        {items(30).map((i) => (
+          <div style={innerStyle} key={i}>
+            {i}
+          </div>
+        ))}
+      </ScrollContainer>
+    </div>
+  </div>
+</div>;
+```

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

@@ -1,7 +1,17 @@
-export declare const jsStyles: {
+import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    scrollbarX: string;
+    scrollbarY: string;
+    inner: string;
+};
+export declare const styles: {
     root(): string;
     inner(): string;
-    scroll(): string;
-    scrollHover(): string;
-    scrollInvert(): string;
+    innerIE11(): 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/ScrollContainer.styles.js

@@ -1,8 +1,15 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");function _templateObject5() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      &::after {\n        background: #ccc;\n        background: rgba(255, 255, 255, 0.5);\n      }\n    "]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 10px;\n    "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      right: 2px;\n      transition: width 0.2s;\n      width: 4px;\n      z-index: 200;\n\n      &::after {\n        background: #b7b7b7;\n        border-radius: 5px;\n        bottom: 1px;\n        content: '';\n        display: block;\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 1px;\n      }\n    "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-bottom: -1px;\n      max-height: 100%;\n\n      /* IE sometimes enabled scroll: http://codepen.io/anon/pen/RRrLNX */\n      padding-bottom: 1px;\n      overflow-y: scroll;\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 100%;\n      overflow: hidden;\n      position: relative;\n    "]);_templateObject = function _templateObject() {return data;};return data;}
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = exports.globalClasses = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
-var styles = {
+
+var globalClasses = (0, _Emotion.prefix)('scroll-container')({
+  scrollbarX: 'scrollbar-x',
+  scrollbarY: 'scrollbar-y',
+  inner: 'inner' });exports.globalClasses = globalClasses;
+
+
+var styles = (0, _Emotion.memoizeStyle)({
   root: function root() {
-    return (0, _Emotion.css)(_templateObject());
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 100%;\n      overflow: hidden;\n      position: relative;\n    "])));
 
 
 
@@ -10,7 +17,13 @@ var styles = {
   },
 
   inner: function inner() {
-    return (0, _Emotion.css)(_templateObject2());
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      overflow: scroll;\n      max-height: 100%;\n      max-width: 100%;\n\n      /* Hide scrobars without losing functionality */\n      scrollbar-width: none;\n      -ms-overflow-style: none;\n      &::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n      }\n    "])));
+
+
+
+
+
+
 
 
 
@@ -20,12 +33,19 @@ var styles = {
 
   },
 
-  scroll: function scroll() {
-    return (0, _Emotion.css)(_templateObject3());
+  innerIE11: function innerIE11() {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      /* IE sometimes enabled scroll: http://codepen.io/anon/pen/RRrLNX */\n      margin-bottom: -1px;\n      padding-bottom: 1px;\n      margin-right: -1px;\n      padding-right: 1px;\n    "])));
+
+
 
 
 
 
+  },
+
+  scrollBar: function scrollBar(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      z-index: 200;\n\n      &::after {\n        content: '';\n        display: block;\n        border-radius: 5px;\n        position: absolute;\n        background: ", ";\n      }\n    "])),
+
 
 
 
@@ -33,29 +53,73 @@ var styles = {
 
 
 
+    t.scrollContainerScrollBarColor);
 
 
+  },
 
+  scrollBarInvert: function scrollBarInvert(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &::after {\n        background: #ccc;\n        background: ", ";\n      }\n    "])),
 
 
+    t.scrollContainerScrollBarInvertColor);
 
 
   },
 
-  scrollHover: function scrollHover() {
-    return (0, _Emotion.css)(_templateObject4());
+  scrollBarY: function scrollBarY(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      right: 2px;\n      transition: width 0.2s;\n      width: ", ";\n\n      &::after {\n        bottom: 1px;\n        left: 0;\n        right: 0;\n        top: 1px;\n      }\n    "])),
+
+
+    t.scrollContainerScrollBarSize);
+
+
+
+
+
 
 
+
+  },
+
+  scrollBarYHover: function scrollBarYHover(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n    "])),
+    t.scrollContainerScrollBarHoverSize);
+
   },
 
-  scrollInvert: function scrollInvert() {
-    return (0, _Emotion.css)(_templateObject5());
+  scrollBarX: function scrollBarX(t) {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      bottom: 1px;\n      transition: height 0.2s;\n      height: ", ";\n\n      &::after {\n        bottom: 0px;\n        left: 1px;\n        right: 1px;\n        top: 0;\n      }\n\n      .", " ~ & {\n        &::after {\n          right: calc(", " + 4px) !important;\n        }\n      }\n\n      & ~ .", " {\n        &::after {\n          content: ' ';\n          width: 100%;\n          display: block;\n          height: calc(", " + 2px);\n        }\n      }\n    "])),
+
+
+    t.scrollContainerScrollBarSize,
+
+
+
+
+
 
 
 
+    globalClasses.scrollbarY,
 
+    t.scrollContainerScrollBarHoverSize,
 
-  } };
 
 
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+    globalClasses.inner,
+
+
+
+
+    t.scrollContainerScrollBarHoverSize);
+
+
+
+  },
+
+  scrollBarXHover: function scrollBarXHover(t) {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: ", ";\n    "])),
+    t.scrollContainerScrollBarHoverSize);
+
+  } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["ScrollContainer.styles.ts"],"names":["styles","root","css","inner","scroll","scrollHover","scrollInvert","jsStyles"],"mappings":"8QAAA,oD;;AAEA,IAAMA,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,eAAOC,YAAP;;;;;AAKD,GAPY;;AASbC,EAAAA,KATa,mBASL;AACN,eAAOD,YAAP;;;;;;;;AAQD,GAlBY;;AAoBbE,EAAAA,MApBa,oBAoBJ;AACP,eAAOF,YAAP;;;;;;;;;;;;;;;;;;;AAmBD,GAxCY;;AA0CbG,EAAAA,WA1Ca,yBA0CC;AACZ,eAAOH,YAAP;;;AAGD,GA9CY;;AAgDbI,EAAAA,YAhDa,0BAgDE;AACb,eAAOJ,YAAP;;;;;;AAMD,GAvDY,EAAf;;;AA0DO,IAAMK,QAAQ,GAAG,2BAAaP,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\n\r\nconst styles = {\r\n  root() {\r\n    return css`\r\n      height: 100%;\r\n      overflow: hidden;\r\n      position: relative;\r\n    `;\r\n  },\r\n\r\n  inner() {\r\n    return css`\r\n      margin-bottom: -1px;\r\n      max-height: 100%;\r\n\r\n      /* IE sometimes enabled scroll: http://codepen.io/anon/pen/RRrLNX */\r\n      padding-bottom: 1px;\r\n      overflow-y: scroll;\r\n    `;\r\n  },\r\n\r\n  scroll() {\r\n    return css`\r\n      position: absolute;\r\n      right: 2px;\r\n      transition: width 0.2s;\r\n      width: 4px;\r\n      z-index: 200;\r\n\r\n      &::after {\r\n        background: #b7b7b7;\r\n        border-radius: 5px;\r\n        bottom: 1px;\r\n        content: '';\r\n        display: block;\r\n        left: 0;\r\n        position: absolute;\r\n        right: 0;\r\n        top: 1px;\r\n      }\r\n    `;\r\n  },\r\n\r\n  scrollHover() {\r\n    return css`\r\n      width: 10px;\r\n    `;\r\n  },\r\n\r\n  scrollInvert() {\r\n    return css`\r\n      &::after {\r\n        background: #ccc;\r\n        background: rgba(255, 255, 255, 0.5);\r\n      }\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["ScrollContainer.styles.ts"],"names":["globalClasses","scrollbarX","scrollbarY","inner","styles","root","css","innerIE11","scrollBar","t","scrollContainerScrollBarColor","scrollBarInvert","scrollContainerScrollBarInvertColor","scrollBarY","scrollContainerScrollBarSize","scrollBarYHover","scrollContainerScrollBarHoverSize","scrollBarX","scrollBarXHover"],"mappings":"oSAAA,oD;;;AAGO,IAAMA,aAAa,GAAG,qBAAO,kBAAP,EAA2B;AACtDC,EAAAA,UAAU,EAAE,aAD0C;AAEtDC,EAAAA,UAAU,EAAE,aAF0C;AAGtDC,EAAAA,KAAK,EAAE,OAH+C,EAA3B,CAAtB,C;;;AAMA,IAAMC,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;;;AAKD,GAPgC;;AASjCH,EAAAA,KATiC,mBASzB;AACN,eAAOG,YAAP;;;;;;;;;;;;;;AAcD,GAxBgC;;AA0BjCC,EAAAA,SA1BiC,uBA0BrB;AACV,eAAOD,YAAP;;;;;;;AAOD,GAlCgC;;AAoCjCE,EAAAA,SApCiC,qBAoCvBC,CApCuB,EAoCb;AAClB,eAAOH,YAAP;;;;;;;;;AASkBG,IAAAA,CAAC,CAACC,6BATpB;;;AAYD,GAjDgC;;AAmDjCC,EAAAA,eAnDiC,2BAmDjBF,CAnDiB,EAmDP;AACxB,eAAOH,YAAP;;;AAGkBG,IAAAA,CAAC,CAACG,mCAHpB;;;AAMD,GA1DgC;;AA4DjCC,EAAAA,UA5DiC,sBA4DtBJ,CA5DsB,EA4DZ;AACnB,eAAOH,YAAP;;;AAGWG,IAAAA,CAAC,CAACK,4BAHb;;;;;;;;;AAYD,GAzEgC;;AA2EjCC,EAAAA,eA3EiC,2BA2EjBN,CA3EiB,EA2EP;AACxB,eAAOH,YAAP;AACWG,IAAAA,CAAC,CAACO,iCADb;;AAGD,GA/EgC;;AAiFjCC,EAAAA,UAjFiC,sBAiFtBR,CAjFsB,EAiFZ;AACnB,eAAOH,YAAP;;;AAGYG,IAAAA,CAAC,CAACK,4BAHd;;;;;;;;;AAYKd,IAAAA,aAAa,CAACE,UAZnB;;AAcoBO,IAAAA,CAAC,CAACO,iCAdtB;;;;AAkBShB,IAAAA,aAAa,CAACG,KAlBvB;;;;;AAuBqBM,IAAAA,CAAC,CAACO,iCAvBvB;;;;AA2BD,GA7GgC;;AA+GjCE,EAAAA,eA/GiC,2BA+GjBT,CA/GiB,EA+GP;AACxB,eAAOH,YAAP;AACYG,IAAAA,CAAC,CAACO,iCADd;;AAGD,GAnHgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const globalClasses = prefix('scroll-container')({\n  scrollbarX: 'scrollbar-x',\n  scrollbarY: 'scrollbar-y',\n  inner: 'inner',\n});\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      height: 100%;\n      overflow: hidden;\n      position: relative;\n    `;\n  },\n\n  inner() {\n    return css`\n      position: relative;\n      overflow: scroll;\n      max-height: 100%;\n      max-width: 100%;\n\n      /* Hide scrobars without losing functionality */\n      scrollbar-width: none;\n      -ms-overflow-style: none;\n      &::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n      }\n    `;\n  },\n\n  innerIE11() {\n    return css`\n      /* IE sometimes enabled scroll: http://codepen.io/anon/pen/RRrLNX */\n      margin-bottom: -1px;\n      padding-bottom: 1px;\n      margin-right: -1px;\n      padding-right: 1px;\n    `;\n  },\n\n  scrollBar(t: Theme) {\n    return css`\n      position: absolute;\n      z-index: 200;\n\n      &::after {\n        content: '';\n        display: block;\n        border-radius: 5px;\n        position: absolute;\n        background: ${t.scrollContainerScrollBarColor};\n      }\n    `;\n  },\n\n  scrollBarInvert(t: Theme) {\n    return css`\n      &::after {\n        background: #ccc;\n        background: ${t.scrollContainerScrollBarInvertColor};\n      }\n    `;\n  },\n\n  scrollBarY(t: Theme) {\n    return css`\n      right: 2px;\n      transition: width 0.2s;\n      width: ${t.scrollContainerScrollBarSize};\n\n      &::after {\n        bottom: 1px;\n        left: 0;\n        right: 0;\n        top: 1px;\n      }\n    `;\n  },\n\n  scrollBarYHover(t: Theme) {\n    return css`\n      width: ${t.scrollContainerScrollBarHoverSize};\n    `;\n  },\n\n  scrollBarX(t: Theme) {\n    return css`\n      bottom: 1px;\n      transition: height 0.2s;\n      height: ${t.scrollContainerScrollBarSize};\n\n      &::after {\n        bottom: 0px;\n        left: 1px;\n        right: 1px;\n        top: 0;\n      }\n\n      .${globalClasses.scrollbarY} ~ & {\n        &::after {\n          right: calc(${t.scrollContainerScrollBarHoverSize} + 4px) !important;\n        }\n      }\n\n      & ~ .${globalClasses.inner} {\n        &::after {\n          content: ' ';\n          width: 100%;\n          display: block;\n          height: calc(${t.scrollContainerScrollBarHoverSize} + 2px);\n        }\n      }\n    `;\n  },\n\n  scrollBarXHover(t: Theme) {\n    return css`\n      height: ${t.scrollContainerScrollBarHoverSize};\n    `;\n  },\n});\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './ScrollContainer';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './ScrollContainer';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["Item.tsx"],"names":["Item","render","props","children","React","Component","__KONTUR_REACT_UI__"],"mappings":"gPAAA;;AAEA,uC;;AAEaA,I;;;AAGJC,EAAAA,M,GAAP,kBAAgB;AACd,wBAAO,6BAAC,kBAAD,QAAW,KAAKC,KAAL,CAAWC,QAAtB,CAAP;AACD,G,eALuBC,eAAMC,S,sBAAnBL,I,CACGM,mB,GAAsB,Y","sourcesContent":["import React from 'react';\r\n\r\nimport { MenuItem } from '../MenuItem';\r\n\r\nexport class Item extends React.Component<{ children?: React.ReactNode }> {\r\n  public static __KONTUR_REACT_UI__ = 'SelectItem';\r\n\r\n  public render() {\r\n    return <MenuItem>{this.props.children}</MenuItem>;\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["Item.tsx"],"names":["Item","render","props","children","React","Component","__KONTUR_REACT_UI__"],"mappings":"gPAAA;;AAEA,uC;;AAEaA,I;;;AAGJC,EAAAA,M,GAAP,kBAAgB;AACd,wBAAO,6BAAC,kBAAD,QAAW,KAAKC,KAAL,CAAWC,QAAtB,CAAP;AACD,G,eALuBC,eAAMC,S,sBAAnBL,I,CACGM,mB,GAAsB,Y","sourcesContent":["import React from 'react';\n\nimport { MenuItem } from '../MenuItem';\n\nexport class Item extends React.Component<{ children?: React.ReactNode }> {\n  public static __KONTUR_REACT_UI__ = 'SelectItem';\n\n  public render() {\n    return <MenuItem>{this.props.children}</MenuItem>;\n  }\n}\n"]}

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

@@ -12,21 +12,20 @@ export interface ButtonParams {
     opened: boolean;
     isPlaceholder: boolean;
 }
+declare type SelectItem<TValue, TItem> = [TValue, TItem, React.ReactNode?] | TItem | React.ReactElement | (() => React.ReactElement);
 export interface SelectProps<TValue, TItem> extends CommonProps {
     /** @ignore */
-    _icon?: React.ReactElement<any>;
+    _icon?: React.ReactNode;
     /** @ignore */
     _renderButton?: (params: ButtonParams) => React.ReactNode;
     defaultValue?: TValue;
-    /** @deprecated @ignore */
-    diadocLinkIcon?: React.ReactElement<any>;
     /**
      * Отключает использование портала
      */
     disablePortal?: boolean;
     disabled?: boolean;
     /**
-     * Визуально показать наличие ошибки.
+     * Состояние валидации при ошибке.
      */
     error?: boolean;
     filterItem?: (value: TValue, item: TItem, pattern: string) => boolean;
@@ -54,7 +53,7 @@ export interface SelectProps<TValue, TItem> extends CommonProps {
      * <Select.Item>My Element</Select.Item>
      * ```
      */
-    items?: Array<[TValue, TItem, React.ReactNode?] | TItem | React.ReactElement | (() => React.ReactElement)>;
+    items?: Array<SelectItem<TValue, TItem>>;
     maxMenuHeight?: number;
     maxWidth?: React.CSSProperties['maxWidth'];
     menuAlign?: 'left' | 'right';
@@ -86,11 +85,18 @@ export interface SelectProps<TValue, TItem> extends CommonProps {
     search?: boolean;
     value?: TValue;
     width?: number | string;
+    /**
+     * Состояние валидации при предупреждении.
+     */
     warning?: boolean;
     use?: ButtonUse;
     size?: ButtonSize;
     onFocus?: React.FocusEventHandler<HTMLElement>;
     onBlur?: React.FocusEventHandler<HTMLElement>;
+    /**
+     * Текст заголовка выпадающего меню в мобильной версии
+     */
+    mobileMenuHeaderText?: string;
 }
 export interface SelectState<TValue> {
     opened: boolean;
@@ -130,13 +136,15 @@ export declare class Select<TValue = {}, TItem = {}> extends React.Component<Sel
     };
     static Item: typeof Item;
     static SEP: () => JSX.Element;
-    static static: (element: React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | (() => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>)) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | (() => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>);
+    static static: (element: React.ReactElement | (() => React.ReactElement)) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | (() => React.ReactElement);
     state: SelectState<TValue>;
     private theme;
+    private isMobileLayout;
     private readonly locale;
     private menu;
     private buttonElement;
     private getProps;
+    private setRootNode;
     componentDidUpdate(_prevProps: SelectProps<TValue, TItem>, prevState: SelectState<TValue>): void;
     render(): JSX.Element;
     /**
@@ -151,13 +159,17 @@ export declare class Select<TValue = {}, TItem = {}> extends React.Component<Sel
      * @public
      */
     focus: () => void;
+    private getMenuRenderer;
     private renderMain;
+    private getDefaultButtonParams;
     private renderLabel;
+    private getLeftIconClass;
     private renderDefaultButton;
-    private getLabelPaddingRight;
-    private getLegacyArrowShift;
-    private renderLinkButton;
+    private getSelectIconGap;
     private renderMenu;
+    private renderMobileMenu;
+    private getSearch;
+    private getMenuItems;
     private dropdownContainerGetParent;
     private focusInput;
     private refMenu;
@@ -168,11 +180,12 @@ export declare class Select<TValue = {}, TItem = {}> extends React.Component<Sel
     private getValue;
     private mapItems;
     private getItemByValue;
+    private areValuesEqual;
     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;
+declare function renderValue<TValue, TItem>(value: TValue, item: Nullable<TItem>): Nullable<TItem>;
+declare function renderItem<TValue, TItem>(value: TValue, item?: TItem): TItem | undefined;
+declare function areValuesEqual<TValue>(value1: TValue, value2: TValue): boolean;
+declare function filterItem<TValue>(value: TValue, item: any, pattern: string): boolean;
 export {};