fix(Select): popup width fit mode with identation (#873)

Co-authored-by: Yevhenii Chernovol <[email protected]>
gravity-ui · Aug 9, 2023 · 61a4c9a · 61a4c9a
1 parent 5d7c8b4
commit 61a4c9a
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 14 deletions.
diff --git a/src/components/Select/__stories__/Select.stories.tsx b/src/components/Select/__stories__/Select.stories.tsx
@@ -27,7 +27,7 @@ const SelectPopupWidthShowcaseTemplate: StoryFn<SelectProps> = (args) => (
 );
 export const Default = DefaultTemplate.bind({});
 export const Showcase = ShowcaseTemplate.bind({});
-export const PopupWidthShowcase = SelectPopupWidthShowcaseTemplate.bind({});
+export const PopupWidth = SelectPopupWidthShowcaseTemplate.bind({});
 
 Showcase.args = {
     view: 'normal',

diff --git a/src/components/Select/__stories__/SelectPopupWidthShowcase.tsx b/src/components/Select/__stories__/SelectPopupWidthShowcase.tsx
@@ -29,29 +29,32 @@ export const SelectPopupWidthShowcase = (args: any) => {
             <Select {...args} className="select-width-300" options={short} />
             <Select {...args} options={short} width={'max'} />
 
-            <h2>Modes outfit/fit</h2>
+            <h2>Modes default/fit</h2>
             <Flex gap={10}>
                 <div>
-                    Extra long values. OUTFIT !default (apply max-width: 90vw)
+                    Extra long values. DEFAULT (apply max-width: 90vw)
                     <div>
                         <Select {...args} className="select-width-300" options={extralong} />
                     </div>
                 </div>
                 <div>
-                    Short values. OUTFIT !default
+                    Short values. DEFAULT
                     <div>
                         <Select {...args} className="select-width-50" options={short} />
                     </div>
                 </div>
             </Flex>
             <div>
-                Extra long values. OUTFIT !default Fullscreen
+                Extra long values. DEFAULT Fullscreen
                 <div>
                     <Select {...args} width={'max'} options={extralong} />
                 </div>
             </div>
 
-            <Flex gap={10}>
+            <Flex justifyContent={'center'} style={{marginTop: '20px'}}>
+                Enclosed with 100px margin container
+            </Flex>
+            <Flex gap={10} style={{margin: '0 100px', backgroundColor: 'lightgray'}}>
                 <div>
                     Extra long values. FIT
                     <div>
@@ -87,7 +90,7 @@ export const SelectPopupWidthShowcase = (args: any) => {
 
             <Flex gap={10}>
                 <div>
-                    Extra long values. OUTFIT !default.
+                    Extra long values. DEFAULT.
                     <Text color="danger-heavy"> Not works for virtualized.</Text>
                     <div>
                         <Select
@@ -98,7 +101,7 @@ export const SelectPopupWidthShowcase = (args: any) => {
                     </div>
                 </div>
                 <div>
-                    Short values. OUTFIT !default. Virtualized (use default width: 100px)
+                    Short values. DEFAULT. Virtualized (use predefined width: 100px)
                     <div>
                         <Select {...args} className="select-width-50" options={shortVirtualized} />
                     </div>

diff --git a/src/components/Select/components/SelectPopup/modifiers.ts b/src/components/Select/components/SelectPopup/modifiers.ts
@@ -19,7 +19,7 @@ const getMinWidth = (referenceWidth: number, virtualized?: boolean) => {
 };
 
 const getPopupWidth = (
-    width: SelectPopupProps['width'] = 'outfit',
+    width: SelectPopupProps['width'],
     controlWidth: number,
     virtualized?: boolean,
 ) => {
@@ -28,7 +28,7 @@ const getPopupWidth = (
         popupWidth = width;
     } else if (width === 'fit') {
         popupWidth = adjustBorderWidth(controlWidth);
-    } else if (width === 'outfit') {
+    } else {
         popupWidth = getMinWidth(controlWidth, virtualized);
     }
 
@@ -38,7 +38,7 @@ const getPopupWidth = (
 export const getModifiers = (
     args: Pick<SelectPopupProps, 'width' | 'disablePortal' | 'virtualized'>,
 ) => {
-    const {width = 'outfit', disablePortal, virtualized} = args;
+    const {width, disablePortal, virtualized} = args;
 
     // set popper width styles according anchor rect
     const sameWidth: Modifier<'sameWidth', {}> = {
@@ -53,7 +53,7 @@ export const getModifiers = (
             }
 
             const popupWidth = getPopupWidth(width, state.rects.reference.width, virtualized);
-            if (width === 'outfit') {
+            if (typeof width !== 'number' && width !== 'fit') {
                 state.styles.popper.minWidth = popupWidth;
                 state.styles.popper.width = undefined;
             } else {
@@ -69,7 +69,26 @@ export const getModifiers = (
                 skip: typeof width !== 'number',
             };
         },
-        effect: ({state}) => {
+        effect: ({state, name}) => {
+            // All this code is workaround. Check https://popper.js.org/docs/v2/modifiers/community-modifiers/
+
+            // prevents styles applying after popup being opened (in case of multiple selection)
+            if (state.modifiersData[`${name}#persistent`]?.skip) {
+                return;
+            }
+            const popupWidth = getPopupWidth(
+                width,
+                (state.elements.reference as HTMLElement).offsetWidth,
+                virtualized,
+            );
+
+            if (typeof width !== 'number' && width !== 'fit') {
+                state.elements.popper.style.minWidth = popupWidth;
+            } else {
+                state.elements.popper.style.minWidth = popupWidth;
+                state.elements.popper.style.width = popupWidth;
+            }
+
             state.elements.popper.style.maxWidth = `max(90vw, ${
                 (state.elements.reference as HTMLElement).offsetWidth
             }px)`;

diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts
@@ -65,7 +65,7 @@ export type SelectProps<T = any> = QAProps &
         size?: SelectSize;
         pin?: InputControlPin;
         width?: 'auto' | 'max' | number;
-        popupWidth?: 'outfit' | 'fit' | number;
+        popupWidth?: 'fit' | number;
         virtualizationThreshold?: number;
         className?: string;
         controlClassName?: string;