From c379cf8c1c104723c50e6904abea1e9c90614be0 Mon Sep 17 00:00:00 2001 From: Mukul Bansal Date: Mon, 24 Jun 2024 20:12:01 +0530 Subject: [PATCH] feat: add scrollIntoView in popup component affects: @medly-components/core, @medly-components/forms --- .../__snapshots__/MultiSelect.test.tsx.snap | 4 ++++ .../src/components/Popover/Popup/Popup.tsx | 15 ++++++++---- .../__snapshots__/SingleSelect.test.tsx.snap | 12 ++++++++++ .../TextField/Styled/Icon.styled.tsx | 7 ++++++ .../__snapshots__/TextField.test.tsx.snap | 24 +++++++++++++++++++ .../TimePicker/TimePicker.styled.tsx | 1 + .../__snapshots__/TimePicker.test.tsx.snap | 1 + .../Form/__snapshots__/Form.test.tsx.snap | 2 ++ 8 files changed, 61 insertions(+), 5 deletions(-) diff --git a/packages/core/src/components/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap b/packages/core/src/components/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap index cd8e5d444..85d299465 100644 --- a/packages/core/src/components/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap +++ b/packages/core/src/components/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap @@ -44,6 +44,10 @@ exports[`MultiSelect component should render correctly with all the props given fill: #b0bcc8; } +.c6.c6.c6 { + cursor: not-allowed; +} + .c10 { top: 50%; left: 0; diff --git a/packages/core/src/components/Popover/Popup/Popup.tsx b/packages/core/src/components/Popover/Popup/Popup.tsx index caa039541..826bdb24d 100644 --- a/packages/core/src/components/Popover/Popup/Popup.tsx +++ b/packages/core/src/components/Popover/Popup/Popup.tsx @@ -1,16 +1,21 @@ -import { WithStyle } from '@medly-components/utils'; -import { forwardRef, memo, useCallback, useContext } from 'react'; +import { WithStyle, useCombinedRefs } from '@medly-components/utils'; +import type { FC } from 'react'; +import { forwardRef, memo, useCallback, useContext, useEffect, useRef } from 'react'; import { PopoverContext } from '../Popover.context'; import { PopupStyled } from './styled/Popup.styled'; import { PopoverPopupProps } from './types'; -import type { FC } from 'react'; const Component: FC = memo( forwardRef((props, ref) => { - const [isOpen] = useContext(PopoverContext), + const popupRef = useCombinedRefs(ref, useRef(null)), + [isOpen] = useContext(PopoverContext), stopPropagation = useCallback((e: React.MouseEvent) => e.stopPropagation(), []); - return isOpen ? : null; + useEffect(() => { + isOpen && setTimeout(() => popupRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 100); + }, [isOpen]); + + return isOpen ? : null; }) ); Component.displayName = 'Popup'; diff --git a/packages/core/src/components/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap b/packages/core/src/components/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap index da25ee92f..f5c9e5758 100644 --- a/packages/core/src/components/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap +++ b/packages/core/src/components/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap @@ -1536,6 +1536,10 @@ exports[`SingleSelect component with filled variant should render disabled state fill: #b0bcc8; } +.c10.c10.c10 { + cursor: not-allowed; +} + .c7 { top: 50%; left: 0; @@ -4923,6 +4927,10 @@ exports[`SingleSelect component with fusion variant should render disabled state fill: #b0bcc8; } +.c10.c10.c10 { + cursor: not-allowed; +} + .c7 { top: 50%; left: 0; @@ -7047,6 +7055,10 @@ exports[`SingleSelect component with outlined variant should render disabled sta fill: #b0bcc8; } +.c10.c10.c10 { + cursor: not-allowed; +} + .c7 { top: 50%; left: 0; diff --git a/packages/core/src/components/TextField/Styled/Icon.styled.tsx b/packages/core/src/components/TextField/Styled/Icon.styled.tsx index 31dbd2145..44c4b154a 100644 --- a/packages/core/src/components/TextField/Styled/Icon.styled.tsx +++ b/packages/core/src/components/TextField/Styled/Icon.styled.tsx @@ -22,12 +22,19 @@ const getStyleForIcon = ({ theme, variant, disabled }: IconProps & WithThemeProp `; }; +const disableCursor = css` + &&& { + cursor: not-allowed; + } +`; + export const IconWrapper = styled(InjectClassName)` pointer-events: none; ${props => getStyleForIcon(props, 'default')}; ${props => props.isActive && getStyleForIcon(props, 'active')}; ${props => props.isErrorPresent && getStyleForIcon(props, 'error')}; ${props => props.disabled && getStyleForIcon(props, 'disabled')}; + ${props => props.disabled && disableCursor}; `; export const Prefix = styled(IconWrapper)` diff --git a/packages/core/src/components/TextField/__snapshots__/TextField.test.tsx.snap b/packages/core/src/components/TextField/__snapshots__/TextField.test.tsx.snap index 5cbe4a519..3864a7ce8 100644 --- a/packages/core/src/components/TextField/__snapshots__/TextField.test.tsx.snap +++ b/packages/core/src/components/TextField/__snapshots__/TextField.test.tsx.snap @@ -5795,6 +5795,10 @@ exports[`TextField with filled variant should render properly with custom border fill: #b0bcc8; } +.c7.c7.c7 { + cursor: not-allowed; +} + .c5 { top: 50%; left: 0; @@ -6114,6 +6118,10 @@ exports[`TextField with filled variant should render properly with custom disabl fill: #b0bcc8; } +.c7.c7.c7 { + cursor: not-allowed; +} + .c5 { top: 50%; left: 0; @@ -10121,6 +10129,10 @@ exports[`TextField with fusion variant should render properly with custom border fill: #b0bcc8; } +.c7.c7.c7 { + cursor: not-allowed; +} + .c5 { top: 50%; left: 0; @@ -10477,6 +10489,10 @@ exports[`TextField with fusion variant should render properly with custom disabl fill: #b0bcc8; } +.c7.c7.c7 { + cursor: not-allowed; +} + .c5 { top: 50%; left: 0; @@ -14499,6 +14515,10 @@ exports[`TextField with outlined variant should render properly with custom bord fill: #b0bcc8; } +.c7.c7.c7 { + cursor: not-allowed; +} + .c5 { top: 50%; left: 0; @@ -14835,6 +14855,10 @@ exports[`TextField with outlined variant should render properly with custom disa fill: #b0bcc8; } +.c7.c7.c7 { + cursor: not-allowed; +} + .c5 { top: 50%; left: 0; diff --git a/packages/core/src/components/TimePicker/TimePicker.styled.tsx b/packages/core/src/components/TimePicker/TimePicker.styled.tsx index bc3f8d828..e5910dadf 100644 --- a/packages/core/src/components/TimePicker/TimePicker.styled.tsx +++ b/packages/core/src/components/TimePicker/TimePicker.styled.tsx @@ -18,4 +18,5 @@ export const TimePickerWrapper = styled(Popover)<{ fullWidth?: boolean; minWidth export const TimeIcon = styled(AccessTimeIcon).attrs({ title: 'time-icon' })` cursor: pointer; + pointer-events: unset; `; diff --git a/packages/core/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap b/packages/core/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap index 6779388e0..8493533bd 100644 --- a/packages/core/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap +++ b/packages/core/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap @@ -345,6 +345,7 @@ exports[`TimePicker should render properly 1`] = ` .c13 { cursor: pointer; + pointer-events: unset; } .c23 { diff --git a/packages/forms/src/components/Form/__snapshots__/Form.test.tsx.snap b/packages/forms/src/components/Form/__snapshots__/Form.test.tsx.snap index 4a9880df2..61f959448 100644 --- a/packages/forms/src/components/Form/__snapshots__/Form.test.tsx.snap +++ b/packages/forms/src/components/Form/__snapshots__/Form.test.tsx.snap @@ -1523,6 +1523,7 @@ exports[`Form should render properly with initial state 1`] = ` .c49 { cursor: pointer; + pointer-events: unset; } .c69 { @@ -3827,6 +3828,7 @@ exports[`Form should render properly without initial state 1`] = ` .c49 { cursor: pointer; + pointer-events: unset; } .c68 {