From b5de9ceabe26d41909a91bb91fd3a5a3e3b51f77 Mon Sep 17 00:00:00 2001
From: Ivan Kudryavtsev <vanyakudr007@mail.ru>
Date: Fri, 10 Nov 2023 10:16:26 +0300
Subject: [PATCH] fix(plasma-web, plasma-b2c): fix NoScroll behavior in
 ModalBase

---
 packages/plasma-b2c/api/plasma-b2c.api.md     |  5 ++++-
 .../src/components/ModalBase/Modal.config.ts  |  6 +++--
 .../ModalBase/ModalBase.stories.tsx           |  2 +-
 .../src/components/ModalBase/ModalBase.tsx    | 22 ++++++++++++++++---
 .../src/components/ModalBase/index.ts         |  5 ++++-
 .../components/Modal/Modal/Modal.tokens.ts    |  5 +++++
 .../Modal/ModalOverlay/ModalOverlay.styles.ts |  3 ++-
 .../src/components/Modal/index.ts             |  2 +-
 .../components/Modal/Modal.config.ts          |  6 +++--
 .../components/Modal/Modal.config.ts          |  6 +++--
 .../components/Modal/Modal.config.ts          |  6 +++--
 packages/plasma-web/api/plasma-web.api.md     |  5 ++++-
 .../src/components/ModalBase/Modal.config.ts  |  6 +++--
 .../src/components/ModalBase/ModalBase.tsx    | 22 ++++++++++++++++---
 .../src/components/ModalBase/index.ts         |  5 ++++-
 15 files changed, 83 insertions(+), 23 deletions(-)

diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md
index e74bd32336..d796264db0 100644
--- a/packages/plasma-b2c/api/plasma-b2c.api.md
+++ b/packages/plasma-b2c/api/plasma-b2c.api.md
@@ -150,6 +150,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';
@@ -623,12 +624,14 @@ export { MediaQueryFunction }
 export { Modal }
 
 // @public
-export const ModalBase: ForwardRefExoticComponent<ModalBaseProps & RefAttributes<HTMLDivElement>>;
+export const ModalBase: React_2.ForwardRefExoticComponent<ModalBaseProps & React_2.RefAttributes<HTMLDivElement>>;
 
 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 ac7455aa24..9595216373 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 { 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..5b980193f6 100644
--- a/packages/plasma-b2c/src/components/ModalBase/ModalBase.tsx
+++ b/packages/plasma-b2c/src/components/ModalBase/ModalBase.tsx
@@ -1,14 +1,30 @@
+import React, { ForwardRefExoticComponent, RefAttributes, forwardRef } from 'react';
 import { modalConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
 import type { ModalProps } from '@salutejs/plasma-new-hope/styled-components';
+import { createGlobalStyle } from 'styled-components';
 
 import { config } from './Modal.config';
 
+// linaria не поддерживает динамический global style
+const NoScroll = createGlobalStyle`
+    body {
+        overflow-y: hidden;
+    }
+`;
+
 const mergedConfig = mergeConfig(modalConfig, config);
-const ModalBaseComponent = component(mergedConfig) as React.ForwardRefExoticComponent<
-    ModalProps & React.RefAttributes<HTMLDivElement>
+const ModalBaseComponent = component(mergedConfig) as ForwardRefExoticComponent<
+    ModalProps & RefAttributes<HTMLDivElement>
 >;
 
 /**
  * Модальное окно.
  */
-export const ModalBase = ModalBaseComponent;
+export const ModalBase = forwardRef<HTMLDivElement, ModalProps>(({ children, ...rest }) => {
+    return (
+        <ModalBaseComponent {...rest}>
+            <NoScroll />
+            {children}
+        </ModalBaseComponent>
+    );
+});
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-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/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_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 d4aa14784b..1911844b53 100644
--- a/packages/plasma-web/api/plasma-web.api.md
+++ b/packages/plasma-web/api/plasma-web.api.md
@@ -150,6 +150,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';
@@ -623,12 +624,14 @@ export { MediaQueryFunction }
 export { Modal }
 
 // @public
-export const ModalBase: ForwardRefExoticComponent<ModalBaseProps & RefAttributes<HTMLDivElement>>;
+export const ModalBase: React_2.ForwardRefExoticComponent<ModalBaseProps & React_2.RefAttributes<HTMLDivElement>>;
 
 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..5b980193f6 100644
--- a/packages/plasma-web/src/components/ModalBase/ModalBase.tsx
+++ b/packages/plasma-web/src/components/ModalBase/ModalBase.tsx
@@ -1,14 +1,30 @@
+import React, { ForwardRefExoticComponent, RefAttributes, forwardRef } from 'react';
 import { modalConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
 import type { ModalProps } from '@salutejs/plasma-new-hope/styled-components';
+import { createGlobalStyle } from 'styled-components';
 
 import { config } from './Modal.config';
 
+// linaria не поддерживает динамический global style
+const NoScroll = createGlobalStyle`
+    body {
+        overflow-y: hidden;
+    }
+`;
+
 const mergedConfig = mergeConfig(modalConfig, config);
-const ModalBaseComponent = component(mergedConfig) as React.ForwardRefExoticComponent<
-    ModalProps & React.RefAttributes<HTMLDivElement>
+const ModalBaseComponent = component(mergedConfig) as ForwardRefExoticComponent<
+    ModalProps & RefAttributes<HTMLDivElement>
 >;
 
 /**
  * Модальное окно.
  */
-export const ModalBase = ModalBaseComponent;
+export const ModalBase = forwardRef<HTMLDivElement, ModalProps>(({ children, ...rest }) => {
+    return (
+        <ModalBaseComponent {...rest}>
+            <NoScroll />
+            {children}
+        </ModalBaseComponent>
+    );
+});
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';