feat: add scrollIntoView in popup component

affects: @medly-components/core, @medly-components/forms
medly · Jun 24, 2024 · c379cf8 · c379cf8
1 parent dac3283
commit c379cf8
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 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
@@ -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
@@ -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<PopoverPopupProps> = memo(
     forwardRef((props, ref) => {
-        const [isOpen] = useContext(PopoverContext),
+        const popupRef = useCombinedRefs<HTMLDivElement>(ref, useRef(null)),
+            [isOpen] = useContext(PopoverContext),
             stopPropagation = useCallback((e: React.MouseEvent) => e.stopPropagation(), []);
 
-        return isOpen ? <PopupStyled ref={ref} onClick={stopPropagation} placement={props.placement!} {...props} /> : null;
+        useEffect(() => {
+            isOpen && setTimeout(() => popupRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 100);
+        }, [isOpen]);
+
+        return isOpen ? <PopupStyled ref={popupRef} onClick={stopPropagation} placement={props.placement!} {...props} /> : 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
@@ -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
@@ -22,12 +22,19 @@ const getStyleForIcon = ({ theme, variant, disabled }: IconProps & WithThemeProp
     `;
 };
 
+const disableCursor = css`
+    &&& {
+        cursor: not-allowed;
+    }
+`;
+
 export const IconWrapper = styled(InjectClassName)<IconProps>`
     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)<IconProps>`

diff --git 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
@@ -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
@@ -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
@@ -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 {