@skbkontur/react-ui 0.0.0-30619a873c → 0.0.0-32550fb571

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_globalObject","_ThemeContext","_useLocaleForControl","_XIcon20Regular","_Emotion","_keyListener","_SidePage","_locale","_SidePageHeader","_SidePageContext","SidePageCloseButton","exports","_cx","_useState","useState","isFocusedByTab","setIsFocusedByTab","locale","useLocaleForControl","SidePageLocaleHelper","theme","useContext","ThemeContext","sidePageContext","SidePageContext","handleFocus","globalObject","requestAnimationFrame","keyListener","isTabPressed","handleBlur","icon","default","createElement","XIcon20Regular","align","closeButtonAriaLabel","className","cx","styles","close","closeFocus","onFocus","onBlur","onClick","requestClose","SidePageHeaderDataTids","__KONTUR_REACT_UI__","displayName"],"sources":["SidePageCloseButton.tsx"],"sourcesContent":["import React, { useContext, useState } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl';\nimport { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageLocaleHelper } from './locale';\nimport { SidePageHeaderDataTids } from './SidePageHeader';\nimport { SidePageContext } from './SidePageContext';\n\nexport const SidePageCloseButton = () => {\n  const [isFocusedByTab, setIsFocusedByTab] = useState(false);\n\n  const locale = useLocaleForControl('SidePage', SidePageLocaleHelper);\n  const theme = useContext(ThemeContext);\n  const sidePageContext = useContext(SidePageContext);\n\n  const handleFocus = () => {\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setIsFocusedByTab(true);\n      }\n    });\n  };\n\n  const handleBlur = () => {\n    setIsFocusedByTab(false);\n  };\n\n  const icon = <XIcon20Regular align=\"none\" />;\n  return (\n    <button\n      aria-label={locale?.closeButtonAriaLabel}\n      className={cx(styles.close(theme), {\n        [styles.closeFocus(theme)]: isFocusedByTab,\n      })}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onClick={sidePageContext.requestClose}\n      data-tid={SidePageHeaderDataTids.close}\n    >\n      {icon}\n    </button>\n  );\n};\n\nSidePageCloseButton.__KONTUR_REACT_UI__ = 'SidePageCloseButton';\nSidePageCloseButton.displayName = 'SidePageCloseButton';\n"],"mappings":"2KAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;;AAEA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,oBAAA,GAAAH,OAAA;AACA,IAAAI,eAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AACA,IAAAM,YAAA,GAAAN,OAAA;;AAEA,IAAAO,SAAA,GAAAP,OAAA;AACA,IAAAQ,OAAA,GAAAR,OAAA;AACA,IAAAS,eAAA,GAAAT,OAAA;AACA,IAAAU,gBAAA,GAAAV,OAAA;;AAEO,IAAMW,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAA,EAAS,KAAAE,GAAA;EACvC,IAAAC,SAAA,GAA4C,IAAAC,eAAQ,EAAC,KAAK,CAAC,CAApDC,cAAc,GAAAF,SAAA,IAAEG,iBAAiB,GAAAH,SAAA;;EAExC,IAAMI,MAAM,GAAG,IAAAC,wCAAmB,EAAC,UAAU,EAAEC,4BAAoB,CAAC;EACpE,IAAMC,KAAK,GAAG,IAAAC,iBAAU,EAACC,0BAAY,CAAC;EACtC,IAAMC,eAAe,GAAG,IAAAF,iBAAU,EAACG,gCAAe,CAAC;;EAEnD,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxBC,0BAAY,CAACC,qBAAqB,YAAlCD,0BAAY,CAACC,qBAAqB,CAAG,YAAM;MACzC,IAAIC,wBAAW,CAACC,YAAY,EAAE;QAC5Bb,iBAAiB,CAAC,IAAI,CAAC;MACzB;IACF,CAAC,CAAC;EACJ,CAAC;;EAED,IAAMc,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;IACvBd,iBAAiB,CAAC,KAAK,CAAC;EAC1B,CAAC;;EAED,IAAMe,IAAI,gBAAGlC,MAAA,CAAAmC,OAAA,CAAAC,aAAA,CAAC9B,eAAA,CAAA+B,cAAc,IAACC,KAAK,EAAC,MAAM,EAAE,CAAC;EAC5C;IACEtC,MAAA,CAAAmC,OAAA,CAAAC,aAAA;MACE,cAAYhB,MAAM,oBAANA,MAAM,CAAEmB,oBAAqB;MACzCC,SAAS,EAAE,IAAAC,WAAE,EAACC,gBAAM,CAACC,KAAK,CAACpB,KAAK,CAAC,GAAAR,GAAA,OAAAA,GAAA;MAC9B2B,gBAAM,CAACE,UAAU,CAACrB,KAAK,CAAC,IAAGL,cAAc,EAAAH,GAAA;MAC3C,CAAE;MACH8B,OAAO,EAAEjB,WAAY;MACrBkB,MAAM,EAAEb,UAAW;MACnBc,OAAO,EAAErB,eAAe,CAACsB,YAAa;MACtC,YAAUC,sCAAsB,CAACN,KAAM;;IAEtCT;IACK,CAAC;;AAEb,CAAC;;AAEDrB,mBAAmB,CAACqC,mBAAmB,GAAG,qBAAqB;AAC/DrC,mBAAmB,CAACsC,WAAW,GAAG,qBAAqB","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_globalObject","_ThemeContext","_useLocaleForControl","_XIcon20Regular","_Emotion","_keyListener","_ThemeHelpers","_SidePage","_locale","_SidePageHeader","_SidePageContext","SidePageCloseButton","exports","_ref","_cx","isHeaderFixed","isMobile","_useState","useState","isFocusedByTab","setIsFocusedByTab","locale","useLocaleForControl","SidePageLocaleHelper","theme","useContext","ThemeContext","sidePageContext","SidePageContext","handleFocus","globalObject","requestAnimationFrame","keyListener","isTabPressed","handleBlur","icon","default","createElement","XIcon20Regular","align","versionGTE5_1","isThemeGTE","closeButtonAriaLabel","className","cx","styles","close","close5_1","closeFocus","closeFocus5_1","closeSticky","closeMobile","onFocus","onBlur","onClick","requestClose","SidePageHeaderDataTids","__KONTUR_REACT_UI__","displayName"],"sources":["SidePageCloseButton.tsx"],"sourcesContent":["import React, { useContext, useState } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl';\nimport { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { CommonProps } from '../../internal/CommonWrapper';\nimport { isThemeGTE } from '../../lib/theming/ThemeHelpers';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageLocaleHelper } from './locale';\nimport { SidePageHeaderDataTids } from './SidePageHeader';\nimport { SidePageContext } from './SidePageContext';\n\nexport interface SidePageCloseButtonProps extends CommonProps {\n  isHeaderFixed: boolean;\n  isMobile?: boolean;\n}\n\nexport const SidePageCloseButton = ({ isHeaderFixed, isMobile }: SidePageCloseButtonProps) => {\n  const [isFocusedByTab, setIsFocusedByTab] = useState(false);\n\n  const locale = useLocaleForControl('SidePage', SidePageLocaleHelper);\n  const theme = useContext(ThemeContext);\n  const sidePageContext = useContext(SidePageContext);\n\n  const handleFocus = () => {\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setIsFocusedByTab(true);\n      }\n    });\n  };\n\n  const handleBlur = () => {\n    setIsFocusedByTab(false);\n  };\n\n  const icon = <XIcon20Regular align=\"none\" />;\n  const versionGTE5_1 = isThemeGTE(theme, '5.1');\n  return (\n    <button\n      aria-label={locale?.closeButtonAriaLabel}\n      className={cx(styles.close(theme), {\n        [styles.close5_1(theme)]: versionGTE5_1,\n        [styles.closeFocus(theme)]: isFocusedByTab && !versionGTE5_1,\n        [styles.closeFocus5_1(theme)]: isFocusedByTab && versionGTE5_1,\n        [styles.closeSticky(theme)]: isHeaderFixed && versionGTE5_1,\n        [styles.closeMobile(theme)]: isMobile && versionGTE5_1,\n      })}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onClick={sidePageContext.requestClose}\n      data-tid={SidePageHeaderDataTids.close}\n    >\n      {icon}\n    </button>\n  );\n};\n\nSidePageCloseButton.__KONTUR_REACT_UI__ = 'SidePageCloseButton';\nSidePageCloseButton.displayName = 'SidePageCloseButton';\n"],"mappings":"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","ignoreList":[]}

package/cjs/components/SidePage/SidePageHeader.d.ts

@@ -33,7 +33,6 @@ export declare class SidePageHeader extends React.Component<SidePageHeaderProps,
     private sticky;
     private lastRegularHeight;
     private setRootNode;
-    private closeIcon;
     get regularHeight(): number;
     get fixedHeaderHeight(): number;
     componentDidMount: () => void;

package/cjs/components/SidePage/SidePageHeader.js

@@ -11,6 +11,7 @@ var _decorator = require("../ResponsiveLayout/decorator");
 var _rootNode = require("../../lib/rootNode");
 var _getDOMRect = require("../../lib/dom/getDOMRect");
 var _ModalSeparator = require("../Modal/ModalSeparator");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 
 var _SidePage = require("./SidePage.styles");
 var _SidePageContext = require("./SidePageContext");
@@ -63,8 +64,6 @@ SidePageHeader = exports.SidePageHeader = (0, _decorator.responsiveLayout)(_clas
     sticky = null;_this.
     lastRegularHeight = 0;_this.
 
-    closeIcon = /*#__PURE__*/_react.default.createElement(_SidePageCloseButton.SidePageCloseButton, null);_this.
-
 
 
 
@@ -157,6 +156,7 @@ SidePageHeader = exports.SidePageHeader = (0, _decorator.responsiveLayout)(_clas
         _this.renderClose(fixed), /*#__PURE__*/
         _react.default.createElement("div", {
           className: (0, _Emotion.cx)(_SidePage.styles.title(_this.theme), (_cx2 = {}, _cx2[
+          _SidePage.styles.title5_1(_this.theme)] = (0, _ThemeHelpers.isThemeGTE)(_this.theme, '5.1'), _cx2[
           _SidePage.styles.mobileTitle(_this.theme)] = _this.isMobileLayout, _cx2[
           _SidePage.styles.titleFixed()] = fixed, _cx2)
           ) },
@@ -171,18 +171,22 @@ SidePageHeader = exports.SidePageHeader = (0, _decorator.responsiveLayout)(_clas
 
     renderClose = function (fixed) {var _cx3;
       var stickyOffset = parseInt(_this.theme.sidePageHeaderStickyOffset);
+      var versionGTE5_1 = (0, _ThemeHelpers.isThemeGTE)(_this.theme, '5.1');
       return /*#__PURE__*/(
         _react.default.createElement("div", {
           className: (0, _Emotion.cx)(_SidePage.styles.wrapperClose(_this.theme), (_cx3 = {}, _cx3[
+          _SidePage.styles.wrapperClose5_1(_this.theme)] = versionGTE5_1, _cx3[
           _SidePage.styles.wrapperCloseFixed(_this.theme)] = fixed, _cx3[
-          _SidePage.styles.mobileWrapperClose(_this.theme)] = _this.isMobileLayout, _cx3)
+          _SidePage.styles.wrapperCloseFixed5_1(_this.theme)] = fixed && versionGTE5_1, _cx3[
+          _SidePage.styles.mobileWrapperClose(_this.theme)] = _this.isMobileLayout, _cx3[
+          _SidePage.styles.mobileWrapperClose5_1(_this.theme)] = _this.isMobileLayout && versionGTE5_1, _cx3)
           ) },
 
-        _this.isMobileLayout ?
-        _this.closeIcon : /*#__PURE__*/
+        _this.isMobileLayout ? /*#__PURE__*/
+        _react.default.createElement(_SidePageCloseButton.SidePageCloseButton, { isHeaderFixed: fixed, isMobile: true }) : /*#__PURE__*/
 
-        _react.default.createElement(_Sticky.Sticky, { side: "top", offset: stickyOffset },
-        _this.closeIcon
+        _react.default.createElement(_Sticky.Sticky, { side: "top", offset: stickyOffset }, /*#__PURE__*/
+        _react.default.createElement(_SidePageCloseButton.SidePageCloseButton, { isHeaderFixed: fixed })
         )
 
         ));

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_globalObject","_Sticky","_utils","_ThemeContext","_CommonWrapper","_Emotion","_decorator","_rootNode","_getDOMRect","_ModalSeparator","_SidePage","_SidePageContext","_SidePageCloseButton","_class","_SidePageHeader","SidePageHeaderDataTids","exports","root","close","SidePageHeader","responsiveLayout","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","context","state","isReadyToFix","wrapper","sticky","lastRegularHeight","closeIcon","default","createElement","SidePageCloseButton","componentDidMount","globalObject","addEventListener","update","setHasHeader","headerRef","componentWillUnmount","removeEventListener","_this$sticky","reflow","updateReadyToFix","renderHeader","fixed","_cx","_cx2","isDisplayed","props","hasSeparator","className","cx","styles","header","theme","headerFixed","mobileHeader","isMobileLayout","renderClose","title","mobileTitle","titleFixed","isFunction","children","ModalSeparator","_cx3","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","wrapperCloseFixed","mobileWrapperClose","Sticky","side","offset","wrapperScrolledUp","getDOMRect","top","regularHeight","fixedHeaderHeight","setState","_extends2","wrapperRef","el","stickyRef","_inheritsLoose2","_proto","prototype","render","_this2","ThemeContext","Consumer","renderMain","getStickyProp","isStickyDesktop","isStickyMobile","CommonWrapper","rootNodeRef","setRootNode","ref","headerWrapper","_createClass2","key","get","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","React","Component","__KONTUR_REACT_UI__","displayName","contextType","SidePageContext","defaultProps"],"sources":["SidePageHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { Sticky } from '../Sticky';\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 { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { ModalSeparator } from '../Modal/ModalSeparator';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageCloseButton } from './SidePageCloseButton';\n\nexport interface SidePageHeaderProps extends Omit<CommonProps, 'children'> {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  /** Закрепляет хедер сверху сайдпейджа. */\n  sticky?: boolean;\n\n  /** Определяет, нужно ли показывать ModalSeparator. */\n  hasSeparator?: boolean;\n}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n}\n\nexport const SidePageHeaderDataTids = {\n  root: 'SidePageHeader__root',\n  close: 'SidePage__close',\n} as const;\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  public static displayName = '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  };\n\n  public static defaultProps: Partial<SidePageHeaderProps> = {\n    hasSeparator: 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  private closeIcon = (<SidePageCloseButton />);\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    globalObject.addEventListener?.('scroll', this.update, true);\n    this.context.setHasHeader?.();\n    this.context.headerRef(this);\n  };\n\n  public componentWillUnmount = () => {\n    globalObject.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    const header = this.renderHeader;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={SidePageHeaderDataTids.root} ref={this.wrapperRef} className={styles.headerWrapper()}>\n          {isStickyDesktop || isStickyMobile ? (\n            <Sticky ref={this.stickyRef} side=\"top\">\n              {header}\n            </Sticky>\n          ) : (\n            header()\n          )}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    const isDisplayed = this.props.hasSeparator || fixed;\n    return (\n      <div>\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        {isDisplayed && <ModalSeparator fixed={fixed} />}\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 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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_globalObject","_Sticky","_utils","_ThemeContext","_CommonWrapper","_Emotion","_decorator","_rootNode","_getDOMRect","_ModalSeparator","_ThemeHelpers","_SidePage","_SidePageContext","_SidePageCloseButton","_class","_SidePageHeader","SidePageHeaderDataTids","exports","root","close","SidePageHeader","responsiveLayout","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","context","state","isReadyToFix","wrapper","sticky","lastRegularHeight","componentDidMount","globalObject","addEventListener","update","setHasHeader","headerRef","componentWillUnmount","removeEventListener","_this$sticky","reflow","updateReadyToFix","renderHeader","fixed","_cx","_cx2","isDisplayed","props","hasSeparator","default","createElement","className","cx","styles","header","theme","headerFixed","mobileHeader","isMobileLayout","renderClose","title","title5_1","isThemeGTE","mobileTitle","titleFixed","isFunction","children","ModalSeparator","_cx3","stickyOffset","parseInt","sidePageHeaderStickyOffset","versionGTE5_1","wrapperClose","wrapperClose5_1","wrapperCloseFixed","wrapperCloseFixed5_1","mobileWrapperClose","mobileWrapperClose5_1","SidePageCloseButton","isHeaderFixed","isMobile","Sticky","side","offset","wrapperScrolledUp","getDOMRect","top","regularHeight","fixedHeaderHeight","setState","_extends2","wrapperRef","el","stickyRef","_inheritsLoose2","_proto","prototype","render","_this2","ThemeContext","Consumer","renderMain","getStickyProp","isStickyDesktop","isStickyMobile","CommonWrapper","rootNodeRef","setRootNode","ref","headerWrapper","_createClass2","key","get","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","React","Component","__KONTUR_REACT_UI__","displayName","contextType","SidePageContext","defaultProps"],"sources":["SidePageHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { Sticky } from '../Sticky';\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 { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { ModalSeparator } from '../Modal/ModalSeparator';\nimport { isThemeGTE } from '../../lib/theming/ThemeHelpers';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageCloseButton } from './SidePageCloseButton';\n\nexport interface SidePageHeaderProps extends Omit<CommonProps, 'children'> {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  /** Закрепляет хедер сверху сайдпейджа. */\n  sticky?: boolean;\n\n  /** Определяет, нужно ли показывать ModalSeparator. */\n  hasSeparator?: boolean;\n}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n}\n\nexport const SidePageHeaderDataTids = {\n  root: 'SidePageHeader__root',\n  close: 'SidePage__close',\n} as const;\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  public static displayName = '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  };\n\n  public static defaultProps: Partial<SidePageHeaderProps> = {\n    hasSeparator: 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  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    globalObject.addEventListener?.('scroll', this.update, true);\n    this.context.setHasHeader?.();\n    this.context.headerRef(this);\n  };\n\n  public componentWillUnmount = () => {\n    globalObject.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    const header = this.renderHeader;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={SidePageHeaderDataTids.root} ref={this.wrapperRef} className={styles.headerWrapper()}>\n          {isStickyDesktop || isStickyMobile ? (\n            <Sticky ref={this.stickyRef} side=\"top\">\n              {header}\n            </Sticky>\n          ) : (\n            header()\n          )}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    const isDisplayed = this.props.hasSeparator || fixed;\n    return (\n      <div>\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.title5_1(this.theme)]: isThemeGTE(this.theme, '5.1'),\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        {isDisplayed && <ModalSeparator fixed={fixed} />}\n      </div>\n    );\n  };\n\n  private renderClose = (fixed: boolean) => {\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n    const versionGTE5_1 = isThemeGTE(this.theme, '5.1');\n    return (\n      <div\n        className={cx(styles.wrapperClose(this.theme), {\n          [styles.wrapperClose5_1(this.theme)]: versionGTE5_1,\n          [styles.wrapperCloseFixed(this.theme)]: fixed,\n          [styles.wrapperCloseFixed5_1(this.theme)]: fixed && versionGTE5_1,\n          [styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n          [styles.mobileWrapperClose5_1(this.theme)]: this.isMobileLayout && versionGTE5_1,\n        })}\n      >\n        {this.isMobileLayout ? (\n          <SidePageCloseButton isHeaderFixed={fixed} isMobile />\n        ) : (\n          <Sticky side=\"top\" offset={stickyOffset}>\n            <SidePageCloseButton isHeaderFixed={fixed} />\n          </Sticky>\n        )}\n      </div>\n    );\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"],"mappings":"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","ignoreList":[]}

package/cjs/components/SidePage/__creevey__/SidePage.creevey.mts

@@ -0,0 +1,421 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+import { SidePageFooterDataTids } from '../SidePageFooter';
+
+const simpleTests = () => {
+  test('open side-page', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
+      .perform();
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'open side-page');
+  });
+};
+
+kind('SidePage', () => {
+  story('SidePageOverAnotherSidePageStory', () => {
+    test('open internal side-page', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="SidePage.Body"] button' }))
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open internal side-page');
+    });
+
+    test('close internal side-page', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="SidePage.Body"] button' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(
+          context.webdriver.findElement({ css: '.react-ui:last-child [data-comp-name~="SidePage.Footer"] button' }),
+        )
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'close internal side-page');
+    });
+  });
+
+  story('StickySidePageHeaderWhenAnotherSidePageStory', () => {
+    test('sticky header, open and close internal side-page', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="SidePage.Body"] button' }))
+        .perform();
+      await context.webdriver.executeScript(function () {
+        const sidepageContainer = window.document.querySelector('[data-tid="SidePage__container"]');
+
+        if (sidepageContainer) {
+          sidepageContainer.scrollTop = 3000;
+        }
+      });
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(
+          context.webdriver.findElement({ css: '.react-ui:last-child [data-comp-name~="SidePage.Footer"] button' }),
+        )
+        .perform();
+      await context.matchImage(
+        await context.webdriver.takeScreenshot(),
+        'sticky header, open and close internal side-page',
+      );
+    });
+  });
+
+  story('Simple', () => {
+    simpleTests();
+  });
+
+  story('MobileSimple', () => {
+    simpleTests();
+  });
+
+  story('BodyWithoutFooter', () => {
+    test('scroll to bottom', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
+        .perform();
+      await context.webdriver.executeScript(function () {
+        const sidepageContainer = window.document.querySelector('[data-tid="SidePage__container"]') as HTMLElement;
+
+        sidepageContainer.scrollTop = 3000;
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'scroll to bottom');
+    });
+  });
+
+  story('BodyWithoutHeader', () => {
+    test('open side-page without header', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
+        .perform();
+      await delay(100);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open side-page without header');
+    });
+  });
+
+  story('SidePageWithFocusLockWhenBackgroundBlocked', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'unstable tests in firefox2022': { in: /^(?!\b(chrome2022)\b)/ } } });
+
+    test('open side-page', async (context) => {
+      const pressTab = async () => {
+        await context.webdriver
+          .actions({
+            bridge: true,
+          })
+          .sendKeys(Key.TAB)
+          .perform();
+        await delay(4000);
+      };
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
+        .perform();
+      await delay(1000);
+      await pressTab();
+      const firstTimeTabPress = await context.webdriver.takeScreenshot();
+      await pressTab();
+      const secondTimeTabPress = await context.webdriver.takeScreenshot();
+      await pressTab();
+      const thirdTimeTabPress = await context.webdriver.takeScreenshot();
+      await pressTab();
+      const fourthTimeTabPress = await context.webdriver.takeScreenshot();
+      await context.matchImages({
+        firstTimeTabPress,
+        secondTimeTabPress,
+        thirdTimeTabPress,
+        fourthTimeTabPress,
+      });
+    });
+  });
+
+  story('TestUpdateLayoutMethodStory', () => {
+    test('idle', async (context) => {
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'idle');
+    });
+
+    test('Body content has been changed', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="toggle-body-content"]' }))
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'Body content has been changed');
+    });
+
+    test('child component content has been changed', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="toggle-child-component-content"]' }))
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'child component content has been changed');
+    });
+
+    test('update layout', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="toggle-child-component-content"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-tid="update"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'update layout');
+    });
+  });
+
+  story('WithLongTitleStory', () => {
+    test('not fixed', async (context) => {
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'not fixed');
+    });
+
+    test('fixed close element', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const sidePageContainer = window.document.querySelector('[data-tid="SidePage__container"]') as HTMLElement;
+        const sidePageHeader = window.document.querySelector('[data-comp-name~="SidePage.Header"]') as HTMLElement;
+        const fixedHeaderHeight = 50;
+
+        sidePageContainer.scrollTop = (sidePageHeader.offsetHeight - fixedHeaderHeight) / 2;
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'fixed close element');
+    });
+
+    test('fixed header', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const sidePageContainer = window.document.querySelector('[data-tid="SidePage__container"]') as HTMLElement;
+        const sidePageHeader = window.document.querySelector('[data-comp-name~="SidePage.Header"]') as HTMLElement;
+        const fixedHeaderHeight = 50;
+
+        sidePageContainer.scrollTop = sidePageHeader.offsetHeight - fixedHeaderHeight;
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'fixed header');
+    });
+  });
+
+  story('SidePageWithChildrenFromOtherComponent', () => {
+    test('without header, footer', async (context) => {
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'without header, footer');
+    });
+
+    test('scroll to bottom without header, footer', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const sidepageContainer = window.document.querySelector('[data-tid="SidePage__container"]') as HTMLElement;
+
+        sidepageContainer.scrollTop = 3000;
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'scroll to bottom without header, footer');
+    });
+
+    test('with header, footer', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__header-toggle"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__footer-toggle"]' }))
+        .pause(1000)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'with header, footer');
+    });
+
+    test('scroll to bottom with header, footer', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__header-toggle"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__footer-toggle"]' }))
+        .perform();
+      await context.webdriver.executeScript(function () {
+        const sidepageContainer = window.document.querySelector('[data-tid="SidePage__container"]') as HTMLElement;
+
+        sidepageContainer.scrollTop = 3000;
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'scroll to bottom with header, footer');
+    });
+
+    test('with panel', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__footer-toggle"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__panel-toggle"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'with panel');
+    });
+
+    test('scroll to bottom with panel', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__footer-toggle"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-tid="SidePage__panel-toggle"]' }))
+        .perform();
+      await context.webdriver.executeScript(function () {
+        const sidepageContainer = window.document.querySelector('[data-tid="SidePage__container"]') as HTMLElement;
+
+        sidepageContainer.scrollTop = 3000;
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'scroll to bottom with panel');
+    });
+  });
+
+  story('SidePageWithBlockBackground', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'unstable tests in firefox2022': { in: /^(?!\b(chrome2022)\b)/ } } });
+
+    test('open side-page', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot());
+    });
+  });
+
+  story('SidePageChangeBlockBgAndIgnoreBgClick', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+      captureElement: 'body',
+    });
+
+    test('change sidepage mode to view to edit to view', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-side-page"]' }))
+        .perform();
+      await delay(100);
+      const viewModeSidePage = await context.takeScreenshot();
+
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: `[data-tid~="${SidePageFooterDataTids.root}"] button` }))
+        .perform();
+      await delay(100);
+      const editModeSidePage = await context.webdriver.takeScreenshot();
+
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: `[data-tid~="${SidePageFooterDataTids.root}"] button` }))
+        .perform();
+      await delay(100);
+      const againViewModeSidePage = await context.takeScreenshot();
+
+      await delay(100);
+      await context.matchImages({ viewModeSidePage, editModeSidePage, againViewModeSidePage });
+    });
+  });
+
+  story('NestedSidePagesWithChangingVeil', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+      captureElement: 'body',
+    });
+
+    test('idle', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-first-side-page"]' }))
+        .perform();
+      await delay(500);
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-second-side-page"]' }))
+        .perform();
+      await delay(500);
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-third-side-page"]' }))
+        .perform();
+      await delay(500);
+      const thirdOpenedNoVeils = await context.takeScreenshot();
+
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: `[data-tid~="veil-first-from-third-side-page"]` }))
+        .perform();
+      await delay(500);
+      const thirdOpenedWithFirstVeil = await context.webdriver.takeScreenshot();
+
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: `[data-tid~="veil-second-from-third-side-page"] button` }))
+        .perform();
+      await delay(500);
+      const thirdOpenedWithFirstAndSecondVeils = await context.takeScreenshot();
+
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: `[data-tid~="veil-second-from-third-side-page"] button` }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: `[data-tid~="veil-third-from-third-side-page"] button` }))
+        .perform();
+      await delay(500);
+      const thirdOpenedWithFirstAndThirdVeils = await context.takeScreenshot();
+
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: `[data-tid~="close-third-side-page"] button` }))
+        .perform();
+      await delay(500);
+      const secondOpenedWithFirstVeilAndNoSecondVeil = await context.takeScreenshot();
+
+      await context
+        .expect({
+          thirdOpenedNoVeils,
+          thirdOpenedWithFirstVeil,
+          thirdOpenedWithFirstAndSecondVeils,
+          thirdOpenedWithFirstAndThirdVeils,
+          secondOpenedWithFirstVeilAndNoSecondVeil,
+        })
+        .to.matchImages();
+    });
+  });
+});