Migrate Dialog component to TypeScript

.changeset/long-ducks-scream.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `Dialog` to TypeScript

src/Dialog.tsx

@@ -0,0 +1,166 @@
+import React, {useRef, forwardRef} from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import {COMMON, LAYOUT, SystemCommonProps, SystemLayoutProps, get} from './constants'
+import {ComponentProps} from './utils/types'
+import theme from './theme'
+import sx, {SxProp} from './sx'
+import Text from './Text'
+import Flex from './Flex'
+import ButtonClose from './Button/ButtonClose'
+import useDialog from './hooks/useDialog'
+
+const noop = () => null
+
+type StyledDialogBaseProps = {
+  isOpen?: boolean
+  narrow?: boolean
+  wide?: boolean
+  onDismiss?: () => void
+  initialFocusRef?: React.RefObject<HTMLDivElement>
+  returnFocusRef?: React.RefObject<HTMLDivElement>
+  modalRef?: React.ForwardedRef<HTMLElement>
+} & SystemLayoutProps &
+  SystemCommonProps &
+  SxProp
+
+const DialogBase = styled.div<StyledDialogBaseProps>`
+  box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.35);
+  border-radius: ${get('radii.2')};
+  position: fixed;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  max-height: 80vh;
+  z-index: 999;
+  margin: 10vh auto;
+  background-color: ${get('colors.white')};
+  width: ${props => (props.narrow ? '320px' : props.wide ? '640px' : '440px')};
+  outline: none;
+
+  @media screen and (max-width: 750px) {
+    width: 100vw;
+    margin: 0;
+    border-radius: 0;
+    height: 100vh;
+  }
+
+  ${LAYOUT};
+  ${COMMON};
+  ${sx};
+`
+
+export type DialogBaseProps = ComponentProps<typeof DialogBase>
+
+const DialogHeaderBase = styled(Flex)<SxProp>`
+  border-radius: 4px 4px 0px 0px;
+  border-bottom: 1px solid #dad5da;
+
+  @media screen and (max-width: 750px) {
+    border-radius: 0px;
+  }
+
+  ${sx};
+`
+export type DialogHeaderProps = ComponentProps<typeof DialogHeaderBase>
+function DialogHeader({theme, children, backgroundColor = 'gray.1', ...rest}: DialogHeaderProps) {
+  if (React.Children.toArray(children).every(ch => typeof ch === 'string')) {
+    children = (
+      <Text theme={theme} color="gray.9" fontSize={1} fontWeight="bold" fontFamily="sans-serif">
+        {children}
+      </Text>
+    )
+  }
+
+  return (
+    <DialogHeaderBase theme={theme} p={3} {...rest}>
+      {children}
+    </DialogHeaderBase>
+  )
+}
+
+const Overlay = styled.span`
+  &:before {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 80;
+    display: block;
+    cursor: default;
+    content: ' ';
+    background: transparent;
+    z-index: 99;
+    background: rgba(27, 31, 35, 0.5);
+  }
+`
+
+const Dialog = forwardRef<HTMLElement, DialogBaseProps>(
+  (
+    {children, onDismiss = noop, isOpen, initialFocusRef, returnFocusRef, ...props}: DialogBaseProps,
+    forwardedRef: React.ForwardedRef<HTMLElement>
+  ) => {
+    const backupRef = useRef(null) as React.RefObject<null>
+    const overlayRef = useRef(null)
+    const modalRef = (forwardedRef as React.RefObject<HTMLDivElement>) ?? backupRef
+    const closeButtonRef = useRef(null)
+
+    const onCloseClick = () => {
+      onDismiss()
+      if (returnFocusRef && returnFocusRef.current) {
+        returnFocusRef.current.focus()
+      }
+    }
+
+    const {getDialogProps} = useDialog({
+      modalRef,
+      onDismiss: onCloseClick,
+      isOpen,
+      initialFocusRef,
+      closeButtonRef,
+      returnFocusRef,
+      overlayRef
+    })
+    return isOpen ? (
+      <>
+        <Overlay ref={overlayRef} />
+        <DialogBase tabIndex={-1} ref={modalRef} role="dialog" aria-modal="true" {...props} {...getDialogProps()}>
+          <ButtonClose
+            ref={closeButtonRef}
+            onClick={onCloseClick}
+            sx={{position: 'absolute', top: '16px', right: '16px'}}
+          />
+          {children}
+        </DialogBase>
+      </>
+    ) : null
+  }
+)
+
+Dialog.defaultProps = {theme}
+
+Dialog.propTypes = {
+  ...COMMON.propTypes,
+  ...LAYOUT.propTypes,
+  isOpen: PropTypes.bool.isRequired,
+  narrow: PropTypes.bool,
+  onDismiss: PropTypes.func.isRequired,
+  ...sx.propTypes,
+  wide: PropTypes.bool
+}
+
+DialogHeader.defaultProps = {
+  backgroundColor: 'gray.1',
+  theme
+}
+
+DialogHeader.propTypes = {
+  ...Flex.propTypes
+}
+
+DialogHeader.displayName = 'Dialog.Header'
+Dialog.displayName = 'Dialog'
+
+export type DialogProps = ComponentProps<typeof Dialog>
+export default Object.assign(Dialog, {Header: DialogHeader})

src/__tests__/Dialog.js → src/__tests__/Dialog.tsx

@@ -89,10 +89,10 @@ describe('Dialog', () => {
   })
 
   it('should have no axe violations', async () => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {})
+    const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
     const {container} = HTMLRender(comp)
     // eslint-disable-next-line no-console
-    console.warn.mockRestore()
+    spy.mockRestore()
     const results = await axe(container)
     expect(results).toHaveNoViolations()
     cleanup()

src/__tests__/__snapshots__/Dialog.js.snap → src/__tests__/__snapshots__/Dialog.tsx.snap

@@ -10,7 +10,6 @@ exports[`Dialog Dialog.Header renders consistently 1`] = `
 
 .c0 {
   padding: 16px;
-  background-color: #f6f8fa;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -117,7 +116,6 @@ Array [
 
 .c2 {
   padding: 16px;
-  background-color: #f6f8fa;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;