npm - @skbkontur/react-ui - Versions diffs - 6.4.7-9ac75.0 → 6.4.7 - Mend

@skbkontur/react-ui 6.4.7-9ac75.0 → 6.4.7

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 (914) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SidePage.js","sourceRoot":"","sources":["SidePage.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes, HTMLAttributes, JSX } from 'react';\nimport React from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll/index.js';\nimport { FocusLock } from '../../internal/react-focus-lock/index.js';\nimport { RenderContainer } from '../../internal/RenderContainer/index.js';\nimport { RenderLayer } from '../../internal/RenderLayer/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport { cx } from '../../lib/cx.js';\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { isInstanceOf } from '../../lib/isInstanceOf.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { ModalStack } from '../../lib/ModalStack.js';\nimport type { ModalStackSubscription } from '../../lib/ModalStack.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { isNonNullable, isReactUIInstance } from '../../lib/utils.js';\nimport { ResponsiveLayout } from '../ResponsiveLayout/index.js';\nimport { styles } from './SidePage.css.js';\nimport { SidePageBody } from './SidePageBody.js';\nimport { SidePageContainer } from './SidePageContainer.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport type { SidePageContextType } from './SidePageContext.js';\nimport { SidePageFooter } from './SidePageFooter.js';\nimport { SidePageHeader } from './SidePageHeader.js';\nexport interface SidePageProps\n extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-label'> {\n /** Блокирует фон, когда сайдпейдж открыт: основная страница затемняется, действия на ней становятся недоступны. /\n blockBackground?: boolean;\n\n /* Отключает событие `onClose` и блокирует кнопку закрытия сайдпейджа. /\n disableClose?: boolean;\n\n /\n Оставляет сайдпейдж открытым, когда пользователь нажал на фон.\n * @deprecated Используйте `ignoreOutsideClick` вместо `ignoreBackgroundClick`\n /\n ignoreBackgroundClick?: boolean;\n /\n * Оставляет сайдпейдж открытым, когда пользователь нажал на фон.\n /\n ignoreOutsideClick?: boolean;\n\n / Ширина сайдпейджа. /\n width?: number \| string;\n\n /* Ширина сайдпейджа в мобильном режиме. По умолчанию ширина во весь экран. /\n mobileWidth?: number \| string;\n\n /* Событие закрытия сайдпейджа пользователем: нажатие на фон, Escape или крестик. /\n onClose?: () => void;\n\n /* Событие завершения анимации открытия сайдпейджа. /\n onOpened?: () => void;\n\n /* Отображает сайдпейдж слева. /\n fromLeft?: boolean;\n\n /* Отключает анимацию открытия сайдпейджа. /\n disableAnimations?: boolean;\n\n /* Выключает ограничение на фокус вне сайдпейджа.\n * Работает только при заблокированном фоне `blockBackground = true`./\n disableFocusLock?: boolean;\n\n /* Отступ от края экрана до сайдпейджа. /\n offset?: number \| string;\n /\n Событие нажатия на фон.\n /\n onOutsideClick?: (e: Event) => void;\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 stickyHeaderHeight: number;\n stickyFooterHeight: number;\n}\n\nexport const SidePageDataTids = {\n root: 'SidePage__root',\n container: 'SidePage__container',\n} as const;\n\ntype DefaultProps = Required<Pick<SidePageProps, 'disableAnimations' \| 'offset' \| 'role'>>;\n\nconst TRANSITION_TIMEOUT = 200;\n\n/\n Сайдпейдж — это модальное окно, которое открывается поверх основной страницы и занимает всю высоту окна браузера.\n \n Составной компонент, включает в себя:\n * - «шапку» [SidePage.Header](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepageheader--docs), состоящую из заголовка и крестика закрытия окна;\n * - контент-зону [SidePage.Body](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepagebody--docs) и контейнер с отступами [SidePage.Container](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepagecontainer--docs);\n * - футер [SidePage.Footer](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepagefooter--docs).\n /\n@withRenderEnvironment\n@rootNode\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\n public static __KONTUR_REACT_UI__ = 'SidePage';\n public static displayName = 'SidePage';\n\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\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 stickyHeaderHeight: 0,\n stickyFooterHeight: 0,\n };\n\n private globalObject!: GlobalObject;\n private stackSubscription: ModalStackSubscription \| null = null;\n private layout: HTMLElement \| null = null;\n private header: SidePageHeader \| null = null;\n private footer: SidePageFooter \| null = null;\n public rootRef = React.createRef<HTMLDivElement>();\n\n public componentDidMount() {\n this.globalObject.addEventListener?.('keydown', this.handleKeyDown);\n this.stackSubscription = ModalStack.add(this, this.handleStackChange, this.globalObject);\n }\n\n public componentDidUpdate(prevProps: SidePageProps) {\n if (prevProps.blockBackground !== this.props.blockBackground) {\n ModalStack.rerender(this.globalObject);\n this.setState({\n hasBackground: ModalStack.isBlocking(this, this.globalObject),\n });\n }\n }\n\n public componentWillUnmount() {\n this.globalObject.removeEventListener?.('keydown', this.handleKeyDown);\n if (isNonNullable(this.stackSubscription)) {\n this.stackSubscription.remove();\n }\n ModalStack.remove(this, this.globalObject);\n }\n\n /\n Обновляет разметку компонента.\n * @public\n */\n public updateLayout = (): void => {\n this.header?.update();\n this.footer?.update();\n };\n\n public static defaultProps: DefaultProps = {\n disableAnimations: isTestEnv,\n offset: 0,\n role: 'dialog',\n };\n\n private getProps = createPropsGetter(SidePage.defaultProps);\n\n public render(): JSX.Element {\n const { blockBackground, onOpened } = this.props;\n const disableAnimations = this.getProps().disableAnimations;\n return (\n <ResponsiveLayout>\n {({ isMobile }) => (\n <RenderContainer>\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <ZIndex\n priority={'Sidepage'}\n onScroll={LayoutEvents.emit}\n createStackingContext\n style={{ position: 'absolute' }}\n >\n {!isMobile && blockBackground && this.renderShadow()}\n <CSSTransition\n in\n classNames={this.getTransitionNames()}\n appear={!disableAnimations}\n enter={!disableAnimations}\n exit={false}\n timeout={{\n enter: TRANSITION_TIMEOUT,\n exit: TRANSITION_TIMEOUT,\n }}\n nodeRef={this.rootRef}\n onEntered={onOpened}\n >\n {this.renderContainer(isMobile)}\n </CSSTransition>\n {isMobile && <HideBodyVerticalScroll />}\n </ZIndex>\n </CommonWrapper>\n </RenderContainer>\n )}\n </ResponsiveLayout>\n );\n }\n\n private get isFocusLockDisabled() {\n const { disableFocusLock } = this.getProps();\n const { blockBackground } = this.props;\n if (!blockBackground) {\n return true;\n }\n if (disableFocusLock !== undefined) {\n return disableFocusLock;\n }\n return false;\n }\n\n private renderContainer(isMobile: boolean): JSX.Element {\n const { mobileWidth, blockBackground, fromLeft, 'aria-label': ariaLabel } = this.props;\n const { offset, role } = this.getProps();\n\n const widthDesktop = this.props.width \|\| (blockBackground ? 800 : 500);\n const widthMobile = mobileWidth \|\| '100%';\n const width = isMobile ? widthMobile : widthDesktop;\n\n return (\n <div\n aria-modal\n role={role}\n aria-label={ariaLabel}\n data-tid={SidePageDataTids.root}\n className={cx({\n [styles.root]: true,\n })}\n ref={this.rootRef}\n onScroll={LayoutEvents.emit}\n style={{\n width,\n right: fromLeft ? 'auto' : offset,\n left: fromLeft ? offset : 'auto',\n }}\n >\n <FocusLock disabled={this.isFocusLockDisabled} autoFocus={false} className={styles.focusLock}>\n <RenderLayer onClickOutside={this.handleClickOutside} active>\n <div\n data-tid={SidePageDataTids.container}\n className={cx(styles.wrapper, {\n [styles.wrapperLeft]: fromLeft,\n [styles.wrapperMarginLeft]: this.state.hasMargin && fromLeft,\n [styles.wrapperMarginRight]: this.state.hasMargin && !fromLeft,\n [styles.shadow]: this.state.hasShadow,\n })}\n data-scroll-inset-top={this.state.stickyHeaderHeight \|\| undefined}\n data-scroll-inset-bottom={this.state.stickyFooterHeight \|\| undefined}\n ref={this.layoutRef}\n >\n <SidePageContext.Provider value={this.getSidePageContextProps()}>\n {this.props.children}\n </SidePageContext.Provider>\n </div>\n </RenderLayer>\n </FocusLock>\n </div>\n );\n }\n\n private getSidePageContextProps = (): SidePageContextType => {\n return {\n hasHeader: this.state.hasHeader,\n hasFooter: this.state.hasFooter,\n hasPanel: this.state.hasPanel,\n requestClose: this.requestClose,\n getWidth: this.getWidth,\n updateLayout: this.updateLayout,\n headerRef: this.headerRef,\n footerRef: this.footerRef,\n setHasHeader: this.setHasHeader,\n setHasFooter: this.setHasFooter,\n setHasPanel: this.setHasPanel,\n setStickyHeaderHeight: this.setStickyHeaderHeight,\n setStickyFooterHeight: this.setStickyFooterHeight,\n };\n };\n\n private getWidth = () => {\n if (!this.layout) {\n return 'auto';\n }\n return this.layout.clientWidth;\n };\n\n private renderShadow(): JSX.Element {\n return (\n <div 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.state.hasBackground,\n })}\n />\n </div>\n );\n }\n\n private getTransitionNames(): Record<string, string> {\n const transition = this.props.fromLeft ? styles.transitionRight : styles.transitionLeft;\n\n return {\n enter: transition,\n enterActive: styles.transitionActive,\n exit: styles.transitionLeave,\n exitActive: styles.transitionLeaveActive,\n appear: transition,\n appearActive: styles.transitionActive,\n };\n }\n\n private handleStackChange = (stack: readonly React.Component[]) => {\n const sidePages = stack.filter(\n (x) => isReactUIInstance<SidePage>(x, 'SidePage') && x.props.fromLeft === this.props.fromLeft,\n );\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, this.globalObject);\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 \|\| this.props.ignoreOutsideClick)) {\n // ignore mousedown on window scrollbar\n if (\n isInstanceOf(e, this.globalObject.MouseEvent) &&\n this.globalObject.document &&\n e.clientX > this.globalObject.document.documentElement.clientWidth\n ) {\n return;\n }\n if (this.props.onOutsideClick) {\n this.props.onOutsideClick(e);\n if (e.defaultPrevented) {\n return;\n }\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 e.stopPropagation();\n this.requestClose();\n }\n };\n\n private requestClose = () => {\n if (this.props.disableClose) {\n return;\n }\n if (this.props.onClose) {\n this.props.onClose();\n }\n };\n\n private headerRef = (ref: SidePageHeader \| null) => {\n this.header = ref;\n };\n\n private footerRef = (ref: SidePageFooter \| null) => {\n this.footer = ref;\n };\n\n private layoutRef = (ref: HTMLDivElement \| null) => {\n this.layout = ref;\n };\n\n private setHasHeader = (hasHeader = true) => {\n this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n };\n\n private setHasFooter = (hasFooter = true) => {\n this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n };\n\n private setHasPanel = (hasPanel = false) => {\n this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n };\n\n private setStickyHeaderHeight = (stickyHeaderHeight = 0) => {\n if (this.state.stickyHeaderHeight !== stickyHeaderHeight) {\n this.setState({ stickyHeaderHeight });\n }\n };\n\n private setStickyFooterHeight = (stickyFooterHeight = 0) => {\n if (this.state.stickyFooterHeight !== stickyFooterHeight) {\n this.setState({ stickyFooterHeight });\n }\n };\n}\n"]}
1	+ {"version":3,"file":"SidePage.js","sourceRoot":"","sources":["SidePage.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes, HTMLAttributes, JSX } from 'react';\nimport React from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll/index.js';\nimport { FocusLock } from '../../internal/react-focus-lock/index.js';\nimport { RenderContainer } from '../../internal/RenderContainer/index.js';\nimport { RenderLayer } from '../../internal/RenderLayer/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { isInstanceOf } from '../../lib/isInstanceOf.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { ModalStack } from '../../lib/ModalStack.js';\nimport type { ModalStackSubscription } from '../../lib/ModalStack.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isNonNullable, isReactUIInstance } from '../../lib/utils.js';\nimport { ResponsiveLayout } from '../ResponsiveLayout/index.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageBody } from './SidePageBody.js';\nimport { SidePageContainer } from './SidePageContainer.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport type { SidePageContextType } from './SidePageContext.js';\nimport { SidePageFooter } from './SidePageFooter.js';\nimport { SidePageHeader } from './SidePageHeader.js';\nexport interface SidePageProps\n extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-label'> {\n /** Блокирует фон, когда сайдпейдж открыт: основная страница затемняется, действия на ней становятся недоступны. /\n blockBackground?: boolean;\n\n /* Отключает событие `onClose` и блокирует кнопку закрытия сайдпейджа. /\n disableClose?: boolean;\n\n /\n Оставляет сайдпейдж открытым, когда пользователь нажал на фон.\n * @deprecated Используйте `ignoreOutsideClick` вместо `ignoreBackgroundClick`\n /\n ignoreBackgroundClick?: boolean;\n /\n * Оставляет сайдпейдж открытым, когда пользователь нажал на фон.\n /\n ignoreOutsideClick?: boolean;\n\n / Ширина сайдпейджа. /\n width?: number \| string;\n\n /* Ширина сайдпейджа в мобильном режиме. По умолчанию ширина во весь экран. /\n mobileWidth?: number \| string;\n\n /* Событие закрытия сайдпейджа пользователем: нажатие на фон, Escape или крестик. /\n onClose?: () => void;\n\n /* Событие завершения анимации открытия сайдпейджа. /\n onOpened?: () => void;\n\n /* Отображает сайдпейдж слева. /\n fromLeft?: boolean;\n\n /* Отключает анимацию открытия сайдпейджа. /\n disableAnimations?: boolean;\n\n /* Выключает ограничение на фокус вне сайдпейджа.\n * Работает только при заблокированном фоне `blockBackground = true`./\n disableFocusLock?: boolean;\n\n /* Отступ от края экрана до сайдпейджа. /\n offset?: number \| string;\n /\n Событие нажатия на фон.\n /\n onOutsideClick?: (e: Event) => void;\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 stickyHeaderHeight: number;\n stickyFooterHeight: number;\n}\n\nexport const SidePageDataTids = {\n root: 'SidePage__root',\n container: 'SidePage__container',\n} as const;\n\ntype DefaultProps = Required<Pick<SidePageProps, 'disableAnimations' \| 'offset' \| 'role'>>;\n\nconst TRANSITION_TIMEOUT = 200;\n\n/\n Сайдпейдж — это модальное окно, которое открывается поверх основной страницы и занимает всю высоту окна браузера.\n \n Составной компонент, включает в себя:\n * - «шапку» [SidePage.Header](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepageheader--docs), состоящую из заголовка и крестика закрытия окна;\n * - контент-зону [SidePage.Body](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepagebody--docs) и контейнер с отступами [SidePage.Container](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepagecontainer--docs);\n * - футер [SidePage.Footer](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage-sidepagefooter--docs).\n /\n@withRenderEnvironment\n@rootNode\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\n public static __KONTUR_REACT_UI__ = 'SidePage';\n public static displayName = 'SidePage';\n\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\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 stickyHeaderHeight: 0,\n stickyFooterHeight: 0,\n };\n\n private globalObject!: GlobalObject;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private styles!: ReturnType<typeof getStyles>;\n private theme!: Theme;\n private stackSubscription: ModalStackSubscription \| null = null;\n private layout: HTMLElement \| null = null;\n private header: SidePageHeader \| null = null;\n private footer: SidePageFooter \| null = null;\n public rootRef = React.createRef<HTMLDivElement>();\n\n public componentDidMount() {\n this.globalObject.addEventListener?.('keydown', this.handleKeyDown);\n this.stackSubscription = ModalStack.add(this, this.handleStackChange, this.globalObject);\n }\n\n public componentDidUpdate(prevProps: SidePageProps) {\n if (prevProps.blockBackground !== this.props.blockBackground) {\n ModalStack.rerender(this.globalObject);\n this.setState({\n hasBackground: ModalStack.isBlocking(this, this.globalObject),\n });\n }\n }\n\n public componentWillUnmount() {\n this.globalObject.removeEventListener?.('keydown', this.handleKeyDown);\n if (isNonNullable(this.stackSubscription)) {\n this.stackSubscription.remove();\n }\n ModalStack.remove(this, this.globalObject);\n }\n\n /\n Обновляет разметку компонента.\n * @public\n */\n public updateLayout = (): void => {\n this.header?.update();\n this.footer?.update();\n };\n\n public static defaultProps: DefaultProps = {\n disableAnimations: isTestEnv,\n offset: 0,\n role: 'dialog',\n };\n\n private getProps = createPropsGetter(SidePage.defaultProps);\n\n public render(): JSX.Element {\n this.styles = getStyles(this.emotion);\n\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, onOpened } = this.props;\n const disableAnimations = this.getProps().disableAnimations;\n return (\n <ResponsiveLayout>\n {({ isMobile }) => (\n <RenderContainer>\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <ZIndex\n priority={'Sidepage'}\n onScroll={LayoutEvents.emit}\n createStackingContext\n style={{ position: 'absolute' }}\n >\n {!isMobile && blockBackground && this.renderShadow()}\n <CSSTransition\n in\n classNames={this.getTransitionNames()}\n appear={!disableAnimations}\n enter={!disableAnimations}\n exit={false}\n timeout={{\n enter: TRANSITION_TIMEOUT,\n exit: TRANSITION_TIMEOUT,\n }}\n nodeRef={this.rootRef}\n onEntered={onOpened}\n >\n {this.renderContainer(isMobile)}\n </CSSTransition>\n {isMobile && <HideBodyVerticalScroll />}\n </ZIndex>\n </CommonWrapper>\n </RenderContainer>\n )}\n </ResponsiveLayout>\n );\n }\n\n private get isFocusLockDisabled() {\n const { disableFocusLock } = this.getProps();\n const { blockBackground } = this.props;\n if (!blockBackground) {\n return true;\n }\n if (disableFocusLock !== undefined) {\n return disableFocusLock;\n }\n return false;\n }\n\n private renderContainer(isMobile: boolean): JSX.Element {\n const { mobileWidth, blockBackground, fromLeft, 'aria-label': ariaLabel } = this.props;\n const { offset, role } = this.getProps();\n\n const widthDesktop = this.props.width \|\| (blockBackground ? 800 : 500);\n const widthMobile = mobileWidth \|\| '100%';\n const width = isMobile ? widthMobile : widthDesktop;\n\n return (\n <div\n aria-modal\n role={role}\n aria-label={ariaLabel}\n data-tid={SidePageDataTids.root}\n className={this.cx({\n [this.styles.root()]: true,\n })}\n ref={this.rootRef}\n onScroll={LayoutEvents.emit}\n style={{\n width,\n right: fromLeft ? 'auto' : offset,\n left: fromLeft ? offset : 'auto',\n }}\n >\n <FocusLock disabled={this.isFocusLockDisabled} autoFocus={false} className={this.styles.focusLock()}>\n <RenderLayer onClickOutside={this.handleClickOutside} active>\n <div\n data-tid={SidePageDataTids.container}\n className={this.cx(this.styles.wrapper(this.theme), {\n [this.styles.wrapperLeft()]: fromLeft,\n [this.styles.wrapperMarginLeft()]: this.state.hasMargin && fromLeft,\n [this.styles.wrapperMarginRight()]: this.state.hasMargin && !fromLeft,\n [this.styles.shadow(this.theme)]: this.state.hasShadow,\n })}\n data-scroll-inset-top={this.state.stickyHeaderHeight \|\| undefined}\n data-scroll-inset-bottom={this.state.stickyFooterHeight \|\| undefined}\n ref={this.layoutRef}\n >\n <SidePageContext.Provider value={this.getSidePageContextProps()}>\n {this.props.children}\n </SidePageContext.Provider>\n </div>\n </RenderLayer>\n </FocusLock>\n </div>\n );\n }\n\n private getSidePageContextProps = (): SidePageContextType => {\n return {\n hasHeader: this.state.hasHeader,\n hasFooter: this.state.hasFooter,\n hasPanel: this.state.hasPanel,\n requestClose: this.requestClose,\n getWidth: this.getWidth,\n updateLayout: this.updateLayout,\n headerRef: this.headerRef,\n footerRef: this.footerRef,\n setHasHeader: this.setHasHeader,\n setHasFooter: this.setHasFooter,\n setHasPanel: this.setHasPanel,\n setStickyHeaderHeight: this.setStickyHeaderHeight,\n setStickyFooterHeight: this.setStickyFooterHeight,\n };\n };\n\n private getWidth = () => {\n if (!this.layout) {\n return 'auto';\n }\n return this.layout.clientWidth;\n };\n\n private renderShadow(): JSX.Element {\n return (\n <div className={this.styles.overlay()} onScroll={LayoutEvents.emit}>\n <HideBodyVerticalScroll key=\"hbvs\" />\n <div\n key=\"overlay\"\n className={this.cx({\n [this.styles.background()]: true,\n [this.styles.backgroundGray(this.theme)]: this.state.hasBackground,\n })}\n />\n </div>\n );\n }\n\n private getTransitionNames(): Record<string, string> {\n const transition = this.props.fromLeft ? this.styles.transitionRight : this.styles.transitionLeft;\n\n return {\n enter: transition(),\n enterActive: this.styles.transitionActive(),\n exit: this.styles.transitionLeave(),\n exitActive: this.styles.transitionLeaveActive(),\n appear: transition(),\n appearActive: this.styles.transitionActive(),\n };\n }\n\n private handleStackChange = (stack: readonly React.Component[]) => {\n const sidePages = stack.filter(\n (x) => isReactUIInstance<SidePage>(x, 'SidePage') && x.props.fromLeft === this.props.fromLeft,\n );\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, this.globalObject);\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 \|\| this.props.ignoreOutsideClick)) {\n // ignore mousedown on window scrollbar\n if (\n isInstanceOf(e, this.globalObject.MouseEvent) &&\n this.globalObject.document &&\n e.clientX > this.globalObject.document.documentElement.clientWidth\n ) {\n return;\n }\n if (this.props.onOutsideClick) {\n this.props.onOutsideClick(e);\n if (e.defaultPrevented) {\n return;\n }\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 e.stopPropagation();\n this.requestClose();\n }\n };\n\n private requestClose = () => {\n if (this.props.disableClose) {\n return;\n }\n if (this.props.onClose) {\n this.props.onClose();\n }\n };\n\n private headerRef = (ref: SidePageHeader \| null) => {\n this.header = ref;\n };\n\n private footerRef = (ref: SidePageFooter \| null) => {\n this.footer = ref;\n };\n\n private layoutRef = (ref: HTMLDivElement \| null) => {\n this.layout = ref;\n };\n\n private setHasHeader = (hasHeader = true) => {\n this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n };\n\n private setHasFooter = (hasFooter = true) => {\n this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n };\n\n private setHasPanel = (hasPanel = false) => {\n this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n };\n\n private setStickyHeaderHeight = (stickyHeaderHeight = 0) => {\n if (this.state.stickyHeaderHeight !== stickyHeaderHeight) {\n this.setState({ stickyHeaderHeight });\n }\n };\n\n private setStickyFooterHeight = (stickyFooterHeight = 0) => {\n if (this.state.stickyFooterHeight !== stickyFooterHeight) {\n this.setState({ stickyFooterHeight });\n }\n };\n}\n"]}

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

@@ -0,0 +1,50 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    root(): string;
+    overlay(): string;
+    body(t: Theme): string;
+    mobileBody(): string;
+    container(t: Theme): string;
+    mobileContainer(t: Theme): string;
+    containerWithoutHeader(t: Theme): string;
+    mobileContainerWithoutHeader(t: Theme): string;
+    containerWithoutFooter(t: Theme): string;
+    containerWithPanel(t: Theme): string;
+    focusLock(): string;
+    wrapper(t: Theme): string;
+    wrapperLeft(): string;
+    wrapperMarginLeft(): string;
+    wrapperMarginRight(): string;
+    headerWrapper(): string;
+    header(t: Theme): string;
+    mobileHeader(t: Theme): string;
+    headerFixed(t: Theme): string;
+    headerNativeStuck(t: Theme): string;
+    title(t: Theme): string;
+    mobileTitle(t: Theme): string;
+    titleCut(): string;
+    background(): string;
+    backgroundGray(t: Theme): string;
+    shadow(t: Theme): string;
+    close(t: Theme): string;
+    closeSticky(t: Theme): string;
+    closeMobile(t: Theme): string;
+    closeFocus(t: Theme): string;
+    wrapperClose(t: Theme): string;
+    wrapperClose6_4(): string;
+    mobileWrapperClose(t: Theme): string;
+    panel(t: Theme): string;
+    wrapperCloseFixed(t: Theme): string;
+    footerWrapper(): string;
+    footer(t: Theme): string;
+    positionStatic(): string;
+    footerContent(t: Theme): string;
+    mobileFooterContent(t: Theme): string;
+    footerFixed(t: Theme): string;
+    panelFixed(t: Theme): string;
+    transitionLeft(): string;
+    transitionRight(): string;
+    transitionActive(): string;
+    transitionLeave(): string;
+    transitionLeaveActive(): string;
+}>;

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

@@ -0,0 +1,158 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { resetButton } from '../../lib/styles/Mixins.js';
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        root: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      height: 100%;\n      position: fixed;\n      top: 0;\n    "], ["\n      height: 100%;\n      position: fixed;\n      top: 0;\n    "])));
+        },
+        overlay: function () {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    "], ["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    "])));
+        },
+        body: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      flex: 1 0 auto;\n      z-index: 0;\n      color: ", ";\n    "], ["\n      flex: 1 0 auto;\n      z-index: 0;\n      color: ", ";\n    "])), t.modalBodyTextColor);
+        },
+        mobileBody: function () {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-size: 16px;\n      line-height: 22px;\n    "], ["\n      font-size: 16px;\n      line-height: 22px;\n    "])));
+        },
+        container: function (t) {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.sidePagePaddingLeft, t.sidePagePaddingRight);
+        },
+        mobileContainer: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n      padding-bottom: ", ";\n    "])), t.mobileSidePagePaddingLeft, t.mobileSidePagePaddingRight, t.mobileSidePagePaddingBottom);
+        },
+        containerWithoutHeader: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: ", ";\n    "], ["\n      padding-top: ", ";\n    "])), t.sidePagePaddingTop);
+        },
+        mobileContainerWithoutHeader: function (t) {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      padding-top: ", ";\n    "], ["\n      padding-top: ", ";\n    "])), t.mobileSidePagePaddingTop);
+        },
+        containerWithoutFooter: function (t) {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      padding-bottom: ", ";\n    "], ["\n      padding-bottom: ", ";\n    "])), t.sidePagePaddingBottom);
+        },
+        containerWithPanel: function (t) {
+            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      padding-bottom: ", ";\n    "], ["\n      padding-bottom: ", ";\n    "])), t.sidePagePaddingBottom);
+        },
+        focusLock: function () {
+            return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      height: 100%;\n    "], ["\n      height: 100%;\n    "])));
+        },
+        wrapper: function (t) {
+            return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      background: ", ";\n      float: right;\n      height: 100%;\n      width: 100%;\n      overflow-y: auto;\n      position: relative;\n      white-space: normal;\n      align-items: stretch;\n      display: flex;\n      flex-direction: column;\n    "], ["\n      background: ", ";\n      float: right;\n      height: 100%;\n      width: 100%;\n      overflow-y: auto;\n      position: relative;\n      white-space: normal;\n      align-items: stretch;\n      display: flex;\n      flex-direction: column;\n    "])), t.sidePageBgDefault);
+        },
+        wrapperLeft: function () {
+            return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      float: left;\n    "], ["\n      float: left;\n    "])));
+        },
+        wrapperMarginLeft: function () {
+            return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      margin-left: 20px;\n    "], ["\n      margin-left: 20px;\n    "])));
+        },
+        wrapperMarginRight: function () {
+            return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      margin-right: 20px;\n    "], ["\n      margin-right: 20px;\n    "])));
+        },
+        headerWrapper: function () {
+            return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      flex: 0 0 auto;\n    "], ["\n      flex: 0 0 auto;\n    "])));
+        },
+        header: function (t) {
+            return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      width: 100%;\n      position: relative;\n      color: ", ";\n      font-weight: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      width: 100%;\n      position: relative;\n      color: ", ";\n      font-weight: ", ";\n    "])), t.sidePageHeaderFontSize, t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageHeaderTextColor, t.sidePageHeaderFontWeight);
+        },
+        mobileHeader: function (t) {
+            return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n    "])), t.mobileSidePageHeaderFontSize, t.mobileSidePageHeaderLineHeight, t.mobileSidePageHeaderPaddingTop, t.mobileSidePageHeaderPaddingBottom);
+        },
+        headerFixed: function (t) {
+            return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      background: ", ";\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    "], ["\n      background: ", ";\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.sidePageFixedHeaderShadow);
+        },
+        headerNativeStuck: function (t) {
+            return css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      position: sticky;\n      top: 0;\n      z-index: 16000;\n      background: linear-gradient(to top, transparent ", ", ", " 0px);\n    "], ["\n      position: sticky;\n      top: 0;\n      z-index: 16000;\n      background: linear-gradient(to top, transparent ", ", ", " 0px);\n    "])), t.sidePageHeaderPaddingBottom, t.sidePageBgDefault);
+        },
+        title: function (t) {
+            var paddingRight = parseInt(t.sidePageCloseButtonClickAreaLeft) +
+                parseInt(t.sidePageCloseIconSize) +
+                parseInt(t.sidePageCloseButtonClickAreaRight);
+            return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "], ["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "])), t.sidePagePaddingLeft, paddingRight);
+        },
+        mobileTitle: function (t) {
+            var paddingRight = parseInt(t.mobileSidePageCloseButtonPadding) * 2 + parseInt(t.sidePageCloseIconSize);
+            return css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "], ["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "])), t.mobileSidePagePaddingLeft, paddingRight);
+        },
+        titleCut: function () {
+            return css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "], ["\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])));
+        },
+        background: function () {
+            return css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n      height: 100%;\n      position: absolute;\n      width: 100%;\n    "], ["\n      height: 100%;\n      position: absolute;\n      width: 100%;\n    "])));
+        },
+        backgroundGray: function (t) {
+            return css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n      background: ", ";\n      opacity: ", ";\n    "], ["\n      background: ", ";\n      opacity: ", ";\n    "])), t.sidePageBackingBg, t.sidePageBackingBgOpacity);
+        },
+        shadow: function (t) {
+            return css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), t.sidePageContainerShadow);
+        },
+        close: function (t) {
+            return css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n      ", ";\n      cursor: pointer;\n      color: ", ";\n      padding-top: ", ";\n      margin-top: -", ";\n      padding-right: ", ";\n      margin-right: -", ";\n      padding-bottom: ", ";\n      margin-bottom: -", ";\n      padding-left: ", ";\n      margin-left: -", ";\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    "], ["\n      ", ";\n      cursor: pointer;\n      color: ", ";\n      padding-top: ", ";\n      margin-top: -", ";\n      padding-right: ", ";\n      margin-right: -", ";\n      padding-bottom: ", ";\n      margin-bottom: -", ";\n      padding-left: ", ";\n      margin-left: -", ";\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.sidePageCloseButtonClickAreaTop, t.sidePageCloseButtonClickAreaTop, t.sidePageCloseButtonClickAreaRight, t.sidePageCloseButtonClickAreaRight, t.sidePageCloseButtonClickAreaBottom, t.sidePageCloseButtonClickAreaBottom, t.sidePageCloseButtonClickAreaLeft, t.sidePageCloseButtonClickAreaLeft, t.sidePageCloseButtonHoverColor, t.sidePageCloseIconSize, t.sidePageCloseIconSize);
+        },
+        closeSticky: function (t) {
+            return css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n      padding-top: ", ";\n      margin-top: -", ";\n      padding-bottom: ", ";\n      margin-bottom: -", ";\n    "], ["\n      padding-top: ", ";\n      margin-top: -", ";\n      padding-bottom: ", ";\n      margin-bottom: -", ";\n    "])), t.sidePageCloseButtonFixedClickAreaTop, t.sidePageCloseButtonFixedClickAreaTop, t.sidePageCloseButtonFixedClickAreaBottom, t.sidePageCloseButtonFixedClickAreaBottom);
+        },
+        closeMobile: function (t) {
+            return css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n      padding: ", ";\n      margin: -", ";\n      font-size: 0;\n    "], ["\n      padding: ", ";\n      margin: -", ";\n      font-size: 0;\n    "])), t.mobileSidePageCloseButtonClickArea, t.mobileSidePageCloseButtonClickArea);
+        },
+        closeFocus: function (t) {
+            return css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n      box-shadow: inset 0 0 0 2px ", ";\n      border-radius: 4px;\n    "], ["\n      box-shadow: inset 0 0 0 2px ", ";\n      border-radius: 4px;\n    "])), t.borderColorFocus);
+        },
+        wrapperClose: function (t) {
+            return css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n      box-sizing: border-box;\n      height: 100%;\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      position: absolute;\n      right: ", ";\n      top: ", ";\n    "], ["\n      box-sizing: border-box;\n      height: 100%;\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      position: absolute;\n      right: ", ";\n      top: ", ";\n    "])), t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageCloseButtonClickAreaRight, t.sidePageCloseButtonWrapperOffsetTop);
+        },
+        wrapperClose6_4: function () {
+            return css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n      height: auto;\n      padding-bottom: 0;\n    "], ["\n      height: auto;\n      padding-bottom: 0;\n    "])));
+        },
+        mobileWrapperClose: function (t) {
+            return css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      right: ", ";\n    "], ["\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      right: ", ";\n    "])), t.mobileSidePageHeaderLineHeight, t.mobileSidePageHeaderPaddingTop, t.mobileSidePageHeaderPaddingBottom, t.mobileSidePageCloseButtonPadding);
+        },
+        panel: function (t) {
+            return css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n      background: ", ";\n      padding: ", " ", " ", "\n        ", ";\n    "], ["\n      background: ", ";\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPanelBg, t.sidePageFooterPanelPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPanelPaddingBottom, t.sidePagePaddingLeft);
+        },
+        wrapperCloseFixed: function (t) {
+            return css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n      top: ", ";\n    "], ["\n      top: ", ";\n    "])), t.sidePageCloseButtonWrapperFixedOffsetTop);
+        },
+        footerWrapper: function () {
+            return css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n      flex: 0 0 auto;\n    "], ["\n      flex: 0 0 auto;\n    "])));
+        },
+        footer: function (t) {
+            return css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n      color: ", ";\n    "], ["\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n      color: ", ";\n    "])), t.sidePageFooterTextColor);
+        },
+        positionStatic: function () {
+            return css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n      position: static;\n    "], ["\n      position: static;\n    "])));
+        },
+        footerContent: function (t) {
+            return css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n      padding: ", " ", " ", "\n        ", ";\n    "], ["\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPaddingBottom, t.sidePagePaddingLeft);
+        },
+        mobileFooterContent: function (t) {
+            return css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n      display: flex;\n      flex-flow: column nowrap;\n      padding: ", ";\n    "], ["\n      display: flex;\n      flex-flow: column nowrap;\n      padding: ", ";\n    "])), t.mobileSidePageFooterPadding);
+        },
+        footerFixed: function (t) {
+            return css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\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    "], ["\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);
+        },
+        panelFixed: function (t) {
+            return css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n      &:before {\n        box-shadow: ", ";\n      }\n    "], ["\n      &:before {\n        box-shadow: ", ";\n      }\n    "])), t.sidePageFixedPanelShadow);
+        },
+        transitionLeft: function () {
+            return css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n      transform: translateX(100px);\n    "], ["\n      transform: translateX(100px);\n    "])));
+        },
+        transitionRight: function () {
+            return css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n      transform: translateX(-100px);\n    "], ["\n      transform: translateX(-100px);\n    "])));
+        },
+        transitionActive: function () {
+            return css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n      transition:\n        transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),\n        opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1 !important;\n      transform: translate(0, 0) !important;\n    "], ["\n      transition:\n        transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),\n        opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1 !important;\n      transform: translate(0, 0) !important;\n    "])));
+        },
+        transitionLeave: function () {
+            return css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n      opacity: 1;\n    "], ["\n      opacity: 1;\n    "])));
+        },
+        transitionLeaveActive: function () {
+            return css(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    "], ["\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    "])));
+        },
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47;
+//# sourceMappingURL=SidePage.styles.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"SidePage.styles.js","sourceRoot":"","sources":["SidePage.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { resetButton } from '../../lib/styles/Mixins.js';\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root() {\n return css`\n height: 100%;\n position: fixed;\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(t: Theme) {\n return css`\n flex: 1 0 auto;\n z-index: 0;\n color: ${t.modalBodyTextColor};\n `;\n },\n\n mobileBody() {\n return css`\n font-size: 16px;\n line-height: 22px;\n `;\n },\n\n container(t: Theme) {\n return css`\n padding-left: ${t.sidePagePaddingLeft};\n padding-right: ${t.sidePagePaddingRight};\n `;\n },\n\n mobileContainer(t: Theme) {\n return css`\n padding-left: ${t.mobileSidePagePaddingLeft};\n padding-right: ${t.mobileSidePagePaddingRight};\n padding-bottom: ${t.mobileSidePagePaddingBottom};\n `;\n },\n\n containerWithoutHeader(t: Theme) {\n return css`\n padding-top: ${t.sidePagePaddingTop};\n `;\n },\n\n mobileContainerWithoutHeader(t: Theme) {\n return css`\n padding-top: ${t.mobileSidePagePaddingTop};\n `;\n },\n\n containerWithoutFooter(t: Theme) {\n return css`\n padding-bottom: ${t.sidePagePaddingBottom};\n `;\n },\n\n containerWithPanel(t: Theme) {\n return css`\n padding-bottom: ${t.sidePagePaddingBottom};\n `;\n },\n\n focusLock() {\n return css`\n height: 100%;\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 align-items: stretch;\n display: flex;\n flex-direction: column;\n `;\n },\n\n wrapperLeft() {\n return css`\n float: left;\n `;\n },\n\n wrapperMarginLeft() {\n return css`\n margin-left: 20px;\n `;\n },\n\n wrapperMarginRight() {\n return css`\n margin-right: 20px;\n `;\n },\n\n headerWrapper() {\n return css`\n flex: 0 0 auto;\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 font-weight: ${t.sidePageHeaderFontWeight};\n `;\n },\n\n mobileHeader(t: Theme) {\n return css`\n font-size: ${t.mobileSidePageHeaderFontSize};\n line-height: ${t.mobileSidePageHeaderLineHeight};\n padding: ${t.mobileSidePageHeaderPaddingTop} 0 ${t.mobileSidePageHeaderPaddingBottom};\n `;\n },\n\n headerFixed(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\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 headerNativeStuck(t: Theme) {\n return css`\n position: sticky;\n top: 0;\n z-index: 16000;\n background: linear-gradient(to top, transparent ${t.sidePageHeaderPaddingBottom}, ${t.sidePageBgDefault} 0px);\n `;\n },\n\n title(t: Theme) {\n const paddingRight =\n parseInt(t.sidePageCloseButtonClickAreaLeft) +\n parseInt(t.sidePageCloseIconSize) +\n parseInt(t.sidePageCloseButtonClickAreaRight);\n return css`\n padding-left: ${t.sidePagePaddingLeft};\n padding-right: ${paddingRight}px;\n `;\n },\n\n mobileTitle(t: Theme) {\n const paddingRight = parseInt(t.mobileSidePageCloseButtonPadding) * 2 + parseInt(t.sidePageCloseIconSize);\n return css`\n padding-left: ${t.mobileSidePagePaddingLeft};\n padding-right: ${paddingRight}px;\n `;\n },\n\n titleCut() {\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 close(t: Theme) {\n return css`\n ${resetButton()};\n cursor: pointer;\n color: ${t.sidePageCloseButtonColor};\n padding-top: ${t.sidePageCloseButtonClickAreaTop};\n margin-top: -${t.sidePageCloseButtonClickAreaTop};\n padding-right: ${t.sidePageCloseButtonClickAreaRight};\n margin-right: -${t.sidePageCloseButtonClickAreaRight};\n padding-bottom: ${t.sidePageCloseButtonClickAreaBottom};\n margin-bottom: -${t.sidePageCloseButtonClickAreaBottom};\n padding-left: ${t.sidePageCloseButtonClickAreaLeft};\n margin-left: -${t.sidePageCloseButtonClickAreaLeft};\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 closeSticky(t: Theme) {\n return css`\n padding-top: ${t.sidePageCloseButtonFixedClickAreaTop};\n margin-top: -${t.sidePageCloseButtonFixedClickAreaTop};\n padding-bottom: ${t.sidePageCloseButtonFixedClickAreaBottom};\n margin-bottom: -${t.sidePageCloseButtonFixedClickAreaBottom};\n `;\n },\n\n closeMobile(t: Theme) {\n return css`\n padding: ${t.mobileSidePageCloseButtonClickArea};\n margin: -${t.mobileSidePageCloseButtonClickArea};\n font-size: 0;\n `;\n },\n\n closeFocus(t: Theme) {\n return css`\n box-shadow: inset 0 0 0 2px ${t.borderColorFocus};\n border-radius: 4px;\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.sidePageCloseButtonClickAreaRight};\n top: ${t.sidePageCloseButtonWrapperOffsetTop};\n `;\n },\n\n wrapperClose6_4() {\n return css`\n height: auto;\n padding-bottom: 0;\n `;\n },\n\n mobileWrapperClose(t: Theme) {\n return css`\n line-height: ${t.mobileSidePageHeaderLineHeight};\n padding: ${t.mobileSidePageHeaderPaddingTop} 0 ${t.mobileSidePageHeaderPaddingBottom};\n right: ${t.mobileSidePageCloseButtonPadding};\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 wrapperCloseFixed(t: Theme) {\n return css`\n top: ${t.sidePageCloseButtonWrapperFixedOffsetTop};\n `;\n },\n\n footerWrapper() {\n return css`\n flex: 0 0 auto;\n `;\n },\n\n footer(t: Theme) {\n return css`\n bottom: 0;\n position: fixed;\n z-index: 10;\n color: ${t.sidePageFooterTextColor};\n `;\n },\n\n positionStatic() {\n return css`\n position: static;\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 mobileFooterContent(t: Theme) {\n return css`\n display: flex;\n flex-flow: column nowrap;\n padding: ${t.mobileSidePageFooterPadding};\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 panelFixed(t: Theme) {\n return css`\n &:before {\n box-shadow: ${t.sidePageFixedPanelShadow};\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:\n transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),\n opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n opacity: 1 !important;\n transform: translate(0, 0) !important;\n `;\n },\n\n transitionLeave() {\n return css`\n opacity: 1;\n `;\n },\n\n transitionLeaveActive() {\n return css`\n opacity: 0.01 !important;\n transition: opacity 0.15s ease-out;\n `;\n },\n}));\n"]}

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

@@ -21,6 +21,9 @@ export declare class SidePageBody extends React.Component<SidePageBodyProps> {
     private isMobileLayout;
     getRootNode: TGetRootNode;
     private setRootNode;
+    private emotion;
+    private cx;
+    private styles;
     componentDidUpdate(): void;
     render(): React.JSX.Element;
 }

package/components/SidePage/SidePageBody.js CHANGED Viewed

@@ -32,10 +32,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import React from 'react';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
-import { cx } from '../../lib/cx.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { rootNode } from '../../lib/rootNode/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { responsiveLayout } from '../ResponsiveLayout/decorator.js';
-import { styles } from './SidePage.css.js';
+import { getStyles } from './SidePage.styles.js';
 import { SidePageContext } from './SidePageContext.js';
 export var SidePageBodyDataTids = {
     root: 'SidePageBody__root',
@@ -56,14 +57,19 @@ var SidePageBody = /** @class */ (function (_super) {
         this.context.updateLayout();
     };
     SidePageBody.prototype.render = function () {
-        var _a;
-        return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props),
-            React.createElement("div", { "data-tid": SidePageBodyDataTids.root, className: cx(styles.body, (_a = {}, _a[styles.mobileBody] = this.isMobileLayout, _a)) }, this.props.children)));
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            var _a;
+            return (React.createElement(CommonWrapper, __assign({ rootNodeRef: _this.setRootNode }, _this.props),
+                React.createElement("div", { "data-tid": SidePageBodyDataTids.root, className: _this.cx(_this.styles.body(theme), (_a = {}, _a[_this.styles.mobileBody()] = _this.isMobileLayout, _a)) }, _this.props.children)));
+        }));
     };
     SidePageBody.__KONTUR_REACT_UI__ = 'SidePageBody';
     SidePageBody.displayName = 'SidePageBody';
     SidePageBody.contextType = SidePageContext;
     SidePageBody = __decorate([
+        withRenderEnvironment,
         responsiveLayout,
         rootNode
     ], SidePageBody);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SidePageBody.js","sourceRoot":"","sources":["SidePageBody.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAAA~~,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,~~EAAE~~,EAAE,MAAM,~~iBAAiB~~,CAAC;~~AAErC~~,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,~~MAAM~~,EAAE,MAAM,~~mBAAmB~~,CAAC;~~AAC3C~~,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAOvD,MAAM,CAAC,IAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE,oBAAoB;CAClB,CAAC;AACX;;;;GAIG;~~AAGH~~;IAAkC,gCAAkC;IAApE;;QAKS,aAAO,GAAwB,KAAI,CAAC,OAAO,CAAC;;~~IAqBrD~~,CAAC;~~IAhBQ~~,yCAAkB,GAAzB;QACE,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC;IAC9B,CAAC;IAEM,6BAAM,GAAb;;~~QACE~~,OAAO,CACL,oBAAC,aAAa,aAAC,WAAW,EAAE,~~IAAI~~,CAAC,WAAW,IAAM,~~IAAI~~,CAAC,KAAK;~~YAC1D~~,yCACY,oBAAoB,CAAC,IAAI,EACnC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,YAAI,GAAC,MAAM,CAAC,UAAU,IAAG,~~IAAI~~,CAAC,cAAc,MAAG,~~IAEvE~~,~~IAAI~~,CAAC,KAAK,CAAC,QAAQ,CAChB,CACQ,CACjB,CAAC;IACJ,CAAC;~~IAxBa~~,gCAAmB,GAAG,cAAc,AAAjB,CAAkB;IACrC,wBAAW,GAAG,cAAc,AAAjB,CAAkB;IAE7B,wBAAW,GAAG,eAAe,AAAlB,CAAmB;IAJjC,YAAY;~~QAFxB~~,gBAAgB;QAChB,QAAQ;OACI,YAAY,~~CA0BxB~~;IAAD,mBAAC;CAAA,~~AA1BD~~,CAAkC,KAAK,CAAC,SAAS,~~GA0BhD~~;~~SA1BY~~,YAAY","sourcesContent":["import React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { cx } from '../../lib/cx.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport { ~~styles~~ } from './SidePage.~~css~~.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport type { SidePageContextType } from './SidePageContext.js';\n\nexport interface SidePageBodyProps extends CommonProps {\n children?: React.ReactNode;\n}\n\nexport const SidePageBodyDataTids = {\n root: 'SidePageBody__root',\n} as const;\n/*\n Контент-зона сайдпейджа.\n \n @visibleName SidePage.Body\n */\n@responsiveLayout\n@rootNode\nexport class SidePageBody extends React.Component<SidePageBodyProps> {\n public static __KONTUR_REACT_UI__ = 'SidePageBody';\n public static displayName = 'SidePageBody';\n\n public static contextType = SidePageContext;\n public context: SidePageContextType = this.context;\n private isMobileLayout!: boolean;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n public componentDidUpdate() {\n this.context.updateLayout();\n }\n\n public render(): React.JSX.Element {\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n data-tid={SidePageBodyDataTids.root}\n className={cx(styles.body, { [styles.mobileBody]: this.isMobileLayout })}\n >\n {this.props.children}\n </div>\n </CommonWrapper>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"SidePageBody.js","sourceRoot":"","sources":["SidePageBody.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAOvD,MAAM,CAAC,IAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE,oBAAoB;CAClB,CAAC;AACX;;;;GAIG;AAIH;IAAkC,gCAAkC;IAApE;;QAKS,aAAO,GAAwB,KAAI,CAAC,OAAO,CAAC;;IAgCrD,CAAC;IAxBQ,yCAAkB,GAAzB;QACE,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC;IAC9B,CAAC;IAEM,6BAAM,GAAb;QAAA,iBAmBC;QAlBC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtC,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;;YACL,OAAO,CACL,oBAAC,aAAa,aAAC,WAAW,EAAE,KAAI,CAAC,WAAW,IAAM,KAAI,CAAC,KAAK;gBAC1D,yCACY,oBAAoB,CAAC,IAAI,EACnC,SAAS,EAAE,KAAI,CAAC,EAAE,CAAC,KAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,YAAI,GAAC,KAAI,CAAC,MAAM,CAAC,UAAU,EAAE,IAAG,KAAI,CAAC,cAAc,MAAG,IAE/F,KAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACQ,CACjB,CAAC;QACJ,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IAnCa,gCAAmB,GAAG,cAAc,AAAjB,CAAkB;IACrC,wBAAW,GAAG,cAAc,AAAjB,CAAkB;IAE7B,wBAAW,GAAG,eAAe,AAAlB,CAAmB;IAJjC,YAAY;QAHxB,qBAAqB;QACrB,gBAAgB;QAChB,QAAQ;OACI,YAAY,CAqCxB;IAAD,mBAAC;CAAA,AArCD,CAAkC,KAAK,CAAC,SAAS,GAqChD;SArCY,YAAY","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport type { SidePageContextType } from './SidePageContext.js';\n\nexport interface SidePageBodyProps extends CommonProps {\n children?: React.ReactNode;\n}\n\nexport const SidePageBodyDataTids = {\n root: 'SidePageBody__root',\n} as const;\n/*\n Контент-зона сайдпейджа.\n \n @visibleName SidePage.Body\n */\n@withRenderEnvironment\n@responsiveLayout\n@rootNode\nexport class SidePageBody extends React.Component<SidePageBodyProps> {\n public static __KONTUR_REACT_UI__ = 'SidePageBody';\n public static displayName = 'SidePageBody';\n\n public static contextType = SidePageContext;\n public context: SidePageContextType = this.context;\n private isMobileLayout!: boolean;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private styles!: ReturnType<typeof getStyles>;\n\n public componentDidUpdate() {\n this.context.updateLayout();\n }\n\n public render(): React.JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n data-tid={SidePageBodyDataTids.root}\n className={this.cx(this.styles.body(theme), { [this.styles.mobileBody()]: this.isMobileLayout })}\n >\n {this.props.children}\n </div>\n </CommonWrapper>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n}\n"]}

package/components/SidePage/SidePageCloseButton.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import React, { useContext, useState } from 'react';
 import { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular.js';
-import { cx } from '../../lib/cx.js';
 import { useKeyListener } from '../../lib/events/keyListener.js';
 import { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';
-import { useGlobal } from '../../lib/renderEnvironment/index.js';
+import { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { SidePageLocaleHelper } from './locale/index.js';
-import { styles } from './SidePage.css.js';
+import { getStyles } from './SidePage.styles.js';
 import { SidePageContext } from './SidePageContext.js';
 import { SidePageHeaderDataTids } from './SidePageHeader.js';
 export var SidePageCloseButton = function (_a) {
@@ -14,6 +14,9 @@ export var SidePageCloseButton = function (_a) {
     var _c = useState(false), isFocusedByTab = _c[0], setIsFocusedByTab = _c[1];
     var locale = useLocaleForControl('SidePage', SidePageLocaleHelper);
     var globalObject = useGlobal();
+    var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
     var keyListener = useKeyListener();
     var sidePageContext = useContext(SidePageContext);
     var handleFocus = function () {
@@ -28,10 +31,10 @@ export var SidePageCloseButton = function (_a) {
         setIsFocusedByTab(false);
     };
     var icon = React.createElement(XIcon20Regular, { align: "none" });
-    return (React.createElement("button", { "aria-label": locale === null || locale === void 0 ? void 0 : locale.closeButtonAriaLabel, className: cx(styles.close, (_b = {},
-            _b[styles.closeFocus] = isFocusedByTab,
-            _b[styles.closeSticky] = isHeaderFixed,
-            _b[styles.closeMobile] = isMobile,
+    return (React.createElement("button", { "aria-label": locale === null || locale === void 0 ? void 0 : locale.closeButtonAriaLabel, className: cx(styles.close(theme), (_b = {},
+            _b[styles.closeFocus(theme)] = isFocusedByTab,
+            _b[styles.closeSticky(theme)] = isHeaderFixed,
+            _b[styles.closeMobile(theme)] = isMobile,
             _b)), onFocus: handleFocus, onBlur: handleBlur, onClick: sidePageContext.requestClose, "data-tid": SidePageHeaderDataTids.close }, icon));
 };
 SidePageCloseButton.__KONTUR_REACT_UI__ = 'SidePageCloseButton';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SidePageCloseButton.js","sourceRoot":"","sources":["SidePageCloseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAC;AAClF,OAAO,EAAE,~~EAAE~~,EAAE,MAAM,~~iBAAiB~~,CAAC;~~AACrC~~,OAAO,EAAE,~~cAAc~~,EAAE,MAAM,~~iCAAiC~~,CAAC;~~AACjE~~,OAAO,EAAE,~~mBAAmB~~,EAAE,MAAM,~~yCAAyC~~,CAAC;~~AAC9E~~,OAAO,EAAE,~~SAAS~~,EAAE,MAAM,~~sCAAsC~~,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,~~MAAM~~,EAAE,MAAM,~~mBAAmB~~,CAAC;~~AAC3C~~,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAO7D,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,EAAqD;;QAAnD,aAAa,mBAAA,EAAE,QAAQ,cAAA;IACrD,IAAA,KAAsC,QAAQ,CAAC,KAAK,CAAC,EAApD,cAAc,QAAA,EAAE,iBAAiB,QAAmB,CAAC;IAE5D,IAAM,MAAM,GAAG,mBAAmB,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAC;IACrE,IAAM,YAAY,GAAG,SAAS,EAAE,CAAC;IACjC,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,IAAM,eAAe,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEpD,IAAM,WAAW,GAAG;;QAClB,MAAA,YAAY,CAAC,qBAAqB,6DAAG;YACnC,IAAI,WAAW,CAAC,YAAY,EAAE,CAAC;gBAC7B,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,IAAM,UAAU,GAAG;QACjB,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,IAAM,IAAI,GAAG,oBAAC,cAAc,IAAC,KAAK,EAAC,MAAM,GAAG,CAAC;IAC7C,OAAO,CACL,8CACc,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,oBAAoB,EACxC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK;~~YACxB~~,GAAC,MAAM,CAAC,UAAU,IAAG,cAAc;~~YACnC~~,GAAC,MAAM,CAAC,WAAW,IAAG,aAAa;~~YACnC~~,GAAC,MAAM,CAAC,WAAW,IAAG,QAAQ;~~gBAC9B~~,EACF,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,eAAe,CAAC,YAAY,cAC3B,sBAAsB,CAAC,KAAK,IAErC,IAAI,CACE,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;AAChE,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC","sourcesContent":["import React, { useContext, useState } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular.js';\nimport { cx } from '../../lib/cx.js';\nimport { ~~useKeyListener~~ } from '../../lib/~~events~~/~~keyListener~~.js';\nimport { ~~useLocaleForControl~~ } from '../../lib/~~locale~~/~~useLocaleForControl~~.js';\nimport { ~~useGlobal~~ } from '../../lib/~~renderEnvironment~~/~~index~~.js';\nimport { SidePageLocaleHelper } from './locale/index.js';\nimport { ~~styles~~ } from './SidePage.~~css~~.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport { SidePageHeaderDataTids } from './SidePageHeader.js';\n\nexport interface SidePageCloseButtonProps extends CommonProps {\n isHeaderFixed: boolean;\n isMobile?: boolean;\n}\n\nexport const SidePageCloseButton = ({ isHeaderFixed, isMobile }: SidePageCloseButtonProps): React.JSX.Element => {\n const [isFocusedByTab, setIsFocusedByTab] = useState(false);\n\n const locale = useLocaleForControl('SidePage', SidePageLocaleHelper);\n const globalObject = useGlobal();\n const keyListener = useKeyListener();\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, {\n [styles.closeFocus]: isFocusedByTab,\n [styles.closeSticky]: isHeaderFixed,\n [styles.closeMobile]: isMobile,\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"]}
1	+ {"version":3,"file":"SidePageCloseButton.js","sourceRoot":"","sources":["SidePageCloseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACxF,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAO7D,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,EAAqD;;QAAnD,aAAa,mBAAA,EAAE,QAAQ,cAAA;IACrD,IAAA,KAAsC,QAAQ,CAAC,KAAK,CAAC,EAApD,cAAc,QAAA,EAAE,iBAAiB,QAAmB,CAAC;IAE5D,IAAM,MAAM,GAAG,mBAAmB,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAC;IACrE,IAAM,YAAY,GAAG,SAAS,EAAE,CAAC;IACjC,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC/B,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,IAAM,eAAe,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEpD,IAAM,WAAW,GAAG;;QAClB,MAAA,YAAY,CAAC,qBAAqB,6DAAG;YACnC,IAAI,WAAW,CAAC,YAAY,EAAE,CAAC;gBAC7B,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,IAAM,UAAU,GAAG;QACjB,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,IAAM,IAAI,GAAG,oBAAC,cAAc,IAAC,KAAK,EAAC,MAAM,GAAG,CAAC;IAC7C,OAAO,CACL,8CACc,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,oBAAoB,EACxC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC;YAC/B,GAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,IAAG,cAAc;YAC1C,GAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,IAAG,aAAa;YAC1C,GAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,IAAG,QAAQ;gBACrC,EACF,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,eAAe,CAAC,YAAY,cAC3B,sBAAsB,CAAC,KAAK,IAErC,IAAI,CACE,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;AAChE,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC","sourcesContent":["import React, { useContext, useState } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular.js';\nimport { useKeyListener } from '../../lib/events/keyListener.js';\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';\nimport { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { SidePageLocaleHelper } from './locale/index.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport { SidePageHeaderDataTids } from './SidePageHeader.js';\n\nexport interface SidePageCloseButtonProps extends CommonProps {\n isHeaderFixed: boolean;\n isMobile?: boolean;\n}\n\nexport const SidePageCloseButton = ({ isHeaderFixed, isMobile }: SidePageCloseButtonProps): React.JSX.Element => {\n const [isFocusedByTab, setIsFocusedByTab] = useState(false);\n\n const locale = useLocaleForControl('SidePage', SidePageLocaleHelper);\n const globalObject = useGlobal();\n const theme = useContext(ThemeContext);\n const { cx } = useEmotion();\n const styles = useStyles(getStyles);\n const keyListener = useKeyListener();\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 [styles.closeSticky(theme)]: isHeaderFixed,\n [styles.closeMobile(theme)]: isMobile,\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"]}

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

@@ -13,6 +13,10 @@ export declare const SidePageContainerDataTids: {
 export declare class SidePageContainer extends React.Component<SidePageContainerProps> {
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
+    private emotion;
+    private cx;
+    private styles;
+    private theme;
     private isMobileLayout;
     getRootNode: TGetRootNode;
     private setRootNode;

package/components/SidePage/SidePageContainer.js CHANGED Viewed

@@ -32,10 +32,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import React from 'react';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
-import { cx } from '../../lib/cx.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { rootNode } from '../../lib/rootNode/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { responsiveLayout } from '../ResponsiveLayout/decorator.js';
-import { styles } from './SidePage.css.js';
+import { getStyles } from './SidePage.styles.js';
 import { SidePageContext } from './SidePageContext.js';
 export var SidePageContainerDataTids = {
     root: 'SidePageContainer__root',
@@ -51,7 +52,12 @@ var SidePageContainer = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     SidePageContainer.prototype.render = function () {
-        return this.renderMain();
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return _this.renderMain();
+        }));
     };
     SidePageContainer.prototype.renderMain = function () {
         var _this = this;
@@ -59,19 +65,20 @@ var SidePageContainer = /** @class */ (function (_super) {
             var _b;
             var hasHeader = _a.hasHeader, hasFooter = _a.hasFooter, hasPanel = _a.hasPanel;
             return (React.createElement(CommonWrapper, __assign({ rootNodeRef: _this.setRootNode }, _this.props),
-                React.createElement("div", { "data-tid": SidePageContainerDataTids.root, className: cx((_b = {},
-                        _b[styles.container] = true,
-                        _b[styles.containerWithoutHeader] = !hasHeader,
-                        _b[styles.containerWithoutFooter] = !hasFooter,
-                        _b[styles.containerWithPanel] = hasPanel,
-                        _b[styles.mobileContainer] = _this.isMobileLayout,
-                        _b[styles.mobileContainerWithoutHeader] = _this.isMobileLayout && !hasHeader,
+                React.createElement("div", { "data-tid": SidePageContainerDataTids.root, className: _this.cx((_b = {},
+                        _b[_this.styles.container(_this.theme)] = true,
+                        _b[_this.styles.containerWithoutHeader(_this.theme)] = !hasHeader,
+                        _b[_this.styles.containerWithoutFooter(_this.theme)] = !hasFooter,
+                        _b[_this.styles.containerWithPanel(_this.theme)] = hasPanel,
+                        _b[_this.styles.mobileContainer(_this.theme)] = _this.isMobileLayout,
+                        _b[_this.styles.mobileContainerWithoutHeader(_this.theme)] = _this.isMobileLayout && !hasHeader,
                         _b)) }, _this.props.children)));
         }));
     };
     SidePageContainer.__KONTUR_REACT_UI__ = 'SidePageContainer';
     SidePageContainer.displayName = 'SidePageContainer';
     SidePageContainer = __decorate([
+        withRenderEnvironment,
         responsiveLayout,
         rootNode
     ], SidePageContainer);