Migrate Popover to TypeScript

.changeset/wise-owls-mix.md

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

src/Popover.js → src/Popover.tsx

@@ -1,16 +1,40 @@
+import classnames from 'classnames'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import classnames from 'classnames'
-import {COMMON, LAYOUT, POSITION, get} from './constants'
-import theme from './theme'
 import BorderBox from './BorderBox'
-import sx from './sx'
-
-const Popover = styled.div.attrs(({className, caret}) => {
+import {COMMON, get, LAYOUT, POSITION, SystemCommonProps, SystemLayoutProps, SystemPositionProps} from './constants'
+import sx, {SxProp} from './sx'
+import theme from './theme'
+import {ComponentProps} from './utils/types'
+
+type CaretPosition =
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'top-left'
+  | 'top-right'
+  | 'left-bottom'
+  | 'left-top'
+  | 'right-bottom'
+  | 'right-top'
+
+type StyledPopoverProps = {
+  caret?: CaretPosition
+  relative?: boolean
+  open?: boolean
+} & SystemCommonProps &
+  SystemLayoutProps &
+  SystemPositionProps &
+  SxProp
+
+const Popover = styled.div.attrs<StyledPopoverProps>(({className, caret}) => {
   return {
     className: classnames(className, `caret-pos--${caret}`)
   }
-})`
+})<StyledPopoverProps>`
   position: ${props => (props.relative ? 'relative' : 'absolute')};
   z-index: 100;
   display: ${props => (props.open ? 'block' : 'none')};
@@ -21,7 +45,7 @@ const Popover = styled.div.attrs(({className, caret}) => {
   ${sx};
 `
 
-Popover.Content = styled(BorderBox)`
+const PopoverContent = styled(BorderBox)`
   position: relative;
   width: 232px;
   margin-right: auto;
@@ -201,29 +225,13 @@ Popover.Content = styled(BorderBox)`
   ${sx};
 `
 
-Popover.CARET_POSITIONS = [
-  'top',
-  'bottom',
-  'left',
-  'right',
-  'bottom-left',
-  'bottom-right',
-  'top-left',
-  'top-right',
-  'left-bottom',
-  'left-top',
-  'right-bottom',
-  'right-top'
-]
-
 Popover.defaultProps = {
   caret: 'top',
   theme
 }
 
 Popover.propTypes = {
-  as: PropTypes.elementType,
-  caret: PropTypes.oneOf(Popover.CARET_POSITIONS),
+  caret: PropTypes.any,
   open: PropTypes.bool,
   relative: PropTypes.bool,
   theme: PropTypes.object,
@@ -233,17 +241,18 @@ Popover.propTypes = {
   ...sx.propTypes
 }
 
-Popover.Content.defaultProps = {
+PopoverContent.defaultProps = {
   theme
 }
 
-Popover.Content.propTypes = {
-  as: PropTypes.elementType,
+PopoverContent.propTypes = {
   theme: PropTypes.object,
   ...BorderBox.propTypes,
   ...sx.propTypes
 }
 
-Popover.Content.displayName = 'Popover.Content'
+PopoverContent.displayName = 'Popover.Content'
 
-export default Popover
+export type PopoverProps = ComponentProps<typeof Popover>
+export type PopoverContentProps = ComponentProps<typeof PopoverContent>
+export default Object.assign(Popover, {Content: PopoverContent})

src/__tests__/Popover.js → src/__tests__/Popover.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Popover} from '..'
+import Popover, {PopoverProps} from '../Popover'
 import {render, behavesAsComponent, checkExports} from '../utils/testing'
 import {BORDER, COMMON, LAYOUT, POSITION} from '../constants'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
@@ -35,7 +35,22 @@ describe('Popover', () => {
     cleanup()
   })
 
-  for (const pos of Popover.CARET_POSITIONS) {
+  const CARET_POSITIONS: PopoverProps['caret'][] = [
+    'top',
+    'bottom',
+    'left',
+    'right',
+    'bottom-left',
+    'bottom-right',
+    'top-left',
+    'top-right',
+    'left-bottom',
+    'left-top',
+    'right-bottom',
+    'right-top'
+  ]
+
+  for (const pos of CARET_POSITIONS) {
     it(`renders correctly for a caret position of ${pos}`, () => {
       const element = (
         <Popover caret={pos} open>