From 9bff78e59f1c459bc6aae245776ce003f9bd01eb Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Fri, 19 Feb 2021 12:57:19 -0800
Subject: [PATCH] Migrate Dropdown to TypeScript

---
 src/{Dropdown.js => Dropdown.tsx}             | 64 ++++++++++++-------
 src/{DropdownStyles.js => DropdownStyles.ts}  |  2 +-
 src/__tests__/{Dropdown.js => Dropdown.tsx}   |  0
 .../{Dropdown.js.snap => Dropdown.tsx.snap}   |  0
 4 files changed, 42 insertions(+), 24 deletions(-)
 rename src/{Dropdown.js => Dropdown.tsx} (65%)
 rename src/{DropdownStyles.js => DropdownStyles.ts} (96%)
 rename src/__tests__/{Dropdown.js => Dropdown.tsx} (100%)
 rename src/__tests__/__snapshots__/{Dropdown.js.snap => Dropdown.tsx.snap} (100%)

diff --git a/src/Dropdown.js b/src/Dropdown.tsx
similarity index 65%
rename from src/Dropdown.js
rename to src/Dropdown.tsx
index 2a033cdf52a..5709b4d2b9d 100644
--- a/src/Dropdown.js
+++ b/src/Dropdown.tsx
@@ -1,20 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import Button from './Button'
-import Details from './Details'
+import Button, {ButtonProps} from './Button'
+import Details, {DetailsProps} from './Details'
 import useDetails from './hooks/useDetails'
-import {COMMON, get} from './constants'
+import {COMMON, get, SystemCommonProps} from './constants'
 import getDirectionStyles from './DropdownStyles'
 import theme from './theme'
-import sx from './sx'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
 
 const StyledDetails = styled(Details)`
   position: relative;
   display: inline-block;
 `
 
-const Dropdown = ({children, className, ...rest}) => {
+export type DropdownProps = DetailsProps
+
+const Dropdown = ({children, className, ...rest}: DropdownProps) => {
   const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
   return (
     <StyledDetails className={className} {...getDetailsProps()} {...rest}>
@@ -23,16 +26,18 @@ const Dropdown = ({children, className, ...rest}) => {
   )
 }
 
-Dropdown.Button = ({children, ...rest}) => {
+export type DropdownButtonProps = ButtonProps
+
+const DropdownButton = ({children, ...rest}: DropdownButtonProps) => {
   return (
     <Button as="summary" aria-haspopup="true" {...rest}>
       {children}
-      <Dropdown.Caret />
+      <DropdownCaret />
     </Button>
   )
 }
 
-Dropdown.Caret = styled.div`
+const DropdownCaret = styled.div<SystemCommonProps & SxProp>`
   border: 4px solid transparent;
   margin-left: 12px;
   border-top-color: currentcolor;
@@ -46,7 +51,12 @@ Dropdown.Caret = styled.div`
   ${sx};
 `
 
-Dropdown.Menu = styled.ul`
+type StyledDropdownMenuProps = {
+  direction?: 'ne' | 'e' | 'se' | 's' | 'sw' | 'w'
+} & SystemCommonProps &
+  SxProp
+
+const DropdownMenu = styled.ul<StyledDropdownMenuProps>`
   background-clip: padding-box;
   background-color: ${get('colors.white')};
   border: 1px solid rgba(27, 31, 35, 0.15);
@@ -92,7 +102,7 @@ Dropdown.Menu = styled.ul`
   ${sx};
 `
 
-Dropdown.Item = styled.li`
+const DropdownItem = styled.li`
   display: block;
   padding: ${get('space.1')} 10px ${get('space.1')} 15px;
   overflow: hidden;
@@ -127,37 +137,37 @@ Dropdown.Item = styled.li`
   ${sx};
 `
 
-Dropdown.Menu.propTypes = {
+DropdownMenu.propTypes = {
   direction: PropTypes.oneOf(['ne', 'e', 'se', 's', 'sw', 'w']),
   ...COMMON.propTypes,
   ...sx.propTypes
 }
 
-Dropdown.Menu.defaultProps = {
+DropdownMenu.defaultProps = {
   direction: 'sw',
   theme
 }
-Dropdown.Menu.displayName = 'Dropdown.Menu'
+DropdownMenu.displayName = 'Dropdown.Menu'
 
-Dropdown.Item.defaultProps = {theme}
-Dropdown.Item.propTypes = {
+DropdownItem.defaultProps = {theme}
+DropdownItem.propTypes = {
   ...COMMON.propTypes,
   ...sx.propTypes
 }
-Dropdown.Item.displayName = 'Dropdown.Item'
+DropdownItem.displayName = 'Dropdown.Item'
 
-Dropdown.Button.defaultProps = {theme, ...Button.defaultProps}
-Dropdown.Button.propTypes = {
+DropdownButton.defaultProps = {theme, ...Button.defaultProps}
+DropdownButton.propTypes = {
   ...Button.propTypes
 }
-Dropdown.Button.displayName = 'Dropdown.Button'
+DropdownButton.displayName = 'Dropdown.Button'
 
-Dropdown.Caret.defaultProps = {theme}
-Dropdown.Caret.propTypes = {
+DropdownCaret.defaultProps = {theme}
+DropdownCaret.propTypes = {
   ...COMMON.propTypes,
   ...sx.propTypes
 }
-Dropdown.Caret.displayName = 'Dropdown.Caret'
+DropdownCaret.displayName = 'Dropdown.Caret'
 
 Dropdown.defaultProps = {theme, ...Details.defaultProps}
 Dropdown.propTypes = {
@@ -165,4 +175,12 @@ Dropdown.propTypes = {
   ...COMMON.propTypes
 }
 
-export default Dropdown
+export type DropdownCaretProps = ComponentProps<typeof DropdownCaret>
+export type DropdownMenuProps = ComponentProps<typeof DropdownMenu>
+export type DropdownItemProps = ComponentProps<typeof DropdownItem>
+export default Object.assign(Dropdown, {
+  Caret: DropdownCaret,
+  Menu: DropdownMenu,
+  Item: DropdownItem,
+  Button: DropdownButton
+})
diff --git a/src/DropdownStyles.js b/src/DropdownStyles.ts
similarity index 96%
rename from src/DropdownStyles.js
rename to src/DropdownStyles.ts
index 78fd6435a08..279742a595e 100644
--- a/src/DropdownStyles.js
+++ b/src/DropdownStyles.ts
@@ -1,6 +1,6 @@
 import {get} from './constants'
 
-const getDirectionStyles = (theme, direction) => {
+const getDirectionStyles = (theme: any, direction: 'ne' | 'e' | 'se' | 's' | 'sw' | 'w') => {
   const map = {
     w: `
       top: 0;
diff --git a/src/__tests__/Dropdown.js b/src/__tests__/Dropdown.tsx
similarity index 100%
rename from src/__tests__/Dropdown.js
rename to src/__tests__/Dropdown.tsx
diff --git a/src/__tests__/__snapshots__/Dropdown.js.snap b/src/__tests__/__snapshots__/Dropdown.tsx.snap
similarity index 100%
rename from src/__tests__/__snapshots__/Dropdown.js.snap
rename to src/__tests__/__snapshots__/Dropdown.tsx.snap