Merge pull request #1026 from primer/VanAnderson/migrate-details-to-TSX

Migrate Details component to TSX

.changeset/hip-ads-buy.md

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

src/Details.js → src/Details.tsx

@@ -1,9 +1,15 @@
 import styled from 'styled-components'
-import {COMMON} from './constants'
 import theme from './theme'
-import sx from './sx'
+import {COMMON, SystemCommonProps} from './constants'
+import {ComponentProps} from './utils/types'
+import sx, {SxProp} from './sx'
 
-const Details = styled.details`
+type StyledDetailsProps = {
+  open?: boolean
+} & SystemCommonProps &
+  SxProp
+
+const Details = styled.details<StyledDetailsProps>`
   & > summary {
     list-style: none;
   }
@@ -26,4 +32,5 @@ Details.propTypes = {
   ...sx.propTypes
 }
 
+export type DetailsProps = ComponentProps<typeof Details>
 export default Details

src/__tests__/Details.js → src/__tests__/Details.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {Details, useDetails, Button, ButtonPrimary, Box} from '..'
+import {ButtonProps} from '../Button/Button'
 import {mount, behavesAsComponent, checkExports} from '../utils/testing'
 import {COMMON} from '../constants'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
@@ -25,7 +26,7 @@ describe('Details', () => {
     const Component = () => {
       const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
       return (
-        <Details {...getDetailsProps}>
+        <Details {...getDetailsProps()}>
           <summary>hi</summary>
         </Details>
       )
@@ -46,7 +47,7 @@ describe('Details', () => {
     const Component = () => {
       const {getDetailsProps, open} = useDetails({closeOnOutsideClick: true})
       return (
-        <Details {...getDetailsProps}>
+        <Details {...getDetailsProps()}>
           <Button as="summary">{open ? 'Open' : 'Closed'}</Button>
         </Details>
       )
@@ -66,11 +67,11 @@ describe('Details', () => {
   })
 
   it('Can manipulate state with setOpen', () => {
-    const CloseButton = props => <Button {...props} />
+    const CloseButton = (props: ButtonProps) => <Button {...props} />
     const Component = () => {
       const {getDetailsProps, setOpen, open} = useDetails({closeOnOutsideClick: true, defaultOpen: true})
       return (
-        <Details {...getDetailsProps}>
+        <Details {...getDetailsProps()}>
           <Button as="summary">{open ? 'Open' : 'Closed'}</Button>
           <CloseButton onClick={() => setOpen(false)} />
         </Details>
@@ -92,9 +93,9 @@ describe('Details', () => {
 
   it('Does not toggle when you click inside', () => {
     const Component = () => {
-      const {getDetailsProps} = useDetails({closeOnOutsideClick: true, defaultOpen: true})
+      const {getDetailsProps, open} = useDetails({closeOnOutsideClick: true, defaultOpen: true})
       return (
-        <Details {...getDetailsProps}>
+        <Details {...getDetailsProps()}>
           <Button as="summary">{open ? 'Open' : 'Closed'}</Button>
           <Box>
             <ButtonPrimary>hi</ButtonPrimary>

src/hooks/useDetails.js → src/hooks/useDetails.tsx

@@ -1,13 +1,23 @@
 import {useCallback, useEffect, useState, useRef} from 'react'
 
-function useDetails({ref, closeOnOutsideClick, defaultOpen, onClickOutside} = {}) {
+type UseDetailsParameters = {
+  ref?: React.RefObject<HTMLElement>
+  closeOnOutsideClick?: boolean
+  defaultOpen?: boolean
+  onClickOutside?: (event: MouseEvent) => void
+}
+
+function useDetails({ref, closeOnOutsideClick, defaultOpen, onClickOutside}: UseDetailsParameters) {
   const [open, setOpen] = useState(defaultOpen)
   const backupRef = useRef(null)
   const customRef = ref ?? backupRef
 
   const onClickOutsideInternal = useCallback(
-    event => {
-      if (event.target.closest('details') !== customRef.current) {
+    (event: MouseEvent) => {
+      const {current} = customRef
+      const eventTarget = event.target as HTMLElement
+      const closest = eventTarget.closest('details') as HTMLDetailsElement
+      if (closest !== current) {
         onClickOutside && onClickOutside(event)
         if (!event.defaultPrevented) {
           setOpen(false)
@@ -27,9 +37,10 @@ function useDetails({ref, closeOnOutsideClick, defaultOpen, onClickOutside} = {}
     }
   }, [open, closeOnOutsideClick, onClickOutsideInternal])
 
-  const handleToggle = e => {
+  const handleToggle = (e: React.SyntheticEvent<HTMLElement, Event>) => {
     if (!e.defaultPrevented) {
-      setOpen(e.target.open)
+      const eventTarget = e.target as HTMLDetailsElement
+      setOpen(eventTarget.open)
     }
   }