feat: export ueseScrollState hook from utils package

affects: @medly-components/core, @medly-components/utils

packages/core/src/components/Drawer/Content/Content.tsx

@@ -1,9 +1,8 @@
-import { WithStyle } from '@medly-components/utils';
+import { useScrollState, WithStyle } from '@medly-components/utils';
+import type { FC } from 'react';
 import { memo, useContext, useRef } from 'react';
-import { useScrollState } from '../../Modal/useScrollState';
 import { DrawerContext } from '../Drawer.context';
 import { ContentStyled } from './Content.styled';
-import type { FC } from 'react';
 
 const Component: FC = memo(props => {
     const contentRef = useRef<HTMLDivElement>(null),

packages/core/src/components/Drawer/Drawer.tsx

@@ -1,7 +1,6 @@
-import { useKeyPress, WithStyle } from '@medly-components/utils';
+import { scrollStateReducer, useKeyPress, WithStyle } from '@medly-components/utils';
 import type { FC, MouseEvent } from 'react';
 import { forwardRef, memo, useCallback, useEffect, useReducer, useState } from 'react';
-import { reducer } from '../Modal/scrollStateReducer';
 import Content from './Content';
 import { DrawerContext } from './Drawer.context';
 import { DrawerBackground, DrawerStyled } from './Drawer.styled';
@@ -13,7 +12,7 @@ const Component: FC<DrawerProps> = memo(
     forwardRef(({ id, onClose, open, width, children, withOverlay, position, shouldCloseOnOutsideClick, ...props }, ref) => {
         const isEscPressed = useKeyPress('Escape'),
             [shouldRender, setRenderState] = useState(open),
-            [scrollState, dispatch] = useReducer(reducer, { scrolledToTop: true, scrolledToBottom: false, scrollPosition: 0 });
+            [scrollState, dispatch] = useReducer(scrollStateReducer, { scrolledToTop: true, scrolledToBottom: false, scrollPosition: 0 });
 
         const handleBackgroundClick = useCallback(
                 (event: MouseEvent<HTMLDivElement>) =>

packages/core/src/components/Drawer/types.ts

@@ -1,6 +1,6 @@
+import type { ScrollActionTypes } from '@medly-components/utils';
 import { HTMLProps, WithStyle } from '@medly-components/utils';
 import type { Dispatch, FC } from 'react';
-import { ScrollActionTypes } from '../Modal/scrollStateReducer/types';
 import { DrawerFooterProps } from './Footer/types';
 
 export interface DrawerProps extends HTMLProps<HTMLDivElement> {

packages/core/src/components/Modal/Content/Content.tsx

@@ -1,8 +1,7 @@
-import { WithStyle } from '@medly-components/utils';
+import { useScrollState, WithStyle } from '@medly-components/utils';
 import type { FC } from 'react';
 import { memo, useContext, useRef } from 'react';
 import { ModalContext } from '../Modal.context';
-import { useScrollState } from '../useScrollState';
 import * as Styled from './Content.styled';
 
 const Component: FC = memo(props => {

packages/core/src/components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import { useCombinedRefs, useKeyPress, useWindowSize, WithStyle } from '@medly-components/utils';
+import { scrollStateReducer, useCombinedRefs, useKeyPress, useScrollState, useWindowSize, WithStyle } from '@medly-components/utils';
 import { FC, forwardRef, memo, MouseEvent, useCallback, useEffect, useLayoutEffect, useReducer, useRef, useState } from 'react';
 import Actions from './Actions';
 import CloseIcon from './CloseIcon';
@@ -8,9 +8,7 @@ import { ModalContext } from './Modal.context';
 import { InnerContainerStyled, ModalBackgroundStyled } from './Modal.styled';
 import ModalManager from './ModalManager';
 import Popup from './Popup';
-import { reducer } from './scrollStateReducer/scrollStateReducer';
 import { ModalProps, ModalStaticProps } from './types';
-import { useScrollState } from './useScrollState';
 
 const manager = new ModalManager();
 
@@ -33,7 +31,7 @@ const Component: FC<ModalProps> = memo(
             innerContainerRef = useRef<HTMLDivElement>(null),
             [headerHeight, setHeaderHeight] = useState(0),
             [activeElement, setActiveElement] = useState<HTMLElement>(),
-            [scrollState, dispatch] = useReducer(reducer, { scrolledToTop: true, scrolledToBottom: false, scrollPosition: 0 }),
+            [scrollState, dispatch] = useReducer(scrollStateReducer, { scrolledToTop: true, scrolledToBottom: false, scrollPosition: 0 }),
             [shouldRender, setShouldRender] = useState(open),
             { width: windowWidth } = useWindowSize(),
             isSmallScreen = windowWidth < 768;

packages/core/src/components/Modal/types.ts

@@ -1,8 +1,8 @@
+import type { ScrollActionTypes } from '@medly-components/utils';
 import { HTMLProps, WithStyle } from '@medly-components/utils';
-import type { Dispatch, FC, RefObject } from 'react';
+import type { Dispatch, FC } from 'react';
 import { ModalActionUserProps } from './Actions/types';
 import { ModalPopupProps } from './Popup/types';
-import { ScrollActionTypes } from './scrollStateReducer/types';
 
 export interface ModalProps extends HTMLProps<HTMLDivElement> {
     /** Shows modal only when this prop is true */
@@ -42,12 +42,6 @@ export interface InnerContainerProps {
     overflowVisible?: boolean;
 }
 
-export interface UseScrollStateProps {
-    scrollState: ScrollState;
-    ref: RefObject<HTMLDivElement>;
-    dispatch: Dispatch<ScrollActionTypes>;
-}
-
 export interface ModalContextType {
     headerHeight: number;
     setHeaderHeight: (height: number) => void;

packages/utils/src/hooks/index.ts

@@ -5,7 +5,8 @@ export * from './useKeyPress';
 export * from './useMediaQuery';
 export * from './useOuterClickNotifier';
 export * from './useRunAfterUpdate';
-export * from './useSWRAxios';
+export * from './useScrollState';
 export * from './useStorage';
+export * from './useSWRAxios';
 export * from './useUpdateEffect';
 export * from './useWindowSize';

packages/utils/src/hooks/useScrollState/index.ts

@@ -0,0 +1,3 @@
+export * from './scrollStateReducer';
+export * from './types';
+export * from './useScrollState';

packages/core/src/components/Modal/scrollStateReducer/scrollStateReducer.tsx → packages/utils/src/hooks/useScrollState/scrollStateReducer.tsx

@@ -1,6 +1,6 @@
 import { ScrollActionTypes } from './types';
 
-export const reducer = (
+export const scrollStateReducer = (
     state: { scrolledToTop: boolean; scrolledToBottom: boolean; scrollPosition: number },
     action: ScrollActionTypes
 ) => {

packages/core/src/components/Modal/scrollStateReducer/types.ts → packages/utils/src/hooks/useScrollState/types.ts

@@ -1,3 +1,11 @@
+import type { Dispatch, RefObject } from 'react';
+
+export interface ScrollState {
+    scrolledToTop: boolean;
+    scrolledToBottom: boolean;
+    scrollPosition: number;
+}
+
 interface ScrolledToTopAction {
     type: 'scrolledToTop';
     value: boolean;
@@ -14,3 +22,9 @@ interface ScrollPositionAction {
 }
 
 export type ScrollActionTypes = ScrolledToTopAction | ScrolledToBottomAction | ScrollPositionAction;
+
+export interface UseScrollStateProps {
+    scrollState: ScrollState;
+    ref: RefObject<HTMLDivElement>;
+    dispatch: Dispatch<ScrollActionTypes>;
+}

packages/core/src/components/Modal/useScrollState.ts → packages/utils/src/hooks/useScrollState/useScrollState.ts

@@ -1,6 +1,6 @@
 import type { UIEvent } from 'react';
 import { useEffect } from 'react';
-import { UseScrollStateProps } from './types';
+import type { UseScrollStateProps } from './types';
 
 export const useScrollState = ({ ref, scrollState, dispatch }: UseScrollStateProps): ((e: React.UIEvent<HTMLDivElement>) => void) => {
     useEffect(() => {