feat(Select): add popupPlacement prop (#1195)

gravity-ui · Dec 12, 2023 · ba0e1a1 · ba0e1a1
1 parent bcfe5b7
commit ba0e1a1
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 41 deletions.
diff --git a/src/components/Select/README.md b/src/components/Select/README.md
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -63,6 +63,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
         filterPlaceholder,
         width,
         popupWidth,
+        popupPlacement,
         error,
         virtualizationThreshold = DEFAULT_VIRTUALIZATION_THRESHOLD,
         view = 'normal',
@@ -270,6 +271,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
                 virtualized={virtualized}
                 mobile={mobile}
                 id={`select-popup-${selectId}`}
+                placement={popupPlacement}
             >
                 {filterable && (
                     <SelectFilter

diff --git a/src/components/Select/__stories__/SelectShowcase.scss b/src/components/Select/__stories__/SelectShowcase.scss
@@ -50,6 +50,12 @@ $blockSelectClear: '.#{variables.$ns-new}select-clear';
         }
     }
 
+    &__user-control-placement {
+        display: inline-flex;
+
+        margin: 0 100px;
+    }
+
     &__user-clear-icon {
         margin-left: 6px;
     }

diff --git a/src/components/Select/__stories__/SelectShowcase.tsx b/src/components/Select/__stories__/SelectShowcase.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {TrashBin} from '@gravity-ui/icons';
+import {Plus, TrashBin} from '@gravity-ui/icons';
 import range from 'lodash/range';
 
 import {Select} from '..';
@@ -23,6 +23,7 @@ import {
     EXAMPLE_GROUP_JSON_OPTIONS,
     EXAMPLE_JSON_OPTIONS,
     EXAMPLE_USER_CONTROL,
+    EXAMPLE_USER_CONTROL_WITH_PLACEMENT,
     EXAMPLE_USER_OPTIONS,
 } from './constants';
 
@@ -295,6 +296,35 @@ export const SelectShowcase = (props: SelectProps) => {
                 <Select.Option value="val3" content="\" />
                 <Select.Option value="val4" content="Value4" />
             </ExampleItem>
+            <ExampleItem
+                title="Select with user control and custom placement"
+                code={[EXAMPLE_USER_CONTROL_WITH_PLACEMENT]}
+                selectProps={{
+                    ...props,
+                    className: b('user-control-placement'),
+                    popupPlacement: ['bottom'],
+                    renderControl: ({onClick, onKeyDown, ref}) => {
+                        return (
+                            <Button
+                                ref={ref}
+                                view="action"
+                                onClick={onClick}
+                                extraProps={{
+                                    onKeyDown,
+                                }}
+                            >
+                                <Icon data={Plus} />
+                            </Button>
+                        );
+                    },
+                }}
+            >
+                <Select.Option value="val1" content="Value1" />
+                <Select.Option value="val2" content="Value2" />
+                <Select.Option value="val3" content="Value3" />
+                <Select.Option value="val4" content="Value4" />
+                <Select.Option value="val5" content="Some long value" />
+            </ExampleItem>
             <ExampleItem
                 title="Select with virtualized list"
                 selectProps={{

diff --git a/src/components/Select/__stories__/constants.ts b/src/components/Select/__stories__/constants.ts
@@ -170,6 +170,35 @@ export const EXAMPLE_USER_CONTROL = `const [value, setValue] = React.useState<st
 </Select>
 `;
 
+export const EXAMPLE_USER_CONTROL_WITH_PLACEMENT = `const [value, setValue] = React.useState<string[]>([]);
+
+<Select
+    value={value}
+    popupPlacement={['bottom']}
+    renderControl={({onClick, onKeyDown, ref}) => {
+        return (
+            <Button
+                ref={ref}
+                view="action"
+                onClick={onClick}
+                extraProps={{
+                    onKeyDown,
+                }}
+            >
+                <Icon data={Plus} />
+            </Button>
+        );
+    }}
+    onUpdate={(nextValue) => setValue(nextValue)}
+>
+    <Select.Option value="val1" content="Value1" />
+    <Select.Option value="val2" content="Value2" />
+    <Select.Option value="val3" content="Value3" />
+    <Select.Option value="val4" content="Value4" />
+    <Select.Option value="val5" content="Some long value" />
+</Select>
+`;
+
 export const EXAMPLE_CUSTOM_RENDERER_WITH_DISABLED_ITEM = `import {Tooltip} from '@gravity-ui/uikit';
 
 const [value, setValue] = React.useState<string[]>([]);

diff --git a/src/components/Select/components/SelectPopup/SelectPopup.tsx b/src/components/Select/components/SelectPopup/SelectPopup.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import type {PopperPlacement} from '../../../../hooks/private';
 import {Popup} from '../../../Popup';
 import {Sheet} from '../../../Sheet';
 import {blockNew} from '../../../utils/cn';
@@ -12,12 +13,15 @@ import './SelectPopup.scss';
 
 const b = blockNew('select-popup');
 
+const DEFAULT_PLACEMENT: PopperPlacement = ['bottom-start', 'bottom-end', 'top-start', 'top-end'];
+
 export const SelectPopup = React.forwardRef<HTMLDivElement, SelectPopupProps>(
     (
         {
             handleClose,
             width,
             open,
+            placement = DEFAULT_PLACEMENT,
             controlRef,
             children,
             className,
@@ -42,7 +46,7 @@ export const SelectPopup = React.forwardRef<HTMLDivElement, SelectPopupProps>(
                 contentClassName={b(null, className)}
                 qa={SelectQa.POPUP}
                 anchorRef={ref as React.RefObject<HTMLDivElement>}
-                placement={['bottom-start', 'bottom-end', 'top-start', 'top-end']}
+                placement={placement}
                 offset={[BORDER_WIDTH, BORDER_WIDTH]}
                 open={open}
                 onClose={handleClose}

diff --git a/src/components/Select/components/SelectPopup/types.ts b/src/components/Select/components/SelectPopup/types.ts
@@ -1,12 +1,14 @@
 import type React from 'react';
 
+import type {PopupPlacement} from '../../../Popup';
 import type {SelectProps} from '../../types';
 
 export type SelectPopupProps = {
     mobile: boolean;
     handleClose: () => void;
     width?: SelectProps['popupWidth'];
     open?: boolean;
+    placement?: PopupPlacement;
     controlRef?: React.RefObject<HTMLElement>;
     children?: React.ReactNode;
     className?: string;

diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts
@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import type {PopperPlacement} from '../../hooks/private';
 import type {UseOpenProps} from '../../hooks/useSelect/types';
 import type {InputControlPin, InputControlSize, InputControlView} from '../controls';
 import type {ControlGroupOption, ControlGroupProps, QAProps} from '../types';
@@ -74,6 +75,7 @@ export type SelectProps<T = any> = QAProps &
         className?: string;
         controlClassName?: string;
         popupClassName?: string;
+        popupPlacement?: PopperPlacement;
         label?: string;
         placeholder?: React.ReactNode;
         filterPlaceholder?: string;