Release 14.0.0 Tracking PR 🌸

docs/content/Details.md

@@ -19,18 +19,13 @@ You are responsible for rendering your own `<summary>`. To style your summary el
 ```
 
 ## With children as a function
-The render function gets an object with two keys:
-
-* `open` is a boolean reflecting the `<details>` element's `open` attribute, and can be used to conditionally show or hide content.
-* `toggle` is a function that can be assigned to event handlers to trigger toggling of the `open` state.
-
-If you use this form or the render prop (see below), **you must attach the `toggle` prop as an event listener**. If you don't the render function will not be called when the element is toggled by the native browser behavior.
+The render function gets an object with the `open` prop to allow you to conditionally update UI based on the open state of the dropdown:
 
 ```jsx live
 <Details>
-  {({open, toggle}) => (
+  {({open}) => (
     <>
-      <Button as="summary" onClick={toggle}>
+      <Button as="summary">
         {open ? 'Hide' : 'Show'}
       </Button>
       <p>This should show and hide</p>
@@ -39,18 +34,6 @@ If you use this form or the render prop (see below), **you must attach the `togg
 </Details>
 ```
 
-## With render prop
-The Details component also accepts a `render` function prop.
-
-```jsx live
-<Details overlay render={({open, toggle}) => (
-  <>
-    <Button as="summary" onClick={toggle}>Open? {String(open)}</Button>
-    <p>This is the content.</p>
-  </>
-)} />
-```
-
 ## System props
 
 Details components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
@@ -60,5 +43,4 @@ Details components get `COMMON` system props. Read our [System Props](/system-pr
 | Name | Type | Default | Description |
 | :- | :- | :-: | :- |
 | open | Boolean | | Sets the open/closed state of the Details component |
-| render | Function | | Optional render function, to allow you to handle toggling and open/closed state from a container component.
 | overlay | Boolean | false | Sets whether or not element will close when user clicks outside of it

index.d.ts

@@ -80,33 +80,34 @@ declare module '@primer/components' {
     Item: React.FunctionComponent<FlexItemProps>
   }
 
-  export interface BoxProps extends BaseProps, CommonProps, LayoutProps {}
+  export interface BoxProps extends BaseProps, CommonProps, LayoutProps, React.HTMLAttributes<HTMLDivElement> {}
 
   export const Box: React.FunctionComponent<BoxProps>
 
-  export interface TextProps extends BaseProps, CommonProps, TypographyProps {}
+  export interface TextProps extends BaseProps, CommonProps, TypographyProps, React.HTMLAttributes<HTMLSpanElement> {}
 
   export const Text: React.FunctionComponent<TextProps>
 
-  export interface HeadingProps extends BaseProps, CommonProps, TypographyProps {}
+  export interface HeadingProps
+    extends BaseProps,
+      CommonProps,
+      TypographyProps,
+      React.HTMLAttributes<HTMLHeadingElement> {}
 
   export const Heading: React.FunctionComponent<HeadingProps>
 
   type DetailsRenderFunction = (args: {open: boolean; toggle: () => void}) => React.ReactElement
 
-  export interface DetailsProps extends CommonProps {
-    open?: boolean
+  export interface DetailsProps extends CommonProps, React.HTMLAttributes<HTMLDetailsElement> {
     render?: DetailsRenderFunction
     children?: DetailsRenderFunction | React.ReactNode
     overlay?: boolean
   }
 
   export const Details: React.FunctionComponent<DetailsProps>
 
-  export interface ButtonProps extends BaseProps, CommonProps {
-    disabled?: boolean
+  export interface ButtonProps extends BaseProps, CommonProps, React.HTMLAttributes<HTMLDetailsElement> {
     grouped?: boolean
-    onClick?: Function
     size?: 'sm' | 'large'
   }
 
@@ -115,9 +116,7 @@ declare module '@primer/components' {
   export const ButtonDanger: React.FunctionComponent<ButtonProps>
   export const Button: React.FunctionComponent<ButtonProps>
 
-  export interface AvatarProps extends CommonProps {
-    alt: string
-    src: string
+  export interface AvatarProps extends CommonProps, React.HTMLAttributes<HTMLImageElement> {
     isChild?: boolean
     size?: number
   }
@@ -128,7 +127,7 @@ declare module '@primer/components' {
 
   export const BaseStyles: React.FunctionComponent<BaseStylesProps>
 
-  export interface BorderBoxProps extends CommonProps, LayoutProps {
+  export interface BorderBoxProps extends CommonProps, LayoutProps, BoxProps {
     border?: string
     borderColor?: string
     borderRadius?: string | number
@@ -137,19 +136,17 @@ declare module '@primer/components' {
 
   export const BorderBox: React.FunctionComponent<BorderBoxProps>
 
-  export interface BranchNameProps extends CommonProps {
-    href?: string
-  }
+  export interface BranchNameProps extends CommonProps, React.HTMLAttributes<HTMLAnchorElement> {}
 
   export const BranchName: React.FunctionComponent<BranchNameProps>
 
-  export interface CircleBadgeProps extends CommonProps {
+  export interface CircleBadgeProps extends CommonProps, React.HTMLAttributes<HTMLDivElement> {
     size?: string | number
   }
 
   export const CircleBadge: React.FunctionComponent<CircleBadgeProps>
 
-  export interface CircleOcticonProps extends CommonProps {
+  export interface CircleOcticonProps extends CommonProps, FlexProps {
     size?: number
     icon: React.ReactNode
   }
@@ -163,9 +160,9 @@ declare module '@primer/components' {
 
   export const StyledOcticon: React.FunctionComponent<StyledOcticonProps>
 
-  export interface DropdownProps extends CommonProps {}
+  export interface DropdownProps extends CommonProps, ButtonProps {}
 
-  export interface DropdownMenuProps extends CommonProps {
+  export interface DropdownMenuProps extends CommonProps, React.HTMLAttributes<HTMLUListElement> {
     direction?: string
     title: string
   }
@@ -175,11 +172,11 @@ declare module '@primer/components' {
     Item: React.FunctionComponent<DropdownProps>
   }
 
-  export interface FilterListProps extends CommonProps {
+  export interface FilterListProps extends CommonProps, React.HTMLAttributes<HTMLUListElement> {
     small?: boolean
   }
 
-  export interface FilterListItemProps extends CommonProps {
+  export interface FilterListItemProps extends CommonProps, React.HTMLAttributes<HTMLAnchorElement> {
     count?: number
     selected?: boolean
   }
@@ -188,41 +185,44 @@ declare module '@primer/components' {
     Item: React.FunctionComponent<FilterListItemProps>
   }
 
-  export interface FlashProps extends CommonProps {
+  export interface FlashProps extends CommonProps, React.HTMLAttributes<HTMLDivElement> {
     full?: boolean
     scheme?: string
   }
 
   export const Flash: React.FunctionComponent<FlashProps>
 
-  export interface CounterLabelProps extends CommonProps {
+  export interface CounterLabelProps extends CommonProps, React.HTMLAttributes<HTMLSpanElement> {
     scheme?: string
   }
 
   export const CounterLabel: React.FunctionComponent<CounterLabelProps>
 
-  export interface LabelProps extends CommonProps {
+  export interface LabelProps extends CommonProps, React.HTMLAttributes<HTMLSpanElement> {
     outline?: boolean
     size?: 'small' | 'medium' | 'large' | 'xl'
     dropshadow?: boolean
   }
 
   export const Label: React.FunctionComponent<LabelProps>
 
-  export interface LinkProps extends CommonProps, TypographyProps {
-    href?: string
+  export interface LinkProps extends CommonProps, TypographyProps, React.HTMLAttributes<HTMLAnchorElement> {
     underline?: boolean
   }
 
   export const Link: React.FunctionComponent<LinkProps>
 
-  export interface PointerBoxProps extends CommonProps, LayoutProps {
+  export interface PointerBoxProps extends CommonProps, LayoutProps, BorderBoxProps {
     caret?: string
   }
 
   export const PointerBox: React.FunctionComponent<PointerBoxProps>
 
-  export interface PositionComponentProps extends PositionProps, CommonProps, LayoutProps {}
+  export interface PositionComponentProps
+    extends PositionProps,
+      CommonProps,
+      LayoutProps,
+      React.HTMLAttributes<HTMLDivElement> {}
 
   export const Relative: React.FunctionComponent<PositionComponentProps>
   export const Absolute: React.FunctionComponent<PositionComponentProps>
@@ -236,38 +236,26 @@ declare module '@primer/components' {
 
   export const StateLabel: React.FunctionComponent<StateLabelProps>
 
-  export interface TabNavProps extends CommonProps {
-    'aria-label'?: string
-  }
+  export interface TabNavProps extends CommonProps, React.HTMLAttributes<HTMLDivElement> {}
 
-  export interface TabNavLinkProps extends CommonProps {
-    href?: string
+  export interface TabNavLinkProps extends CommonProps, React.HTMLAttributes<HTMLAnchorElement> {
     selected?: boolean
   }
 
   export const TabNav: React.FunctionComponent<TabNavProps> & {
     Link: React.FunctionComponent<TabNavLinkProps>
   }
 
-  export interface TextInputProps extends CommonProps {
+  export interface TextInputProps extends CommonProps, React.HTMLAttributes<HTMLInputElement> {
     autocomplete?: string
-    'aria-label'?: string
     block?: boolean
-    disabled?: boolean
-    id?: string
-    name?: string
-    onChange?: (evt: React.ChangeEvent<HTMLInputElement>) => void
-    placeholder?: string
-    required?: boolean
     size?: 'small' | 'large'
-    value?: string
   }
 
   export const TextInput: React.FunctionComponent<TextInputProps>
 
-  export interface TooltipProps extends CommonProps {
+  export interface TooltipProps extends CommonProps, React.HTMLAttributes<HTMLSpanElement> {
     align?: 'left' | 'right'
-    'aria-label'?: string
     direction?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'
     noDelay?: boolean
     text?: string
@@ -276,16 +264,14 @@ declare module '@primer/components' {
 
   export const Tooltip: React.FunctionComponent<TooltipProps>
 
-  export interface UnderlineNavProps extends CommonProps {
+  export interface UnderlineNavProps extends CommonProps, React.HTMLAttributes<HTMLDivElement> {
     actions?: React.ReactNode
     align?: 'right'
-    'aria-label'?: string
     full?: boolean
     label?: string
   }
 
-  export interface UnderlineNavLinkProps extends CommonProps {
-    href?: string
+  export interface UnderlineNavLinkProps extends CommonProps, React.HTMLAttributes<HTMLAnchorElement> {
     selected?: boolean
   }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "13.5.0",
+  "version": "14.0.0",
   "description": "Primer react components",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",

src/Details.js

@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import React, {useState, useEffect, useRef} from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {COMMON} from './constants'
@@ -16,33 +16,34 @@ function getRenderer(children) {
   return typeof children === 'function' ? children : () => children
 }
 
-function DetailsBase({children, overlay, render = getRenderer(children), ...rest}) {
-  const [open, setOpen] = useState(Boolean(rest.open))
+function DetailsBase({children, overlay, render = getRenderer(children), defaultOpen = false, ...rest}) {
+  const [open, setOpen] = useState(defaultOpen)
+  const ref = useRef(null)
 
-  function toggle(event) {
-    if (event) event.preventDefault()
-    if (overlay) {
-      openMenu()
-    } else {
-      setOpen(!open)
-    }
-  }
-
-  function openMenu() {
-    if (!open) {
-      setOpen(true)
+  useEffect(() => {
+    if (overlay && open) {
       document.addEventListener('click', closeMenu)
+      return () => {
+        document.removeEventListener('click', closeMenu)
+      }
     }
+  }, [open, overlay])
+
+  function toggle(event) {
+    setOpen(event.target.open)
   }
 
   function closeMenu(event) {
-    if (event) event.preventDefault()
-    setOpen(false)
-    document.removeEventListener('click', closeMenu)
+    // only close the menu if we're clicking outside
+    if (event && event.target.closest('details') !== ref.current) {
+      setOpen(false)
+      document.removeEventListener('click', closeMenu)
+    }
   }
+
   return (
-    <DetailsReset {...rest} open={open} overlay={overlay}>
-      {render({open, toggle})}
+    <DetailsReset {...rest} ref={ref} open={open} onToggle={toggle} overlay={overlay}>
+      {render({open})}
     </DetailsReset>
   )
 }
@@ -57,7 +58,7 @@ Details.defaultProps = {
 Details.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   className: PropTypes.string,
-  open: PropTypes.bool,
+  defaultOpen: PropTypes.bool,
   overlay: PropTypes.bool,
   render: PropTypes.func,
   theme: PropTypes.object,