feat(plasma-new-hope): portal prop added to Autocomplete

salute-developers · Aug 7, 2024 · bf25ab4 · bf25ab4
1 parent 991a1ab
commit bf25ab4
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 19 deletions.
diff --git a/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.tsx b/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.tsx
@@ -35,6 +35,7 @@ export const autocompleteRoot = (Root: RootProps<HTMLInputElement, AutocompleteP
                 onScroll,
                 listMaxHeight,
                 listWidth,
+                portal,
                 filter,
                 onSuggestionSelect,
                 threshold = 2,
@@ -115,6 +116,8 @@ export const autocompleteRoot = (Root: RootProps<HTMLInputElement, AutocompleteP
                         offset={[0, 0]}
                         placement={getPlacements('bottom')}
                         isFocusTrapped={false}
+                        usePortal={Boolean(portal)}
+                        frame={portal}
                         target={
                             <StyledTextField
                                 value={value}
@@ -148,25 +151,35 @@ export const autocompleteRoot = (Root: RootProps<HTMLInputElement, AutocompleteP
                     >
                         {(renderList && renderList(finalResults)) ||
                             (Boolean(finalResults.length) && (
-                                <Ul
-                                    id={listId}
-                                    role="listbox"
-                                    aria-label={label}
-                                    onScroll={onScroll}
-                                    listMaxHeight={listMaxHeight}
+                                <Root
+                                    view={view}
+                                    size={size}
+                                    labelPlacement={labelPlacement}
+                                    disabled={disabled}
+                                    readOnly={readOnly}
                                 >
-                                    {finalResults.map((suggestion, index) => (
-                                        <SuggestionItem
-                                            key={index}
-                                            item={suggestion}
-                                            onClick={handleItemClick}
-                                            id={`${listId}/${index}`}
-                                            focused={focused === index}
-                                        />
-                                    ))}
-
-                                    {renderListEnd && <InfiniteLoaderWrapper>{renderListEnd()}</InfiniteLoaderWrapper>}
-                                </Ul>
+                                    <Ul
+                                        id={listId}
+                                        role="listbox"
+                                        aria-label={label}
+                                        onScroll={onScroll}
+                                        listMaxHeight={listMaxHeight}
+                                    >
+                                        {finalResults.map((suggestion, index) => (
+                                            <SuggestionItem
+                                                key={index}
+                                                item={suggestion}
+                                                onClick={handleItemClick}
+                                                id={`${listId}/${index}`}
+                                                focused={focused === index}
+                                            />
+                                        ))}
+
+                                        {renderListEnd && (
+                                            <InfiniteLoaderWrapper>{renderListEnd()}</InfiniteLoaderWrapper>
+                                        )}
+                                    </Ul>
+                                </Root>
                             ))}
                     </StyledPopover>
 

diff --git a/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.types.ts b/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.types.ts
@@ -41,7 +41,10 @@ export type BaseProps = {
      * Компонент неактивен.
      */
     disabled?: boolean;
-
+    /**
+     * Портал для выпадающего списка. Принимает id контейнера или ref.
+     */
+    portal?: string | React.RefObject<HTMLElement>;
     /**
      * Значение инпута.
      */