Merge pull request #847 from topcoder-platform/MP-305_modals-dropdowns

vas3a · web-flow · commit 2efe6a5fe8bb · 2023-07-28T18:39:21.000+03:00
MP-305 - use popper &amp; portals -&gt; dev
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
   "dependencies": {
     "@datadog/browser-logs": "^4.21.2",
     "@heroicons/react": "^1.0.6",
+    "@popperjs/core": "^2.11.8",
     "@sprig-technologies/sprig-browser": "^2.20.1",
     "@storybook/addon-actions": "^7.0.5",
     "@storybook/react": "^7.0.5",
@@ -83,6 +84,7 @@
     "react-helmet": "^6.1.0",
     "react-html-parser": "^2.0.2",
     "react-markdown": "8.0.6",
+    "react-popper": "^2.3.0",
     "react-redux": "^8.0.4",
     "react-redux-toastr": "^7.6.10",
     "react-responsive": "^9.0.0-beta.5",
diff --git a/src/apps/profiles/src/member-profile/languages/ModifyLanguagesModal/ModifyLanguagesModal.module.scss b/src/apps/profiles/src/member-profile/languages/ModifyLanguagesModal/ModifyLanguagesModal.module.scss
@@ -50,13 +50,3 @@
         }
     }
 }
-
-.langModal {
-    @include gtemd {
-        overflow: visible !important;
-    }
-}
-
-.langModalBody {
-    overflow: visible !important;
-}
diff --git a/src/apps/profiles/src/member-profile/local-info/ModifyLocationModal/ModifyLocationModal.module.scss b/src/apps/profiles/src/member-profile/local-info/ModifyLocationModal/ModifyLocationModal.module.scss
@@ -17,13 +17,3 @@
         margin-bottom: $sp-4;
     }
 }
-
-.localModal {
-    @include gtemd {
-        overflow: visible !important;
-    }
-}
-
-.localModalBody {
-    overflow: visible !important;
-}
diff --git a/src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.module.scss b/src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.module.scss
@@ -28,4 +28,4 @@
 
 .skillsModalBody {
     overflow: visible !important;
-}
+}
diff --git a/src/apps/profiles/src/member-profile/work-expirence/ModifyWorkExpirenceModal/ModifyWorkExpirenceModal.module.scss b/src/apps/profiles/src/member-profile/work-expirence/ModifyWorkExpirenceModal/ModifyWorkExpirenceModal.module.scss
@@ -28,6 +28,10 @@
                 align-items: center;
                 margin-left: $sp-15;
 
+                @include ltemd {
+                    margin-left: $sp-4;
+                }
+
                 :global(button) {
                     padding: $sp-2;
                     color: $turq-160;
@@ -83,4 +87,4 @@
     display: flex;
     justify-content: space-between;
     width: 100%;
-}
+}
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.module.scss b/src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.module.scss
@@ -1,6 +1,8 @@
 @import '@libs/ui/styles/includes';
 
-.container {
+:global(#react-date-portal) {
+    position: relative;
+    z-index: 10001;
     :global(.react-datepicker__header) {
         background-color: $tc-white;
         border-bottom: none;
@@ -30,34 +32,36 @@
         color: $tc-white;
         border-radius: 50%;
     }
+}
 
-    .headerWrap {
-        display: flex;
-        justify-content: space-between;
-        padding: $sp-2 0;
-        border-bottom: 2px solid $black-5;
+.headerWrap {
+    display: flex;
+    justify-content: space-between;
+    padding: $sp-2 0;
+    border-bottom: 2px solid $black-5;
 
-        button {
-            svg {
-                width: 27px;
-                height: 27px;
-            }
+    button {
+        svg {
+            width: 27px;
+            height: 27px;
         }
+    }
 
-        select {
-            border: none;
-            background-color: transparent;
-            margin: auto;
-            -webkit-appearance: menulist;
-            appearance: menulist;
+    select {
+        border: none;
+        background-color: transparent;
+        margin: auto;
+        -webkit-appearance: menulist;
+        appearance: menulist;
 
-            option:hover {
-                background-color: $turq-160;
-                color: $tc-white;
-            }
+        option:hover {
+            background-color: $turq-160;
+            color: $tc-white;
         }
     }
+}
 
+.container {
     input {
         border: none;
         pointer-events: none;
@@ -74,4 +78,4 @@
             text-transform: none;
         }
     }
-}
+}
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.tsx b/src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.tsx
@@ -130,6 +130,8 @@ const InputDatePicker: FC<InputDatePickerProps> = (props: InputDatePickerProps)
                 maxTime={props.maxTime}
                 showYearPicker={props.showYearPicker}
                 dateFormat={props.dateFormat}
+                popperPlacement='bottom'
+                portalId='react-date-portal'
             />
         </InputWrapper>
     )
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.module.scss b/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.module.scss
@@ -23,7 +23,7 @@
     left: 0;
     width: 100%;
     &:not(:empty) {
-        z-index: 9;
+        z-index: 1001;
     }
 }
 
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.tsx b/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.tsx
@@ -11,12 +11,15 @@ import {
     useRef,
     useState,
 } from 'react'
+import { usePopper } from 'react-popper'
 import classNames from 'classnames'
 
+import { beforeWrite } from '@popperjs/core/lib'
 import { useClickOutside } from '~/libs/shared/lib/hooks'
 
 import { IconOutline } from '../../../../svgs'
 import { InputWrapper } from '../input-wrapper'
+import { Portal } from '../../../../portal'
 
 import styles from './InputSelect.module.scss'
 
@@ -40,12 +43,33 @@ interface InputSelectProps {
     readonly value?: string
 }
 
+const sameWidthModifier = {
+    effect: ({ state }: any) => {
+        state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`
+    },
+    enabled: true,
+    fn: ({ state }: any) => {
+        state.styles.popper.width = `${state.rects.reference.width}px`
+        return state
+    },
+    name: 'sameWidth',
+    phase: beforeWrite,
+    requires: ['computeStyles'],
+}
+const modifiers = [sameWidthModifier]
+
 const InputSelect: FC<InputSelectProps> = (props: InputSelectProps) => {
     const triggerRef: MutableRefObject<any> = useRef(undefined)
+    const popperRef: MutableRefObject<any> = useRef(undefined)
     const buttonRef: MutableRefObject<HTMLButtonElement | null> = useRef(null)
     const [menuIsVisible, setMenuIsVisible]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
     const [isFocus, setIsFocus]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
 
+    const popper = usePopper(triggerRef.current?.firstChild, popperRef.current, {
+        modifiers,
+        strategy: 'absolute',
+    })
+
     const selectedOption: InputSelectOption | undefined = props.options.find(option => option.value === props.value)
 
     const label: (option: InputSelectOption) => ReactNode = (option?: InputSelectOption) => (
@@ -125,27 +149,34 @@ const InputSelect: FC<InputSelectProps> = (props: InputSelectProps) => {
                 </span>
             </button>
 
-            <div className={styles['menu-wrap']}>
-                {menuIsVisible && (
-                    <div className={styles['select-menu']}>
-                        {props.options.map(option => (
-                            <div
-                                className={
-                                    classNames(
-                                        styles['select-option'],
-                                        'body-main',
-                                        selectedOption === option && 'selected',
-                                    )
-                                }
-                                onClick={select(option)}
-                                key={option.value}
-                            >
-                                {label(option)}
-                            </div>
-                        ))}
-                    </div>
-                )}
-            </div>
+            <Portal>
+                <div
+                    className={styles['menu-wrap']}
+                    ref={popperRef}
+                    style={popper.styles.popper}
+                    {...popper.attributes.popper}
+                >
+                    {menuIsVisible && (
+                        <div className={styles['select-menu']}>
+                            {props.options.map(option => (
+                                <div
+                                    className={
+                                        classNames(
+                                            styles['select-option'],
+                                            'body-main',
+                                            selectedOption === option && 'selected',
+                                        )
+                                    }
+                                    onClick={select(option)}
+                                    key={option.value}
+                                >
+                                    {label(option)}
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </Portal>
 
         </InputWrapper>
     )
diff --git a/yarn.lock b/yarn.lock
@@ -2721,7 +2721,7 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
-"@popperjs/core@^2.9.2":
+"@popperjs/core@^2.11.8", "@popperjs/core@^2.9.2":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==

Original file line number	Diff line number	Diff line change
`@@ -50,13 +50,3 @@`
`50`	`50`	`}`
`51`	`51`	`}`
`52`	`52`	`}`
`53`		`-`
`54`		`-.langModal {`
`55`		`- @include gtemd {`
`56`		`- overflow: visible !important;`
`57`		`- }`
`58`		`-}`
`59`		`-`
`60`		`-.langModalBody {`
`61`		`- overflow: visible !important;`
`62`		`-}`
Original file line number	Diff line number	Diff line change
`@@ -17,13 +17,3 @@`
`17`	`17`	`margin-bottom: $sp-4;`
`18`	`18`	`}`
`19`	`19`	`}`
`20`		`-`
`21`		`-.localModal {`
`22`		`- @include gtemd {`
`23`		`- overflow: visible !important;`
`24`		`- }`
`25`		`-}`
`26`		`-`
`27`		`-.localModalBody {`
`28`		`- overflow: visible !important;`
`29`		`-}`
Original file line number	Diff line number	Diff line change
`@@ -130,6 +130,8 @@ const InputDatePicker: FC<InputDatePickerProps> = (props: InputDatePickerProps)`
`130`	`130`	`maxTime={props.maxTime}`
`131`	`131`	`showYearPicker={props.showYearPicker}`
`132`	`132`	`dateFormat={props.dateFormat}`
	`133`	`+ popperPlacement='bottom'`
	`134`	`+ portalId='react-date-portal'`
`133`	`135`	`/>`
`134`	`136`	`</InputWrapper>`
`135`	`137`	`)`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@`
`23`	`23`	`left: 0;`
`24`	`24`	`width: 100%;`
`25`	`25`	`&:not(:empty) {`
`26`		`- z-index: 9;`
	`26`	`+ z-index: 1001;`
`27`	`27`	`}`
`28`	`28`	`}`
`29`	`29`