@primer/components 33.1.0-rc.6856bcf5 → 33.1.0

package/src/Caret.tsx

@@ -1,133 +0,0 @@
-import React from 'react'
-import {ThemeContext} from 'styled-components'
-import {style} from 'styled-system'
-import {Theme} from './ThemeProvider'
-
-type Location =
-  | 'top'
-  | 'top-left'
-  | 'top-right'
-  | 'right'
-  | 'right-top'
-  | 'right-bottom'
-  | 'bottom'
-  | 'bottom-left'
-  | 'bottom-right'
-  | 'left'
-  | 'left-top'
-  | 'left-bottom'
-
-type Alignment = 'top' | 'right' | 'bottom' | 'left'
-
-const oppositeEdge = {
-  top: 'Bottom',
-  right: 'Left',
-  bottom: 'Top',
-  left: 'Right'
-}
-
-const perpendicularEdge = {
-  top: 'Left',
-  right: 'Top',
-  bottom: 'Left',
-  left: 'Top'
-}
-
-function getEdgeAlign(location: Location) {
-  const [edge, align] = location.split('-')
-  return [edge as Alignment, align as Alignment | undefined] as const
-}
-
-function getPosition(edge: Alignment, align: Alignment | undefined, spacing: number) {
-  const opposite = oppositeEdge[edge].toLowerCase()
-  const perp = perpendicularEdge[edge].toLowerCase()
-  return {
-    [opposite]: '100%',
-    [align || perp]: align ? spacing : '50%'
-  }
-}
-
-const getBg = style({prop: 'bg', key: 'colors'})
-const getBorderColor = style({prop: 'borderColor', key: 'colors'})
-const getBorderWidth = style({prop: 'borderWidth', key: 'borderWidths', scale: [0, 1]})
-
-export type CaretProps = {
-  bg?: string
-  borderColor?: string
-  borderWidth?: string | number
-  size?: number
-  location?: Location
-  theme?: Theme
-}
-
-function Caret(props: CaretProps) {
-  const theme = React.useContext(ThemeContext)
-  const propsWithTheme = {...props, theme: props.theme ?? theme}
-  const {bg} = getBg(propsWithTheme)
-  const {borderColor} = getBorderColor(propsWithTheme)
-  const {borderWidth} = getBorderWidth(propsWithTheme)
-  const {size = 8, location = 'bottom'} = props
-  const [edge, align] = getEdgeAlign(location)
-  const perp = perpendicularEdge[edge]
-
-  // note: these arrays represent points in the form [x, y]
-  const a = [-size, 0]
-  const b = [0, size]
-  const c = [size, 0]
-
-  // spaces are optional in path `d` attribute, and points are
-  // represented in the form `x,y` -- which is what the arrays above
-  // become when stringified!
-  const triangle = `M${a}L${b}L${c}L${a}Z`
-  const line = `M${a}L${b}L${c}`
-
-  const transform = {
-    top: `translate(${[size, size * 2]}) rotate(180)`,
-    right: `translate(${[0, size]}) rotate(-90)`,
-    bottom: `translate(${[size, 0]})`,
-    left: `translate(${[size * 2, size]}) rotate(90)`
-  }[edge]
-
-  return (
-    <svg
-      width={size * 2}
-      height={size * 2}
-      style={{
-        pointerEvents: 'none',
-        position: 'absolute',
-        ...getPosition(edge, align, size),
-        // if align is set (top|right|bottom|left),
-        // then we don't need an offset margin
-        [`margin${perp}`]: align ? null : -size
-      }}
-    >
-      <g transform={transform}>
-        <path d={triangle} fill={bg} />
-        <path d={line} fill="none" stroke={borderColor} strokeWidth={borderWidth} />
-      </g>
-    </svg>
-  )
-}
-
-Caret.locations = [
-  'top',
-  'top-left',
-  'top-right',
-  'right',
-  'right-top',
-  'right-bottom',
-  'bottom',
-  'bottom-left',
-  'bottom-right',
-  'left',
-  'left-top',
-  'left-bottom'
-]
-
-Caret.defaultProps = {
-  bg: 'canvas.default',
-  borderColor: 'border.default',
-  borderWidth: 1
-}
-
-export default Caret

package/src/Checkbox.tsx

@@ -1,75 +0,0 @@
-import styled from 'styled-components'
-import {useProvidedRefOrCreate} from './hooks'
-import React, {InputHTMLAttributes, ReactElement, useLayoutEffect} from 'react'
-import sx, {SxProp} from './sx'
-
-export type CheckboxProps = {
-  /**
-   * Apply indeterminate visual appearance to the checkbox
-   */
-  indeterminate?: boolean
-  /**
-   * Apply inactive visual appearance to the checkbox
-   */
-  disabled?: boolean
-  /**
-   * Forward a ref to the underlying input element
-   */
-  ref?: React.RefObject<HTMLInputElement>
-  /**
-   * Indicates whether the checkbox must be checked
-   */
-  required?: boolean
-
-  /**
-   * Indicates whether the checkbox validation state
-   */
-  validationStatus?: 'error' | 'success' // TODO: hoist to Validation typings
-} & InputHTMLAttributes<HTMLInputElement> &
-  SxProp
-
-const StyledCheckbox = styled.input`
-  cursor: pointer;
-
-  ${props => props.disabled && `cursor: not-allowed;`}
-
-  ${sx}
-`
-
-/**
- * An accessible, native checkbox component
- */
-const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
-  (
-    {checked, indeterminate, disabled, sx: sxProp, required, validationStatus, ...rest}: CheckboxProps,
-    ref
-  ): ReactElement => {
-    const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement>)
-
-    useLayoutEffect(() => {
-      if (checkboxRef.current) {
-        checkboxRef.current.indeterminate = indeterminate || false
-      }
-    }, [indeterminate, checked, checkboxRef])
-
-    return (
-      <StyledCheckbox
-        type="checkbox"
-        disabled={disabled}
-        aria-disabled={disabled ? 'true' : 'false'}
-        ref={ref || checkboxRef}
-        checked={indeterminate ? false : checked}
-        aria-checked={indeterminate ? 'mixed' : checked ? 'true' : 'false'}
-        sx={sxProp}
-        required={required}
-        aria-required={required ? 'true' : 'false'}
-        aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
-        {...rest}
-      />
-    )
-  }
-)
-
-Checkbox.displayName = 'Checkbox'
-
-export default Checkbox

package/src/CircleBadge.tsx

@@ -1,53 +0,0 @@
-import styled from 'styled-components'
-import {get} from './constants'
-import StyledOcticon from './StyledOcticon'
-import sx, {SxProp} from './sx'
-import isNumeric from './utils/isNumeric'
-import {ComponentProps} from './utils/types'
-
-const variantSizes = {
-  small: 56,
-  medium: 96,
-  large: 128
-}
-
-type StyledCircleBadgeProps = {
-  inline?: boolean
-  variant?: keyof typeof variantSizes
-  size?: number
-} & SxProp
-
-const sizeStyles = ({size, variant = 'medium'}: StyledCircleBadgeProps) => {
-  const calc = isNumeric(size) ? size : variantSizes[variant]
-  return {
-    width: calc,
-    height: calc
-  }
-}
-
-const CircleBadge = styled.div<StyledCircleBadgeProps>`
-  display: ${props => (props.inline ? 'inline-flex' : 'flex')};
-  align-items: center;
-  justify-content: center;
-  background-color: ${get('colors.canvas.default')};
-  border-radius: 50%;
-  box-shadow: ${get('shadows.shadow.medium')};
-  ${sizeStyles};
-  ${sx};
-`
-
-const CircleBadgeIcon = styled(StyledOcticon)`
-  height: auto;
-  max-width: 60%;
-  max-height: 55%;
-`
-
-CircleBadge.defaultProps = {
-  inline: false
-}
-
-CircleBadgeIcon.displayName = 'CircleBadge.Icon'
-
-export type CircleBadgeProps = ComponentProps<typeof CircleBadge>
-export type CircleBadgeIconProps = ComponentProps<typeof CircleBadgeIcon>
-export default Object.assign(CircleBadge, {Icon: CircleBadgeIcon})

package/src/CircleOcticon.tsx

@@ -1,37 +0,0 @@
-import {IconProps} from '@primer/octicons-react'
-import React from 'react'
-import Box, {BoxProps} from './Box'
-
-export type CircleOcticonProps = {
-  as?: React.ElementType
-  size?: number
-  icon: React.ComponentType<{size?: IconProps['size']}>
-} & BoxProps
-
-function CircleOcticon(props: CircleOcticonProps) {
-  const {size, as} = props
-  const {icon: IconComponent, bg, ...rest} = props
-  return (
-    <Box
-      as={as}
-      bg={bg}
-      overflow="hidden"
-      borderWidth={0}
-      size={size}
-      borderRadius="50%"
-      borderStyle="solid"
-      borderColor="border.default"
-    >
-      <Box display="flex" {...rest} alignItems="center" justifyContent="center">
-        <IconComponent size={size} />
-      </Box>
-    </Box>
-  )
-}
-
-CircleOcticon.defaultProps = {
-  ...Box.defaultProps,
-  size: 32
-}
-
-export default CircleOcticon

package/src/CounterLabel.tsx

@@ -1,50 +0,0 @@
-import styled from 'styled-components'
-import {get} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-type StyledCounterLabelProps = {
-  scheme?: 'primary' | 'secondary'
-} & SxProp
-
-const colorStyles = ({scheme, ...props}: StyledCounterLabelProps) => {
-  return {
-    color:
-      scheme === 'secondary'
-        ? get('colors.fg.default')(props)
-        : scheme === 'primary'
-        ? get('colors.fg.onEmphasis')(props)
-        : get('colors.fg.default')(props)
-  }
-}
-
-const bgStyles = ({scheme, ...props}: StyledCounterLabelProps) => {
-  return {
-    backgroundColor:
-      scheme === 'secondary'
-        ? get('colors.neutral.muted')(props)
-        : scheme === 'primary'
-        ? get('colors.neutral.emphasis')(props)
-        : get('colors.neutral.muted')(props)
-  }
-}
-
-const CounterLabel = styled.span<StyledCounterLabelProps>`
-  display: inline-block;
-  padding: 2px 5px;
-  font-size: ${get('fontSizes.0')};
-  font-weight: ${get('fontWeights.bold')};
-  line-height: ${get('lineHeights.condensedUltra')};
-  border-radius: 20px;
-  ${colorStyles};
-  ${bgStyles};
-
-  &:empty {
-    display: none;
-  }
-
-  ${sx};
-`
-
-export type CounterLabelProps = ComponentProps<typeof CounterLabel>
-export default CounterLabel

package/src/Details.tsx

@@ -1,19 +0,0 @@
-import styled from 'styled-components'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const Details = styled.details<SxProp>`
-  & > summary {
-    list-style: none;
-  }
-  & > summary::-webkit-details-marker {
-    display: none;
-  }
-
-  ${sx};
-`
-
-Details.displayName = 'Details'
-
-export type DetailsProps = ComponentProps<typeof Details>
-export default Details

package/src/Dialog/ConfirmationDialog.tsx

@@ -1,184 +0,0 @@
-import React, {useCallback} from 'react'
-import ReactDOM from 'react-dom'
-import styled from 'styled-components'
-import Box from '../Box'
-import {ThemeProvider, useTheme, ThemeProviderProps} from '../ThemeProvider'
-import {FocusKeys} from '../behaviors/focusZone'
-import {get} from '../constants'
-import {Dialog, DialogProps, DialogHeaderProps, DialogButtonProps} from '../Dialog/Dialog'
-import {useFocusZone} from '../hooks/useFocusZone'
-
-/**
- * Props to customize the ConfirmationDialog.
- */
-export interface ConfirmationDialogProps {
-  /**
-   * Required. This callback is invoked when a gesture to close the dialog
-   * is performed. The first argument indicates the gesture.
-   */
-  onClose: (gesture: 'confirm' | 'cancel' | 'close-button' | 'cancel' | 'escape') => void
-
-  /**
-   * Required. The title of the ConfirmationDialog. This is usually a brief
-   * question.
-   */
-  title: React.ReactNode
-
-  /**
-   * The text to use for the cancel button. Default: "Cancel".
-   */
-  cancelButtonContent?: React.ReactNode
-
-  /**
-   * The text to use for the confirm button. Default: "OK".
-   */
-  confirmButtonContent?: React.ReactNode
-
-  /**
-   * The type of button to use for the confirm button. Default: Button.
-   */
-  confirmButtonType?: 'normal' | 'primary' | 'danger'
-}
-
-const StyledConfirmationHeader = styled.header`
-  padding: ${get('space.2')};
-  display: flex;
-  flex-direction: row;
-`
-const StyledTitle = styled(Box)`
-  font-size: ${get('fontSizes.3')};
-  font-weight: ${get('fontWeights.bold')};
-  padding: 6px ${get('space.2')};
-  flex-grow: 1;
-`
-const ConfirmationHeader: React.FC<DialogHeaderProps> = ({title, onClose, dialogLabelId}) => {
-  const onCloseClick = useCallback(() => {
-    onClose('close-button')
-  }, [onClose])
-  return (
-    <StyledConfirmationHeader>
-      <StyledTitle id={dialogLabelId}>{title}</StyledTitle>
-      <Dialog.CloseButton onClose={onCloseClick} />
-    </StyledConfirmationHeader>
-  )
-}
-const StyledConfirmationBody = styled(Box)`
-  font-size: ${get('fontSizes.1')};
-  padding: 0 ${get('space.3')} ${get('space.3')} ${get('space.3')};
-  color: ${get('colors.fg.muted')};
-  flex-grow: 1;
-`
-const ConfirmationBody: React.FC<DialogProps> = ({children}) => {
-  return <StyledConfirmationBody>{children}</StyledConfirmationBody>
-}
-const StyledConfirmationFooter = styled(Box)`
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: max-content;
-  grid-gap: ${get('space.2')};
-  align-items: end;
-  justify-content: end;
-  padding: ${get('space.1')} ${get('space.3')} ${get('space.3')};
-`
-const ConfirmationFooter: React.FC<DialogProps> = ({footerButtons}) => {
-  const {containerRef: footerRef} = useFocusZone({
-    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab,
-    focusInStrategy: 'closest'
-  })
-  // Must have exactly 2 buttons!
-  return (
-    <StyledConfirmationFooter ref={footerRef as React.RefObject<HTMLDivElement>}>
-      <Dialog.Buttons buttons={footerButtons ?? []} />
-    </StyledConfirmationFooter>
-  )
-}
-
-/**
- * A ConfirmationDialog is a special kind of dialog with more rigid behavior. It
- * is used to confirm a user action. ConfirmationDialogs always have exactly
- * two buttons: one to cancel the action and one to confirm it. No custom
- * rendering capabilities are provided for ConfirmationDialog.
- */
-export const ConfirmationDialog: React.FC<ConfirmationDialogProps> = props => {
-  const {
-    onClose,
-    title,
-    cancelButtonContent = 'Cancel',
-    confirmButtonContent = 'OK',
-    confirmButtonType = 'normal',
-    children
-  } = props
-
-  const onCancelButtonClick = useCallback(() => {
-    onClose('cancel')
-  }, [onClose])
-  const onConfirmButtonClick = useCallback(() => {
-    onClose('confirm')
-  }, [onClose])
-  const cancelButton: DialogButtonProps = {
-    content: cancelButtonContent,
-    onClick: onCancelButtonClick
-  }
-  const confirmButton: DialogButtonProps = {
-    content: confirmButtonContent,
-    buttonType: confirmButtonType,
-    onClick: onConfirmButtonClick,
-    autoFocus: true
-  }
-  const footerButtons = [cancelButton, confirmButton]
-  return (
-    <Dialog
-      onClose={onClose}
-      title={title}
-      footerButtons={footerButtons}
-      role="alertdialog"
-      width="medium"
-      renderHeader={ConfirmationHeader}
-      renderBody={ConfirmationBody}
-      renderFooter={ConfirmationFooter}
-    >
-      {children}
-    </Dialog>
-  )
-}
-
-export type ConfirmOptions = Omit<ConfirmationDialogProps, 'onClose'> & {content: React.ReactNode}
-async function confirm(themeProps: ThemeProviderProps, options: ConfirmOptions): Promise<boolean> {
-  const {content, ...confirmationDialogProps} = options
-  return new Promise(resolve => {
-    const hostElement = document.createElement('div')
-    const onClose: ConfirmationDialogProps['onClose'] = gesture => {
-      ReactDOM.unmountComponentAtNode(hostElement)
-      if (gesture === 'confirm') {
-        resolve(true)
-      } else {
-        resolve(false)
-      }
-    }
-    ReactDOM.render(
-      <ThemeProvider {...themeProps}>
-        <ConfirmationDialog {...confirmationDialogProps} onClose={onClose}>
-          {content}
-        </ConfirmationDialog>
-      </ThemeProvider>,
-      hostElement
-    )
-  })
-}
-
-/**
- * This hook takes no parameters and returns an `async` function, `confirm`. When `confirm`
- * is called, it shows the confirmation dialog. When the dialog is dismissed, a promise is
- * resolved with `true` or `false` depending on whether or not the confirm button was used.
- */
-export function useConfirm() {
-  const {theme, colorMode, dayScheme, nightScheme} = useTheme()
-  const result = useCallback(
-    (options: ConfirmOptions) => {
-      const themeProps: ThemeProviderProps = {theme, colorMode, dayScheme, nightScheme}
-      return confirm(themeProps, options)
-    },
-    [theme, colorMode, dayScheme, nightScheme]
-  )
-  return result
-}