@primer/components 31.2.0-rc.fbb10090 → 31.2.0

package/src/SelectMenu/SelectMenuTab.tsx

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

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

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

@@ -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'

package/src/SelectPanel/SelectPanel.tsx

@@ -1,173 +0,0 @@
-import React, {useCallback, useMemo} from 'react'
-import {FilteredActionList, FilteredActionListProps} from '../FilteredActionList'
-import {OverlayProps} from '../Overlay'
-import {ItemInput} from '../ActionList/List'
-import {FocusZoneHookSettings} from '../hooks/useFocusZone'
-import {DropdownButton} from '../DropdownMenu'
-import {ItemProps} from '../ActionList'
-import {AnchoredOverlay, AnchoredOverlayProps} from '../AnchoredOverlay'
-import {TextInputProps} from '../TextInput'
-import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
-import {AnchoredOverlayWrapperAnchorProps} from '../AnchoredOverlay/AnchoredOverlay'
-import {useProvidedRefOrCreate} from '../hooks'
-
-interface SelectPanelSingleSelection {
-  selected: ItemInput | undefined
-  onSelectedChange: (selected: ItemInput | undefined) => void
-}
-
-interface SelectPanelMultiSelection {
-  selected: ItemInput[]
-  onSelectedChange: (selected: ItemInput[]) => void
-}
-
-interface SelectPanelBaseProps {
-  onOpenChange: (
-    open: boolean,
-    gesture: 'anchor-click' | 'anchor-key-press' | 'click-outside' | 'escape' | 'selection'
-  ) => void
-  placeholder?: string
-  overlayProps?: Partial<OverlayProps>
-}
-
-export type SelectPanelProps = SelectPanelBaseProps &
-  Omit<FilteredActionListProps, 'selectionVariant'> &
-  Pick<AnchoredOverlayProps, 'open'> &
-  AnchoredOverlayWrapperAnchorProps &
-  (SelectPanelSingleSelection | SelectPanelMultiSelection)
-
-function isMultiSelectVariant(
-  selected: SelectPanelSingleSelection['selected'] | SelectPanelMultiSelection['selected']
-): selected is SelectPanelMultiSelection['selected'] {
-  return Array.isArray(selected)
-}
-
-const focusZoneSettings: Partial<FocusZoneHookSettings> = {
-  // Let FilteredActionList handle focus zone
-  disabled: true
-}
-
-export function SelectPanel({
-  open,
-  onOpenChange,
-  renderAnchor = props => <DropdownButton {...props} />,
-  anchorRef: externalAnchorRef,
-  placeholder,
-  selected,
-  onSelectedChange,
-  filterValue: externalFilterValue,
-  onFilterChange: externalOnFilterChange,
-  items,
-  textInputProps,
-  overlayProps,
-  sx,
-  ...listProps
-}: SelectPanelProps): JSX.Element {
-  const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '')
-  const onFilterChange: FilteredActionListProps['onFilterChange'] = useCallback(
-    (value, e) => {
-      externalOnFilterChange(value, e)
-      setInternalFilterValue(value)
-    },
-    [externalOnFilterChange, setInternalFilterValue]
-  )
-
-  const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
-  const onOpen: AnchoredOverlayProps['onOpen'] = useCallback(gesture => onOpenChange(true, gesture), [onOpenChange])
-  const onClose = useCallback(
-    (gesture: Parameters<Exclude<AnchoredOverlayProps['onClose'], undefined>>[0] | 'selection') => {
-      onOpenChange(false, gesture)
-    },
-    [onOpenChange]
-  )
-
-  const renderMenuAnchor = useMemo(() => {
-    if (renderAnchor === null) {
-      return null
-    }
-
-    const selectedItems = Array.isArray(selected) ? selected : [...(selected ? [selected] : [])]
-
-    return <T extends React.HTMLAttributes<HTMLElement>>(props: T) => {
-      return renderAnchor({
-        ...props,
-        children: selectedItems.length ? selectedItems.map(item => item.text).join(', ') : placeholder
-      })
-    }
-  }, [placeholder, renderAnchor, selected])
-
-  const itemsToRender = useMemo(() => {
-    return items.map(item => {
-      const isItemSelected = isMultiSelectVariant(selected) ? selected.includes(item) : selected === item
-
-      return {
-        ...item,
-        role: 'option',
-        selected: 'selected' in item && item.selected === undefined ? undefined : isItemSelected,
-        onAction: (itemFromAction, event) => {
-          item.onAction?.(itemFromAction, event)
-
-          if (event.defaultPrevented) {
-            return
-          }
-
-          if (isMultiSelectVariant(selected)) {
-            const otherSelectedItems = selected.filter(selectedItem => selectedItem !== item)
-            const newSelectedItems = selected.includes(item) ? otherSelectedItems : [...otherSelectedItems, item]
-
-            const multiSelectOnChange = onSelectedChange as SelectPanelMultiSelection['onSelectedChange']
-            multiSelectOnChange(newSelectedItems)
-            return
-          }
-
-          // single select
-          const singleSelectOnChange = onSelectedChange as SelectPanelSingleSelection['onSelectedChange']
-          singleSelectOnChange(item === selected ? undefined : item)
-          onClose('selection')
-        }
-      } as ItemProps
-    })
-  }, [onClose, onSelectedChange, items, selected])
-
-  const inputRef = React.useRef<HTMLInputElement>(null)
-  const focusTrapSettings = {
-    initialFocusRef: inputRef
-  }
-
-  const extendedTextInputProps: Partial<TextInputProps> = useMemo(() => {
-    return {
-      sx: {m: 2},
-      contrast: true,
-      ...textInputProps
-    }
-  }, [textInputProps])
-
-  return (
-    <AnchoredOverlay
-      renderAnchor={renderMenuAnchor}
-      anchorRef={anchorRef}
-      open={open}
-      onOpen={onOpen}
-      onClose={onClose}
-      overlayProps={overlayProps}
-      focusTrapSettings={focusTrapSettings}
-      focusZoneSettings={focusZoneSettings}
-    >
-      <FilteredActionList
-        filterValue={filterValue}
-        onFilterChange={onFilterChange}
-        {...listProps}
-        role="listbox"
-        items={itemsToRender}
-        selectionVariant={isMultiSelectVariant(selected) ? 'multiple' : 'single'}
-        textInputProps={extendedTextInputProps}
-        inputRef={inputRef}
-        // inheriting height and maxHeight ensures that the FilteredActionList is never taller
-        // than the Overlay (which would break scrolling the items)
-        sx={{...sx, height: 'inherit', maxHeight: 'inherit'}}
-      />
-    </AnchoredOverlay>
-  )
-}
-
-SelectPanel.displayName = 'SelectPanel'

package/src/SelectPanel/index.ts

@@ -1,2 +0,0 @@
-export {SelectPanel} from './SelectPanel'
-export type {SelectPanelProps} from './SelectPanel'

package/src/SideNav.tsx

@@ -1,193 +0,0 @@
-// eslint-disable-next-line import/no-namespace
-import * as History from 'history'
-
-import {COMMON, get} from './constants'
-import styled, {css} from 'styled-components'
-
-import Box from './Box'
-import {ComponentProps} from './utils/types'
-import Link from './Link'
-import React from 'react'
-import classnames from 'classnames'
-import sx from './sx'
-
-type SideNavBaseProps = {
-  variant?: 'lightweight' | 'normal'
-  bordered?: boolean
-} & ComponentProps<typeof Box>
-
-function SideNavBase({variant, className, bordered, children, ...props}: SideNavBaseProps) {
-  const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal'
-  const newClassName = classnames(className, `variant-${variantClassName}`)
-
-  if (!bordered) {
-    props = {...props, borderWidth: 0}
-  }
-
-  return (
-    <Box
-      borderWidth="1px"
-      borderStyle="solid"
-      borderColor="border.default"
-      borderRadius={2}
-      as="nav"
-      className={newClassName}
-      {...props}
-    >
-      {children}
-    </Box>
-  )
-}
-
-const SideNav = styled(SideNavBase)`
-  background-color: ${get('colors.canvas.subtle')};
-
-  ${props =>
-    props.bordered &&
-    css`
-      // Remove duplicate borders from nested SideNavs
-      & > & {
-        border-left: 0;
-        border-right: 0;
-        border-bottom: 0;
-      }
-    `}
-
-  ${COMMON};
-  ${sx};
-`
-type StyledSideNavLinkProps = {
-  to?: History.LocationDescriptor
-  selected?: boolean
-  variant?: 'full' | 'normal'
-}
-
-// used for variant normal hover, focus pseudo selectors
-const CommonAccessibilityVariantNormalStyles = css`
-  background-color: ${get('colors.neutral.subtle')};
-  outline: none;
-  text-decoration: none;
-`
-
-// used for light weight hover, focus pseudo selectors
-const CommonAccessibilityVariantLightWeightStyles = css`
-  color: ${get('colors.fg.default')};
-  text-decoration: none;
-  outline: none;
-`
-
-const SideNavLink = styled(Link).attrs<StyledSideNavLinkProps>(props => {
-  const isReactRouter = typeof props.to === 'string'
-  if (isReactRouter || props.selected) {
-    // according to their docs, NavLink supports aria-current:
-    // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
-    return {'aria-current': 'page'}
-  } else {
-    return {}
-  }
-})<StyledSideNavLinkProps>`
-  position: relative;
-  display: block;
-  ${props =>
-    props.variant === 'full' &&
-    css`
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    `}
-  width: 100%;
-  text-align: left;
-  font-size: ${get('fontSizes.1')};
-
-  & > ${SideNav} {
-    border-bottom: none;
-  }
-
-  ${SideNav}.variant-normal > & {
-    color: ${get('colors.fg.default')};
-    padding: ${get('space.3')};
-    border: 0;
-    border-top: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
-
-    &:first-child {
-      border-top: 0;
-      border-top-right-radius: ${get('radii.2')};
-      border-top-left-radius: ${get('radii.2')};
-    }
-
-    &:last-child {
-      border-bottom-right-radius: ${get('radii.2')};
-      border-bottom-left-radius: ${get('radii.2')};
-    }
-
-    // Bar on the left
-    &::before {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 1;
-      width: 3px;
-      pointer-events: none;
-      content: '';
-    }
-
-    &:hover {
-      ${CommonAccessibilityVariantNormalStyles}
-    }
-
-    &:focus {
-      ${CommonAccessibilityVariantNormalStyles}
-      box-shadow: ${get('shadows.primer.shadow.focus')};
-      z-index: 1;
-    }
-
-    &[aria-current='page'],
-    &[aria-selected='true'] {
-      background-color: ${get('colors.sidenav.selectedBg')};
-
-      // Bar on the left
-      &::before {
-        background-color: ${get('colors.primer.border.active')};
-      }
-    }
-  }
-
-  ${SideNav}.variant-lightweight > & {
-    padding: ${get('space.1')} 0;
-    color: ${get('colors.accent.fg')};
-
-    &:hover {
-      ${CommonAccessibilityVariantLightWeightStyles}
-    }
-
-    &:focus {
-      ${CommonAccessibilityVariantLightWeightStyles}
-      box-shadow: ${get('shadows.primer.shadow.focus')};
-      z-index: 1;
-    }
-
-    &[aria-current='page'],
-    &[aria-selected='true'] {
-      color: ${get('colors.fg.default')};
-      font-weight: ${get('fontWeights.semibold')};
-    }
-  }
-
-  ${sx};
-`
-
-SideNav.defaultProps = {
-  variant: 'normal'
-}
-
-SideNavLink.defaultProps = {
-  variant: 'normal'
-}
-
-SideNavLink.displayName = 'SideNav.Link'
-
-export type SideNavProps = ComponentProps<typeof SideNav>
-export type SideNavLinkProps = ComponentProps<typeof SideNavLink>
-
-export default Object.assign(SideNav, {Link: SideNavLink})

package/src/Spinner.tsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import {COMMON, SystemCommonProps} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const sizeMap = {
-  small: '16px',
-  medium: '32px',
-  large: '64px'
-}
-
-export interface SpinnerInternalProps {
-  /** Sets the width and height of the spinner. */
-  size?: keyof typeof sizeMap
-}
-
-function Spinner({size: sizeKey = 'medium', ...props}: SpinnerInternalProps) {
-  const size = sizeMap[sizeKey]
-
-  return (
-    <svg height={size} width={size} viewBox="0 0 16 16" fill="none" {...props}>
-      <circle
-        cx="8"
-        cy="8"
-        r="7"
-        stroke="currentColor"
-        strokeOpacity="0.25"
-        strokeWidth="2"
-        vectorEffect="non-scaling-stroke"
-      />
-      <path
-        d="M15 8a7.002 7.002 0 00-7-7"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        vectorEffect="non-scaling-stroke"
-      />
-    </svg>
-  )
-}
-
-const StyledSpinner = styled(Spinner)<SystemCommonProps & SxProp>`
-  @keyframes rotate-keyframes {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  animation: rotate-keyframes 1s linear infinite;
-
-  ${COMMON}
-  ${sx}
-`
-
-StyledSpinner.displayName = 'Spinner'
-
-export type SpinnerProps = ComponentProps<typeof StyledSpinner>
-export default StyledSpinner