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

package/src/Popover.tsx

@@ -0,0 +1,236 @@
+import classnames from 'classnames'
+import styled from 'styled-components'
+import Box from './Box'
+import {COMMON, get, LAYOUT, POSITION, SystemCommonProps, SystemLayoutProps, SystemPositionProps} 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
+} & SystemCommonProps &
+  SystemLayoutProps &
+  SystemPositionProps &
+  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')};
+
+  ${COMMON};
+  ${LAYOUT};
+  ${POSITION};
+  ${sx};
+`
+
+const PopoverContent = styled(Box)`
+  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')};
+
+  ${COMMON};
+  ${LAYOUT};
+
+  // 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

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

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

package/src/Position.tsx

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

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

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

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

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

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

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