diff --git a/docs/content/Buttons.md b/docs/content/Buttons.md
index 87cc8141910..46697c6b9ff 100644
--- a/docs/content/Buttons.md
+++ b/docs/content/Buttons.md
@@ -22,6 +22,8 @@ To create a button group, wrap `Button` elements in the `ButtonGroup` element. `
+
+Button Table List
```
## System props
diff --git a/docs/content/Details.md b/docs/content/Details.md
index e2bc55e480e..2d27ed4243a 100644
--- a/docs/content/Details.md
+++ b/docs/content/Details.md
@@ -16,6 +16,7 @@ You are responsible for rendering your own ``. To style your summary el
This should show and hide
+
```
## With children as a function
@@ -34,6 +35,27 @@ The render function gets an object with the `open` render prop to allow you to c
```
+## Manage the open state manually
+The `Details` 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:** The `overlay` prop 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
+
+ {([open, setOpen]) => {
+ const handleToggle = (e) => setOpen(e.target.open)
+ const handleClickOutside = () => setOpen(false)
+
+ return (
+
+
+
This should show and hide
+
+ )
+ }}
+
+```
+
## System props
Details components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
@@ -43,4 +65,7 @@ Details components get `COMMON` system props. Read our [System Props](/system-pr
| 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
+| 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. |
diff --git a/docs/content/Dropdown.md b/docs/content/Dropdown.md
index 5843117f9d1..5edf5fc83b0 100644
--- a/docs/content/Dropdown.md
+++ b/docs/content/Dropdown.md
@@ -3,11 +3,14 @@ title: Dropdown
---
The Dropdown component is a lightweight context menu for housing navigation and actions.
+Use `Dropdown.Button` as the trigger for the dropdown, or use a custom `summary` element if you would like. **You must use a `summary` tag in order for the dropdown to behave properly!**. You should also add `aria-haspopup="true"` to custom dropdown triggers for accessibility purposes. You can use the `Dropdown.Caret` component to add a caret to a custom dropdown trigger.
+
Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to this component to position the menu in relation to the Dropdown.Button.
## Default example
```jsx live
-
+
+ DropdownItem 1Item 2
@@ -16,20 +19,78 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi
```
+## With custom button
+```jsx live
+
+
+ Dropdown
+
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+```
+
+## 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
+
+ {([open, setOpen]) => {
+
+ const handleToggle = (e) => setOpen(e.target.open)
+ const handleClickOutside = () => setOpen(false)
+
+ return (
+
+ Dropdown
+
+ Item 1
+ Item 2
+ Item 3
+
+
+ )
+ }}
+
+```
+
## System props
-Dropdown, Dropdown.Menu, and Dropdown.Item all get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available 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. |
+
+
+
#### Dropdown.Menu
| Name | Type | Default | Description |
| :- | :- | :-: | :- |
-| direction | String | 'sw' | Sets the direction of the dropdown menu. |
-| title | String or Node | | Sets the text inside of the button, can be either a string or a React node |
+| direction | String | 'sw' | Sets the direction of the dropdown menu. Pick from 'ne', 'e', 'se', 's', 'sw', or 'w' |
-#### Dropdown.Item
+#### Dropdown.Button
+| Name | Type | Default | Description |
+| :- | :- | :-: | :- |
+| onClick | Function | none | Use the `onClick` handler to add additional functionality when the button is clicked, such as fetching data. |
+
+#### Dropdown.Caret
No additional props.
-#### Dropdown
+#### Dropdown.Item
No additional props.
diff --git a/docs/content/Pagination.md b/docs/content/Pagination.md
new file mode 100644
index 00000000000..2dbe002064d
--- /dev/null
+++ b/docs/content/Pagination.md
@@ -0,0 +1,194 @@
+---
+title: Pagination
+---
+import State from '../components/State'
+
+Use the pagination component to create a connected set of links that lead to related pages (for example, previous, next, or page numbers).
+
+## Basic example
+
+The pagination component only requires two properties to render: `pageCount`, which is the total number of pages, and `currentPage`, which is the currently selected page number (which should be managed by the consuming application).
+
+```jsx live
+ e.preventDefault()}
+/>
+```
+
+However, to handle state changes when the user clicks a page, you also need to pass `onPageChange`, which is a function that takes a click event and page number as an argument:
+
+```javascript
+type PageChangeCallback = (evt: React.MouseEvent, page: number) => void
+```
+
+By default, clicking a link in the pagination component will cause the browser to navigate to the URL specified by the page. To cancel navigation and handle state management on your own, you should call `preventDefault` on the event, as in this example:
+
+```jsx live
+
+ {([page, setPage]) => {
+ const totalPages = 15
+ const onPageChange = (evt, page) => {
+ evt.preventDefault()
+ setPage(page)
+ }
+
+ return (
+
+ Current page: {page} / {totalPages}
+
+
+ )
+ }}
+
+```
+
+## Customizing link URLs
+
+To customize the URL generated for each link, you can pass a function to the `hrefBuilder` property. The function should take a page number as an argument and return a URL to use for the link.
+
+```javascript
+type HrefBuilder = (page: number) => string
+```
+
+```jsx live
+
+ {([lastUrl, setLastUrl]) => {
+ const onPageChange = (evt, page) => {
+ evt.preventDefault()
+ setLastUrl(evt.target.href)
+ }
+ const hrefBuilder = (page) => {
+ return `https://example.com/pages/${page}`
+ }
+
+ return (
+
+ The last URL clicked was: {lastUrl}
+
+
+ )
+ }}
+
+```
+
+## Customizing which pages are shown
+
+Two props control how many links are displayed in the pagination container at any given time. `marginPageCount` controls how many pages are guaranteed to be displayed on the left and right of the component; `surroundingPageCount` controls how many pages will be displayed to the left and right of the current page.
+
+```jsx live
+ e.preventDefault()}
+/>
+```
+
+The algorithm tries to minimize the amount the component shrinks and grows as the user changes pages; for this reason, if any of the pages in the margin (controlled via `marginPageCount`) intersect with pages in the center (controlled by `surroundingPageCount`), the center section will be shifted away from the margin. Consider the following examples, where pages one through six are shown when any of the first four pages are selected. Only when the fifth page is selected and there is a gap between the margin pages and the center pages does a break element appear.
+
+```jsx live
+
+ {[1, 2, 3, 4, 5].map(page => (
+ e.preventDefault()}
+ />
+ ))}
+
+```
+
+### Previous/next pagination
+
+To hide all the page numbers and create a simple pagination container with just the Previous and Next buttons, set `showPages` to `false`.
+
+```jsx live
+
+ {([page, setPage]) => {
+ const totalPages = 10
+ const onPageChange = (evt, page) => {
+ evt.preventDefault()
+ setPage(page)
+ }
+
+ return (
+
+ Current page: {page} / {totalPages}
+
+
+ )
+ }}
+
+```
+
+## System props
+
+Pagination components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+| Name | Type | Default | Description |
+| :- | :- | :-: | :- |
+| currentPage | Number | | **Required.** The currently selected page. |
+| hrefBuilder | Function | `#${page}` | A function to generate links based on page number. |
+| marginPageCount | Number | 1 | How many pages to always show at the left and right of the component. |
+| onPageChange | Function | no-op | Called with event and page number when a page is clicked. |
+| pageCount | Number | | **Required.** The total number of pages. |
+| showPages | Boolean | `true` | Whether or not to show the individual page links. |
+| surroundingPageCount | Number | 2 | How many pages to display on each side of the currently selected page. |
+
+## Theming
+
+The following snippet shows the properties in the theme that control the styling of the pagination component:
+
+```javascript
+{
+ // ... rest of theme ...
+ pagination: {
+ fontSize,
+ fontWeight,
+ borderRadius,
+ colors: {
+ normal: {
+ fg,
+ bg,
+ border
+ },
+ disabled: {
+ fg,
+ bg,
+ border
+ },
+ hover: {
+ fg,
+ bg,
+ border
+ },
+ selected: {
+ fg,
+ bg,
+ border
+ }
+ }
+ }
+}
+```
diff --git a/docs/content/SelectMenu.md b/docs/content/SelectMenu.md
new file mode 100644
index 00000000000..3a95eb0fe65
--- /dev/null
+++ b/docs/content/SelectMenu.md
@@ -0,0 +1,287 @@
+---
+title: SelectMenu
+---
+
+The `SelectMenu` components are a suite of components which can be combined together to make several different variations of our GitHub select menu. At it's most basic form, a select menu is comprised of a `SelectMenu` wrapper, which contains a `summary` component of your choice and a `Select.Modal` which contains the select menu content. Use `SelectMenu.List` to wrap items in the select menu, and `SelectMenu.Item` to wrap each item.
+
+Several additional components exist to provide even more functionality: `SelectMenu.Header`, `SelectMenu.Filter`, `SelectMenu.Tabs`, `SelectMenu.TabPanel` `SelectMenu.Footer` and `SelectMenu.Divider`.
+
+## Basic Example
+```jsx live
+
+
+
+ Projects
+
+ Primer Components bugs
+ Primer Components roadmap
+ Project 3
+ Project 4
+
+
+
+```
+
+## SelectMenu
+Main wrapper component for select menu.
+
+```jsx
+
+ {/* all other sub components are wrapped here*/}
+
+```
+
+### System props
+
+SelectMenu components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+### Component Props
+| Name | Type | Default | Description |
+| :- | :- | :-: | :- |
+| initialTab | String | | If using the `SelectMenu.Tabs` component, you can use this prop to change the tab shown on open. By default, the first tab will be used.
+
+
+## SelectMenu.Modal
+Used to wrap the content in a `SelectMenu`.
+
+```jsx
+
+ {/* all menu content is wrapped in the modal*/}
+
+```
+
+### System Props
+
+SelectMenu.Modal components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+### Component Props
+SelectMenu.Modal components do not get any additional props besides system props.
+
+
+## SelectMenu.List
+
+Used to wrap the select menu list content. All menu items **must** be wrapped in a SelectMenu.List in order for the accessbility keyboard handling to function properly. If you are using the `SelectMenu.TabPanel` you do not need to provide a `SelectMenu.List` as that component renders a `SelectMenu.List` as a wrapper.
+
+```jsx
+
+ {/* all menu list items are wrapped in the list*/}
+
+```
+
+### System Props
+
+SelectMenu.List components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+### Component Props
+SelectMenu.List components do not get any additional props besides system props.
+
+
+## SelectMenu.Item
+
+Individual items in a select menu.
+
+```jsx
+
+ {/* wraps an individual list item*/}
+
+```
+
+### System Props
+
+SelectMenu.Item components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+### Component Props
+| Name | Type | Default | Description |
+| :- | :- | :-: | :- |
+| selected | boolean | | Used to apply styles to the selected items in the list. |
+| onClick | function | | Function called when item is clicked. By default we also close the menu when items are clicked. If you would like the menu to stay open, pass an `e.preventDefault()` to your onClick handler. |
+
+## SelectMenu.Filter
+Use a `SelectMenu.Filter` to add a filter UI to your select menu. Users are expected to implement their own filtering and manage the state of the `value` prop on the input. This gives users more flexibility over the type of filtering and type of content passed into each select menu item.
+
+```jsx live
+
+
+
+ Filter by Project
+
+
+ Primer Components bugs
+ Primer Components roadmap
+ More Options
+ Project 3
+ Project 4
+
+
+
+```
+
+
+### System Props
+SelectMenu.Filter components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+### Component Props
+SelectMenu.Filter components receive all the props that the [TextInput](/TextInput) component gets.
+
+| Name | Type | Default | Description |
+| :- | :- | :-: | :- |
+| value | String | | Users of this component must provide a value for the filter input that is managed in the consuming application |
+
+
+## SelectMenu.Tabs
+Use `SelectMenu.Tabs` to wrap the the tab navigation and `SelectMenu.Tab` for each tab in the navigation.
+
+`SelectMenu.TabPanel` should wrap each corresponding panel for each of the tabs. The `tabName` prop for each `SelectMenu.TabPanel` must match the name provided in the `tabName` prop on `SelectMenu.Tab`.
+
+To set one of the tabs to be open by default, use `initialTab` on the main `SelectMenu` component. Otherwise, the first tab will be shown by default.
+
+Each `Select.Menu` tab will need to have an `index` prop. The first tab should be at index `0`, the second at index `1` and so forth. The `index` prop is used to show the first tab by default.
+
+If you need access to the selected tab state, you can find it in the MenuContext object exported from `SelectMenu` as `MenuContext.selectedTab`.
+
+```jsx live
+
+
+
+ Projects
+
+
+
+
+
+ Primer Components bugs
+ Primer Components roadmap
+ Project 3
+ Project 4
+
+
+ Project 2
+
+ Showing 3 of 3
+
+
+```
+
+### System Props
+
+SelectMenu.Tabs components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+### Component Props
+SelectMenu.Tabs components do not get any additional props besides system props.
+
+## SelectMenu.Tab
+Used for each individual tab inside of a `SelectMenu.Tabs`. Be sure to set the `index` prop to correspond to the order the tab is in. The `tabName` prop should correspond to the `tabName` set on the `SelectMenu.TabPanel`.
+
+The `onClick` prop is optional and can be used for any events or data fetching you might need to trigger on tab clicks.
+
+```jsx
+
+
+```
+
+### System Props
+SelectMenu.Tab components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+### Component Props
+| Name | Type | Default | Description |
+| :- | :- | :-: | :- |
+| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. |
+| index | Number | | The index at which the tab is in the list of tabs |
+| onClick | Function | | Function to be called when the tab is clicked. Optional. |
+
+## SelectMenu.TabPanel
+Wraps the content for each tab. Make sure to use the `tabName` prop to identify each tab panel with the correct tab in the tab navigation.
+
+**Note**: SelectMenu.TabPanel wraps content in a SelectMenu.List, so adding a SelectMenu.List manually is not necessary.
+
+```jsx
+
+ {/* Wraps content for each tab */}
+
+```
+
+### System Props
+SelectMenu.TabPanel components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+### Component Props
+| Name | Type | Default | Description |
+| :- | :- | :-: | :- |
+| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component.
+
+## SelectMenu.Divider
+Use a `SelectMenu.Divider` to add information between items in a `SelectMenu.List`.
+
+```jsx live
+
+
+
+ Projects
+
+ Primer Components bugs
+ Primer Components roadmap
+ More Options
+ Project 3
+ Project 4
+
+
+
+```
+
+### System Props
+
+SelectMenu.Divder components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+### Component Props
+SelectMenu.Divider components do not get any additional props besides system props.
+
+## SelectMenu.Footer
+Use a `SelectMenu.Footer` to add content to the bottom of the select menu.
+
+```jsx live
+
+
+
+ Projects
+
+ Primer Components bugs
+ Primer Components roadmap
+ Project 3
+ Project 4
+ Use ⌥ + click/return to exclude labels.
+
+
+
+```
+
+### System Props
+
+SelectMenu.Footer components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+### Component Props
+SelectMenu.Footer components do not get any additional props besides system props.
+
+## SelectMenu.Header
+Use a `SelectMenu.Header` to add a header to the top of the select menu content.
+
+```jsx live
+
+
+
+ Projects
+
+ Primer Components bugs
+ Primer Components roadmap
+ Project 3
+ Project 4
+ Use ⌥ + click/return to exclude labels.
+
+
+
+```
+
+### System Props
+
+SelectMenu.Header components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+### Component Props
+SelectMenu.Header components do not get any additional props besides system props.
\ No newline at end of file
diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
index 7f9f8399039..29e1666c0d2 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -60,6 +60,8 @@
url: /LabelGroup
- title: Link
url: /Link
+ - title: Pagination
+ url: /Pagination
- title: PointerBox
url: /PointerBox
- title: Popover
@@ -68,6 +70,8 @@
url: /Position
- title: ProgressBar
url: /ProgressBar
+ - title: SelectMenu
+ url: /SelectMenu
- title: SideNav
url: /SideNav
- title: StateLabel
diff --git a/index.d.ts b/index.d.ts
index e37386e440a..9f9cf12be19 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -83,6 +83,9 @@ declare module '@primer/components' {
children?: DetailsRenderFunction | React.ReactNode
defaultOpen?: boolean
overlay?: boolean
+ open?: boolean
+ onToggle?: (event: React.SyntheticEvent) => void
+ onClickOutside?: (event: MouseEvent) => void
}
export const Details: React.FunctionComponent
@@ -95,9 +98,16 @@ declare module '@primer/components' {
variant?: 'small' | 'medium' | 'large'
}
+ export interface ButtonTableListProps
+ extends CommonProps,
+ TypographyProps,
+ LayoutProps,
+ Omit, 'color'> {}
+
export const ButtonPrimary: React.FunctionComponent
export const ButtonOutline: React.FunctionComponent
export const ButtonDanger: React.FunctionComponent
+ export const ButtonTableList: React.FunctionComponent
export const ButtonGroup: React.FunctionComponent
export const Button: React.FunctionComponent
@@ -147,18 +157,23 @@ declare module '@primer/components' {
export const StyledOcticon: React.FunctionComponent
- export interface DropdownProps extends React.Props, StyledSystem.ColorProps, StyledSystem.SpaceProps, Omit {
- as?: React.ReactType
- title?: string | React.ReactNode
- }
+ export interface DropdownProps extends DetailsProps, Omit, 'color'> {}
+
+ export interface DropdownItem extends CommonProps, Omit, 'color'> {}
export interface DropdownMenuProps extends CommonProps, Omit, 'color'> {
- direction?: string
+ direction?: 'ne'| 'e'| 'se'| 's'| 'sw'| 'w'
}
+ export interface DropdownButtonProps extends ButtonProps, Omit {}
+
+ export interface DropdownCaretProps extends CommonProps, Omit, 'color'> {}
+
export const Dropdown: React.FunctionComponent & {
Menu: React.FunctionComponent
Item: React.FunctionComponent
+ Button: React.FunctionComponent
+ Caret: React.FunctionComponent
}
export interface FilteredSearchProps extends CommonProps {
@@ -217,6 +232,28 @@ declare module '@primer/components' {
export const Link: React.FunctionComponent
+ export type PaginationHrefBuilder = (page: number) => string
+
+ export type PaginationPageChangeCallback = (e: React.MouseEvent, page: number) => void
+
+ export interface PaginationProps extends CommonProps {
+ currentPage: number
+ hrefBuilder?: PaginationHrefBuilder
+ /**
+ * How many pages to show on the left and right of the component
+ */
+ marginPageCount?: number
+ onPageChange?: PaginationPageChangeCallback
+ pageCount: number
+ showPages?: boolean
+ /**
+ * How many pages to show directly to the left and right of the current page
+ */
+ surroundingPageCount?: number
+ }
+
+ export const Pagination: React.FunctionComponent
+
export interface PointerBoxProps extends CommonProps, LayoutProps, BorderBoxProps {
caret?: string
}
@@ -258,6 +295,61 @@ declare module '@primer/components' {
export const Sticky: React.FunctionComponent
export const Fixed: React.FunctionComponent
+ export interface SelectMenuProps extends Omit, Omit, 'color'> {
+ initialTab?: string
+ }
+
+ export interface SelectMenuModalProps extends CommonProps, Omit, 'color'> {}
+
+ export interface SelectMenuListProps extends CommonProps, Omit, 'color'> {}
+
+ export interface SelectMenuItemProps extends Omit,
+ Omit, 'color'> {
+ selected?: boolean
+ }
+
+ export interface SelectMenuFooterProps extends CommonProps, Omit, 'color'> {}
+
+ export interface SelectMenuDividerProps extends CommonProps, Omit, 'color'> {}
+
+ export interface SelectMenuHeaderProps extends CommonProps, TypographyProps, Omit, 'color'> {}
+
+ export interface SelectMenuFilterProps extends TextInputProps {
+ value: string
+ }
+
+ export interface SelectMenuTabsProps extends CommonProps,
+ Omit, 'color'> {}
+
+ export interface SelectMenuTabProps extends CommonProps, Omit, 'color'> {
+ index: number,
+ tabName: string
+ }
+
+ export interface SelectMenuTabPanelProps extends CommonProps, Omit, 'color'> {
+ tabName: string
+ }
+
+ export const SelectMenu: React.FunctionComponent & {
+ MenuContext: React.FunctionComponent<{
+ selectedTab: string | undefined
+ setSelectedTab: (selectedTab: string | undefined) => void,
+ open: boolean | undefined,
+ setOpen: (open: boolean | undefined) => void,
+ initialTab: string | undefined
+ }>
+ Divider: React.FunctionComponent
+ Filter: React.FunctionComponent
+ Footer: React.FunctionComponent
+ List: React.FunctionComponent
+ Item: React.FunctionComponent
+ Modal: React.FunctionComponent
+ Tabs: React.FunctionComponent
+ Tab: React.FunctionComponent
+ TabPanel: React.FunctionComponent
+ Header: React.FunctionComponent
+ }
+
export interface SideNavProps extends CommonProps, BorderProps, Omit, 'color'> {
bordered?: boolean
variant?: 'normal' | 'lightweight'
@@ -417,7 +509,6 @@ declare module '@primer/components' {
export const ProgressBar: React.FunctionComponent
}
-
declare module '@primer/components/src/Box' {
import {Box} from '@primer/components'
export default Box
@@ -448,6 +539,11 @@ declare module '@primer/components/src/ButtonOutline' {
export default ButtonOutline
}
+declare module '@primer/components/src/ButtonTableList' {
+ import {ButtonTableList} from '@primer/components'
+ export default ButtonTableList
+}
+
declare module '@primer/components/src/ButtonGroup' {
import {ButtonGroup} from '@primer/components'
export default ButtonGroup
@@ -531,6 +627,10 @@ declare module '@primer/components/src/Link' {
import {Link} from '@primer/components'
export default Link
}
+declare module '@primer/components/src/Pagination' {
+ import {Pagination} from '@primer/components'
+ export default Pagination
+}
declare module '@primer/components/src/PointerBox' {
import {PointerBox} from '@primer/components'
export default PointerBox
@@ -555,10 +655,17 @@ declare module '@primer/components/src/Fixed' {
import {Fixed} from '@primer/components'
export default Fixed
}
+
+declare module '@primer/components/src/SelectMenu' {
+ import {SelectMenu} from '@primer/components'
+ export default SelectMenu
+}
+
declare module '@primer/components/src/StateLabel' {
import {StateLabel} from '@primer/components'
export default StateLabel
}
+
declare module '@primer/components/src/TabNav' {
import {TabNav} from '@primer/components'
export default TabNav
diff --git a/package.json b/package.json
index eb85db2d2cd..5531ae268d2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@primer/components",
- "version": "16.3.0",
+ "version": "17.0.0",
"description": "Primer react components",
"main": "dist/index.umd.js",
"module": "dist/index.esm.js",
@@ -41,6 +41,7 @@
"@styled-system/prop-types": "5.1.2",
"@styled-system/props": "5.1.4",
"@styled-system/theme-get": "5.1.2",
+ "@types/styled-components": "^4.4.0",
"@testing-library/react": "9.4.0",
"@types/styled-system": "5.1.2",
"babel-plugin-macros": "2.6.1",
diff --git a/src/ButtonTableList.js b/src/ButtonTableList.js
new file mode 100644
index 00000000000..9a767522875
--- /dev/null
+++ b/src/ButtonTableList.js
@@ -0,0 +1,49 @@
+import styled from 'styled-components'
+import {COMMON, LAYOUT, TYPOGRAPHY, get} from './constants'
+import theme from './theme'
+
+const ButtonTableList = styled.summary`
+ display: inline-block;
+ padding: 0;
+ font-size: ${get('fontSizes.1')};
+ color: ${get('colors.gray.6')};
+ text-decoration: none;
+ white-space: nowrap;
+ cursor: pointer;
+ user-select: none;
+ background-color: transparent;
+ border: 0;
+ appearance: none; // Corrects inability to style clickable input types in iOS.
+
+ &:hover {
+ text-decoration: underline;
+ }
+
+ &:disabled {
+ &,
+ &:hover {
+ color: rgba(${get('colors.gray.6')}, 0.5);
+ cursor: default;
+ }
+ }
+
+ &:after {
+ display: inline-block;
+ margin-left: ${get('space.1')};
+ width: 0;
+ height: 0;
+ vertical-align: -2px;
+ content: "";
+ border: 4px solid transparent;
+ border-top-color: currentcolor;
+ }
+ ${COMMON}
+ ${TYPOGRAPHY}
+ ${LAYOUT}
+`
+
+ButtonTableList.defaultProps = {
+ theme
+}
+
+export default ButtonTableList
diff --git a/src/Details.js b/src/Details.js
index e6d9e9d5119..0c097a48dbe 100644
--- a/src/Details.js
+++ b/src/Details.js
@@ -12,55 +12,72 @@ if (typeof window !== 'undefined') {
require('details-element-polyfill')
}
-const DetailsReset = styled('details')`
+const StyledDetails = styled('details')`
& > summary {
list-style: none;
}
& > summary::-webkit-details-marker {
display: none;
}
+
+ ${COMMON}
`
function getRenderer(children) {
return typeof children === 'function' ? children : () => children
}
-function DetailsBase({children, overlay, render = getRenderer(children), defaultOpen = false, ...rest}) {
- const [open, setOpen] = useState(defaultOpen)
+function Details({
+ children,
+ overlay,
+ render = getRenderer(children),
+ open: userOpen,
+ onClickOutside,
+ onToggle,
+ defaultOpen = false,
+ ...rest
+}) {
+ const [internalOpen, setInternalOpen] = useState(defaultOpen)
const ref = useRef(null)
+ // only use internal open state if user doesn't provide a value for the open prop
+ const open = typeof userOpen !== 'undefined' ? userOpen : internalOpen
- const closeMenu = useCallback(
+ const onClickOutsideInternal = useCallback(
event => {
- // only close the menu if we're clicking outside
- if (event && event.target.closest('details') !== ref.current) {
- setOpen(false)
- document.removeEventListener('click', closeMenu)
+ if (event.target.closest('details') !== ref.current) {
+ onClickOutside && onClickOutside(event)
+ if (!event.defaultPrevented) {
+ setInternalOpen(false)
+ }
}
},
- [ref]
+ [ref, onClickOutside, setInternalOpen]
)
+ // handles the overlay behavior - closing the menu when clicking outside of it
useEffect(() => {
- if (overlay && open) {
- document.addEventListener('click', closeMenu)
+ if (open && overlay) {
+ document.addEventListener('click', onClickOutsideInternal)
return () => {
- document.removeEventListener('click', closeMenu)
+ document.removeEventListener('click', onClickOutsideInternal)
}
}
- }, [open, overlay, closeMenu])
+ }, [open, overlay, onClickOutsideInternal])
+
+ function handleToggle(e) {
+ onToggle && onToggle(e)
- function toggle(event) {
- setOpen(event.target.open)
+ if (!e.defaultPrevented) {
+ setInternalOpen(e.target.open)
+ }
}
return (
-
+
{render({open})}
-
+
)
}
-const Details = styled(DetailsBase)(COMMON)
-
Details.defaultProps = {
theme,
overlay: false
diff --git a/src/Dropdown.js b/src/Dropdown.js
index 811268fa2db..6363b62d886 100644
--- a/src/Dropdown.js
+++ b/src/Dropdown.js
@@ -7,26 +7,29 @@ import {COMMON, get} from './constants'
import getDirectionStyles from './DropdownStyles'
import theme from './theme'
-const DropdownBase = ({title, children, className, ...rest}) => {
- return (
-
- <>
-
- {children}
-
-
- )
-}
-const Dropdown = styled(DropdownBase)`
+const StyledDetails = styled(Details)`
position: relative;
display: inline-block;
- ${COMMON};
`
-const DropdownCaret = styled.div`
+const Dropdown = ({children, className, ...rest}) => {
+ return (
+
+ {children}
+
+ )
+}
+
+Dropdown.Button = ({children, ...rest}) => {
+ return (
+
+ )
+}
+
+Dropdown.Caret = styled.div`
border: 4px solid transparent;
margin-left: 12px;
border-top-color: currentcolor;
@@ -36,9 +39,10 @@ const DropdownCaret = styled.div`
height: 0;
vertical-align: middle;
width: 0;
+ ${COMMON}
`
-const DropdownMenu = styled.ul`
+Dropdown.Menu = styled.ul`
background-clip: padding-box;
background-color: ${get('colors.white')};
border: 1px solid rgba(27, 31, 35, 0.15);
@@ -83,7 +87,7 @@ const DropdownMenu = styled.ul`
${COMMON};
`
-const DropdownItem = styled.li`
+Dropdown.Item = styled.li`
display: block;
padding: ${get('space.1')} 10px ${get('space.1')} 15px;
overflow: hidden;
@@ -118,9 +122,6 @@ const DropdownItem = styled.li`
${COMMON};
`
-Dropdown.Menu = DropdownMenu
-Dropdown.Item = DropdownItem
-
Dropdown.Menu.propTypes = {
direction: PropTypes.oneOf(['ne', 'e', 'se', 's', 'sw', 'w']),
...COMMON.propTypes
@@ -136,10 +137,16 @@ Dropdown.Item.propTypes = {
...COMMON.propTypes
}
+Dropdown.Button.defaultProps = {theme}
+
+Dropdown.Caret.defaultProps = {theme}
+Dropdown.Caret.propTpyes = {
+ ...COMMON.propTypes
+}
+
Dropdown.defaultProps = {theme}
Dropdown.propTypes = {
- children: PropTypes.node,
- title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+ ...Details.propTypes,
...COMMON.propTypes
}
diff --git a/src/Pagination/Pagination.js b/src/Pagination/Pagination.js
new file mode 100644
index 00000000000..ff9b56a5b7f
--- /dev/null
+++ b/src/Pagination/Pagination.js
@@ -0,0 +1,163 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled, {css} from 'styled-components'
+import {get, COMMON} from '../constants'
+import theme from '../theme'
+import Box from '../Box'
+import {buildPaginationModel, buildComponentData} from './model'
+
+const Page = styled.a`
+ position: relative;
+ float: left;
+ padding: 7px 12px;
+ margin-left: -1px;
+ font-size: ${get('pagination.fontSize')};
+ font-style: normal;
+ font-weight: ${get('pagination.fontWeight')};
+ color: ${get('pagination.colors.normal.fg')};
+ white-space: nowrap;
+ vertical-align: middle;
+ cursor: pointer;
+ user-select: none;
+ background: ${get('pagination.colors.normal.bg')};
+ border: ${get('borders.1')} ${get('pagination.colors.normal.border')};
+ text-decoration: none;
+
+ &:first-child {
+ margin-left: 0;
+ border-top-left-radius: ${get('pagination.borderRadius')};
+ border-bottom-left-radius: ${get('pagination.borderRadius')};
+ }
+
+ &:last-child {
+ border-top-right-radius: ${get('pagination.borderRadius')};
+ border-bottom-right-radius: ${get('pagination.borderRadius')};
+ }
+
+ ${props =>
+ !props.selected &&
+ !props.disabled &&
+ css`
+ &:hover,
+ &:focus {
+ z-index: 2;
+ color: ${get('pagination.colors.hover.fg')};
+ background-color: ${get('pagination.colors.hover.bg')};
+ border-color: ${get('pagination.colors.hover.border')};
+ }
+ `}
+
+ ${props =>
+ props.selected &&
+ css`
+ z-index: 3;
+ color: ${get('pagination.colors.selected.fg')};
+ background-color: ${get('pagination.colors.selected.bg')};
+ border-color: ${get('pagination.colors.selected.border')};
+ `}
+
+ ${props =>
+ props.disabled &&
+ css`
+ color: ${get('pagination.colors.disabled.fg')};
+ cursor: default;
+ background-color: ${get('pagination.colors.disabled.bg')};
+ border-color: ${get('pagination.colors.disabled.border')};
+ `}
+
+ ${COMMON};
+`
+
+function usePaginationPages({
+ theme,
+ pageCount,
+ currentPage,
+ onPageChange,
+ hrefBuilder,
+ marginPageCount,
+ showPages,
+ surroundingPageCount
+}) {
+ const pageChange = React.useCallback(n => e => onPageChange(e, n), [onPageChange])
+
+ const model = React.useMemo(() => {
+ return buildPaginationModel(pageCount, currentPage, showPages, marginPageCount, surroundingPageCount)
+ }, [pageCount, currentPage, showPages, marginPageCount, surroundingPageCount])
+
+ const children = React.useMemo(() => {
+ return model.map(page => {
+ const {props, key, content} = buildComponentData(page, hrefBuilder, pageChange(page.num))
+ return (
+
+ {content}
+
+ )
+ })
+ }, [model, hrefBuilder, pageChange])
+
+ return children
+}
+
+const PaginationContainer = styled.nav`
+ margin-top: 20px;
+ margin-bottom: 15px;
+ text-align: center;
+`
+
+function Pagination({
+ theme,
+ pageCount,
+ currentPage,
+ onPageChange,
+ hrefBuilder,
+ marginPageCount,
+ showPages,
+ surroundingPageCount,
+ ...rest
+}) {
+ const pageElements = usePaginationPages({
+ theme,
+ pageCount,
+ currentPage,
+ onPageChange,
+ hrefBuilder,
+ marginPageCount,
+ showPages,
+ surroundingPageCount
+ })
+ return (
+
+
+ {pageElements}
+
+
+ )
+}
+
+function defaultHrefBuilder(pageNum) {
+ return `#${pageNum}`
+}
+
+function noop() {}
+
+Pagination.propTypes = {
+ currentPage: PropTypes.number.isRequired,
+ hrefBuilder: PropTypes.func,
+ marginPageCount: PropTypes.number,
+ onPageChange: PropTypes.func,
+ pageCount: PropTypes.number.isRequired,
+ showPages: PropTypes.bool,
+ surroundingPageCount: PropTypes.number,
+ ...COMMON.propTypes
+}
+
+Pagination.defaultProps = {
+ hrefBuilder: defaultHrefBuilder,
+ marginPageCount: 1,
+ onPageChange: noop,
+ showPages: true,
+ surroundingPageCount: 2,
+ theme
+}
+
+export default Pagination
diff --git a/src/Pagination/index.js b/src/Pagination/index.js
new file mode 100644
index 00000000000..1466412190c
--- /dev/null
+++ b/src/Pagination/index.js
@@ -0,0 +1,3 @@
+import Pagination from './Pagination'
+
+export default Pagination
diff --git a/src/Pagination/model.js b/src/Pagination/model.js
new file mode 100644
index 00000000000..9a9dda8a166
--- /dev/null
+++ b/src/Pagination/model.js
@@ -0,0 +1,170 @@
+export function buildPaginationModel(pageCount, currentPage, showPages, marginPageCount, surroundingPageCount) {
+ const pages = []
+
+ if (showPages) {
+ const pageNums = []
+ const addPage = n => {
+ if (n >= 1 && n <= pageCount) {
+ pageNums.push(n)
+ }
+ }
+
+ // Start by defining the window of pages to show around the current page.
+ // If the window goes off either edge, shift it until it fits.
+ let extentLeft = currentPage - surroundingPageCount
+ let extentRight = currentPage + surroundingPageCount
+ if (extentLeft < 1 && extentRight > pageCount) {
+ // Our window is larger than the entire range,
+ // so simply display every page.
+ extentLeft = 1
+ extentRight = pageCount
+ } else if (extentLeft < 1) {
+ while (extentLeft < 1) {
+ extentLeft++
+ extentRight++
+ }
+ } else if (extentRight > pageCount) {
+ while (extentRight > pageCount) {
+ extentLeft--
+ extentRight--
+ }
+ }
+
+ // Next, include the pages in the margins.
+ // If a margin page is already covered in the window,
+ // extend the window to the other direction.
+ for (let i = 1; i <= marginPageCount; i++) {
+ const leftPage = i
+ const rightPage = pageCount - (i - 1)
+ if (leftPage >= extentLeft) {
+ extentRight++
+ } else {
+ addPage(leftPage)
+ }
+ if (rightPage <= extentRight) {
+ extentLeft--
+ } else {
+ addPage(rightPage)
+ }
+ }
+
+ for (let i = extentLeft; i <= extentRight; i++) {
+ addPage(i)
+ }
+
+ const sorted = pageNums
+ .slice()
+ .sort((a, b) => a - b)
+ .filter((item, idx, ary) => !idx || item !== ary[idx - 1])
+ for (let idx = 0; idx < sorted.length; idx++) {
+ const num = sorted[idx]
+ const selected = num === currentPage
+ if (idx === 0) {
+ if (num !== 1) {
+ // If the first page isn't page one,
+ // we need to add a break
+ pages.push({
+ type: 'BREAK',
+ num: 1
+ })
+ }
+ pages.push({
+ type: 'NUM',
+ num,
+ selected
+ })
+ } else {
+ const last = sorted[idx - 1]
+ const delta = num - last
+ if (delta === 1) {
+ pages.push({
+ type: 'NUM',
+ num,
+ selected
+ })
+ } else {
+ // We skipped some, so add a break
+ pages.push({
+ type: 'BREAK',
+ num: num - 1
+ })
+ pages.push({
+ type: 'NUM',
+ num,
+ selected
+ })
+ }
+ }
+ }
+
+ const lastPage = pages[pages.length - 1]
+ if (lastPage.type === 'NUM' && lastPage.num !== pageCount) {
+ // The last page we rendered wasn't the actual last page,
+ // so we need an additional break
+ pages.push({
+ type: 'BREAK',
+ num: pageCount
+ })
+ }
+ }
+
+ const prev = {type: 'PREV', num: currentPage - 1, disabled: currentPage === 1}
+ const next = {type: 'NEXT', num: currentPage + 1, disabled: currentPage === pageCount}
+ return [prev, ...pages, next]
+}
+
+export function buildComponentData(page, hrefBuilder, onClick) {
+ const props = {}
+ let content = ''
+ let key = ''
+
+ switch (page.type) {
+ case 'PREV': {
+ key = 'page-prev'
+ content = 'Previous'
+ if (page.disabled) {
+ Object.assign(props, {as: 'span', 'aria-disabled': 'true', disabled: true})
+ } else {
+ Object.assign(props, {
+ rel: 'prev',
+ href: hrefBuilder(page.num),
+ 'aria-label': 'Previous Page',
+ onClick
+ })
+ }
+ break
+ }
+ case 'NEXT': {
+ key = 'page-next'
+ content = 'Next'
+ if (page.disabled) {
+ Object.assign(props, {as: 'span', 'aria-disabled': 'true', disabled: true})
+ } else {
+ Object.assign(props, {
+ rel: 'next',
+ href: hrefBuilder(page.num),
+ 'aria-label': 'Next Page',
+ onClick
+ })
+ }
+ break
+ }
+ case 'NUM': {
+ key = `page-${page.num}`
+ content = page.num
+ if (page.selected) {
+ Object.assign(props, {as: 'em', 'aria-current': 'page', selected: true})
+ } else {
+ Object.assign(props, {href: hrefBuilder(page.num), 'aria-label': `Page ${page.num}`, onClick})
+ }
+ break
+ }
+ case 'BREAK': {
+ key = `page-${page.num}-break`
+ content = '…'
+ Object.assign(props, {as: 'span', disabled: true})
+ }
+ }
+
+ return {props, key, content}
+}
diff --git a/src/SelectMenu/SelectMenu.js b/src/SelectMenu/SelectMenu.js
new file mode 100644
index 00000000000..e6969f11570
--- /dev/null
+++ b/src/SelectMenu/SelectMenu.js
@@ -0,0 +1,101 @@
+import React, {useRef, useState} from 'react'
+import styled from 'styled-components'
+import PropTypes from 'prop-types'
+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 useKeyboardNav from './hooks/useKeyboardNav'
+
+const wrapperStyles = `
+ &[open] > summary::before {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 80;
+ display: block;
+ cursor: default;
+ content: ' ';
+ background: transparent;
+ }
+ // 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}
+`
+
+// 'as' is spread out because we don't want users to be able to change the tag.
+const SelectMenu = ({children, initialTab, as, ...rest}) => {
+ const ref = useRef(null)
+ const [selectedTab, setSelectedTab] = useState(initialTab)
+ const [open, setOpen] = useState(false)
+ const menuProviderValues = {
+ selectedTab,
+ setSelectedTab,
+ setOpen,
+ open,
+ initialTab
+ }
+
+ function toggle(event) {
+ setOpen(event.target.open)
+ }
+
+ useKeyboardNav(ref, open, setOpen)
+
+ return (
+
+
+ {children}
+
+
+ )
+}
+
+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.defaultProps = {
+ theme
+}
+
+SelectMenu.propTypes = {
+ initialTab: PropTypes.string,
+ ...COMMON.propTypes
+}
+
+export default SelectMenu
diff --git a/src/SelectMenu/SelectMenuContext.js b/src/SelectMenu/SelectMenuContext.js
new file mode 100644
index 00000000000..a63f91b96fc
--- /dev/null
+++ b/src/SelectMenu/SelectMenuContext.js
@@ -0,0 +1,3 @@
+import {createContext} from 'react'
+
+export const MenuContext = createContext()
diff --git a/src/SelectMenu/SelectMenuDivider.js b/src/SelectMenu/SelectMenuDivider.js
new file mode 100644
index 00000000000..7ecebf1c9ea
--- /dev/null
+++ b/src/SelectMenu/SelectMenuDivider.js
@@ -0,0 +1,28 @@
+import styled, {css} from 'styled-components'
+import theme from '../theme'
+import {COMMON, get} from '../constants'
+
+const dividerStyles = css`
+ padding: ${get('space.1')} ${get('space.3')};
+ margin: 0;
+ font-size: ${get('fontSizes.0')};
+ font-weight: ${get('fontWeights.bold')};
+ color: ${get('colors.text.grayLight')};
+ background-color: ${get('colors.bg.gray')};
+ border-bottom: ${get('borders.1')} ${get('colors.border.grayLight')};
+`
+
+const SelectMenuDivider = styled.div`
+ ${dividerStyles}
+ ${COMMON}
+`
+
+SelectMenuDivider.defaultProps = {
+ theme
+}
+
+SelectMenuDivider.propTypes = {
+ ...COMMON.propTypes
+}
+
+export default SelectMenuDivider
diff --git a/src/SelectMenu/SelectMenuFilter.js b/src/SelectMenu/SelectMenuFilter.js
new file mode 100644
index 00000000000..085868b9127
--- /dev/null
+++ b/src/SelectMenu/SelectMenuFilter.js
@@ -0,0 +1,47 @@
+import React, {useRef, useContext, 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'
+
+const StyledForm = styled.form`
+ padding: ${get('space.3')};
+ margin: 0;
+ border-top: ${get('borders.1')} ${get('colors.border.gray')};
+ background-color: ${get('colors.white')};
+ ${COMMON};
+
+ @media (min-width: ${get('breakpoints.0')}) {
+ padding: ${get('space.2')};
+ }
+`
+
+function SelectMenuFilter({theme, value, ...rest}) {
+ const inputRef = useRef(null)
+ const {open} = useContext(MenuContext)
+
+ // puts focus on the filter input when the menu is opened
+ useEffect(() => {
+ if (open) {
+ inputRef.current.focus()
+ }
+ }, [open])
+ return (
+
+
+
+ )
+}
+
+SelectMenuFilter.defaultProps = {
+ theme
+}
+
+SelectMenuFilter.propTypes = {
+ ...COMMON.propTypes,
+ value: PropTypes.string
+}
+
+export default SelectMenuFilter
diff --git a/src/SelectMenu/SelectMenuFooter.js b/src/SelectMenu/SelectMenuFooter.js
new file mode 100644
index 00000000000..4e107684879
--- /dev/null
+++ b/src/SelectMenu/SelectMenuFooter.js
@@ -0,0 +1,31 @@
+import styled, {css} from 'styled-components'
+import {COMMON, get} from '../constants'
+import theme from '../theme'
+
+const footerStyles = css`
+ margin-top: -1px;
+ padding: ${get('space.2')} ${get('space.3')};
+ font-size: ${get('fontSizes.0')};
+ color: ${get('colors.text.grayLight')};
+ text-align: center;
+ border-top: ${get('borders.1')} ${get('colors.border.gray')};
+
+ @media (min-width: ${get('breakpoints.0')}) {
+ padding: ${get('space.1')} ${get('space.2')};
+ }
+`
+
+const SelectMenuFooter = styled.footer`
+ ${footerStyles}
+ ${COMMON}
+`
+
+SelectMenuFooter.defaultProps = {
+ theme
+}
+
+SelectMenuFooter.propTypes = {
+ ...COMMON.propTypes
+}
+
+export default SelectMenuFooter
diff --git a/src/SelectMenu/SelectMenuHeader.js b/src/SelectMenu/SelectMenuHeader.js
new file mode 100644
index 00000000000..35b42838526
--- /dev/null
+++ b/src/SelectMenu/SelectMenuHeader.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import styled from 'styled-components'
+import {get, COMMON, TYPOGRAPHY} from '../constants'
+import theme from '../theme'
+
+// SelectMenu.Header is intentionally not exported, it's an internal component used in
+// SelectMenu.Modal
+
+const SelectMenuTitle = styled.h3`
+ flex: auto;
+ font-size: ${get('fontSizes.1')};
+ font-weight: ${get('fontWeights.bold')};
+ margin: 0;
+
+ @media (min-width: ${get('breakpoints.0')}) {
+ font-size: inherit;
+ }
+`
+
+const StyledHeader = styled.header`
+ display: flex;
+ flex: none; // fixes header from getting squeezed in Safari iOS
+ padding: ${get('space.3')};
+ ${COMMON}
+ ${TYPOGRAPHY}
+
+ @media (min-width: ${get('breakpoints.0')}) {
+ padding-top: ${get('space.2')};
+ padding-bottom: ${get('space.2')};
+ }
+`
+const SelectMenuHeader = ({children, theme, ...rest}) => {
+ return (
+
+ {children}
+
+ )
+}
+
+SelectMenuHeader.defaultProps = {
+ theme
+}
+
+export default SelectMenuHeader
diff --git a/src/SelectMenu/SelectMenuItem.js b/src/SelectMenu/SelectMenuItem.js
new file mode 100644
index 00000000000..cbd293bae71
--- /dev/null
+++ b/src/SelectMenu/SelectMenuItem.js
@@ -0,0 +1,130 @@
+import React, {useContext} from 'react'
+import PropTypes from 'prop-types'
+import styled, {css} from 'styled-components'
+import {Check} from '@primer/octicons-react'
+import {MenuContext} from './SelectMenuContext'
+import {COMMON, get} from '../constants'
+import StyledOcticon from '../StyledOcticon'
+import theme from '../theme'
+
+export const listItemStyles = css`
+ display: flex;
+ align-items: center;
+ padding: ${get('space.3')};
+ overflow: hidden;
+ text-align: left;
+ cursor: pointer;
+ background-color: ${get('colors.white')};
+ border: 0;
+ border-bottom: ${get('borders.1')} ${get('colors.border.grayLight')};
+ color: ${get('colors.text.gray')};
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: none;
+ }
+ &:focus {
+ outline: none;
+ }
+
+ &[hidden] {
+ display: none !important;
+ }
+
+ @media (min-width: ${get('breakpoints.0')}) {
+ padding-top: ${get('space.2')};
+ padding-bottom: ${get('space.2')};
+ }
+
+ .SelectMenu-icon {
+ width: ${get('space.3')};
+ margin-right: ${get('space.2')};
+ flex-shrink: 0;
+ }
+
+ .SelectMenu-selected-icon {
+ visibility: hidden;
+ transition: transform 0.12s cubic-bezier(0.5, 0.1, 1, 0.5), visibility 0s 0.12s linear;
+ transform: scale(0);
+ }
+
+ // selected items
+ &[aria-checked='true'] {
+ font-weight: 500;
+ color: ${get('colors.gray.9')};
+
+ .SelectMenu-selected-icon {
+ visibility: visible;
+ transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), visibility 0s linear;
+ transform: scale(1);
+ }
+ }
+
+ // can hover states
+ @media (hover: hover) {
+ body:not(.intent-mouse) .SelectMenu-item:focus,
+ &:hover,
+ &:active,
+ &:focus {
+ background-color: ${get('colors.bg.gray')};
+ }
+ }
+
+ // Can not hover states
+ //
+ // For touch input
+
+ @media (hover: none) {
+ // Android
+ &:focus,
+ &:active {
+ background-color: ${get('colors.bg.grayLight')};
+ }
+
+ // iOS Safari
+ // :active would work if ontouchstart is added to the button
+ // Instead this tweaks the "native" highlight color
+ -webkit-tap-highlight-color: rgba(${get('colors.gray.3')}, 0.5);
+ }
+`
+
+const StyledItem = styled.a.attrs(() => ({
+ role: 'menuitemcheckbox'
+}))`
+ ${listItemStyles}
+ ${COMMON}
+`
+
+// 'as' is spread out because we don't want users to be able to change the tag. using something
+// other than 'a' will break a11y.
+const SelectMenuItem = ({children, selected, theme, onClick, as, ...rest}) => {
+ const menuContext = useContext(MenuContext)
+
+ // 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)
+
+ if (!e.defaultPrevented) {
+ menuContext.setOpen(false)
+ }
+ }
+ return (
+
+
+ {children}
+
+ )
+}
+
+SelectMenuItem.defaultProps = {
+ theme,
+ selected: false
+}
+
+SelectMenuItem.propTypes = {
+ selected: PropTypes.bool,
+ ...COMMON.propTypes
+}
+
+export default SelectMenuItem
diff --git a/src/SelectMenu/SelectMenuList.js b/src/SelectMenu/SelectMenuList.js
new file mode 100644
index 00000000000..5e57b049e26
--- /dev/null
+++ b/src/SelectMenu/SelectMenuList.js
@@ -0,0 +1,45 @@
+import styled, {css} from 'styled-components'
+import theme from '../theme'
+import {COMMON, get} from '../constants'
+
+const listStyles = css`
+ position: relative;
+ padding: 0;
+ margin: 0;
+ flex: auto;
+ overflow-x: hidden;
+ overflow-y: auto;
+ background-color: ${get('colors.white')};
+ border-top: ${get('borders.1')} ${get('colors.border.gray')};
+ -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
+
+ @media (hover: hover) {
+ .SelectMenuTab:focus {
+ background-color: ${get('colors.blue.1')};
+ }
+
+ .SelectMenuTab:not([aria-checked='true']):hover {
+ color: ${get('colors.gray.9')};
+ background-color: ${get('colors.gray.2')};
+ }
+
+ .SelectMenuTab:not([aria-checked='true']):active {
+ color: ${get('colors.gray.9')};
+ background-color: ${get('colors.gray.1')};
+ }
+ }
+`
+
+const SelectMenuList = styled.div`
+ ${listStyles}
+ ${COMMON}
+`
+SelectMenuList.defaultProps = {
+ theme
+}
+
+SelectMenuList.propTypes = {
+ ...COMMON.propTypes
+}
+
+export default SelectMenuList
diff --git a/src/SelectMenu/SelectMenuModal.js b/src/SelectMenu/SelectMenuModal.js
new file mode 100644
index 00000000000..fc172c2cecf
--- /dev/null
+++ b/src/SelectMenu/SelectMenuModal.js
@@ -0,0 +1,103 @@
+import React from 'react'
+import styled, {keyframes, css} from 'styled-components'
+import {COMMON, get} from '../constants'
+import theme from '../theme'
+
+const animateModal = keyframes`
+ 0% {
+ opacity: 0;
+ transform: scale(0.9);
+ }
+`
+
+const modalStyles = css`
+ position: relative;
+ z-index: 99; // Needs to be higher than .details-overlay's z-index: 80.
+ display: flex;
+ ${props => (props.filter ? 'height: 80%' : '')};
+ max-height: ${props => (props.filter ? 'none' : '66%')};
+ margin: auto 0;
+ ${props => (props.filter ? 'margin-top: 0' : '')};
+ overflow: hidden; // Enables border radius on scrollable child elements
+ pointer-events: auto;
+ flex-direction: column;
+ background-color: ${get('colors.white')};
+ border-radius: ${get('radii.2')};
+ box-shadow: 0 1px 5px rgba(27, 31, 35, 0.15);
+ animation: ${animateModal} 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
+
+ @media (min-width: ${get('breakpoints.0')}) {
+ width: '300px';
+ height: auto;
+ max-height: 350px;
+ margin: ${get('space.1')} 0 ${get('space.3')} 0;
+ font-size: ${get('fontSizes.0')};
+ border: ${get('borders.1')} ${get('colors.border.grayDark')};
+ border-radius: ${get('radii.2')};
+ box-shadow: 0 1px 5px ${get('colors.blackfade15')} !default;
+ }
+`
+
+const modalWrapperStyles = css`
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 99;
+ display: flex;
+ padding: ${get('space.3')};
+ pointer-events: none;
+ flex-direction: column;
+
+ &::before {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ pointer-events: none;
+ content: '';
+ background-color: ${get('colors.blackfade50')};
+
+ @media (min-width: ${get('breakpoints.0')}) {
+ display: none;
+ }
+ }
+
+ @media (min-width: ${get('breakpoints.0')}) {
+ position: absolute;
+ top: auto;
+ right: auto;
+ bottom: auto;
+ left: auto;
+ padding: 0;
+ }
+`
+
+const Modal = styled.div`
+ ${modalStyles}
+`
+
+const ModalWrapper = styled.div`
+ ${modalWrapperStyles}
+ ${COMMON}
+`
+
+const SelectMenuModal = ({children, theme, ...rest}) => {
+ return (
+
+ {children}
+
+ )
+}
+
+SelectMenuModal.defaultProps = {
+ theme
+}
+
+SelectMenuModal.propTypes = {
+ ...COMMON.propTypes
+}
+
+export default SelectMenuModal
diff --git a/src/SelectMenu/SelectMenuTab.js b/src/SelectMenu/SelectMenuTab.js
new file mode 100644
index 00000000000..160df1806da
--- /dev/null
+++ b/src/SelectMenu/SelectMenuTab.js
@@ -0,0 +1,94 @@
+import React, {useContext, useEffect} from 'react'
+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 theme from '../theme'
+
+const tabStyles = css`
+ flex: 1;
+ padding: ${get('space.2')} ${get('space.3')};
+ font-size: ${get('fontSizes.0')};
+ font-weight: 500;
+ color: ${get('colors.gray.5')};
+ text-align: center;
+ background-color: transparent;
+ border: 0;
+ box-shadow: inset 0 -1px 0 ${get('colors.border.gray')};
+
+ @media (min-width: ${get('breakpoints.0')}) {
+ flex: none;
+ padding: ${get('space.1')} ${get('space.3')};
+ border: ${get('borders.1')} transparent;
+ border-bottom-width: 0;
+ border-top-left-radius: ${get('radii.2')};
+ border-top-right-radius: ${get('radii.2')};
+ }
+
+ &[aria-selected='true'] {
+ z-index: 1; // Keeps box-shadow visible when hovering
+ color: ${get('colors.gray.9')};
+ background-color: ${get('colors.white')};
+ box-shadow: 0 0 0 1px ${get('colors.border.gray')};
+
+ @media (min-width: ${get('breakpoints.0')}) {
+ border-color: ${get('colors.border.gray')};
+ box-shadow: none;
+ }
+ }
+
+ &:focus {
+ background-color: #dbedff;
+ }
+`
+
+const StyledTab = styled.button`
+ ${tabStyles}
+ ${COMMON}
+`
+
+const SelectMenuTab = ({tabName, index, className, onClick, ...rest}) => {
+ const menuContext = useContext(MenuContext)
+ const handleClick = e => {
+ // if consumer has attached an onClick event, call it
+ onClick && onClick(e)
+ if (!e.defaultPrevented) {
+ 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)
+ }
+ }, [])
+
+ const isSelected = menuContext.selectedTab === tabName
+
+ return (
+
+ {tabName}
+
+ )
+}
+
+SelectMenuTab.defaultProps = {
+ theme
+}
+
+SelectMenuTab.propTypes = {
+ index: PropTypes.number,
+ onClick: PropTypes.func,
+ tabName: PropTypes.string,
+ ...COMMON.propTypes
+}
+
+export default SelectMenuTab
diff --git a/src/SelectMenu/SelectMenuTabPanel.js b/src/SelectMenu/SelectMenuTabPanel.js
new file mode 100644
index 00000000000..338598c9645
--- /dev/null
+++ b/src/SelectMenu/SelectMenuTabPanel.js
@@ -0,0 +1,31 @@
+import React, {useContext} from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import {MenuContext} from './SelectMenuContext'
+import SelectMenuList from './SelectMenuList'
+import theme from '../theme'
+import {COMMON} from '../constants'
+
+const TabPanelBase = ({tabName, className, children, ...rest}) => {
+ const menuContext = useContext(MenuContext)
+ return (
+