@skbkontur/react-ui 3.11.0 → 3.12.0

package/cjs/components/SidePage/SidePageHeader.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SidePageHeader = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SidePageHeader = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 var _Sticky = require("../Sticky");
 var _CrossIcon = require("../../internal/icons/CrossIcon");
@@ -41,6 +41,7 @@ SidePageHeader = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__
 
     theme = void 0;_this.
     wrapper = null;_this.
+    sticky = null;_this.
     lastRegularHeight = 0;_this.
     setRootNode = void 0;_this.
 
@@ -63,14 +64,17 @@ SidePageHeader = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__
     componentDidMount = function () {
       window.addEventListener('scroll', _this.update, true);
       _this.context.setHasHeader == null ? void 0 : _this.context.setHasHeader();
+      _this.context.headerRef((0, _assertThisInitialized2.default)(_this));
     };_this.
 
     componentWillUnmount = function () {
       window.removeEventListener('scroll', _this.update, true);
       _this.context.setHasHeader == null ? void 0 : _this.context.setHasHeader(false);
+      _this.context.headerRef(null);
     };_this.
 
-    update = function () {
+    update = function () {var _this$sticky;
+      (_this$sticky = _this.sticky) == null ? void 0 : _this$sticky.reflow();
       _this.updateReadyToFix();
     };_this.
 
@@ -89,6 +93,12 @@ SidePageHeader = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__
 
 
 
+
+
+
+
+
+
 
 
 
@@ -112,7 +122,14 @@ SidePageHeader = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__
 
       return /*#__PURE__*/(
         _react.default.createElement("div", { className: (0, _Emotion.cx)(_SidePage.styles.wrapperClose(_this.theme), fixed && _SidePage.styles.fixed(_this.theme)) }, /*#__PURE__*/
-        _react.default.createElement(_Sticky.Sticky, { side: "top", offset: stickyOffset }, /*#__PURE__*/
+        _react.default.createElement(_Sticky.Sticky, { side: "top", offset: stickyOffset },
+        _this.closeIcon)));
+
+
+
+    };_this.
+
+    closeIcon = function () {return /*#__PURE__*/(
         _react.default.createElement(_SidePageContext.SidePageContext.Consumer, null,
         function (_ref) {var _cx3;var requestClose = _ref.requestClose;return /*#__PURE__*/(
             _react.default.createElement("button", {
@@ -125,15 +142,12 @@ SidePageHeader = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__
               "data-tid": "SidePage__close",
               tabIndex: 0 }, /*#__PURE__*/
 
-            _react.default.createElement(_CrossIcon.CrossIcon, null)));}))));
-
+            _react.default.createElement(_CrossIcon.CrossIcon, null)));}));};_this.
 
 
 
 
 
-    };_this.
-
     updateReadyToFix = function () {
       if (_this.wrapper) {
         var wrapperScrolledUp = _this.wrapper.getBoundingClientRect().top;
@@ -146,6 +160,10 @@ SidePageHeader = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__
       _this.wrapper = el;
     };_this.
 
+    stickyRef = function (el) {
+      _this.sticky = el;
+    };_this.
+
     handleFocus = function () {
       requestAnimationFrame(function () {
         if (_keyListener.keyListener.isTabPressed) {
@@ -156,4 +174,4 @@ SidePageHeader = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__
 
     handleBlur = function () {
       _this.setState({ focusedByTab: false });
-    };return _this;}var _proto = SidePageHeader.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var isReadyToFix = this.state.isReadyToFix;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { ref: this.wrapperRef, className: _SidePage.styles.headerWrapper() }, isReadyToFix ? /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { side: "top" }, this.renderHeader) : this.renderHeader()));};(0, _createClass2.default)(SidePageHeader, [{ key: "regularHeight", get: function get() {var isReadyToFix = this.state.isReadyToFix;if (!this.wrapper) {return 0;}if (!isReadyToFix) {this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;}return this.lastRegularHeight;} }, { key: "fixedHeaderHeight", get: function get() {var theme = this.theme;return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;} }]);return SidePageHeader;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageHeader', _class2.contextType = _SidePageContext.SidePageContext, _temp)) || _class;exports.SidePageHeader = SidePageHeader;
+    };return _this;}var _proto = SidePageHeader.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var isReadyToFix = this.state.isReadyToFix;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { ref: this.wrapperRef, className: _SidePage.styles.headerWrapper() }, isReadyToFix ? /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { ref: this.stickyRef, side: "top" }, this.renderHeader) : this.renderHeader()));};(0, _createClass2.default)(SidePageHeader, [{ key: "regularHeight", get: function get() {var isReadyToFix = this.state.isReadyToFix;if (!this.wrapper) {return 0;}if (!isReadyToFix) {this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;}return this.lastRegularHeight;} }, { key: "fixedHeaderHeight", get: function get() {var theme = this.theme;return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;} }]);return SidePageHeader;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageHeader', _class2.contextType = _SidePageContext.SidePageContext, _temp)) || _class;exports.SidePageHeader = SidePageHeader;

package/cjs/components/SidePage/SidePageHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SidePageHeader.tsx"],"names":["SidePageHeader","rootNode","context","state","isReadyToFix","focusedByTab","theme","wrapper","lastRegularHeight","setRootNode","componentDidMount","window","addEventListener","update","setHasHeader","componentWillUnmount","removeEventListener","updateReadyToFix","renderHeader","fixed","styles","header","headerFixed","renderClose","title","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","requestClose","close","closeFocus","handleFocus","handleBlur","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","requestAnimationFrame","keyListener","isTabPressed","render","renderMain","headerWrapper","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","React","Component","__KONTUR_REACT_UI__","contextType","SidePageContext"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { isFunction } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends CommonProps {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n  focusedByTab: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  public state = {\n    isReadyToFix: false,\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private wrapper: HTMLElement | null = null;\n  private lastRegularHeight = 0;\n  private setRootNode!: TSetRootNode;\n\n  public get regularHeight(): number {\n    const { isReadyToFix } = this.state;\n    if (!this.wrapper) {\n      return 0;\n    }\n    if (!isReadyToFix) {\n      this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\n    }\n    return this.lastRegularHeight;\n  }\n\n  public get fixedHeaderHeight(): number {\n    const { theme } = this;\n    return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n  }\n\n  public componentDidMount = () => {\n    window.addEventListener('scroll', this.update, true);\n    this.context.setHasHeader?.();\n  };\n\n  public componentWillUnmount = () => {\n    window.removeEventListener('scroll', this.update, true);\n    this.context.setHasHeader?.(false);\n  };\n\n  public update = () => {\n    this.updateReadyToFix();\n  };\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { isReadyToFix } = this.state;\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div ref={this.wrapperRef} className={styles.headerWrapper()}>\n          {isReadyToFix ? <Sticky side=\"top\">{this.renderHeader}</Sticky> : this.renderHeader()}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    return (\n      <div className={cx(styles.header(this.theme), { [styles.headerFixed(this.theme)]: fixed })}>\n        {this.renderClose(fixed)}\n        <div className={cx(styles.title(this.theme), { [styles.titleFixed()]: fixed })}>\n          {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n        </div>\n      </div>\n    );\n  };\n\n  private renderClose = (fixed: boolean) => {\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n\n    return (\n      <div className={cx(styles.wrapperClose(this.theme), fixed && styles.fixed(this.theme))}>\n        <Sticky side=\"top\" offset={stickyOffset}>\n          <SidePageContext.Consumer>\n            {({ requestClose }) => (\n              <button\n                className={cx(styles.close(this.theme), {\n                  [styles.closeFocus(this.theme)]: this.state.focusedByTab,\n                })}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                onClick={requestClose}\n                data-tid=\"SidePage__close\"\n                tabIndex={0}\n              >\n                <CrossIcon />\n              </button>\n            )}\n          </SidePageContext.Consumer>\n        </Sticky>\n      </div>\n    );\n  };\n\n  private updateReadyToFix = () => {\n    if (this.wrapper) {\n      const wrapperScrolledUp = this.wrapper.getBoundingClientRect().top;\n      const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n      this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { ...state, isReadyToFix } : state));\n    }\n  };\n\n  private wrapperRef = (el: HTMLElement | null) => {\n    this.wrapper = el;\n  };\n\n  private handleFocus = () => {\n    requestAnimationFrame(() => {\n      if (keyListener.isTabPressed) {\n        this.setState({ focusedByTab: true });\n      }\n    });\n  };\n\n  private handleBlur = () => {\n    this.setState({ focusedByTab: false });\n  };\n}\n"]}
+{"version":3,"sources":["SidePageHeader.tsx"],"names":["SidePageHeader","rootNode","context","state","isReadyToFix","focusedByTab","theme","wrapper","sticky","lastRegularHeight","setRootNode","componentDidMount","window","addEventListener","update","setHasHeader","headerRef","componentWillUnmount","removeEventListener","reflow","updateReadyToFix","renderHeader","fixed","styles","header","headerFixed","renderClose","title","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","closeIcon","requestClose","close","closeFocus","handleFocus","handleBlur","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","stickyRef","requestAnimationFrame","keyListener","isTabPressed","render","renderMain","headerWrapper","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","React","Component","__KONTUR_REACT_UI__","contextType","SidePageContext"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { isFunction } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends CommonProps {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n  focusedByTab: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  public state = {\n    isReadyToFix: false,\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private wrapper: HTMLElement | null = null;\n  private sticky: Sticky | null = null;\n  private lastRegularHeight = 0;\n  private setRootNode!: TSetRootNode;\n\n  public get regularHeight(): number {\n    const { isReadyToFix } = this.state;\n    if (!this.wrapper) {\n      return 0;\n    }\n    if (!isReadyToFix) {\n      this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\n    }\n    return this.lastRegularHeight;\n  }\n\n  public get fixedHeaderHeight(): number {\n    const { theme } = this;\n    return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n  }\n\n  public componentDidMount = () => {\n    window.addEventListener('scroll', this.update, true);\n    this.context.setHasHeader?.();\n    this.context.headerRef(this);\n  };\n\n  public componentWillUnmount = () => {\n    window.removeEventListener('scroll', this.update, true);\n    this.context.setHasHeader?.(false);\n    this.context.headerRef(null);\n  };\n\n  public update = () => {\n    this.sticky?.reflow();\n    this.updateReadyToFix();\n  };\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { isReadyToFix } = this.state;\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div ref={this.wrapperRef} className={styles.headerWrapper()}>\n          {isReadyToFix ? (\n            <Sticky ref={this.stickyRef} side=\"top\">\n              {this.renderHeader}\n            </Sticky>\n          ) : (\n            this.renderHeader()\n          )}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    return (\n      <div className={cx(styles.header(this.theme), { [styles.headerFixed(this.theme)]: fixed })}>\n        {this.renderClose(fixed)}\n        <div className={cx(styles.title(this.theme), { [styles.titleFixed()]: fixed })}>\n          {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n        </div>\n      </div>\n    );\n  };\n\n  private renderClose = (fixed: boolean) => {\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n\n    return (\n      <div className={cx(styles.wrapperClose(this.theme), fixed && styles.fixed(this.theme))}>\n        <Sticky side=\"top\" offset={stickyOffset}>\n          {this.closeIcon}\n        </Sticky>\n      </div>\n    );\n  };\n\n  private closeIcon = () => (\n    <SidePageContext.Consumer>\n      {({ requestClose }) => (\n        <button\n          className={cx(styles.close(this.theme), {\n            [styles.closeFocus(this.theme)]: this.state.focusedByTab,\n          })}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          onClick={requestClose}\n          data-tid=\"SidePage__close\"\n          tabIndex={0}\n        >\n          <CrossIcon />\n        </button>\n      )}\n    </SidePageContext.Consumer>\n  );\n\n  private updateReadyToFix = () => {\n    if (this.wrapper) {\n      const wrapperScrolledUp = this.wrapper.getBoundingClientRect().top;\n      const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n      this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { ...state, isReadyToFix } : state));\n    }\n  };\n\n  private wrapperRef = (el: HTMLElement | null) => {\n    this.wrapper = el;\n  };\n\n  private stickyRef = (el: Sticky | null) => {\n    this.sticky = el;\n  };\n\n  private handleFocus = () => {\n    requestAnimationFrame(() => {\n      if (keyListener.isTabPressed) {\n        this.setState({ focusedByTab: true });\n      }\n    });\n  };\n\n  private handleBlur = () => {\n    this.setState({ focusedByTab: false });\n  };\n}\n"]}

package/cjs/components/Sticky/Sticky.d.ts

@@ -50,5 +50,10 @@ export declare class Sticky extends React.Component<StickyProps, StickyState> {
     render(): JSX.Element;
     private refWrapper;
     private refInner;
-    private reflow;
+    /**
+     * Пересчитать габариты и позицию залипшего элемента
+     *
+     * @public
+     */
+    reflow: () => void;
 }

package/cjs/components/Sticky/Sticky.js

@@ -139,6 +139,11 @@ Sticky = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
 
     refInner = function (ref) {return _this.inner = ref;};_this.
 
+
+
+
+
+
     reflow = function () {var _document =
       document,documentElement = _document.documentElement;
 

package/cjs/components/Sticky/Sticky.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Sticky.tsx"],"names":["MAX_REFLOW_RETRIES","Sticky","rootNode","state","fixed","deltaHeight","stopped","relativeTop","wrapper","inner","layoutSubscription","remove","reflowCounter","setRootNode","refWrapper","ref","refInner","reflow","document","documentElement","Error","windowHeight","window","innerHeight","clientHeight","getBoundingClientRect","top","bottom","left","width","height","props","offset","getStop","side","prevFixed","prevHeight","setState","stop","stopRect","outerHeight","componentDidMount","LayoutEvents","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","styles","container","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","oneOfType","node","func","number","oneOf","isRequired","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunction } from '../../lib/utils';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends CommonProps {\n  side: 'top' | 'bottom';\n  /**\n   * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии\n   * @default 0\n   */\n  offset: number;\n  getStop?: () => Nullable<HTMLElement>;\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n  fixed: boolean;\n  deltaHeight: number;\n  height?: number;\n  width?: number;\n  left?: number;\n  stopped: boolean;\n  relativeTop: number;\n}\n\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n  public static __KONTUR_REACT_UI__ = 'Sticky';\n\n  public static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n    /**\n     * Функция, которая возвращает DOM-элемент, который нельзя пересекать.\n     */\n    getStop: PropTypes.func,\n\n    /**\n     * Отступ от границы в пикселях\n     */\n    offset: PropTypes.number,\n\n    side: PropTypes.oneOf(['top', 'bottom']).isRequired,\n  };\n\n  public static defaultProps = { offset: 0 };\n\n  public state: StickyState = {\n    fixed: false,\n    deltaHeight: 0,\n    stopped: false,\n    relativeTop: 0,\n  };\n\n  private wrapper: Nullable<HTMLElement>;\n  private inner: Nullable<HTMLElement>;\n  private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n  private reflowCounter = 0;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.reflow();\n\n    this.layoutSubscription = LayoutEvents.addListener(this.reflow);\n  }\n\n  public componentWillUnmount() {\n    if (this.layoutSubscription.remove) {\n      this.layoutSubscription.remove();\n    }\n  }\n\n  public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n    if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n      if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n        LayoutEvents.emit();\n        this.reflowCounter += 1;\n        return;\n      }\n    }\n    this.reflowCounter = 0;\n  }\n\n  public render() {\n    let { children } = this.props;\n    const { side, offset } = this.props;\n    const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n    const innerStyle: React.CSSProperties = {};\n\n    if (fixed) {\n      if (stopped) {\n        innerStyle.top = relativeTop;\n        innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n      } else {\n        innerStyle.width = width;\n        innerStyle[side] = offset;\n        innerStyle.left = left;\n      }\n    }\n\n    if (isFunction(children)) {\n      children = children(fixed);\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div ref={this.refWrapper} className={styles.wrapper()}>\n          <ZIndex\n            priority=\"Sticky\"\n            applyZIndex={fixed}\n            className={cx(styles.inner(), {\n              [styles.fixed()]: fixed && !stopped,\n              [styles.stopped()]: stopped,\n            })}\n            style={innerStyle}\n            wrapperRef={this.refInner}\n          >\n            <div className={styles.container()}>{children}</div>\n          </ZIndex>\n          {fixed && !stopped ? <div style={{ width, height }} /> : null}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\n\n  private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\n\n  private reflow = () => {\n    const { documentElement } = document;\n\n    if (!documentElement) {\n      throw Error('There is no \"documentElement\" in document');\n    }\n\n    const windowHeight = window.innerHeight || documentElement.clientHeight;\n    if (!this.wrapper || !this.inner) {\n      return;\n    }\n    const { top, bottom, left } = this.wrapper.getBoundingClientRect();\n    const { width, height } = this.inner.getBoundingClientRect();\n    const { offset, getStop, side } = this.props;\n    const { fixed: prevFixed, height: prevHeight = height } = this.state;\n    const fixed = side === 'top' ? top < offset : bottom > windowHeight - offset;\n\n    this.setState({ fixed, left });\n\n    if (fixed && !prevFixed) {\n      this.setState({ width, height });\n    }\n\n    if (fixed) {\n      const stop = getStop && getStop();\n      if (stop) {\n        const deltaHeight = prevHeight - height;\n        const stopRect = stop.getBoundingClientRect();\n        const outerHeight = height + offset;\n        let stopped = false;\n        let relativeTop = 0;\n\n        if (side === 'top') {\n          stopped = stopRect.top - outerHeight < 0;\n          relativeTop = stopRect.top - prevHeight - top;\n        } else {\n          stopped = stopRect.bottom + outerHeight > windowHeight;\n          relativeTop = stopRect.bottom - top;\n        }\n\n        this.setState({ relativeTop, deltaHeight, stopped });\n      }\n    }\n  };\n}\n"]}
+{"version":3,"sources":["Sticky.tsx"],"names":["MAX_REFLOW_RETRIES","Sticky","rootNode","state","fixed","deltaHeight","stopped","relativeTop","wrapper","inner","layoutSubscription","remove","reflowCounter","setRootNode","refWrapper","ref","refInner","reflow","document","documentElement","Error","windowHeight","window","innerHeight","clientHeight","getBoundingClientRect","top","bottom","left","width","height","props","offset","getStop","side","prevFixed","prevHeight","setState","stop","stopRect","outerHeight","componentDidMount","LayoutEvents","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","styles","container","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","oneOfType","node","func","number","oneOf","isRequired","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunction } from '../../lib/utils';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends CommonProps {\n  side: 'top' | 'bottom';\n  /**\n   * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии\n   * @default 0\n   */\n  offset: number;\n  getStop?: () => Nullable<HTMLElement>;\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n  fixed: boolean;\n  deltaHeight: number;\n  height?: number;\n  width?: number;\n  left?: number;\n  stopped: boolean;\n  relativeTop: number;\n}\n\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n  public static __KONTUR_REACT_UI__ = 'Sticky';\n\n  public static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n    /**\n     * Функция, которая возвращает DOM-элемент, который нельзя пересекать.\n     */\n    getStop: PropTypes.func,\n\n    /**\n     * Отступ от границы в пикселях\n     */\n    offset: PropTypes.number,\n\n    side: PropTypes.oneOf(['top', 'bottom']).isRequired,\n  };\n\n  public static defaultProps = { offset: 0 };\n\n  public state: StickyState = {\n    fixed: false,\n    deltaHeight: 0,\n    stopped: false,\n    relativeTop: 0,\n  };\n\n  private wrapper: Nullable<HTMLElement>;\n  private inner: Nullable<HTMLElement>;\n  private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n  private reflowCounter = 0;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.reflow();\n\n    this.layoutSubscription = LayoutEvents.addListener(this.reflow);\n  }\n\n  public componentWillUnmount() {\n    if (this.layoutSubscription.remove) {\n      this.layoutSubscription.remove();\n    }\n  }\n\n  public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n    if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n      if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n        LayoutEvents.emit();\n        this.reflowCounter += 1;\n        return;\n      }\n    }\n    this.reflowCounter = 0;\n  }\n\n  public render() {\n    let { children } = this.props;\n    const { side, offset } = this.props;\n    const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n    const innerStyle: React.CSSProperties = {};\n\n    if (fixed) {\n      if (stopped) {\n        innerStyle.top = relativeTop;\n        innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n      } else {\n        innerStyle.width = width;\n        innerStyle[side] = offset;\n        innerStyle.left = left;\n      }\n    }\n\n    if (isFunction(children)) {\n      children = children(fixed);\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div ref={this.refWrapper} className={styles.wrapper()}>\n          <ZIndex\n            priority=\"Sticky\"\n            applyZIndex={fixed}\n            className={cx(styles.inner(), {\n              [styles.fixed()]: fixed && !stopped,\n              [styles.stopped()]: stopped,\n            })}\n            style={innerStyle}\n            wrapperRef={this.refInner}\n          >\n            <div className={styles.container()}>{children}</div>\n          </ZIndex>\n          {fixed && !stopped ? <div style={{ width, height }} /> : null}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\n\n  private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\n\n  /**\n   * Пересчитать габариты и позицию залипшего элемента\n   *\n   * @public\n   */\n  public reflow = () => {\n    const { documentElement } = document;\n\n    if (!documentElement) {\n      throw Error('There is no \"documentElement\" in document');\n    }\n\n    const windowHeight = window.innerHeight || documentElement.clientHeight;\n    if (!this.wrapper || !this.inner) {\n      return;\n    }\n    const { top, bottom, left } = this.wrapper.getBoundingClientRect();\n    const { width, height } = this.inner.getBoundingClientRect();\n    const { offset, getStop, side } = this.props;\n    const { fixed: prevFixed, height: prevHeight = height } = this.state;\n    const fixed = side === 'top' ? top < offset : bottom > windowHeight - offset;\n\n    this.setState({ fixed, left });\n\n    if (fixed && !prevFixed) {\n      this.setState({ width, height });\n    }\n\n    if (fixed) {\n      const stop = getStop && getStop();\n      if (stop) {\n        const deltaHeight = prevHeight - height;\n        const stopRect = stop.getBoundingClientRect();\n        const outerHeight = height + offset;\n        let stopped = false;\n        let relativeTop = 0;\n\n        if (side === 'top') {\n          stopped = stopRect.top - outerHeight < 0;\n          relativeTop = stopRect.top - prevHeight - top;\n        } else {\n          stopped = stopRect.bottom + outerHeight > windowHeight;\n          relativeTop = stopRect.bottom - top;\n        }\n\n        this.setState({ relativeTop, deltaHeight, stopped });\n      }\n    }\n  };\n}\n"]}

package/cjs/components/Tooltip/Tooltip.md

@@ -270,7 +270,7 @@ class AnchorTooltipExample extends React.Component {
     return (
       <>
         {this.state.anchor ? (
-          <Tooltip anchorElement={this.state.anchor} render={() => 'Hello React'} trigger="hover" />
+          <Tooltip anchorElement={this.state.anchor} render={() => 'Hello React'} trigger="opened" />
         ) : null}
         <div style={containerStyle}>
           {this.state.blocks.map(({ top, left }, i) => (

package/cjs/internal/DropdownContainer/DropdownContainer.d.ts

@@ -13,6 +13,7 @@ export interface DropdownContainerProps {
     disablePortal?: boolean;
     offsetY?: number;
     offsetX?: number;
+    hasFixedWidth?: boolean;
 }
 export interface DropdownContainerState {
     position: Nullable<DropdownContainerPosition>;

package/cjs/internal/DropdownContainer/DropdownContainer.js

@@ -3,7 +3,12 @@
 var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
 var _RenderContainer = require("../RenderContainer");
 var _ZIndex = require("../ZIndex");
-var _createPropsGetter = require("../../lib/createPropsGetter");var
+var _createPropsGetter = require("../../lib/createPropsGetter");
+
+var _Emotion = require("../../lib/theming/Emotion");
+var _client = require("../../lib/client");
+
+var _DropdownContainer = require("./DropdownContainer.styles");var
 
 
 
@@ -86,6 +91,14 @@ DropdownContainer = /*#__PURE__*/function (_React$PureComponent) {(0, _inheritsL
 
 
 
+
+
+
+
+
+
+
+
 
 
 
@@ -194,4 +207,4 @@ DropdownContainer = /*#__PURE__*/function (_React$PureComponent) {(0, _inheritsL
         left: offsetX,
         right: null };
 
-    };return _this;}var _proto = DropdownContainer.prototype;_proto.componentDidMount = function componentDidMount() {this.position();this.layoutSub = LayoutEvents.addListener(this.position);var _document2 = document,body = _document2.body,docEl = _document2.documentElement;var htmlPosition = getComputedStyle(docEl).position;var bodyPosition = getComputedStyle(body).position;var hasLimitedHeightRoot = body.scrollHeight > body.clientHeight;var hasStaticRoot = htmlPosition === 'static' && bodyPosition === 'static';this.setState({ isDocumentElementRoot: hasLimitedHeightRoot || hasStaticRoot });};_proto.componentWillUnmount = function componentWillUnmount() {if (this.layoutSub) {this.layoutSub.remove();}};_proto.render = function render() {var style = { position: 'absolute', top: '0' };if (this.state.position) {var _this$state$position = this.state.position,top = _this$state$position.top,bottom = _this$state$position.bottom,left = _this$state$position.left,right = _this$state$position.right;style = (0, _extends2.default)({}, style, { top: top !== null ? top : undefined, bottom: bottom !== null ? bottom : undefined, left: left !== null ? left : undefined, right: right !== null ? right : undefined, minWidth: this.state.minWidth });}var content = /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'DropdownContainer', wrapperRef: this.ZIndexRef, style: style }, this.props.children);return this.props.disablePortal ? content : /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, content);};return DropdownContainer;}(_react.default.PureComponent);exports.DropdownContainer = DropdownContainer;DropdownContainer.__KONTUR_REACT_UI__ = 'DropdownContainer';DropdownContainer.defaultProps = { align: 'left', disablePortal: false, offsetX: 0, offsetY: -1 };
+    };return _this;}var _proto = DropdownContainer.prototype;_proto.componentDidMount = function componentDidMount() {this.position();this.layoutSub = LayoutEvents.addListener(this.position);var _document2 = document,body = _document2.body,docEl = _document2.documentElement;var htmlPosition = getComputedStyle(docEl).position;var bodyPosition = getComputedStyle(body).position;var hasLimitedHeightRoot = body.scrollHeight > body.clientHeight;var hasStaticRoot = htmlPosition === 'static' && bodyPosition === 'static';this.setState({ isDocumentElementRoot: hasLimitedHeightRoot || hasStaticRoot });};_proto.componentWillUnmount = function componentWillUnmount() {if (this.layoutSub) {this.layoutSub.remove();}};_proto.render = function render() {var _cx;var style = { position: 'absolute', top: '0' };if (this.state.position) {var _this$state$position = this.state.position,top = _this$state$position.top,bottom = _this$state$position.bottom,left = _this$state$position.left,right = _this$state$position.right;style = (0, _extends2.default)({}, style, { top: top !== null ? top : undefined, bottom: bottom !== null ? bottom : undefined, left: left !== null ? left : undefined, right: right !== null ? right : undefined, minWidth: this.state.minWidth, maxWidth: this.props.hasFixedWidth ? this.state.minWidth : undefined });}var content = /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'DropdownContainer', wrapperRef: this.ZIndexRef, style: style, className: (0, _Emotion.cx)((_cx = {}, _cx[_DropdownContainer.styles.alignRight()] = this.props.align === 'right' && !_client.isIE11, _cx)) }, this.props.children);return this.props.disablePortal ? content : /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, content);};return DropdownContainer;}(_react.default.PureComponent);exports.DropdownContainer = DropdownContainer;DropdownContainer.__KONTUR_REACT_UI__ = 'DropdownContainer';DropdownContainer.defaultProps = { align: 'left', disablePortal: false, offsetX: 0, offsetY: -1 };

package/cjs/internal/DropdownContainer/DropdownContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DropdownContainer.tsx"],"names":["DropdownContainer","state","position","minWidth","isDocumentElementRoot","getProps","defaultProps","dom","layoutSub","ZIndexRef","element","isElement","node","Element","target","props","getParent","targetRect","getBoundingClientRect","document","body","docEl","documentElement","Error","scrollX","window","pageXOffset","scrollLeft","scrollY","pageYOffset","scrollTop","left","right","align","docWidth","offsetWidth","offsetX","offsetY","bottom","top","distanceToBottom","clientHeight","dropdownHeight","getHeight","scrollHeight","setState","getMinWidth","disablePortal","convertToRelativePosition","child","children","item","height","width","targetHeight","componentDidMount","LayoutEvents","addListener","htmlPosition","getComputedStyle","bodyPosition","hasLimitedHeightRoot","hasStaticRoot","componentWillUnmount","remove","render","style","undefined","content","React","PureComponent","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { RenderContainer } from '../RenderContainer';\nimport { ZIndex } from '../ZIndex';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { Nullable } from '../../typings/utility-types';\n\nexport interface DropdownContainerPosition {\n  top: Nullable<number>;\n  bottom: Nullable<number>;\n  left: Nullable<number>;\n  right: Nullable<number>;\n}\n\nexport interface DropdownContainerProps {\n  align?: 'left' | 'right';\n  getParent: () => Nullable<HTMLElement>;\n  children?: React.ReactNode;\n  disablePortal?: boolean;\n  offsetY?: number;\n  offsetX?: number;\n}\n\nexport interface DropdownContainerState {\n  position: Nullable<DropdownContainerPosition>;\n  minWidth: number;\n  isDocumentElementRoot?: boolean;\n}\n\nexport class DropdownContainer extends React.PureComponent<DropdownContainerProps, DropdownContainerState> {\n  public static __KONTUR_REACT_UI__ = 'DropdownContainer';\n\n  public static defaultProps = {\n    align: 'left',\n    disablePortal: false,\n    offsetX: 0,\n    offsetY: -1,\n  };\n\n  public state: DropdownContainerState = {\n    position: null,\n    minWidth: 0,\n    isDocumentElementRoot: true,\n  };\n\n  private getProps = createPropsGetter(DropdownContainer.defaultProps);\n\n  private dom: Nullable<HTMLDivElement>;\n  private layoutSub: Nullable<ReturnType<typeof LayoutEvents.addListener>>;\n\n  public componentDidMount() {\n    this.position();\n    this.layoutSub = LayoutEvents.addListener(this.position);\n\n    const { body, documentElement: docEl } = document;\n    const htmlPosition = getComputedStyle(docEl).position;\n    const bodyPosition = getComputedStyle(body).position;\n\n    const hasLimitedHeightRoot = body.scrollHeight > body.clientHeight;\n    const hasStaticRoot = htmlPosition === 'static' && bodyPosition === 'static';\n\n    this.setState({ isDocumentElementRoot: hasLimitedHeightRoot || hasStaticRoot });\n  }\n\n  public componentWillUnmount() {\n    if (this.layoutSub) {\n      this.layoutSub.remove();\n    }\n  }\n\n  public render() {\n    let style: React.CSSProperties = {\n      position: 'absolute',\n      top: '0',\n    };\n    if (this.state.position) {\n      const { top, bottom, left, right } = this.state.position;\n      style = {\n        ...style,\n        top: top !== null ? top : undefined,\n        bottom: bottom !== null ? bottom : undefined,\n        left: left !== null ? left : undefined,\n        right: right !== null ? right : undefined,\n        minWidth: this.state.minWidth,\n      };\n    }\n\n    const content = (\n      <ZIndex priority={'DropdownContainer'} wrapperRef={this.ZIndexRef} style={style}>\n        {this.props.children}\n      </ZIndex>\n    );\n\n    return this.props.disablePortal ? content : <RenderContainer>{content}</RenderContainer>;\n  }\n\n  private ZIndexRef = (element: Nullable<HTMLDivElement>) => {\n    this.dom = element;\n  };\n\n  private isElement = (node: Nullable<Element>): node is Element => {\n    return node instanceof Element;\n  };\n\n  public position = () => {\n    const target = this.props.getParent();\n    const dom = this.dom;\n\n    if (target && this.isElement(target) && dom) {\n      const targetRect = target.getBoundingClientRect();\n      const { body, documentElement: docEl } = document;\n\n      if (!docEl) {\n        throw Error('There is no \"documentElement\" in \"document\"');\n      }\n\n      const scrollX = window.pageXOffset || docEl.scrollLeft || 0;\n      const scrollY = window.pageYOffset || docEl.scrollTop || 0;\n\n      let left = null;\n      let right = null;\n\n      if (this.props.align === 'right') {\n        const docWidth = docEl.offsetWidth || 0;\n        right = docWidth - (targetRect.right + scrollX) + this.getProps().offsetX;\n      } else {\n        left = targetRect.left + scrollX + this.getProps().offsetX;\n      }\n\n      const { offsetY = 0 } = this.props;\n      let bottom = null;\n      let top: number | null = targetRect.bottom + scrollY + offsetY;\n\n      const distanceToBottom = docEl.clientHeight - targetRect.bottom;\n      const dropdownHeight = this.getHeight();\n\n      if (distanceToBottom < dropdownHeight && targetRect.top > dropdownHeight) {\n        const clientHeight = this.state.isDocumentElementRoot ? docEl.clientHeight : body.scrollHeight;\n\n        top = null;\n        bottom = clientHeight + offsetY - scrollY - targetRect.top;\n      }\n\n      const position = {\n        top,\n        left,\n        right,\n        bottom,\n      };\n\n      this.setState({\n        minWidth: this.getMinWidth(),\n        position: this.props.disablePortal ? this.convertToRelativePosition(position) : position,\n      });\n    }\n  };\n\n  private getHeight = () => {\n    if (!this.isElement(this.dom)) {\n      return 0;\n    }\n    const child = this.dom.children.item(0);\n    if (!child) {\n      return 0;\n    }\n    return child.getBoundingClientRect().height;\n  };\n\n  private getMinWidth = () => {\n    const target = this.props.getParent();\n    if (!target || !this.isElement(target)) {\n      return 0;\n    }\n    return target.getBoundingClientRect().width;\n  };\n\n  private convertToRelativePosition = (position: DropdownContainerPosition): DropdownContainerPosition => {\n    const target = this.props.getParent();\n    const { offsetX = 0, offsetY = 0 } = this.props;\n    const { top, bottom, left, right } = position;\n    if (target && this.isElement(target)) {\n      const targetHeight = target.getBoundingClientRect().height;\n      return {\n        top: top !== null ? targetHeight + offsetY : null,\n        bottom: bottom !== null ? targetHeight + offsetY : null,\n        left: left !== null ? offsetX : null,\n        right: right !== null ? offsetX : null,\n      };\n    }\n    return {\n      top: offsetY,\n      bottom: null,\n      left: offsetX,\n      right: null,\n    };\n  };\n}\n"]}
+{"version":3,"sources":["DropdownContainer.tsx"],"names":["DropdownContainer","state","position","minWidth","isDocumentElementRoot","getProps","defaultProps","dom","layoutSub","ZIndexRef","element","isElement","node","Element","target","props","getParent","targetRect","getBoundingClientRect","document","body","docEl","documentElement","Error","scrollX","window","pageXOffset","scrollLeft","scrollY","pageYOffset","scrollTop","left","right","align","docWidth","offsetWidth","offsetX","offsetY","bottom","top","distanceToBottom","clientHeight","dropdownHeight","getHeight","scrollHeight","setState","getMinWidth","disablePortal","convertToRelativePosition","child","children","item","height","width","targetHeight","componentDidMount","LayoutEvents","addListener","htmlPosition","getComputedStyle","bodyPosition","hasLimitedHeightRoot","hasStaticRoot","componentWillUnmount","remove","render","style","undefined","maxWidth","hasFixedWidth","content","styles","alignRight","isIE11","React","PureComponent","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { RenderContainer } from '../RenderContainer';\nimport { ZIndex } from '../ZIndex';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { Nullable } from '../../typings/utility-types';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isIE11 } from '../../lib/client';\n\nimport { styles } from './DropdownContainer.styles';\n\nexport interface DropdownContainerPosition {\n  top: Nullable<number>;\n  bottom: Nullable<number>;\n  left: Nullable<number>;\n  right: Nullable<number>;\n}\n\nexport interface DropdownContainerProps {\n  align?: 'left' | 'right';\n  getParent: () => Nullable<HTMLElement>;\n  children?: React.ReactNode;\n  disablePortal?: boolean;\n  offsetY?: number;\n  offsetX?: number;\n  hasFixedWidth?: boolean;\n}\n\nexport interface DropdownContainerState {\n  position: Nullable<DropdownContainerPosition>;\n  minWidth: number;\n  isDocumentElementRoot?: boolean;\n}\n\nexport class DropdownContainer extends React.PureComponent<DropdownContainerProps, DropdownContainerState> {\n  public static __KONTUR_REACT_UI__ = 'DropdownContainer';\n\n  public static defaultProps = {\n    align: 'left',\n    disablePortal: false,\n    offsetX: 0,\n    offsetY: -1,\n  };\n\n  public state: DropdownContainerState = {\n    position: null,\n    minWidth: 0,\n    isDocumentElementRoot: true,\n  };\n\n  private getProps = createPropsGetter(DropdownContainer.defaultProps);\n\n  private dom: Nullable<HTMLDivElement>;\n  private layoutSub: Nullable<ReturnType<typeof LayoutEvents.addListener>>;\n\n  public componentDidMount() {\n    this.position();\n    this.layoutSub = LayoutEvents.addListener(this.position);\n\n    const { body, documentElement: docEl } = document;\n    const htmlPosition = getComputedStyle(docEl).position;\n    const bodyPosition = getComputedStyle(body).position;\n\n    const hasLimitedHeightRoot = body.scrollHeight > body.clientHeight;\n    const hasStaticRoot = htmlPosition === 'static' && bodyPosition === 'static';\n\n    this.setState({ isDocumentElementRoot: hasLimitedHeightRoot || hasStaticRoot });\n  }\n\n  public componentWillUnmount() {\n    if (this.layoutSub) {\n      this.layoutSub.remove();\n    }\n  }\n\n  public render() {\n    let style: React.CSSProperties = {\n      position: 'absolute',\n      top: '0',\n    };\n    if (this.state.position) {\n      const { top, bottom, left, right } = this.state.position;\n      style = {\n        ...style,\n        top: top !== null ? top : undefined,\n        bottom: bottom !== null ? bottom : undefined,\n        left: left !== null ? left : undefined,\n        right: right !== null ? right : undefined,\n        minWidth: this.state.minWidth,\n        maxWidth: this.props.hasFixedWidth ? this.state.minWidth : undefined,\n      };\n    }\n\n    const content = (\n      <ZIndex\n        priority={'DropdownContainer'}\n        wrapperRef={this.ZIndexRef}\n        style={style}\n        className={cx({\n          [styles.alignRight()]: this.props.align === 'right' && !isIE11,\n        })}\n      >\n        {this.props.children}\n      </ZIndex>\n    );\n\n    return this.props.disablePortal ? content : <RenderContainer>{content}</RenderContainer>;\n  }\n\n  private ZIndexRef = (element: Nullable<HTMLDivElement>) => {\n    this.dom = element;\n  };\n\n  private isElement = (node: Nullable<Element>): node is Element => {\n    return node instanceof Element;\n  };\n\n  public position = () => {\n    const target = this.props.getParent();\n    const dom = this.dom;\n\n    if (target && this.isElement(target) && dom) {\n      const targetRect = target.getBoundingClientRect();\n      const { body, documentElement: docEl } = document;\n\n      if (!docEl) {\n        throw Error('There is no \"documentElement\" in \"document\"');\n      }\n\n      const scrollX = window.pageXOffset || docEl.scrollLeft || 0;\n      const scrollY = window.pageYOffset || docEl.scrollTop || 0;\n\n      let left = null;\n      let right = null;\n\n      if (this.props.align === 'right') {\n        const docWidth = docEl.offsetWidth || 0;\n        right = docWidth - (targetRect.right + scrollX) + this.getProps().offsetX;\n      } else {\n        left = targetRect.left + scrollX + this.getProps().offsetX;\n      }\n\n      const { offsetY = 0 } = this.props;\n      let bottom = null;\n      let top: number | null = targetRect.bottom + scrollY + offsetY;\n\n      const distanceToBottom = docEl.clientHeight - targetRect.bottom;\n      const dropdownHeight = this.getHeight();\n\n      if (distanceToBottom < dropdownHeight && targetRect.top > dropdownHeight) {\n        const clientHeight = this.state.isDocumentElementRoot ? docEl.clientHeight : body.scrollHeight;\n\n        top = null;\n        bottom = clientHeight + offsetY - scrollY - targetRect.top;\n      }\n\n      const position = {\n        top,\n        left,\n        right,\n        bottom,\n      };\n\n      this.setState({\n        minWidth: this.getMinWidth(),\n        position: this.props.disablePortal ? this.convertToRelativePosition(position) : position,\n      });\n    }\n  };\n\n  private getHeight = () => {\n    if (!this.isElement(this.dom)) {\n      return 0;\n    }\n    const child = this.dom.children.item(0);\n    if (!child) {\n      return 0;\n    }\n    return child.getBoundingClientRect().height;\n  };\n\n  private getMinWidth = () => {\n    const target = this.props.getParent();\n    if (!target || !this.isElement(target)) {\n      return 0;\n    }\n    return target.getBoundingClientRect().width;\n  };\n\n  private convertToRelativePosition = (position: DropdownContainerPosition): DropdownContainerPosition => {\n    const target = this.props.getParent();\n    const { offsetX = 0, offsetY = 0 } = this.props;\n    const { top, bottom, left, right } = position;\n    if (target && this.isElement(target)) {\n      const targetHeight = target.getBoundingClientRect().height;\n      return {\n        top: top !== null ? targetHeight + offsetY : null,\n        bottom: bottom !== null ? targetHeight + offsetY : null,\n        left: left !== null ? offsetX : null,\n        right: right !== null ? offsetX : null,\n      };\n    }\n    return {\n      top: offsetY,\n      bottom: null,\n      left: offsetX,\n      right: null,\n    };\n  };\n}\n"]}

package/cjs/internal/DropdownContainer/DropdownContainer.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: {
+    alignRight(): string;
+};

package/cjs/internal/DropdownContainer/DropdownContainer.styles.js

@@ -0,0 +1,9 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject;
+
+var styles = (0, _Emotion.memoizeStyle)({
+  alignRight: function alignRight() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n      flex-direction: row-reverse;\n    "])));
+
+
+
+  } });exports.styles = styles;

package/cjs/internal/DropdownContainer/DropdownContainer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DropdownContainer.styles.ts"],"names":["styles","alignRight","css"],"mappings":"4QAAA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,UADiC,wBACpB;AACX,eAAOC,YAAP;;;;AAID,GANgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  alignRight() {\n    return css`\n      display: flex;\n      flex-direction: row-reverse;\n    `;\n  },\n});\n"]}

package/cjs/internal/Menu/Menu.d.ts

@@ -6,6 +6,7 @@ export interface MenuProps {
     onItemClick?: () => void;
     width?: number | string;
     preventWindowScroll?: boolean;
+    align?: 'left' | 'right';
 }
 export interface MenuState {
     highlightedIndex: number;
@@ -13,6 +14,7 @@ export interface MenuState {
 export declare class Menu extends React.Component<MenuProps, MenuState> {
     static __KONTUR_REACT_UI__: string;
     static defaultProps: {
+        align: string;
         width: string;
         maxHeight: number;
         hasShadow: boolean;

package/cjs/internal/Menu/Menu.js

@@ -8,6 +8,7 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
+var _client = require("../../lib/client");
 
 var _Menu = require("./Menu.styles");
 var _isActiveElement = require("./isActiveElement");var _class, _class2, _temp;var
@@ -26,6 +27,7 @@ var _isActiveElement = require("./isActiveElement");var _class, _class2, _temp;v
 
 
 
+
 Menu = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Menu, _React$Component);function Menu() {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.
 
 
@@ -36,6 +38,7 @@ Menu = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
 
 
+
     state = {
       highlightedIndex: -1 };_this.
 
@@ -231,7 +234,7 @@ Menu = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
    * @public
    */;_proto.reset = function reset() {this.setState({ highlightedIndex: -1 });} /**
    * @public
-   */;_proto.hasHighlightedItem = function hasHighlightedItem() {return this.state.highlightedIndex !== -1;};_proto.highlightItem = function highlightItem(index) {this.highlight(index);};_proto.renderMain = function renderMain() {var _cx,_this3 = this;var enableIconPadding = _react.default.Children.toArray(this.props.children).some(function (x) {return /*#__PURE__*/_react.default.isValidElement(x) && x.props.icon;});if (this.isEmpty()) {return null;}return /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx = {}, _cx[_Menu.styles.root(this.theme)] = true, _cx[_Menu.styles.shadow(this.theme)] = this.props.hasShadow, _cx)), style: { width: this.props.width, maxHeight: this.props.maxHeight }, ref: this.setRootNode }, /*#__PURE__*/_react.default.createElement(_ScrollContainer.ScrollContainer, { ref: this.refScrollContainer, maxHeight: this.props.maxHeight, preventWindowScroll: this.props.preventWindowScroll }, /*#__PURE__*/_react.default.createElement("div", { className: _Menu.styles.scrollContainer(this.theme) }, _react.default.Children.map(this.props.children, function (child, index) {if (!child) {return child;}if (typeof child === 'string' || typeof child === 'number') {return child;}if (enableIconPadding && ((0, _MenuItem.isMenuItem)(child) || (0, _MenuHeader.isMenuHeader)(child))) {child = /*#__PURE__*/_react.default.cloneElement(child, { _enableIconPadding: true });}if ((0, _isActiveElement.isActiveElement)(child)) {var highlight = _this3.state.highlightedIndex === index;var ref = child.ref;if (highlight && typeof child.ref !== 'string') {ref = _this3.refHighlighted.bind(_this3, child.ref);}return /*#__PURE__*/_react.default.cloneElement(child, { ref: ref, state: highlight ? 'hover' : child.props.state, onClick: _this3.select.bind(_this3, index, false), onMouseEnter: _this3.highlight.bind(_this3, index), onMouseLeave: _this3.unhighlight });}return child;}))));};_proto.refHighlighted = function refHighlighted(originalRef, menuItem) {this.highlighted = menuItem;if (typeof originalRef === 'function') {originalRef(menuItem);}};_proto.select = function select(index, shouldHandleHref, event) {var item = childrenToArray(this.props.children)[index];if ((0, _isActiveElement.isActiveElement)(item)) {if (shouldHandleHref && item.props.href) {if (item.props.target) {window.open(item.props.href, item.props.target);} else {location.href = item.props.href;}}if (item.props.onClick) {item.props.onClick(event);}if (this.props.onItemClick) {this.props.onItemClick();}return true;}return false;};_proto.move = function move(step) {var _this4 = this;if (this.unmounted) {// NOTE workaround, because `ComboBox` call `process.nextTick` in reducer
+   */;_proto.hasHighlightedItem = function hasHighlightedItem() {return this.state.highlightedIndex !== -1;};_proto.highlightItem = function highlightItem(index) {this.highlight(index);};_proto.renderMain = function renderMain() {var _cx,_this3 = this;var enableIconPadding = _react.default.Children.toArray(this.props.children).some(function (x) {return /*#__PURE__*/_react.default.isValidElement(x) && x.props.icon;});if (this.isEmpty()) {return null;}return /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(getAlignRightClass(this.props), (_cx = {}, _cx[_Menu.styles.root(this.theme)] = true, _cx[_Menu.styles.shadow(this.theme)] = this.props.hasShadow, _cx)), style: getStyle(this.props), ref: this.setRootNode }, /*#__PURE__*/_react.default.createElement(_ScrollContainer.ScrollContainer, { ref: this.refScrollContainer, maxHeight: this.props.maxHeight, preventWindowScroll: this.props.preventWindowScroll }, /*#__PURE__*/_react.default.createElement("div", { className: _Menu.styles.scrollContainer(this.theme) }, _react.default.Children.map(this.props.children, function (child, index) {if (!child) {return child;}if (typeof child === 'string' || typeof child === 'number') {return child;}if (enableIconPadding && ((0, _MenuItem.isMenuItem)(child) || (0, _MenuHeader.isMenuHeader)(child))) {child = /*#__PURE__*/_react.default.cloneElement(child, { _enableIconPadding: true });}if ((0, _isActiveElement.isActiveElement)(child)) {var highlight = _this3.state.highlightedIndex === index;var ref = child.ref;if (highlight && typeof child.ref !== 'string') {ref = _this3.refHighlighted.bind(_this3, child.ref);}return /*#__PURE__*/_react.default.cloneElement(child, { ref: ref, state: highlight ? 'hover' : child.props.state, onClick: _this3.select.bind(_this3, index, false), onMouseEnter: _this3.highlight.bind(_this3, index), onMouseLeave: _this3.unhighlight });}return child;}))));};_proto.refHighlighted = function refHighlighted(originalRef, menuItem) {this.highlighted = menuItem;if (typeof originalRef === 'function') {originalRef(menuItem);}};_proto.select = function select(index, shouldHandleHref, event) {var item = childrenToArray(this.props.children)[index];if ((0, _isActiveElement.isActiveElement)(item)) {if (shouldHandleHref && item.props.href) {if (item.props.target) {window.open(item.props.href, item.props.target);} else {location.href = item.props.href;}}if (item.props.onClick) {item.props.onClick(event);}if (this.props.onItemClick) {this.props.onItemClick();}return true;}return false;};_proto.move = function move(step) {var _this4 = this;if (this.unmounted) {// NOTE workaround, because `ComboBox` call `process.nextTick` in reducer
       return;}var children = childrenToArray(this.props.children);var activeElements = children.filter(_isActiveElement.isActiveElement);if (!activeElements.length) {return;
     }
     var index = this.state.highlightedIndex;var _loop = function _loop() {
@@ -265,7 +268,7 @@ Menu = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
   isEmpty = function isEmpty() {var
     children = this.props.children;
     return !children || !childrenToArray(children).filter(isExist).length;
-  };return Menu;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Menu', _class2.defaultProps = { width: 'auto', maxHeight: 300, hasShadow: true, preventWindowScroll: true }, _temp)) || _class;exports.Menu = Menu;
+  };return Menu;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Menu', _class2.defaultProps = { align: 'left', width: 'auto', maxHeight: 300, hasShadow: true, preventWindowScroll: true }, _temp)) || _class;exports.Menu = Menu;
 
 
 function isExist(value) {
@@ -279,4 +282,31 @@ function childrenToArray(children) {
     ret.push(child);
   });
   return ret;
-}
+}
+
+var getStyle = function getStyle(props) {
+  if (props.align === 'right') {
+    return {
+      maxWidth: props.width,
+      minWidth: props.width,
+      maxHeight: props.maxHeight };
+
+  }
+
+  return {
+    width: props.width,
+    maxHeight: props.maxHeight };
+
+};
+
+var getAlignRightClass = function getAlignRightClass(props) {
+  if (props.align === 'right') {var _cx2;
+    return (0, _Emotion.cx)((_cx2 = {}, _cx2[
+    _Menu.styles.alignRight()] = !_client.isIE11, _cx2[
+    _Menu.styles.alignRightIE11()] = _client.isIE11, _cx2[
+    _Menu.styles.alignRightIE11FixAutoWidth()] = _client.isIE11 && props.width === 'auto', _cx2));
+
+  }
+
+  return null;
+};

package/cjs/internal/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Menu.tsx"],"names":["Menu","rootNode","state","highlightedIndex","theme","scrollContainer","highlighted","unmounted","setRootNode","refScrollContainer","scrollToSelected","scrollTo","scrollToTop","scrollToBottom","highlight","index","setState","unhighlight","componentWillUnmount","render","renderMain","up","move","down","enter","event","select","reset","hasHighlightedItem","highlightItem","enableIconPadding","React","Children","toArray","props","children","some","x","isValidElement","icon","isEmpty","styles","root","shadow","hasShadow","width","maxHeight","preventWindowScroll","map","child","cloneElement","_enableIconPadding","ref","refHighlighted","bind","onClick","onMouseEnter","onMouseLeave","originalRef","menuItem","shouldHandleHref","item","childrenToArray","href","target","window","open","location","onItemClick","step","activeElements","filter","isActiveElement","length","indexOf","isExist","Component","__KONTUR_REACT_UI__","defaultProps","value","undefined","ret","forEach","push"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ScrollContainer } from '../../components/ScrollContainer';\nimport { isMenuItem, MenuItem, MenuItemProps } from '../../components/MenuItem';\nimport { isMenuHeader } from '../../components/MenuHeader';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Menu.styles';\nimport { isActiveElement } from './isActiveElement';\n\nexport interface MenuProps {\n  children: React.ReactNode;\n  hasShadow?: boolean;\n  maxHeight?: number | string;\n  onItemClick?: () => void;\n  width?: number | string;\n  preventWindowScroll?: boolean;\n}\n\nexport interface MenuState {\n  highlightedIndex: number;\n}\n\n@rootNode\nexport class Menu extends React.Component<MenuProps, MenuState> {\n  public static __KONTUR_REACT_UI__ = 'Menu';\n\n  public static defaultProps = {\n    width: 'auto',\n    maxHeight: 300,\n    hasShadow: true,\n    preventWindowScroll: true,\n  };\n\n  public state = {\n    highlightedIndex: -1,\n  };\n\n  private theme!: Theme;\n  private scrollContainer: Nullable<ScrollContainer>;\n  private highlighted: Nullable<MenuItem>;\n  private unmounted = false;\n  private setRootNode!: TSetRootNode;\n\n  public componentWillUnmount() {\n    this.unmounted = true;\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  /**\n   * @public\n   */\n  public up() {\n    this.move(-1);\n  }\n\n  /**\n   * @public\n   */\n  public down() {\n    this.move(1);\n  }\n\n  /**\n   * @public\n   */\n  public enter(event: React.SyntheticEvent<HTMLElement>) {\n    return this.select(this.state.highlightedIndex, true, event);\n  }\n\n  /**\n   * @public\n   */\n  public reset() {\n    this.setState({ highlightedIndex: -1 });\n  }\n\n  /**\n   * @public\n   */\n  public hasHighlightedItem() {\n    return this.state.highlightedIndex !== -1;\n  }\n\n  public highlightItem(index: number) {\n    this.highlight(index);\n  }\n\n  private renderMain() {\n    const enableIconPadding = React.Children.toArray(this.props.children).some(\n      (x) => React.isValidElement(x) && x.props.icon,\n    );\n\n    if (this.isEmpty()) {\n      return null;\n    }\n\n    return (\n      <div\n        className={cx({\n          [styles.root(this.theme)]: true,\n          [styles.shadow(this.theme)]: this.props.hasShadow,\n        })}\n        style={{ width: this.props.width, maxHeight: this.props.maxHeight }}\n        ref={this.setRootNode}\n      >\n        <ScrollContainer\n          ref={this.refScrollContainer}\n          maxHeight={this.props.maxHeight}\n          preventWindowScroll={this.props.preventWindowScroll}\n        >\n          <div className={styles.scrollContainer(this.theme)}>\n            {React.Children.map(this.props.children, (child, index) => {\n              if (!child) {\n                return child;\n              }\n              if (typeof child === 'string' || typeof child === 'number') {\n                return child;\n              }\n\n              if (enableIconPadding && (isMenuItem(child) || isMenuHeader(child))) {\n                child = React.cloneElement(child, {\n                  _enableIconPadding: true,\n                });\n              }\n              if (isActiveElement(child)) {\n                const highlight = this.state.highlightedIndex === index;\n\n                let ref = child.ref;\n                if (highlight && typeof child.ref !== 'string') {\n                  ref = this.refHighlighted.bind(this, child.ref);\n                }\n\n                return React.cloneElement<MenuItemProps, MenuItem>(child, {\n                  ref,\n                  state: highlight ? 'hover' : child.props.state,\n                  onClick: this.select.bind(this, index, false),\n                  onMouseEnter: this.highlight.bind(this, index),\n                  onMouseLeave: this.unhighlight,\n                });\n              }\n              return child;\n            })}\n          </div>\n        </ScrollContainer>\n      </div>\n    );\n  }\n\n  private refScrollContainer = (scrollContainer: Nullable<ScrollContainer>) => {\n    this.scrollContainer = scrollContainer;\n  };\n\n  private refHighlighted(\n    originalRef: ((menuItem: MenuItem | null) => any) | React.RefObject<MenuItem> | null | undefined,\n    menuItem: MenuItem | null,\n  ) {\n    this.highlighted = menuItem;\n\n    if (typeof originalRef === 'function') {\n      originalRef(menuItem);\n    }\n  }\n\n  private scrollToSelected = () => {\n    if (this.scrollContainer && this.highlighted) {\n      this.scrollContainer.scrollTo(getRootNode(this.highlighted));\n    }\n  };\n\n  private scrollToTop = () => {\n    if (this.scrollContainer) {\n      this.scrollContainer.scrollToTop();\n    }\n  };\n\n  private scrollToBottom = () => {\n    if (this.scrollContainer) {\n      this.scrollContainer.scrollToBottom();\n    }\n  };\n\n  private select(index: number, shouldHandleHref: boolean, event: React.SyntheticEvent<HTMLElement>): boolean {\n    const item = childrenToArray(this.props.children)[index];\n    if (isActiveElement(item)) {\n      if (shouldHandleHref && item.props.href) {\n        if (item.props.target) {\n          window.open(item.props.href, item.props.target);\n        } else {\n          location.href = item.props.href;\n        }\n      }\n      if (item.props.onClick) {\n        item.props.onClick(event);\n      }\n      if (this.props.onItemClick) {\n        this.props.onItemClick();\n      }\n      return true;\n    }\n    return false;\n  }\n\n  private highlight = (index: number) => {\n    this.setState({ highlightedIndex: index });\n  };\n\n  private unhighlight = () => {\n    this.setState({ highlightedIndex: -1 });\n  };\n\n  private move(step: number) {\n    if (this.unmounted) {\n      // NOTE workaround, because `ComboBox` call `process.nextTick` in reducer\n      return;\n    }\n\n    const children = childrenToArray(this.props.children);\n    const activeElements = children.filter(isActiveElement);\n    if (!activeElements.length) {\n      return;\n    }\n    let index = this.state.highlightedIndex;\n    do {\n      index += step;\n      if (index < 0) {\n        index = children.length - 1;\n      } else if (index > children.length) {\n        index = 0;\n      }\n\n      const child = children[index];\n      if (isActiveElement(child)) {\n        this.setState({ highlightedIndex: index }, () => {\n          switch (activeElements.indexOf(child)) {\n            case 0:\n              this.scrollToTop();\n              break;\n            case activeElements.length - 1:\n              this.scrollToBottom();\n              break;\n            default:\n              this.scrollToSelected();\n          }\n        });\n        return;\n      }\n    } while (index !== this.state.highlightedIndex);\n  }\n\n  private isEmpty() {\n    const { children } = this.props;\n    return !children || !childrenToArray(children).filter(isExist).length;\n  }\n}\n\nfunction isExist(value: any): value is any {\n  return value !== null && value !== undefined;\n}\n\nfunction childrenToArray(children: React.ReactNode): React.ReactNode[] {\n  const ret: React.ReactNode[] = [];\n  // Use forEach instead of map to avoid cloning for key unifying.\n  React.Children.forEach(children, (child) => {\n    ret.push(child);\n  });\n  return ret;\n}\n"]}
+{"version":3,"sources":["Menu.tsx"],"names":["Menu","rootNode","state","highlightedIndex","theme","scrollContainer","highlighted","unmounted","setRootNode","refScrollContainer","scrollToSelected","scrollTo","scrollToTop","scrollToBottom","highlight","index","setState","unhighlight","componentWillUnmount","render","renderMain","up","move","down","enter","event","select","reset","hasHighlightedItem","highlightItem","enableIconPadding","React","Children","toArray","props","children","some","x","isValidElement","icon","isEmpty","getAlignRightClass","styles","root","shadow","hasShadow","getStyle","maxHeight","preventWindowScroll","map","child","cloneElement","_enableIconPadding","ref","refHighlighted","bind","onClick","onMouseEnter","onMouseLeave","originalRef","menuItem","shouldHandleHref","item","childrenToArray","href","target","window","open","location","onItemClick","step","activeElements","filter","isActiveElement","length","indexOf","isExist","Component","__KONTUR_REACT_UI__","defaultProps","align","width","value","undefined","ret","forEach","push","maxWidth","minWidth","alignRight","isIE11","alignRightIE11","alignRightIE11FixAutoWidth"],"mappings":"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","sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { ScrollContainer } from '../../components/ScrollContainer';\nimport { isMenuItem, MenuItem, MenuItemProps } from '../../components/MenuItem';\nimport { isMenuHeader } from '../../components/MenuHeader';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isIE11 } from '../../lib/client';\n\nimport { styles } from './Menu.styles';\nimport { isActiveElement } from './isActiveElement';\n\nexport interface MenuProps {\n  children: React.ReactNode;\n  hasShadow?: boolean;\n  maxHeight?: number | string;\n  onItemClick?: () => void;\n  width?: number | string;\n  preventWindowScroll?: boolean;\n  align?: 'left' | 'right';\n}\n\nexport interface MenuState {\n  highlightedIndex: number;\n}\n\n@rootNode\nexport class Menu extends React.Component<MenuProps, MenuState> {\n  public static __KONTUR_REACT_UI__ = 'Menu';\n\n  public static defaultProps = {\n    align: 'left',\n    width: 'auto',\n    maxHeight: 300,\n    hasShadow: true,\n    preventWindowScroll: true,\n  };\n\n  public state = {\n    highlightedIndex: -1,\n  };\n\n  private theme!: Theme;\n  private scrollContainer: Nullable<ScrollContainer>;\n  private highlighted: Nullable<MenuItem>;\n  private unmounted = false;\n  private setRootNode!: TSetRootNode;\n\n  public componentWillUnmount() {\n    this.unmounted = true;\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  /**\n   * @public\n   */\n  public up() {\n    this.move(-1);\n  }\n\n  /**\n   * @public\n   */\n  public down() {\n    this.move(1);\n  }\n\n  /**\n   * @public\n   */\n  public enter(event: React.SyntheticEvent<HTMLElement>) {\n    return this.select(this.state.highlightedIndex, true, event);\n  }\n\n  /**\n   * @public\n   */\n  public reset() {\n    this.setState({ highlightedIndex: -1 });\n  }\n\n  /**\n   * @public\n   */\n  public hasHighlightedItem() {\n    return this.state.highlightedIndex !== -1;\n  }\n\n  public highlightItem(index: number) {\n    this.highlight(index);\n  }\n\n  private renderMain() {\n    const enableIconPadding = React.Children.toArray(this.props.children).some(\n      (x) => React.isValidElement(x) && x.props.icon,\n    );\n\n    if (this.isEmpty()) {\n      return null;\n    }\n\n    return (\n      <div\n        className={cx(getAlignRightClass(this.props), {\n          [styles.root(this.theme)]: true,\n          [styles.shadow(this.theme)]: this.props.hasShadow,\n        })}\n        style={getStyle(this.props)}\n        ref={this.setRootNode}\n      >\n        <ScrollContainer\n          ref={this.refScrollContainer}\n          maxHeight={this.props.maxHeight}\n          preventWindowScroll={this.props.preventWindowScroll}\n        >\n          <div className={styles.scrollContainer(this.theme)}>\n            {React.Children.map(this.props.children, (child, index) => {\n              if (!child) {\n                return child;\n              }\n              if (typeof child === 'string' || typeof child === 'number') {\n                return child;\n              }\n\n              if (enableIconPadding && (isMenuItem(child) || isMenuHeader(child))) {\n                child = React.cloneElement(child, {\n                  _enableIconPadding: true,\n                });\n              }\n              if (isActiveElement(child)) {\n                const highlight = this.state.highlightedIndex === index;\n\n                let ref = child.ref;\n                if (highlight && typeof child.ref !== 'string') {\n                  ref = this.refHighlighted.bind(this, child.ref);\n                }\n\n                return React.cloneElement<MenuItemProps, MenuItem>(child, {\n                  ref,\n                  state: highlight ? 'hover' : child.props.state,\n                  onClick: this.select.bind(this, index, false),\n                  onMouseEnter: this.highlight.bind(this, index),\n                  onMouseLeave: this.unhighlight,\n                });\n              }\n              return child;\n            })}\n          </div>\n        </ScrollContainer>\n      </div>\n    );\n  }\n\n  private refScrollContainer = (scrollContainer: Nullable<ScrollContainer>) => {\n    this.scrollContainer = scrollContainer;\n  };\n\n  private refHighlighted(\n    originalRef: ((menuItem: MenuItem | null) => any) | React.RefObject<MenuItem> | null | undefined,\n    menuItem: MenuItem | null,\n  ) {\n    this.highlighted = menuItem;\n\n    if (typeof originalRef === 'function') {\n      originalRef(menuItem);\n    }\n  }\n\n  private scrollToSelected = () => {\n    if (this.scrollContainer && this.highlighted) {\n      this.scrollContainer.scrollTo(getRootNode(this.highlighted));\n    }\n  };\n\n  private scrollToTop = () => {\n    if (this.scrollContainer) {\n      this.scrollContainer.scrollToTop();\n    }\n  };\n\n  private scrollToBottom = () => {\n    if (this.scrollContainer) {\n      this.scrollContainer.scrollToBottom();\n    }\n  };\n\n  private select(index: number, shouldHandleHref: boolean, event: React.SyntheticEvent<HTMLElement>): boolean {\n    const item = childrenToArray(this.props.children)[index];\n    if (isActiveElement(item)) {\n      if (shouldHandleHref && item.props.href) {\n        if (item.props.target) {\n          window.open(item.props.href, item.props.target);\n        } else {\n          location.href = item.props.href;\n        }\n      }\n      if (item.props.onClick) {\n        item.props.onClick(event);\n      }\n      if (this.props.onItemClick) {\n        this.props.onItemClick();\n      }\n      return true;\n    }\n    return false;\n  }\n\n  private highlight = (index: number) => {\n    this.setState({ highlightedIndex: index });\n  };\n\n  private unhighlight = () => {\n    this.setState({ highlightedIndex: -1 });\n  };\n\n  private move(step: number) {\n    if (this.unmounted) {\n      // NOTE workaround, because `ComboBox` call `process.nextTick` in reducer\n      return;\n    }\n\n    const children = childrenToArray(this.props.children);\n    const activeElements = children.filter(isActiveElement);\n    if (!activeElements.length) {\n      return;\n    }\n    let index = this.state.highlightedIndex;\n    do {\n      index += step;\n      if (index < 0) {\n        index = children.length - 1;\n      } else if (index > children.length) {\n        index = 0;\n      }\n\n      const child = children[index];\n      if (isActiveElement(child)) {\n        this.setState({ highlightedIndex: index }, () => {\n          switch (activeElements.indexOf(child)) {\n            case 0:\n              this.scrollToTop();\n              break;\n            case activeElements.length - 1:\n              this.scrollToBottom();\n              break;\n            default:\n              this.scrollToSelected();\n          }\n        });\n        return;\n      }\n    } while (index !== this.state.highlightedIndex);\n  }\n\n  private isEmpty() {\n    const { children } = this.props;\n    return !children || !childrenToArray(children).filter(isExist).length;\n  }\n}\n\nfunction isExist(value: any): value is any {\n  return value !== null && value !== undefined;\n}\n\nfunction childrenToArray(children: React.ReactNode): React.ReactNode[] {\n  const ret: React.ReactNode[] = [];\n  // Use forEach instead of map to avoid cloning for key unifying.\n  React.Children.forEach(children, (child) => {\n    ret.push(child);\n  });\n  return ret;\n}\n\nconst getStyle = (props: MenuProps): CSSProperties => {\n  if (props.align === 'right') {\n    return {\n      maxWidth: props.width,\n      minWidth: props.width,\n      maxHeight: props.maxHeight,\n    };\n  }\n\n  return {\n    width: props.width,\n    maxHeight: props.maxHeight,\n  };\n};\n\nconst getAlignRightClass = (props: MenuProps) => {\n  if (props.align === 'right') {\n    return cx({\n      [styles.alignRight()]: !isIE11,\n      [styles.alignRightIE11()]: isIE11,\n      [styles.alignRightIE11FixAutoWidth()]: isIE11 && props.width === 'auto',\n    });\n  }\n\n  return null;\n};\n"]}

package/cjs/internal/Menu/Menu.styles.d.ts

@@ -1,6 +1,9 @@
 import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
     root(t: Theme): string;
+    alignRight(): string;
+    alignRightIE11(): string;
+    alignRightIE11FixAutoWidth(): string;
     scrollContainer(t: Theme): string;
     shadow(t: Theme): string;
 };