Include swipe on drawer and tooltip components

Author: Kubit

src/components/drawer/drawerControlled.tsx

@@ -30,6 +30,11 @@ const DrawerControlledComponent = React.forwardRef(
     ref: React.ForwardedRef<HTMLDivElement> | undefined | null
   ): JSX.Element => {
     useDeviceHeight();
+
+    const handleScroll = (e: Event) => {
+      props.onContentScroll?.(e);
+    };
+
     const styles = useStylesV2<DrawerVariantStylesType, V>({
       styleName: STYLES_NAME.DRAWER,
       variantName: props.variant,
@@ -41,6 +46,7 @@ const DrawerControlledComponent = React.forwardRef(
     const { scrollableRef, shadowRef } = useScrollEffect({
       shadowStyles: stylesByDevice.titleContainer?.box_shadow,
       shadowVisible: SCROLL_DISTANCE,
+      scrollCallback: handleScroll,
     });
 
     const footerRef = useZoomEffect(FOOTER_EDIT_STYLES, MAX_ZOOM);
@@ -49,9 +55,9 @@ const DrawerControlledComponent = React.forwardRef(
       <DrawerStandAlone
         {...props}
         ref={ref}
+        contentRef={scrollableRef}
         device={device}
         footerRef={footerRef}
-        scrollableRef={scrollableRef}
         shadowRef={shadowRef}
         styles={stylesByDevice}
       />

src/components/drawer/drawerStandAlone.tsx

@@ -20,7 +20,6 @@ import { IDrawerStandAlone } from './types';
 const DrawerStandAloneComponent = (
   {
     blocked = false,
-    scrollableRef,
     shadowRef,
     footerRef,
     contentRef,
@@ -61,11 +60,7 @@ const DrawerStandAloneComponent = (
             />
           </DrawerNavigationStyled>
         )}
-        <DrawerTitleContentFooterContainerStyled
-          ref={contentRef}
-          blocked={blocked}
-          styles={props.styles}
-        >
+        <DrawerTitleContentFooterContainerStyled blocked={blocked} styles={props.styles}>
           <DrawerTitleStyled
             ref={shadowRef}
             as={Text as unknown as React.ElementType}
@@ -77,7 +72,7 @@ const DrawerStandAloneComponent = (
           >
             {props.title?.content}
           </DrawerTitleStyled>
-          <DrawerContentStyled ref={scrollableRef} styles={props.styles}>
+          <DrawerContentStyled ref={contentRef} styles={props.styles}>
             {props.children}
           </DrawerContentStyled>
           {props.footer?.content && props.styles.footer?.variant && (

src/components/drawer/drawerUnControlled.tsx

@@ -24,7 +24,7 @@ const DrawerUnControlledComponent = <V extends string | unknown>(
     closeIcon?.onClick?.(e);
   };
 
-  const handlePopoverCloseInterllay = () => {
+  const handlePopoverCloseInternally = () => {
     handleCloseDrawer();
     popover?.onCloseInternally?.();
   };
@@ -35,7 +35,7 @@ const DrawerUnControlledComponent = <V extends string | unknown>(
       ref={ref}
       closeIcon={{ ...closeIcon, onClick: handleCloseIconClick }}
       open={open}
-      popover={{ ...popover, onCloseInternally: handlePopoverCloseInterllay }}
+      popover={{ ...popover, onCloseInternally: handlePopoverCloseInternally }}
     />
   );
 };

src/components/drawer/stories/argtypes.ts

@@ -126,6 +126,16 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.MODIFIERS,
       },
     },
+    onContentScroll: {
+      description: 'Function to handle scroll event',
+      type: { name: 'function' },
+      table: {
+        type: {
+          summary: 'function',
+        },
+        category: CATEGORY_CONTROL.FUNCTIONS,
+      },
+    },
     dataTestId: {
       description: 'String used for testing',
       control: { type: 'text' },

src/components/drawer/stories/controlledArgtypes.ts

@@ -72,7 +72,14 @@ export const DrawerControlled: Story = {
     closeIcon: { icon: ICONS.ICON_CLOSE, altText: 'alt text icon', ['aria-label']: 'close icon' },
     level: DrawerLevelPositionTypes.FIRST_LEVEL,
     open: false,
-    children: <ReplaceContent />,
+    children: (
+      <>
+        <ReplaceContent />
+        <ReplaceContent />
+        <ReplaceContent />
+        <ReplaceContent />
+      </>
+    ),
     blocked: false,
     popover: {
       blockBack: true,