Use react-aria-components modal components

openstax · Dec 2, 2024 · 7e2de23 · 7e2de23
1 parent afd0262
commit 7e2de23
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 41 deletions.
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -1,12 +1,13 @@
 import styled, { css } from "styled-components";
 import { colors, zIndex } from "../../src/theme";
-import { BodyPortal } from './BodyPortal';
 import { CloseModalButton } from "./CloseModalButton";
+import * as RAC from "react-aria-components";
+import React from "react";
 
 
 const modalPadding = 3;
 
-export const ModalCard = styled.div`
+export const ModalCard = styled(RAC.Dialog)`
   display: flex;
   flex-direction: column;
   margin: auto;
@@ -17,6 +18,7 @@ export const ModalCard = styled.div`
   color: ${colors.palette.neutralDarker};
   font-size: 1.6rem;
   line-height: 2.5rem;
+  outline: none;
 `;
 
 const Header = styled.header`
@@ -33,7 +35,7 @@ const Header = styled.header`
   `}
 `;
 
-const Heading = styled.h1`
+const Heading = styled(RAC.Heading)`
   display: flex;
   align-items: center;
   margin: 0;
@@ -52,28 +54,25 @@ export const ModalBody = styled.div`
   padding: ${modalPadding}rem;
 `;
 
-export const Mask = styled.div`
+export const Mask = styled(
+  (props: RAC.ModalOverlayProps & React.RefAttributes<HTMLDivElement>) => (
+    <RAC.ModalOverlay defaultOpen {...props}/>
+  )
+)`
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   position: fixed;
   background-color: rgba(0, 0, 0, 0.3);
-`;
-
-export const ModalWrapper = styled(BodyPortal)`
-  top: 0;
-  z-index: ${zIndex.modals};
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  position: fixed;
   justify-content: center;
   align-items: center;
+  z-index: ${zIndex.modals};
 `;
 
+export const ModalWrapper = RAC.Modal;
+
 const CardWrapper = styled.div`
   z-index: 1;
 `;
@@ -102,23 +101,30 @@ export const Modal = ({
   onModalClose,
   children,
   show,
-  variant
-}: React.PropsWithChildren<ModalPropTypes>) => {
+  variant,
+  ...props
+}: React.PropsWithChildren<ModalPropTypes> & RAC.ModalOverlayProps) => {
   if (!show) { return null; }
   return (
-    <ModalWrapper className={className} slot='modal'>
-      <CardWrapper>
-        <ModalCard>
-          <Header variant={variant}>
-            <Heading>
-              {heading}
-            </Heading>
-            <CloseModalButton onClick={onModalClose} variant={variant}/>
-          </Header>
-          {children}
-        </ModalCard>
-      </CardWrapper>
-      <Mask />
-    </ModalWrapper>
+    <Mask
+      className={className}
+      isDismissable
+      onOpenChange={(isOpen) => (!isOpen && onModalClose())}
+      {...props}
+    >
+      <ModalWrapper>
+        <CardWrapper>
+          <ModalCard>
+            <Header variant={variant}>
+              <Heading slot="title">
+                {heading}
+              </Heading>
+              <CloseModalButton onClick={onModalClose} variant={variant}/>
+            </Header>
+            {children}
+          </ModalCard>
+        </CardWrapper>
+      </ModalWrapper>
+    </Mask>
   );
 };
diff --git a/src/components/Overlay.tsx b/src/components/Overlay.tsx
@@ -1,6 +1,8 @@
 import styled from "styled-components";
 import { CloseModalButton } from "./CloseModalButton";
 import { Mask, ModalWrapper } from "./Modal";
+import * as RAC from "react-aria-components";
+import React from "react";
 
 export const OverlayMask = styled(Mask)`
   background-color: rgba(0, 0, 0, 0.89);
@@ -10,16 +12,15 @@ export const OverlayCloseButton = styled(CloseModalButton)`
   height: 4rem;
   width: 4rem;
   position: absolute;
-  right: 0;
-  top: 0;
+  right: 2em;
+  top: 2em;
 `;
 
 export const OverlayWrapper = styled(ModalWrapper)`
   color: #fff;
-  padding: 4rem;
 `;
 
-export const OverlayBody = styled.div`
+export const OverlayBody = styled(RAC.Dialog)`
   position: relative;
   flex-grow: 1;
   height: 100%;
@@ -28,26 +29,34 @@ export const OverlayBody = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  outline: none;
 `;
 
 export const Overlay = ({
   className,
   onClose,
   children,
-  show
+  show,
+  ...props
 }: React.PropsWithChildren<{
   onClose: () => void;
   className?: string;
   show?: boolean;
-}>) => {
+}> & RAC.ModalOverlayProps) => {
   if (!show) { return null; }
   return (
-    <OverlayWrapper className={className} slot='overlay'>
-      <OverlayBody>
+    <OverlayMask
+      className={className}
+      isDismissable
+      onOpenChange={(isOpen) => (!isOpen && onClose())}
+      {...props}
+    >
+      <OverlayWrapper defaultOpen={true}>
         <OverlayCloseButton onClick={onClose} variant={'inverted-circle'} />
-        { children }
+        <OverlayBody>
+          { children }
         </OverlayBody>
-      <OverlayMask />
-    </OverlayWrapper >
+      </OverlayWrapper>
+    </OverlayMask>
   );
 };