fix Dropdown docs & types

.changeset/tricky-mugs-attend.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+- Fixed Dropdown & Details types.

.changeset/violet-oranges-speak.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+- Added useDetails behavior back to Dropdown

docs/content/Dropdown.md

@@ -34,49 +34,14 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi
 </Dropdown>
 ```
 
-## Manage the open state manually
-The `Dropdown` element is built to also let you manage the open state and toggle functionality if necessary. Just provide values to the `open` and `onToggle` props.
-
-**Note:** Closing the dropdown on outside clicks will not function automatically if you chose to provide your own `open` state. You'll need to implement this yourself. You can use the `onClickOutside` prop to implement and customize this behavior.
-
-```jsx live
-<State default={false}>
-  {([open, setOpen]) => {
-
-    const handleToggle = (e) => setOpen(e.target.open)
-    const handleClickOutside = () => setOpen(false)
-
-    return (
-      <Dropdown open={open} onToggle={handleToggle} onClickOutside={handleClickOutside} overlay={true}>
-        <Dropdown.Button>Dropdown</Dropdown.Button>
-        <Dropdown.Menu direction='sw'>
-          <Dropdown.Item>Item 1</Dropdown.Item>
-          <Dropdown.Item>Item 2</Dropdown.Item>
-          <Dropdown.Item>Item 3</Dropdown.Item>
-        </Dropdown.Menu>
-      </Dropdown>
-    )
-  }}
-</State>
-```
 
 ## System props
 
 Dropdown, Dropdown.Menu, Dropdown.Button, Dropdown.Caret, and Dropdown.Item all get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 ## Component props
 
-The Dropdown component is extended from the [`Details`](/Details) component and gets all props that the [`Details`](/Details) component gets. They are listed below, but you may reference the [`Details`](/Details) docs for more details on how to manage your own `open` state.
-
-#### Dropdown
-| Name | Type | Default | Description |
-| :- | :- | :-: | :- |
-| defaultOpen | Boolean | | Sets the initial open/closed state |
-| overlay | Boolean | false | Sets whether or not element will close when user clicks outside of it |
-| open | Boolean | | Use the open prop if you'd like to manage the open state |
-| onToggle | Function | | Called whenever user clicks on `summary` element. If you are controlling your own `open` state this will be the only function called on click, otherwise it's called before the internal `handleToggle` function.|
-| onClickOutside | Function | | Function to call whenever user clicks outside of the Details component. This is optional and only necessary if you are controlling your own `open` state. |
-
+The Dropdown component is extended from the [`Details`](/Details) component and gets all props that the [`Details`](/Details) component gets.
 
 
 #### Dropdown.Menu

index.d.ts

@@ -76,9 +76,7 @@ declare module '@primer/components' {
 
 
   export interface DetailsProps extends CommonProps, Omit<React.DetailsHTMLAttributes<HTMLDetailsElement>, 'color'> {
-    onToggle: (event: React.SyntheticEvent<HTMLDetailsElement>) => void
-    open: boolean
-    ref: React.RefObject<HTMLDetailsElement>
+    ref?: React.RefObject<HTMLDetailsElement>
   }
 
   export const Details: React.FunctionComponent<DetailsProps>
@@ -184,7 +182,6 @@ declare module '@primer/components' {
 
   export const StyledOcticon: React.FunctionComponent<StyledOcticonProps>
 
-  export interface DropdownProps extends DetailsProps {}
   export interface DropdownItemProps extends CommonProps, Omit<React.HTMLAttributes<HTMLLIElement>, 'color'> {}
 
   export interface DropdownMenuProps extends CommonProps, Omit<React.HTMLAttributes<HTMLUListElement>, 'color'> {
@@ -195,7 +192,7 @@ declare module '@primer/components' {
 
   export interface DropdownCaretProps extends CommonProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {}
 
-  export const Dropdown: React.FunctionComponent<DropdownProps> & {
+  export const Dropdown: React.FunctionComponent<DetailsProps> & {
     Menu: React.FunctionComponent<DropdownMenuProps>
     Item: React.FunctionComponent<DropdownItemProps>
     Button: React.FunctionComponent<DropdownButtonProps>

src/Details.tsx

@@ -4,10 +4,7 @@ import {COMMON, SystemCommonProps} from './constants'
 import {ComponentProps} from './utils/types'
 import sx, {SxProp} from './sx'
 
-type StyledDetailsProps = {
-  open?: boolean
-} & SystemCommonProps &
-  SxProp
+type StyledDetailsProps = SystemCommonProps & SxProp
 
 const Details = styled.details<StyledDetailsProps>`
   & > summary {

src/Dropdown.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import Button from './Button'
 import Details from './Details'
+import useDetails from './hooks/useDetails'
 import {COMMON, get} from './constants'
 import getDirectionStyles from './DropdownStyles'
 import theme from './theme'
@@ -14,8 +15,9 @@ const StyledDetails = styled(Details)`
 `
 
 const Dropdown = ({children, className, ...rest}) => {
+  const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
   return (
-    <StyledDetails closeOnOutsideClick className={className} {...rest}>
+    <StyledDetails className={className} {...getDetailsProps()} {...rest}>
       {children}
     </StyledDetails>
   )

src/__tests__/__snapshots__/Dropdown.js.snap

@@ -16,6 +16,7 @@ exports[`Dropdown renders consistently 1`] = `
 
 <details
   className="c0"
+  onToggle={[Function]}
 >
   Hello!
 </details>