feat(plasma-core, plasma-web, plasma-b2c): ModalBase component

packages/plasma-b2c/api/plasma-b2c.api.md

@@ -146,6 +146,8 @@ import { MaxLinesProps } from '@salutejs/plasma-core';
 import { mediaQuery } from '@salutejs/plasma-hope';
 import { MediaQueryFunction } from '@salutejs/plasma-hope';
 import { Modal } from '@salutejs/plasma-hope';
+import { ModalBase } from '@salutejs/plasma-hope';
+import { ModalBaseProps } from '@salutejs/plasma-hope';
 import { ModalProps } from '@salutejs/plasma-hope';
 import { ModalsProvider } from '@salutejs/plasma-hope';
 import { ModalView } from '@salutejs/plasma-hope';
@@ -174,6 +176,9 @@ import { Popup } from '@salutejs/plasma-hope';
 import { PopupBase } from '@salutejs/plasma-hope';
 import { PopupBasePlacement } from '@salutejs/plasma-hope';
 import { PopupBaseProps } from '@salutejs/plasma-hope';
+import { PopupBaseProvider } from '@salutejs/plasma-hope';
+import { PopupContextType } from '@salutejs/plasma-hope';
+import { PopupInfo } from '@salutejs/plasma-hope';
 import { PopupProps } from '@salutejs/plasma-hope';
 import { PreviewGallery } from '@salutejs/plasma-hope';
 import { PreviewGalleryItemProps } from '@salutejs/plasma-hope';
@@ -260,6 +265,7 @@ import { useDebouncedFunction } from '@salutejs/plasma-core';
 import { useFocusTrap } from '@salutejs/plasma-hope';
 import { useForkRef } from '@salutejs/plasma-core';
 import { useIsomorphicLayoutEffect } from '@salutejs/plasma-core';
+import { usePopupBaseContext } from '@salutejs/plasma-hope';
 import { useToast } from '@salutejs/plasma-hope';
 import { ValidationResult } from '@salutejs/plasma-hope';
 import { View } from '@salutejs/plasma-core';
@@ -591,6 +597,10 @@ export { MediaQueryFunction }
 
 export { Modal }
 
+export { ModalBase }
+
+export { ModalBaseProps }
+
 export { ModalProps }
 
 export { ModalsProvider }
@@ -647,6 +657,12 @@ export { PopupBasePlacement }
 
 export { PopupBaseProps }
 
+export { PopupBaseProvider }
+
+export { PopupContextType }
+
+export { PopupInfo }
+
 export { PopupProps }
 
 export { PreviewGallery }
@@ -861,6 +877,8 @@ export { useForkRef }
 
 export { useIsomorphicLayoutEffect }
 
+export { usePopupBaseContext }
+
 export { useToast }
 
 export { ValidationResult }

packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import styled, { createGlobalStyle } from 'styled-components';
+import { Story, Meta } from '@storybook/react';
+import { surfaceSolid02, darkOverlayBlur, overlaySoft } from '@salutejs/plasma-tokens-web';
+import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+
+import { SSRProvider } from '../SSRProvider';
+import { Button } from '../Button';
+import { PopupBaseProvider } from '../PopupBase';
+
+import { ModalBase } from '.';
+
+export default {
+    title: 'Controls/ModalBase',
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        placement: {
+            options: [
+                'center',
+                'top',
+                'bottom',
+                'right',
+                'left',
+                'top-right',
+                'top-left',
+                'bottom-right',
+                'bottom-left',
+            ],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+} as Meta;
+
+type ModalBaseStoryProps = {
+    placement: string;
+    offsetX: number;
+    offsetY: number;
+    closeOnEsc: boolean;
+    closeOnOverlayClick: boolean;
+    withBlur: boolean;
+};
+
+const StyledButton = styled(Button)`
+    margin-top: 1rem;
+    width: 15rem;
+`;
+
+const StyledWrapper = styled.div`
+    height: 1200px;
+`;
+
+// TODO: новый отдельный оверлей #778
+const ModalOverlayVariables = createGlobalStyle`
+    body {
+        --plasma-modal-blur-overlay-color: ${darkOverlayBlur};
+        --plasma-modal-overlay-color: ${overlaySoft};
+    }
+`;
+
+const Content = styled.div`
+    background: ${surfaceSolid02};
+    padding: 1rem;
+`;
+
+export const ModalBaseDemo: Story<ModalBaseStoryProps> = ({ placement, offsetX, offsetY, ...rest }) => {
+    const [isOpenA, setIsOpenA] = React.useState(false);
+    const [isOpenB, setIsOpenB] = React.useState(false);
+    const [isOpenC, setIsOpenC] = React.useState(false);
+
+    return (
+        <SSRProvider>
+            <StyledWrapper>
+                <ModalOverlayVariables />
+                <PopupBaseProvider>
+                    <div style={{ display: 'flex', flexDirection: 'column' }}>
+                        <StyledButton text="Открыть A" onClick={() => setIsOpenA(true)} />
+                    </div>
+                    <ModalBase
+                        id="modalA"
+                        onClose={() => setIsOpenA(false)}
+                        isOpen={isOpenA}
+                        placement={placement}
+                        offset={[offsetX, offsetY]}
+                        {...rest}
+                    >
+                        <Content>
+                            <Button onClick={() => setIsOpenA(false)}>Close</Button>
+                            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                                <StyledButton text="Открыть B" onClick={() => setIsOpenB(true)} />
+                            </div>
+                            <ModalBase
+                                id="modalB"
+                                onClose={() => setIsOpenB(false)}
+                                isOpen={isOpenB}
+                                placement="left"
+                                offset={[offsetX, offsetY]}
+                                {...rest}
+                            >
+                                <Content>
+                                    <Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenB(false)}>
+                                        Close
+                                    </Button>
+                                    <div style={{ display: 'flex', flexDirection: 'column' }}>
+                                        <StyledButton text="Открыть C" onClick={() => setIsOpenC(true)} />
+                                    </div>
+                                    <ModalBase
+                                        id="modalC"
+                                        onClose={() => setIsOpenC(false)}
+                                        isOpen={isOpenC}
+                                        placement="top"
+                                        offset={[offsetX, offsetY]}
+                                        {...rest}
+                                    >
+                                        <Content>
+                                            <Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenC(false)}>
+                                                Close
+                                            </Button>
+                                            <>Content</>
+                                        </Content>
+                                    </ModalBase>
+                                </Content>
+                            </ModalBase>
+                        </Content>
+                    </ModalBase>
+                </PopupBaseProvider>
+            </StyledWrapper>
+        </SSRProvider>
+    );
+};
+
+ModalBaseDemo.args = {
+    placement: 'center',
+    withBlur: false,
+    closeOnEsc: true,
+    closeOnOverlayClick: true,
+    offsetX: 0,
+    offsetY: 0,
+};

packages/plasma-b2c/src/components/ModalBase/index.ts

@@ -0,0 +1,2 @@
+export { ModalBase } from '@salutejs/plasma-hope';
+export type { ModalBaseProps } from '@salutejs/plasma-hope';

packages/plasma-b2c/src/components/PopupBase/PopupBase.stories.tsx

@@ -7,7 +7,7 @@ import { surfaceSolid03, surfaceSolid02 } from '@salutejs/plasma-tokens-web';
 import { SSRProvider } from '../SSRProvider';
 import { Button } from '../Button';
 
-import { PopupBase } from '.';
+import { PopupBase, PopupBaseProvider } from '.';
 
 export default {
     title: 'Controls/PopupBase',
@@ -73,25 +73,27 @@ export const PopupBaseDemo: Story<PopupBaseStoryProps> = ({ placement, offsetX,
     return (
         <SSRProvider>
             <StyledWrapper>
-                <div style={{ display: 'flex', flexDirection: 'column' }}>
-                    <StyledButton text="Открыть во Frame" onClick={() => setIsOpenA(true)} />
-                    <StyledButton text="Открыть в document" onClick={() => setIsOpenB(true)} />
-                </div>
-                <PopupBase frame={ref} isOpen={isOpenA} placement={placement} offset={[offsetX, offsetY]}>
-                    <Content>
-                        <Button onClick={() => setIsOpenA(false)}>Close</Button>
-                        <>Content</>
-                    </Content>
-                </PopupBase>
-                <OtherContent ref={ref}>
-                    <>Frame</>
-                </OtherContent>
-                <PopupBase frame="document" isOpen={isOpenB} placement={placement} offset={[offsetX, offsetY]}>
-                    <Content>
-                        <Button onClick={() => setIsOpenB(false)}>Close</Button>
-                        <>Content</>
-                    </Content>
-                </PopupBase>
+                <PopupBaseProvider>
+                    <div style={{ display: 'flex', flexDirection: 'column' }}>
+                        <StyledButton text="Открыть во Frame" onClick={() => setIsOpenA(true)} />
+                        <StyledButton text="Открыть в document" onClick={() => setIsOpenB(true)} />
+                    </div>
+                    <PopupBase frame={ref} isOpen={isOpenA} placement={placement} offset={[offsetX, offsetY]}>
+                        <Content>
+                            <Button onClick={() => setIsOpenA(false)}>Close</Button>
+                            <>Content</>
+                        </Content>
+                    </PopupBase>
+                    <OtherContent ref={ref}>
+                        <>Frame</>
+                    </OtherContent>
+                    <PopupBase frame="document" isOpen={isOpenB} placement={placement} offset={[offsetX, offsetY]}>
+                        <Content>
+                            <Button onClick={() => setIsOpenB(false)}>Close</Button>
+                            <>Content</>
+                        </Content>
+                    </PopupBase>
+                </PopupBaseProvider>
             </StyledWrapper>
         </SSRProvider>
     );

packages/plasma-b2c/src/components/PopupBase/index.ts

@@ -1,2 +1,5 @@
+export { PopupBaseProvider, usePopupBaseContext } from '@salutejs/plasma-hope';
+export type { PopupInfo, PopupContextType } from '@salutejs/plasma-hope';
+
 export { PopupBase } from '@salutejs/plasma-hope';
 export type { PopupBaseProps, PopupBasePlacement } from '@salutejs/plasma-hope';

packages/plasma-b2c/src/index.ts

@@ -14,6 +14,7 @@ export * from './components/Image';
 export * from './components/Link';
 export * from './components/List';
 export * from './components/Modal';
+export * from './components/ModalBase';
 export * from './components/Notification';
 export * from './components/PaginationDots';
 export * from './components/Popup';

packages/plasma-core/api/plasma-core.api.md

@@ -752,6 +752,21 @@ export interface MaxLinesProps {
     maxLines?: number;
 }
 
+// @public
+export const ModalBase: FC<ModalBaseProps>;
+
+// @public (undocumented)
+export interface ModalBaseProps extends Omit<PopupBaseProps, 'frame'> {
+    closeOnEsc?: boolean;
+    closeOnOverlayClick?: boolean;
+    focusAfterRef?: React_2.RefObject<HTMLElement>;
+    initialFocusRef?: React_2.RefObject<HTMLElement>;
+    onClose?: () => void;
+    onEscKeyDown?: (event: KeyboardEvent) => void;
+    onOverlayClick?: (event: React_2.MouseEvent<HTMLDivElement>) => void;
+    withBlur?: boolean;
+}
+
 // @public (undocumented)
 export const monthLongName: (val: number) => string;
 
@@ -842,7 +857,7 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
 export const Popup: React_2.NamedExoticComponent<PopupProps & React_2.RefAttributes<HTMLDivElement>>;
 
 // @public
-export const PopupBase: FC<PopupBaseProps>;
+export const PopupBase: React_2.ForwardRefExoticComponent<PopupBaseProps & React_2.RefAttributes<HTMLDivElement>>;
 
 // Warning: (ae-forgotten-export) The symbol "BasicPopupBasePlacement" needs to be exported by the entry point index.d.ts
 // Warning: (ae-forgotten-export) The symbol "MixedPopupBasePlacement" needs to be exported by the entry point index.d.ts
@@ -857,11 +872,36 @@ export interface PopupBaseProps extends React_2.HTMLAttributes<HTMLDivElement> {
     isOpen: boolean;
     // (undocumented)
     offset?: [number | string, number | string];
+    overlay?: React_2.ReactNode;
     // (undocumented)
     placement?: PopupBasePlacement;
+    popupInfo?: PopupInfo;
     zIndex?: string;
 }
 
+// @public (undocumented)
+export const PopupBaseProvider: React_2.FC<{
+    children: ReactNode;
+}>;
+
+// @public (undocumented)
+export interface PopupContextType {
+    // (undocumented)
+    items: PopupInfo[];
+    // (undocumented)
+    register: (info: PopupInfo) => void;
+    // (undocumented)
+    unregister: (id: string) => void;
+}
+
+// @public (undocumented)
+export interface PopupInfo {
+    // (undocumented)
+    id: string;
+    // (undocumented)
+    info?: Object;
+}
+
 // @public (undocumented)
 export interface PopupProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
@@ -1307,6 +1347,9 @@ export const usePaginationDots: ({ items, index, visibleItems }: SmartPagination
     activeId: string | number;
 };
 
+// @public (undocumented)
+export const usePopupBaseContext: () => PopupContextType;
+
 // @public
 export const useResizeObserver: <T extends HTMLElement>(ref: MutableRefObject<T | null>, callback: (element: T) => void) => void;