@purpurds/modal 6.1.2 → 6.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/modal",
-  "version": "6.1.2",
+  "version": "6.1.3",
   "license": "AGPL-3.0-only",
   "main": "./dist/modal.cjs.js",
   "types": "./dist/modal.d.ts",
@@ -17,14 +17,14 @@
   "dependencies": {
     "@radix-ui/react-dialog": "~1.1.6",
     "classnames": "~2.5.0",
-    "@purpurds/button": "6.1.2",
-    "@purpurds/heading": "6.1.2",
-    "@purpurds/icon": "6.1.2",
-    "@purpurds/paragraph": "6.1.2",
-    "@purpurds/text-spacing": "6.1.2",
-    "@purpurds/tokens": "6.1.2",
-    "@purpurds/visually-hidden": "6.1.2",
-    "@purpurds/notification": "6.1.2"
+    "@purpurds/heading": "6.1.3",
+    "@purpurds/icon": "6.1.3",
+    "@purpurds/button": "6.1.3",
+    "@purpurds/text-spacing": "6.1.3",
+    "@purpurds/paragraph": "6.1.3",
+    "@purpurds/tokens": "6.1.3",
+    "@purpurds/visually-hidden": "6.1.3",
+    "@purpurds/notification": "6.1.3"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",

package/src/modal-content.tsx

@@ -1,11 +1,18 @@
-import type { ForwardedRef, ReactNode } from "react";
+import type { ForwardedRef, MouseEventHandler, ReactNode } from "react";
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
 import { Button, ButtonVariant } from "@purpurds/button";
 import { Heading } from "@purpurds/heading";
 import { IconClose } from "@purpurds/icon/close";
 import { Paragraph } from "@purpurds/paragraph";
 import { VisuallyHidden } from "@purpurds/visually-hidden";
-import * as RadixDialog from "@radix-ui/react-dialog";
+import {
+  Close as RadixClose,
+  Content as RadixContent,
+  Description as RadixDescription,
+  Overlay as RadixOverlay,
+  Portal as RadixPortal,
+  Title as RadixTitle,
+} from "@radix-ui/react-dialog";
 import c from "classnames/bind";
 
 import "@purpurds/notification/styles";
@@ -22,7 +29,7 @@ export type DefaultProps = {
    * */
   actions?: ({
     label: string;
-    onClick: () => void;
+    onClick: MouseEventHandler<HTMLButtonElement>;
     disabled?: boolean;
     loading?: boolean;
     icon?: ReactNode;
@@ -67,6 +74,10 @@ export type DefaultProps = {
    * z-index of the modal
    * */
   zIndex?: number;
+  /**
+   * Event handler called when focus moves to the trigger after closing.
+   * */
+  onCloseAutoFocus?: (e: Event) => void;
 };
 
 type NoCloseButtonProps = {
@@ -116,6 +127,7 @@ export const ModalContent = forwardRef(
       title,
       notification = undefined,
       zIndex,
+      onCloseAutoFocus,
       ...props
     }: ModalContentProps & { primaryActionVariant?: "primary" | "expressive" | "destructive" },
     ref: ForwardedRef<HTMLDivElement>
@@ -172,9 +184,9 @@ export const ModalContent = forwardRef(
     }, [notification, children, handleContentOverflow]);
 
     return (
-      <RadixDialog.Portal>
-        <RadixDialog.Overlay className={cx(`${rootClassName}__overlay`)} style={{ zIndex }} />
-        <RadixDialog.Content
+      <RadixPortal>
+        <RadixOverlay className={cx(`${rootClassName}__overlay`)} style={{ zIndex }} />
+        <RadixContent
           {...rest}
           className={classes}
           data-testid={dataTestId}
@@ -183,6 +195,7 @@ export const ModalContent = forwardRef(
           onPointerDownOutside={handlePointerDownOutside}
           onOpenAutoFocus={handleContentOverflow}
           onEscapeKeyDown={handleEscapeKeyDown}
+          onCloseAutoFocus={onCloseAutoFocus}
           style={{ zIndex: `calc(${zIndex} + 1)` }}
         >
           <div ref={wrapperRef} className={cx(`${rootClassName}__wrapper`)}>
@@ -201,7 +214,7 @@ export const ModalContent = forwardRef(
                     data-testid={getTestId("close-button")}
                   />
                 )}
-                <RadixDialog.Title
+                <RadixTitle
                   asChild
                   className={cx(`${rootClassName}__title`)}
                   data-testid={getTestId("title")}
@@ -209,7 +222,7 @@ export const ModalContent = forwardRef(
                   <Heading tag="h2" variant="title-200">
                     {title}
                   </Heading>
-                </RadixDialog.Title>
+                </RadixTitle>
               </div>
               {image && (
                 <div
@@ -223,19 +236,19 @@ export const ModalContent = forwardRef(
                 <div className={cx(`${rootClassName}__body-inner`)}>
                   {description && hideDescription && (
                     <VisuallyHidden asChild>
-                      <RadixDialog.Description data-testid={getTestId("description")}>
+                      <RadixDescription data-testid={getTestId("description")}>
                         {description}
-                      </RadixDialog.Description>
+                      </RadixDescription>
                     </VisuallyHidden>
                   )}
                   {description && !hideDescription && (
-                    <RadixDialog.Description
+                    <RadixDescription
                       asChild
                       className={cx(`${rootClassName}__description`)}
                       data-testid={getTestId("description")}
                     >
                       <Paragraph variant="paragraph-100">{description}</Paragraph>
-                    </RadixDialog.Description>
+                    </RadixDescription>
                   )}
                   <div>{children}</div>
                   {!stickyButtons && (
@@ -257,8 +270,8 @@ export const ModalContent = forwardRef(
               notification={notification}
             />
           )}
-        </RadixDialog.Content>
-      </RadixDialog.Portal>
+        </RadixContent>
+      </RadixPortal>
     );
   }
 );
@@ -272,7 +285,7 @@ const CloseButton = ({
   hasImage?: boolean;
   ["data-testid"]?: string;
 }) => (
-  <RadixDialog.Close asChild>
+  <RadixClose asChild>
     <Button
       variant={hasImage ? "primary" : "tertiary-purple"}
       negative={hasImage}
@@ -284,7 +297,7 @@ const CloseButton = ({
     >
       <IconClose />
     </Button>
-  </RadixDialog.Close>
+  </RadixClose>
 );
 
 export const MAX_NUMBER_OF_ACTIONS = 3;

package/src/modal-trigger.tsx

@@ -1,5 +1,5 @@
 import React, { ForwardedRef, forwardRef, ReactNode } from "react";
-import * as RadixDialog from "@radix-ui/react-dialog";
+import { Trigger as RadixTrigger } from "@radix-ui/react-dialog";
 
 export type ModalTriggerProps = {
   ["data-testid"]?: string;
@@ -13,15 +13,9 @@ export const ModalTrigger = forwardRef(
     ref: ForwardedRef<HTMLButtonElement>
   ) => {
     return (
-      <RadixDialog.Trigger
-        asChild
-        ref={ref}
-        data-testid={dataTestId}
-        className={className}
-        {...props}
-      >
+      <RadixTrigger asChild ref={ref} data-testid={dataTestId} className={className} {...props}>
         {children}
-      </RadixDialog.Trigger>
+      </RadixTrigger>
     );
   }
 );

package/src/modal.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import * as RadixDialog from "@radix-ui/react-dialog";
+import { Root as RadixRoot } from "@radix-ui/react-dialog";
 
 import { ModalContent } from "./modal-content";
 import { ModalTrigger } from "./modal-trigger";
@@ -22,13 +22,11 @@ export const Modal = ({
   children,
   open,
   onOpenChange,
-}: ModalProps) => {
-  return (
-    <RadixDialog.Root open={open} onOpenChange={onOpenChange} data-testid={dataTestId}>
-      {children}
-    </RadixDialog.Root>
-  );
-};
+}: ModalProps) => (
+  <RadixRoot open={open} onOpenChange={onOpenChange} data-testid={dataTestId}>
+    {children}
+  </RadixRoot>
+);
 
 Modal.Trigger = ModalTrigger;
 Modal.Content = ModalContent;