@primer/components 31.2.0-rc.fbb10090 → 31.2.0

package/src/SelectMenu/SelectMenu.tsx

@@ -1,125 +0,0 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react'
-import styled from 'styled-components'
-import {COMMON, SystemCommonProps} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-import useKeyboardNav from './hooks/useKeyboardNav'
-import {MenuContext} from './SelectMenuContext'
-import SelectMenuDivider from './SelectMenuDivider'
-import SelectMenuFilter from './SelectMenuFilter'
-import SelectMenuFooter from './SelectMenuFooter'
-import SelectMenuHeader from './SelectMenuHeader'
-import SelectMenuItem from './SelectMenuItem'
-import SelectMenuList from './SelectMenuList'
-import SelectMenuLoadingAnimation from './SelectMenuLoadingAnimation'
-import SelectMenuModal from './SelectMenuModal'
-import SelectMenuTab from './SelectMenuTab'
-import SelectMenuTabPanel from './SelectMenuTabPanel'
-import SelectMenuTabs from './SelectMenuTabs'
-
-const wrapperStyles = `
-  // 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<SystemCommonProps & SxProp>`
-  ${wrapperStyles}
-  ${COMMON}
-  ${sx};
-`
-
-type SelectMenuInternalProps = {
-  initialTab?: string
-  as?: React.ReactElement
-} & ComponentProps<typeof StyledSelectMenu>
-
-// 'as' is spread out because we don't want users to be able to change the tag.
-const SelectMenu = React.forwardRef<HTMLElement, SelectMenuInternalProps>(
-  ({children, initialTab = '', as: _ignoredAs, ...rest}, forwardedRef) => {
-    const backupRef = useRef<HTMLElement>(null)
-    const ref = forwardedRef ?? backupRef
-    const [selectedTab, setSelectedTab] = useState(initialTab)
-    const [open, setOpen] = useState(false)
-    const menuProviderValues = {
-      selectedTab,
-      setSelectedTab,
-      setOpen,
-      open,
-      initialTab
-    }
-
-    const onClickOutside = useCallback(
-      event => {
-        if ('current' in ref && ref.current && !ref.current.contains(event.target)) {
-          if (!event.defaultPrevented) {
-            setOpen(false)
-          }
-        }
-      },
-      [ref, setOpen]
-    )
-
-    // handles the overlay behavior - closing the menu when clicking outside of it
-    useEffect(() => {
-      if (open) {
-        document.addEventListener('click', onClickOutside)
-        return () => {
-          document.removeEventListener('click', onClickOutside)
-        }
-      }
-    }, [open, onClickOutside])
-
-    function toggle(event: React.SyntheticEvent<HTMLDetailsElement, Event>) {
-      setOpen((event.target as HTMLDetailsElement).open)
-    }
-
-    useKeyboardNav(ref, open, setOpen)
-
-    return (
-      <MenuContext.Provider value={menuProviderValues}>
-        <StyledSelectMenu ref={ref} {...rest} open={open} onToggle={toggle}>
-          {children}
-        </StyledSelectMenu>
-      </MenuContext.Provider>
-    )
-  }
-)
-
-SelectMenu.displayName = 'SelectMenu'
-
-export type SelectMenuProps = ComponentProps<typeof SelectMenu>
-export type {SelectMenuDividerProps} from './SelectMenuDivider'
-export type {SelectMenuFilterProps} from './SelectMenuFilter'
-export type {SelectMenuFooterProps} from './SelectMenuFooter'
-export type {SelectMenuHeaderProps} from './SelectMenuHeader'
-export type {SelectMenuItemProps} from './SelectMenuItem'
-export type {SelectMenuListProps} from './SelectMenuList'
-export type {SelectMenuLoadingAnimationProps} from './SelectMenuLoadingAnimation'
-export type {SelectMenuModalProps} from './SelectMenuModal'
-export type {SelectMenuTabProps} from './SelectMenuTab'
-export type {SelectMenuTabPanelProps} from './SelectMenuTabPanel'
-export type {SelectMenuTabsProps} from './SelectMenuTabs'
-export default Object.assign(SelectMenu, {
-  MenuContext,
-  List: SelectMenuList,
-  Divider: SelectMenuDivider,
-  Filter: SelectMenuFilter,
-  Footer: SelectMenuFooter,
-  Item: SelectMenuItem,
-  Modal: SelectMenuModal,
-  Tabs: SelectMenuTabs,
-  Tab: SelectMenuTab,
-  TabPanel: SelectMenuTabPanel,
-  Header: SelectMenuHeader,
-  LoadingAnimation: SelectMenuLoadingAnimation
-})

package/src/SelectMenu/SelectMenuContext.tsx

@@ -1,9 +0,0 @@
-import {createContext} from 'react'
-
-export const MenuContext = createContext<{
-  selectedTab?: string
-  setSelectedTab?: React.Dispatch<React.SetStateAction<string>>
-  setOpen?: React.Dispatch<React.SetStateAction<boolean>>
-  open?: boolean
-  initialTab?: string
-}>({})

package/src/SelectMenu/SelectMenuDivider.tsx

@@ -1,25 +0,0 @@
-import styled, {css} from 'styled-components'
-import {COMMON, get, SystemCommonProps} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-
-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.fg.muted')};
-  background-color: ${get('colors.canvas.subtle')};
-  border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
-`
-
-const SelectMenuDivider = styled.div<SystemCommonProps & SxProp>`
-  ${dividerStyles}
-  ${COMMON}
-  ${sx};
-`
-
-SelectMenuDivider.displayName = 'SelectMenu.Divider'
-
-export type SelectMenuDividerProps = ComponentProps<typeof SelectMenuDivider>
-export default SelectMenuDivider

package/src/SelectMenu/SelectMenuFilter.tsx

@@ -1,51 +0,0 @@
-import React, {forwardRef, useContext, useEffect, useRef} from 'react'
-import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from '../constants'
-import sx, {SxProp} from '../sx'
-import TextInput, {TextInputProps} from '../TextInput'
-import {ComponentProps} from '../utils/types'
-import {MenuContext} from './SelectMenuContext'
-
-const StyledForm = styled.form<SystemCommonProps & SxProp>`
-  padding: ${get('space.3')};
-  margin: 0;
-  border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
-  background-color: ${get('colors.canvas.overlay')};
-  ${COMMON};
-
-  @media (min-width: ${get('breakpoints.0')}) {
-    padding: ${get('space.2')};
-  }
-
-  ${sx};
-`
-
-type SelectMenuFilterInternalProps = {
-  value?: string
-} & TextInputProps
-
-const SelectMenuFilter = forwardRef<HTMLInputElement, SelectMenuFilterInternalProps>(
-  ({theme, value, sx: sxProp, ...rest}, forwardedRef) => {
-    const inputRef = useRef<HTMLInputElement>(null)
-    const ref = forwardedRef ?? inputRef
-    const {open} = useContext(MenuContext)
-
-    // puts focus on the filter input when the menu is opened
-    useEffect(() => {
-      if (open) {
-        inputRef.current?.focus()
-      }
-    }, [open])
-
-    return (
-      <StyledForm theme={theme} sx={sxProp}>
-        <TextInput theme={theme} ref={ref} width="100%" block value={value} contrast {...rest} />
-      </StyledForm>
-    )
-  }
-)
-
-SelectMenuFilter.displayName = 'SelectMenu.Filter'
-
-export type SelectMenuFilterProps = ComponentProps<typeof SelectMenuFilter>
-export default SelectMenuFilter

package/src/SelectMenu/SelectMenuFooter.tsx

@@ -1,28 +0,0 @@
-import styled, {css} from 'styled-components'
-import {COMMON, get, SystemCommonProps} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
-
-const footerStyles = css`
-  margin-top: -1px;
-  padding: ${get('space.2')} ${get('space.3')};
-  font-size: ${get('fontSizes.0')};
-  color: ${get('colors.fg.muted')};
-  text-align: center;
-  border-top: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
-
-  @media (min-width: ${get('breakpoints.0')}) {
-    padding: ${get('space.1')} ${get('space.2')};
-  }
-`
-
-const SelectMenuFooter = styled.footer<SystemCommonProps & SxProp>`
-  ${footerStyles}
-  ${COMMON}
-  ${sx};
-`
-
-SelectMenuFooter.displayName = 'SelectMenu.Footer'
-
-export type SelectMenuFooterProps = ComponentProps<typeof SelectMenuFooter>
-export default SelectMenuFooter

package/src/SelectMenu/SelectMenuHeader.tsx

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

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

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

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

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