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

package/src/Popover.tsx

@@ -1,225 +0,0 @@
-import classnames from 'classnames'
-import styled from 'styled-components'
-import {get} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-type CaretPosition =
-  | 'top'
-  | 'bottom'
-  | 'left'
-  | 'right'
-  | 'bottom-left'
-  | 'bottom-right'
-  | 'top-left'
-  | 'top-right'
-  | 'left-bottom'
-  | 'left-top'
-  | 'right-bottom'
-  | 'right-top'
-
-type StyledPopoverProps = {
-  caret?: CaretPosition
-  relative?: boolean
-  open?: boolean
-} & SxProp
-
-const Popover = styled.div.attrs<StyledPopoverProps>(({className, caret}) => {
-  return {
-    className: classnames(className, `caret-pos--${caret}`)
-  }
-})<StyledPopoverProps>`
-  position: ${props => (props.relative ? 'relative' : 'absolute')};
-  z-index: 100;
-  display: ${props => (props.open ? 'block' : 'none')};
-  ${sx};
-`
-
-const PopoverContent = styled.div<SxProp>`
-  border: 1px solid ${get('colors.border.default')};
-  border-radius: ${get('radii.2')};
-  position: relative;
-  width: 232px;
-  margin-right: auto;
-  margin-left: auto;
-  padding: ${get('space.4')};
-  background-color: ${get('colors.canvas.overlay')};
-
-  // Carets
-  &::before,
-  &::after {
-    position: absolute;
-    left: 50%;
-    display: inline-block;
-    content: '';
-  }
-
-  &::before {
-    top: -${get('space.3')};
-    margin-left: -9px;
-    border: ${get('space.2')} solid transparent; // TODO: solid?
-    border-bottom-color: ${get('colors.border.default')};
-  }
-
-  &::after {
-    top: -14px;
-    margin-left: -${get('space.2')};
-    border: 7px solid transparent; // todo: solid
-    border-bottom-color: ${get('colors.canvas.overlay')};
-  }
-
-  // Bottom-oriented carets
-  ${Popover}.caret-pos--bottom & ,
-  ${Popover}.caret-pos--bottom-right & ,
-  ${Popover}.caret-pos--bottom-left & {
-    &::before,
-    &::after {
-      top: auto;
-      border-bottom-color: transparent;
-    }
-
-    &::before {
-      bottom: -${get('space.3')};
-      border-top-color: ${get('colors.border.default')};
-    }
-
-    &::after {
-      bottom: -14px;
-      // stylelint-disable-next-line primer/borders
-      border-top-color: ${get('colors.canvas.overlay')};
-    }
-  }
-
-  // Top & Bottom: Right-oriented carets
-  ${Popover}.caret-pos--top-right & ,
-  ${Popover}.caret-pos--bottom-right & {
-    right: -9px;
-    margin-right: 0;
-
-    &::before,
-    &::after {
-      left: auto;
-      margin-left: 0;
-    }
-
-    &::before {
-      right: 20px;
-    }
-
-    &::after {
-      right: 21px;
-    }
-  }
-
-  // Top & Bottom: Left-oriented carets
-  ${Popover}.caret-pos--top-left & ,
-  ${Popover}.caret-pos--bottom-left & {
-    left: -9px;
-    margin-left: 0;
-
-    &::before,
-    &::after {
-      left: ${get('space.4')};
-      margin-left: 0;
-    }
-
-    &::after {
-      left: calc(${get('space.4')} + 1px);
-    }
-  }
-
-  // Right- & Left-oriented carets
-  ${Popover}.caret-pos--right & ,
-  ${Popover}.caret-pos--right-top & ,
-  ${Popover}.caret-pos--right-bottom & ,
-  ${Popover}.caret-pos--left & ,
-  ${Popover}.caret-pos--left-top & ,
-  ${Popover}.caret-pos--left-bottom & {
-    &::before,
-    &::after {
-      top: 50%;
-      left: auto;
-      margin-left: 0;
-      border-bottom-color: transparent;
-    }
-
-    &::before {
-      // stylelint-disable-next-line primer/spacing
-      margin-top: calc((${get('space.2')} + 1px) * -1);
-    }
-
-    &::after {
-      margin-top: -${get('space.2')};
-    }
-  }
-
-  // Right-oriented carets
-  ${Popover}.caret-pos--right & ,
-  ${Popover}.caret-pos--right-top & ,
-  ${Popover}.caret-pos--right-bottom & {
-    &::before {
-      right: -${get('space.3')};
-      border-left-color: ${get('colors.border.default')};
-    }
-
-    &::after {
-      right: -14px;
-      // stylelint-disable-next-line primer/borders
-      border-left-color: ${get('colors.canvas.overlay')};
-    }
-  }
-
-  // Left-oriented carets
-  ${Popover}.caret-pos--left & ,
-  ${Popover}.caret-pos--left-top & ,
-  ${Popover}.caret-pos--left-bottom & {
-    &::before {
-      left: -${get('space.3')};
-      border-right-color: ${get('colors.border.default')};
-    }
-
-    &::after {
-      left: -14px;
-      // stylelint-disable-next-line primer/borders
-      border-right-color: ${get('colors.canvas.overlay')};
-    }
-  }
-
-  // Right & Left: Top-oriented carets
-  ${Popover}.caret-pos--right-top & ,
-  ${Popover}.caret-pos--left-top & {
-    &::before,
-    &::after {
-      top: ${get('space.4')};
-    }
-  }
-
-  // Right & Left: Bottom-oriented carets
-  ${Popover}.caret-pos--right-bottom & ,
-  ${Popover}.caret-pos--left-bottom & {
-    &::before,
-    &::after {
-      top: auto;
-    }
-
-    &::before {
-      bottom: ${get('space.3')};
-    }
-
-    &::after {
-      bottom: calc(${get('space.3')} + 1px);
-    }
-  }
-
-  ${sx};
-`
-
-Popover.defaultProps = {
-  caret: 'top'
-}
-
-PopoverContent.displayName = 'Popover.Content'
-
-export type PopoverProps = ComponentProps<typeof Popover>
-export type PopoverContentProps = ComponentProps<typeof PopoverContent>
-export default Object.assign(Popover, {Content: PopoverContent})

package/src/Portal/Portal.tsx

@@ -1,97 +0,0 @@
-import React from 'react'
-import {createPortal} from 'react-dom'
-import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
-
-const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__'
-const DEFAULT_PORTAL_CONTAINER_NAME = '__default__'
-
-const portalRootRegistry: Partial<Record<string, Element>> = {}
-
-/**
- * Register a container to serve as a portal root.
- * @param root The element that will be the root for portals created in this container
- * @param name The name of the container, to be used with the `containerName` prop on the Portal Component.
- * If name is not specified, registers the default portal root.
- */
-export function registerPortalRoot(root: Element, name = DEFAULT_PORTAL_CONTAINER_NAME): void {
-  portalRootRegistry[name] = root
-}
-
-// Ensures that a default portal root exists and is registered. If a DOM element exists
-// with id __primerPortalRoot__, allow that element to serve as the default portal root.
-// Otherwise, create that element and attach it to the end of document.body.
-function ensureDefaultPortal() {
-  const existingDefaultPortalContainer = portalRootRegistry[DEFAULT_PORTAL_CONTAINER_NAME]
-  if (!existingDefaultPortalContainer || !document.body.contains(existingDefaultPortalContainer)) {
-    let defaultPortalContainer = document.getElementById(PRIMER_PORTAL_ROOT_ID)
-    if (!(defaultPortalContainer instanceof Element)) {
-      defaultPortalContainer = document.createElement('div')
-      defaultPortalContainer.setAttribute('id', PRIMER_PORTAL_ROOT_ID)
-      defaultPortalContainer.style.position = 'absolute'
-      defaultPortalContainer.style.top = '0'
-      defaultPortalContainer.style.left = '0'
-      const suitablePortalRoot = document.querySelector('[data-portal-root]')
-      if (suitablePortalRoot) {
-        suitablePortalRoot.appendChild(defaultPortalContainer)
-      } else {
-        document.body.appendChild(defaultPortalContainer)
-      }
-    }
-
-    registerPortalRoot(defaultPortalContainer)
-  }
-}
-
-export interface PortalProps {
-  /**
-   * Called when this portal is added to the DOM
-   */
-  onMount?: () => void
-
-  /**
-   * Optional. Mount this portal at the container specified
-   * by this name. The container must be previously registered
-   * with `registerPortal`.
-   */
-  containerName?: string
-}
-
-/**
- * Creates a React Portal, placing all children in a separate physical DOM root node.
- * @see https://reactjs.org/docs/portals.html
- */
-export const Portal: React.FC<PortalProps> = ({children, onMount, containerName: _containerName}) => {
-  const hostElement = document.createElement('div')
-
-  // Portaled content should get their own stacking context so they don't interfere
-  // with each other in unexpected ways. One should never find themselves tempted
-  // to change the zIndex to a value other than "1".
-  hostElement.style.position = 'relative'
-  hostElement.style.zIndex = '1'
-  const elementRef = React.useRef(hostElement)
-
-  useLayoutEffect(() => {
-    let containerName = _containerName
-    if (containerName === undefined) {
-      containerName = DEFAULT_PORTAL_CONTAINER_NAME
-      ensureDefaultPortal()
-    }
-    const parentElement = portalRootRegistry[containerName]
-
-    if (!parentElement) {
-      throw new Error(
-        `Portal container '${_containerName}' is not yet registered. Container must be registered with registerPortal before use.`
-      )
-    }
-    const element = elementRef.current
-    parentElement.appendChild(element)
-    onMount?.()
-
-    return () => {
-      parentElement.removeChild(element)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [elementRef])
-
-  return createPortal(children, elementRef.current)
-}

package/src/Portal/index.ts

@@ -1,5 +0,0 @@
-import {Portal, PortalProps, registerPortalRoot} from './Portal'
-
-export default Portal
-export {registerPortalRoot}
-export type {PortalProps}

package/src/Position.tsx

@@ -1,63 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import Box from './Box'
-import {ComponentProps} from './utils/types'
-
-type StyledPositionProps = {as?: React.ElementType}
-
-/**
- * @deprecated Use the Box component instead (i.e. <Position> → <Box>)
- */
-const Position = styled(Box)<StyledPositionProps>``
-
-export type PositionProps = ComponentProps<typeof Position>
-
-/**
- * @deprecated Use the Box component instead (i.e. <Absolute> → <Box position="absolute">)
- */
-export default Position
-
-// Absolute
-export type AbsoluteProps = Omit<PositionProps, 'position'>
-
-/**
- * @deprecated Use the Box component instead (i.e. <Absolute> → <Box position="absolute">)
- */
-export const Absolute = React.forwardRef((props: AbsoluteProps, ref) => {
-  return <Position {...props} position="absolute" ref={ref} />
-})
-Absolute.displayName = 'Absolute'
-
-// Fixed
-export type FixedProps = Omit<PositionProps, 'position'>
-
-/**
- * @deprecated Use the Box component instead (i.e. <Fixed> → <Box position="fixed">)
- */
-export const Fixed = React.forwardRef((props: AbsoluteProps, ref) => {
-  return <Position {...props} position="fixed" ref={ref} />
-})
-Fixed.displayName = 'Fixed'
-
-// Relative
-export type RelativeProps = Omit<PositionProps, 'position'>
-
-/**
- * @deprecated Use the Box component instead (i.e. <Relative> → <Box position="relative">)
- */
-export const Relative = React.forwardRef((props: RelativeProps, ref) => {
-  return <Position {...props} position="relative" ref={ref} />
-})
-Relative.displayName = 'Relative'
-
-// Sticky
-export type StickyProps = Omit<PositionProps, 'position'>
-
-/**
- * @deprecated Use the Box component instead (i.e. <Sticky> → <Box position="sticky">)
- */
-export const Sticky = React.forwardRef((props: StickyProps, ref) => {
-  return <Position {...props} position="sticky" ref={ref} />
-})
-Sticky.defaultProps = {top: 0, zIndex: 1}
-Sticky.displayName = 'Sticky'

package/src/ProgressBar.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import styled 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'
-
-const Bar = styled.span<{progress?: string | number} & SystemCommonProps>`
-  width: ${props => (props.progress ? `${props.progress}%` : 0)};
-  ${COMMON}
-`
-
-const sizeMap = {
-  small: '5px',
-  large: '10px',
-  default: '8px'
-}
-
-type StyledProgressContainerProps = {
-  inline?: boolean
-  barSize?: keyof typeof sizeMap
-} & WidthProps &
-  SystemCommonProps &
-  SxProp
-
-const ProgressContainer = styled.span<StyledProgressContainerProps>`
-  display: ${props => (props.inline ? 'inline-flex' : 'flex')};
-  overflow: hidden;
-  background-color: ${get('colors.border.default')};
-  border-radius: ${get('radii.1')};
-  height: ${props => sizeMap[props.barSize || 'default']};
-  ${COMMON}
-  ${width}
-  ${sx};
-`
-
-export type ProgressBarProps = ComponentProps<typeof ProgressContainer> & ComponentProps<typeof Bar>
-
-function ProgressBar({progress, bg, theme, ...rest}: ProgressBarProps) {
-  return (
-    <ProgressContainer theme={theme} {...rest}>
-      <Bar progress={progress} bg={bg} theme={theme} />
-    </ProgressContainer>
-  )
-}
-
-ProgressBar.defaultProps = {
-  bg: 'success.emphasis',
-  barSize: 'default'
-}
-
-export default ProgressBar

package/src/SelectMenu/SelectMenu.tsx

@@ -1,123 +0,0 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react'
-import styled from 'styled-components'
-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<SxProp>`
-  ${wrapperStyles}
-  ${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,24 +0,0 @@
-import styled, {css} from 'styled-components'
-import {get} 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<SxProp>`
-  ${dividerStyles}
-  ${sx};
-`
-
-SelectMenuDivider.displayName = 'SelectMenu.Divider'
-
-export type SelectMenuDividerProps = ComponentProps<typeof SelectMenuDivider>
-export default SelectMenuDivider

package/src/SelectMenu/SelectMenuFilter.tsx

@@ -1,50 +0,0 @@
-import React, {forwardRef, useContext, useEffect, useRef} from 'react'
-import styled from 'styled-components'
-import {get} 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<SxProp>`
-  padding: ${get('space.3')};
-  margin: 0;
-  border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
-  background-color: ${get('colors.canvas.overlay')};
-
-  @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,27 +0,0 @@
-import styled, {css} from 'styled-components'
-import {get} 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<SxProp>`
-  ${footerStyles}
-  ${sx};
-`
-
-SelectMenuFooter.displayName = 'SelectMenu.Footer'
-
-export type SelectMenuFooterProps = ComponentProps<typeof SelectMenuFooter>
-export default SelectMenuFooter