@hyphen/hyphen-components 2.25.2 → 3.0.0

package/src/components/Drawer/Drawer.test.tsx

@@ -1,90 +1,160 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { Drawer, DrawerProps } from './Drawer';
-
-const renderDrawer = ({
-  isOpen,
-  title,
-  ariaLabel,
-  onDismiss,
-  closeButton,
-}: DrawerProps) => (
-  <Drawer
-    isOpen={isOpen}
-    title={title}
-    ariaLabel={ariaLabel}
-    onDismiss={onDismiss}
-    closeButton={closeButton}
-  />
-);
+import { fireEvent, render, screen } from '@testing-library/react';
+import {
+  Drawer,
+  DrawerTitle,
+  DrawerContent,
+  DrawerCloseButton,
+  DrawerHeader,
+  DrawerProps,
+  DrawerProvider,
+  DrawerTrigger,
+} from './Drawer';
+
+const renderDrawer = (props: Partial<DrawerProps> = {}) => {
+  const defaultProps: DrawerProps = {
+    isOpen: false,
+    ariaLabel: 'Test Drawer',
+    ...props,
+  };
+  return render(
+    <DrawerProvider>
+      <DrawerTrigger>Open drawer</DrawerTrigger>
+      <Drawer {...defaultProps}>
+        <DrawerHeader>
+          <DrawerTitle>Drawer Title</DrawerTitle>
+          <DrawerCloseButton onClick={defaultProps.onDismiss} />
+        </DrawerHeader>
+        <DrawerContent>Drawer Content</DrawerContent>
+      </Drawer>
+    </DrawerProvider>
+  );
+};
 
 describe('Drawer', () => {
   test('renders its children', () => {
-    const { getByText } = render(
-      renderDrawer({
-        ariaLabel: 'Right Drawer',
-        isOpen: true,
-        title: 'Right Drawer',
-        onDismiss: () => null,
-      })
-    );
-    expect(getByText('Right Drawer')).toBeInTheDocument();
+    renderDrawer();
+    fireEvent.click(screen.getByText('Open drawer'));
+
+    expect(screen.getByText('Drawer Title')).toBeInTheDocument();
   });
 
   test('it applies the aria label', () => {
-    const { getByLabelText } = render(
-      renderDrawer({
-        ariaLabel: 'Right Drawer',
-        isOpen: true,
-        title: 'Right Drawer',
-        onDismiss: () => null,
-      })
-    );
-    expect(getByLabelText('Right Drawer')).toBeInTheDocument();
+    renderDrawer();
+    fireEvent.click(screen.getByText('Open drawer'));
+    expect(screen.getByLabelText('Test Drawer')).toBeInTheDocument();
   });
 
-  test('it renders a close button and title', () => {
-    const { getByText, getByLabelText } = render(
-      renderDrawer({
-        ariaLabel: 'Right Drawer',
-        isOpen: true,
-        title: 'Right Drawer',
-        onDismiss: () => null,
-      })
+  test('it opens and closes based on isOpen prop', () => {
+    const { rerender } = renderDrawer();
+    expect(screen.queryByLabelText('Test Drawer')).toBe(null);
+
+    rerender(
+      <Drawer isOpen={true} ariaLabel="Test Drawer" onDismiss={() => null} />
     );
-    expect(getByLabelText('close')).toBeInTheDocument();
-    expect(getByText('Right Drawer')).toBeInTheDocument();
+    expect(screen.getByLabelText('Test Drawer')).toBeInTheDocument();
   });
 
-  test('it renders a close button without title', () => {
-    const { getByLabelText } = render(
-      renderDrawer({
-        ariaLabel: 'Right Drawer',
-        isOpen: true,
-        onDismiss: () => null,
-        closeButton: true,
-      })
-    );
-    expect(getByLabelText('close')).toBeInTheDocument();
+  // test('it calls onDismiss when close button is clicked', () => {
+  //   const mockedOnDismiss = jest.fn();
+  //   renderDrawer({
+  //     isOpen: true,
+  //     ariaLabel: 'Test Drawer',
+  //     onDismiss: mockedOnDismiss,
+  //   });
+
+  //   fireEvent.click(screen.getByLabelText('close'));
+  //   expect(mockedOnDismiss).toHaveBeenCalledTimes(1);
+  // });
+
+  test('it traps focus within the drawer', () => {
+    renderDrawer({ isOpen: true, ariaLabel: 'Test Drawer' });
+    fireEvent.click(screen.getByText('Open drawer'));
+
+    const closeButton = screen.getByLabelText('close');
+    closeButton.focus();
+    expect(closeButton).toHaveFocus();
   });
 
-  test('it open and closes based on isOpen prop', () => {
-    const { queryByLabelText, getByLabelText, rerender } = render(
-      renderDrawer({
-        ariaLabel: 'Right Drawer',
-        isOpen: false,
-      })
-    );
+  test('it allows scrolling when dangerouslyBypassScrollLock is true', () => {
+    renderDrawer({
+      isOpen: true,
 
-    expect(queryByLabelText('Right Drawer')).toBe(null);
+      dangerouslyBypassScrollLock: true,
+    });
+    fireEvent.click(screen.getByText('Open drawer'));
 
-    rerender(
-      renderDrawer({
-        ariaLabel: 'Right Drawer',
-        isOpen: true,
-      })
-    );
+    expect(document.body).not.toHaveStyle('overflow: hidden');
+  });
+
+  test('it does not trap focus when dangerouslyBypassFocusLock is true', () => {
+    renderDrawer({
+      isOpen: true,
+
+      dangerouslyBypassFocusLock: true,
+    });
+    fireEvent.click(screen.getByText('Open drawer'));
+
+    const closeButton = screen.getByLabelText('close');
+    closeButton.focus();
+    expect(closeButton).toHaveFocus();
+  });
+
+  test('it renders with custom width', () => {
+    renderDrawer({
+      isOpen: true,
+      width: '500px',
+    });
+    fireEvent.click(screen.getByText('Open drawer'));
+
+    expect(screen.getByRole('dialog')).toHaveStyle('--drawer-width: 500px');
+  });
+
+  describe('Uncontrolled Drawer', () => {
+    it('renders and toggles the drawer based on internal state', () => {
+      renderDrawer();
+
+      const toggleButton = screen.getByLabelText('toggle drawer');
+      fireEvent.click(toggleButton);
+
+      expect(screen.getByText('Drawer Title')).toBeInTheDocument();
+
+      fireEvent.click(screen.getByLabelText('close'));
+      expect(screen.queryByText('Uncontrolled Drawer')).toBe(null);
+    });
+  });
+
+  describe('Controlled Drawer', () => {
+    it('renders and toggles the drawer based on external state', () => {
+      const ControlledDrawer = () => {
+        const [isOpen, setIsOpen] = React.useState(false);
+        return (
+          <div>
+            <button onClick={() => setIsOpen(!isOpen)}>Toggle Drawer</button>
+            <Drawer
+              isOpen={isOpen}
+              ariaLabel="Controlled Drawer"
+              onDismiss={() => setIsOpen(false)}
+            >
+              <DrawerHeader>
+                <DrawerTitle>Controlled Drawer</DrawerTitle>
+                <DrawerCloseButton onClick={() => setIsOpen(false)} />
+              </DrawerHeader>
+              <DrawerContent>Drawer Content</DrawerContent>
+            </Drawer>
+          </div>
+        );
+      };
+
+      render(<ControlledDrawer />);
+
+      const toggleButton = screen.getByText('Toggle Drawer');
+      fireEvent.click(toggleButton);
+
+      expect(screen.getByText('Controlled Drawer')).toBeInTheDocument();
 
-    expect(getByLabelText('Right Drawer')).toBeInTheDocument();
+      fireEvent.click(screen.getByLabelText('close'));
+      expect(screen.queryByText('Controlled Drawer')).toBe(null);
+    });
   });
 });

package/src/components/Drawer/Drawer.tsx

@@ -1,24 +1,147 @@
 import React, {
   CSSProperties,
   RefObject,
+  createContext,
   forwardRef,
   useCallback,
+  useContext,
+  useMemo,
+  useState,
 } from 'react';
+import { Slot } from '@radix-ui/react-slot';
 import ReactModal from 'react-modal';
 import FocusLock from 'react-focus-lock';
 import { RemoveScroll } from 'react-remove-scroll';
 import classNames from 'classnames';
 import { DimensionSize, CssDimensionValue } from '../../types';
-import { Box } from '../Box/Box';
+import { Box, BoxProps } from '../Box/Box';
 import styles from './Drawer.module.scss';
 import { Button } from '../Button/Button';
 
+interface DrawerContextProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  toggleDrawer: () => void;
+}
+
+const DrawerContext = createContext<DrawerContextProps | null>(null);
+
+export function useDrawer() {
+  const context = useContext(DrawerContext);
+  if (!context) {
+    throw new Error('useDrawer must be used within a DrawerProvider.');
+  }
+  return context;
+}
+
+interface DrawerProviderProps extends React.ComponentProps<'div'> {
+  defaultIsOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+export const DrawerProvider = forwardRef<HTMLDivElement, DrawerProviderProps>(
+  (
+    {
+      defaultIsOpen = false,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [_open, _setOpen] = useState(openProp ?? defaultIsOpen);
+    const open = openProp ?? _open;
+
+    const setOpen = useCallback(
+      (value: boolean | ((prev: boolean) => boolean)) => {
+        const newOpen = typeof value === 'function' ? value(open) : value;
+        if (newOpen !== open) {
+          if (setOpenProp) {
+            setOpenProp(newOpen); // Controlled
+          } else {
+            _setOpen(newOpen); // Uncontrolled
+          }
+        }
+      },
+      [open, setOpenProp]
+    );
+
+    const toggleDrawer = useCallback(() => {
+      setOpen((prev) => !prev);
+    }, [setOpen]);
+
+    const contextValue = useMemo(
+      () => ({ open, setOpen, toggleDrawer }),
+      [open, setOpen, toggleDrawer]
+    );
+
+    return (
+      <DrawerContext.Provider value={contextValue}>
+        <div
+          className={classNames(
+            'drawer-container',
+            { 'drawer-open': open },
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      </DrawerContext.Provider>
+    );
+  }
+);
+
+DrawerProvider.displayName = 'DrawerProvider';
+
+const DrawerTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> & {
+    asChild?: boolean;
+  }
+>(({ asChild = false, onClick, ...triggerProps }, ref) => {
+  const context = useContext(DrawerContext);
+  const isStandalone = !context;
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onClick?.(event);
+
+    if (!isStandalone) {
+      // Use context to toggle the drawer
+      context?.toggleDrawer();
+    }
+  };
+
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      ref={ref}
+      data-drawer="trigger"
+      aria-haspopup="dialog"
+      aria-expanded={context?.open}
+      data-state={context?.open}
+      aria-label="toggle drawer"
+      {...triggerProps}
+      onClick={handleClick}
+    />
+  );
+});
+DrawerTrigger.displayName = 'SidebarTrigger';
+
 export type DrawerPlacementType = 'left' | 'right' | 'top' | 'bottom';
 export interface DrawerProps {
   /**
-   * If the drawer is open
+   * If the drawer is open (controlled mode)
+   */
+  isOpen?: boolean;
+  /**
+   * If the drawer starts open (uncontrolled mode)
    */
-  isOpen: boolean;
+  defaultIsOpen?: boolean;
   /**
    * Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
    */
@@ -41,11 +164,6 @@ export interface DrawerProps {
    * Additional class names to add to the drawer content.
    */
   className?: string;
-  /**
-   * Whether the drawer has a visible close button.
-   * If a title is defined, then a close button will be rendered
-   */
-  closeButton?: boolean;
   /**
    * If true, the drawer will close when the overlay is clicked
    */
@@ -87,21 +205,13 @@ export interface DrawerProps {
    *  the "Escape" key, clicks the close button icon, or clicks the overlay.
    */
   onDismiss?: (event?: React.SyntheticEvent) => void;
-  /**
-   * Title to be displayed at the top of the Drawer.
-   * A close button will be rendered automatically if this prop is defined.
-   */
-  title?: string;
   /**
    * The width of the Drawer when opened. Can be given a standard css value (px, rem, em, %),
    * or a [width token](/?path=/story/design-tokens-design-tokens--page#width)
    */
   width?: DimensionSize | CssDimensionValue;
 }
-export const Drawer: React.FC<DrawerProps> = forwardRef<
-  HTMLDivElement,
-  DrawerProps
->(
+const Drawer: React.FC<DrawerProps> = forwardRef<HTMLDivElement, DrawerProps>(
   (
     {
       ariaLabel = undefined,
@@ -109,21 +219,40 @@ export const Drawer: React.FC<DrawerProps> = forwardRef<
       allowPinchZoom = false,
       children = undefined,
       className = undefined,
-      closeButton = false,
       closeOnOverlayClick = true,
       containerRef = undefined,
       dangerouslyBypassFocusLock = false,
       dangerouslyBypassScrollLock = false,
       hideOverlay = false,
       initialFocusRef = undefined,
-      isOpen,
+      isOpen: controlledIsOpen,
+      defaultIsOpen = false,
       onDismiss = undefined,
       placement = 'right',
-      title = undefined,
       width = undefined,
     },
     ref
   ) => {
+    const context = useContext(DrawerContext);
+    const isStandalone = !context; // Determine if there's no provider
+
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultIsOpen);
+    const isOpen = isStandalone
+      ? controlledIsOpen ?? uncontrolledOpen // Use internal or prop-based state
+      : context.open; // Use context-provided state
+
+    const setOpen = isStandalone
+      ? setUncontrolledOpen // Update internal state
+      : context.setOpen; // Update context state
+
+    const handleDismiss = useCallback(
+      (event?: React.SyntheticEvent) => {
+        setOpen(false); // Update state (context or standalone)
+        onDismiss?.(event); // Trigger external callback
+      },
+      [setOpen, onDismiss]
+    );
+
     const activateFocusLock = useCallback(() => {
       setTimeout(() => {
         if (initialFocusRef && initialFocusRef.current) {
@@ -136,7 +265,7 @@ export const Drawer: React.FC<DrawerProps> = forwardRef<
 
     const dynamicStyle: CSSProperties = {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ['--w' as any]: dynamicWidth,
+      ['--drawer-width' as any]: dynamicWidth,
     };
 
     const overlayClassnames = classNames(styles.overlay, styles.drawer, {
@@ -151,60 +280,9 @@ export const Drawer: React.FC<DrawerProps> = forwardRef<
       styles[placement],
       {
         [styles['hide-overlay']]: hideOverlay,
-        'overflow-auto': !closeButton && !title,
-        className,
       }
     );
 
-    const renderHeader = () => {
-      if (closeButton && onDismiss && !title) {
-        return (
-          <Box alignItems="flex-end" justifyContent="center" padding="md lg">
-            <Button
-              variant="tertiary"
-              onClick={onDismiss}
-              aria-label="close"
-              type="button"
-              iconPrefix="remove"
-            />
-          </Box>
-        );
-      }
-      if (title) {
-        return (
-          <Box
-            direction="row"
-            justifyContent="space-between"
-            alignItems="center"
-            padding={{ base: '2xl', tablet: '4xl' }}
-          >
-            <Box className={styles.title} fontWeight="bold">
-              {title}
-            </Box>
-            {onDismiss && (
-              <Button
-                variant="tertiary"
-                onClick={onDismiss}
-                aria-label="close"
-                type="button"
-                iconPrefix="remove"
-              />
-            )}
-          </Box>
-        );
-      }
-      return null;
-    };
-
-    const content =
-      title || closeButton ? (
-        <Box flex="auto" overflow="auto">
-          {children}
-        </Box>
-      ) : (
-        children
-      );
-
     const parentElement = containerRef?.current
       ? (containerRef.current as HTMLElement)
       : document.body;
@@ -228,7 +306,7 @@ export const Drawer: React.FC<DrawerProps> = forwardRef<
               isOpen={isOpen}
               overlayClassName={overlayClassnames}
               className={contentClassnames}
-              onRequestClose={closeOnOverlayClick ? onDismiss : undefined}
+              onRequestClose={closeOnOverlayClick ? handleDismiss : undefined}
               ariaHideApp={false}
               style={{
                 content: dynamicStyle,
@@ -239,10 +317,11 @@ export const Drawer: React.FC<DrawerProps> = forwardRef<
               <Box
                 aria-label={ariaLabel}
                 aria-labelledby={ariaLabelledBy}
-                height="100%"
+                height="100"
+                data-testid="drawer-content"
+                className={className}
               >
-                {renderHeader()}
-                {content}
+                {children}
               </Box>
             </ReactModal>
           </Box>
@@ -251,3 +330,92 @@ export const Drawer: React.FC<DrawerProps> = forwardRef<
     );
   }
 );
+
+const DrawerHeader = React.forwardRef<HTMLDivElement, BoxProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        data-drawer="header"
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+        padding={{ base: '2xl 2xl 0 2xl', tablet: '3xl 3xl 0 3xl' }}
+        {...props}
+      />
+    );
+  }
+);
+DrawerHeader.displayName = 'DrawerHeader';
+
+const DrawerTitle = React.forwardRef<HTMLDivElement, BoxProps>(
+  ({ ...props }, ref) => {
+    return <Box ref={ref} data-drawer="title" fontWeight="bold" {...props} />;
+  }
+);
+
+const DrawerCloseButton = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button> & {
+    onClose?: () => void; // Fallback to onClose if provided
+  }
+>(({ className, onClick, onClose, ...props }, ref) => {
+  const context = useContext(DrawerContext);
+  const isStandalone = !context;
+
+  const handleClick = (
+    event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+  ) => {
+    onClick?.(event);
+
+    if (isStandalone) {
+      // Fallback to onClose if provided
+      onClose?.();
+    } else {
+      // Use context to toggle the drawer
+      context?.toggleDrawer();
+    }
+  };
+
+  return (
+    <Button
+      ref={ref}
+      variant="tertiary"
+      aria-label="close"
+      type="button"
+      iconPrefix="remove"
+      data-drawer="close"
+      className={classNames('m-left-auto', className)}
+      size="sm"
+      onClick={handleClick}
+      {...props}
+    />
+  );
+});
+DrawerCloseButton.displayName = 'DrawerCloseButton';
+
+const DrawerContent = React.forwardRef<HTMLDivElement, BoxProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        data-drawer="content"
+        flex="auto"
+        overflow="auto"
+        alignItems="flex-start"
+        padding={{ base: '2xl', tablet: '3xl' }}
+        gap="md"
+        {...props}
+      />
+    );
+  }
+);
+
+export {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+  DrawerCloseButton,
+};