Migrate SelectMenu to TypeScript

.changeset/many-bears-juggle.md

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

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}]]

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",

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
+})

src/SelectMenu/SelectMenuContext.tsx

@@ -0,0 +1,9 @@
+import {createContext} from 'react'
+
+export const MenuContext = createContext<{
+  selectedTab?: string
+  setSelectedTab?: React.Dispatch<React.SetStateAction<string>>
+  setOpen?: React.Dispatch<React.SetStateAction<boolean>>
+  open?: boolean
+  initialTab?: string
+}>({})

src/SelectMenu/SelectMenuDivider.js → 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