diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md index 03682d35df..fa35d0a61a 100644 --- a/packages/plasma-b2c/api/plasma-b2c.api.md +++ b/packages/plasma-b2c/api/plasma-b2c.api.md @@ -145,6 +145,7 @@ import { MediaQueryFunction } from '@salutejs/plasma-hope'; import { Modal } from '@salutejs/plasma-hope'; import { modalClasses as modalBaseClasses } from '@salutejs/plasma-new-hope/styled-components'; import { ModalProps as ModalBaseProps } from '@salutejs/plasma-new-hope/styled-components'; +import { modalTokens as modalBaseTokens } from '@salutejs/plasma-new-hope/styled-components'; import { ModalProps } from '@salutejs/plasma-hope'; import { ModalsProvider } from '@salutejs/plasma-hope'; import { ModalView } from '@salutejs/plasma-hope'; @@ -596,12 +597,14 @@ export { MediaQueryFunction } export { Modal } // @public -export const ModalBase: ForwardRefExoticComponent>; +export const ModalBase: React_2.ForwardRefExoticComponent>; export { modalBaseClasses } export { ModalBaseProps } +export { modalBaseTokens } + export { ModalProps } export { ModalsProvider } diff --git a/packages/plasma-b2c/src/components/ModalBase/Modal.config.ts b/packages/plasma-b2c/src/components/ModalBase/Modal.config.ts index 2fe022abfd..18430726a0 100644 --- a/packages/plasma-b2c/src/components/ModalBase/Modal.config.ts +++ b/packages/plasma-b2c/src/components/ModalBase/Modal.config.ts @@ -1,5 +1,7 @@ import { css } from '@salutejs/plasma-new-hope/styled-components'; +import { modalBaseTokens } from '.'; + export const config = { defaults: { view: 'default', @@ -7,8 +9,8 @@ export const config = { variations: { view: { default: css` - --plasma-modal-overlay-with-blur-color: rgba(35, 35, 35, 0.2); - --plasma-modal-overlay-color: rgba(8, 8, 8, 0.56); + ${modalBaseTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2); + ${modalBaseTokens.modalOverlayColor}: rgba(8, 8, 8, 0.56); `, }, }, diff --git a/packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx b/packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx index 44f1c4b61f..6b37f87e31 100644 --- a/packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx +++ b/packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from 'styled-components'; -import { Story, Meta } from '@storybook/react'; -import { surfaceSolid02 } from '@salutejs/plasma-tokens-web'; +import type { Meta, StoryObj } from '@storybook/react'; +import { surfaceSolid02 } from '@salutejs/plasma-tokens-b2c'; import { InSpacingDecorator } from '@salutejs/plasma-sb-utils'; import { SSRProvider } from '../SSRProvider'; diff --git a/packages/plasma-b2c/src/components/ModalBase/ModalBase.tsx b/packages/plasma-b2c/src/components/ModalBase/ModalBase.tsx index e78fb8d97e..bfeddf8819 100644 --- a/packages/plasma-b2c/src/components/ModalBase/ModalBase.tsx +++ b/packages/plasma-b2c/src/components/ModalBase/ModalBase.tsx @@ -1,11 +1,13 @@ +import { ForwardRefExoticComponent, RefAttributes } from 'react'; import { modalConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; -import type { ModalProps } from '@salutejs/plasma-new-hope/styled-components'; import { config } from './Modal.config'; +import { ModalBaseProps } from '.'; + const mergedConfig = mergeConfig(modalConfig, config); -const ModalBaseComponent = component(mergedConfig) as React.ForwardRefExoticComponent< - ModalProps & React.RefAttributes +const ModalBaseComponent = component(mergedConfig) as ForwardRefExoticComponent< + ModalBaseProps & RefAttributes >; /** diff --git a/packages/plasma-b2c/src/components/ModalBase/index.ts b/packages/plasma-b2c/src/components/ModalBase/index.ts index 57277868ac..7f7adc98f2 100644 --- a/packages/plasma-b2c/src/components/ModalBase/index.ts +++ b/packages/plasma-b2c/src/components/ModalBase/index.ts @@ -1,4 +1,7 @@ export { ModalBase } from './ModalBase'; -export { modalClasses as modalBaseClasses } from '@salutejs/plasma-new-hope/styled-components'; +export { + modalClasses as modalBaseClasses, + modalTokens as modalBaseTokens, +} from '@salutejs/plasma-new-hope/styled-components'; export type { ModalProps as ModalBaseProps } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/plasma-b2c/src/components/PopupBase/PopupBase.tsx b/packages/plasma-b2c/src/components/PopupBase/PopupBase.tsx index 5c101eaa82..9a81a5c7d8 100644 --- a/packages/plasma-b2c/src/components/PopupBase/PopupBase.tsx +++ b/packages/plasma-b2c/src/components/PopupBase/PopupBase.tsx @@ -1,8 +1,13 @@ import { popupConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; +import { ForwardRefExoticComponent, RefAttributes } from 'react'; + +import { PopupBaseProps } from '.'; const mergedConfig = mergeConfig(popupConfig); /** * Базовый компонент PopupBase. */ -export const PopupBase = component(mergedConfig); +export const PopupBase = component(mergedConfig) as ForwardRefExoticComponent< + PopupBaseProps & RefAttributes +>; diff --git a/packages/plasma-new-hope/src/components/Modal/Modal/Modal.styles.ts b/packages/plasma-new-hope/src/components/Modal/Modal/Modal.styles.ts deleted file mode 100644 index ed9e28d0a7..0000000000 --- a/packages/plasma-new-hope/src/components/Modal/Modal/Modal.styles.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { css } from '@linaria/core'; - -export const noScroll = css` - :global() { - body.disable-scroll { - overflow-y: hidden; - } - } -`; diff --git a/packages/plasma-new-hope/src/components/Modal/Modal/Modal.tokens.ts b/packages/plasma-new-hope/src/components/Modal/Modal/Modal.tokens.ts index 050572e465..dbeab540e3 100644 --- a/packages/plasma-new-hope/src/components/Modal/Modal/Modal.tokens.ts +++ b/packages/plasma-new-hope/src/components/Modal/Modal/Modal.tokens.ts @@ -4,3 +4,8 @@ export const classes = { */ overlay: 'modal-overlay', }; + +export const tokens = { + modalOverlayWithBlurColor: '--plasma-modal-overlay-with-blur-color', + modalOverlayColor: '--plasma-modal-overlay-color', +}; diff --git a/packages/plasma-new-hope/src/components/Modal/Modal/Modal.tsx b/packages/plasma-new-hope/src/components/Modal/Modal/Modal.tsx index c44b28a21a..2e68c86a4a 100644 --- a/packages/plasma-new-hope/src/components/Modal/Modal/Modal.tsx +++ b/packages/plasma-new-hope/src/components/Modal/Modal/Modal.tsx @@ -8,11 +8,6 @@ import { ModalOverlay } from '../ModalOverlay/ModalOverlay'; import { ModalProps } from './Modal.types'; import { useModal } from './hooks'; import { base as viewCSS } from './variations/_view/base'; -import { noScroll } from './Modal.styles'; - -export const NoScroll = () => { - return
; -}; // issue #823 const Popup = component(popupConfig); @@ -75,7 +70,6 @@ export const modalRoot = (Root: RootProps) => } {...rest} > - {children} ); diff --git a/packages/plasma-new-hope/src/components/Modal/Modal/hooks/useModal.ts b/packages/plasma-new-hope/src/components/Modal/Modal/hooks/useModal.ts index 33cb75e05e..908171007f 100644 --- a/packages/plasma-new-hope/src/components/Modal/Modal/hooks/useModal.ts +++ b/packages/plasma-new-hope/src/components/Modal/Modal/hooks/useModal.ts @@ -1,4 +1,4 @@ -import { useCallback, useEffect } from 'react'; +import { useCallback, useEffect, useRef } from 'react'; import { ModalInfo, getIdLastModal, hasModals } from '../ModalContext'; import { ModalHookArgs } from '../Modal.types'; @@ -8,6 +8,7 @@ const ESCAPE_KEYCODE = 27; export const useModal = ({ id, isOpen, popupInfo, onEscKeyDown, onClose, closeOnEsc = true }: ModalHookArgs) => { const popupController = usePopupContext(); + const overflow = useRef(document.body.style.overflowY); // При ESC закрывает текущее окно, если это возможно const onKeyDown = useCallback( @@ -39,11 +40,16 @@ export const useModal = ({ id, isOpen, popupInfo, onEscKeyDown, onClose, closeOn // linaria не поддерживает динамический global useEffect(() => { if (isOpen) { - document.body.classList.add('disable-scroll'); - } else if (!hasModals(popupController.items)) { - document.body.classList.remove('disable-scroll'); + overflow.current = document.body.style.overflowY; + document.body.style.overflowY = 'hidden'; } - }, [isOpen, popupController.items]); + }, [isOpen]); + + useEffect(() => { + if (!isOpen && !hasModals(popupController.items)) { + document.body.style.overflowY = overflow.current; + } + }, [isOpen, overflow.current, popupController.items]); const modalInfo: ModalInfo = { id, diff --git a/packages/plasma-new-hope/src/components/Modal/ModalOverlay/ModalOverlay.styles.ts b/packages/plasma-new-hope/src/components/Modal/ModalOverlay/ModalOverlay.styles.ts index 507bae08b2..45befc176a 100644 --- a/packages/plasma-new-hope/src/components/Modal/ModalOverlay/ModalOverlay.styles.ts +++ b/packages/plasma-new-hope/src/components/Modal/ModalOverlay/ModalOverlay.styles.ts @@ -1,6 +1,7 @@ import { styled } from '@linaria/react'; import { DEFAULT_Z_INDEX } from '../../Popup/utils'; +import { tokens } from '../Modal/Modal.tokens'; // TODO: новый отдельный оверлей #778 export const Overlay = styled.div<{ @@ -20,7 +21,7 @@ export const Overlay = styled.div<{ z-index: ${({ zIndex }) => zIndex || DEFAULT_Z_INDEX}; --plasma_private-overlay-background-color: ${({ $withBlur }) => - $withBlur ? 'var(--plasma-modal-overlay-with-blur-color)' : 'var(--plasma-modal-overlay-color)'}; + $withBlur ? `var(${tokens.modalOverlayWithBlurColor})` : `var(${tokens.modalOverlayColor})`}; --plasma_private-overlay-backdrop-filter: ${({ $withBlur }) => ($withBlur ? 'blur(1rem)' : 'none')}; diff --git a/packages/plasma-new-hope/src/components/Modal/index.ts b/packages/plasma-new-hope/src/components/Modal/index.ts index d0682ac61e..72b685f4ad 100644 --- a/packages/plasma-new-hope/src/components/Modal/index.ts +++ b/packages/plasma-new-hope/src/components/Modal/index.ts @@ -1,2 +1,2 @@ export { modalConfig, modalRoot } from './Modal/Modal'; -export { classes as modalClasses } from './Modal/Modal.tokens'; +export { classes as modalClasses, tokens as modalTokens } from './Modal/Modal.tokens'; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Modal/Modal.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Modal/Modal.config.ts index 984f6b0046..066fff6029 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Modal/Modal.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Modal/Modal.config.ts @@ -1,5 +1,7 @@ import { css } from '@linaria/core'; +import { modalTokens } from '../../../../components/Modal'; + export const config = { defaults: { view: 'default', @@ -7,8 +9,8 @@ export const config = { variations: { view: { default: css` - --plasma-modal-overlay-with-blur-color: var(--overlay-blur); - --plasma-modal-overlay-color: var(--overlay-soft); + ${modalTokens.modalOverlayWithBlurColor}: var(--overlay-blur); + ${modalTokens.modalOverlayColor}: var(--overlay-soft); `, }, }, diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Modal/Modal.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Modal/Modal.stories.tsx index 56353f280d..f6c68b769f 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Modal/Modal.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Modal/Modal.stories.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { styled } from '@linaria/react'; import { Story, Meta } from '@storybook/react'; import { SSRProvider } from '@salutejs/plasma-core'; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Modal/Modal.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Modal/Modal.config.ts index 984f6b0046..066fff6029 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Modal/Modal.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Modal/Modal.config.ts @@ -1,5 +1,7 @@ import { css } from '@linaria/core'; +import { modalTokens } from '../../../../components/Modal'; + export const config = { defaults: { view: 'default', @@ -7,8 +9,8 @@ export const config = { variations: { view: { default: css` - --plasma-modal-overlay-with-blur-color: var(--overlay-blur); - --plasma-modal-overlay-color: var(--overlay-soft); + ${modalTokens.modalOverlayWithBlurColor}: var(--overlay-blur); + ${modalTokens.modalOverlayColor}: var(--overlay-soft); `, }, }, diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Modal/Modal.config.ts b/packages/plasma-new-hope/src/examples/sds_engineer/components/Modal/Modal.config.ts index 984f6b0046..066fff6029 100644 --- a/packages/plasma-new-hope/src/examples/sds_engineer/components/Modal/Modal.config.ts +++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Modal/Modal.config.ts @@ -1,5 +1,7 @@ import { css } from '@linaria/core'; +import { modalTokens } from '../../../../components/Modal'; + export const config = { defaults: { view: 'default', @@ -7,8 +9,8 @@ export const config = { variations: { view: { default: css` - --plasma-modal-overlay-with-blur-color: var(--overlay-blur); - --plasma-modal-overlay-color: var(--overlay-soft); + ${modalTokens.modalOverlayWithBlurColor}: var(--overlay-blur); + ${modalTokens.modalOverlayColor}: var(--overlay-soft); `, }, }, diff --git a/packages/plasma-web/api/plasma-web.api.md b/packages/plasma-web/api/plasma-web.api.md index dd56f98713..a467fd2897 100644 --- a/packages/plasma-web/api/plasma-web.api.md +++ b/packages/plasma-web/api/plasma-web.api.md @@ -145,6 +145,7 @@ import { MediaQueryFunction } from '@salutejs/plasma-hope'; import { Modal } from '@salutejs/plasma-hope'; import { modalClasses as modalBaseClasses } from '@salutejs/plasma-new-hope/styled-components'; import { ModalProps as ModalBaseProps } from '@salutejs/plasma-new-hope/styled-components'; +import { modalTokens as modalBaseTokens } from '@salutejs/plasma-new-hope/styled-components'; import { ModalProps } from '@salutejs/plasma-hope'; import { ModalsProvider } from '@salutejs/plasma-hope'; import { ModalView } from '@salutejs/plasma-hope'; @@ -596,12 +597,14 @@ export { MediaQueryFunction } export { Modal } // @public -export const ModalBase: ForwardRefExoticComponent>; +export const ModalBase: React_2.ForwardRefExoticComponent>; export { modalBaseClasses } export { ModalBaseProps } +export { modalBaseTokens } + export { ModalProps } export { ModalsProvider } diff --git a/packages/plasma-web/src/components/ModalBase/Modal.config.ts b/packages/plasma-web/src/components/ModalBase/Modal.config.ts index 2fe022abfd..18430726a0 100644 --- a/packages/plasma-web/src/components/ModalBase/Modal.config.ts +++ b/packages/plasma-web/src/components/ModalBase/Modal.config.ts @@ -1,5 +1,7 @@ import { css } from '@salutejs/plasma-new-hope/styled-components'; +import { modalBaseTokens } from '.'; + export const config = { defaults: { view: 'default', @@ -7,8 +9,8 @@ export const config = { variations: { view: { default: css` - --plasma-modal-overlay-with-blur-color: rgba(35, 35, 35, 0.2); - --plasma-modal-overlay-color: rgba(8, 8, 8, 0.56); + ${modalBaseTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2); + ${modalBaseTokens.modalOverlayColor}: rgba(8, 8, 8, 0.56); `, }, }, diff --git a/packages/plasma-web/src/components/ModalBase/ModalBase.tsx b/packages/plasma-web/src/components/ModalBase/ModalBase.tsx index e78fb8d97e..bfeddf8819 100644 --- a/packages/plasma-web/src/components/ModalBase/ModalBase.tsx +++ b/packages/plasma-web/src/components/ModalBase/ModalBase.tsx @@ -1,11 +1,13 @@ +import { ForwardRefExoticComponent, RefAttributes } from 'react'; import { modalConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; -import type { ModalProps } from '@salutejs/plasma-new-hope/styled-components'; import { config } from './Modal.config'; +import { ModalBaseProps } from '.'; + const mergedConfig = mergeConfig(modalConfig, config); -const ModalBaseComponent = component(mergedConfig) as React.ForwardRefExoticComponent< - ModalProps & React.RefAttributes +const ModalBaseComponent = component(mergedConfig) as ForwardRefExoticComponent< + ModalBaseProps & RefAttributes >; /** diff --git a/packages/plasma-web/src/components/ModalBase/index.ts b/packages/plasma-web/src/components/ModalBase/index.ts index 57277868ac..7f7adc98f2 100644 --- a/packages/plasma-web/src/components/ModalBase/index.ts +++ b/packages/plasma-web/src/components/ModalBase/index.ts @@ -1,4 +1,7 @@ export { ModalBase } from './ModalBase'; -export { modalClasses as modalBaseClasses } from '@salutejs/plasma-new-hope/styled-components'; +export { + modalClasses as modalBaseClasses, + modalTokens as modalBaseTokens, +} from '@salutejs/plasma-new-hope/styled-components'; export type { ModalProps as ModalBaseProps } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/plasma-web/src/components/PopupBase/PopupBase.stories.tsx b/packages/plasma-web/src/components/PopupBase/PopupBase.stories.tsx index 9a1cabb5ab..a3e7e30bde 100644 --- a/packages/plasma-web/src/components/PopupBase/PopupBase.stories.tsx +++ b/packages/plasma-web/src/components/PopupBase/PopupBase.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; import { Story, Meta } from '@storybook/react'; import { surfaceSolid03, surfaceSolid02 } from '@salutejs/plasma-tokens-web'; diff --git a/packages/plasma-web/src/components/PopupBase/PopupBase.tsx b/packages/plasma-web/src/components/PopupBase/PopupBase.tsx index 5c101eaa82..9a81a5c7d8 100644 --- a/packages/plasma-web/src/components/PopupBase/PopupBase.tsx +++ b/packages/plasma-web/src/components/PopupBase/PopupBase.tsx @@ -1,8 +1,13 @@ import { popupConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; +import { ForwardRefExoticComponent, RefAttributes } from 'react'; + +import { PopupBaseProps } from '.'; const mergedConfig = mergeConfig(popupConfig); /** * Базовый компонент PopupBase. */ -export const PopupBase = component(mergedConfig); +export const PopupBase = component(mergedConfig) as ForwardRefExoticComponent< + PopupBaseProps & RefAttributes +>;