@primer/components 31.2.0 → 31.2.1-rc.0e01900c

package/src/SelectMenu/SelectMenuHeader.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import styled from 'styled-components'
+import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+
+// SelectMenu.Header is intentionally not exported, it's an internal component used in
+// SelectMenu.Modal
+
+const SelectMenuTitle = styled.h3`
+  color: ${get('colors.fg.default')};
+  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<SystemTypographyProps & SystemCommonProps & SxProp>`
+  display: flex;
+  flex: none; // fixes header from getting squeezed in Safari iOS
+  padding: ${get('space.3')};
+  border-bottom: ${get('borderWidths')} solid ${get('colors.border.muted')};
+  ${COMMON}
+  ${TYPOGRAPHY}
+
+  @media (min-width: ${get('breakpoints.0')}) {
+    padding-top: ${get('space.2')};
+    padding-bottom: ${get('space.2')};
+  }
+
+  ${sx};
+`
+
+export type SelectMenuHeaderProps = ComponentProps<typeof StyledHeader>
+
+const SelectMenuHeader = ({children, theme, ...rest}: SelectMenuHeaderProps) => {
+  return (
+    <StyledHeader theme={theme} {...rest}>
+      <SelectMenuTitle theme={theme}>{children}</SelectMenuTitle>
+    </StyledHeader>
+  )
+}
+
+SelectMenuHeader.displayName = 'SelectMenu.Header'
+
+export default SelectMenuHeader

package/src/SelectMenu/SelectMenuItem.tsx

@@ -0,0 +1,137 @@
+import {CheckIcon} from '@primer/octicons-react'
+import React, {forwardRef, useContext, useRef} from 'react'
+import styled, {css} from 'styled-components'
+import {COMMON, get, SystemCommonProps} from '../constants'
+import StyledOcticon from '../StyledOcticon'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+import {MenuContext} from './SelectMenuContext'
+
+export const listItemStyles = css`
+  display: flex;
+  align-items: center;
+  padding: ${get('space.3')};
+  overflow: hidden;
+  text-align: left;
+  cursor: pointer;
+  background-color: ${get('colors.canvas.overlay')};
+  border: 0;
+  border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
+  color: ${get('colors.fg.muted')};
+  text-decoration: none;
+  font-size: ${get('fontSizes.0')};
+  font-family: inherit; // needed if user uses a "button" tag
+  width: 100%;
+
+  &: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.fg.default')};
+
+    .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) {
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: ${get('colors.neutral.subtle')};
+    }
+  }
+
+  // Can not hover states
+  //
+  // For touch input
+
+  @media (hover: none) {
+    // Android
+    &:focus,
+    &:active {
+      background-color: ${get('colors.canvas.subtle')};
+    }
+
+    // iOS Safari
+    // :active would work if ontouchstart is added to the button
+    // Instead this tweaks the "native" highlight color
+    -webkit-tap-highlight-color: ${get('colors.selectMenu.tapHighlight')};
+  }
+`
+
+const StyledItem = styled.a.attrs(() => ({
+  role: 'menuitemcheckbox'
+}))<SystemCommonProps & SxProp>`
+  ${listItemStyles}
+  ${COMMON}
+  ${sx};
+`
+
+type SelectMenuItemInteralProps = {
+  as?: React.ElementType
+  selected?: boolean
+} & ComponentProps<typeof StyledItem>
+
+const SelectMenuItem = forwardRef<HTMLAnchorElement, SelectMenuItemInteralProps>(
+  ({children, selected, theme, onClick, ...rest}, forwardedRef) => {
+    const menuContext = useContext(MenuContext)
+    const backupRef = useRef<HTMLAnchorElement>(null)
+    const itemRef = forwardedRef ?? backupRef
+
+    // 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: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+      onClick && onClick(e)
+
+      if (!e.defaultPrevented) {
+        menuContext.setOpen?.(false)
+      }
+    }
+    return (
+      <StyledItem ref={itemRef} {...rest} theme={theme} onClick={handleClick} aria-checked={selected}>
+        <StyledOcticon theme={theme} className="SelectMenu-icon SelectMenu-selected-icon" icon={CheckIcon} />
+        {children}
+      </StyledItem>
+    )
+  }
+)
+
+SelectMenuItem.defaultProps = {
+  selected: false
+}
+
+SelectMenuItem.displayName = 'SelectMenu.Item'
+
+export type SelectMenuItemProps = ComponentProps<typeof SelectMenuItem>
+export default SelectMenuItem

package/src/SelectMenu/SelectMenuList.tsx

@@ -0,0 +1,42 @@
+import styled, {css} from 'styled-components'
+import {COMMON, get, SystemCommonProps} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+
+const listStyles = css`
+  position: relative;
+  padding: 0;
+  margin: 0;
+  flex: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: ${get('colors.canvas.overlay')};
+  -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
+
+  @media (hover: hover) {
+    .SelectMenuTab:focus {
+      background-color: ${get('colors.selectMenu.tapFocusBg')};
+    }
+
+    .SelectMenuTab:not([aria-checked='true']):hover {
+      color: ${get('colors.fg.default')};
+      background-color: ${get('colors.canvas.subtle')};
+    }
+
+    .SelectMenuTab:not([aria-checked='true']):active {
+      color: ${get('colors.fg.default')};
+      background-color: ${get('colors.canvas.subtle')};
+    }
+  }
+`
+
+const SelectMenuList = styled.div<SystemCommonProps & SxProp>`
+  ${listStyles}
+  ${COMMON}
+  ${sx};
+`
+
+SelectMenuList.displayName = 'SelectMenu.List'
+
+export type SelectMenuListProps = ComponentProps<typeof SelectMenuList>
+export default SelectMenuList

package/src/SelectMenu/SelectMenuLoadingAnimation.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import styled from 'styled-components'
+import {COMMON, get, SystemCommonProps} from '../constants'
+import Spinner from '../Spinner'
+import {ComponentProps} from '../utils/types'
+
+const Animation = styled.div<SystemCommonProps>`
+  padding: ${get('space.6')} ${get('space.4')};
+  text-align: center;
+  background-color: ${get('colors.canvas.overlay')};
+  ${COMMON}
+`
+
+export type SelectMenuLoadingAnimationProps = ComponentProps<typeof Animation>
+
+const SelectMenuLoadingAnimation = (props: SelectMenuLoadingAnimationProps) => {
+  return (
+    <Animation {...props}>
+      <Spinner />
+    </Animation>
+  )
+}
+
+export default SelectMenuLoadingAnimation

package/src/SelectMenu/SelectMenuModal.tsx

@@ -0,0 +1,121 @@
+import React from 'react'
+import styled, {css, keyframes} from 'styled-components'
+import {width, WidthProps} from 'styled-system'
+import {COMMON, get, SystemCommonProps} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+
+type StyledModalProps = {
+  filter?: boolean
+} & WidthProps
+
+type StyledModalWrapperProps = {
+  align?: 'left' | 'right'
+} & SystemCommonProps &
+  SxProp
+
+const animateModal = keyframes`
+  0% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+`
+
+const modalStyles = css<StyledModalProps>`
+  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.canvas.overlay')};
+  border-radius: ${get('radii.2')};
+  box-shadow: ${get('shadows.shadow.small')};
+  animation: ${animateModal} 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
+
+  @media (min-width: ${get('breakpoints.0')}) {
+    height: auto;
+    max-height: 350px;
+    margin: ${get('space.1')} 0 ${get('space.3')} 0;
+    font-size: ${get('fontSizes.0')};
+    border: ${get('borderWidths.1')} solid ${get('colors.border.default')};
+    border-radius: ${get('radii.2')};
+    box-shadow: ${get('shadows.shadow.small')};
+  }
+`
+
+const modalWrapperStyles = css<StyledModalWrapperProps>`
+  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.primer.canvas.backdrop')};
+
+    @media (min-width: ${get('breakpoints.0')}) {
+      display: none;
+    }
+  }
+
+  @media (min-width: ${get('breakpoints.0')}) {
+    position: absolute;
+    top: auto;
+    right: ${props => (props.align === 'right' ? '0' : 'auto')};
+    bottom: auto;
+    left: auto;
+    padding: 0;
+  }
+`
+
+const Modal = styled.div<StyledModalProps>`
+  ${modalStyles}
+  ${width}
+`
+
+const ModalWrapper = styled.div<StyledModalWrapperProps>`
+  ${modalWrapperStyles}
+  ${COMMON}
+  ${sx};
+`
+
+type SelectMenuModalInternalProps = Pick<StyledModalProps, 'width'> & ComponentProps<typeof ModalWrapper>
+
+const SelectMenuModal = React.forwardRef<HTMLDivElement, SelectMenuModalInternalProps>(
+  ({children, theme, width: widthProp, ...rest}, forwardedRef) => {
+    return (
+      <ModalWrapper theme={theme} {...rest} role="menu" ref={forwardedRef}>
+        <Modal theme={theme} width={widthProp}>
+          {children}
+        </Modal>
+      </ModalWrapper>
+    )
+  }
+)
+
+SelectMenuModal.defaultProps = {
+  align: 'left',
+  width: '300px'
+}
+
+SelectMenuModal.displayName = 'SelectMenu.Modal'
+
+export type SelectMenuModalProps = ComponentProps<typeof SelectMenuModal>
+export default SelectMenuModal

package/src/SelectMenu/SelectMenuTab.tsx

@@ -0,0 +1,88 @@
+import classnames from 'classnames'
+import React, {useContext, useEffect} from 'react'
+import styled, {css} from 'styled-components'
+import {COMMON, get, SystemCommonProps} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+import {MenuContext} from './SelectMenuContext'
+
+const tabStyles = css`
+  flex: 1;
+  padding: ${get('space.2')} ${get('space.3')};
+  font-size: ${get('fontSizes.0')};
+  font-weight: 500;
+  color: ${get('colors.fg.muted')};
+  text-align: center;
+  background-color: transparent;
+  border: 0;
+  box-shadow: inset 0 -1px 0 ${get('colors.border.muted')};
+
+  @media (min-width: ${get('breakpoints.0')}) {
+    flex: none;
+    padding: ${get('space.1')} ${get('space.3')};
+    border: ${get('borderWidths.1')} solid 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.text-primary')};
+    background-color: ${get('colors.canvas.overlay')};
+    box-shadow: 0 0 0 1px ${get('colors.border.muted')};
+
+    @media (min-width: ${get('breakpoints.0')}) {
+      border-color: ${get('colors.border.muted')};
+      box-shadow: none;
+    }
+  }
+
+  &:focus {
+    background-color: ${get('colors.neutral.subtle')};
+  }
+`
+
+const StyledTab = styled.button<SystemCommonProps & SxProp>`
+  ${tabStyles}
+  ${COMMON}
+  ${sx};
+`
+
+export type SelectMenuTabProps = {tabName?: string; index?: number} & ComponentProps<typeof StyledTab>
+
+const SelectMenuTab = ({tabName = '', index, className, onClick, ...rest}: SelectMenuTabProps) => {
+  const menuContext = useContext(MenuContext)
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    // 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)
+    }
+  }, [index, menuContext, tabName])
+
+  const isSelected = menuContext.selectedTab === tabName
+
+  return (
+    <StyledTab
+      role="tab"
+      className={classnames('SelectMenuTab', className)}
+      aria-selected={isSelected}
+      onClick={handleClick}
+      {...rest}
+    >
+      {tabName}
+    </StyledTab>
+  )
+}
+
+SelectMenuTab.displayName = 'SelectMenu.Tab'
+
+export default SelectMenuTab

package/src/SelectMenu/SelectMenuTabPanel.tsx

@@ -0,0 +1,30 @@
+import React, {useContext} from 'react'
+import styled from 'styled-components'
+import {COMMON, get, SystemCommonProps} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+import {MenuContext} from './SelectMenuContext'
+import SelectMenuList from './SelectMenuList'
+
+const TabPanelBase = styled.div<SystemCommonProps & SxProp>`
+  border-top: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
+  ${COMMON}
+  ${sx};
+`
+
+export type SelectMenuTabPanelProps = {
+  tabName?: string
+} & ComponentProps<typeof TabPanelBase>
+
+const TabPanel = ({tabName, className, children, ...rest}: SelectMenuTabPanelProps) => {
+  const menuContext = useContext(MenuContext)
+  return (
+    <TabPanelBase role="tabpanel" className={className} hidden={menuContext.selectedTab !== tabName} {...rest}>
+      <SelectMenuList>{children}</SelectMenuList>
+    </TabPanelBase>
+  )
+}
+
+TabPanel.displayName = 'SelectMenu.TabPanel'
+
+export default TabPanel

package/src/SelectMenu/SelectMenuTabs.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import styled, {css} from 'styled-components'
+import {COMMON, get, SystemCommonProps} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+
+const tabWrapperStyles = css`
+  display: flex;
+  flex-shrink: 0;
+  margin-bottom: -1px; // hide border of element below
+  -webkit-overflow-scrolling: touch;
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  // Hide scrollbar so it doesn't cover the text
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @media (min-width: ${get('breakpoints.0')}) {
+    padding: 0 ${get('space.2')};
+    margin-top: ${get('space.3')};
+  }
+`
+
+const SelectMenuTabsBase = styled.div<SystemCommonProps & SxProp>`
+  ${tabWrapperStyles}
+  ${COMMON}
+  ${sx};
+`
+
+export type SelectMenuTabsProps = ComponentProps<typeof SelectMenuTabsBase>
+
+const SelectMenuTabs = ({children, ...rest}: SelectMenuTabsProps) => {
+  return (
+    <SelectMenuTabsBase role="tablist" {...rest}>
+      {children}
+    </SelectMenuTabsBase>
+  )
+}
+
+SelectMenuTabs.displayName = 'SelectMenu.Tabs'
+
+export default SelectMenuTabs

package/src/SelectMenu/hooks/useKeyboardNav.js

@@ -0,0 +1,90 @@
+import {useEffect, useCallback} from 'react'
+
+// adapted from details-menu web component https://github.com/github/details-menu-element
+function useKeyboardNav(details, open, setOpen) {
+  const handleKeyDown = useCallback(
+    event => {
+      const closeDetails = () => {
+        setOpen(false)
+        const summary = details.current.querySelector('summary')
+        if (summary) summary.focus()
+      }
+      const openDetails = () => {
+        setOpen(true)
+      }
+      const focusItem = next => {
+        const options = Array.from(
+          details.current.querySelectorAll(
+            '[role^="menuitem"]:not([hidden]):not([disabled]):not([aria-disabled="true"])'
+          )
+        )
+        const selected = document.activeElement
+        const index = options.indexOf(selected)
+        const found = next ? options[index + 1] : options[index - 1]
+        const def = next ? options[0] : options[options.length - 1]
+        return found || def
+      }
+
+      const isMenuItem = el => {
+        const role = el.getAttribute('role')
+        return role === 'menuitem' || role === 'menuitemcheckbox' || role === 'menuitemradio'
+      }
+      if (!(event instanceof KeyboardEvent)) return
+      const isSummaryFocused = event.target instanceof Element && event.target.tagName === 'SUMMARY'
+      switch (event.key) {
+        case 'Escape':
+          if (open) {
+            closeDetails(details)
+            event.preventDefault()
+            event.stopPropagation()
+          }
+          break
+        case 'ArrowDown':
+          {
+            if (isSummaryFocused && !open) {
+              openDetails(details)
+            }
+            const target = focusItem(true)
+            if (target) target.focus()
+            event.preventDefault()
+          }
+          break
+        case 'ArrowUp':
+          {
+            if (isSummaryFocused && !open) {
+              openDetails()
+            }
+            const target = focusItem(false)
+            if (target) target.focus()
+            event.preventDefault()
+          }
+          break
+        case ' ':
+        case 'Enter':
+          {
+            const selected = document.activeElement
+            if (selected && isMenuItem(selected) && selected.closest('details') === details) {
+              event.preventDefault()
+              event.stopPropagation()
+              selected.click()
+            }
+          }
+          break
+        default:
+      }
+    },
+    [details, open, setOpen]
+  )
+
+  useEffect(() => {
+    const current = details.current
+    if (!current) return
+
+    current.addEventListener('keydown', handleKeyDown)
+    return () => {
+      current.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [details, handleKeyDown])
+}
+
+export default useKeyboardNav

package/src/SelectMenu/index.ts

@@ -0,0 +1,15 @@
+export {default} from './SelectMenu'
+export type {
+  SelectMenuProps,
+  SelectMenuDividerProps,
+  SelectMenuFilterProps,
+  SelectMenuFooterProps,
+  SelectMenuItemProps,
+  SelectMenuListProps,
+  SelectMenuModalProps,
+  SelectMenuTabsProps,
+  SelectMenuHeaderProps,
+  SelectMenuTabProps,
+  SelectMenuTabPanelProps,
+  SelectMenuLoadingAnimationProps
+} from './SelectMenu'