feat(plasma-*, sdds-*): beforeList & afterList in Select, Autocomplet…

…e, Combobox
salute-developers · Dec 14, 2024 · 34f0ffb · 34f0ffb
1 parent ba035ab
commit 34f0ffb
Show file tree

Hide file tree

Showing 31 changed files with 304 additions and 1 deletion.
diff --git a/...ocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop afterList.snap.png b/...ocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop afterList.snap.png
diff --git a/...complete.component-test.tsx/plasma-b2c Autocomplete -- prop beforeList.snap.png b/...complete.component-test.tsx/plasma-b2c Autocomplete -- prop beforeList.snap.png
diff --git a/...obox/Combobox.component-test.tsx/plasma-b2c Combobox -- prop afterList.snap.png b/...obox/Combobox.component-test.tsx/plasma-b2c Combobox -- prop afterList.snap.png
diff --git a/...box/Combobox.component-test.tsx/plasma-b2c Combobox -- prop beforeList.snap.png b/...box/Combobox.component-test.tsx/plasma-b2c Combobox -- prop beforeList.snap.png
diff --git a/...down/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop afterList.snap.png b/...down/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop afterList.snap.png
diff --git a/...own/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop beforeList.snap.png b/...own/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop beforeList.snap.png
diff --git a/...ocomplete.component-test.tsx/plasma-web Autocomplete -- prop afterList.snap.png b/...ocomplete.component-test.tsx/plasma-web Autocomplete -- prop afterList.snap.png
diff --git a/...complete.component-test.tsx/plasma-web Autocomplete -- prop beforeList.snap.png b/...complete.component-test.tsx/plasma-web Autocomplete -- prop beforeList.snap.png
diff --git a/...obox/Combobox.component-test.tsx/plasma-web Combobox -- prop afterList.snap.png b/...obox/Combobox.component-test.tsx/plasma-web Combobox -- prop afterList.snap.png
diff --git a/...box/Combobox.component-test.tsx/plasma-web Combobox -- prop beforeList.snap.png b/...box/Combobox.component-test.tsx/plasma-web Combobox -- prop beforeList.snap.png
diff --git a/...down/Dropdown.component-test.tsx/plasma-web Dropdown -- prop afterList.snap.png b/...down/Dropdown.component-test.tsx/plasma-web Dropdown -- prop afterList.snap.png
diff --git a/...own/Dropdown.component-test.tsx/plasma-web Dropdown -- prop beforeList.snap.png b/...own/Dropdown.component-test.tsx/plasma-web Dropdown -- prop beforeList.snap.png
diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md
@@ -1899,6 +1899,8 @@ default: PolymorphicClassName;
     portal?: string | React_2.RefObject<HTMLElement> | undefined;
     renderItem?: ((item: DropdownItemOption) => React_2.ReactNode) | undefined;
     zIndex?: Property.ZIndex | undefined;
+    beforeList?: React_2.ReactNode;
+    afterList?: React_2.ReactNode;
     onItemClick?: ((item: DropdownItemOption, event: React_2.SyntheticEvent<Element, Event>) => void) | undefined;
     listOverflow?: Property.Overflow | undefined;
     listHeight?: Property.Height<string | number> | undefined;

diff --git a/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.component-test.tsx b/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.component-test.tsx
@@ -513,6 +513,50 @@ describe('plasma-b2c: Autocomplete', () => {
         cy.matchImageSnapshot();
     });
 
+    it('prop: beforeList', () => {
+        cy.viewport(400, 400);
+
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <div style={{ width: '300px' }}>
+                    <Autocomplete
+                        label="Label"
+                        placeholder="Placeholder"
+                        suggestions={suggestions}
+                        beforeList="Content before list"
+                    />
+                </div>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.get('input').click();
+        cy.focused().type('алексей');
+
+        cy.matchImageSnapshot();
+    });
+
+    it('prop: afterList', () => {
+        cy.viewport(400, 400);
+
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <div style={{ width: '300px' }}>
+                    <Autocomplete
+                        label="Label"
+                        placeholder="Placeholder"
+                        suggestions={suggestions}
+                        afterList="Content after list"
+                    />
+                </div>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.get('input').click();
+        cy.focused().type('алексей');
+
+        cy.matchImageSnapshot();
+    });
+
     it('keyboard interactions', () => {
         cy.viewport(1000, 500);
 

diff --git a/packages/plasma-b2c/src/components/Combobox/Combobox.component-test.tsx b/packages/plasma-b2c/src/components/Combobox/Combobox.component-test.tsx
@@ -1197,6 +1197,50 @@ describe('plasma-b2c: Combobox', () => {
         cy.get('[data-floating-ui-portal] > div').should('have.css', 'z-index', '10000');
     });
 
+    it('prop: beforeList', () => {
+        cy.viewport(400, 400);
+
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <div style={{ width: '300px' }}>
+                    <Combobox
+                        id="single"
+                        items={items}
+                        label="Label"
+                        placeholder="Placeholder"
+                        beforeList="Content before list"
+                    />
+                </div>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.get('#single').click();
+
+        cy.matchImageSnapshot();
+    });
+
+    it('prop: afterList', () => {
+        cy.viewport(400, 400);
+
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <div style={{ width: '300px' }}>
+                    <Combobox
+                        id="single"
+                        items={items}
+                        label="Label"
+                        placeholder="Placeholder"
+                        afterList="Content after list"
+                    />
+                </div>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.get('#single').click();
+
+        cy.matchImageSnapshot();
+    });
+
     it('flow: single uncontrolled', () => {
         cy.viewport(1000, 500);
 

diff --git a/packages/plasma-b2c/src/components/Dropdown/Dropdown.component-test.tsx b/packages/plasma-b2c/src/components/Dropdown/Dropdown.component-test.tsx
@@ -582,6 +582,42 @@ describe('plasma-b2c: Dropdown', () => {
         cy.get('[data-floating-ui-portal] > div').should('have.css', 'z-index', '10000');
     });
 
+    it('prop: beforeList', () => {
+        cy.viewport(400, 400);
+
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <div style={{ width: '300px' }}>
+                    <Dropdown items={items} beforeList="Content before list">
+                        <Button text="Список стран" />
+                    </Dropdown>
+                </div>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.get('button').click();
+
+        cy.matchImageSnapshot();
+    });
+
+    it('prop: afterList', () => {
+        cy.viewport(400, 400);
+
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <div style={{ width: '300px' }}>
+                    <Dropdown items={items} afterList="Content after list">
+                        <Button text="Список стран" />
+                    </Dropdown>
+                </div>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.get('button').click();
+
+        cy.matchImageSnapshot();
+    });
+
     it('keyboard interactions', () => {
         cy.viewport(1000, 500);
 

diff --git a/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.tsx b/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.tsx
@@ -44,8 +44,9 @@ export const autocompleteRoot = (Root: RootProps<HTMLInputElement, AutocompleteP
                 renderList,
                 renderListEnd,
                 onSearch,
-
                 hintText,
+                beforeList,
+                afterList,
 
                 ...rest
             },
@@ -179,6 +180,8 @@ export const autocompleteRoot = (Root: RootProps<HTMLInputElement, AutocompleteP
                                         onScroll={onScroll}
                                         listMaxHeight={listMaxHeight}
                                     >
+                                        {beforeList}
+
                                         {finalResults.map((suggestion, index) => (
                                             <SuggestionItem
                                                 key={index}
@@ -189,6 +192,8 @@ export const autocompleteRoot = (Root: RootProps<HTMLInputElement, AutocompleteP
                                             />
                                         ))}
 
+                                        {afterList}
+
                                         {renderListEnd && (
                                             <InfiniteLoaderWrapper>{renderListEnd()}</InfiniteLoaderWrapper>
                                         )}

diff --git a/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.types.ts b/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.types.ts
@@ -91,6 +91,14 @@ export type BaseProps = {
      * Изначальное значение.
      */
     defaultValue?: string;
+    /**
+     * Ячейка для контента в начале выпадающего списка.
+     */
+    beforeList?: ReactNode;
+    /**
+     * Ячейка для контента в конце выпадающего списка.
+     */
+    afterList?: ReactNode;
 };
 
 export type AutocompleteProps = BaseProps &

diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.tsx b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.tsx
@@ -70,6 +70,8 @@ export const comboboxRoot = (Root: RootProps<HTMLInputElement, Omit<ComboboxProp
             closeAfterSelect: outerCloseAfterSelect,
             renderValue,
             zIndex,
+            beforeList,
+            afterList,
             ...rest
         } = props;
 
@@ -473,6 +475,8 @@ export const comboboxRoot = (Root: RootProps<HTMLInputElement, Omit<ComboboxProp
                                     listWidth={listWidth}
                                     ref={targetRef}
                                 >
+                                    {beforeList}
+
                                     {isEmpty(filteredItems) ? (
                                         <StyledEmptyState
                                             className={classes.emptyStateWrapper}
@@ -492,6 +496,8 @@ export const comboboxRoot = (Root: RootProps<HTMLInputElement, Omit<ComboboxProp
                                             />
                                         ))
                                     )}
+
+                                    {afterList}
                                 </Ul>
                             </Root>
                         </FloatingPopover>

diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.types.ts b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.types.ts
@@ -200,6 +200,14 @@ type BasicProps<T extends ItemOption = ItemOption> = {
      * @default если single, то true; если multiple, то false; если передан alwaysOpened, то false
      */
     closeAfterSelect?: boolean;
+    /**
+     * Ячейка для контента в начале выпадающего списка.
+     */
+    beforeList?: React.ReactNode;
+    /**
+     * Ячейка для контента в конце выпадающего списка.
+     */
+    afterList?: React.ReactNode;
     /**
      * Размер компонента.
      */

diff --git a/packages/plasma-new-hope/src/components/Dropdown/Dropdown.tsx b/packages/plasma-new-hope/src/components/Dropdown/Dropdown.tsx
@@ -51,6 +51,8 @@ export const dropdownRoot = (Root: RootProps<HTMLDivElement, Omit<DropdownProps,
                 portal,
                 renderItem,
                 zIndex,
+                beforeList,
+                afterList,
                 ...rest
             },
             ref,
@@ -160,6 +162,8 @@ export const dropdownRoot = (Root: RootProps<HTMLDivElement, Omit<DropdownProps,
                                 listOverflow={listOverflow}
                                 listWidth={listWidth}
                             >
+                                {beforeList}
+
                                 {items.map((item, index) => (
                                     <DropdownInner
                                         key={`${index}/0`}
@@ -174,6 +178,8 @@ export const dropdownRoot = (Root: RootProps<HTMLDivElement, Omit<DropdownProps,
                                         listWidth={listWidth}
                                     />
                                 ))}
+
+                                {afterList}
                             </Ul>
                         </Root>
                     </FloatingPopover>

diff --git a/packages/plasma-new-hope/src/components/Dropdown/Dropdown.types.ts b/packages/plasma-new-hope/src/components/Dropdown/Dropdown.types.ts
@@ -92,6 +92,14 @@ export type DropdownProps<T extends DropdownItemOption = DropdownItemOption> = {
      * CSS-свойство z-index для выпадающего списка.
      */
     zIndex?: CSSProperties['zIndex'];
+    /**
+     * Ячейка для контента в начале выпадающего списка.
+     */
+    beforeList?: ReactNode;
+    /**
+     * Ячейка для контента в конце выпадающего списка.
+     */
+    afterList?: ReactNode;
 
     /**
      * Обработчик клика по item.

diff --git a/packages/plasma-web/api/plasma-web.api.md b/packages/plasma-web/api/plasma-web.api.md
@@ -1901,6 +1901,8 @@ default: PolymorphicClassName;
     portal?: string | React_2.RefObject<HTMLElement> | undefined;
     renderItem?: ((item: DropdownItemOption) => React_2.ReactNode) | undefined;
     zIndex?: Property.ZIndex | undefined;
+    beforeList?: React_2.ReactNode;
+    afterList?: React_2.ReactNode;
     onItemClick?: ((item: DropdownItemOption, event: React_2.SyntheticEvent<Element, Event>) => void) | undefined;
     listOverflow?: Property.Overflow | undefined;
     listHeight?: Property.Height<string | number> | undefined;

diff --git a/packages/plasma-web/src/components/Autocomplete/Autocomplete.component-test.tsx b/packages/plasma-web/src/components/Autocomplete/Autocomplete.component-test.tsx
@@ -513,6 +513,50 @@ describe('plasma-web: Autocomplete', () => {
         cy.matchImageSnapshot();
     });
 
+    it('prop: beforeList', () => {
+        cy.viewport(400, 400);
+
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <div style={{ width: '300px' }}>
+                    <Autocomplete
+                        label="Label"
+                        placeholder="Placeholder"
+                        suggestions={suggestions}
+                        beforeList="Content before list"
+                    />
+                </div>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.get('input').click();
+        cy.focused().type('алексей');
+
+        cy.matchImageSnapshot();
+    });
+
+    it('prop: afterList', () => {
+        cy.viewport(400, 400);
+
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <div style={{ width: '300px' }}>
+                    <Autocomplete
+                        label="Label"
+                        placeholder="Placeholder"
+                        suggestions={suggestions}
+                        afterList="Content after list"
+                    />
+                </div>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.get('input').click();
+        cy.focused().type('алексей');
+
+        cy.matchImageSnapshot();
+    });
+
     it('keyboard interactions', () => {
         cy.viewport(1000, 500);
 

diff --git a/packages/plasma-web/src/components/Combobox/Combobox.component-test.tsx b/packages/plasma-web/src/components/Combobox/Combobox.component-test.tsx
@@ -1197,6 +1197,50 @@ describe('plasma-web: Combobox', () => {
         cy.get('[data-floating-ui-portal] > div').should('have.css', 'z-index', '10000');
     });
 
+    it('prop: beforeList', () => {
+        cy.viewport(400, 400);
+
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <div style={{ width: '300px' }}>
+                    <Combobox
+                        id="single"
+                        items={items}
+                        label="Label"
+                        placeholder="Placeholder"
+                        beforeList="Content before list"
+                    />
+                </div>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.get('#single').click();
+
+        cy.matchImageSnapshot();
+    });
+
+    it('prop: afterList', () => {
+        cy.viewport(400, 400);
+
+        mount(
+            <CypressTestDecoratorWithTypo>
+                <div style={{ width: '300px' }}>
+                    <Combobox
+                        id="single"
+                        items={items}
+                        label="Label"
+                        placeholder="Placeholder"
+                        afterList="Content after list"
+                    />
+                </div>
+            </CypressTestDecoratorWithTypo>,
+        );
+
+        cy.get('#single').click();
+
+        cy.matchImageSnapshot();
+    });
+
     it('flow: single uncontrolled', () => {
         cy.viewport(1000, 500);