From ebd8f6ed0db64eb2ae60320918c75c951df29a1e Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Thu, 11 Feb 2021 09:25:28 -0800
Subject: [PATCH 1/6] Begin migrating SelectMenu

---
 src/SelectMenu/SelectMenuContext.js           |  3 -
 src/SelectMenu/SelectMenuContext.tsx          |  3 +
 ...ctMenuDivider.js => SelectMenuDivider.tsx} |  8 ++-
 src/SelectMenu/SelectMenuFilter.js            | 55 ----------------
 src/SelectMenu/SelectMenuFilter.tsx           | 63 +++++++++++++++++++
 ...lectMenuFooter.js => SelectMenuFooter.tsx} |  8 ++-
 ...lectMenuHeader.js => SelectMenuHeader.tsx} | 12 ++--
 .../{SelectMenuItem.js => SelectMenuItem.tsx} |  0
 .../{SelectMenuList.js => SelectMenuList.tsx} |  8 ++-
 ...tion.js => SelectMenuLoadingAnimation.tsx} |  9 ++-
 ...SelectMenuModal.js => SelectMenuModal.tsx} | 48 +++++++++-----
 .../{SelectMenuTab.js => SelectMenuTab.tsx}   | 13 ++--
 ...MenuTabPanel.js => SelectMenuTabPanel.tsx} | 18 +++---
 .../{SelectMenuTabs.js => SelectMenuTabs.tsx} |  0
 14 files changed, 144 insertions(+), 104 deletions(-)
 delete mode 100644 src/SelectMenu/SelectMenuContext.js
 create mode 100644 src/SelectMenu/SelectMenuContext.tsx
 rename src/SelectMenu/{SelectMenuDivider.js => SelectMenuDivider.tsx} (70%)
 delete mode 100644 src/SelectMenu/SelectMenuFilter.js
 create mode 100644 src/SelectMenu/SelectMenuFilter.tsx
 rename src/SelectMenu/{SelectMenuFooter.js => SelectMenuFooter.tsx} (71%)
 rename src/SelectMenu/{SelectMenuHeader.js => SelectMenuHeader.tsx} (74%)
 rename src/SelectMenu/{SelectMenuItem.js => SelectMenuItem.tsx} (100%)
 rename src/SelectMenu/{SelectMenuList.js => SelectMenuList.tsx} (77%)
 rename src/SelectMenu/{SelectMenuLoadingAnimation.js => SelectMenuLoadingAnimation.tsx} (71%)
 rename src/SelectMenu/{SelectMenuModal.js => SelectMenuModal.tsx} (68%)
 rename src/SelectMenu/{SelectMenuTab.js => SelectMenuTab.tsx} (85%)
 rename src/SelectMenu/{SelectMenuTabPanel.js => SelectMenuTabPanel.tsx} (75%)
 rename src/SelectMenu/{SelectMenuTabs.js => SelectMenuTabs.tsx} (100%)

diff --git a/src/SelectMenu/SelectMenuContext.js b/src/SelectMenu/SelectMenuContext.js
deleted file mode 100644
index a63f91b96fc..00000000000
--- a/src/SelectMenu/SelectMenuContext.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import {createContext} from 'react'
-
-export const MenuContext = createContext()
diff --git a/src/SelectMenu/SelectMenuContext.tsx b/src/SelectMenu/SelectMenuContext.tsx
new file mode 100644
index 00000000000..c1e98789814
--- /dev/null
+++ b/src/SelectMenu/SelectMenuContext.tsx
@@ -0,0 +1,3 @@
+import {createContext} from 'react'
+
+export const MenuContext = createContext(null)
diff --git a/src/SelectMenu/SelectMenuDivider.js b/src/SelectMenu/SelectMenuDivider.tsx
similarity index 70%
rename from src/SelectMenu/SelectMenuDivider.js
rename to src/SelectMenu/SelectMenuDivider.tsx
index 89826ddfca8..f6c3676a424 100644
--- a/src/SelectMenu/SelectMenuDivider.js
+++ b/src/SelectMenu/SelectMenuDivider.tsx
@@ -1,7 +1,8 @@
 import styled, {css} from 'styled-components'
 import theme from '../theme'
-import {COMMON, get} from '../constants'
-import sx from '../sx'
+import {COMMON, get, SystemCommonProps} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
 
 const dividerStyles = css`
   padding: ${get('space.1')} ${get('space.3')};
@@ -13,7 +14,7 @@ const dividerStyles = css`
   border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.grayLight')};
 `
 
-const SelectMenuDivider = styled.div`
+const SelectMenuDivider = styled.div<SystemCommonProps & SxProp>`
   ${dividerStyles}
   ${COMMON}
   ${sx};
@@ -30,4 +31,5 @@ SelectMenuDivider.propTypes = {
 
 SelectMenuDivider.displayName = 'SelectMenu.Divider'
 
+export type SelectMenuDividerProps = ComponentProps<typeof SelectMenuDivider>
 export default SelectMenuDivider
diff --git a/src/SelectMenu/SelectMenuFilter.js b/src/SelectMenu/SelectMenuFilter.js
deleted file mode 100644
index e793bf1a4cb..00000000000
--- a/src/SelectMenu/SelectMenuFilter.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, {useRef, useContext, forwardRef, useEffect} from 'react'
-import styled from 'styled-components'
-import PropTypes from 'prop-types'
-import {COMMON, get} from '../constants'
-import theme from '../theme'
-import TextInput from '../TextInput'
-import {MenuContext} from './SelectMenuContext'
-import sx from '../sx'
-
-const StyledForm = styled.form`
-  padding: ${get('space.3')};
-  margin: 0;
-  border-top: ${get('borderWidths.1')} solid ${get('colors.border.gray')};
-  background-color: ${get('colors.white')};
-  ${COMMON};
-
-  @media (min-width: ${get('breakpoints.0')}) {
-    padding: ${get('space.2')};
-  }
-
-  ${sx};
-`
-
-const SelectMenuFilter = forwardRef(({theme, value, sx, ...rest}, forwardedRef) => {
-  const inputRef = useRef(null)
-  const ref = forwardedRef ?? inputRef
-  const {open} = useContext(MenuContext)
-
-  // puts focus on the filter input when the menu is opened
-  useEffect(() => {
-    if (open) {
-      inputRef.current.focus()
-    }
-  }, [open])
-
-  return (
-    <StyledForm theme={theme} sx={sx}>
-      <TextInput theme={theme} ref={ref} width="100%" block value={value} {...rest} />
-    </StyledForm>
-  )
-})
-
-SelectMenuFilter.defaultProps = {
-  theme
-}
-
-SelectMenuFilter.propTypes = {
-  ...COMMON.propTypes,
-  ...sx.propTypes,
-  value: PropTypes.string
-}
-
-SelectMenuFilter.displayName = 'SelectMenu.Filter'
-
-export default SelectMenuFilter
diff --git a/src/SelectMenu/SelectMenuFilter.tsx b/src/SelectMenu/SelectMenuFilter.tsx
new file mode 100644
index 00000000000..b40cc27f941
--- /dev/null
+++ b/src/SelectMenu/SelectMenuFilter.tsx
@@ -0,0 +1,63 @@
+import React, {useRef, useContext, forwardRef, useEffect} from 'react'
+import styled from 'styled-components'
+import PropTypes from 'prop-types'
+import {COMMON, get, SystemCommonProps} from '../constants'
+import theme from '../theme'
+import TextInput, {TextInputProps} from '../TextInput'
+import {MenuContext} from './SelectMenuContext'
+import sx from '../sx'
+import {ComponentProps} from '../utils/types'
+
+const StyledForm = styled.form<SystemCommonProps & SxProp>`
+  padding: ${get('space.3')};
+  margin: 0;
+  border-top: ${get('borderWidths.1')} solid ${get('colors.border.gray')};
+  background-color: ${get('colors.white')};
+  ${COMMON};
+
+  @media (min-width: ${get('breakpoints.0')}) {
+    padding: ${get('space.2')};
+  }
+
+  ${sx};
+`
+
+type SelectMenuFilterInternalProps = {
+  value?: string
+} & TextInputProps
+
+const SelectMenuFilter = forwardRef<HTMLInputElement, SelectMenuFilterInternalProps>(
+  ({theme, value, sx, ...rest}, forwardedRef) => {
+    const inputRef = useRef(null)
+    const ref = forwardedRef ?? inputRef
+    const {open} = useContext(MenuContext)
+
+    // puts focus on the filter input when the menu is opened
+    useEffect(() => {
+      if (open) {
+        inputRef.current.focus()
+      }
+    }, [open])
+
+    return (
+      <StyledForm theme={theme} sx={sx}>
+        <TextInput theme={theme} ref={ref} width="100%" block value={value} {...rest} />
+      </StyledForm>
+    )
+  }
+)
+
+SelectMenuFilter.defaultProps = {
+  theme
+}
+
+SelectMenuFilter.propTypes = {
+  ...COMMON.propTypes,
+  ...sx.propTypes,
+  value: PropTypes.string
+}
+
+SelectMenuFilter.displayName = 'SelectMenu.Filter'
+
+export type SelectMenuFilterProps = ComponentProps<typeof SelectMenuFilter>
+export default SelectMenuFilter
diff --git a/src/SelectMenu/SelectMenuFooter.js b/src/SelectMenu/SelectMenuFooter.tsx
similarity index 71%
rename from src/SelectMenu/SelectMenuFooter.js
rename to src/SelectMenu/SelectMenuFooter.tsx
index a3313ebce2b..b01d737bda6 100644
--- a/src/SelectMenu/SelectMenuFooter.js
+++ b/src/SelectMenu/SelectMenuFooter.tsx
@@ -1,7 +1,8 @@
 import styled, {css} from 'styled-components'
-import {COMMON, get} from '../constants'
+import {COMMON, get, SystemCommonProps} from '../constants'
 import theme from '../theme'
-import sx from '../sx'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
 
 const footerStyles = css`
   margin-top: -1px;
@@ -16,7 +17,7 @@ const footerStyles = css`
   }
 `
 
-const SelectMenuFooter = styled.footer`
+const SelectMenuFooter = styled.footer<SystemCommonProps & SxProp>`
   ${footerStyles}
   ${COMMON}
   ${sx};
@@ -33,4 +34,5 @@ SelectMenuFooter.propTypes = {
 
 SelectMenuFooter.displayName = 'SelectMenu.Footer'
 
+export type SelectMenuFooterProps = ComponentProps<typeof SelectMenuFooter>
 export default SelectMenuFooter
diff --git a/src/SelectMenu/SelectMenuHeader.js b/src/SelectMenu/SelectMenuHeader.tsx
similarity index 74%
rename from src/SelectMenu/SelectMenuHeader.js
rename to src/SelectMenu/SelectMenuHeader.tsx
index b05b521641d..06ad93f9673 100644
--- a/src/SelectMenu/SelectMenuHeader.js
+++ b/src/SelectMenu/SelectMenuHeader.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
-import {get, COMMON, TYPOGRAPHY} from '../constants'
+import {get, COMMON, TYPOGRAPHY, SystemCommonProps, SystemTypographyProps} from '../constants'
 import theme from '../theme'
-import sx from '../sx'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
 
 // SelectMenu.Header is intentionally not exported, it's an internal component used in
 // SelectMenu.Modal
@@ -19,7 +20,7 @@ const SelectMenuTitle = styled.h3`
   }
 `
 
-const StyledHeader = styled.header`
+const StyledHeader = styled.header<SystemTypographyProps & SystemCommonProps & SxProp>`
   display: flex;
   flex: none; // fixes header from getting squeezed in Safari iOS
   padding: ${get('space.3')};
@@ -34,7 +35,10 @@ const StyledHeader = styled.header`
 
   ${sx};
 `
-const SelectMenuHeader = ({children, theme, ...rest}) => {
+
+export type SelectMenuHeaderProps = ComponentProps<typeof StyledHeader>
+
+const SelectMenuHeader = ({children, theme, ...rest}: SelectMenuHeaderProps) => {
   return (
     <StyledHeader theme={theme} {...rest}>
       <SelectMenuTitle theme={theme}>{children}</SelectMenuTitle>
diff --git a/src/SelectMenu/SelectMenuItem.js b/src/SelectMenu/SelectMenuItem.tsx
similarity index 100%
rename from src/SelectMenu/SelectMenuItem.js
rename to src/SelectMenu/SelectMenuItem.tsx
diff --git a/src/SelectMenu/SelectMenuList.js b/src/SelectMenu/SelectMenuList.tsx
similarity index 77%
rename from src/SelectMenu/SelectMenuList.js
rename to src/SelectMenu/SelectMenuList.tsx
index b16afdab4ff..73ca318a598 100644
--- a/src/SelectMenu/SelectMenuList.js
+++ b/src/SelectMenu/SelectMenuList.tsx
@@ -1,7 +1,8 @@
 import styled, {css} from 'styled-components'
+import {COMMON, get, SystemCommonProps} from '../constants'
+import sx, {SxProp} from '../sx'
 import theme from '../theme'
-import {COMMON, get} from '../constants'
-import sx from '../sx'
+import {ComponentProps} from '../utils/types'
 
 const listStyles = css`
   position: relative;
@@ -30,7 +31,7 @@ const listStyles = css`
   }
 `
 
-const SelectMenuList = styled.div`
+const SelectMenuList = styled.div<SystemCommonProps & SxProp>`
   ${listStyles}
   ${COMMON}
   ${sx};
@@ -46,4 +47,5 @@ SelectMenuList.propTypes = {
 
 SelectMenuList.displayName = 'SelectMenu.List'
 
+export type SelectMenuListProps = ComponentProps<typeof SelectMenuList>
 export default SelectMenuList
diff --git a/src/SelectMenu/SelectMenuLoadingAnimation.js b/src/SelectMenu/SelectMenuLoadingAnimation.tsx
similarity index 71%
rename from src/SelectMenu/SelectMenuLoadingAnimation.js
rename to src/SelectMenu/SelectMenuLoadingAnimation.tsx
index 3a1843c47ce..374790fd103 100644
--- a/src/SelectMenu/SelectMenuLoadingAnimation.js
+++ b/src/SelectMenu/SelectMenuLoadingAnimation.tsx
@@ -2,7 +2,8 @@ import React from 'react'
 import styled, {keyframes} from 'styled-components'
 import StyledOcticon from '../StyledOcticon'
 import {OctofaceIcon} from '@primer/octicons-react'
-import {get, COMMON} from '../constants'
+import {get, COMMON, SystemCommonProps} from '../constants'
+import {ComponentProps} from '../utils/types'
 
 const pulseKeyframes = keyframes`
   0% {
@@ -16,7 +17,7 @@ const pulseKeyframes = keyframes`
   }
 `
 
-const Animation = styled.div`
+const Animation = styled.div<SystemCommonProps>`
   padding: ${get('space.6')} ${get('space.4')};
   text-align: center;
   background-color: ${get('colors.white')};
@@ -27,7 +28,9 @@ const Animation = styled.div`
   ${COMMON}
 `
 
-const SelectMenuLoadingAnimation = props => {
+export type SelectMenuLoadingAnimationProps = ComponentProps<typeof Animation>
+
+const SelectMenuLoadingAnimation = (props: SelectMenuLoadingAnimationProps) => {
   return (
     <Animation {...props}>
       <StyledOcticon size={32} icon={OctofaceIcon} />
diff --git a/src/SelectMenu/SelectMenuModal.js b/src/SelectMenu/SelectMenuModal.tsx
similarity index 68%
rename from src/SelectMenu/SelectMenuModal.js
rename to src/SelectMenu/SelectMenuModal.tsx
index 38f61c1b8e0..1460476d87f 100644
--- a/src/SelectMenu/SelectMenuModal.js
+++ b/src/SelectMenu/SelectMenuModal.tsx
@@ -1,10 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled, {keyframes, css} from 'styled-components'
-import {COMMON, get} from '../constants'
-import {width} from 'styled-system'
+import {COMMON, get, SystemCommonProps} from '../constants'
+import {width, WidthProps} from 'styled-system'
 import theme from '../theme'
-import sx from '../sx'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+
+type StyledModalProps = {
+  filter?: boolean
+} & WidthProps
+
+type StyledModalWrapperProps = {
+  align?: 'left' | 'right'
+} & SystemCommonProps &
+  SxProp
 
 const animateModal = keyframes`
   0% {
@@ -13,7 +23,7 @@ const animateModal = keyframes`
   }
 `
 
-const modalStyles = css`
+const modalStyles = css<StyledModalProps>`
   position: relative;
   z-index: 99; // Needs to be higher than .details-overlay's z-index: 80.
   display: flex;
@@ -40,7 +50,7 @@ const modalStyles = css`
   }
 `
 
-const modalWrapperStyles = css`
+const modalWrapperStyles = css<StyledModalWrapperProps>`
   position: fixed;
   top: 0;
   right: 0;
@@ -77,25 +87,30 @@ const modalWrapperStyles = css`
   }
 `
 
-const Modal = styled.div`
+const Modal = styled.div<StyledModalProps>`
   ${modalStyles}
   ${width}
 `
 
-const ModalWrapper = styled.div`
+const ModalWrapper = styled.div<StyledModalWrapperProps>`
   ${modalWrapperStyles}
   ${COMMON}
   ${sx};
 `
-const SelectMenuModal = React.forwardRef(({children, theme, width, ...rest}, forwardedRef) => {
-  return (
-    <ModalWrapper theme={theme} {...rest} role="menu" ref={forwardedRef}>
-      <Modal theme={theme} width={width}>
-        {children}
-      </Modal>
-    </ModalWrapper>
-  )
-})
+
+type SelectMenuModalInternalProps = Pick<StyledModalProps, 'width'> & ComponentProps<typeof ModalWrapper>
+
+const SelectMenuModal = React.forwardRef<HTMLDivElement, SelectMenuModalInternalProps>(
+  ({children, theme, width, ...rest}, forwardedRef) => {
+    return (
+      <ModalWrapper theme={theme} {...rest} role="menu" ref={forwardedRef}>
+        <Modal theme={theme} width={width}>
+          {children}
+        </Modal>
+      </ModalWrapper>
+    )
+  }
+)
 
 SelectMenuModal.defaultProps = {
   align: 'left',
@@ -113,4 +128,5 @@ SelectMenuModal.propTypes = {
 
 SelectMenuModal.displayName = 'SelectMenu.Modal'
 
+export type SelectMenuModalProps = ComponentProps<typeof SelectMenuModal>
 export default SelectMenuModal
diff --git a/src/SelectMenu/SelectMenuTab.js b/src/SelectMenu/SelectMenuTab.tsx
similarity index 85%
rename from src/SelectMenu/SelectMenuTab.js
rename to src/SelectMenu/SelectMenuTab.tsx
index 5e668c0a71a..8ed76f00bb6 100644
--- a/src/SelectMenu/SelectMenuTab.js
+++ b/src/SelectMenu/SelectMenuTab.tsx
@@ -3,9 +3,10 @@ import classnames from 'classnames'
 import PropTypes from 'prop-types'
 import styled, {css} from 'styled-components'
 import {MenuContext} from './SelectMenuContext'
-import {get, COMMON} from '../constants'
+import {get, COMMON, SystemCommonProps} from '../constants'
 import theme from '../theme'
-import sx from '../sx'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
 
 const tabStyles = css`
   flex: 1;
@@ -45,15 +46,17 @@ const tabStyles = css`
   }
 `
 
-const StyledTab = styled.button`
+const StyledTab = styled.button<SystemCommonProps & SxProp>`
   ${tabStyles}
   ${COMMON}
   ${sx};
 `
 
-const SelectMenuTab = ({tabName, index, className, onClick, ...rest}) => {
+export type SelectMenuTabProps = {tabName?: string; index?: number} & ComponentProps<typeof StyledTab>
+
+const SelectMenuTab = ({tabName, index, className, onClick, ...rest}: SelectMenuTabProps) => {
   const menuContext = useContext(MenuContext)
-  const handleClick = e => {
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     // if consumer has attached an onClick event, call it
     onClick && onClick(e)
     if (!e.defaultPrevented) {
diff --git a/src/SelectMenu/SelectMenuTabPanel.js b/src/SelectMenu/SelectMenuTabPanel.tsx
similarity index 75%
rename from src/SelectMenu/SelectMenuTabPanel.js
rename to src/SelectMenu/SelectMenuTabPanel.tsx
index 0eddb9d3cb2..0a6047e1faf 100644
--- a/src/SelectMenu/SelectMenuTabPanel.js
+++ b/src/SelectMenu/SelectMenuTabPanel.tsx
@@ -7,21 +7,21 @@ import theme from '../theme'
 import {COMMON, get} from '../constants'
 import sx from '../sx'
 
-const TabPanelBase = ({tabName, className, children, ...rest}) => {
+const TabPanelBase = styled.div`
+  border-top: ${get('borderWidths.1')} solid ${get('colors.border.gray')};
+  ${COMMON}
+  ${sx};
+`
+
+const TabPanel = ({tabName, className, children, ...rest}) => {
   const menuContext = useContext(MenuContext)
   return (
-    <div role="tabpanel" className={className} hidden={menuContext.selectedTab !== tabName} {...rest}>
+    <TabPanelBase role="tabpanel" className={className} hidden={menuContext.selectedTab !== tabName} {...rest}>
       <SelectMenuList>{children}</SelectMenuList>
-    </div>
+    </TabPanelBase>
   )
 }
 
-const TabPanel = styled(TabPanelBase)`
-  border-top: ${get('borderWidths.1')} solid ${get('colors.border.gray')};
-  ${COMMON}
-  ${sx};
-`
-
 TabPanel.defaultProps = {
   theme
 }
diff --git a/src/SelectMenu/SelectMenuTabs.js b/src/SelectMenu/SelectMenuTabs.tsx
similarity index 100%
rename from src/SelectMenu/SelectMenuTabs.js
rename to src/SelectMenu/SelectMenuTabs.tsx

From 15394bbbc1ef7cff6a89d2ff72b9f7da59be4626 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Fri, 12 Feb 2021 12:08:07 -0800
Subject: [PATCH 2/6] Update the rest of select menu

---
 babel.config.js                       |   9 +-
 package.json                          |   1 +
 src/SelectMenu/SelectMenu.js          | 117 ----------------------
 src/SelectMenu/SelectMenu.tsx         | 137 ++++++++++++++++++++++++++
 src/SelectMenu/SelectMenuContext.tsx  |   8 +-
 src/SelectMenu/SelectMenuFilter.tsx   |   6 +-
 src/SelectMenu/SelectMenuItem.tsx     |  48 +++++----
 src/SelectMenu/SelectMenuTab.tsx      |   6 +-
 src/SelectMenu/SelectMenuTabPanel.tsx |  13 ++-
 src/SelectMenu/SelectMenuTabs.tsx     |  21 ++--
 src/SelectMenu/index.js               |   3 -
 src/SelectMenu/index.ts               |  15 +++
 yarn.lock                             |   9 ++
 13 files changed, 232 insertions(+), 161 deletions(-)
 delete mode 100644 src/SelectMenu/SelectMenu.js
 create mode 100644 src/SelectMenu/SelectMenu.tsx
 delete mode 100644 src/SelectMenu/index.js
 create mode 100644 src/SelectMenu/index.ts

diff --git a/babel.config.js b/babel.config.js
index 20b403b8c70..d93d727e779 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -4,7 +4,14 @@ function replacementPlugin(env) {
   return ['babel-plugin-transform-replace-expressions', {replace: defines[env]}]
 }
 
-const sharedPlugins = ['macros', 'preval', 'add-react-displayname', 'babel-plugin-styled-components', '@babel/plugin-proposal-nullish-coalescing-operator']
+const sharedPlugins = [
+  'macros',
+  'preval',
+  'add-react-displayname',
+  'babel-plugin-styled-components',
+  '@babel/plugin-proposal-nullish-coalescing-operator',
+  '@babel/plugin-proposal-optional-chaining'
+]
 
 function makePresets(moduleValue) {
   return ['@babel/preset-typescript', ['@babel/preset-react', {modules: moduleValue}]]
diff --git a/package.json b/package.json
index 2f97df640da..01dcd16fe80 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "@babel/core": "7.9.0",
     "@babel/eslint-parser": "7.12.1",
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.12.1",
+    "@babel/plugin-proposal-optional-chaining": "7.12.16",
     "@babel/plugin-transform-modules-commonjs": "7.12.1",
     "@babel/preset-react": "7.9.4",
     "@babel/preset-typescript": "7.12.7",
diff --git a/src/SelectMenu/SelectMenu.js b/src/SelectMenu/SelectMenu.js
deleted file mode 100644
index 31585e82d06..00000000000
--- a/src/SelectMenu/SelectMenu.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import React, {useRef, useState, useCallback, useEffect} from 'react'
-import styled from 'styled-components'
-import PropTypes from 'prop-types'
-import sx from '../sx'
-import {COMMON} from '../constants'
-import theme from '../theme'
-import {MenuContext} from './SelectMenuContext'
-import SelectMenuDivider from './SelectMenuDivider'
-import SelectMenuFilter from './SelectMenuFilter'
-import SelectMenuFooter from './SelectMenuFooter'
-import SelectMenuItem from './SelectMenuItem'
-import SelectMenuList from './SelectMenuList'
-import SelectMenuModal from './SelectMenuModal'
-import SelectMenuTabs from './SelectMenuTabs'
-import SelectMenuHeader from './SelectMenuHeader'
-import SelectMenuTab from './SelectMenuTab'
-import SelectMenuTabPanel from './SelectMenuTabPanel'
-import SelectMenuLoadingAnimation from './SelectMenuLoadingAnimation'
-import useKeyboardNav from './hooks/useKeyboardNav'
-
-const wrapperStyles = `
-  // Remove marker added by the display: list-item browser default
-  > summary {
-    list-style: none;
-  }
-  // Remove marker added by details polyfill
-  > summary::before {
-    display: none;
-  }
-  // Remove marker added by Chrome
-  > summary::-webkit-details-marker {
-    display: none;
-  }
-`
-
-const StyledSelectMenu = styled.details`
-  ${wrapperStyles}
-  ${COMMON}
-  ${sx};
-`
-
-// 'as' is spread out because we don't want users to be able to change the tag.
-const SelectMenu = React.forwardRef(({children, initialTab, as, ...rest}, forwardedRef) => {
-  const backupRef = useRef()
-  const ref = forwardedRef ?? backupRef
-  const [selectedTab, setSelectedTab] = useState(initialTab)
-  const [open, setOpen] = useState(false)
-  const menuProviderValues = {
-    selectedTab,
-    setSelectedTab,
-    setOpen,
-    open,
-    initialTab
-  }
-
-  const onClickOutside = useCallback(
-    event => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        if (!event.defaultPrevented) {
-          setOpen(false)
-        }
-      }
-    },
-    [ref, setOpen]
-  )
-
-  // handles the overlay behavior - closing the menu when clicking outside of it
-  useEffect(() => {
-    if (open) {
-      document.addEventListener('click', onClickOutside)
-      return () => {
-        document.removeEventListener('click', onClickOutside)
-      }
-    }
-  }, [open, onClickOutside])
-
-  function toggle(event) {
-    setOpen(event.target.open)
-  }
-
-  useKeyboardNav(ref, open, setOpen)
-
-  return (
-    <MenuContext.Provider value={menuProviderValues}>
-      <StyledSelectMenu ref={ref} {...rest} open={open} onToggle={toggle}>
-        {children}
-      </StyledSelectMenu>
-    </MenuContext.Provider>
-  )
-})
-
-SelectMenu.displayName = 'SelectMenu'
-SelectMenu.MenuContext = MenuContext
-SelectMenu.List = SelectMenuList
-SelectMenu.Divider = SelectMenuDivider
-SelectMenu.Filter = SelectMenuFilter
-SelectMenu.Footer = SelectMenuFooter
-SelectMenu.Item = SelectMenuItem
-SelectMenu.List = SelectMenuList
-SelectMenu.Modal = SelectMenuModal
-SelectMenu.Tabs = SelectMenuTabs
-SelectMenu.Tab = SelectMenuTab
-SelectMenu.TabPanel = SelectMenuTabPanel
-SelectMenu.Header = SelectMenuHeader
-SelectMenu.LoadingAnimation = SelectMenuLoadingAnimation
-
-SelectMenu.defaultProps = {
-  theme
-}
-
-SelectMenu.propTypes = {
-  initialTab: PropTypes.string,
-  ...COMMON.propTypes,
-  ...sx.propTypes
-}
-
-export default SelectMenu
diff --git a/src/SelectMenu/SelectMenu.tsx b/src/SelectMenu/SelectMenu.tsx
new file mode 100644
index 00000000000..ac2b847761f
--- /dev/null
+++ b/src/SelectMenu/SelectMenu.tsx
@@ -0,0 +1,137 @@
+import React, {useRef, useState, useCallback, useEffect} from 'react'
+import styled from 'styled-components'
+import PropTypes from 'prop-types'
+import sx, {SxProp} from '../sx'
+import {COMMON, SystemCommonProps} from '../constants'
+import theme from '../theme'
+import {MenuContext} from './SelectMenuContext'
+import SelectMenuDivider from './SelectMenuDivider'
+import SelectMenuFilter from './SelectMenuFilter'
+import SelectMenuFooter from './SelectMenuFooter'
+import SelectMenuItem from './SelectMenuItem'
+import SelectMenuList from './SelectMenuList'
+import SelectMenuModal from './SelectMenuModal'
+import SelectMenuTabs from './SelectMenuTabs'
+import SelectMenuHeader from './SelectMenuHeader'
+import SelectMenuTab from './SelectMenuTab'
+import SelectMenuTabPanel from './SelectMenuTabPanel'
+import SelectMenuLoadingAnimation from './SelectMenuLoadingAnimation'
+import useKeyboardNav from './hooks/useKeyboardNav'
+import {ComponentProps} from '../utils/types'
+
+const wrapperStyles = `
+  // Remove marker added by the display: list-item browser default
+  > summary {
+    list-style: none;
+  }
+  // Remove marker added by details polyfill
+  > summary::before {
+    display: none;
+  }
+  // Remove marker added by Chrome
+  > summary::-webkit-details-marker {
+    display: none;
+  }
+`
+
+const StyledSelectMenu = styled.details<SystemCommonProps & SxProp>`
+  ${wrapperStyles}
+  ${COMMON}
+  ${sx};
+`
+
+type SelectMenuInternalProps = {
+  initialTab?: string
+  as?: React.ReactElement
+} & ComponentProps<typeof StyledSelectMenu>
+
+// 'as' is spread out because we don't want users to be able to change the tag.
+const SelectMenu = React.forwardRef<HTMLElement, SelectMenuInternalProps>(
+  ({children, initialTab = '', as, ...rest}, forwardedRef) => {
+    const backupRef = useRef<HTMLElement>(null)
+    const ref = forwardedRef ?? backupRef
+    const [selectedTab, setSelectedTab] = useState(initialTab)
+    const [open, setOpen] = useState(false)
+    const menuProviderValues = {
+      selectedTab,
+      setSelectedTab,
+      setOpen,
+      open,
+      initialTab
+    }
+
+    const onClickOutside = useCallback(
+      event => {
+        if ('current' in ref && ref.current && !ref.current.contains(event.target)) {
+          if (!event.defaultPrevented) {
+            setOpen(false)
+          }
+        }
+      },
+      [ref, setOpen]
+    )
+
+    // handles the overlay behavior - closing the menu when clicking outside of it
+    useEffect(() => {
+      if (open) {
+        document.addEventListener('click', onClickOutside)
+        return () => {
+          document.removeEventListener('click', onClickOutside)
+        }
+      }
+    }, [open, onClickOutside])
+
+    function toggle(event: React.SyntheticEvent<HTMLDetailsElement, Event>) {
+      setOpen((event.target as HTMLDetailsElement).open)
+    }
+
+    useKeyboardNav(ref, open, setOpen)
+
+    return (
+      <MenuContext.Provider value={menuProviderValues}>
+        <StyledSelectMenu ref={ref} {...rest} open={open} onToggle={toggle}>
+          {children}
+        </StyledSelectMenu>
+      </MenuContext.Provider>
+    )
+  }
+)
+
+SelectMenu.displayName = 'SelectMenu'
+
+SelectMenu.defaultProps = {
+  theme
+}
+
+SelectMenu.propTypes = {
+  initialTab: PropTypes.string,
+  ...COMMON.propTypes,
+  ...sx.propTypes
+}
+
+export type SelectMenuProps = ComponentProps<typeof SelectMenu>
+export type {SelectMenuDividerProps} from './SelectMenuDivider'
+export type {SelectMenuFilterProps} from './SelectMenuFilter'
+export type {SelectMenuFooterProps} from './SelectMenuFooter'
+export type {SelectMenuItemProps} from './SelectMenuItem'
+export type {SelectMenuListProps} from './SelectMenuList'
+export type {SelectMenuModalProps} from './SelectMenuModal'
+export type {SelectMenuTabsProps} from './SelectMenuTabs'
+export type {SelectMenuHeaderProps} from './SelectMenuHeader'
+export type {SelectMenuTabProps} from './SelectMenuTab'
+export type {SelectMenuTabPanelProps} from './SelectMenuTabPanel'
+export type {SelectMenuLoadingAnimationProps} from './SelectMenuLoadingAnimation'
+export default Object.assign(SelectMenu, {
+  MenuContext: MenuContext,
+  List: SelectMenuList,
+  Divider: SelectMenuDivider,
+  Filter: SelectMenuFilter,
+  Footer: SelectMenuFooter,
+  Item: SelectMenuItem,
+  Modal: SelectMenuModal,
+  Tabs: SelectMenuTabs,
+  Tab: SelectMenuTab,
+  TabPanel: SelectMenuTabPanel,
+  Header: SelectMenuHeader,
+  LoadingAnimation: SelectMenuLoadingAnimation
+})
diff --git a/src/SelectMenu/SelectMenuContext.tsx b/src/SelectMenu/SelectMenuContext.tsx
index c1e98789814..53803162eb2 100644
--- a/src/SelectMenu/SelectMenuContext.tsx
+++ b/src/SelectMenu/SelectMenuContext.tsx
@@ -1,3 +1,9 @@
 import {createContext} from 'react'
 
-export const MenuContext = createContext(null)
+export const MenuContext = createContext<{
+  selectedTab?: string
+  setSelectedTab?: React.Dispatch<React.SetStateAction<string>>
+  setOpen?: React.Dispatch<React.SetStateAction<boolean>>
+  open?: boolean
+  initialTab?: string
+}>({})
diff --git a/src/SelectMenu/SelectMenuFilter.tsx b/src/SelectMenu/SelectMenuFilter.tsx
index b40cc27f941..f471577535e 100644
--- a/src/SelectMenu/SelectMenuFilter.tsx
+++ b/src/SelectMenu/SelectMenuFilter.tsx
@@ -5,7 +5,7 @@ import {COMMON, get, SystemCommonProps} from '../constants'
 import theme from '../theme'
 import TextInput, {TextInputProps} from '../TextInput'
 import {MenuContext} from './SelectMenuContext'
-import sx from '../sx'
+import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
 
 const StyledForm = styled.form<SystemCommonProps & SxProp>`
@@ -28,14 +28,14 @@ type SelectMenuFilterInternalProps = {
 
 const SelectMenuFilter = forwardRef<HTMLInputElement, SelectMenuFilterInternalProps>(
   ({theme, value, sx, ...rest}, forwardedRef) => {
-    const inputRef = useRef(null)
+    const inputRef = useRef<HTMLInputElement>(null)
     const ref = forwardedRef ?? inputRef
     const {open} = useContext(MenuContext)
 
     // puts focus on the filter input when the menu is opened
     useEffect(() => {
       if (open) {
-        inputRef.current.focus()
+        inputRef.current?.focus()
       }
     }, [open])
 
diff --git a/src/SelectMenu/SelectMenuItem.tsx b/src/SelectMenu/SelectMenuItem.tsx
index 6cab7a81423..aac2b633fd0 100644
--- a/src/SelectMenu/SelectMenuItem.tsx
+++ b/src/SelectMenu/SelectMenuItem.tsx
@@ -3,10 +3,11 @@ import PropTypes from 'prop-types'
 import styled, {css} from 'styled-components'
 import {CheckIcon} from '@primer/octicons-react'
 import {MenuContext} from './SelectMenuContext'
-import {COMMON, get} from '../constants'
+import {COMMON, get, SystemCommonProps} from '../constants'
 import StyledOcticon from '../StyledOcticon'
 import theme from '../theme'
-import sx from '../sx'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
 
 export const listItemStyles = css`
   display: flex;
@@ -94,33 +95,39 @@ export const listItemStyles = css`
 
 const StyledItem = styled.a.attrs(() => ({
   role: 'menuitemcheckbox'
-}))`
+}))<SystemCommonProps & SxProp>`
   ${listItemStyles}
   ${COMMON}
   ${sx};
 `
 
-const SelectMenuItem = forwardRef(({children, selected, theme, onClick, ...rest}, forwardedRef) => {
-  const menuContext = useContext(MenuContext)
-  const backupRef = useRef(null)
-  const itemRef = forwardedRef ?? backupRef
+type SelectMenuItemInteralProps = {
+  selected?: boolean
+} & ComponentProps<typeof StyledItem>
 
-  // close the menu when an item is clicked
-  // this can be overriden if the user provides a `onClick` prop and prevents default in it
-  const handleClick = e => {
-    onClick && onClick(e)
+const SelectMenuItem = forwardRef<HTMLAnchorElement, SelectMenuItemInteralProps>(
+  ({children, selected, theme, onClick, ...rest}, forwardedRef) => {
+    const menuContext = useContext(MenuContext)
+    const backupRef = useRef<HTMLAnchorElement>(null)
+    const itemRef = forwardedRef ?? backupRef
 
-    if (!e.defaultPrevented) {
-      menuContext.setOpen(false)
+    // close the menu when an item is clicked
+    // this can be overriden if the user provides a `onClick` prop and prevents default in it
+    const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+      onClick && onClick(e)
+
+      if (!e.defaultPrevented) {
+        menuContext.setOpen?.(false)
+      }
     }
+    return (
+      <StyledItem ref={itemRef} {...rest} theme={theme} onClick={handleClick} aria-checked={selected}>
+        <StyledOcticon theme={theme} className="SelectMenu-icon SelectMenu-selected-icon" icon={CheckIcon} />
+        {children}
+      </StyledItem>
+    )
   }
-  return (
-    <StyledItem ref={itemRef} {...rest} theme={theme} onClick={handleClick} aria-checked={selected}>
-      <StyledOcticon theme={theme} className="SelectMenu-icon SelectMenu-selected-icon" icon={CheckIcon} />
-      {children}
-    </StyledItem>
-  )
-})
+)
 
 SelectMenuItem.defaultProps = {
   theme,
@@ -135,4 +142,5 @@ SelectMenuItem.propTypes = {
 
 SelectMenuItem.displayName = 'SelectMenu.Item'
 
+export type SelectMenuItemProps = ComponentProps<typeof SelectMenuItem>
 export default SelectMenuItem
diff --git a/src/SelectMenu/SelectMenuTab.tsx b/src/SelectMenu/SelectMenuTab.tsx
index 8ed76f00bb6..2f21fcb329b 100644
--- a/src/SelectMenu/SelectMenuTab.tsx
+++ b/src/SelectMenu/SelectMenuTab.tsx
@@ -54,20 +54,20 @@ const StyledTab = styled.button<SystemCommonProps & SxProp>`
 
 export type SelectMenuTabProps = {tabName?: string; index?: number} & ComponentProps<typeof StyledTab>
 
-const SelectMenuTab = ({tabName, index, className, onClick, ...rest}: SelectMenuTabProps) => {
+const SelectMenuTab = ({tabName = '', index, className, onClick, ...rest}: SelectMenuTabProps) => {
   const menuContext = useContext(MenuContext)
   const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     // if consumer has attached an onClick event, call it
     onClick && onClick(e)
     if (!e.defaultPrevented) {
-      menuContext.setSelectedTab(tabName)
+      menuContext.setSelectedTab?.(tabName)
     }
   }
 
   // if no tab is selected when the component renders, show the first tab
   useEffect(() => {
     if (!menuContext.selectedTab && index === 0) {
-      menuContext.setSelectedTab(tabName)
+      menuContext.setSelectedTab?.(tabName)
     }
   }, [index, menuContext, tabName])
 
diff --git a/src/SelectMenu/SelectMenuTabPanel.tsx b/src/SelectMenu/SelectMenuTabPanel.tsx
index 0a6047e1faf..91132809e22 100644
--- a/src/SelectMenu/SelectMenuTabPanel.tsx
+++ b/src/SelectMenu/SelectMenuTabPanel.tsx
@@ -4,16 +4,21 @@ import styled from 'styled-components'
 import {MenuContext} from './SelectMenuContext'
 import SelectMenuList from './SelectMenuList'
 import theme from '../theme'
-import {COMMON, get} from '../constants'
-import sx from '../sx'
+import {COMMON, get, SystemCommonProps} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
 
-const TabPanelBase = styled.div`
+const TabPanelBase = styled.div<SystemCommonProps & SxProp>`
   border-top: ${get('borderWidths.1')} solid ${get('colors.border.gray')};
   ${COMMON}
   ${sx};
 `
 
-const TabPanel = ({tabName, className, children, ...rest}) => {
+export type SelectMenuTabPanelProps = {
+  tabName?: string
+} & ComponentProps<typeof TabPanelBase>
+
+const TabPanel = ({tabName, className, children, ...rest}: SelectMenuTabPanelProps) => {
   const menuContext = useContext(MenuContext)
   return (
     <TabPanelBase role="tabpanel" className={className} hidden={menuContext.selectedTab !== tabName} {...rest}>
diff --git a/src/SelectMenu/SelectMenuTabs.tsx b/src/SelectMenu/SelectMenuTabs.tsx
index c29af373eb4..7c935159a3b 100644
--- a/src/SelectMenu/SelectMenuTabs.tsx
+++ b/src/SelectMenu/SelectMenuTabs.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
 import styled, {css} from 'styled-components'
-import {COMMON, get} from '../constants'
+import {COMMON, get, SystemCommonProps} from '../constants'
 import theme from '../theme'
-import sx from '../sx'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
 
 const tabWrapperStyles = css`
   display: flex;
@@ -23,7 +24,15 @@ const tabWrapperStyles = css`
   }
 `
 
-const Tabs = ({children, ...rest}) => {
+const SelectMenuTabsBase = styled.div<SystemCommonProps & SxProp>`
+  ${tabWrapperStyles}
+  ${COMMON}
+  ${sx};
+`
+
+export type SelectMenuTabsProps = ComponentProps<typeof SelectMenuTabsBase>
+
+const SelectMenuTabs = ({children, ...rest}: SelectMenuTabsProps) => {
   return (
     <div role="tablist" {...rest}>
       {children}
@@ -31,12 +40,6 @@ const Tabs = ({children, ...rest}) => {
   )
 }
 
-const SelectMenuTabs = styled(Tabs)`
-  ${tabWrapperStyles}
-  ${COMMON}
-  ${sx};
-`
-
 SelectMenuTabs.defaultProps = {
   theme
 }
diff --git a/src/SelectMenu/index.js b/src/SelectMenu/index.js
deleted file mode 100644
index 64cf8e036d8..00000000000
--- a/src/SelectMenu/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import SelectMenu from './SelectMenu'
-
-export default SelectMenu
diff --git a/src/SelectMenu/index.ts b/src/SelectMenu/index.ts
new file mode 100644
index 00000000000..623e81b7237
--- /dev/null
+++ b/src/SelectMenu/index.ts
@@ -0,0 +1,15 @@
+export {default} from './SelectMenu'
+export type {
+  SelectMenuProps,
+  SelectMenuDividerProps,
+  SelectMenuFilterProps,
+  SelectMenuFooterProps,
+  SelectMenuItemProps,
+  SelectMenuListProps,
+  SelectMenuModalProps,
+  SelectMenuTabsProps,
+  SelectMenuHeaderProps,
+  SelectMenuTabProps,
+  SelectMenuTabPanelProps,
+  SelectMenuLoadingAnimationProps
+} from './SelectMenu'
diff --git a/yarn.lock b/yarn.lock
index 18db3042716..dd6a4ed4f62 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -740,6 +740,15 @@
     "@babel/helper-plugin-utils" "^7.12.13"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
 
+"@babel/plugin-proposal-optional-chaining@7.12.16":
+  version "7.12.16"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.16.tgz#600c7531f754186b0f2096e495a92da7d88aa139"
+  integrity sha512-O3ohPwOhkwji5Mckb7F/PJpJVJY3DpPsrt/F0Bk40+QMk9QpAIqeGusHWqu/mYqsM8oBa6TziL/2mbERWsUZjg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+
 "@babel/plugin-proposal-optional-chaining@^7.12.1", "@babel/plugin-proposal-optional-chaining@^7.12.13":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.13.tgz#63a7d805bc8ce626f3234ee5421a2a7fb23f66d9"

From 6c5b88ceeceda4382d24d7960f34599cbf8ed33a Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Fri, 12 Feb 2021 12:19:03 -0800
Subject: [PATCH 3/6] Update tests

---
 src/SelectMenu/SelectMenuItem.tsx             |  1 +
 .../{SelectMenu.js => SelectMenu.tsx}         | 42 ++++++++++++++++---
 ...SelectMenu.js.snap => SelectMenu.tsx.snap} |  0
 3 files changed, 38 insertions(+), 5 deletions(-)
 rename src/__tests__/{SelectMenu.js => SelectMenu.tsx} (81%)
 rename src/__tests__/__snapshots__/{SelectMenu.js.snap => SelectMenu.tsx.snap} (100%)

diff --git a/src/SelectMenu/SelectMenuItem.tsx b/src/SelectMenu/SelectMenuItem.tsx
index aac2b633fd0..15d49a5adb0 100644
--- a/src/SelectMenu/SelectMenuItem.tsx
+++ b/src/SelectMenu/SelectMenuItem.tsx
@@ -102,6 +102,7 @@ const StyledItem = styled.a.attrs(() => ({
 `
 
 type SelectMenuItemInteralProps = {
+  as?: React.ElementType
   selected?: boolean
 } & ComponentProps<typeof StyledItem>
 
diff --git a/src/__tests__/SelectMenu.js b/src/__tests__/SelectMenu.tsx
similarity index 81%
rename from src/__tests__/SelectMenu.js
rename to src/__tests__/SelectMenu.tsx
index 4699f5a5d9f..78674064b66 100644
--- a/src/__tests__/SelectMenu.js
+++ b/src/__tests__/SelectMenu.tsx
@@ -5,9 +5,32 @@ import {COMMON} from '../constants'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'
+import {SelectMenuModalProps, SelectMenuItemProps, SelectMenuTabProps} from '../SelectMenu'
 expect.extend(toHaveNoViolations)
 
-const BasicSelectMenu = ({onClick, as, align = 'left'}) => {
+// TODO: Remove this after https://github.com/primer/components/pull/1041 is merged
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace jest {
+    interface Matchers<R> {
+      toImplementSystemProps: (systemProps: any) => boolean
+      toImplementSxProp: () => boolean
+      toImplementSxBehavior: () => boolean
+      toSetDefaultTheme: () => boolean
+      toSetExports: (exports: Record<string, string>) => boolean
+    }
+  }
+}
+
+const BasicSelectMenu = ({
+  onClick,
+  as,
+  align = 'left'
+}: {
+  onClick?: SelectMenuItemProps['onClick']
+  as?: any
+  align?: SelectMenuModalProps['align']
+}) => {
   return (
     <SelectMenu as={as}>
       <Button as="summary">Projects</Button>
@@ -29,7 +52,7 @@ const BasicSelectMenu = ({onClick, as, align = 'left'}) => {
   )
 }
 
-const MenuWithTabs = ({onClick}) => {
+const MenuWithTabs = ({onClick}: {onClick?: SelectMenuTabProps['onClick']}) => {
   return (
     <SelectMenu initialTab="Organization">
       <Button as="summary">Projects</Button>
@@ -58,9 +81,18 @@ describe('SelectMenu', () => {
     default: SelectMenu
   })
 
-  for (const subComp of ['List', 'Divider', 'Filter', 'Item', 'List', 'Modal', 'Tabs', 'Tab', 'TabPanel', 'Header']) {
-    const Comp = SelectMenu[subComp]
-
+  for (const Comp of [
+    SelectMenu.List,
+    SelectMenu.Divider,
+    SelectMenu.Filter,
+    SelectMenu.Item,
+    SelectMenu.List,
+    SelectMenu.Modal,
+    SelectMenu.Tabs,
+    SelectMenu.Tab,
+    SelectMenu.TabPanel,
+    SelectMenu.Header
+  ]) {
     it('implements the sx prop', () => {
       expect(Comp).toImplementSxProp()
     })
diff --git a/src/__tests__/__snapshots__/SelectMenu.js.snap b/src/__tests__/__snapshots__/SelectMenu.tsx.snap
similarity index 100%
rename from src/__tests__/__snapshots__/SelectMenu.js.snap
rename to src/__tests__/__snapshots__/SelectMenu.tsx.snap

From f11e6ac67ff675137e672a33d445678fd3b64b3a Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Fri, 12 Feb 2021 12:20:01 -0800
Subject: [PATCH 4/6] Create many-bears-juggle.md

---
 .changeset/many-bears-juggle.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/many-bears-juggle.md

diff --git a/.changeset/many-bears-juggle.md b/.changeset/many-bears-juggle.md
new file mode 100644
index 00000000000..d05df69014d
--- /dev/null
+++ b/.changeset/many-bears-juggle.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `SelectMenu` to TypeScript

From ba8766de20bb55949b852587fffe0c7bc992dc94 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Fri, 19 Feb 2021 11:20:47 -0800
Subject: [PATCH 5/6] Update tests

---
 src/__tests__/SelectMenu.tsx | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/src/__tests__/SelectMenu.tsx b/src/__tests__/SelectMenu.tsx
index 78674064b66..84774d58dc3 100644
--- a/src/__tests__/SelectMenu.tsx
+++ b/src/__tests__/SelectMenu.tsx
@@ -8,20 +8,6 @@ import 'babel-polyfill'
 import {SelectMenuModalProps, SelectMenuItemProps, SelectMenuTabProps} from '../SelectMenu'
 expect.extend(toHaveNoViolations)
 
-// TODO: Remove this after https://github.com/primer/components/pull/1041 is merged
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace jest {
-    interface Matchers<R> {
-      toImplementSystemProps: (systemProps: any) => boolean
-      toImplementSxProp: () => boolean
-      toImplementSxBehavior: () => boolean
-      toSetDefaultTheme: () => boolean
-      toSetExports: (exports: Record<string, string>) => boolean
-    }
-  }
-}
-
 const BasicSelectMenu = ({
   onClick,
   as,
@@ -130,7 +116,7 @@ describe('SelectMenu', () => {
     const component = mount(<MenuWithTabs />)
     const tab = component.find("[data-test='repo-tab']").first()
     tab.simulate('click')
-    expect(tab.getDOMNode().attributes['aria-selected']).toBeTruthy()
+    expect(tab.getDOMNode().attributes.getNamedItem('aria-selected')).toBeTruthy()
   })
 
   it('selected items have aria-checked', () => {
@@ -158,7 +144,7 @@ describe('SelectMenu', () => {
     const component = mount(<BasicSelectMenu />)
     const item = component.find("[data-test='menu-item']").first()
     item.simulate('click')
-    expect(component.getDOMNode().attributes.open).toBeFalsy()
+    expect(component.getDOMNode().attributes.getNamedItem('open')).toBeFalsy()
   })
 
   it('right-aligned modal has right: 0px', () => {

From c0ee5afb7065d4ad20676d13c97234a0b5067cae Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Fri, 19 Feb 2021 11:34:03 -0800
Subject: [PATCH 6/6] Fix select menu tabs style

---
 src/SelectMenu/SelectMenuTabs.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/SelectMenu/SelectMenuTabs.tsx b/src/SelectMenu/SelectMenuTabs.tsx
index 7c935159a3b..b116ea96c95 100644
--- a/src/SelectMenu/SelectMenuTabs.tsx
+++ b/src/SelectMenu/SelectMenuTabs.tsx
@@ -34,9 +34,9 @@ export type SelectMenuTabsProps = ComponentProps<typeof SelectMenuTabsBase>
 
 const SelectMenuTabs = ({children, ...rest}: SelectMenuTabsProps) => {
   return (
-    <div role="tablist" {...rest}>
+    <SelectMenuTabsBase role="tablist" {...rest}>
       {children}
-    </div>
+    </SelectMenuTabsBase>
   )
 }