Improve actionBottomSheet including tab draggable

Author: Kubit

src/components/actionBottomSheet/__tests__/actionBottomSheet.test.tsx

@@ -35,6 +35,23 @@ describe('ActionBottomSheet component', () => {
     expect(results).toHaveNoViolations();
   });
 
+  it('Should render ActionBottomSheet component but closed', async () => {
+    const { container } = renderProvider(
+      <ActionBottomSheet variant={'DEFAULT'}>Hello</ActionBottomSheet>
+    );
+
+    const popover = screen.queryByText('Hello');
+    expect(popover).not.toBeInTheDocument();
+
+    const results = await axe(container);
+    expect(container).toHTMLValidate({
+      rules: {
+        'no-inline-style': 'off',
+      },
+    });
+    expect(results).toHaveNoViolations();
+  });
+
   it('When no title is used, an aria-dialog-name should be provided', async () => {
     const { container } = renderProvider(
       <ActionBottomSheet

src/components/actionBottomSheet/actionBottomSheet.styled.ts

@@ -64,3 +64,7 @@ export const ActionBottomSheetContentStyled = styled.div<IActionBottomSheetStyle
     }
   `}
 `;
+
+export const DraggableIcon = styled.div<ActionBottomSheetStylesTypes>`
+  ${props => getStyles(props.styles.dragIconContainer)}
+`;

src/components/actionBottomSheet/actionBottomSheetControlled.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { PopoverControlled as Popover, PopoverComponentType } from '@/components/popover';
 import { STYLES_NAME } from '@/constants';
-import { useDeviceHeight, useId, useMediaDevice, useScrollEffect } from '@/hooks';
+import { useDeviceHeight, useId, useMediaDevice, useScrollEffect, useSwipeDown } from '@/hooks';
 import { useStyles } from '@/hooks/useStyles/useStyles';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 import { DeviceBreakpointsType, ROLES } from '@/types';
@@ -85,20 +85,39 @@ const ActionBottomSheetControlledComponent = React.forwardRef(
     ref: React.ForwardedRef<HTMLDivElement> | undefined | null
   ): JSX.Element => {
     const uniqueTitleId = useId('actionSheet-title');
-    const titleId = (title?.id ?? title?.content) ? uniqueTitleId : undefined;
+    const titleId = title?.id ?? title?.content ? uniqueTitleId : undefined;
     const styles = useStyles<ActionBottomSheetVariantStylesType>(
       STYLES_NAME.ACTION_BOTTOM_SHEET,
       props.variant,
       props.ctv
     );
 
+    const innerRef = React.useRef<HTMLDivElement | null>(null);
+    React.useImperativeHandle(ref, () => {
+      return innerRef.current as HTMLDivElement;
+    }, []);
+
+    const { setPopoverRef, setDragIconRef } = useSwipeDown(
+      popover?.animationOptions,
+      popover?.onCloseInternally
+    );
+
+    const setInnerRef = React.useCallback(node => {
+      innerRef.current = node;
+      const dragIcon = innerRef.current?.querySelector('[data-drag-icon]');
+      if (dragIcon instanceof HTMLElement) {
+        setDragIconRef(dragIcon);
+      }
+    }, []);
+
     return (
       <Popover
         aria-labelledby={titleId}
         aria-modal={true}
         clickOverlayClose={!blocked}
         component={PopoverComponentType.DIV}
         dataTestId={`${props.dataTestId}Popover`}
+        forwardedRef={setPopoverRef}
         hasBackDrop={true}
         open={open}
         role={ROLES.DIALOG}
@@ -108,7 +127,7 @@ const ActionBottomSheetControlledComponent = React.forwardRef(
       >
         <ActionBottomSheetControlledStructure
           {...props}
-          ref={ref}
+          ref={setInnerRef}
           title={{ ...title, id: titleId }}
         />
       </Popover>

src/components/actionBottomSheet/actionBottomSheetStandAlone.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { ElementOrIcon } from '@/components/elementOrIcon';
 import { Text } from '@/components/text/text';
 import { TextComponentType } from '@/components/text/types/component';
+import { DeviceBreakpointsType } from '@/types';
 
 import { Link } from '../link';
 import {
@@ -14,6 +15,7 @@ import {
   ActionBottomSheetIconSyled,
   ActionBottomSheetStyled,
   ActionBottomSheetTitleSyled,
+  DraggableIcon,
 } from './actionBottomSheet.styled';
 import { IActionBottomSheetStandAlone } from './types';
 
@@ -34,13 +36,22 @@ const ActionBottomSheetStandAloneComponent = (
     scrollableRef(actionBottomRef.current);
   }, []);
 
+  const isMobileOrTablet = [DeviceBreakpointsType.MOBILE, DeviceBreakpointsType.TABLET].includes(
+    props.device
+  );
+
   return (
     <ActionBottomSheetStyled
       ref={actionBottomRef}
       $height={props.height}
       data-testid={`${props.dataTestId}Container`}
       styles={props.styles.container}
     >
+      {props.dragIcon && isMobileOrTablet && (
+        <DraggableIcon ref={props.dragIconRef} data-drag-icon styles={props.styles}>
+          <ElementOrIcon {...props.dragIcon} />
+        </DraggableIcon>
+      )}
       {hasHeader && (
         <>
           <ActionBottomSheetControlStyled ref={shadowRef} styles={props.styles.controlContainer}>

src/components/actionBottomSheet/stories/argtypes.ts

@@ -133,6 +133,17 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.MODIFIERS,
       },
     },
+    dragIcon: {
+      description: 'Add drag icon to swipe down gesture',
+      type: { name: 'object' },
+      control: { type: 'object' },
+      table: {
+        type: {
+          summary: 'IElementOrIcon',
+        },
+        category: CATEGORY_CONTROL.CONTENT,
+      },
+    },
     dataTestId: {
       description: 'String used for testing',
       control: { type: 'text' },

src/components/actionBottomSheet/types/actionBottomSheet.ts

@@ -29,6 +29,8 @@ export interface IActionBottomSheetStandAlone {
   device: DeviceBreakpointsType;
   headerContent?: React.ReactNode;
   height?: string;
+  dragIcon?: IElementOrIcon;
+  dragIconRef?: (node: HTMLDivElement) => void;
   /* to useScrollEffect */
   scrollableRef: (node) => void;
   shadowRef: (node) => void;
@@ -58,7 +60,7 @@ export interface IActionBottomSheetControlledStructure<
  * @extends {IActionBottomSheetControlledStructure<V>}
  */
 export interface IActionBottomSheetControlled<V = undefined extends string ? unknown : string>
-  extends IActionBottomSheetControlledStructure<V> {
+  extends Omit<IActionBottomSheetControlledStructure<V>, 'dragIconRef'> {
   open: boolean;
   popover?: ActionBottomPopoverType;
 }
@@ -69,5 +71,7 @@ export interface IActionBottomSheetControlled<V = undefined extends string ? unk
  * @interface ActionBottomSheetPropsStylesType
  * @template V
  */
-export type ActionBottomSheetUnControlledType<V = undefined extends string ? unknown : string> =
-  IActionBottomSheetControlled<V>;
+export interface ActionBottomSheetUnControlledType<V = undefined extends string ? unknown : string>
+  extends Omit<IActionBottomSheetControlled<V>, 'open'> {
+  open?: boolean;
+}

src/components/actionBottomSheet/types/actionBottomSheetTheme.ts

@@ -19,6 +19,7 @@ export type ActionBottomSheetVariantStylesType = {
   headerContent?: CommonStyleType;
   content?: CommonStyleType;
   popoverVariant?: string;
+  dragIconContainer?: CommonStyleType;
 };
 
 /**