npm - @skbkontur/react-ui - Versions diffs - 3.7.0 → 3.8.1 - Mend

@skbkontur/react-ui 3.7.0 → 3.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (206) hide show

package/components/SidePage/SidePage/SidePage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["SidePage.tsx"],"names":["React","CSSTransition","FocusLock","isKeyEscape","LayoutEvents","stopPropagation","HideBodyVerticalScroll","ModalStack","RenderContainer","RenderLayer","ZIndex","ThemeContext","CommonWrapper","isIE11","cx","SidePageBody","SidePageContainer","SidePageContext","SidePageFooter","SidePageHeader","styles","TRANSITION_TIMEOUT","SidePage","state","hasHeader","hasFooter","hasPanel","theme","stackSubscription","layoutRef","footer","updateLayout","update","getSidePageContextProps","requestClose","getWidth","footerRef","setHasHeader","setHasFooter","setHasPanel","getBoundingClientRect","width","handleStackChange","stack","sidePages","filter","x","props","fromLeft","currentSidePagePosition","indexOf","hasMargin","length","hasShadow","hasBackground","isBlocking","setState","stackPosition","handleClickOutside","e","ignoreBackgroundClick","MouseEvent","clientX","document","documentElement","clientWidth","handleKeyDown","disableClose","onClose","ref","componentDidMount","window","addEventListener","add","componentWillUnmount","removeEventListener","remove","render","renderMain","blockBackground","disableAnimations","renderShadow","getTransitionNames","enter","exit","renderContainer","disableFocusLock","root","leftSide","Boolean","emit","wrapper","shadow","wrapperLeft","getSidebarStyle","_","layout","children","overlay","background","backgroundGray","sidePageStyle","marginLeft","marginRight","transition","transitionRight","transitionLeft","enterActive","transitionActive","transitionLeave","exitActive","transitionLeaveActive","appear","appearActive","Component","__KONTUR_REACT_UI__","Header","Body","Footer","Container","defaultProps"],"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 { isIE11 } from '../../lib/client';\nimport { cx } from '../../lib/theming/Emotion';\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 Не использовать фокус-лок внутри сайдпейджа.\n * По умолчанию true для IE11.\n /\n disableFocusLock: boolean;\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 layoutRef: HTMLElement \| null = null;\n private footer: SidePageFooter \| null = null;\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 if (this.footer) {\n this.footer.update();\n }\n };\n\n public static defaultProps = {\n // NOTE: в ie нормально не работает\n disableFocusLock: isIE11,\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 <CommonWrapper {...this.props}>\n <RenderContainer>\n <div>\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 >\n {this.renderContainer()}\n </CSSTransition>\n </div>\n </RenderContainer>\n </CommonWrapper>\n );\n }\n\n private renderContainer(): JSX.Element {\n const { width, blockBackground, fromLeft, disableFocusLock } = this.props;\n\n return (\n <ZIndex\n priority={'Sidepage'}\n data-tid=\"SidePage__root\"\n className={cx({\n [styles.root()]: true,\n [styles.leftSide()]: Boolean(fromLeft),\n })}\n onScroll={LayoutEvents.emit}\n createStackingContext\n style={{ width: width \|\| (blockBackground ? 800 : 500) }}\n >\n <RenderLayer onClickOutside={this.handleClickOutside} active>\n <div\n data-tid=\"SidePage__container\"\n className={cx(styles.wrapper(this.theme), {\n [styles.shadow(this.theme)]: this.state.hasShadow,\n [styles.wrapperLeft()]: fromLeft,\n })}\n style={this.getSidebarStyle()}\n >\n <FocusLock disabled={disableFocusLock} autoFocus={false}>\n <div ref={(_) => (this.layoutRef = _)} className={styles.layout()}>\n <SidePageContext.Provider value={this.getSidePageContextProps()}>\n {this.props.children}\n </SidePageContext.Provider>\n </div>\n </FocusLock>\n </div>\n </RenderLayer>\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 footerRef: this.footerRef,\n setHasHeader: this.setHasHeader,\n setHasFooter: this.setHasFooter,\n setHasPanel: this.setHasPanel,\n };\n };\n\n private getWidth = () => {\n if (!this.layoutRef) {\n return 'auto';\n }\n return this.layoutRef.getBoundingClientRect().width;\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 getSidebarStyle(): React.CSSProperties {\n const sidePageStyle: React.CSSProperties = {};\n\n if (this.state.hasMargin) {\n if (this.props.fromLeft) {\n sidePageStyle.marginLeft = 20;\n } else {\n sidePageStyle.marginRight = 20;\n }\n }\n\n return sidePageStyle;\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 footerRef = (ref: SidePageFooter \| null) => {\n this.footer = 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"]}
1	+ {"version":3,"sources":["SidePage.tsx"],"names":["React","CSSTransition","FocusLock","isKeyEscape","LayoutEvents","stopPropagation","HideBodyVerticalScroll","ModalStack","RenderContainer","RenderLayer","ZIndex","ThemeContext","CommonWrapper","cx","SidePageBody","SidePageContainer","SidePageContext","SidePageFooter","SidePageHeader","styles","TRANSITION_TIMEOUT","SidePage","state","hasHeader","hasFooter","hasPanel","theme","stackSubscription","layoutRef","footer","updateLayout","update","getSidePageContextProps","requestClose","getWidth","footerRef","setHasHeader","setHasFooter","setHasPanel","getBoundingClientRect","width","handleStackChange","stack","sidePages","filter","x","props","fromLeft","currentSidePagePosition","indexOf","hasMargin","length","hasShadow","hasBackground","isBlocking","setState","stackPosition","handleClickOutside","e","ignoreBackgroundClick","MouseEvent","clientX","document","documentElement","clientWidth","handleKeyDown","disableClose","onClose","ref","componentDidMount","window","addEventListener","add","componentWillUnmount","removeEventListener","remove","render","renderMain","blockBackground","disableAnimations","renderShadow","getTransitionNames","enter","exit","renderContainer","disableFocusLock","root","leftSide","Boolean","emit","wrapper","shadow","wrapperLeft","getSidebarStyle","_","layout","children","overlay","background","backgroundGray","sidePageStyle","marginLeft","marginRight","transition","transitionRight","transitionLeft","enterActive","transitionActive","transitionLeave","exitActive","transitionLeaveActive","appear","appearActive","Component","__KONTUR_REACT_UI__","Header","Body","Footer","Container","defaultProps"],"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';\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\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 layoutRef: HTMLElement \| null = null;\n private footer: SidePageFooter \| null = null;\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 if (this.footer) {\n this.footer.update();\n }\n };\n\n public static defaultProps = {\n disableFocusLock: 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 private renderMain() {\n const { blockBackground, disableAnimations } = this.props;\n\n return (\n <CommonWrapper {...this.props}>\n <RenderContainer>\n <div>\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 >\n {this.renderContainer()}\n </CSSTransition>\n </div>\n </RenderContainer>\n </CommonWrapper>\n );\n }\n\n private renderContainer(): JSX.Element {\n const { width, blockBackground, fromLeft, disableFocusLock } = this.props;\n\n return (\n <ZIndex\n priority={'Sidepage'}\n data-tid=\"SidePage__root\"\n className={cx({\n [styles.root()]: true,\n [styles.leftSide()]: Boolean(fromLeft),\n })}\n onScroll={LayoutEvents.emit}\n createStackingContext\n style={{ width: width \|\| (blockBackground ? 800 : 500) }}\n >\n <RenderLayer onClickOutside={this.handleClickOutside} active>\n <div\n data-tid=\"SidePage__container\"\n className={cx(styles.wrapper(this.theme), {\n [styles.shadow(this.theme)]: this.state.hasShadow,\n [styles.wrapperLeft()]: fromLeft,\n })}\n style={this.getSidebarStyle()}\n >\n <FocusLock disabled={disableFocusLock \|\| !blockBackground} autoFocus={false}>\n <div ref={(_) => (this.layoutRef = _)} className={styles.layout()}>\n <SidePageContext.Provider value={this.getSidePageContextProps()}>\n {this.props.children}\n </SidePageContext.Provider>\n </div>\n </FocusLock>\n </div>\n </RenderLayer>\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 footerRef: this.footerRef,\n setHasHeader: this.setHasHeader,\n setHasFooter: this.setHasFooter,\n setHasPanel: this.setHasPanel,\n };\n };\n\n private getWidth = () => {\n if (!this.layoutRef) {\n return 'auto';\n }\n return this.layoutRef.getBoundingClientRect().width;\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 getSidebarStyle(): React.CSSProperties {\n const sidePageStyle: React.CSSProperties = {};\n\n if (this.state.hasMargin) {\n if (this.props.fromLeft) {\n sidePageStyle.marginLeft = 20;\n } else {\n sidePageStyle.marginRight = 20;\n }\n }\n\n return sidePageStyle;\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 footerRef = (ref: SidePageFooter \| null) => {\n this.footer = 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/components/SidePage/SidePage.d.ts CHANGED Viewed

@@ -37,8 +37,7 @@ export interface SidePageProps extends CommonProps {
      */
     disableAnimations?: boolean;
     /**
-     * Не использовать фокус-лок внутри сайдпейджа.
-     * По умолчанию true для IE11.
+     * Работает только при заблокированном фоне: `blockBackground = true`
      */
     disableFocusLock: boolean;
 }

package/components/SidePage/SidePage.styles/SidePage.styles.js CHANGED Viewed

@@ -1,9 +1,10 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31;
 import { is8pxTheme } from "../../../lib/theming/ThemeHelpers";
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+import { resetButton } from "../../../lib/styles/Mixins";
 export var styles = memoizeStyle({
   root: function root() {
     return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      position: fixed;\n      right: 0;\n      top: 0;\n    "])));
@@ -36,7 +37,7 @@ export var styles = memoizeStyle({
     return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      align-items: stretch;\n      display: flex;\n      flex-direction: column;\n    "])));
   },
   header: function header(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      width: 100%;\n      position: relative;\n    "])), t.sidePageHeaderFontSize, t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom);
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      width: 100%;\n      position: relative;\n      color: ", ";\n    "])), t.sidePageHeaderFontSize, t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageHeaderTextColor);
   },
   headerFixed: function headerFixed(t) {
     return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0;\n\n      &:after {\n        bottom: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.sidePageBgDefault, t.sidePageHeaderFixedFontSize, t.sidePageHeaderFixedLineHeight, t.sidePageHeaderFixedPaddingY, t.sidePageFixedHeaderShadow);
@@ -61,39 +62,42 @@ export var styles = memoizeStyle({
     return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      left: 0;\n      right: auto;\n    "])));
   },
   close: function close(t) {
-    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      cursor: pointer;\n      position: absolute;\n      right: ", ";\n      text-align: center;\n      text-decoration: none;\n      width: ", ";\n      padding: 0 ", ";\n      margin: 0 -", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), t.sidePageCloseButtonColor, t.sidePageCloseButtonPadding, t.sidePageCloseIconSize, t.sidePageCloseButtonClickAreaX, t.sidePageCloseButtonClickAreaX, t.sidePageCloseButtonHoverColor);
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      ", ";\n      cursor: pointer;\n      color: ", ";\n      padding: ", ";\n      margin: -", ";\n      font-size: 0;\n\n      &:focus,\n      &:hover {\n        color: ", ";\n      }\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n        box-sizing: content-box;\n      }\n    "])), resetButton(), t.sidePageCloseButtonColor, t.sidePageCloseButtonClickArea, t.sidePageCloseButtonClickArea, t.sidePageCloseButtonHoverColor, t.sidePageCloseIconSize, t.sidePageCloseIconSize);
   },
-  panel: function panel(t) {
-    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPanelBg, t.sidePageFooterPanelPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPanelPaddingBottom, t.sidePagePaddingLeft);
+  closeFocus: function closeFocus(t) {
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      outline: 2px solid ", ";\n    "])), t.borderColorFocus);
+  },
+  wrapperClose: function wrapperClose(t) {
+    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      box-sizing: border-box;\n      height: 100%;\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      position: absolute;\n      right: ", ";\n      top: 0;\n    "])), t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageCloseButtonPadding);
   },
-  closeIcon: function closeIcon(t) {
-    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      height: ", ";\n      width: ", ";\n      line-height: 0;\n    "])), t.sidePageCloseIconSize, t.sidePageCloseIconSize);
+  panel: function panel(t) {
+    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPanelBg, t.sidePageFooterPanelPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPanelPaddingBottom, t.sidePagePaddingLeft);
   },
   fixed: function fixed(t) {
-    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      line-height: ", ";\n    "])), t.sidePageHeaderFixedLineHeight);
+    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      line-height: ", ";\n      padding: ", " 0;\n    "])), t.sidePageHeaderFixedLineHeight, t.sidePageHeaderFixedPaddingY);
   },
   footer: function footer() {
-    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n    "])));
+    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n    "])));
   },
   footerContent: function footerContent(t) {
-    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPaddingBottom, t.sidePagePaddingLeft);
+    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPaddingBottom, t.sidePagePaddingLeft);
   },
   footerFixed: function footerFixed(t) {
-    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n\n      &:before {\n        top: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.sidePageBgDefault, t.sidePageFixedFooterShadow);
+    return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n\n      &:before {\n        top: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.sidePageBgDefault, t.sidePageFixedFooterShadow);
   },
   transitionLeft: function transitionLeft() {
-    return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      transform: translateX(100px);\n    "])));
+    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      transform: translateX(100px);\n    "])));
   },
   transitionRight: function transitionRight() {
-    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      transform: translateX(-100px);\n    "])));
+    return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n      transform: translateX(-100px);\n    "])));
   },
   transitionActive: function transitionActive() {
-    return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n      transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1;\n      transform: translate(0, 0);\n    "])));
+    return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1;\n      transform: translate(0, 0);\n    "])));
   },
   transitionLeave: function transitionLeave() {
-    return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      opacity: 1;\n    "])));
+    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      opacity: 1;\n    "])));
   },
   transitionLeaveActive: function transitionLeaveActive() {
-    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      opacity: 0.01;\n      transition: opacity 0.15s ease-out;\n    "])));
+    return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      opacity: 0.01;\n      transition: opacity 0.15s ease-out;\n    "])));
   }
 });

package/components/SidePage/SidePage.styles/SidePage.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["SidePage.styles.ts"],"names":["is8pxTheme","css","memoizeStyle","styles","root","overlay","body","container","t","sidePagePaddingLeft","sidePagePaddingRight","containerWithoutHeader","sidePagePaddingTop","containerWithoutFooter","sidePagePaddingBottom","containerWithPanel","wrapper","sidePageBgDefault","wrapperLeft","layout","header","sidePageHeaderFontSize","sidePageHeaderLineHeight","sidePageHeaderPaddingTop","sidePageHeaderPaddingBottom","headerFixed","sidePageHeaderFixedFontSize","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","sidePageFixedHeaderShadow","title","paddingRight","parseInt","sidePageCloseButtonPadding","sidePageCloseButtonLegacyPaddingLeft","sidePageCloseIconSize","titleFixed","background","backgroundGray","sidePageBackingBg","sidePageBackingBgOpacity","shadow","sidePageContainerShadow","leftSide","close","sidePageCloseButtonColor","sidePageCloseButtonClickAreaX","sidePageCloseButtonHoverColor","panel","sidePageFooterPanelBg","sidePageFooterPanelPaddingTop","sidePageFooterPanelPaddingBottom","closeIcon","fixed","footer","footerContent","sidePageFooterPaddingTop","sidePageFooterPaddingBottom","footerFixed","sidePageFixedFooterShadow","transitionLeft","transitionRight","transitionActive","transitionLeave","transitionLeaveActive"],"mappings":"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","sourcesContent":["import { is8pxTheme } from '../../lib/theming/ThemeHelpers';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n root() {\n return css`\n height: 100%;\n position: fixed;\n right: 0;\n top: 0;\n `;\n },\n\n overlay() {\n return css`\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n `;\n },\n\n body() {\n return css`\n height: 100%;\n z-index: 0;\n `;\n },\n\n container(t: Theme) {\n return css`\n padding-left: ${t.sidePagePaddingLeft};\n padding-right: ${t.sidePagePaddingRight};\n `;\n },\n\n containerWithoutHeader(t: Theme) {\n return css`\n padding-top: ${is8pxTheme(t) ? t.sidePagePaddingTop : 0};\n `;\n },\n\n containerWithoutFooter(t: Theme) {\n return css`\n padding-bottom: ${is8pxTheme(t) ? t.sidePagePaddingBottom : 0};\n `;\n },\n\n containerWithPanel(t: Theme) {\n return css`\n padding-bottom: ${is8pxTheme(t) ? t.sidePagePaddingBottom : 0};\n `;\n },\n\n wrapper(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n float: right;\n height: 100%;\n width: 100%;\n overflow-y: auto;\n position: relative;\n white-space: normal;\n `;\n },\n\n wrapperLeft() {\n return css`\n float: left;\n `;\n },\n\n layout() {\n return css`\n align-items: stretch;\n display: flex;\n flex-direction: column;\n `;\n },\n\n header(t: Theme) {\n return css`\n font-size: ${t.sidePageHeaderFontSize};\n line-height: ${t.sidePageHeaderLineHeight};\n padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n width: 100%;\n position: relative;\n `;\n },\n\n headerFixed(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n font-size: ${t.sidePageHeaderFixedFontSize};\n line-height: ${t.sidePageHeaderFixedLineHeight};\n padding: ${t.sidePageHeaderFixedPaddingY} 0;\n\n &:after {\n bottom: 0px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.sidePageFixedHeaderShadow};\n }\n `;\n },\n\n title(t: Theme) {\n const paddingRight =\n parseInt(t.sidePageCloseButtonPadding) +\n parseInt(t.sidePageCloseButtonLegacyPaddingLeft) +\n parseInt(t.sidePageCloseIconSize);\n return css`\n padding-left: ${t.sidePagePaddingLeft};\n padding-right: ${paddingRight}px;\n `;\n },\n\n titleFixed() {\n return css`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `;\n },\n\n background() {\n return css`\n height: 100%;\n position: absolute;\n width: 100%;\n `;\n },\n\n backgroundGray(t: Theme) {\n return css`\n background: ${t.sidePageBackingBg};\n opacity: ${t.sidePageBackingBgOpacity};\n `;\n },\n\n shadow(t: Theme) {\n return css`\n box-shadow: ${t.sidePageContainerShadow};\n `;\n },\n\n leftSide() {\n return css`\n left: 0;\n right: auto;\n `;\n },\n\n close(t: Theme) {\n return css`\n color: ${t.sidePageCloseButtonColor};\n cursor: pointer;\n position: absolute;\n right: ${t.sidePageCloseButtonPadding};\n text-align: center;\n text-decoration: none;\n width: ${t.sidePageCloseIconSize};\n padding: 0 ${t.sidePageCloseButtonClickAreaX};\n margin: 0 -${t.sidePageCloseButtonClickAreaX};\n\n &:hover {\n color: ${t.sidePageCloseButtonHoverColor};\n }\n `;\n },\n\n panel(t: Theme) {\n return css`\n background: ${t.sidePageFooterPanelBg};\n padding: ${t.sidePageFooterPanelPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPanelPaddingBottom}\n ${t.sidePagePaddingLeft};\n `;\n },\n\n closeIcon(t: Theme) {\n return css`\n display: inline-block;\n height: ${t.sidePageCloseIconSize};\n width: ${t.sidePageCloseIconSize};\n line-height: 0;\n `;\n },\n\n fixed(t: Theme) {\n return css`\n line-height: ${t.sidePageHeaderFixedLineHeight};\n `;\n },\n\n footer() {\n return css`\n bottom: 0;\n position: fixed;\n z-index: 10;\n `;\n },\n\n footerContent(t: Theme) {\n return css`\n padding: ${t.sidePageFooterPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPaddingBottom}\n ${t.sidePagePaddingLeft};\n `;\n },\n\n footerFixed(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n\n &:before {\n top: 0px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.sidePageFixedFooterShadow};\n }\n `;\n },\n\n transitionLeft() {\n return css`\n transform: translateX(100px);\n `;\n },\n\n transitionRight() {\n return css`\n transform: translateX(-100px);\n `;\n },\n\n transitionActive() {\n return css`\n transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n opacity: 1;\n transform: translate(0, 0);\n `;\n },\n\n transitionLeave() {\n return css`\n opacity: 1;\n `;\n },\n\n transitionLeaveActive() {\n return css`\n opacity: 0.01;\n transition: opacity 0.15s ease-out;\n `;\n },\n});\n"]}
1	+ {"version":3,"sources":["SidePage.styles.ts"],"names":["is8pxTheme","css","memoizeStyle","resetButton","styles","root","overlay","body","container","t","sidePagePaddingLeft","sidePagePaddingRight","containerWithoutHeader","sidePagePaddingTop","containerWithoutFooter","sidePagePaddingBottom","containerWithPanel","wrapper","sidePageBgDefault","wrapperLeft","layout","header","sidePageHeaderFontSize","sidePageHeaderLineHeight","sidePageHeaderPaddingTop","sidePageHeaderPaddingBottom","sidePageHeaderTextColor","headerFixed","sidePageHeaderFixedFontSize","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","sidePageFixedHeaderShadow","title","paddingRight","parseInt","sidePageCloseButtonPadding","sidePageCloseButtonLegacyPaddingLeft","sidePageCloseIconSize","titleFixed","background","backgroundGray","sidePageBackingBg","sidePageBackingBgOpacity","shadow","sidePageContainerShadow","leftSide","close","sidePageCloseButtonColor","sidePageCloseButtonClickArea","sidePageCloseButtonHoverColor","closeFocus","borderColorFocus","wrapperClose","panel","sidePageFooterPanelBg","sidePageFooterPanelPaddingTop","sidePageFooterPanelPaddingBottom","fixed","footer","footerContent","sidePageFooterPaddingTop","sidePageFooterPaddingBottom","footerFixed","sidePageFixedFooterShadow","transitionLeft","transitionRight","transitionActive","transitionLeave","transitionLeaveActive"],"mappings":"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","sourcesContent":["import { is8pxTheme } from '../../lib/theming/ThemeHelpers';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n root() {\n return css`\n height: 100%;\n position: fixed;\n right: 0;\n top: 0;\n `;\n },\n\n overlay() {\n return css`\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n `;\n },\n\n body() {\n return css`\n height: 100%;\n z-index: 0;\n `;\n },\n\n container(t: Theme) {\n return css`\n padding-left: ${t.sidePagePaddingLeft};\n padding-right: ${t.sidePagePaddingRight};\n `;\n },\n\n containerWithoutHeader(t: Theme) {\n return css`\n padding-top: ${is8pxTheme(t) ? t.sidePagePaddingTop : 0};\n `;\n },\n\n containerWithoutFooter(t: Theme) {\n return css`\n padding-bottom: ${is8pxTheme(t) ? t.sidePagePaddingBottom : 0};\n `;\n },\n\n containerWithPanel(t: Theme) {\n return css`\n padding-bottom: ${is8pxTheme(t) ? t.sidePagePaddingBottom : 0};\n `;\n },\n\n wrapper(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n float: right;\n height: 100%;\n width: 100%;\n overflow-y: auto;\n position: relative;\n white-space: normal;\n `;\n },\n\n wrapperLeft() {\n return css`\n float: left;\n `;\n },\n\n layout() {\n return css`\n align-items: stretch;\n display: flex;\n flex-direction: column;\n `;\n },\n\n header(t: Theme) {\n return css`\n font-size: ${t.sidePageHeaderFontSize};\n line-height: ${t.sidePageHeaderLineHeight};\n padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n width: 100%;\n position: relative;\n color: ${t.sidePageHeaderTextColor};\n `;\n },\n\n headerFixed(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n font-size: ${t.sidePageHeaderFixedFontSize};\n line-height: ${t.sidePageHeaderFixedLineHeight};\n padding: ${t.sidePageHeaderFixedPaddingY} 0;\n\n &:after {\n bottom: 0px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.sidePageFixedHeaderShadow};\n }\n `;\n },\n\n title(t: Theme) {\n const paddingRight =\n parseInt(t.sidePageCloseButtonPadding) +\n parseInt(t.sidePageCloseButtonLegacyPaddingLeft) +\n parseInt(t.sidePageCloseIconSize);\n return css`\n padding-left: ${t.sidePagePaddingLeft};\n padding-right: ${paddingRight}px;\n `;\n },\n\n titleFixed() {\n return css`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `;\n },\n\n background() {\n return css`\n height: 100%;\n position: absolute;\n width: 100%;\n `;\n },\n\n backgroundGray(t: Theme) {\n return css`\n background: ${t.sidePageBackingBg};\n opacity: ${t.sidePageBackingBgOpacity};\n `;\n },\n\n shadow(t: Theme) {\n return css`\n box-shadow: ${t.sidePageContainerShadow};\n `;\n },\n\n leftSide() {\n return css`\n left: 0;\n right: auto;\n `;\n },\n\n close(t: Theme) {\n return css`\n ${resetButton()};\n cursor: pointer;\n color: ${t.sidePageCloseButtonColor};\n padding: ${t.sidePageCloseButtonClickArea};\n margin: -${t.sidePageCloseButtonClickArea};\n font-size: 0;\n\n &:focus,\n &:hover {\n color: ${t.sidePageCloseButtonHoverColor};\n }\n\n & > svg {\n width: ${t.sidePageCloseIconSize};\n height: ${t.sidePageCloseIconSize};\n box-sizing: content-box;\n }\n `;\n },\n\n closeFocus(t: Theme) {\n return css`\n outline: 2px solid ${t.borderColorFocus};\n `;\n },\n\n wrapperClose(t: Theme) {\n return css`\n box-sizing: border-box;\n height: 100%;\n line-height: ${t.sidePageHeaderLineHeight};\n padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n position: absolute;\n right: ${t.sidePageCloseButtonPadding};\n top: 0;\n `;\n },\n\n panel(t: Theme) {\n return css`\n background: ${t.sidePageFooterPanelBg};\n padding: ${t.sidePageFooterPanelPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPanelPaddingBottom}\n ${t.sidePagePaddingLeft};\n `;\n },\n\n fixed(t: Theme) {\n return css`\n line-height: ${t.sidePageHeaderFixedLineHeight};\n padding: ${t.sidePageHeaderFixedPaddingY} 0;\n `;\n },\n\n footer() {\n return css`\n bottom: 0;\n position: fixed;\n z-index: 10;\n `;\n },\n\n footerContent(t: Theme) {\n return css`\n padding: ${t.sidePageFooterPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPaddingBottom}\n ${t.sidePagePaddingLeft};\n `;\n },\n\n footerFixed(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n\n &:before {\n top: 0px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.sidePageFixedFooterShadow};\n }\n `;\n },\n\n transitionLeft() {\n return css`\n transform: translateX(100px);\n `;\n },\n\n transitionRight() {\n return css`\n transform: translateX(-100px);\n `;\n },\n\n transitionActive() {\n return css`\n transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n opacity: 1;\n transform: translate(0, 0);\n `;\n },\n\n transitionLeave() {\n return css`\n opacity: 1;\n `;\n },\n\n transitionLeaveActive() {\n return css`\n opacity: 0.01;\n transition: opacity 0.15s ease-out;\n `;\n },\n});\n"]}

package/components/SidePage/SidePage.styles.d.ts CHANGED Viewed

@@ -19,8 +19,9 @@ export declare const styles: {
     shadow(t: Theme): string;
     leftSide(): string;
     close(t: Theme): string;
+    closeFocus(t: Theme): string;
+    wrapperClose(t: Theme): string;
     panel(t: Theme): string;
-    closeIcon(t: Theme): string;
     fixed(t: Theme): string;
     footer(): string;
     footerContent(t: Theme): string;

package/components/SidePage/SidePageHeader/SidePageHeader.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
@@ -7,6 +8,7 @@ import { isFunction } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
+import { keyListener } from "../../../lib/events/keyListener";
 import { styles } from "../SidePage.styles";
 import { SidePageContext } from "../SidePageContext";
 /**
@@ -28,7 +30,8 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.context = _this.context;
     _this.state = {
-      isReadyToFix: false
+      isReadyToFix: false,
+      focusedByTab: false
     };
     _this.theme = void 0;
     _this.wrapper = null;
@@ -57,32 +60,31 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement("div", {
         className: cx(styles.header(_this.theme), (_cx = {}, _cx[styles.headerFixed(_this.theme)] = fixed, _cx))
-      }, _this.renderClose(), /*#__PURE__*/React.createElement("div", {
+      }, _this.renderClose(fixed), /*#__PURE__*/React.createElement("div", {
         className: cx(styles.title(_this.theme), (_cx2 = {}, _cx2[styles.titleFixed()] = fixed, _cx2))
       }, isFunction(_this.props.children) ? _this.props.children(fixed) : _this.props.children));
     };
-    _this.renderCloseContent = function (fixed) {
-      return /*#__PURE__*/React.createElement(SidePageContext.Consumer, null, function (_ref) {
-        var _cx3, _cx4;
-        var requestClose = _ref.requestClose;
-        return /*#__PURE__*/React.createElement("a", {
-          className: cx(styles.close(_this.theme), (_cx3 = {}, _cx3[styles.fixed(_this.theme)] = fixed, _cx3)),
-          onClick: requestClose,
-          "data-tid": "SidePage__close"
-        }, /*#__PURE__*/React.createElement("span", {
-          className: cx(styles.closeIcon(_this.theme), (_cx4 = {}, _cx4[styles.fixed(_this.theme)] = fixed, _cx4))
-        }, /*#__PURE__*/React.createElement(CrossIcon, null)));
-      });
-    };
-    _this.renderClose = function () {
+    _this.renderClose = function (fixed) {
       var stickyOffset = parseInt(_this.theme.sidePageHeaderStickyOffset);
-      return /*#__PURE__*/React.createElement(Sticky, {
+      return /*#__PURE__*/React.createElement("div", {
+        className: cx(styles.wrapperClose(_this.theme), fixed && styles.fixed(_this.theme))
+      }, /*#__PURE__*/React.createElement(Sticky, {
         side: "top",
         offset: stickyOffset
-      }, _this.renderCloseContent);
+      }, /*#__PURE__*/React.createElement(SidePageContext.Consumer, null, function (_ref) {
+        var _cx3;
+        var requestClose = _ref.requestClose;
+        return /*#__PURE__*/React.createElement("button", {
+          className: cx(styles.close(_this.theme), (_cx3 = {}, _cx3[styles.closeFocus(_this.theme)] = _this.state.focusedByTab, _cx3)),
+          onFocus: _this.handleFocus,
+          onBlur: _this.handleBlur,
+          onClick: requestClose,
+          "data-tid": "SidePage__close",
+          tabIndex: 0
+        }, /*#__PURE__*/React.createElement(CrossIcon, null));
+      })));
     };
     _this.updateReadyToFix = function () {
@@ -92,9 +94,9 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
         var isReadyToFix = _this.regularHeight + wrapperScrolledUp <= _this.fixedHeaderHeight;
         _this.setState(function (state) {
-          return state.isReadyToFix !== isReadyToFix ? {
+          return state.isReadyToFix !== isReadyToFix ? _extends({}, state, {
             isReadyToFix: isReadyToFix
-          } : state;
+          }) : state;
         });
       }
     };
@@ -103,6 +105,22 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
       _this.wrapper = el;
     };
+    _this.handleFocus = function () {
+      requestAnimationFrame(function () {
+        if (keyListener.isTabPressed) {
+          _this.setState({
+            focusedByTab: true
+          });
+        }
+      });
+    };
+    _this.handleBlur = function () {
+      _this.setState({
+        focusedByTab: false
+      });
+    };
     return _this;
   }

package/components/SidePage/SidePageHeader/SidePageHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["SidePageHeader.tsx"],"names":["React","Sticky","CrossIcon","isFunction","ThemeContext","CommonWrapper","cx","styles","SidePageContext","SidePageHeader","context","state","isReadyToFix","theme","wrapper","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","componentWillUnmount","removeEventListener","updateReadyToFix","renderHeader","fixed","header","headerFixed","renderClose","title","titleFixed","props","children","~~renderCloseContent~~","~~requestClose~~","~~close~~","~~closeIcon~~","~~stickyOffset~~","~~parseInt~~","~~sidePageHeaderStickyOffset~~","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","render","renderMain","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"~~wIAAA~~,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,UAAT,QAA2B,iBAA3B;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,MAAT,QAAuB,mBAAvB;AACA,SAASC,eAAT,QAAqD,mBAArD~~;;;;;;;;;;AAUA~~;AACA;AACA;AACA;AACA;AACA,WAAaC,cAAb;;;;AAISC,IAAAA,OAJT,GAIwC,MAAKA,OAJ7C;;AAMSC,IAAAA,KANT,GAMiB;AACbC,MAAAA,YAAY,EAAE,KADD,EANjB;;;~~AAUUC~~,IAAAA,~~KAVV~~;~~AAWUC~~,IAAAA,~~OAXV~~,~~GAWwC~~,~~IAXxC~~;~~AAYUC~~,IAAAA,~~iBAZV~~,~~GAY8B~~,~~CAZ9B~~;;;;;;;;;;;;;;;;;;~~AA8BSC~~,IAAAA,~~iBA9BT~~,~~GA8B6B~~,YAAM;AAC/BC,MAAAA,MAAM,CAACC,gBAAP,CAAwB,QAAxB,EAAkC,MAAKC,MAAvC,EAA+C,IAA/C;AACA,~~YAAKT~~,OAAL,~~CAAaU~~,YAAb,~~0BAAKV~~,OAAL,~~CAAaU~~,YAAb;AACD,~~KAjCH~~;;~~AAmCSC~~,IAAAA,~~oBAnCT~~,~~GAmCgC~~,YAAM;AAClCJ,MAAAA,MAAM,CAACK,mBAAP,CAA2B,QAA3B,EAAqC,MAAKH,MAA1C,EAAkD,IAAlD;AACA,~~YAAKT~~,OAAL,~~CAAaU~~,YAAb,~~0BAAKV~~,OAAL,~~CAAaU~~,YAAb,CAA4B,KAA5B;AACD,~~KAtCH~~;;~~AAwCSD~~,IAAAA,~~MAxCT~~,~~GAwCkB~~,YAAM;AACpB,YAAKI,gBAAL;AACD,~~KA1CH~~;;;;;;;;;;;;;;;;;;;;;;;;~~AAkEUC~~,IAAAA,~~YAlEV~~,~~GAkEyB~~,UAACC,KAAD,EAAmB,mBAAlBA,KAAkB,cAAlBA,KAAkB,GAAV,KAAU;AACxC;AACE,qCAAK,SAAS,~~EAAEnB~~,EAAE,~~CAACC~~,MAAM,~~CAACmB~~,MAAP,CAAc,MAAKb,KAAnB,CAAD,iBAA+BN,MAAM,~~CAACoB~~,WAAP,CAAmB,MAAKd,KAAxB,CAA/B,IAAgEY,KAAhE,OAAlB;AACG,cAAKG,WAAL,~~EADH~~;AAEE,qCAAK,SAAS,~~EAAEtB~~,EAAE,~~CAACC~~,MAAM,~~CAACsB~~,KAAP,CAAa,MAAKhB,KAAlB,CAAD,~~mBAA8BN~~,MAAM,~~CAACuB~~,UAAP,EAA9B,IAAoDL,KAApD,QAAlB;~~AACGtB~~,QAAAA,UAAU,CAAC,~~MAAK4B~~,KAAL,CAAWC,QAAZ,CAAV,GAAkC,MAAKD,KAAL,CAAWC,QAAX,CAAoBP,KAApB,CAAlC,GAA+D,MAAKM,KAAL,CAAWC,QAD7E,CAFF,CADF;;;;AAQD,~~KA3EH~~;;~~AA6EUC~~,IAAAA,~~kBA7EV~~,~~GA6E+B~~,~~UAACR~~,KAAD;~~AAC3B~~,~~4BAAC~~,~~eAAD~~,~~CAAiB~~,~~QAAjB;AACG~~,~~4CAAGS~~,~~YAAH~~,~~QAAGA~~,~~YAAH~~;~~AACC;~~AACE,~~cAAA~~,SAAS,~~EAAE5B~~,EAAE,~~CAACC~~,MAAM,~~CAAC4B~~,~~KAAP~~,~~CAAa~~,~~MAAKtB~~,~~KAAlB~~,CAAD~~;AACVN~~,~~cAAAA~~,MAAM,~~CAACkB~~,KAAP,CAAa,MAAKZ,KAAlB,~~CADU~~,~~IACiBY~~,~~KADjB~~,~~QADf;;AAIE~~,~~cAAA~~,~~OAAO~~,~~EAAES~~,~~YAJX~~;~~AAKE~~,~~0BAAS~~,~~iBALX;;AAOE~~;AACE,cAAA,SAAS,~~EAAE5B~~,EAAE,~~CAACC~~,MAAM,~~CAAC6B~~,~~SAAP~~,~~CAAiB~~,~~MAAKvB~~,~~KAAtB~~,CAAD;~~AACVN~~,cAAAA,MAAM,~~CAACkB~~,~~KAAP~~,~~CAAa~~,~~MAAKZ~~,~~KAAlB~~,CADU,~~IACiBY~~,~~KADjB~~,~~QADf;;;AAKE~~,~~gCAAC~~,~~SAAD~~,~~OALF~~,~~CAPF~~,~~CADD~~,~~GADH~~,~~CAD2B~~,~~GA7E/B;;;;;;;AAmGUG,IAAAA,WAnGV,GAmGwB,YAAM~~;~~AAC1B~~,~~UAAMS~~,~~YAAY~~,~~GAAGC~~,~~QAAQ~~,~~CAAC~~,~~MAAKzB~~,~~KAAL~~,~~CAAW0B~~,~~0BAAZ,CAA7B;;AAEA~~;~~AACE~~,~~4BAAC~~,~~MAAD~~,~~IAAQ~~,~~IAAI~~,~~EAAC~~,~~KAAb~~,~~EAAmB~~,~~MAAM~~,~~EAAEF~~,~~YAA3B;AACG~~,~~cAAKJ~~,~~kBADR~~,CADF~~;;;AAKD~~,~~KA3GH~~;;~~AA6GUV~~,IAAAA,~~gBA7GV~~,~~GA6G6B~~,YAAM;AAC/B,UAAI,MAAKT,OAAT,EAAkB;AAChB,~~YAAM0B~~,iBAAiB,GAAG,~~MAAK1B~~,OAAL,~~CAAa2B~~,qBAAb,GAAqCC,GAA/D;AACA,~~YAAM9B~~,YAAY,GAAG,~~MAAK+B~~,aAAL,GAAqBH,iBAArB,IAA0C,MAAKI,iBAApE;AACA,cAAKC,QAAL,CAAc,~~UAAClC~~,KAAD,UAAYA,KAAK,CAACC,YAAN,KAAuBA,YAAvB,~~GAAsC~~,~~EAAEA~~,YAAY,EAAZA,~~YAAF~~,~~EAAtC~~,~~GAAyDD~~,~~KAArE,~~EAAd;AACD;AACF,~~KAnHH~~;;~~AAqHUmC~~,IAAAA,~~UArHV~~,~~GAqHuB~~,UAACC,EAAD,EAA4B;AAC/C,~~YAAKjC~~,OAAL,~~GAAeiC~~,EAAf;AACD,~~KAvHH~~,~~4DA4CSC~~,~~MA5CT~~,~~GA4CE~~,kBAA6B,mBAC3B,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,~~UAACnC~~,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,~~CAACoC~~,UAAL,EAAP,CACD,CAJH,CADF,CAQD,~~CArDH~~,~~QAuDUA~~,~~UAvDV~~,~~GAuDE~~,sBAAqB,~~KACXrC~~,YADW,GACM,KAAKD,KADX,CACXC,YADW,CAEnB,oBACE,oBAAC,aAAD,EAAmB,~~KAAKmB~~,KAAxB,eACE,6BAAK,GAAG,EAAE,~~KAAKe~~,UAAf,~~IACGlC~~,YAAY,gBAAG,oBAAC,MAAD,IAAQ,IAAI,EAAC,KAAb,IAAoB,~~KAAKY~~,YAAzB,CAAH,GAAqD,KAAKA,YAAL,EADpE,CADF,CADF,CAOD,~~CAhEH~~,~~4DAcE~~,eAAmC,~~KACzBZ~~,YADyB,GACR,KAAKD,KADG,CACzBC,YADyB,CAEjC,IAAI,CAAC,~~KAAKE~~,OAAV,EAAmB,CACjB,OAAO,CAAP,CACD,CACD,IAAI,~~CAACF~~,YAAL,EAAmB,CACjB,~~KAAKG~~,iBAAL,GAAyB,KAAKD,OAAL,~~CAAa2B~~,qBAAb,~~GAAqCS~~,MAA9D,CACD,CACD,OAAO,~~KAAKnC~~,iBAAZ,CACD,~~CAvBH~~,~~qCAyBE~~,eAAuC,KAC7BF,KAD6B,GACnB,IADmB,CAC7BA,KAD6B,CAErC,~~OAAOyB~~,QAAQ,~~CAACzB~~,KAAK,~~CAACsC~~,6BAAP,CAAR,~~GAAgDb~~,QAAQ,~~CAACzB~~,KAAK,~~CAACuC~~,2BAAP,CAAR,GAA8C,CAArG,CACD,~~CA5BH~~,~~6BAAoCpD~~,KAAK,~~CAACqD~~,SAA1C,~~EAAa5C~~,c,~~CACG6C~~,mB,GAAsB,gB,~~CADzB7C~~,c,~~CAGG8C~~,W,~~GAAc/C~~,e","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';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends CommonProps {\n children?: React.ReactNode \| ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface SidePageHeaderState {\n isReadyToFix: boolean;\n}\n\n/*\n Шапка сайдпейджа\n \n @visibleName SidePage.Header\n /\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n public static contextType = SidePageContext;\n public context: SidePageContextType = this.context;\n\n public state = {\n isReadyToFix: false,\n };\n\n private theme!: Theme;\n private wrapper: HTMLElement \| null = null;\n private lastRegularHeight = 0;\n\n public get regularHeight(): number {\n const { isReadyToFix } = this.state;\n if (!this.wrapper) {\n return 0;\n }\n if (!isReadyToFix) {\n this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\n }\n return this.lastRegularHeight;\n }\n\n public get fixedHeaderHeight(): number {\n const { theme } = this;\n return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) 2;\n }\n\n public componentDidMount = () => {\n window.addEventListener('scroll', this.update, true);\n this.context.setHasHeader?.();\n };\n\n public componentWillUnmount = () => {\n window.removeEventListener('scroll', this.update, true);\n this.context.setHasHeader?.(false);\n };\n\n public update = () => {\n this.updateReadyToFix();\n };\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { isReadyToFix } = this.state;\n return (\n <CommonWrapper {...this.props}>\n <div ref={this.wrapperRef}>\n {isReadyToFix ? <Sticky side=\"top\">{this.renderHeader}</Sticky> : this.renderHeader()}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderHeader = (fixed = false) => {\n return (\n <div className={cx(styles.header(this.theme), { [styles.headerFixed(this.theme)]: fixed })}>\n {this.renderClose()}\n <div className={cx(styles.title(this.theme), { [styles.titleFixed()]: fixed })}>\n {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n </div>\n </div>\n );\n };\n\n private ~~renderCloseContent~~ = (fixed: boolean) => (\n <SidePageContext.Consumer>\n {({ requestClose }) => (\n <a\n className={cx(styles.close(this.theme), {\n [styles.~~fixed~~(this.theme)]: ~~fixed~~,\n })}\n onClick={requestClose}\n data-tid=\"SidePage__close\"\n ~~>\n <span\n className~~={~~cx(styles.closeIcon(this.theme), {~~\n ~~[styles.fixed(this.theme)]: fixed,\n })}\n~~ >\n <CrossIcon />\n </~~span~~>\n ~~</a>\n~~ )}\n </SidePageContext.Consumer>\n ~~);\n\n private renderClose = () => {\n const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n\n return (\n <~~Sticky ~~side=\"top\" offset={stickyOffset}~~>\n ~~{this.renderCloseContent}\n~~ </~~Sticky~~>\n );\n };\n\n private updateReadyToFix = () => {\n if (this.wrapper) {\n const wrapperScrolledUp = this.wrapper.getBoundingClientRect().top;\n const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { isReadyToFix } : state));\n }\n };\n\n private wrapperRef = (el: HTMLElement \| null) => {\n this.wrapper = el;\n };\n}\n"]}
1	+ {"version":3,"sources":["SidePageHeader.tsx"],"names":["React","Sticky","CrossIcon","isFunction","ThemeContext","CommonWrapper","cx","keyListener","styles","SidePageContext","SidePageHeader","context","state","isReadyToFix","focusedByTab","theme","wrapper","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","componentWillUnmount","removeEventListener","updateReadyToFix","renderHeader","fixed","header","headerFixed","renderClose","title","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","requestClose","close","closeFocus","handleFocus","handleBlur","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","requestAnimationFrame","isTabPressed","render","renderMain","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","Component","__KONTUR_REACT_UI__","contextType"],"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';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends CommonProps {\n children?: React.ReactNode \| ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface SidePageHeaderState {\n isReadyToFix: boolean;\n focusedByTab: boolean;\n}\n\n/*\n Шапка сайдпейджа\n \n @visibleName SidePage.Header\n /\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n public static contextType = SidePageContext;\n public context: SidePageContextType = this.context;\n\n public state = {\n isReadyToFix: false,\n focusedByTab: false,\n };\n\n private theme!: Theme;\n private wrapper: HTMLElement \| null = null;\n private lastRegularHeight = 0;\n\n public get regularHeight(): number {\n const { isReadyToFix } = this.state;\n if (!this.wrapper) {\n return 0;\n }\n if (!isReadyToFix) {\n this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\n }\n return this.lastRegularHeight;\n }\n\n public get fixedHeaderHeight(): number {\n const { theme } = this;\n return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) 2;\n }\n\n public componentDidMount = () => {\n window.addEventListener('scroll', this.update, true);\n this.context.setHasHeader?.();\n };\n\n public componentWillUnmount = () => {\n window.removeEventListener('scroll', this.update, true);\n this.context.setHasHeader?.(false);\n };\n\n public update = () => {\n this.updateReadyToFix();\n };\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { isReadyToFix } = this.state;\n return (\n <CommonWrapper {...this.props}>\n <div ref={this.wrapperRef}>\n {isReadyToFix ? <Sticky side=\"top\">{this.renderHeader}</Sticky> : this.renderHeader()}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderHeader = (fixed = false) => {\n return (\n <div className={cx(styles.header(this.theme), { [styles.headerFixed(this.theme)]: fixed })}>\n {this.renderClose(fixed)}\n <div className={cx(styles.title(this.theme), { [styles.titleFixed()]: fixed })}>\n {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n </div>\n </div>\n );\n };\n\n private renderClose = (fixed: boolean) => {\n const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n\n return (\n <div className={cx(styles.wrapperClose(this.theme), fixed && styles.fixed(this.theme))}>\n <Sticky side=\"top\" offset={stickyOffset}>\n <SidePageContext.Consumer>\n {({ requestClose }) => (\n <button\n className={cx(styles.close(this.theme), {\n [styles.closeFocus(this.theme)]: this.state.focusedByTab,\n })}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n onClick={requestClose}\n data-tid=\"SidePage__close\"\n tabIndex={0}\n >\n <CrossIcon />\n </button>\n )}\n </SidePageContext.Consumer>\n </Sticky>\n </div>\n );\n };\n\n private updateReadyToFix = () => {\n if (this.wrapper) {\n const wrapperScrolledUp = this.wrapper.getBoundingClientRect().top;\n const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { ...state, isReadyToFix } : state));\n }\n };\n\n private wrapperRef = (el: HTMLElement \| null) => {\n this.wrapper = el;\n };\n\n private handleFocus = () => {\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n };\n\n private handleBlur = () => {\n this.setState({ focusedByTab: false });\n };\n}\n"]}

package/components/SidePage/SidePageHeader.d.ts CHANGED Viewed

@@ -6,6 +6,7 @@ export interface SidePageHeaderProps extends CommonProps {
 }
 export interface SidePageHeaderState {
     isReadyToFix: boolean;
+    focusedByTab: boolean;
 }
 /**
  * Шапка сайдпейджа
@@ -18,6 +19,7 @@ export declare class SidePageHeader extends React.Component<SidePageHeaderProps,
     context: SidePageContextType;
     state: {
         isReadyToFix: boolean;
+        focusedByTab: boolean;
     };
     private theme;
     private wrapper;
@@ -30,8 +32,9 @@ export declare class SidePageHeader extends React.Component<SidePageHeaderProps,
     render(): JSX.Element;
     private renderMain;
     private renderHeader;
-    private renderCloseContent;
     private renderClose;
     private updateReadyToFix;
     private wrapperRef;
+    private handleFocus;
+    private handleBlur;
 }

package/components/Switcher/Switcher/Switcher.js CHANGED Viewed

@@ -181,7 +181,7 @@ export var Switcher = /*#__PURE__*/function (_React$Component) {
       onBlur: this._handleBlur,
       className: styles.input()
     };
-    var lableClassName = cx(styles.label(), this.getLabelSizeClassName());
+    var lableClassName = cx(styles.label(this.theme), this.getLabelSizeClassName());
     return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("div", null, this.props.label ? /*#__PURE__*/React.createElement("div", {
       className: lableClassName
     }, this.props.label) : null, /*#__PURE__*/React.createElement("div", {

package/components/Switcher/Switcher/Switcher.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Switcher.tsx"],"names":["React","PropTypes","isKeyArrowHorizontal","isKeyArrowLeft","isKeyEnter","Group","Button","ThemeContext","CommonWrapper","cx","styles","getSwitcherTheme","Switcher","state","focusedIndex","theme","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","labelLarge","labelMedium","labelSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","lableClassName","wrap","Component","__KONTUR_REACT_UI__","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';\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 label?: 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\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 label: 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\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 lableClassName = cx(styles.label(), this.getLabelSizeClassName());\n\n return (\n <CommonWrapper {...this.props}>\n <div>\n {this.props.label ? <div className={lableClassName}>{this.props.label}</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.labelLarge(this.theme);\n case 'medium':\n return styles.labelMedium(this.theme);\n case 'small':\n default:\n return styles.labelSmall(this.theme);\n }\n };\n}\n"]}
1	+ {"version":3,"sources":["Switcher.tsx"],"names":["React","PropTypes","isKeyArrowHorizontal","isKeyArrowLeft","isKeyEnter","Group","Button","ThemeContext","CommonWrapper","cx","styles","getSwitcherTheme","Switcher","state","focusedIndex","theme","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","labelLarge","labelMedium","labelSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","lableClassName","wrap","Component","__KONTUR_REACT_UI__","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';\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 label?: 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\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 label: 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\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 lableClassName = cx(styles.label(this.theme), this.getLabelSizeClassName());\n\n return (\n <CommonWrapper {...this.props}>\n <div>\n {this.props.label ? <div className={lableClassName}>{this.props.label}</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.labelLarge(this.theme);\n case 'medium':\n return styles.labelMedium(this.theme);\n case 'small':\n default:\n return styles.labelSmall(this.theme);\n }\n };\n}\n"]}

package/components/Switcher/Switcher.styles/Switcher.styles.js CHANGED Viewed

@@ -10,8 +10,8 @@ export var styles = memoizeStyle({
   input: function input() {
     return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    "])));
   },
-  label: function label() {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      vertical-align: middle;\n      display: inline-block;\n    "])));
+  label: function label(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      vertical-align: middle;\n      display: inline-block;\n    "])), t.switcherTextColor);
   },
   labelSmall: function labelSmall(t) {
     return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.switcherLabelGapSmall, t.switcherLabelFontSizeSmall, t.switcherLabelLineHeightSmall);

package/components/Switcher/Switcher.styles/Switcher.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Switcher.styles.ts"],"names":["css","memoizeStyle","styles","wrap","input","label","~~labelSmall~~","t","switcherLabelGapSmall","switcherLabelFontSizeSmall","switcherLabelLineHeightSmall","labelMedium","switcherLabelGapMedium","switcherLabelFontSizeMedium","switcherLabelLineHeightMedium","labelLarge","switcherLabelGapLarge","switcherLabelFontSizeLarge","switcherLabelLineHeightLarge","error","switcherOutlineWidth","borderColorError"],"mappings":"gOAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,kBAC1B;AACL,WAAOH,GAAP;;;;AAID,GANgC;;AAQjCI,EAAAA,KARiC,mBAQzB;AACN,WAAOJ,GAAP;;;;;;AAMD,GAfgC;;AAiBjCK,EAAAA,KAjBiC,~~mBAiBzB~~;~~AACN~~,~~WAAOL~~,GAAP;;;;~~AAID~~,~~GAtBgC~~;;~~AAwBjCM~~,EAAAA,~~UAxBiC~~,~~sBAwBtBC~~,~~CAxBsB~~,~~EAwBZ~~;AACnB,~~WAAOP~~,GAAP;~~AACkBO~~,IAAAA,CAAC,~~CAACC~~,qBADpB;~~AAEeD~~,IAAAA,CAAC,~~CAACE~~,0BAFjB;~~AAGiBF~~,IAAAA,CAAC,~~CAACG~~,4BAHnB;;AAKD,~~GA9BgC~~;;~~AAgCjCC~~,EAAAA,~~WAhCiC~~,~~uBAgCrBJ~~,~~CAhCqB~~,~~EAgCX~~;AACpB,~~WAAOP~~,GAAP;~~AACkBO~~,IAAAA,CAAC,~~CAACK~~,sBADpB;~~AAEeL~~,IAAAA,CAAC,~~CAACM~~,2BAFjB;~~AAGiBN~~,IAAAA,CAAC,~~CAACO~~,6BAHnB;;AAKD,~~GAtCgC~~;;~~AAwCjCC~~,EAAAA,~~UAxCiC~~,~~sBAwCtBR~~,~~CAxCsB~~,~~EAwCZ~~;AACnB,~~WAAOP~~,GAAP;~~AACkBO~~,IAAAA,CAAC,~~CAACS~~,qBADpB;~~AAEeT~~,IAAAA,CAAC,~~CAACU~~,0BAFjB;~~AAGiBV~~,IAAAA,CAAC,~~CAACW~~,4BAHnB;;AAKD,~~GA9CgC~~;;~~AAgDjCC~~,EAAAA,~~KAhDiC~~,~~iBAgD3BZ~~,~~CAhD2B~~,~~EAgDjB~~;AACd,~~WAAOP~~,GAAP;;~~AAEsBO~~,IAAAA,CAAC,~~CAACa~~,oBAFxB,~~EAEgDb~~,CAAC,~~CAACc~~,gBAFlD;;AAID,~~GArDgC~~,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\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 label() {\n return css`\n vertical-align: middle;\n display: inline-block;\n `;\n },\n\n labelSmall(t: Theme) {\n return css`\n margin-right: ${t.switcherLabelGapSmall};\n font-size: ${t.switcherLabelFontSizeSmall};\n line-height: ${t.switcherLabelLineHeightSmall};\n `;\n },\n\n labelMedium(t: Theme) {\n return css`\n margin-right: ${t.switcherLabelGapMedium};\n font-size: ${t.switcherLabelFontSizeMedium};\n line-height: ${t.switcherLabelLineHeightMedium};\n `;\n },\n\n labelLarge(t: Theme) {\n return css`\n margin-right: ${t.switcherLabelGapLarge};\n font-size: ${t.switcherLabelFontSizeLarge};\n line-height: ${t.switcherLabelLineHeightLarge};\n `;\n },\n\n error(t: Theme) {\n return css`\n border-radius: 2px;\n box-shadow: 0 0 0 ${t.switcherOutlineWidth} ${t.borderColorError};\n `;\n },\n});\n"]}
1	+ {"version":3,"sources":["Switcher.styles.ts"],"names":["css","memoizeStyle","styles","wrap","input","label","t","switcherTextColor","labelSmall","switcherLabelGapSmall","switcherLabelFontSizeSmall","switcherLabelLineHeightSmall","labelMedium","switcherLabelGapMedium","switcherLabelFontSizeMedium","switcherLabelLineHeightMedium","labelLarge","switcherLabelGapLarge","switcherLabelFontSizeLarge","switcherLabelLineHeightLarge","error","switcherOutlineWidth","borderColorError"],"mappings":"gOAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,kBAC1B;AACL,WAAOH,GAAP;;;;AAID,GANgC;;AAQjCI,EAAAA,KARiC,mBAQzB;AACN,WAAOJ,GAAP;;;;;;AAMD,GAfgC;;AAiBjCK,EAAAA,KAjBiC,iBAiB3BC,CAjB2B,EAiBjB;AACd,WAAON,GAAP;AACWM,IAAAA,CAAC,CAACC,iBADb;;;;AAKD,GAvBgC;;AAyBjCC,EAAAA,UAzBiC,sBAyBtBF,CAzBsB,EAyBZ;AACnB,WAAON,GAAP;AACkBM,IAAAA,CAAC,CAACG,qBADpB;AAEeH,IAAAA,CAAC,CAACI,0BAFjB;AAGiBJ,IAAAA,CAAC,CAACK,4BAHnB;;AAKD,GA/BgC;;AAiCjCC,EAAAA,WAjCiC,uBAiCrBN,CAjCqB,EAiCX;AACpB,WAAON,GAAP;AACkBM,IAAAA,CAAC,CAACO,sBADpB;AAEeP,IAAAA,CAAC,CAACQ,2BAFjB;AAGiBR,IAAAA,CAAC,CAACS,6BAHnB;;AAKD,GAvCgC;;AAyCjCC,EAAAA,UAzCiC,sBAyCtBV,CAzCsB,EAyCZ;AACnB,WAAON,GAAP;AACkBM,IAAAA,CAAC,CAACW,qBADpB;AAEeX,IAAAA,CAAC,CAACY,0BAFjB;AAGiBZ,IAAAA,CAAC,CAACa,4BAHnB;;AAKD,GA/CgC;;AAiDjCC,EAAAA,KAjDiC,iBAiD3Bd,CAjD2B,EAiDjB;AACd,WAAON,GAAP;;AAEsBM,IAAAA,CAAC,CAACe,oBAFxB,EAEgDf,CAAC,CAACgB,gBAFlD;;AAID,GAtDgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\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 label(t: Theme) {\n return css`\n color: ${t.switcherTextColor};\n vertical-align: middle;\n display: inline-block;\n `;\n },\n\n labelSmall(t: Theme) {\n return css`\n margin-right: ${t.switcherLabelGapSmall};\n font-size: ${t.switcherLabelFontSizeSmall};\n line-height: ${t.switcherLabelLineHeightSmall};\n `;\n },\n\n labelMedium(t: Theme) {\n return css`\n margin-right: ${t.switcherLabelGapMedium};\n font-size: ${t.switcherLabelFontSizeMedium};\n line-height: ${t.switcherLabelLineHeightMedium};\n `;\n },\n\n labelLarge(t: Theme) {\n return css`\n margin-right: ${t.switcherLabelGapLarge};\n font-size: ${t.switcherLabelFontSizeLarge};\n line-height: ${t.switcherLabelLineHeightLarge};\n `;\n },\n\n error(t: Theme) {\n return css`\n border-radius: 2px;\n box-shadow: 0 0 0 ${t.switcherOutlineWidth} ${t.borderColorError};\n `;\n },\n});\n"]}

package/components/Switcher/Switcher.styles.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
     wrap(): string;
     input(): string;
-    label(): string;
+    label(t: Theme): string;
     labelSmall(t: Theme): string;
     labelMedium(t: Theme): string;
     labelLarge(t: Theme): string;

package/components/Tabs/Tab.styles/Tab.styles.js CHANGED Viewed

@@ -13,7 +13,7 @@ export var styles = memoizeStyle({
   root: function root(t) {
     var paddingTop = is8pxTheme(t) ? t.tabPaddingY : shift(t.tabPaddingY, '-1px');
     var paddingBottom = is8pxTheme(t) ? "calc(" + t.tabPaddingY + " - " + t.tabBorderWidth + ")" : shift(t.tabPaddingY, '1px');
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      border-bottom: ", " solid transparent;\n      box-sizing: border-box;\n      color: inherit;\n      cursor: pointer;\n      display: inline-block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-left: ", ";\n      margin-right: ", ";\n      padding-bottom: ", ";\n      padding-top: ", ";\n      position: relative;\n      text-decoration: inherit;\n      transition: border-bottom 0.2s ease-out;\n\n      &:hover {\n        outline: inherit;\n        border-bottom: ", " solid ", ";\n      }\n\n      &:focus {\n        outline: inherit;\n      }\n    "])), t.tabBorderWidth, t.tabFontSize, t.tabLineHeight, t.tabPaddingX, t.tabPaddingX, paddingBottom, paddingTop, t.tabBorderWidth, t.tabColorHover);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      border-bottom: ", " solid transparent;\n      box-sizing: border-box;\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-left: ", ";\n      margin-right: ", ";\n      padding-bottom: ", ";\n      padding-top: ", ";\n      position: relative;\n      text-decoration: inherit;\n      transition: border-bottom 0.2s ease-out;\n\n      &:hover {\n        outline: inherit;\n        border-bottom: ", " solid ", ";\n      }\n\n      &:focus {\n        outline: inherit;\n      }\n    "])), t.tabBorderWidth, t.tabTextColorDefault, t.tabFontSize, t.tabLineHeight, t.tabPaddingX, t.tabPaddingX, paddingBottom, paddingTop, t.tabBorderWidth, t.tabColorHover);
   },
   vertical: function vertical(t) {
     return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      border-bottom: none;\n      border-left: ", " solid transparent;\n      display: block;\n      margin-left: 0;\n      margin-right: 0;\n      padding-left: ", ";\n      padding-right: ", ";\n\n      &:hover {\n        border-bottom: none;\n        border-left: ", " solid ", ";\n      }\n\n      .", " {\n        bottom: 0;\n        left: -", ";\n        right: 0;\n      }\n    "])), t.tabBorderWidth, shift(t.tabPaddingX, "-" + t.tabBorderWidth), t.tabPaddingX, t.tabBorderWidth, t.tabColorHover, globalClasses.focus, t.tabBorderWidth);