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

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

@@ -144,6 +144,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';
@@ -169,6 +171,7 @@ 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 { PopupProps } from '@salutejs/plasma-hope';
 import { PreviewGallery } from '@salutejs/plasma-hope';
 import { PreviewGalleryItemProps } from '@salutejs/plasma-hope';
@@ -559,6 +562,10 @@ export { MediaQueryFunction }
 
 export { Modal }
 
+export { ModalBase }
+
+export { ModalBaseProps }
+
 export { ModalProps }
 
 export { ModalsProvider }
@@ -609,6 +616,8 @@ export { PopupBasePlacement }
 
 export { PopupBaseProps }
 
+export { PopupBaseProvider }
+
 export { PopupProps }
 
 export { PreviewGallery }

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

@@ -0,0 +1,139 @@
+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: {
+        position: {
+            options: [
+                'center',
+                'top',
+                'bottom',
+                'right',
+                'left',
+                'top-right',
+                'top-left',
+                'bottom-right',
+                'bottom-left',
+            ],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+} as Meta;
+
+type ModalBaseStoryProps = {
+    position: 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;
+`;
+
+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> = ({ position, 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}
+                        position={position}
+                        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}
+                                position="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}
+                                        position="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 = {
+    position: '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',
@@ -96,25 +96,27 @@ export const PopupBaseDemo: Story<PopupBaseStoryProps> = ({ position, offsetX, o
     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} position={position} offset={[offsetX, offsetY]}>
+                <PopupBaseProvider>
                     <Content>
-                        <Button onClick={() => setIsOpenA(false)}>Close</Button>
-                        <>Content</>
+                        <StyledButton text="Открыть во Frame" onClick={() => setIsOpenA(true)} />
+                        <StyledButton text="Открыть в document" onClick={() => setIsOpenB(true)} />
                     </Content>
-                </PopupBase>
-                <OtherContent ref={ref}>
-                    <>Frame</>
-                </OtherContent>
-                <PopupBase frame="document" isOpen={isOpenB} position={position} offset={[offsetX, offsetY]}>
-                    <Content>
-                        <Button onClick={() => setIsOpenB(false)}>Close</Button>
-                        <>Content</>
-                    </Content>
-                </PopupBase>
+                    <PopupBase frame={ref} isOpen={isOpenA} position={position} offset={[offsetX, offsetY]}>
+                        <Content>
+                            <Button onClick={() => setIsOpenA(false)}>Close</Button>
+                            <>Content</>
+                        </Content>
+                    </PopupBase>
+                    <OtherContent ref={ref}>
+                        <>Frame</>
+                    </OtherContent>
+                    <PopupBase frame="document" isOpen={isOpenB} position={position} 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,4 @@
+export { PopupBaseProvider } 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

@@ -25,6 +25,7 @@ import { Keyframes } from 'styled-components';
 import { MutableRefObject } from 'react';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
+import { RefObject } from 'react';
 import { spacing } from '@salutejs/plasma-typo';
 import { SpacingProps } from '@salutejs/plasma-typo';
 import { SpacingProps as SpacingProps_2 } from '@salutejs/plasma-typo/lib/cjs/mixins/applySpacing';
@@ -752,6 +753,23 @@ export interface MaxLinesProps {
     maxLines?: number;
 }
 
+// @public
+export const ModalBase: FC<ModalBaseProps>;
+
+// @public (undocumented)
+export interface ModalBaseProps extends Omit<PopupBaseProps, 'frame'> {
+    closeButtonAriaLabel?: string;
+    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;
+    showCloseButton?: boolean;
+    withBlur?: boolean;
+}
+
 // @public (undocumented)
 export const monthLongName: (val: number) => string;
 
@@ -819,7 +837,9 @@ export interface PinProps {
 export const Popup: React_2.NamedExoticComponent<PopupProps & React_2.RefAttributes<HTMLDivElement>>;
 
 // @public
-export const PopupBase: FC<PopupBaseProps>;
+export const PopupBase: React_2.ForwardRefExoticComponent<PopupBaseProps & {
+    popupInfo?: PopupInfo | undefined;
+} & 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
@@ -841,6 +861,11 @@ export interface PopupBaseProps extends React_2.HTMLAttributes<HTMLDivElement> {
     zIndex?: string;
 }
 
+// @public (undocumented)
+export const PopupBaseProvider: React_2.FC<{
+    children: ReactNode;
+}>;
+
 // @public (undocumented)
 export interface PopupProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
@@ -1264,6 +1289,9 @@ export type UseCarouselOptions = Pick<CarouselProps, 'index' | 'axis' | 'detectA
 // @public (undocumented)
 export function useDebouncedFunction(func: (...args: any) => any, delay: number, cleanUp?: boolean): (...args: any[]) => void;
 
+// @public
+export const useFocusTrap: (active?: boolean, firstFocusSelector?: string | RefObject<HTMLElement> | undefined, focusAfterNode?: RefObject<HTMLElement> | undefined) => (instance: HTMLElement | null) => void;
+
 // Warning: (ae-forgotten-export) The symbol "UseForkRefHook" needs to be exported by the entry point index.d.ts
 //
 // @public
@@ -1381,6 +1409,7 @@ export interface WithSkeletonProps {
 
 // Warnings were encountered during analysis:
 //
+// components/PopupBase/PopupBase.d.ts:41:5 - (ae-forgotten-export) The symbol "PopupInfo" needs to be exported by the entry point index.d.ts
 // components/Toast/Toast.d.ts:4:5 - (ae-forgotten-export) The symbol "ToastRole" needs to be exported by the entry point index.d.ts
 // components/Toast/useToast.d.ts:2:5 - (ae-forgotten-export) The symbol "ShowToast" needs to be exported by the entry point index.d.ts