@skbkontur/react-ui 4.0.4 → 4.1.0

package/cjs/components/SidePage/SidePage.js

@@ -131,8 +131,6 @@ SidePage = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
 
 
 
-
-
     updateLayout = function () {var _this$header, _this$footer;
       (_this$header = _this.header) == null ? void 0 : _this$header.update();
       (_this$footer = _this.footer) == null ? void 0 : _this$footer.update();
@@ -237,18 +235,6 @@ SidePage = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
 
 
 
-
-
-    disablePageScroll = function (e) {
-      var layout = _this.layout;
-      if (!layout) return;
-      var reachedTop = layout.scrollTop <= 0 && e.deltaY < 0;
-      var reachedBottom = layout.scrollTop >= layout.scrollHeight - layout.offsetHeight && e.deltaY > 0;
-
-      if (!_this.props.blockBackground && (reachedTop || reachedBottom)) {
-        e.preventDefault();
-      }
-    };_this.
 
     getSidePageContextProps = function () {
       return {
@@ -368,7 +354,7 @@ SidePage = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
 
     setHasPanel = function (hasPanel) {if (hasPanel === void 0) {hasPanel = false;}
       _this.state.hasPanel !== hasPanel && _this.setState({ hasPanel: hasPanel });
-    };return _this;}var _proto = SidePage.prototype;_proto.componentDidMount = function componentDidMount() {var _this$rootRef$current;window.addEventListener('keydown', this.handleKeyDown);(_this$rootRef$current = this.rootRef.current) == null ? void 0 : _this$rootRef$current.addEventListener('wheel', this.disablePageScroll, { passive: false });this.stackSubscription = _ModalStack.ModalStack.add(this, this.handleStackChange);};_proto.componentWillUnmount = function componentWillUnmount() {var _this$rootRef$current2;window.removeEventListener('keydown', this.handleKeyDown);(_this$rootRef$current2 = this.rootRef.current) == null ? void 0 : _this$rootRef$current2.removeEventListener('wheel', this.disablePageScroll);if (this.stackSubscription != null) {this.stackSubscription.remove();}_ModalStack.ModalStack.remove(this);} /**
+    };return _this;}var _proto = SidePage.prototype;_proto.componentDidMount = function componentDidMount() {window.addEventListener('keydown', this.handleKeyDown);this.stackSubscription = _ModalStack.ModalStack.add(this, this.handleStackChange);};_proto.componentWillUnmount = function componentWillUnmount() {window.removeEventListener('keydown', this.handleKeyDown);if (this.stackSubscription != null) {this.stackSubscription.remove();}_ModalStack.ModalStack.remove(this);} /**
    * Обновляет разметку компонента.
    * @public
    */;_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 _this3 = this;var _this$props = this.props,blockBackground = _this$props.blockBackground,disableAnimations = _this$props.disableAnimations;return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ResponsiveLayout.ResponsiveLayout, null, function (_ref) {var isMobile = _ref.isMobile;return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, blockBackground && _this3.renderShadow(), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, { in: true, classNames: _this3.getTransitionNames(), appear: !disableAnimations, enter: !disableAnimations, exit: false, timeout: { enter: TRANSITION_TIMEOUT, exit: TRANSITION_TIMEOUT }, nodeRef: _this3.rootRef }, _this3.renderContainer(isMobile)), isMobile && /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, null));}))));};_proto.renderContainer = function renderContainer(isMobile) {var _cx, _cx2;var _this$props2 = this.props,width = _this$props2.width,blockBackground = _this$props2.blockBackground,fromLeft = _this$props2.fromLeft,disableFocusLock = _this$props2.disableFocusLock,offset = _this$props2.offset;return /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Sidepage', "data-tid": "SidePage__root", className: (0, _Emotion.cx)((_cx = {}, _cx[_SidePage.styles.root()] = true, _cx[_SidePage.styles.mobileRoot()] = isMobile, _cx)), onScroll: LayoutEvents.emit, createStackingContext: true, style: isMobile ? undefined : { width: width || (blockBackground ? 800 : 500), right: fromLeft ? 'auto' : offset, left: fromLeft ? offset : 'auto' }, wrapperRef: this.rootRef }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, { disabled: disableFocusLock || !blockBackground, autoFocus: false, className: _SidePage.styles.focusLock() }, /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.handleClickOutside, active: true }, /*#__PURE__*/_react.default.createElement("div", { "data-tid": "SidePage__container", className: (0, _Emotion.cx)(_SidePage.styles.wrapper(this.theme), (_cx2 = {}, _cx2[_SidePage.styles.wrapperLeft()] = fromLeft, _cx2[_SidePage.styles.wrapperMarginLeft()] = this.state.hasMargin && fromLeft, _cx2[_SidePage.styles.wrapperMarginRight()] = this.state.hasMargin && !fromLeft, _cx2[_SidePage.styles.shadow(this.theme)] = this.state.hasShadow, _cx2)), ref: this.layoutRef }, /*#__PURE__*/_react.default.createElement(_SidePageContext.SidePageContext.Provider, { value: this.getSidePageContextProps() }, this.props.children)))));};_proto.renderShadow = function renderShadow() {var _cx3;return /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Sidepage', className: _SidePage.styles.overlay(), onScroll: LayoutEvents.emit }, /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, { key: "hbvs" }), /*#__PURE__*/_react.default.createElement("div", { key: "overlay", className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_SidePage.styles.background()] = true, _cx3[_SidePage.styles.backgroundGray(this.theme)] = this.state.hasBackground, _cx3)) }));};_proto.getTransitionNames = function getTransitionNames() {var transition = this.props.fromLeft ? _SidePage.styles.transitionRight : _SidePage.styles.transitionLeft;return { enter: transition(), enterActive: _SidePage.styles.transitionActive(), exit: _SidePage.styles.transitionLeave(), exitActive: _SidePage.styles.transitionLeaveActive(), appear: transition(), appearActive: _SidePage.styles.transitionActive() };};return SidePage;}(_react.default.Component);exports.SidePage = SidePage;SidePage.__KONTUR_REACT_UI__ = 'SidePage';SidePage.Header = _SidePageHeader.SidePageHeader;SidePage.Body = _SidePageBody.SidePageBody;SidePage.Footer = _SidePageFooter.SidePageFooter;SidePage.Container = _SidePageContainer.SidePageContainer;SidePage.defaultProps = { disableAnimations: _currentEnvironment.isTestEnv, disableFocusLock: true, offset: 0 };

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePage.tsx"],"names":["TRANSITION_TIMEOUT","SidePage","state","hasHeader","hasFooter","hasPanel","stackSubscription","layout","header","footer","rootRef","React","createRef","updateLayout","update","disablePageScroll","e","reachedTop","scrollTop","deltaY","reachedBottom","scrollHeight","offsetHeight","props","blockBackground","preventDefault","getSidePageContextProps","requestClose","getWidth","headerRef","footerRef","setHasHeader","setHasFooter","setHasPanel","clientWidth","handleStackChange","stack","sidePages","filter","x","fromLeft","currentSidePagePosition","indexOf","hasMargin","length","hasShadow","hasBackground","ModalStack","isBlocking","setState","stackPosition","handleClickOutside","ignoreBackgroundClick","MouseEvent","clientX","document","documentElement","handleKeyDown","disableClose","onClose","ref","layoutRef","componentDidMount","window","addEventListener","current","passive","add","componentWillUnmount","removeEventListener","remove","render","theme","renderMain","disableAnimations","isMobile","renderShadow","getTransitionNames","enter","exit","renderContainer","width","disableFocusLock","offset","styles","root","mobileRoot","LayoutEvents","emit","undefined","right","left","focusLock","wrapper","wrapperLeft","wrapperMarginLeft","wrapperMarginRight","shadow","children","overlay","background","backgroundGray","transition","transitionRight","transitionLeft","enterActive","transitionActive","transitionLeave","exitActive","transitionLeaveActive","appear","appearActive","Component","__KONTUR_REACT_UI__","Header","SidePageHeader","Body","SidePageBody","Footer","SidePageFooter","Container","SidePageContainer","defaultProps","isTestEnv"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport FocusLock from 'react-focus-lock';\n\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { stopPropagation } from '../../lib/events/stopPropagation';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { RenderLayer } from '../../internal/RenderLayer';\nimport { ZIndex } from '../../internal/ZIndex';\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 { isTestEnv } from '../../lib/currentEnvironment';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\n\nimport { SidePageBody } from './SidePageBody';\nimport { SidePageContainer } from './SidePageContainer';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageFooter } from './SidePageFooter';\nimport { SidePageHeader } from './SidePageHeader';\nimport { styles } from './SidePage.styles';\n\nexport interface SidePageProps extends CommonProps {\n  /**\n   * Добавить блокирующий фон, когда сайдпейдж открыт\n   */\n  blockBackground?: boolean;\n\n  /**\n   * Отключает событие onClose, также дизейблит кнопку закрытия сайдпейджа\n   */\n  disableClose?: boolean;\n\n  /**\n   * Не закрывать сайдпейдж при клике на фон.\n   */\n  ignoreBackgroundClick?: boolean;\n\n  /**\n   * Задать ширину сайдпейджа\n   */\n  width?: number | string;\n\n  /**\n   * Вызывается, когда пользователь запросил закрытие сайдпейджа (нажал на фон, на\n   * Escape или на крестик).\n   */\n  onClose?: () => void;\n\n  /**\n   * Показывать сайдпэйдж слева\n   *\n   */\n  fromLeft?: boolean;\n\n  /**\n   * Отключить анимации\n   *\n   */\n  disableAnimations?: boolean;\n\n  /**\n   * Работает только при заблокированном фоне: `blockBackground = true`\n   */\n  disableFocusLock: boolean;\n\n  /**\n   * задает отступ от края экрана\n   */\n  offset?: number | string;\n}\n\nexport interface SidePageState {\n  stackPosition?: number;\n  hasMargin?: boolean;\n  hasShadow?: boolean;\n  hasBackground?: boolean;\n  hasHeader: boolean;\n  hasFooter: boolean;\n  hasPanel: boolean;\n}\n\nconst TRANSITION_TIMEOUT = 200;\n\n/**\n * Сайдпейдж\n *\n * Содержит в себе три компоненты: **SidePage.Header**,\n * **SidePage.Body** и **SidePage.Footer**\n *\n * Для отображения серой плашки в футере в компонент\n * **Footer** необходимо передать пропс **panel**\n */\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\n  public static __KONTUR_REACT_UI__ = 'SidePage';\n\n  public static Header = SidePageHeader;\n  public static Body = SidePageBody;\n  public static Footer = SidePageFooter;\n  public static Container = SidePageContainer;\n  public state: SidePageState = {\n    hasHeader: false,\n    hasFooter: false,\n    hasPanel: false,\n  };\n  private theme!: Theme;\n  private stackSubscription: ModalStackSubscription | null = null;\n  private layout: HTMLElement | null = null;\n  private header: SidePageHeader | null = null;\n  private footer: SidePageFooter | null = null;\n  private rootRef = React.createRef<HTMLDivElement>();\n\n  public componentDidMount() {\n    window.addEventListener('keydown', this.handleKeyDown);\n    this.rootRef.current?.addEventListener('wheel', this.disablePageScroll, { passive: false });\n    this.stackSubscription = ModalStack.add(this, this.handleStackChange);\n  }\n\n  public componentWillUnmount() {\n    window.removeEventListener('keydown', this.handleKeyDown);\n    this.rootRef.current?.removeEventListener('wheel', this.disablePageScroll);\n    if (this.stackSubscription != null) {\n      this.stackSubscription.remove();\n    }\n    ModalStack.remove(this);\n  }\n\n  /**\n   * Обновляет разметку компонента.\n   * @public\n   */\n  public updateLayout = (): void => {\n    this.header?.update();\n    this.footer?.update();\n  };\n\n  public static defaultProps = {\n    disableAnimations: isTestEnv,\n    disableFocusLock: true,\n    offset: 0,\n  };\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { blockBackground, disableAnimations } = this.props;\n\n    return (\n      <RenderContainer>\n        <CommonWrapper {...this.props}>\n          <div>\n            <ResponsiveLayout>\n              {({ isMobile }) => {\n                return (\n                  <>\n                    {blockBackground && this.renderShadow()}\n                    <CSSTransition\n                      in\n                      classNames={this.getTransitionNames()}\n                      appear={!disableAnimations}\n                      enter={!disableAnimations}\n                      exit={false}\n                      timeout={{\n                        enter: TRANSITION_TIMEOUT,\n                        exit: TRANSITION_TIMEOUT,\n                      }}\n                      nodeRef={this.rootRef}\n                    >\n                      {this.renderContainer(isMobile)}\n                    </CSSTransition>\n                    {isMobile && <HideBodyVerticalScroll />}\n                  </>\n                );\n              }}\n            </ResponsiveLayout>\n          </div>\n        </CommonWrapper>\n      </RenderContainer>\n    );\n  }\n\n  private renderContainer(isMobile: boolean): JSX.Element {\n    const { width, blockBackground, fromLeft, disableFocusLock, offset } = this.props;\n\n    return (\n      <ZIndex\n        priority={'Sidepage'}\n        data-tid=\"SidePage__root\"\n        className={cx({\n          [styles.root()]: true,\n          [styles.mobileRoot()]: isMobile,\n        })}\n        onScroll={LayoutEvents.emit}\n        createStackingContext\n        style={\n          isMobile\n            ? undefined\n            : {\n                width: width || (blockBackground ? 800 : 500),\n                right: fromLeft ? 'auto' : offset,\n                left: fromLeft ? offset : 'auto',\n              }\n        }\n        wrapperRef={this.rootRef}\n      >\n        <FocusLock disabled={disableFocusLock || !blockBackground} autoFocus={false} className={styles.focusLock()}>\n          <RenderLayer onClickOutside={this.handleClickOutside} active>\n            <div\n              data-tid=\"SidePage__container\"\n              className={cx(styles.wrapper(this.theme), {\n                [styles.wrapperLeft()]: fromLeft,\n                [styles.wrapperMarginLeft()]: this.state.hasMargin && fromLeft,\n                [styles.wrapperMarginRight()]: this.state.hasMargin && !fromLeft,\n                [styles.shadow(this.theme)]: this.state.hasShadow,\n              })}\n              ref={this.layoutRef}\n            >\n              <SidePageContext.Provider value={this.getSidePageContextProps()}>\n                {this.props.children}\n              </SidePageContext.Provider>\n            </div>\n          </RenderLayer>\n        </FocusLock>\n      </ZIndex>\n    );\n  }\n\n  private disablePageScroll = (e: WheelEvent) => {\n    const layout = this.layout;\n    if (!layout) return;\n    const reachedTop = layout.scrollTop <= 0 && e.deltaY < 0;\n    const reachedBottom = layout.scrollTop >= layout.scrollHeight - layout.offsetHeight && e.deltaY > 0;\n\n    if (!this.props.blockBackground && (reachedTop || reachedBottom)) {\n      e.preventDefault();\n    }\n  };\n\n  private getSidePageContextProps = (): SidePageContextType => {\n    return {\n      hasHeader: this.state.hasHeader,\n      hasFooter: this.state.hasFooter,\n      hasPanel: this.state.hasPanel,\n      requestClose: this.requestClose,\n      getWidth: this.getWidth,\n      updateLayout: this.updateLayout,\n      headerRef: this.headerRef,\n      footerRef: this.footerRef,\n      setHasHeader: this.setHasHeader,\n      setHasFooter: this.setHasFooter,\n      setHasPanel: this.setHasPanel,\n    };\n  };\n\n  private getWidth = () => {\n    if (!this.layout) {\n      return 'auto';\n    }\n    return this.layout.clientWidth;\n  };\n\n  private renderShadow(): JSX.Element {\n    return (\n      <ZIndex priority={'Sidepage'} className={styles.overlay()} onScroll={LayoutEvents.emit}>\n        <HideBodyVerticalScroll key=\"hbvs\" />\n        <div\n          key=\"overlay\"\n          className={cx({\n            [styles.background()]: true,\n            [styles.backgroundGray(this.theme)]: this.state.hasBackground,\n          })}\n        />\n      </ZIndex>\n    );\n  }\n\n  private getTransitionNames(): Record<string, string> {\n    const transition = this.props.fromLeft ? styles.transitionRight : styles.transitionLeft;\n\n    return {\n      enter: transition(),\n      enterActive: styles.transitionActive(),\n      exit: styles.transitionLeave(),\n      exitActive: styles.transitionLeaveActive(),\n      appear: transition(),\n      appearActive: styles.transitionActive(),\n    };\n  }\n\n  private handleStackChange = (stack: ReadonlyArray<React.Component>) => {\n    const sidePages = stack.filter((x) => x instanceof SidePage && x.props.fromLeft === this.props.fromLeft);\n    const currentSidePagePosition = sidePages.indexOf(this);\n\n    const hasMargin = sidePages.length > 1 && currentSidePagePosition === sidePages.length - 1;\n    const hasShadow = sidePages.length < 3 || currentSidePagePosition > sidePages.length - 3;\n    const hasBackground = ModalStack.isBlocking(this);\n\n    this.setState({\n      stackPosition: stack.indexOf(this),\n      hasMargin,\n      hasShadow,\n      hasBackground,\n    });\n  };\n\n  private handleClickOutside = (e: Event) => {\n    if (this.state.stackPosition === 0 && !this.props.ignoreBackgroundClick) {\n      // ignore mousedown on window scrollbar\n      if (e instanceof MouseEvent && e.clientX > document.documentElement.clientWidth) {\n        return;\n      }\n      this.requestClose();\n    }\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.state.stackPosition !== 0) {\n      return;\n    }\n    if (isKeyEscape(e)) {\n      stopPropagation(e);\n      this.requestClose();\n    }\n  };\n\n  private requestClose = () => {\n    if (this.props.disableClose) {\n      return;\n    }\n    if (this.props.onClose) {\n      this.props.onClose();\n    }\n  };\n\n  private headerRef = (ref: SidePageHeader | null) => {\n    this.header = ref;\n  };\n\n  private footerRef = (ref: SidePageFooter | null) => {\n    this.footer = ref;\n  };\n\n  private layoutRef = (ref: HTMLDivElement | null) => {\n    this.layout = ref;\n  };\n\n  private setHasHeader = (hasHeader = true) => {\n    this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n  };\n\n  private setHasFooter = (hasFooter = true) => {\n    this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n  };\n\n  private setHasPanel = (hasPanel = false) => {\n    this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n  };\n}\n"]}
+{"version":3,"sources":["SidePage.tsx"],"names":["TRANSITION_TIMEOUT","SidePage","state","hasHeader","hasFooter","hasPanel","stackSubscription","layout","header","footer","rootRef","React","createRef","updateLayout","update","getSidePageContextProps","requestClose","getWidth","headerRef","footerRef","setHasHeader","setHasFooter","setHasPanel","clientWidth","handleStackChange","stack","sidePages","filter","x","props","fromLeft","currentSidePagePosition","indexOf","hasMargin","length","hasShadow","hasBackground","ModalStack","isBlocking","setState","stackPosition","handleClickOutside","e","ignoreBackgroundClick","MouseEvent","clientX","document","documentElement","handleKeyDown","disableClose","onClose","ref","layoutRef","componentDidMount","window","addEventListener","add","componentWillUnmount","removeEventListener","remove","render","theme","renderMain","blockBackground","disableAnimations","isMobile","renderShadow","getTransitionNames","enter","exit","renderContainer","width","disableFocusLock","offset","styles","root","mobileRoot","LayoutEvents","emit","undefined","right","left","focusLock","wrapper","wrapperLeft","wrapperMarginLeft","wrapperMarginRight","shadow","children","overlay","background","backgroundGray","transition","transitionRight","transitionLeft","enterActive","transitionActive","transitionLeave","exitActive","transitionLeaveActive","appear","appearActive","Component","__KONTUR_REACT_UI__","Header","SidePageHeader","Body","SidePageBody","Footer","SidePageFooter","Container","SidePageContainer","defaultProps","isTestEnv"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport FocusLock from 'react-focus-lock';\n\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { stopPropagation } from '../../lib/events/stopPropagation';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { RenderLayer } from '../../internal/RenderLayer';\nimport { ZIndex } from '../../internal/ZIndex';\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 { isTestEnv } from '../../lib/currentEnvironment';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\n\nimport { SidePageBody } from './SidePageBody';\nimport { SidePageContainer } from './SidePageContainer';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageFooter } from './SidePageFooter';\nimport { SidePageHeader } from './SidePageHeader';\nimport { styles } from './SidePage.styles';\n\nexport interface SidePageProps extends CommonProps {\n  /**\n   * Добавить блокирующий фон, когда сайдпейдж открыт\n   */\n  blockBackground?: boolean;\n\n  /**\n   * Отключает событие onClose, также дизейблит кнопку закрытия сайдпейджа\n   */\n  disableClose?: boolean;\n\n  /**\n   * Не закрывать сайдпейдж при клике на фон.\n   */\n  ignoreBackgroundClick?: boolean;\n\n  /**\n   * Задать ширину сайдпейджа\n   */\n  width?: number | string;\n\n  /**\n   * Вызывается, когда пользователь запросил закрытие сайдпейджа (нажал на фон, на\n   * Escape или на крестик).\n   */\n  onClose?: () => void;\n\n  /**\n   * Показывать сайдпэйдж слева\n   *\n   */\n  fromLeft?: boolean;\n\n  /**\n   * Отключить анимации\n   *\n   */\n  disableAnimations?: boolean;\n\n  /**\n   * Работает только при заблокированном фоне: `blockBackground = true`\n   */\n  disableFocusLock: boolean;\n\n  /**\n   * задает отступ от края экрана\n   */\n  offset?: number | string;\n}\n\nexport interface SidePageState {\n  stackPosition?: number;\n  hasMargin?: boolean;\n  hasShadow?: boolean;\n  hasBackground?: boolean;\n  hasHeader: boolean;\n  hasFooter: boolean;\n  hasPanel: boolean;\n}\n\nconst TRANSITION_TIMEOUT = 200;\n\n/**\n * Сайдпейдж\n *\n * Содержит в себе три компоненты: **SidePage.Header**,\n * **SidePage.Body** и **SidePage.Footer**\n *\n * Для отображения серой плашки в футере в компонент\n * **Footer** необходимо передать пропс **panel**\n */\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\n  public static __KONTUR_REACT_UI__ = 'SidePage';\n\n  public static Header = SidePageHeader;\n  public static Body = SidePageBody;\n  public static Footer = SidePageFooter;\n  public static Container = SidePageContainer;\n  public state: SidePageState = {\n    hasHeader: false,\n    hasFooter: false,\n    hasPanel: false,\n  };\n  private theme!: Theme;\n  private stackSubscription: ModalStackSubscription | null = null;\n  private layout: HTMLElement | null = null;\n  private header: SidePageHeader | null = null;\n  private footer: SidePageFooter | null = null;\n  private rootRef = React.createRef<HTMLDivElement>();\n\n  public componentDidMount() {\n    window.addEventListener('keydown', this.handleKeyDown);\n    this.stackSubscription = ModalStack.add(this, this.handleStackChange);\n  }\n\n  public componentWillUnmount() {\n    window.removeEventListener('keydown', this.handleKeyDown);\n    if (this.stackSubscription != null) {\n      this.stackSubscription.remove();\n    }\n    ModalStack.remove(this);\n  }\n\n  /**\n   * Обновляет разметку компонента.\n   * @public\n   */\n  public updateLayout = (): void => {\n    this.header?.update();\n    this.footer?.update();\n  };\n\n  public static defaultProps = {\n    disableAnimations: isTestEnv,\n    disableFocusLock: true,\n    offset: 0,\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 { blockBackground, disableAnimations } = this.props;\n\n    return (\n      <RenderContainer>\n        <CommonWrapper {...this.props}>\n          <div>\n            <ResponsiveLayout>\n              {({ isMobile }) => {\n                return (\n                  <>\n                    {blockBackground && this.renderShadow()}\n                    <CSSTransition\n                      in\n                      classNames={this.getTransitionNames()}\n                      appear={!disableAnimations}\n                      enter={!disableAnimations}\n                      exit={false}\n                      timeout={{\n                        enter: TRANSITION_TIMEOUT,\n                        exit: TRANSITION_TIMEOUT,\n                      }}\n                      nodeRef={this.rootRef}\n                    >\n                      {this.renderContainer(isMobile)}\n                    </CSSTransition>\n                    {isMobile && <HideBodyVerticalScroll />}\n                  </>\n                );\n              }}\n            </ResponsiveLayout>\n          </div>\n        </CommonWrapper>\n      </RenderContainer>\n    );\n  }\n\n  private renderContainer(isMobile: boolean): JSX.Element {\n    const { width, blockBackground, fromLeft, disableFocusLock, offset } = this.props;\n\n    return (\n      <ZIndex\n        priority={'Sidepage'}\n        data-tid=\"SidePage__root\"\n        className={cx({\n          [styles.root()]: true,\n          [styles.mobileRoot()]: isMobile,\n        })}\n        onScroll={LayoutEvents.emit}\n        createStackingContext\n        style={\n          isMobile\n            ? undefined\n            : {\n                width: width || (blockBackground ? 800 : 500),\n                right: fromLeft ? 'auto' : offset,\n                left: fromLeft ? offset : 'auto',\n              }\n        }\n        wrapperRef={this.rootRef}\n      >\n        <FocusLock disabled={disableFocusLock || !blockBackground} autoFocus={false} className={styles.focusLock()}>\n          <RenderLayer onClickOutside={this.handleClickOutside} active>\n            <div\n              data-tid=\"SidePage__container\"\n              className={cx(styles.wrapper(this.theme), {\n                [styles.wrapperLeft()]: fromLeft,\n                [styles.wrapperMarginLeft()]: this.state.hasMargin && fromLeft,\n                [styles.wrapperMarginRight()]: this.state.hasMargin && !fromLeft,\n                [styles.shadow(this.theme)]: this.state.hasShadow,\n              })}\n              ref={this.layoutRef}\n            >\n              <SidePageContext.Provider value={this.getSidePageContextProps()}>\n                {this.props.children}\n              </SidePageContext.Provider>\n            </div>\n          </RenderLayer>\n        </FocusLock>\n      </ZIndex>\n    );\n  }\n\n  private getSidePageContextProps = (): SidePageContextType => {\n    return {\n      hasHeader: this.state.hasHeader,\n      hasFooter: this.state.hasFooter,\n      hasPanel: this.state.hasPanel,\n      requestClose: this.requestClose,\n      getWidth: this.getWidth,\n      updateLayout: this.updateLayout,\n      headerRef: this.headerRef,\n      footerRef: this.footerRef,\n      setHasHeader: this.setHasHeader,\n      setHasFooter: this.setHasFooter,\n      setHasPanel: this.setHasPanel,\n    };\n  };\n\n  private getWidth = () => {\n    if (!this.layout) {\n      return 'auto';\n    }\n    return this.layout.clientWidth;\n  };\n\n  private renderShadow(): JSX.Element {\n    return (\n      <ZIndex priority={'Sidepage'} className={styles.overlay()} onScroll={LayoutEvents.emit}>\n        <HideBodyVerticalScroll key=\"hbvs\" />\n        <div\n          key=\"overlay\"\n          className={cx({\n            [styles.background()]: true,\n            [styles.backgroundGray(this.theme)]: this.state.hasBackground,\n          })}\n        />\n      </ZIndex>\n    );\n  }\n\n  private getTransitionNames(): Record<string, string> {\n    const transition = this.props.fromLeft ? styles.transitionRight : styles.transitionLeft;\n\n    return {\n      enter: transition(),\n      enterActive: styles.transitionActive(),\n      exit: styles.transitionLeave(),\n      exitActive: styles.transitionLeaveActive(),\n      appear: transition(),\n      appearActive: styles.transitionActive(),\n    };\n  }\n\n  private handleStackChange = (stack: readonly React.Component[]) => {\n    const sidePages = stack.filter((x) => x instanceof SidePage && x.props.fromLeft === this.props.fromLeft);\n    const currentSidePagePosition = sidePages.indexOf(this);\n\n    const hasMargin = sidePages.length > 1 && currentSidePagePosition === sidePages.length - 1;\n    const hasShadow = sidePages.length < 3 || currentSidePagePosition > sidePages.length - 3;\n    const hasBackground = ModalStack.isBlocking(this);\n\n    this.setState({\n      stackPosition: stack.indexOf(this),\n      hasMargin,\n      hasShadow,\n      hasBackground,\n    });\n  };\n\n  private handleClickOutside = (e: Event) => {\n    if (this.state.stackPosition === 0 && !this.props.ignoreBackgroundClick) {\n      // ignore mousedown on window scrollbar\n      if (e instanceof MouseEvent && e.clientX > document.documentElement.clientWidth) {\n        return;\n      }\n      this.requestClose();\n    }\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.state.stackPosition !== 0) {\n      return;\n    }\n    if (isKeyEscape(e)) {\n      stopPropagation(e);\n      this.requestClose();\n    }\n  };\n\n  private requestClose = () => {\n    if (this.props.disableClose) {\n      return;\n    }\n    if (this.props.onClose) {\n      this.props.onClose();\n    }\n  };\n\n  private headerRef = (ref: SidePageHeader | null) => {\n    this.header = ref;\n  };\n\n  private footerRef = (ref: SidePageFooter | null) => {\n    this.footer = ref;\n  };\n\n  private layoutRef = (ref: HTMLDivElement | null) => {\n    this.layout = ref;\n  };\n\n  private setHasHeader = (hasHeader = true) => {\n    this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n  };\n\n  private setHasFooter = (hasFooter = true) => {\n    this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n  };\n\n  private setHasPanel = (hasPanel = false) => {\n    this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n  };\n}\n"]}

package/cjs/components/SidePage/SidePageFooter.js

@@ -7,6 +7,7 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
 var _decorator = require("../ResponsiveLayout/decorator");
 var _rootNode = require("../../lib/rootNode");
+var _getDOMRect = require("../../lib/dom/getDOMRect");
 
 var _SidePage = require("./SidePage.styles");
 var _SidePageContext = require("./SidePageContext");var _class, _class2, _temp;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
@@ -131,8 +132,8 @@ SidePageFooter = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
     setProperStyles = function () {
       var wrapper = (0, _rootNode.getRootNode)((0, _assertThisInitialized2.default)(_this));
       if (wrapper && _this.content) {
-        var wrapperRect = wrapper.getBoundingClientRect();
-        var contentRect = _this.content.getBoundingClientRect();
+        var wrapperRect = (0, _getDOMRect.getDOMRect)(wrapper);
+        var contentRect = (0, _getDOMRect.getDOMRect)(_this.content);
         var _fixed = wrapperRect.top > contentRect.top;
         _this.setState({ fixed: _fixed });
       }
@@ -142,5 +143,5 @@ SidePageFooter = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
     if (!this.content) {
       return 'auto';
     }
-    return this.content.getBoundingClientRect().height;
+    return (0, _getDOMRect.getDOMRect)(this.content).height;
   };return SidePageFooter;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageFooter', _class2.contextType = _SidePageContext.SidePageContext, _temp)) || _class) || _class;exports.SidePageFooter = SidePageFooter;

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePageFooter.tsx"],"names":["SidePageFooter","responsiveLayout","rootNode","context","state","fixed","content","layoutSub","update","setProperStyles","refContent","node","wrapper","wrapperRect","getBoundingClientRect","contentRect","top","setState","componentDidMount","footerRef","LayoutEvents","addListener","setHasFooter","setHasPanel","props","panel","componentDidUpdate","prevProps","componentWillUnmount","remove","getSticky","sticky","isMobileLayout","render","theme","renderMain","setRootNode","height","getContentHeight","styles","footerWrapper","getWidth","footer","positionStatic","width","footerContent","footerFixed","panelFixed","mobileFooterContent","children","React","Component","__KONTUR_REACT_UI__","contextType","SidePageContext"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\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 { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageFooterProps extends CommonProps {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  /**\n   * Включает серый цвет в футере\n   */\n  panel?: boolean;\n  sticky?: boolean;\n}\n\n/**\n * Футер сайдпейджа.\n *\n * @visibleName SidePage.Footer\n */\n@responsiveLayout\n@rootNode\nexport class SidePageFooter extends React.Component<SidePageFooterProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageFooter';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n  private isMobileLayout!: boolean;\n\n  public state = {\n    fixed: false,\n  };\n\n  private theme!: Theme;\n  private content: HTMLElement | null = null;\n  private layoutSub: ReturnType<typeof LayoutEvents.addListener> | null = null;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.context.footerRef(this);\n    this.update();\n    this.layoutSub = LayoutEvents.addListener(this.update);\n    this.context.setHasFooter?.();\n    this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentDidUpdate(prevProps: Readonly<SidePageFooterProps>) {\n    this.props.panel !== prevProps.panel && this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentWillUnmount() {\n    this.context.footerRef(null);\n    if (this.layoutSub) {\n      this.layoutSub.remove();\n    }\n    this.context.setHasFooter?.(false);\n    this.context.setHasPanel?.(false);\n  }\n\n  public getSticky() {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\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  public update = () => {\n    this.setProperStyles();\n  };\n\n  private renderMain() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div style={{ height: this.getContentHeight() }} className={styles.footerWrapper()}>\n          <SidePageContext.Consumer>\n            {({ getWidth }) => (\n              <div\n                className={cx(styles.footer(this.theme), {\n                  [styles.positionStatic()]: !this.getSticky(),\n                })}\n                style={{\n                  width: getWidth(),\n                }}\n              >\n                <div\n                  className={cx(styles.footerContent(this.theme), {\n                    [styles.footerFixed(this.theme)]: this.state.fixed,\n                    [styles.panel(this.theme)]: !!this.props.panel,\n                    [styles.panelFixed(this.theme)]: !!this.props.panel && this.state.fixed,\n                    [styles.mobileFooterContent(this.theme)]: this.isMobileLayout,\n                  })}\n                  ref={this.refContent}\n                >\n                  {this.props.children}\n                </div>\n              </div>\n            )}\n          </SidePageContext.Consumer>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refContent = (node: HTMLElement | null) => {\n    this.content = node;\n  };\n\n  private setProperStyles = () => {\n    const wrapper = getRootNode(this);\n    if (wrapper && this.content) {\n      const wrapperRect = wrapper.getBoundingClientRect();\n      const contentRect = this.content.getBoundingClientRect();\n      const fixed = wrapperRect.top > contentRect.top;\n      this.setState({ fixed });\n    }\n  };\n\n  private getContentHeight() {\n    if (!this.content) {\n      return 'auto';\n    }\n    return this.content.getBoundingClientRect().height;\n  }\n}\n"]}
+{"version":3,"sources":["SidePageFooter.tsx"],"names":["SidePageFooter","responsiveLayout","rootNode","context","state","fixed","content","layoutSub","update","setProperStyles","refContent","node","wrapper","wrapperRect","contentRect","top","setState","componentDidMount","footerRef","LayoutEvents","addListener","setHasFooter","setHasPanel","props","panel","componentDidUpdate","prevProps","componentWillUnmount","remove","getSticky","sticky","isMobileLayout","render","theme","renderMain","setRootNode","height","getContentHeight","styles","footerWrapper","getWidth","footer","positionStatic","width","footerContent","footerFixed","panelFixed","mobileFooterContent","children","React","Component","__KONTUR_REACT_UI__","contextType","SidePageContext"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\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 { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageFooterProps extends CommonProps {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  /**\n   * Включает серый цвет в футере\n   */\n  panel?: boolean;\n  sticky?: boolean;\n}\n\n/**\n * Футер сайдпейджа.\n *\n * @visibleName SidePage.Footer\n */\n@responsiveLayout\n@rootNode\nexport class SidePageFooter extends React.Component<SidePageFooterProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageFooter';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n  private isMobileLayout!: boolean;\n\n  public state = {\n    fixed: false,\n  };\n\n  private theme!: Theme;\n  private content: HTMLElement | null = null;\n  private layoutSub: ReturnType<typeof LayoutEvents.addListener> | null = null;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.context.footerRef(this);\n    this.update();\n    this.layoutSub = LayoutEvents.addListener(this.update);\n    this.context.setHasFooter?.();\n    this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentDidUpdate(prevProps: Readonly<SidePageFooterProps>) {\n    this.props.panel !== prevProps.panel && this.context.setHasPanel?.(this.props.panel);\n  }\n\n  public componentWillUnmount() {\n    this.context.footerRef(null);\n    if (this.layoutSub) {\n      this.layoutSub.remove();\n    }\n    this.context.setHasFooter?.(false);\n    this.context.setHasPanel?.(false);\n  }\n\n  public getSticky() {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\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  public update = () => {\n    this.setProperStyles();\n  };\n\n  private renderMain() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div style={{ height: this.getContentHeight() }} className={styles.footerWrapper()}>\n          <SidePageContext.Consumer>\n            {({ getWidth }) => (\n              <div\n                className={cx(styles.footer(this.theme), {\n                  [styles.positionStatic()]: !this.getSticky(),\n                })}\n                style={{\n                  width: getWidth(),\n                }}\n              >\n                <div\n                  className={cx(styles.footerContent(this.theme), {\n                    [styles.footerFixed(this.theme)]: this.state.fixed,\n                    [styles.panel(this.theme)]: !!this.props.panel,\n                    [styles.panelFixed(this.theme)]: !!this.props.panel && this.state.fixed,\n                    [styles.mobileFooterContent(this.theme)]: this.isMobileLayout,\n                  })}\n                  ref={this.refContent}\n                >\n                  {this.props.children}\n                </div>\n              </div>\n            )}\n          </SidePageContext.Consumer>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refContent = (node: HTMLElement | null) => {\n    this.content = node;\n  };\n\n  private setProperStyles = () => {\n    const wrapper = getRootNode(this);\n    if (wrapper && this.content) {\n      const wrapperRect = getDOMRect(wrapper);\n      const contentRect = getDOMRect(this.content);\n      const fixed = wrapperRect.top > contentRect.top;\n      this.setState({ fixed });\n    }\n  };\n\n  private getContentHeight() {\n    if (!this.content) {\n      return 'auto';\n    }\n    return getDOMRect(this.content).height;\n  }\n}\n"]}

package/cjs/components/SidePage/SidePageHeader.js

@@ -10,6 +10,7 @@ var _Emotion = require("../../lib/theming/Emotion");
 var _keyListener = require("../../lib/events/keyListener");
 var _decorator = require("../ResponsiveLayout/decorator");
 var _rootNode = require("../../lib/rootNode");
+var _getDOMRect = require("../../lib/dom/getDOMRect");
 
 var _SidePage = require("./SidePage.styles");
 var _SidePageContext = require("./SidePageContext");var _class, _class2, _temp;
@@ -189,7 +190,7 @@ SidePageHeader = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
 
     updateReadyToFix = function () {
       if (_this.wrapper) {
-        var wrapperScrolledUp = _this.wrapper.getBoundingClientRect().top;
+        var wrapperScrolledUp = (0, _getDOMRect.getDOMRect)(_this.wrapper).top;
         var isReadyToFix = _this.regularHeight + wrapperScrolledUp <= _this.fixedHeaderHeight;
         _this.setState(function (state) {return state.isReadyToFix !== isReadyToFix ? (0, _extends2.default)({}, state, { isReadyToFix: isReadyToFix }) : state;});
       }
@@ -213,4 +214,4 @@ SidePageHeader = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
 
     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.getStickyProp = function getStickyProp() {if (typeof this.props.sticky !== 'undefined') {return this.props.sticky;}if (this.isMobileLayout) {return false;}return true;};_proto.renderMain = function renderMain() {var isReadyToFix = this.state.isReadyToFix;var isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;var isStickyMobile = this.isMobileLayout && this.getStickyProp();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() }, isStickyDesktop || isStickyMobile ? /*#__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) || _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.getStickyProp = function getStickyProp() {if (typeof this.props.sticky !== 'undefined') {return this.props.sticky;}if (this.isMobileLayout) {return false;}return true;};_proto.renderMain = function renderMain() {var isReadyToFix = this.state.isReadyToFix;var isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;var isStickyMobile = this.isMobileLayout && this.getStickyProp();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() }, isStickyDesktop || isStickyMobile ? /*#__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 = (0, _getDOMRect.getDOMRect)(this.wrapper).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) || _class;exports.SidePageHeader = SidePageHeader;

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePageHeader.tsx"],"names":["SidePageHeader","responsiveLayout","rootNode","context","state","isReadyToFix","focusedByTab","wrapper","sticky","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","headerRef","componentWillUnmount","removeEventListener","reflow","updateReadyToFix","renderHeader","fixed","styles","header","theme","headerFixed","mobileHeader","isMobileLayout","renderClose","title","mobileTitle","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","wrapperCloseFixed","mobileWrapperClose","closeIcon","requestClose","close","closeFocus","handleFocus","handleBlur","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","stickyRef","requestAnimationFrame","keyListener","isTabPressed","render","renderMain","getStickyProp","isStickyDesktop","isStickyMobile","setRootNode","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 { responsiveLayout } from '../ResponsiveLayout/decorator';\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  sticky?: boolean;\n}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n  focusedByTab: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@responsiveLayout\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  private isMobileLayout!: boolean;\n\n  public state: SidePageHeaderState = {\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  public getStickyProp() {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private renderMain() {\n    const { isReadyToFix } = this.state;\n\n    const isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;\n    const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div ref={this.wrapperRef} className={styles.headerWrapper()}>\n          {isStickyDesktop || isStickyMobile ? (\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\n        className={cx(styles.header(this.theme), {\n          [styles.headerFixed(this.theme)]: fixed,\n          [styles.mobileHeader(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        {this.renderClose(fixed)}\n        <div\n          className={cx(styles.title(this.theme), {\n            [styles.mobileTitle(this.theme)]: this.isMobileLayout,\n            [styles.titleFixed()]: fixed,\n          })}\n        >\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    return (\n      <div\n        className={cx(styles.wrapperClose(this.theme), {\n          [styles.wrapperCloseFixed(this.theme)]: fixed,\n          [styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        {this.isMobileLayout ? (\n          this.closeIcon\n        ) : (\n          <Sticky side=\"top\" offset={stickyOffset}>\n            {this.closeIcon}\n          </Sticky>\n        )}\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"]}
+{"version":3,"sources":["SidePageHeader.tsx"],"names":["SidePageHeader","responsiveLayout","rootNode","context","state","isReadyToFix","focusedByTab","wrapper","sticky","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","headerRef","componentWillUnmount","removeEventListener","reflow","updateReadyToFix","renderHeader","fixed","styles","header","theme","headerFixed","mobileHeader","isMobileLayout","renderClose","title","mobileTitle","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","wrapperCloseFixed","mobileWrapperClose","closeIcon","requestClose","close","closeFocus","handleFocus","handleBlur","wrapperScrolledUp","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","stickyRef","requestAnimationFrame","keyListener","isTabPressed","render","renderMain","getStickyProp","isStickyDesktop","isStickyMobile","setRootNode","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 { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\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  sticky?: boolean;\n}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n  focusedByTab: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@responsiveLayout\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  private isMobileLayout!: boolean;\n\n  public state: SidePageHeaderState = {\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 = getDOMRect(this.wrapper).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  public getStickyProp() {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private renderMain() {\n    const { isReadyToFix } = this.state;\n\n    const isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;\n    const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div ref={this.wrapperRef} className={styles.headerWrapper()}>\n          {isStickyDesktop || isStickyMobile ? (\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\n        className={cx(styles.header(this.theme), {\n          [styles.headerFixed(this.theme)]: fixed,\n          [styles.mobileHeader(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        {this.renderClose(fixed)}\n        <div\n          className={cx(styles.title(this.theme), {\n            [styles.mobileTitle(this.theme)]: this.isMobileLayout,\n            [styles.titleFixed()]: fixed,\n          })}\n        >\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    return (\n      <div\n        className={cx(styles.wrapperClose(this.theme), {\n          [styles.wrapperCloseFixed(this.theme)]: fixed,\n          [styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        {this.isMobileLayout ? (\n          this.closeIcon\n        ) : (\n          <Sticky side=\"top\" offset={stickyOffset}>\n            {this.closeIcon}\n          </Sticky>\n        )}\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 = getDOMRect(this.wrapper).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.js

@@ -9,6 +9,7 @@ var _ZIndex = require("../../internal/ZIndex");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
+var _getDOMRect3 = require("../../lib/dom/getDOMRect");
 
 var _Sticky = require("./Sticky.styles");var _class, _class2, _temp;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
 
@@ -155,8 +156,8 @@ Sticky = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
       if (!_this.wrapper || !_this.inner) {
         return;
       }
-      var _this$wrapper$getBoun = _this.wrapper.getBoundingClientRect(),top = _this$wrapper$getBoun.top,bottom = _this$wrapper$getBoun.bottom,left = _this$wrapper$getBoun.left;
-      var _this$inner$getBoundi = _this.inner.getBoundingClientRect(),width = _this$inner$getBoundi.width,height = _this$inner$getBoundi.height;
+      var _getDOMRect = (0, _getDOMRect3.getDOMRect)(_this.wrapper),top = _getDOMRect.top,bottom = _getDOMRect.bottom,left = _getDOMRect.left;
+      var _getDOMRect2 = (0, _getDOMRect3.getDOMRect)(_this.inner),width = _getDOMRect2.width,height = _getDOMRect2.height;
       var _this$props = _this.props,offset = _this$props.offset,getStop = _this$props.getStop,side = _this$props.side;
       var _this$state = _this.state,prevFixed = _this$state.fixed,_this$state$height = _this$state.height,prevHeight = _this$state$height === void 0 ? height : _this$state$height;
       var fixed = side === 'top' ? top < offset : Math.floor(bottom) > windowHeight - offset;
@@ -171,7 +172,7 @@ Sticky = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
         var stop = getStop && getStop();
         if (stop) {
           var deltaHeight = prevHeight - height;
-          var stopRect = stop.getBoundingClientRect();
+          var stopRect = (0, _getDOMRect3.getDOMRect)(stop);
           var outerHeight = height + offset;
           var stopped = false;
           var relativeTop = 0;

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","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","document","documentElement","Error","windowHeight","window","innerHeight","clientHeight","getBoundingClientRect","top","bottom","left","width","height","props","offset","getStop","side","prevFixed","prevHeight","Math","floor","setState","stop","stopRect","outerHeight","componentDidMount","LayoutEvents","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","setRootNode","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 : Math.floor(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","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","document","documentElement","Error","windowHeight","window","innerHeight","clientHeight","top","bottom","left","width","height","props","offset","getStop","side","prevFixed","prevHeight","Math","floor","setState","stop","stopRect","outerHeight","componentDidMount","LayoutEvents","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","setRootNode","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';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\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 } = getDOMRect(this.wrapper);\n    const { width, height } = getDOMRect(this.inner);\n    const { offset, getStop, side } = this.props;\n    const { fixed: prevFixed, height: prevHeight = height } = this.state;\n    const fixed = side === 'top' ? top < offset : Math.floor(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 = getDOMRect(stop);\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/Switcher/Switcher.d.ts

@@ -4,11 +4,12 @@ import { ButtonSize } from '../Button';
 import { Nullable } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 export declare type SwitcherSize = ButtonSize;
+declare type SwitcherItems = string | SwitcherItem;
 export interface SwitcherProps extends CommonProps {
     /**
      * Список строк или список элементов типа `{ label: string, value: string }`
      */
-    items: Array<string | SwitcherItem>;
+    items: SwitcherItems[];
     value?: string;
     onValueChange?: (value: string) => void;
     caption?: string;

package/cjs/components/Switcher/Switcher.js

@@ -44,6 +44,7 @@ var _switcherTheme = require("./switcherTheme");var _class, _class2, _temp;var
 
 
 
+
 
 
 Switcher = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Switcher, _React$Component);function Switcher() {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.

package/cjs/components/Switcher/Switcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Switcher.tsx"],"names":["Switcher","rootNode","state","focusedIndex","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","move","step","selectedIndex","length","_focus","index","setState","handleKey","e","preventDefault","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","i","buttonProps","checked","visuallyFocused","onClick","disableFocus","size","disabled","getLabelSizeClassName","styles","captionLarge","theme","captionMedium","captionSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","captionClassName","caption","setRootNode","root","wrap","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"sUAAA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA,gD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCaA,Q,OADZC,kB;;;;;;;;;;;;;;;;;;;;AAqBQC,IAAAA,K,GAAuB;AAC5BC,MAAAA,YAAY,EAAE,IADc,E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDtBC,IAAAA,U,GAAa,UAACC,KAAD,EAAmB;AACtC,UAAI,MAAKC,KAAL,CAAWC,aAAf,EAA8B;AAC5B,cAAKD,KAAL,CAAWC,aAAX,CAAyBF,KAAzB;AACD;AACF,K;;AAEOG,IAAAA,qB,GAAwB,UAACC,IAAD,EAA+C;AAC7E,aAAO,OAAOA,IAAP,KAAgB,QAAhB,GAA2BA,IAA3B,GAAkC,EAAEC,KAAK,EAAED,IAAT,EAAeJ,KAAK,EAAEI,IAAtB,EAAzC;AACD,K;;AAEOE,IAAAA,uB,GAA0B,YAAgB;AAChD,aAAO,MAAKL,KAAL,CAAWM,KAAX,CAAiBC,GAAjB,CAAqB,UAACJ,IAAD,EAAU;AACpC,oCAAkB,MAAKD,qBAAL,CAA2BC,IAA3B,CAAlB,CAAQJ,KAAR,yBAAQA,KAAR;AACA,eAAOA,KAAP;AACD,OAHM,CAAP;AAID,K;;AAEOS,IAAAA,I,GAAO,UAACC,IAAD,EAAkB;AAC/B,UAAIC,aAAa,GAAG,MAAKd,KAAL,CAAWC,YAA/B;;AAEA,UAAI,OAAOa,aAAP,KAAyB,QAA7B,EAAuC;AACrC;AACD;;AAED,UAAMJ,KAAK,GAAG,MAAKD,uBAAL,EAAd;;AAEAK,MAAAA,aAAa,IAAID,IAAjB;;AAEA,UAAIC,aAAa,GAAG,CAApB,EAAuB;AACrBA,QAAAA,aAAa,GAAGJ,KAAK,CAACK,MAAN,GAAe,CAA/B;AACD,OAFD,MAEO,IAAID,aAAa,IAAIJ,KAAK,CAACK,MAA3B,EAAmC;AACxCD,QAAAA,aAAa,GAAG,CAAhB;AACD;;AAED,YAAKE,MAAL,CAAYF,aAAZ;AACD,K;;AAEOE,IAAAA,M,GAAS,UAACC,KAAD,EAAmB;AAClC,YAAKC,QAAL,CAAc,EAAEjB,YAAY,EAAEgB,KAAhB,EAAd;AACD,K;;AAEOE,IAAAA,S,GAAY,UAACC,CAAD,EAA8C;AAChE,UAAMnB,YAAY,GAAG,MAAKD,KAAL,CAAWC,YAAhC;AACA,UAAI,OAAOA,YAAP,KAAwB,QAA5B,EAAsC;AACpC;AACD;;AAED,UAAI,6BAAWmB,CAAX,CAAJ,EAAmB;AACjB,YAAI,MAAKhB,KAAL,CAAWC,aAAf,EAA8B;AAC5B,uCAAkB,MAAKC,qBAAL,CAA2B,MAAKF,KAAL,CAAWM,KAAX,CAAiBT,YAAjB,CAA3B,CAAlB,CAAQE,MAAR,0BAAQA,KAAR;AACA,gBAAKD,UAAL,CAAgBC,MAAhB;AACD;AACD;AACD;;AAED,UAAI,uCAAqBiB,CAArB,CAAJ,EAA6B;AAC3BA,QAAAA,CAAC,CAACC,cAAF;AACA,cAAKT,IAAL,CAAU,iCAAeQ,CAAf,IAAoB,CAAC,CAArB,GAAyB,CAAnC;AACD;AACF,K;;AAEOE,IAAAA,Y,GAAe,YAAM;AAC3B,UAAQnB,KAAR,GAAkB,MAAKC,KAAvB,CAAQD,KAAR;;AAEA,UAAMO,KAAK,GAAG,MAAKD,uBAAL,EAAd;AACA,UAAMc,YAAY,GAAG,UAAIb,KAAJ,EAAWc,OAAX,CAAmBrB,KAAnB,CAArB;AACA,UAAMc,KAAK,GAAGM,YAAY,GAAG,CAAC,CAAhB,GAAoBA,YAApB,GAAmC,CAAjD;;AAEA,YAAKL,QAAL,CAAc,EAAEjB,YAAY,EAAEgB,KAAhB,EAAd;AACD,K;;AAEOQ,IAAAA,W,GAAc,YAAM;AAC1B,YAAKP,QAAL,CAAc,EAAEjB,YAAY,EAAE,IAAhB,EAAd;AACD,K;;AAEOyB,IAAAA,Y,GAAe,YAAM;AAC3B,aAAO,MAAKtB,KAAL,CAAWM,KAAX,CAAiBC,GAAjB,CAAqB,UAACJ,IAAD,EAAOoB,CAAP,EAAa;AACvC,qCAAyB,MAAKrB,qBAAL,CAA2BC,IAA3B,CAAzB,CAAQC,KAAR,0BAAQA,KAAR,CAAeL,KAAf,0BAAeA,KAAf;AACA,YAAMyB,WAAW,GAAG;AAClBC,UAAAA,OAAO,EAAE,MAAKzB,KAAL,CAAWD,KAAX,KAAqBA,KADZ;AAElB2B,UAAAA,eAAe,EAAE,MAAK9B,KAAL,CAAWC,YAAX,KAA4B0B,CAF3B;AAGlBI,UAAAA,OAAO,EAAE,mBAAM;AACb,kBAAK7B,UAAL,CAAgBC,KAAhB;AACD,WALiB;AAMlB6B,UAAAA,YAAY,EAAE,IANI;AAOlBC,UAAAA,IAAI,EAAE,MAAK7B,KAAL,CAAW6B,IAPC;AAQlBC,UAAAA,QAAQ,EAAE,MAAK9B,KAAL,CAAW8B,QARH,EAApB;;AAUA;AACE,uCAAC,cAAD,2BAAQ,GAAG,EAAE/B,KAAb,IAAwByB,WAAxB;AACGpB,UAAAA,KADH,CADF;;;AAKD,OAjBM,CAAP;AAkBD,K;;AAEO2B,IAAAA,qB,GAAwB,YAAc;AAC5C,cAAQ,MAAK/B,KAAL,CAAW6B,IAAnB;AACE,aAAK,OAAL;AACE,iBAAOG,iBAAOC,YAAP,CAAoB,MAAKC,KAAzB,CAAP;AACF,aAAK,QAAL;AACE,iBAAOF,iBAAOG,aAAP,CAAqB,MAAKD,KAA1B,CAAP;AACF,aAAK,OAAL;AACA;AACE,iBAAOF,iBAAOI,YAAP,CAAoB,MAAKF,KAAzB,CAAP,CAPJ;;AASD,K,sDAnJMG,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACH,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAa,qCAAiBA,KAAjB,CAAb,CACA,oBAAO,6BAAC,0BAAD,CAAc,QAAd,IAAuB,KAAK,EAAE,MAAI,CAACA,KAAnC,IAA2C,MAAI,CAACI,UAAL,EAA3C,CAAP,CACD,CAJH,CADF,CAQD,C,QAEOA,U,GAAR,sBAAqB,SACnB,IAAMC,aAAa,GAAG,gCACnBP,iBAAOQ,KAAP,CAAa,KAAKN,KAAlB,CADmB,IACQ,CAAC,CAAC,KAAKlC,KAAL,CAAWwC,KADrB,OAAtB,CAIA,IAAMC,UAAU,GAAG,EACjBC,IAAI,EAAE,UADW,EAEjBC,SAAS,EAAE,KAAK5B,SAFC,EAGjB6B,OAAO,EAAE,KAAK1B,YAHG,EAIjB2B,MAAM,EAAE,KAAKxB,WAJI,EAKjByB,SAAS,EAAEd,iBAAOe,KAAP,EALM,EAAnB,CAQA,IAAMC,gBAAgB,GAAG,iBAAGhB,iBAAOiB,OAAP,CAAe,KAAKf,KAApB,CAAH,EAA+B,KAAKH,qBAAL,EAA/B,CAAzB,CAEA,oBACE,6BAAC,4BAAD,2BAAe,WAAW,EAAE,KAAKmB,WAAjC,IAAkD,KAAKlD,KAAvD,gBACE,sCAAK,SAAS,EAAEgC,iBAAOmB,IAAP,EAAhB,IACG,KAAKnD,KAAL,CAAWiD,OAAX,gBAAqB,sCAAK,SAAS,EAAED,gBAAhB,IAAmC,KAAKhD,KAAL,CAAWiD,OAA9C,CAArB,GAAoF,IADvF,eAEE,sCAAK,SAAS,EAAEjB,iBAAOoB,IAAP,EAAhB,iBACE,sCAAWX,UAAX,CADF,eAEE,sCAAK,SAAS,EAAEF,aAAhB,iBACE,6BAAC,YAAD,QAAQ,KAAKjB,YAAL,EAAR,CADF,CAFF,CAFF,CADF,CADF,CAaD,C,mBAlE2B+B,eAAMC,S,WACpBC,mB,GAAsB,U,UAEtBC,S,GAAY,EACxBhB,KAAK,EAAEiB,mBAAUC,IADO,EAExB5B,QAAQ,EAAE2B,mBAAUC,IAFI,EAGxBpD,KAAK,EAAEmD,mBAAUE,SAAV,CAAoB,CACzBF,mBAAUG,OAAV,CAAkBH,mBAAUI,MAA5B,CADyB,EAEzBJ,mBAAUG,OAAV,CACEH,mBAAUK,KAAV,CAAgB,EACd1D,KAAK,EAAEqD,mBAAUI,MADH,EAEd9D,KAAK,EAAE0D,mBAAUI,MAFH,EAAhB,CADF,CAFyB,CAApB,EAQJE,UAXqB,EAYxBd,OAAO,EAAEQ,mBAAUI,MAZK,EAaxB9D,KAAK,EAAE0D,mBAAUI,MAbO,EAcxB5D,aAAa,EAAEwD,mBAAUO,IAdD,E","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { Group } from '../Group';\nimport { Button, ButtonSize } from '../Button';\nimport { Nullable } from '../../typings/utility-types';\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 { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Switcher.styles';\nimport { getSwitcherTheme } from './switcherTheme';\n\nexport type SwitcherSize = ButtonSize;\n\nexport interface SwitcherProps extends CommonProps {\n  /**\n   * Список строк или список элементов типа `{ label: string, value: string }`\n   */\n  items: Array<string | SwitcherItem>;\n\n  value?: string;\n\n  onValueChange?: (value: string) => void;\n\n  caption?: string;\n\n  error?: boolean;\n\n  /** Размер */\n  size?: SwitcherSize;\n\n  disabled?: boolean;\n}\n\nexport interface SwitcherState {\n  focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n  label: string;\n  value: string;\n}\n\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n  public static __KONTUR_REACT_UI__ = 'Switcher';\n\n  public static propTypes = {\n    error: PropTypes.bool,\n    disabled: PropTypes.bool,\n    items: PropTypes.oneOfType([\n      PropTypes.arrayOf(PropTypes.string),\n      PropTypes.arrayOf(\n        PropTypes.shape({\n          label: PropTypes.string,\n          value: PropTypes.string,\n        }),\n      ),\n    ]).isRequired,\n    caption: PropTypes.string,\n    value: PropTypes.string,\n    onValueChange: PropTypes.func,\n  };\n\n  public state: SwitcherState = {\n    focusedIndex: null,\n  };\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = getSwitcherTheme(theme);\n          return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const listClassName = cx({\n      [styles.error(this.theme)]: !!this.props.error,\n    });\n\n    const inputProps = {\n      type: 'checkbox',\n      onKeyDown: this.handleKey,\n      onFocus: this._handleFocus,\n      onBlur: this._handleBlur,\n      className: styles.input(),\n    };\n\n    const captionClassName = cx(styles.caption(this.theme), this.getLabelSizeClassName());\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div className={styles.root()}>\n          {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}\n          <div className={styles.wrap()}>\n            <input {...inputProps} />\n            <div className={listClassName}>\n              <Group>{this._renderItems()}</Group>\n            </div>\n          </div>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private selectItem = (value: string) => {\n    if (this.props.onValueChange) {\n      this.props.onValueChange(value);\n    }\n  };\n\n  private _extractPropsFromItem = (item: string | SwitcherItem): SwitcherItem => {\n    return typeof item === 'object' ? item : { label: item, value: item };\n  };\n\n  private _extractValuesFromItems = (): string[] => {\n    return this.props.items.map((item) => {\n      const { value } = this._extractPropsFromItem(item);\n      return value;\n    });\n  };\n\n  private move = (step: number) => {\n    let selectedIndex = this.state.focusedIndex;\n\n    if (typeof selectedIndex !== 'number') {\n      return;\n    }\n\n    const items = this._extractValuesFromItems();\n\n    selectedIndex += step;\n\n    if (selectedIndex < 0) {\n      selectedIndex = items.length - 1;\n    } else if (selectedIndex >= items.length) {\n      selectedIndex = 0;\n    }\n\n    this._focus(selectedIndex);\n  };\n\n  private _focus = (index: number) => {\n    this.setState({ focusedIndex: index });\n  };\n\n  private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    const focusedIndex = this.state.focusedIndex;\n    if (typeof focusedIndex !== 'number') {\n      return;\n    }\n\n    if (isKeyEnter(e)) {\n      if (this.props.onValueChange) {\n        const { value } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n        this.selectItem(value);\n      }\n      return;\n    }\n\n    if (isKeyArrowHorizontal(e)) {\n      e.preventDefault();\n      this.move(isKeyArrowLeft(e) ? -1 : 1);\n    }\n  };\n\n  private _handleFocus = () => {\n    const { value } = this.props;\n\n    const items = this._extractValuesFromItems();\n    const currentIndex = [...items].indexOf(value as string);\n    const index = currentIndex > -1 ? currentIndex : 0;\n\n    this.setState({ focusedIndex: index });\n  };\n\n  private _handleBlur = () => {\n    this.setState({ focusedIndex: null });\n  };\n\n  private _renderItems = () => {\n    return this.props.items.map((item, i) => {\n      const { label, value } = this._extractPropsFromItem(item);\n      const buttonProps = {\n        checked: this.props.value === value,\n        visuallyFocused: this.state.focusedIndex === i,\n        onClick: () => {\n          this.selectItem(value);\n        },\n        disableFocus: true,\n        size: this.props.size,\n        disabled: this.props.disabled,\n      };\n      return (\n        <Button key={value} {...buttonProps}>\n          {label}\n        </Button>\n      );\n    });\n  };\n\n  private getLabelSizeClassName = (): string => {\n    switch (this.props.size) {\n      case 'large':\n        return styles.captionLarge(this.theme);\n      case 'medium':\n        return styles.captionMedium(this.theme);\n      case 'small':\n      default:\n        return styles.captionSmall(this.theme);\n    }\n  };\n}\n"]}
+{"version":3,"sources":["Switcher.tsx"],"names":["Switcher","rootNode","state","focusedIndex","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","move","step","selectedIndex","length","_focus","index","setState","handleKey","e","preventDefault","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","i","buttonProps","checked","visuallyFocused","onClick","disableFocus","size","disabled","getLabelSizeClassName","styles","captionLarge","theme","captionMedium","captionSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","captionClassName","caption","setRootNode","root","wrap","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { Group } from '../Group';\nimport { Button, ButtonSize } from '../Button';\nimport { Nullable } from '../../typings/utility-types';\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 { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Switcher.styles';\nimport { getSwitcherTheme } from './switcherTheme';\n\nexport type SwitcherSize = ButtonSize;\ntype SwitcherItems = string | SwitcherItem;\n\nexport interface SwitcherProps extends CommonProps {\n  /**\n   * Список строк или список элементов типа `{ label: string, value: string }`\n   */\n  items: SwitcherItems[];\n\n  value?: string;\n\n  onValueChange?: (value: string) => void;\n\n  caption?: string;\n\n  error?: boolean;\n\n  /** Размер */\n  size?: SwitcherSize;\n\n  disabled?: boolean;\n}\n\nexport interface SwitcherState {\n  focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n  label: string;\n  value: string;\n}\n\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n  public static __KONTUR_REACT_UI__ = 'Switcher';\n\n  public static propTypes = {\n    error: PropTypes.bool,\n    disabled: PropTypes.bool,\n    items: PropTypes.oneOfType([\n      PropTypes.arrayOf(PropTypes.string),\n      PropTypes.arrayOf(\n        PropTypes.shape({\n          label: PropTypes.string,\n          value: PropTypes.string,\n        }),\n      ),\n    ]).isRequired,\n    caption: PropTypes.string,\n    value: PropTypes.string,\n    onValueChange: PropTypes.func,\n  };\n\n  public state: SwitcherState = {\n    focusedIndex: null,\n  };\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = getSwitcherTheme(theme);\n          return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const listClassName = cx({\n      [styles.error(this.theme)]: !!this.props.error,\n    });\n\n    const inputProps = {\n      type: 'checkbox',\n      onKeyDown: this.handleKey,\n      onFocus: this._handleFocus,\n      onBlur: this._handleBlur,\n      className: styles.input(),\n    };\n\n    const captionClassName = cx(styles.caption(this.theme), this.getLabelSizeClassName());\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div className={styles.root()}>\n          {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}\n          <div className={styles.wrap()}>\n            <input {...inputProps} />\n            <div className={listClassName}>\n              <Group>{this._renderItems()}</Group>\n            </div>\n          </div>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private selectItem = (value: string) => {\n    if (this.props.onValueChange) {\n      this.props.onValueChange(value);\n    }\n  };\n\n  private _extractPropsFromItem = (item: string | SwitcherItem): SwitcherItem => {\n    return typeof item === 'object' ? item : { label: item, value: item };\n  };\n\n  private _extractValuesFromItems = (): string[] => {\n    return this.props.items.map((item) => {\n      const { value } = this._extractPropsFromItem(item);\n      return value;\n    });\n  };\n\n  private move = (step: number) => {\n    let selectedIndex = this.state.focusedIndex;\n\n    if (typeof selectedIndex !== 'number') {\n      return;\n    }\n\n    const items = this._extractValuesFromItems();\n\n    selectedIndex += step;\n\n    if (selectedIndex < 0) {\n      selectedIndex = items.length - 1;\n    } else if (selectedIndex >= items.length) {\n      selectedIndex = 0;\n    }\n\n    this._focus(selectedIndex);\n  };\n\n  private _focus = (index: number) => {\n    this.setState({ focusedIndex: index });\n  };\n\n  private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    const focusedIndex = this.state.focusedIndex;\n    if (typeof focusedIndex !== 'number') {\n      return;\n    }\n\n    if (isKeyEnter(e)) {\n      if (this.props.onValueChange) {\n        const { value } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n        this.selectItem(value);\n      }\n      return;\n    }\n\n    if (isKeyArrowHorizontal(e)) {\n      e.preventDefault();\n      this.move(isKeyArrowLeft(e) ? -1 : 1);\n    }\n  };\n\n  private _handleFocus = () => {\n    const { value } = this.props;\n\n    const items = this._extractValuesFromItems();\n    const currentIndex = [...items].indexOf(value as string);\n    const index = currentIndex > -1 ? currentIndex : 0;\n\n    this.setState({ focusedIndex: index });\n  };\n\n  private _handleBlur = () => {\n    this.setState({ focusedIndex: null });\n  };\n\n  private _renderItems = () => {\n    return this.props.items.map((item, i) => {\n      const { label, value } = this._extractPropsFromItem(item);\n      const buttonProps = {\n        checked: this.props.value === value,\n        visuallyFocused: this.state.focusedIndex === i,\n        onClick: () => {\n          this.selectItem(value);\n        },\n        disableFocus: true,\n        size: this.props.size,\n        disabled: this.props.disabled,\n      };\n      return (\n        <Button key={value} {...buttonProps}>\n          {label}\n        </Button>\n      );\n    });\n  };\n\n  private getLabelSizeClassName = (): string => {\n    switch (this.props.size) {\n      case 'large':\n        return styles.captionLarge(this.theme);\n      case 'medium':\n        return styles.captionMedium(this.theme);\n      case 'small':\n      default:\n        return styles.captionSmall(this.theme);\n    }\n  };\n}\n"]}

package/cjs/components/Switcher/Switcher.styles.js

@@ -59,8 +59,8 @@ var styles = (0, _Emotion.memoizeStyle)({
   error: function error(t) {
     var insideWidth = parseInt(t.btnBorderWidth);
     var outsideWidth = parseInt(t.switcherOutlineWidth) - insideWidth + "px";
-    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: 2px;\n      box-shadow: inset 0 0 0 ", "px ", ", 0 0 0 ", " ", ";\n    "])),
-
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: ", ";\n      box-shadow: inset 0 0 0 ", "px ", ", 0 0 0 ", " ", ";\n    "])),
+    t.switcherBorderRadius,
     insideWidth, t.borderColorError, outsideWidth, t.borderColorError);
 
   } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["Switcher.styles.ts"],"names":["styles","root","css","wrap","input","caption","t","switcherTextColor","captionSmall","switcherCaptionGapSmall","switcherCaptionFontSizeSmall","switcherCaptionLineHeightSmall","captionMedium","switcherCaptionGapMedium","switcherCaptionFontSizeMedium","switcherCaptionLineHeightMedium","captionLarge","switcherCaptionGapLarge","switcherCaptionFontSizeLarge","switcherCaptionLineHeightLarge","error","insideWidth","parseInt","btnBorderWidth","outsideWidth","switcherOutlineWidth","borderColorError"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;AAGD,GALgC;;AAOjCC,EAAAA,IAPiC,kBAO1B;AACL,eAAOD,YAAP;;;;AAID,GAZgC;;AAcjCE,EAAAA,KAdiC,mBAczB;AACN,eAAOF,YAAP;;;;;;AAMD,GArBgC;;AAuBjCG,EAAAA,OAvBiC,mBAuBzBC,CAvByB,EAuBf;AAChB,eAAOJ,YAAP;AACWI,IAAAA,CAAC,CAACC,iBADb;;;;AAKD,GA7BgC;;AA+BjCC,EAAAA,YA/BiC,wBA+BpBF,CA/BoB,EA+BV;AACrB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACG,uBADpB;AAEeH,IAAAA,CAAC,CAACI,4BAFjB;AAGiBJ,IAAAA,CAAC,CAACK,8BAHnB;;AAKD,GArCgC;;AAuCjCC,EAAAA,aAvCiC,yBAuCnBN,CAvCmB,EAuCT;AACtB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACO,wBADpB;AAEeP,IAAAA,CAAC,CAACQ,6BAFjB;AAGiBR,IAAAA,CAAC,CAACS,+BAHnB;;AAKD,GA7CgC;;AA+CjCC,EAAAA,YA/CiC,wBA+CpBV,CA/CoB,EA+CV;AACrB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACW,uBADpB;AAEeX,IAAAA,CAAC,CAACY,4BAFjB;AAGiBZ,IAAAA,CAAC,CAACa,8BAHnB;;AAKD,GArDgC;;AAuDjCC,EAAAA,KAvDiC,iBAuD3Bd,CAvD2B,EAuDjB;AACd,QAAMe,WAAW,GAAGC,QAAQ,CAAChB,CAAC,CAACiB,cAAH,CAA5B;AACA,QAAMC,YAAY,GAAMF,QAAQ,CAAChB,CAAC,CAACmB,oBAAH,CAAR,GAAmCJ,WAAzC,OAAlB;AACA,eAAOnB,YAAP;;AAE4BmB,IAAAA,WAF5B,EAE6Cf,CAAC,CAACoB,gBAF/C,EAE0EF,YAF1E,EAE0FlB,CAAC,CAACoB,gBAF5F;;AAID,GA9DgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      line-height: normal;\n    `;\n  },\n\n  wrap() {\n    return css`\n      display: inline-block;\n      vertical-align: middle;\n    `;\n  },\n\n  input() {\n    return css`\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    `;\n  },\n\n  caption(t: Theme) {\n    return css`\n      color: ${t.switcherTextColor};\n      vertical-align: middle;\n      display: inline-block;\n    `;\n  },\n\n  captionSmall(t: Theme) {\n    return css`\n      margin-right: ${t.switcherCaptionGapSmall};\n      font-size: ${t.switcherCaptionFontSizeSmall};\n      line-height: ${t.switcherCaptionLineHeightSmall};\n    `;\n  },\n\n  captionMedium(t: Theme) {\n    return css`\n      margin-right: ${t.switcherCaptionGapMedium};\n      font-size: ${t.switcherCaptionFontSizeMedium};\n      line-height: ${t.switcherCaptionLineHeightMedium};\n    `;\n  },\n\n  captionLarge(t: Theme) {\n    return css`\n      margin-right: ${t.switcherCaptionGapLarge};\n      font-size: ${t.switcherCaptionFontSizeLarge};\n      line-height: ${t.switcherCaptionLineHeightLarge};\n    `;\n  },\n\n  error(t: Theme) {\n    const insideWidth = parseInt(t.btnBorderWidth);\n    const outsideWidth = `${parseInt(t.switcherOutlineWidth) - insideWidth}px`;\n    return css`\n      border-radius: 2px;\n      box-shadow: inset 0 0 0 ${insideWidth}px ${t.borderColorError}, 0 0 0 ${outsideWidth} ${t.borderColorError};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Switcher.styles.ts"],"names":["styles","root","css","wrap","input","caption","t","switcherTextColor","captionSmall","switcherCaptionGapSmall","switcherCaptionFontSizeSmall","switcherCaptionLineHeightSmall","captionMedium","switcherCaptionGapMedium","switcherCaptionFontSizeMedium","switcherCaptionLineHeightMedium","captionLarge","switcherCaptionGapLarge","switcherCaptionFontSizeLarge","switcherCaptionLineHeightLarge","error","insideWidth","parseInt","btnBorderWidth","outsideWidth","switcherOutlineWidth","switcherBorderRadius","borderColorError"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;AAGD,GALgC;;AAOjCC,EAAAA,IAPiC,kBAO1B;AACL,eAAOD,YAAP;;;;AAID,GAZgC;;AAcjCE,EAAAA,KAdiC,mBAczB;AACN,eAAOF,YAAP;;;;;;AAMD,GArBgC;;AAuBjCG,EAAAA,OAvBiC,mBAuBzBC,CAvByB,EAuBf;AAChB,eAAOJ,YAAP;AACWI,IAAAA,CAAC,CAACC,iBADb;;;;AAKD,GA7BgC;;AA+BjCC,EAAAA,YA/BiC,wBA+BpBF,CA/BoB,EA+BV;AACrB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACG,uBADpB;AAEeH,IAAAA,CAAC,CAACI,4BAFjB;AAGiBJ,IAAAA,CAAC,CAACK,8BAHnB;;AAKD,GArCgC;;AAuCjCC,EAAAA,aAvCiC,yBAuCnBN,CAvCmB,EAuCT;AACtB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACO,wBADpB;AAEeP,IAAAA,CAAC,CAACQ,6BAFjB;AAGiBR,IAAAA,CAAC,CAACS,+BAHnB;;AAKD,GA7CgC;;AA+CjCC,EAAAA,YA/CiC,wBA+CpBV,CA/CoB,EA+CV;AACrB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACW,uBADpB;AAEeX,IAAAA,CAAC,CAACY,4BAFjB;AAGiBZ,IAAAA,CAAC,CAACa,8BAHnB;;AAKD,GArDgC;;AAuDjCC,EAAAA,KAvDiC,iBAuD3Bd,CAvD2B,EAuDjB;AACd,QAAMe,WAAW,GAAGC,QAAQ,CAAChB,CAAC,CAACiB,cAAH,CAA5B;AACA,QAAMC,YAAY,GAAMF,QAAQ,CAAChB,CAAC,CAACmB,oBAAH,CAAR,GAAmCJ,WAAzC,OAAlB;AACA,eAAOnB,YAAP;AACmBI,IAAAA,CAAC,CAACoB,oBADrB;AAE4BL,IAAAA,WAF5B,EAE6Cf,CAAC,CAACqB,gBAF/C,EAE0EH,YAF1E,EAE0FlB,CAAC,CAACqB,gBAF5F;;AAID,GA9DgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      line-height: normal;\n    `;\n  },\n\n  wrap() {\n    return css`\n      display: inline-block;\n      vertical-align: middle;\n    `;\n  },\n\n  input() {\n    return css`\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    `;\n  },\n\n  caption(t: Theme) {\n    return css`\n      color: ${t.switcherTextColor};\n      vertical-align: middle;\n      display: inline-block;\n    `;\n  },\n\n  captionSmall(t: Theme) {\n    return css`\n      margin-right: ${t.switcherCaptionGapSmall};\n      font-size: ${t.switcherCaptionFontSizeSmall};\n      line-height: ${t.switcherCaptionLineHeightSmall};\n    `;\n  },\n\n  captionMedium(t: Theme) {\n    return css`\n      margin-right: ${t.switcherCaptionGapMedium};\n      font-size: ${t.switcherCaptionFontSizeMedium};\n      line-height: ${t.switcherCaptionLineHeightMedium};\n    `;\n  },\n\n  captionLarge(t: Theme) {\n    return css`\n      margin-right: ${t.switcherCaptionGapLarge};\n      font-size: ${t.switcherCaptionFontSizeLarge};\n      line-height: ${t.switcherCaptionLineHeightLarge};\n    `;\n  },\n\n  error(t: Theme) {\n    const insideWidth = parseInt(t.btnBorderWidth);\n    const outsideWidth = `${parseInt(t.switcherOutlineWidth) - insideWidth}px`;\n    return css`\n      border-radius: ${t.switcherBorderRadius};\n      box-shadow: inset 0 0 0 ${insideWidth}px ${t.borderColorError}, 0 0 0 ${outsideWidth} ${t.borderColorError};\n    `;\n  },\n});\n"]}

package/cjs/components/Tabs/Indicator.js

@@ -7,6 +7,7 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
+var _getDOMRect = require("../../lib/dom/getDOMRect");
 
 var _Indicator = require("./Indicator.styles");
 var _TabsContext = require("./TabsContext");var _class, _class2, _temp;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}var
@@ -116,7 +117,7 @@ Indicator = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/fun
     var htmlNode = (0, _rootNode.getRootNode)(node);
 
     if (htmlNode && htmlNode instanceof HTMLElement) {
-      var rect = htmlNode.getBoundingClientRect();
+      var rect = (0, _getDOMRect.getDOMRect)(htmlNode);
       if (this.props.vertical) {
         return {
           width: this.theme.tabBorderWidth,