@hyphen/hyphen-components 5.8.0 → 6.0.0

package/src/components/Popover/Popover.test.tsx

@@ -1,70 +1,102 @@
 import React from 'react';
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
-import { Placement } from '@popperjs/core';
-import { Popover } from './Popover';
+import { render, screen, waitFor } from '@testing-library/react';
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverPortal,
+} from './Popover';
+
+// Helper to render a controlled Popover
+type ControlledPopoverProps = {
+  isOpen?: boolean;
+  onClickOutside?: (event: Event) => void;
+  placement?: string;
+  withPortal?: boolean;
+  portalTarget?: HTMLElement;
+  children: React.ReactNode;
+  contentProps?: Record<string, any>;
+  [key: string]: any;
+};
+
+function ControlledPopover({
+  isOpen = true,
+  onClickOutside,
+  placement = 'right',
+  withPortal = false,
+  portalTarget,
+  children,
+  contentProps = {},
+  ...rest
+}: ControlledPopoverProps) {
+  return (
+    <Popover open={isOpen} {...rest}>
+      <PopoverTrigger asChild>
+        <button>trigger</button>
+      </PopoverTrigger>
+      {withPortal ? (
+        <PopoverPortal container={portalTarget}>
+          <PopoverContent
+            side={
+              placement.split('-')[0] as 'right' | 'top' | 'bottom' | 'left'
+            }
+            align={
+              (placement.split('-')[1] as
+                | 'center'
+                | 'end'
+                | 'start'
+                | undefined) || 'center'
+            }
+            {...contentProps}
+            onInteractOutside={onClickOutside}
+          >
+            {children}
+          </PopoverContent>
+        </PopoverPortal>
+      ) : (
+        <PopoverContent
+          side={placement.split('-')[0] as 'right' | 'top' | 'bottom' | 'left'}
+          align={
+            (placement.split('-')[1] as
+              | 'center'
+              | 'end'
+              | 'start'
+              | undefined) || 'center'
+          }
+          {...contentProps}
+          onInteractOutside={onClickOutside}
+        >
+          {children}
+        </PopoverContent>
+      )}
+    </Popover>
+  );
+}
 
 describe('Popover', () => {
   describe('Default', () => {
     it('Renders a popover with default props', async () => {
-      // NOTE: popperJS is throwing a warning due to missing act, but it is unclear how to fix these.
-      // https://github.com/popperjs/react-popper/issues/368
       render(
-        <Popover isOpen content={<>hello</>}>
-          <p>trigger</p>
-        </Popover>
+        <ControlledPopover>
+          <span>hello</span>
+        </ControlledPopover>
       );
-
       const popoverContent = screen.getByText('hello');
-      const popoverContainer = screen.getByRole('dialog');
       const trigger = screen.getByText('trigger');
       expect(popoverContent).toBeInTheDocument();
       expect(trigger).toBeInTheDocument();
-      expect(trigger).toHaveAttribute('role', 'button');
-      expect(popoverContainer).toBeInTheDocument();
-      expect(popoverContainer).toHaveAttribute('role', 'dialog');
-      expect(popoverContainer).toHaveAttribute('aria-hidden', 'false');
-      expect(popoverContainer).toHaveClass('background-color-primary');
-      expect(popoverContainer).toHaveClass('p-sm');
-      await waitFor(() =>
-        expect(popoverContainer).toHaveAttribute(
-          'data-popper-placement',
-          'right'
-        )
-      );
-    });
-  });
-
-  describe('Callbacks', () => {
-    it('Fires a callback when a user clicks outside the popover', () => {
-      const mockedOnClickOutside = jest.fn();
-      const { container } = render(
-        <Popover
-          isOpen
-          content={<>hello</>}
-          onClickOutside={mockedOnClickOutside}
-        >
-          <p>trigger</p>
-        </Popover>
-      );
-
-      const popover = screen.getByText('hello');
-      const trigger = screen.getByText('trigger');
-      expect(popover).toBeInTheDocument();
-      fireEvent.click(popover);
-      fireEvent.click(trigger);
-      fireEvent.click(container);
-      fireEvent.keyUp(container, { key: 'Escape' });
-      expect(mockedOnClickOutside).toBeCalledTimes(2);
+      expect(trigger).toHaveAttribute('type', 'button');
+      // Radix PopoverContent does not have role="dialog" by default
+      expect(popoverContent.parentElement).toHaveClass('PopoverContent');
     });
   });
 
   describe('Placement', () => {
-    // We do not test auto placements since those compute out to one of the below after detection.
-    const positions: Placement[] = [
-      'top',
-      'bottom',
-      'right',
-      'left',
+    const positions = [
+      'top-center',
+      'bottom-center',
+      'right-center',
+      'left-center',
       'top-start',
       'top-end',
       'bottom-start',
@@ -74,22 +106,22 @@ describe('Popover', () => {
       'left-start',
       'left-end',
     ];
-
     positions.forEach((position) => {
-      it(`Places the tooltop correctly in position: ${position} when prop is passed`, async () => {
+      it(`Places the popover correctly in position: ${position} when prop is passed`, async () => {
         render(
-          <Popover isOpen content={<>hello</>} placement={position}>
-            <p>trigger</p>
-          </Popover>
-        );
-
-        const popoverContainer = screen.getByRole('dialog');
-        await waitFor(() =>
-          expect(popoverContainer).toHaveAttribute(
-            'data-popper-placement',
-            position
-          )
+          <ControlledPopover placement={position}>
+            <span>hello</span>
+          </ControlledPopover>
         );
+        const popoverContent = screen.getByText('hello').parentElement;
+        // Radix sets data-side and data-align
+        const [side, align] = position.split('-');
+        await waitFor(() => {
+          expect(popoverContent).toHaveAttribute('data-side', side);
+          if (align) {
+            expect(popoverContent).toHaveAttribute('data-align', align);
+          }
+        });
       });
     });
   });
@@ -97,31 +129,17 @@ describe('Popover', () => {
   describe('Portal', () => {
     it('Renders the Popover in the body if withPortal is true.', async () => {
       render(
-        <>
-          <div id="nest1">
-            <div id="nest2">
-              <Popover
-                isOpen
-                content={
-                  <button type="button" id="inside-button">
-                    hello
-                  </button>
-                }
-                withPortal
-                portalTarget={document.body}
-              >
-                <p>trigger</p>
-              </Popover>
-            </div>
-          </div>
-        </>
+        <ControlledPopover withPortal portalTarget={document.body}>
+          <button type="button" id="inside-button">
+            hello
+          </button>
+        </ControlledPopover>
       );
-
       await waitFor(() => {
-        expect(document.body.children[1]).toHaveAttribute(
-          'data-popper-placement',
-          'right'
-        );
+        // Should be in the body
+        expect(
+          document.body.querySelector('#inside-button')
+        ).toBeInTheDocument();
       });
     });
   });

package/src/components/Popover/Popover.tsx

@@ -1,277 +1,35 @@
-import React, {
-  cloneElement,
-  FC,
-  isValidElement,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-  RefObject,
-} from 'react';
-import { createPortal } from 'react-dom';
-import { usePopper } from 'react-popper';
-import { Placement } from '@popperjs/core';
-import FocusTrap from 'focus-trap-react';
+import React, { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 import classNames from 'classnames';
-import { BackgroundColor } from '../../types';
 import styles from './Popover.module.scss';
-import { Box, BoxProps } from '../Box/Box';
-import { mergeRefs } from '../../lib';
 
-export type PopoverProps = {
-  /**
-   * Custom class to apply to the alert.
-   */
-  className?: string;
-  /**
-   * The trigger element
-   */
-  children: ReactNode;
-  /**
-   * Content of the tooltip. Can be any JSX node.
-   */
-  content: ReactNode;
-  /**
-   * The Popover is a controlled input, and will be shown when `isOpen === true`.
-   */
-  isOpen: boolean;
-  /**
-   * Color of the arrow background. NOTE: That the arrowColor will default to the
-   * `background` color applied in the `contentContainerProps`, but can be overwritten
-   * by passing a specific value here.
-   */
-  arrowColor?: BackgroundColor;
-  /**
-   * An object matching the interface of the `Box` component props.
-   * This is useful for styling the tooltip container using all the options available in
-   * a `Box`.
-   */
-  contentContainerProps?: BoxProps;
-  /**
-   * Whether the arrow is shown.
-   */
-  hasArrow?: boolean;
-  /**
-   * How far (in pixels) the Popover element will be from the target.
-   * Note that this is from the edge of the target to the edge of the popover content,
-   * and it DOES NOT include the arrow element.
-   */
-  offsetFromTarget?: number;
-  /**
-   * Callback function to handle when a user clicks outside the Popover
-   */
-  onClickOutside?: (event: MouseEvent | KeyboardEvent) => void;
-  /**
-   * The placement (position) of the Popover relative to its trigger.
-   */
-  placement?: Placement;
-  /**
-   * Whether you want to trap focus in the Popover element when it is open.
-   * Read more about focus traps:
-   * [Here](https://allyjs.io/tutorials/accessible-dialog.html#trapping-focus-inside-the-dialog)
-   */
-  trapFocus?: boolean;
-  /**
-   * Additional props to be spread to rendered element
-   */
-  [x: string]: any; // eslint-disable-line
-} & (
-  | {
-      /**
-       * Whether the element should be rendered outside its DOM structure
-       * for reasons of placement. Use this when the element is being cut-off or
-       * re-positioned due to lack of space in the parent container.
-       * NOTE: `portalTarget` is required if this is true.
-       */
-      withPortal: true;
-      /**
-       * The target element where the Popover will be portaled to, when `withPortal === true`.
-       * `document.body` will work for many cases, but you can also use a custom container for this.
-       * Only required if withPortal is true.
-       */
-      portalTarget: HTMLElement;
-    }
-  | {
-      withPortal?: false;
-      portalTarget?: never;
-    }
-);
+const Popover = PopoverPrimitive.Root;
 
-const contentContainerDefaults: BoxProps = {
-  background: 'primary',
-  padding: 'sm',
-  radius: 'sm',
-  shadow: 'md',
-};
-
-export const Popover: FC<PopoverProps> = ({
-  className,
-  isOpen,
-  children,
-  content,
-  arrowColor = undefined,
-  contentContainerProps = { ...contentContainerDefaults },
-  hasArrow = true,
-  offsetFromTarget = 12,
-  onClickOutside = undefined,
-  placement = 'right',
-  withPortal = false,
-  portalTarget,
-  trapFocus = false,
-  ...restProps
-}) => {
-  const triggerRef = useRef<HTMLElement>(null);
-  const popperRef = useRef<HTMLElement>(null);
-  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      const popover = popperRef.current;
-      const trigger = triggerRef.current;
-
-      if (!popover || !trigger) {
-        return;
-      }
-
-      if (event.target === trigger || trigger?.contains(event.target as Node)) {
-        return;
-      }
-
-      if (
-        event.target !== popover &&
-        !popover?.contains(event.target as Node)
-      ) {
-        if (onClickOutside) onClickOutside(event);
-      }
-    };
-
-    const handleKeyUp = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        if (onClickOutside) onClickOutside(event);
-      }
-    };
-
-    if (onClickOutside) {
-      document.body.addEventListener('click', handleClickOutside, false);
-      document.body.addEventListener('keyup', handleKeyUp);
-    }
-
-    return () => {
-      if (onClickOutside) {
-        document.body.removeEventListener('click', handleClickOutside, false);
-        document.body.removeEventListener('keyup', handleKeyUp);
-      }
-    };
-  }, [onClickOutside]);
-
-  const { styles: popperStyles, attributes } = usePopper(
-    triggerRef.current,
-    popperRef.current,
-    {
-      placement,
-      modifiers: [
-        {
-          name: 'arrow',
-          options: { element: arrowElement },
-        },
-        {
-          name: 'offset',
-          options: {
-            offset: [0, offsetFromTarget],
-          },
-        },
-      ],
-    }
-  );
-
-  const containerBoxProps = {
-    ...contentContainerDefaults,
-    ...contentContainerProps,
-  };
-
-  const computedArrowColor = arrowColor || containerBoxProps.background;
-
-  const arrowClasses = classNames(
-    styles['popover-arrow'],
-    `background-color-${computedArrowColor}`,
-    {
-      'display-none': !hasArrow,
-    }
-  );
-
-  const renderPopperContent = () => {
-    const renderPopperBox = () => (
-      <Box
-        ref={popperRef}
-        className={classNames(styles.popover, className)}
-        style={popperStyles.popper}
-        role="dialog"
-        aria-label="Popover"
-        aria-hidden={!isOpen}
-        {...containerBoxProps}
-        {...attributes.popper}
-        {...restProps}
-      >
-        <div
-          ref={setArrowElement}
-          style={popperStyles.arrow}
-          className={arrowClasses}
-          data-popper-arrow
-        />
-        {content}
-      </Box>
-    );
-
-    return trapFocus ? (
-      <FocusTrap
-        active={isOpen}
-        focusTrapOptions={{
-          clickOutsideDeactivates: true,
-        }}
-      >
-        {renderPopperBox()}
-      </FocusTrap>
-    ) : (
-      renderPopperBox()
-    );
-  };
-
-  const childrenWithRef = React.Children.map(children, (child) => {
-    const childProps = {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ref: triggerRef as RefObject<HTMLElement> | ((instance: any) => void),
-      role: 'button',
-      'aria-expanded': isOpen,
-      'aria-haspopup': true,
-    };
-
-    // Merge local ref with any ref passed originally to child component.
-    // We have to cast with `as` so TS compiler doesn't complain since ReactNode/ReactChild types don't
-    // explicitly declare ref as a property in the object.
-    if ((child as ReactNode & { ref: any })?.ref) {
-      // eslint-disable-line @typescript-eslint/no-explicit-any
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      childProps.ref = mergeRefs([
-        (child as ReactNode & { ref: any })?.ref,
-        childProps.ref,
-      ]);
-    }
+const PopoverTrigger = PopoverPrimitive.Trigger;
 
-    if (isValidElement(child)) {
-      return cloneElement(child, childProps);
-    }
+const PopoverAnchor = PopoverPrimitive.Anchor;
 
-    return child;
-  });
+const PopoverPortal = PopoverPrimitive.Portal;
 
+const PopoverContent = forwardRef<
+  ElementRef<typeof PopoverPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => {
   return (
-    <>
-      {childrenWithRef}
-      {isOpen &&
-        // portalTarget should always be defined if withPortal is true, but better safe than sorry here!
-        (withPortal && portalTarget
-          ? createPortal(renderPopperContent(), portalTarget)
-          : renderPopperContent())}
-    </>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={classNames(styles.PopoverContent, className)}
+      {...props}
+    />
   );
+});
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverAnchor,
+  PopoverPortal,
+  PopoverContent,
 };

package/src/hooks/useOpenClose/useOpenClose.mdx

@@ -8,8 +8,4 @@ import * as Stories from './useOpenClose.stories';
 
 The `useOpenClose` hook helps handle common open, close, or toggle scenarios. It can be used to control components such as `Modal`, `MediaModal`, `Drawer`, `Details` and even `Popover`.
 
-<Canvas withSource="open" of={Stories.BasicUsage} />
-
-## Parameters
-
-<ArgTypes of={Stories.BasicUsage} />
+<Canvas sourceState="shown" of={Stories.BasicUsage} />

package/src/hooks/useOpenClose/useOpenClose.stories.tsx

@@ -2,8 +2,13 @@ import React from 'react';
 import type { Meta } from '@storybook/react-vite';
 import { UseOpenCloseProps, useOpenClose } from './useOpenClose';
 import { Button } from '../../components/Button/Button';
+import {
+  Popover,
+  PopoverContent,
+  PopoverPortal,
+  PopoverTrigger,
+} from '../../components/Popover/Popover';
 import { Box } from '../../components/Box/Box';
-import { Popover } from '../../components/Popover/Popover';
 
 const meta: Meta<typeof useOpenClose> = {
   title: 'Hooks/useOpenClose',
@@ -16,26 +21,24 @@ export default meta;
 
 export const BasicUsage: React.FC<UseOpenCloseProps> = () => {
   const { isOpen, handleOpen, handleClose } = useOpenClose();
-  const popoverContent = (
-    <>
-      <Box padding="lg" gap="md">
-        <Box as="p">Hello!</Box>
-      </Box>
-    </>
-  );
+
   return (
-    <Popover
-      placement="right-end"
-      content={popoverContent}
-      isOpen={isOpen}
-      onClickOutside={handleClose}
-      contentContainerProps={{
-        padding: 'sm',
-      }}
-    >
-      <Button variant="primary" type="button" onClick={handleOpen}>
-        Open Popover
+    <Box gap="2xl" direction="row">
+      <Popover open={isOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="primary" type="button" onClick={handleOpen}>
+            Open Popover
+          </Button>
+        </PopoverTrigger>
+        <PopoverPortal>
+          <PopoverContent onInteractOutside={handleClose}>
+            <p>Hello!</p>
+          </PopoverContent>
+        </PopoverPortal>
+      </Popover>
+      <Button variant="secondary" onClick={handleOpen}>
+        also opens
       </Button>
-    </Popover>
+    </Box>
   );
 };

package/src/types/index.ts

@@ -129,7 +129,7 @@ export type CssWhiteSpaceValue =
   | 'pre-wrap'
   | 'pre-line';
 
-export type CssWordBreakValue = 'normal' | 'break-all' | 'keep-all';
+export type CssWordBreakValue = 'normal' | 'all' | 'keep';
 
 export type CssTextAlignValue = 'left' | 'center' | 'right';