Add drag functionality

Kubit · Kubit · commit 10024b398fd1 · 2024-11-05T09:48:04.000+01:00
diff --git a/src/components/oliveMenu/__test__/oliveMenu.test.tsx b/src/components/oliveMenu/__test__/oliveMenu.test.tsx
@@ -6,14 +6,15 @@ import { axe } from 'jest-axe';
 import * as mediaHooks from '@/hooks/useMediaDevice/useMediaDevice';
 import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
 import { windowMatchMedia } from '@/tests/windowMatchMedia';
-import { DeviceBreakpointsType } from '@/types';
+import { DeviceBreakpointsType, ROLES } from '@/types';
 
 import { OliveMenu } from '../oliveMenu';
 import { IOliveMenu, OliveMenuListOptions } from '../types';
 
 const mockSections: OliveMenuListOptions[] = [
   {
     title: { content: 'list 1' },
+    id: 'section1',
     options: [
       {
         label: 'option 1',
@@ -33,6 +34,7 @@ const mockSections: OliveMenuListOptions[] = [
   },
   {
     title: { content: 'list 2' },
+    id: 'section2',
     options: [
       {
         label: 'option 1',
@@ -54,6 +56,9 @@ const mockSections: OliveMenuListOptions[] = [
 
 const mockProps: IOliveMenu = {
   actionBottomSheetStructure: {
+    title: {
+      content: 'title',
+    },
     closeIcon: {
       icon: 'UNICORN',
       altText: 'Close Menu',
@@ -66,6 +71,7 @@ const mockProps: IOliveMenu = {
     },
     variant: 'PRIMARY',
     ['aria-label']: 'Open menu',
+    size: 'MEDIUM',
   },
   variant: 'DEFAULT',
   screenReaderText: 'Menu openned',
@@ -146,9 +152,8 @@ describe('OliveMenu component', () => {
     const openButton = screen.getAllByText('Options');
     fireEvent.click(openButton[0]);
 
-    // Element in the popover
-    const popover = container.querySelector('[data-popover]');
-    expect(popover?.tagName).toBe('DIALOG');
+    const popover = screen.getByRole(ROLES.DIALOG);
+    expect(popover).toBeInTheDocument();
 
     const results = await axe(container);
     expect(container).toHTMLValidate({
@@ -278,4 +283,33 @@ describe('OliveMenu component', () => {
 
     expect(popoverElement).not.toBeInTheDocument();
   });
+
+  // desktop will close because of the blur
+  it('Should close the menu when clicking outside if mobile/tablet', async () => {
+    const handleOpenClose = jest.fn();
+    window.matchMedia = windowMatchMedia('onlyMobile');
+    jest.useFakeTimers();
+    jest.spyOn(mediaHooks, 'useMediaDevice').mockImplementation(() => DeviceBreakpointsType.MOBILE);
+    renderProvider(
+      <div>
+        <button>external</button>
+        <OliveMenu {...mockProps} onOpenClose={handleOpenClose} />
+      </div>
+    );
+
+    // Open the popover
+    const openButton = screen.getAllByText('Options');
+    act(() => {
+      fireEvent.click(openButton[0]);
+    });
+
+    // Close popover
+    const externalElement = screen.getByText('external');
+    await act(() => {
+      fireEvent.mouseUp(externalElement);
+      jest.runAllTimers();
+    });
+
+    expect(handleOpenClose).toHaveBeenCalledWith(false);
+  });
 });
diff --git a/src/components/oliveMenu/__test__/oliveMenu.utils.test.ts b/src/components/oliveMenu/__test__/oliveMenu.utils.test.ts
@@ -45,11 +45,59 @@ const menuSection: OliveMenuListOptions[] = [
   },
 ];
 
+const menuSectionWithoutId: OliveMenuListOptions[] = [
+  {
+    title: { content: 'label1' },
+    options: [
+      {
+        label: 'option 1',
+        value: 1,
+      },
+      {
+        label: 'option 2',
+
+        value: 2,
+      },
+      {
+        label: 'option 3',
+        url: 'https://www.google.com/',
+        ['aria-label']: 'link to google 1',
+        value: 37,
+      },
+    ],
+  },
+  {
+    title: { content: 'label2' },
+    options: [
+      {
+        label: 'option 1',
+        value: 3,
+      },
+      {
+        label: 'option 2',
+        value: 56,
+      },
+      {
+        label: 'option 3',
+        url: 'https://www.google.com/',
+        ['aria-label']: 'link to google 1',
+        value: 6,
+      },
+    ],
+  },
+];
+
 describe('Olive Menu utils', () => {
   test('Should get ariaControls', async () => {
     expect(getAriaControls(menuSection, 'ariaControls')).toStrictEqual([
       'ariaControls0number1',
       'ariaControls1number2',
     ]);
   });
+  test('Should get ariaControls without id', async () => {
+    expect(getAriaControls(menuSectionWithoutId, 'ariaControls')).toStrictEqual([
+      'ariaControls0',
+      'ariaControls1',
+    ]);
+  });
 });
diff --git a/src/components/oliveMenu/oliveMenu.tsx b/src/components/oliveMenu/oliveMenu.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 
-import { useEscPressedV2, useMediaDevice } from '@/hooks';
+import { useEscPressedV2, useMediaDevice, useSwipeDown } from '@/hooks';
 import { useStyles } from '@/hooks/useStyles/useStyles';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
+import { DeviceBreakpointsType } from '@/types';
 
 import { OliveMenuStandAlone } from './oliveMenuStandAlone';
 import { IOliveMenu, IOliveMenuStandAlone, OliveMenuGlobalStylesType } from './types';
@@ -19,6 +20,7 @@ const OliveMenuComponent = React.forwardRef(
     const device = useMediaDevice();
 
     const innerRef = React.useRef<HTMLDivElement>(null);
+    const actionBottomSheetRef = React.useRef<HTMLDivElement | null>(null);
     React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement, []);
 
     const handlePressScape = React.useCallback(() => {
@@ -28,8 +30,13 @@ const OliveMenuComponent = React.forwardRef(
       }
       setOpen(false);
       onOpenClose?.(false);
+      // Focus the trigger button since its not handled automatically by the popover
+      // and the focus in inside the component that is going to be closed
+      const trigger = innerRef.current?.querySelector('button');
+      trigger?.focus();
     }, [open]);
 
+    // It is handled internally by the component to allow close when the focus is on the button
     useEscPressedV2({ ref: innerRef, onEscPress: handlePressScape });
 
     const handleTriggerClick = e => {
@@ -44,25 +51,57 @@ const OliveMenuComponent = React.forwardRef(
       actionBottomSheetStructure?.closeIcon?.onClick?.(e);
     };
 
+    const handleCloseInternally = () => {
+      setOpen(false);
+      onOpenClose?.(false);
+      props.popover?.onCloseInternally?.();
+    };
+
     const handleBlur: React.FocusEventHandler<HTMLDivElement> = e => {
-      // Do nothing if the new focus is inside the component or already closed
-      if (e.currentTarget.contains(e.relatedTarget) || !open) {
+      // Do nothing if:
+      // * Is device with popover (mobile or tablet)
+      // * the new focus is inside the component
+      // * it is already closed
+      if (
+        [DeviceBreakpointsType.MOBILE, DeviceBreakpointsType.TABLET].includes(device) ||
+        e.currentTarget.contains(e.relatedTarget) ||
+        !open
+      ) {
         return;
       }
       setOpen(false);
       onOpenClose?.(false, e);
     };
 
+    const { setPopoverRef, setDragIconRef } = useSwipeDown(
+      props.popover?.animationOptions,
+      handleCloseInternally
+    );
+
+    const setInnerRef = React.useCallback(node => {
+      actionBottomSheetRef.current = node;
+      const dragIcon = actionBottomSheetRef.current?.querySelector('[data-drag-icon]');
+      if (dragIcon instanceof HTMLElement) {
+        setDragIconRef(dragIcon);
+      }
+    }, []);
+
     return (
       <OliveMenuStandAlone
         {...props}
         ref={innerRef}
         actionBottomSheetStructure={{
           ...actionBottomSheetStructure,
+          forwardedRef: setInnerRef,
           closeIcon: { ...actionBottomSheetStructure?.closeIcon, onClick: handleCloseIconClick },
         }}
         device={device}
         open={open}
+        popover={{
+          ...props.popover,
+          forwardedRef: setPopoverRef,
+          onCloseInternally: handleCloseInternally,
+        }}
         styles={styles}
         trigger={trigger && { ...trigger, onClick: handleTriggerClick }}
         onBlur={handleBlur}
diff --git a/src/components/oliveMenu/oliveMenuStandAlone.tsx b/src/components/oliveMenu/oliveMenuStandAlone.tsx
@@ -7,7 +7,7 @@ import { PopoverControlled as Popover, PopoverComponentType } from '@/components
 import { ScreenReaderOnly } from '@/components/screenReaderOnly';
 import { TextComponentType } from '@/components/text/types';
 import { useId } from '@/hooks';
-import { AriaLiveOptionType, DeviceBreakpointsType } from '@/types';
+import { AriaLiveOptionType, DeviceBreakpointsType, ROLES } from '@/types';
 
 import { ButtonContainer, ListboxStyled, OliveMenuStyled } from './oliveMenu.styled';
 import { IOliveMenuStandAlone } from './types';
@@ -62,9 +62,8 @@ const OliveMenuStandAloneComponent = (
       <Popover
         aria-labelledby={popoverAsModal ? titleId : undefined}
         aria-modal={popoverAsModal ? props.open : undefined}
-        // It is handled internally by the onBlur function of the container
-        clickOverlayClose={false}
-        component={popoverAsModal ? PopoverComponentType.DIALOG : PopoverComponentType.DIV}
+        clickOverlayClose={true}
+        component={PopoverComponentType.DIV}
         dataTestId={`${props.dataTestId}Popover`}
         extraAlignGap={props.styles.buttonContainer?.[props.device]?.margin_bottom}
         focusFirstDescendantAutomatically={popoverAsModal}
@@ -73,11 +72,14 @@ const OliveMenuStandAloneComponent = (
         open={props.open}
         // It is handled internally by the controlled component to allow close when the focus is on the button
         pressEscapeClose={false}
+        preventCloseOnClickElements={[buttonRef.current]}
+        role={popoverAsModal ? ROLES.DIALOG : undefined}
         trapFocusInsideModal={popoverAsModal}
         variant={props.styles.popoverVariant}
         {...props.popover}
       >
         <ActionBottomSheetControlledStructure
+          ref={actionBottomSheet.forwardedRef}
           dataTestId={`${props.dataTestId}ActionButtonSheet`}
           title={{
             component: TextComponentType.H5,
diff --git a/src/components/oliveMenu/stories/oliveMenu.stories.tsx b/src/components/oliveMenu/stories/oliveMenu.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { ICONS } from '@/assets';
 import { STYLES_NAME } from '@/constants';
 import { themesObject, variantsObject } from '@/designSystem/themesObject';
 
@@ -80,6 +81,7 @@ const commonArgs: IOliveMenu = {
   screenReaderText: 'textReaderOpen',
   actionBottomSheetStructure: {
     hasHeader: false,
+    dragIcon: { icon: ICONS.ICON_DRAG, ['aria-label']: 'drag icon' },
   },
 };
 
diff --git a/src/components/oliveMenu/types/oliveMenu.ts b/src/components/oliveMenu/types/oliveMenu.ts
@@ -15,9 +15,10 @@ export type OliveMenuTriggerType = Omit<IButton, 'children' | 'size'> & {
 
 export type OliveMenuActionBottomSheetStructure = Omit<
   IActionBottomSheetControlledStructure,
-  'children' | 'variant'
+  'children' | 'variant' | 'dragIconRef'
 > & {
   variant?: string;
+  forwardedRef?: (node: HTMLDivElement) => void;
 };
 
 export type OliveMenuListOptions = Omit<
