feat(plasma): part 1

salute-developers · Dec 25, 2024 · 12b6a2a · 12b6a2a
1 parent 52f240a
commit 12b6a2a
Show file tree

Hide file tree

Showing 7 changed files with 188 additions and 24 deletions.
diff --git a/packages/plasma-b2c/src/components/Select/Select.component-test.tsx b/packages/plasma-b2c/src/components/Select/Select.component-test.tsx
@@ -1134,4 +1134,95 @@ describe('plasma-b2c: Select', () => {
         cy.get('[id$="tree_level_1"]').should('not.exist');
         cy.get('button').should('not.have.focus');
     });
+
+    it('flow: opening', () => {
+        cy.viewport(1300, 500);
+
+        const Component = () => {
+            const [valueSingle, setValueSingle] = React.useState('paris');
+            const [valueMultiple, setValueMultiple] = React.useState(['paris', 'lyon']);
+
+            return (
+                <CypressTestDecoratorWithTypo>
+                    <div style={{ display: 'flex' }}>
+                        <div style={{ width: '300px' }}>
+                            <Select
+                                id="button-single"
+                                target="button-like"
+                                label="Список стран single"
+                                items={items}
+                                value={valueSingle}
+                                onChange={setValueSingle}
+                            />
+                        </div>
+
+                        <div style={{ width: '300px' }}>
+                            <Select
+                                id="button-multiple"
+                                multiselect
+                                target="button-like"
+                                label="Список стран single"
+                                items={items}
+                                value={valueMultiple}
+                                onChange={setValueMultiple}
+                            />
+                        </div>
+
+                        <div style={{ width: '300px' }}>
+                            <Select
+                                id="textfield-single"
+                                target="textfield-like"
+                                items={items}
+                                value={valueSingle}
+                                onChange={setValueSingle}
+                            />
+                        </div>
+
+                        <div style={{ width: '300px' }}>
+                            <Select
+                                id="textfield-multiple"
+                                multiselect
+                                target="textfield-like"
+                                items={items}
+                                value={valueMultiple}
+                                onChange={setValueMultiple}
+                            />
+                        </div>
+                    </div>
+                </CypressTestDecoratorWithTypo>
+            );
+        };
+
+        mount(<Component />);
+
+        cy.get('#button-single').click();
+        cy.get('ul[role="tree"]').should('be.visible');
+        cy.get('#button-single').click();
+        cy.get('ul[role="tree"]').should('not.exist');
+        cy.get('#button-single .select-target-arrow').click({ force: true });
+        cy.get('ul[role="tree"]').should('be.visible');
+        cy.get('#button-single .select-target-arrow').click({ force: true });
+        cy.get('ul[role="tree"]').should('not.exist');
+
+        cy.get('#button-multiple').click();
+        cy.get('ul[role="tree"]').should('be.visible');
+        cy.get('#button-multiple').click();
+        cy.get('ul[role="tree"]').should('not.exist');
+        cy.get('#button-multiple .select-target-arrow').click({ force: true });
+        cy.get('ul[role="tree"]').should('be.visible');
+        cy.get('#button-multiple .select-target-arrow').click({ force: true });
+        cy.get('ul[role="tree"]').should('not.exist');
+
+        cy.get('#textfield-single').click();
+        cy.get('ul[role="tree"]').should('be.visible');
+        cy.get('#textfield-single').click();
+        cy.get('ul[role="tree"]').should('not.exist');
+
+        cy.get('#textfield-multiple').realClick({ position: 'topLeft' });
+        cy.get('ul[role="tree"]').should('be.visible');
+        cy.get('#textfield-multiple').realClick({ position: 'topLeft' });
+        cy.get('ul[role="tree"]').should('not.exist');
+        cy.get('#textfield-multiple').realClick({ position: 'center' });
+        cy.get('ul[role="tree"]').should('not.exist');
+    });
 });
diff --git a/packages/plasma-new-hope/src/components/Select/Select.tsx b/packages/plasma-new-hope/src/components/Select/Select.tsx
@@ -39,6 +39,7 @@ import { Context } from './Select.context';
 export const selectRoot = (Root: RootProps<HTMLButtonElement, Omit<MergedSelectProps, 'items'>>) =>
     forwardRef<HTMLButtonElement, MergedSelectProps>((props, ref) => {
         const {
+            id,
             value: outerValue,
             onChange: outerOnChange,
             target = 'textfield-like',
@@ -125,12 +126,12 @@ export const selectRoot = (Root: RootProps<HTMLButtonElement, Omit<MergedSelectP
             newValue?: string | number | Array<string | number> | ChangeEvent<HTMLSelectElement> | null,
         ) => {
             if (outerOnChange) {
-                // Условие для отправки если комбобокс используется без формы.
+                // Условие для отправки если компонент используется без формы.
                 if (!name && (typeof newValue === 'string' || Array.isArray(newValue))) {
                     outerOnChange(newValue as any);
                 }
 
-                // Условие для отправки если комбобокс используется с формой.
+                // Условие для отправки если компонент используется с формой.
                 if (name && typeof newValue === 'object' && !Array.isArray(newValue)) {
                     outerOnChange(newValue as any);
                 }
@@ -142,20 +143,6 @@ export const selectRoot = (Root: RootProps<HTMLButtonElement, Omit<MergedSelectP
             }
         };
 
-        const handleClickArrow = () => {
-            if (disabled) {
-                return;
-            }
-
-            if (isCurrentListOpen) {
-                dispatchPath({ type: 'reset' });
-            } else {
-                dispatchPath({ type: 'opened_first_level' });
-            }
-
-            dispatchFocusedPath({ type: 'reset' });
-        };
-
         const handleListToggle = (opened: boolean) => {
             if (disabled) {
                 return;
@@ -308,6 +295,7 @@ export const selectRoot = (Root: RootProps<HTMLButtonElement, Omit<MergedSelectP
                 labelPlacement={labelPlacement}
                 chipView={chipView}
                 disabled={disabled}
+                id={id}
                 {...(rest as any)}
             >
                 {name && (
@@ -337,7 +325,7 @@ export const selectRoot = (Root: RootProps<HTMLButtonElement, Omit<MergedSelectP
                     <FloatingPopover
                         ref={floatingPopoverRef}
                         opened={isCurrentListOpen}
-                        onToggle={(opened: boolean) => opened && handleListToggle(true)}
+                        onToggle={handleListToggle}
                         placement={placement}
                         portal={portal}
                         listWidth={listWidth}
@@ -359,7 +347,6 @@ export const selectRoot = (Root: RootProps<HTMLButtonElement, Omit<MergedSelectP
                                 inputWrapperRef={referenceRef as React.MutableRefObject<HTMLDivElement>}
                                 multiselect={props.multiselect}
                                 view={view}
-                                handleClickArrow={handleClickArrow}
                                 helperText={helperText}
                                 treeId={treeId}
                                 activeDescendantItemValue={activeDescendantItemValue}

diff --git a/packages/plasma-new-hope/src/components/Select/ui/Target/Target.tsx b/packages/plasma-new-hope/src/components/Select/ui/Target/Target.tsx
@@ -23,7 +23,6 @@ export const Target = forwardRef<HTMLButtonElement, TargetProps>(
             inputWrapperRef,
             multiselect,
             view,
-            handleClickArrow,
             helperText,
             treeId,
             activeDescendantItemValue,
@@ -79,7 +78,6 @@ export const Target = forwardRef<HTMLButtonElement, TargetProps>(
                 labelPlacement={labelPlacement}
                 size={size}
                 view={view}
-                handleClickArrow={handleClickArrow}
                 contentLeft={contentLeft}
                 helperText={helperText}
                 treeId={treeId}

diff --git a/packages/plasma-new-hope/src/components/Select/ui/Target/Target.types.ts b/packages/plasma-new-hope/src/components/Select/ui/Target/Target.types.ts
@@ -26,7 +26,6 @@ export type TargetProps = Pick<
     onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
     selectProps: MergedSelectProps;
     inputWrapperRef: MutableRefObject<HTMLDivElement>;
-    handleClickArrow: () => void;
     treeId: string;
     activeDescendantItemValue: string;
     onChange: (newValue: string | number | Array<string | number>) => void;

diff --git a/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.tsx b/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.tsx
@@ -20,7 +20,6 @@ export const Textfield = forwardRef<HTMLInputElement, TextfieldProps>(
             onKeyDown,
             size,
             view,
-            handleClickArrow,
             contentLeft,
             helperText,
             treeId,
@@ -109,7 +108,7 @@ export const Textfield = forwardRef<HTMLInputElement, TextfieldProps>(
                 placeholder={value instanceof Array && value.length ? '' : placeholder}
                 contentLeft={contentLeft as React.ReactElement}
                 contentRight={
-                    <IconArrowWrapper disabled={Boolean(disabled)} onClick={handleClickArrow}>
+                    <IconArrowWrapper disabled={Boolean(disabled)}>
                         <StyledArrow color="inherit" size={sizeToIconSize(size)} className={withArrowInverse} />
                     </IconArrowWrapper>
                 }

diff --git a/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.types.ts b/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.types.ts
@@ -13,7 +13,6 @@ export type TextfieldProps = Pick<
     | 'onKeyDown'
     | 'size'
     | 'view'
-    | 'handleClickArrow'
     | 'contentLeft'
     | 'helperText'
     | 'treeId'

diff --git a/packages/plasma-web/src/components/Select/Select.component-test.tsx b/packages/plasma-web/src/components/Select/Select.component-test.tsx
@@ -1134,4 +1134,95 @@ describe('plasma-web: Select', () => {
         cy.get('[id$="tree_level_1"]').should('not.exist');
         cy.get('button').should('not.have.focus');
     });
+
+    it('flow: opening', () => {
+        cy.viewport(1300, 500);
+
+        const Component = () => {
+            const [valueSingle, setValueSingle] = React.useState('paris');
+            const [valueMultiple, setValueMultiple] = React.useState(['paris', 'lyon']);
+
+            return (
+                <CypressTestDecoratorWithTypo>
+                    <div style={{ display: 'flex' }}>
+                        <div style={{ width: '300px' }}>
+                            <Select
+                                id="button-single"
+                                target="button-like"
+                                label="Список стран single"
+                                items={items}
+                                value={valueSingle}
+                                onChange={setValueSingle}
+                            />
+                        </div>
+
+                        <div style={{ width: '300px' }}>
+                            <Select
+                                id="button-multiple"
+                                multiselect
+                                target="button-like"
+                                label="Список стран single"
+                                items={items}
+                                value={valueMultiple}
+                                onChange={setValueMultiple}
+                            />
+                        </div>
+
+                        <div style={{ width: '300px' }}>
+                            <Select
+                                id="textfield-single"
+                                target="textfield-like"
+                                items={items}
+                                value={valueSingle}
+                                onChange={setValueSingle}
+                            />
+                        </div>
+
+                        <div style={{ width: '300px' }}>
+                            <Select
+                                id="textfield-multiple"
+                                multiselect
+                                target="textfield-like"
+                                items={items}
+                                value={valueMultiple}
+                                onChange={setValueMultiple}
+                            />
+                        </div>
+                    </div>
+                </CypressTestDecoratorWithTypo>
+            );
+        };
+
+        mount(<Component />);
+
+        cy.get('#button-single').click();
+        cy.get('ul[role="tree"]').should('be.visible');
+        cy.get('#button-single').click();
+        cy.get('ul[role="tree"]').should('not.exist');
+        cy.get('#button-single .select-target-arrow').click({ force: true });
+        cy.get('ul[role="tree"]').should('be.visible');
+        cy.get('#button-single .select-target-arrow').click({ force: true });
+        cy.get('ul[role="tree"]').should('not.exist');
+
+        cy.get('#button-multiple').click();
+        cy.get('ul[role="tree"]').should('be.visible');
+        cy.get('#button-multiple').click();
+        cy.get('ul[role="tree"]').should('not.exist');
+        cy.get('#button-multiple .select-target-arrow').click({ force: true });
+        cy.get('ul[role="tree"]').should('be.visible');
+        cy.get('#button-multiple .select-target-arrow').click({ force: true });
+        cy.get('ul[role="tree"]').should('not.exist');
+
+        cy.get('#textfield-single').click();
+        cy.get('ul[role="tree"]').should('be.visible');
+        cy.get('#textfield-single').click();
+        cy.get('ul[role="tree"]').should('not.exist');
+
+        cy.get('#textfield-multiple').realClick({ position: 'topLeft' });
+        cy.get('ul[role="tree"]').should('be.visible');
+        cy.get('#textfield-multiple').realClick({ position: 'topLeft' });
+        cy.get('ul[role="tree"]').should('not.exist');
+        cy.get('#textfield-multiple').realClick({ position: 'center' });
+        cy.get('ul[role="tree"]').should('not.exist');
+    });
 });