@primer/components 32.1.0-rc.6f5d2b00 → 32.1.0

package/src/SelectMenu/SelectMenuHeader.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import {get} 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<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')};
-
-  @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

@@ -1,136 +0,0 @@
-import {CheckIcon} from '@primer/octicons-react'
-import React, {forwardRef, useContext, useRef} from 'react'
-import styled, {css} from 'styled-components'
-import {get} 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'
-}))<SxProp>`
-  ${listItemStyles}
-  ${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

@@ -1,41 +0,0 @@
-import styled, {css} from 'styled-components'
-import {get} 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<SxProp>`
-  ${listStyles}
-  ${sx};
-`
-
-SelectMenuList.displayName = 'SelectMenu.List'
-
-export type SelectMenuListProps = ComponentProps<typeof SelectMenuList>
-export default SelectMenuList

package/src/SelectMenu/SelectMenuLoadingAnimation.tsx

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

package/src/SelectMenu/SelectMenuModal.tsx

@@ -1,119 +0,0 @@
-import React from 'react'
-import styled, {css, keyframes} from 'styled-components'
-import {width, WidthProps} from 'styled-system'
-import {get} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-
-type StyledModalProps = {
-  filter?: boolean
-} & WidthProps
-
-type StyledModalWrapperProps = {
-  align?: 'left' | 'right'
-} & 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}
-  ${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

@@ -1,87 +0,0 @@
-import classnames from 'classnames'
-import React, {useContext, useEffect} from 'react'
-import styled, {css} from 'styled-components'
-import {get} 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<SxProp>`
-  ${tabStyles}
-  ${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

@@ -1,29 +0,0 @@
-import React, {useContext} from 'react'
-import styled from 'styled-components'
-import {get} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-import {MenuContext} from './SelectMenuContext'
-import SelectMenuList from './SelectMenuList'
-
-const TabPanelBase = styled.div<SxProp>`
-  border-top: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
-  ${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

@@ -1,43 +0,0 @@
-import React from 'react'
-import styled, {css} from 'styled-components'
-import {get} 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<SxProp>`
-  ${tabWrapperStyles}
-  ${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

@@ -1,90 +0,0 @@
-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

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