plasma-new-hope: fix id generation for Modal, Popup

packages/plasma-b2c/src/components/ModalBase/ModalBase.component-test.tsx

@@ -0,0 +1 @@
+../../../../plasma-web/src/components/ModalBase/ModalBase.component-test.tsx

packages/plasma-b2c/src/components/PopupBase/PopupBase.component-test.tsx

@@ -0,0 +1 @@
+../../../../plasma-web/src/components/PopupBase/PopupBase.component-test.tsx

packages/plasma-new-hope/src/components/Modal/Modal/Modal.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { useFocusTrap, useForkRef, useUniqId } from '@salutejs/plasma-core';
+import { useFocusTrap, useForkRef, safeUseId } from '@salutejs/plasma-core';
 
 import { RootProps, component } from '../../../engines';
 import { popupConfig } from '../../Popup';
@@ -43,14 +43,14 @@ export const modalRoot = (Root: RootProps<HTMLDivElement, ModalProps>) =>
 
             const innerRef = useForkRef<HTMLDivElement>(trapRef, outerRootRef);
 
-            const uniqId = useUniqId();
+            const uniqId = safeUseId();
             const innerId = id || uniqId;
 
             const { modalInfo } = useModal({ id: innerId, isOpen, closeOnEsc, onEscKeyDown, onClose, popupInfo });
 
             return (
                 <Popup
-                    id={id}
+                    id={innerId}
                     isOpen={isOpen}
                     ref={innerRef}
                     popupInfo={modalInfo}

packages/plasma-new-hope/src/components/Popup/Popup.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { useForkRef, useUniqId } from '@salutejs/plasma-core';
+import { useForkRef, safeUseId } from '@salutejs/plasma-core';
 
 import { RootProps } from '../../engines/types';
 import { cx } from '../../utils';
@@ -101,7 +101,7 @@ export const popupRoot = (Root: RootProps<HTMLDivElement, PopupProps>) =>
             },
             outerRootRef,
         ) => {
-            const uniqId = useUniqId();
+            const uniqId = safeUseId();
             const innerId = id || uniqId;
 
             const { isVisible, animationInfo, setVisible } = usePopup({

packages/plasma-web/src/components/ModalBase/ModalBase.component-test.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import styled from 'styled-components';
+import { mount, CypressTestDecorator, getComponent } from '@salutejs/plasma-cy-utils';
+import { surfaceSolid02 } from '@salutejs/plasma-tokens-web';
+
+const Content = styled.div`
+    background: ${surfaceSolid02};
+    padding: 1rem;
+`;
+
+describe('plasma-web: ModalBase', () => {
+    const PopupBaseProvider = getComponent('PopupBaseProvider');
+    const ModalBase = getComponent('ModalBase');
+    const Button = getComponent('Button');
+    const Headline3 = getComponent('Headline3');
+
+    function Demo({
+        open = false,
+        withBlur = false,
+        placement,
+    }: {
+        open?: boolean;
+        withBlur?: boolean;
+        placement?: string;
+    }) {
+        const [isOpen, setIsOpen] = React.useState(open);
+
+        return (
+            <PopupBaseProvider>
+                <Button text="Open modal" onClick={() => setIsOpen(true)} />
+                <ModalBase isOpen={isOpen} onClose={() => setIsOpen(false)} withBlur={withBlur} placement={placement}>
+                    <Content id="modal-content">
+                        <Headline3>Modal</Headline3>
+                        <Button text="Close" onClick={() => setIsOpen(false)} />
+                    </Content>
+                </ModalBase>
+            </PopupBaseProvider>
+        );
+    }
+
+    function Double() {
+        const [isOpenA, setIsOpenA] = React.useState(false);
+        const [isOpenB, setIsOpenB] = React.useState(false);
+
+        return (
+            <PopupBaseProvider>
+                <Button text="Open modal A" onClick={() => setIsOpenA(true)} />
+                <ModalBase isOpen={isOpenA} onClose={() => setIsOpenA(false)}>
+                    <Content id="modalA-content">
+                        <Headline3>ModalA</Headline3>
+                        <Button text="Close A" onClick={() => setIsOpenA(false)} />
+                        <Button text="Open modal B" onClick={() => setIsOpenB(true)} />
+                        <ModalBase isOpen={isOpenB} onClose={() => setIsOpenB(false)} placement="left">
+                            <Content id="modalB-content">
+                                <Headline3>ModalB</Headline3>
+                                <Button text="Close B" onClick={() => setIsOpenB(false)} />
+                            </Content>
+                        </ModalBase>
+                    </Content>
+                </ModalBase>
+            </PopupBaseProvider>
+        );
+    }
+
+    it('simple', () => {
+        mount(
+            <CypressTestDecorator>
+                <Demo />
+            </CypressTestDecorator>,
+        );
+
+        cy.get('button').click();
+
+        cy.matchImageSnapshot();
+    });
+
+    it('close', () => {
+        mount(
+            <CypressTestDecorator>
+                <Demo />
+            </CypressTestDecorator>,
+        );
+
+        cy.get('button').click();
+        cy.get('#modal-content').should('be.visible');
+        cy.get('body').type('{esc}');
+        cy.get('#plasma-popup-root').should('be.empty');
+    });
+
+    it('close overlay', () => {
+        mount(
+            <CypressTestDecorator>
+                <Demo />
+            </CypressTestDecorator>,
+        );
+
+        cy.get('button').click();
+        cy.get('#modal-content').should('be.visible');
+        cy.get('body').click(5, 5);
+        cy.get('#plasma-popup-root').should('be.empty');
+    });
+
+    it('double close', () => {
+        mount(
+            <CypressTestDecorator>
+                <Double />
+            </CypressTestDecorator>,
+        );
+
+        cy.get('button').contains('Open modal A').click();
+        cy.get('button').contains('Open modal B').click();
+        cy.get('#modalB-content').should('be.visible');
+        cy.get('body').click(5, 5);
+        cy.matchImageSnapshot();
+        cy.get('#modalA-content').should('be.visible');
+        cy.get('body').click(5, 5);
+        cy.get('#plasma-popup-root').should('be.empty');
+    });
+
+    it('withBlur', () => {
+        mount(
+            <CypressTestDecorator>
+                <Demo withBlur />
+            </CypressTestDecorator>,
+        );
+
+        cy.get('button').click();
+
+        cy.matchImageSnapshot();
+    });
+
+    it('check focus trap', () => {
+        mount(
+            <CypressTestDecorator>
+                <Double />
+            </CypressTestDecorator>,
+        );
+
+        cy.get('button').contains('Open modal A').type('{enter}');
+        cy.get('button').contains('Open modal B').type('{enter}');
+        cy.get('button').contains('Close B').type('{enter}');
+        cy.focused().should(($p) => {
+            expect($p).to.contain('Open modal B');
+        });
+
+        cy.focused().tab();
+        cy.focused().tab();
+
+        cy.focused().should(($p) => {
+            expect($p).to.contain('Open modal B');
+        });
+        cy.get('button').contains('Close A').type('{enter}');
+        cy.focused().should(($p) => {
+            expect($p).to.contain('Open modal A');
+        });
+    });
+});

packages/plasma-web/src/components/PopupBase/PopupBase.component-test.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+import styled from 'styled-components';
+import { mount, CypressTestDecorator, getComponent } from '@salutejs/plasma-cy-utils';
+import { surfaceSolid02, surfaceSolid03 } from '@salutejs/plasma-tokens-web';
+
+const Content = styled.div`
+    background: ${surfaceSolid02};
+    padding: 1rem;
+`;
+
+const OtherContent = styled.div`
+    width: 50%;
+    height: 50%;
+    background: ${surfaceSolid03};
+    position: absolute;
+
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 1rem;
+
+    bottom: 0rem;
+    right: 0;
+`;
+
+describe('plasma-web: PopupBase', () => {
+    const PopupBaseProvider = getComponent('PopupBaseProvider');
+    const PopupBase = getComponent('PopupBase');
+    const Button = getComponent('Button');
+    const Headline3 = getComponent('Headline3');
+
+    function Demo({ open = false, placement }: { open?: boolean; placement?: string }) {
+        const [isOpen, setIsOpen] = React.useState(open);
+
+        return (
+            <>
+                <Button text="Open popup" onClick={() => setIsOpen(true)} />
+                <PopupBase isOpen={isOpen} onClose={() => setIsOpen(false)} placement={placement}>
+                    <Content id="popup-content">
+                        <Headline3>Popup</Headline3>
+                        <Button text="Close" onClick={() => setIsOpen(false)} />
+                    </Content>
+                </PopupBase>
+            </>
+        );
+    }
+
+    function Placement({ placement, offset }: { placement?: string; offset?: [number, number] }) {
+        return (
+            <>
+                <PopupBase isOpen placement={placement} offset={offset}>
+                    <Content>
+                        <Headline3>{placement}</Headline3>
+                        <Button text="Close" />
+                    </Content>
+                </PopupBase>
+            </>
+        );
+    }
+
+    function Frame() {
+        const [isOpenA, setIsOpenA] = React.useState(false);
+        const [isOpenB, setIsOpenB] = React.useState(false);
+
+        const ref = React.useRef<HTMLDivElement>(null);
+        return (
+            <>
+                <Button text="Open popup A" onClick={() => setIsOpenA(true)} />
+                <Button text="Open popup B" onClick={() => setIsOpenB(true)} />
+                <PopupBase isOpen={isOpenA} frame={ref}>
+                    <Content>
+                        <Headline3>Popup A</Headline3>
+                        <Button text="Close A" onClick={() => setIsOpenA(false)} />
+                    </Content>
+                </PopupBase>
+                <OtherContent ref={ref}>
+                    <Headline3>Frame</Headline3>
+                </OtherContent>
+                <PopupBase isOpen={isOpenB}>
+                    <Content>
+                        <Headline3>Popup B</Headline3>
+                        <Button text="Close B" onClick={() => setIsOpenB(false)} />
+                    </Content>
+                </PopupBase>
+            </>
+        );
+    }
+
+    it('simple', () => {
+        mount(
+            <CypressTestDecorator>
+                <PopupBaseProvider>
+                    <Demo />
+                </PopupBaseProvider>
+            </CypressTestDecorator>,
+        );
+
+        cy.get('button').click();
+
+        cy.matchImageSnapshot();
+    });
+
+    it('close', () => {
+        mount(
+            <CypressTestDecorator>
+                <PopupBaseProvider>
+                    <Demo />
+                </PopupBaseProvider>
+            </CypressTestDecorator>,
+        );
+
+        cy.get('button').click();
+        cy.get('#popup-content').should('be.visible');
+        cy.get('button').contains('Close').click();
+        cy.get('#plasma-popup-root').should('be.empty');
+    });
+
+    it('placement basic', () => {
+        mount(
+            <CypressTestDecorator>
+                <PopupBaseProvider>
+                    <Placement placement="center" />
+                    <Placement placement="right" />
+                    <Placement placement="left" />
+                    <Placement placement="bottom" />
+                    <Placement placement="top" />
+                </PopupBaseProvider>
+            </CypressTestDecorator>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('placement combination', () => {
+        mount(
+            <CypressTestDecorator>
+                <PopupBaseProvider>
+                    <Placement placement="bottom-right" />
+                    <Placement placement="bottom-left" />
+                    <Placement placement="top-right" />
+                    <Placement placement="top-left" />
+                </PopupBaseProvider>
+            </CypressTestDecorator>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('placement combination + offset', () => {
+        mount(
+            <CypressTestDecorator>
+                <PopupBaseProvider>
+                    <Placement placement="bottom-right" offset={[1, 1]} />
+                    <Placement placement="bottom-left" offset={[1, 1]} />
+                    <Placement placement="top-right" offset={[1, 1]} />
+                    <Placement placement="top-left" offset={[1, 1]} />
+                </PopupBaseProvider>
+            </CypressTestDecorator>,
+        );
+
+        cy.matchImageSnapshot();
+    });
+
+    it('frame', () => {
+        mount(
+            <CypressTestDecorator>
+                <PopupBaseProvider>
+                    <Frame />
+                </PopupBaseProvider>
+            </CypressTestDecorator>,
+        );
+
+        cy.get('button').contains('Open popup A').click();
+        cy.get('button').contains('Open popup B').click();
+        cy.matchImageSnapshot();
+    });
+});