diff --git a/package.json b/package.json index 67e8e70cf..6e48c45c2 100644 --- 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 index 8e5739643..709986627 100644 --- 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; -} \ No newline at end of file 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 index 172c925ea..23e43acbd 100644 --- 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; -} \ No newline at end of file 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 index 37d2fe777..d07c19e93 100644 --- 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; -} \ No newline at end of file +} 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 index c210934ca..ce8fdd434 100644 --- 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%; -} \ No newline at end of file +} 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 index 4bc15b134..865d3f483 100644 --- 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; } } -} \ No newline at end of file +} 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 index ffa3311c6..256a9a338 100644 --- 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 = (props: InputDatePickerProps) maxTime={props.maxTime} showYearPicker={props.showYearPicker} dateFormat={props.dateFormat} + popperPlacement='bottom' + portalId='react-date-portal' /> ) 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 index aa2ab320f..6b1c0a78e 100644 --- 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 index 36d6d03be..2b6668519 100644 --- 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 = (props: InputSelectProps) => { const triggerRef: MutableRefObject = useRef(undefined) + const popperRef: MutableRefObject = useRef(undefined) const buttonRef: MutableRefObject = useRef(null) const [menuIsVisible, setMenuIsVisible]: [boolean, Dispatch>] = useState(false) const [isFocus, setIsFocus]: [boolean, Dispatch>] = 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 = (props: InputSelectProps) => { -
- {menuIsVisible && ( -
- {props.options.map(option => ( -
- {label(option)} -
- ))} -
- )} -
+ +
+ {menuIsVisible && ( +
+ {props.options.map(option => ( +
+ {label(option)} +
+ ))} +
+ )} +
+ ) diff --git a/yarn.lock b/yarn.lock index 8ad64c794..8cbf61148 100644 --- 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==