@primer/components 31.2.1-rc.f73a0f8c → 32.0.0-next.0

package/src/ActionList/List.tsx

@@ -1,258 +0,0 @@
-import React, {Key} from 'react'
-import type {AriaRole} from '../utils/types'
-import {Group, GroupProps} from './Group'
-import {Item, ItemProps} from './Item'
-import {Divider} from './Divider'
-import styled from 'styled-components'
-import {get} from '../constants'
-import {SystemCssProperties} from '@styled-system/css'
-import {hasActiveDescendantAttribute} from '../behaviors/focusZone'
-import {Merge} from '../utils/types/Merge'
-
-type RenderItemFn = (props: ItemProps) => React.ReactElement
-
-export type ItemInput =
-  | Merge<React.ComponentPropsWithoutRef<'div'>, ItemProps>
-  | ((Partial<ItemProps> & {renderItem: RenderItemFn}) & {key?: Key})
-
-/**
- * Contract for props passed to the `List` component.
- */
-export interface ListPropsBase {
-  /**
-   * A collection of `Item` props and `Item`-level custom `Item` renderers.
-   */
-  items: ItemInput[]
-
-  /**
-   * The ARIA role describing the function of `List` component. `listbox` is a common value.
-   */
-  role?: AriaRole
-
-  /**
-   * id to attach to the base DOM node of the list
-   */
-  id?: string
-
-  /**
-   * A `List`-level custom `Item` renderer. Every `Item` within this `List`
-   * without a `Group`-level or `Item`-level custom `Item` renderer will be
-   * rendered using this function component.
-   */
-  renderItem?: RenderItemFn
-
-  /**
-   * A `List`-level custom `Group` renderer. Every `Group` within this `List`
-   * without a `Group`-level custom `Item` renderer will be rendered using
-   * this function component.
-   */
-  renderGroup?: typeof Group
-
-  /**
-   * Style variations. Usage is discretionary.
-   *
-   * - `"inset"` - `List` children are offset (vertically and horizontally) from `List`’s edges
-   * - `"full"` - `List` children are flush (vertically and horizontally) with `List` edges
-   */
-  variant?: 'inset' | 'full'
-
-  /**
-   *  For `Item`s which can be selected, whether `multiple` `Item`s or a `single` `Item` can be selected
-   */
-  selectionVariant?: 'single' | 'multiple'
-
-  /**
-   * Whether to display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.
-   */
-  showItemDividers?: boolean
-}
-
-/**
- * Contract for props passed to the `List` component, when its `Item`s are collected in `Group`s.
- */
-export interface GroupedListProps extends ListPropsBase {
-  /**
-   * A collection of `Group` props (except `items`), plus a unique group identifier
-   * and `Group`-level custom `Item` or `Group` renderers.
-   */
-  groupMetadata: ((
-    | Omit<GroupProps, 'items'>
-    | Omit<Partial<GroupProps> & {renderItem?: RenderItemFn; renderGroup?: typeof Group}, 'items'>
-  ) & {groupId: string})[]
-
-  /**
-   * A collection of `Item` props, plus associated group identifiers
-   * and `Item`-level custom `Item` renderers.
-   */
-  items: ((ItemProps | (Partial<ItemProps> & {renderItem: RenderItemFn})) & {groupId: string})[]
-}
-
-/**
- * Asserts that the given value fulfills the `GroupedListProps` contract.
- * @param props A value which fulfills either the `ListPropsBase` or the `GroupedListProps` contract.
- */
-function isGroupedListProps(props: ListProps): props is GroupedListProps {
-  return 'groupMetadata' in props
-}
-
-/**
- * Contract for props passed to the `List` component.
- */
-export type ListProps = ListPropsBase | GroupedListProps
-
-const StyledList = styled.div`
-  font-size: ${get('fontSizes.1')};
-  /* 14px font-size * 1.428571429 = 20px line height
-   *
-   * TODO: When rem-based spacing on a 4px scale lands, replace
-   * hardcoded '20px'
-   */
-  line-height: 20px;
-
-  &[${hasActiveDescendantAttribute}], &:focus-within {
-    --item-hover-bg-override: none;
-    --item-hover-divider-border-color-override: ${get('colors.border.muted')};
-  }
-`
-
-/**
- * Returns `sx` prop values for `List` children matching the given `List` style variation.
- * @param variant `List` style variation.
- */
-function useListVariant(variant: ListProps['variant'] = 'inset'): {
-  firstGroupStyle?: SystemCssProperties
-  lastGroupStyle?: SystemCssProperties
-  headerStyle?: SystemCssProperties
-  itemStyle?: SystemCssProperties
-} {
-  switch (variant) {
-    case 'full':
-      return {
-        headerStyle: {paddingX: get('space.2')},
-        itemStyle: {borderRadius: 0}
-      }
-    default:
-      return {
-        firstGroupStyle: {marginTop: get('space.2')},
-        lastGroupStyle: {marginBottom: get('space.2')},
-        itemStyle: {marginX: get('space.2')}
-      }
-  }
-}
-
-/**
- * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
- */
-export const List = React.forwardRef<HTMLDivElement, ListProps>((props, forwardedRef): JSX.Element => {
-  // Get `sx` prop values for `List` children matching the given `List` style variation.
-  const {firstGroupStyle, lastGroupStyle, headerStyle, itemStyle} = useListVariant(props.variant)
-
-  /**
-   * Render a `Group` using the first of the following renderers that is defined:
-   * A `Group`-level or `List`-level custom `Group` renderer, or
-   * the default `Group` renderer.
-   */
-  const renderGroup = (
-    groupProps: GroupProps | (Partial<GroupProps> & {renderItem?: typeof Item; renderGroup?: typeof Group})
-  ) => {
-    const GroupComponent = (('renderGroup' in groupProps && groupProps.renderGroup) ?? props.renderGroup) || Group
-    return <GroupComponent {...groupProps} key={groupProps.groupId} />
-  }
-
-  /**
-   * Render an `Item` using the first of the following renderers that is defined:
-   * An `Item`-level, `Group`-level, or `List`-level custom `Item` renderer,
-   * or the default `Item` renderer.
-   */
-  const renderItem = (itemProps: ItemInput, item: ItemInput, itemIndex: number) => {
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    const ItemComponent = ('renderItem' in itemProps && itemProps.renderItem) || props.renderItem || Item
-    const key = ('key' in itemProps ? itemProps.key : undefined) ?? itemProps.id?.toString() ?? itemIndex.toString()
-    return (
-      <ItemComponent
-        showDivider={props.showItemDividers}
-        selectionVariant={props.selectionVariant}
-        {...itemProps}
-        key={key}
-        sx={{...itemStyle, ...itemProps.sx}}
-        item={item}
-      />
-    )
-  }
-
-  /**
-   * An array of `Group`s, each with an associated `Header` and with an array of `Item`s belonging to that `Group`.
-   */
-  let groups: (GroupProps | (Partial<GroupProps> & {renderItem?: typeof Item; renderGroup?: typeof Group}))[] = []
-
-  // Collect rendered `Item`s into `Group`s, avoiding excess iteration over the lists of `items` and `groupMetadata`:
-  if (!isGroupedListProps(props)) {
-    // When no `groupMetadata`s is provided, collect rendered `Item`s into a single anonymous `Group`.
-    groups = [{items: props.items.map((item, index) => renderItem(item, item, index)), groupId: '0'}]
-  } else {
-    // When `groupMetadata` is provided, collect rendered `Item`s into their associated `Group`s.
-
-    /**
-     * A map of group identifiers to `Group`s, each with an associated array of `Item`s belonging to that `Group`.
-     */
-    const groupMap = props.groupMetadata.reduce(
-      (groupAccumulator, groupMetadata) => groupAccumulator.set(groupMetadata.groupId, groupMetadata),
-      new Map<string, GroupProps | (Partial<GroupProps> & {renderItem?: typeof Item; renderGroup?: typeof Group})>()
-    )
-
-    for (const itemProps of props.items) {
-      // Look up the group associated with the current item.
-      const group = groupMap.get(itemProps.groupId)
-      const itemIndex = group?.items?.length ?? 0
-
-      // Upsert the group to include the current item (rendered).
-      groupMap.set(itemProps.groupId, {
-        ...group,
-        items: [
-          ...(group?.items ?? []),
-          renderItem(
-            {
-              showDivider: group?.showItemDividers,
-              ...(group && 'renderItem' in group && {renderItem: group.renderItem}),
-              ...itemProps
-            },
-            itemProps,
-            itemIndex
-          )
-        ]
-      })
-    }
-
-    groups = [...groupMap.values()]
-  }
-
-  return (
-    <StyledList {...props} ref={forwardedRef}>
-      {groups.map(({header, ...groupProps}, index) => {
-        const hasFilledHeader = header?.variant === 'filled'
-        const shouldShowDivider = index > 0 && !hasFilledHeader
-        return (
-          <React.Fragment key={groupProps.groupId}>
-            {shouldShowDivider ? <Divider key={`${groupProps.groupId}-divider`} /> : null}
-            {renderGroup({
-              sx: {
-                ...(index === 0 && firstGroupStyle),
-                ...(index === groups.length - 1 && lastGroupStyle),
-                ...(index > 0 && !shouldShowDivider && {mt: 2})
-              },
-              ...(header && {
-                header: {
-                  ...header,
-                  sx: {...headerStyle, ...header.sx}
-                }
-              }),
-              ...groupProps
-            })}
-          </React.Fragment>
-        )
-      })}
-    </StyledList>
-  )
-})
-
-List.displayName = 'ActionList'

package/src/ActionList/index.ts

@@ -1,21 +0,0 @@
-import {List} from './List'
-import {Group} from './Group'
-import {Item} from './Item'
-import {Divider} from './Divider'
-export type {ListProps as ActionListProps} from './List'
-export type {GroupProps} from './Group'
-export type {ItemProps} from './Item'
-
-/**
- * Collection of list-related components.
- */
-export const ActionList = Object.assign(List, {
-  /** Collects related `Items` in an `ActionList`. */
-  Group,
-
-  /** An actionable or selectable `Item` with an optional icon and description. */
-  Item,
-
-  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
-  Divider
-})

package/src/ActionList2/Description.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import Box from '../Box'
-import {SxProp, merge} from '../sx'
-import Truncate from '../Truncate'
-import {Slot, ItemContext} from './Item'
-
-export type DescriptionProps = {
-  /**
-   * Secondary text style variations.
-   *
-   * - `"inline"` - Secondary text is positioned beside primary text.
-   * - `"block"` - Secondary text is positioned below primary text.
-   */
-  variant?: 'inline' | 'block'
-} & SxProp
-
-export const Description: React.FC<DescriptionProps> = ({variant = 'inline', sx = {}, ...props}) => {
-  const styles = {
-    fontSize: 0,
-    lineHeight: '16px',
-    flexGrow: 1,
-    flexBasis: 0,
-    minWidth: 0,
-    marginLeft: variant === 'block' ? 0 : 2
-  }
-
-  return (
-    <Slot name={variant === 'block' ? 'BlockDescription' : 'InlineDescription'}>
-      {({blockDescriptionId, inlineDescriptionId, disabled}: ItemContext) =>
-        variant === 'block' ? (
-          <Box
-            as="span"
-            sx={merge({...styles, color: disabled ? 'fg.disabled' : 'fg.muted'}, sx as SxProp)}
-            id={blockDescriptionId}
-          >
-            {props.children}
-          </Box>
-        ) : (
-          <Truncate
-            id={inlineDescriptionId}
-            sx={merge({...styles, color: disabled ? 'fg.disabled' : 'fg.muted'}, sx as SxProp)}
-            title={props.children as string}
-            inline={true}
-            maxWidth="100%"
-          >
-            {props.children}
-          </Truncate>
-        )
-      }
-    </Slot>
-  )
-}

package/src/ActionList2/Divider.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import Box from '../Box'
-import {get} from '../constants'
-import {Theme} from '../ThemeProvider'
-
-/**
- * Visually separates `Item`s or `Group`s in an `ActionList`.
- */
-export function Divider(): JSX.Element {
-  return (
-    <Box
-      as="li"
-      role="separator"
-      sx={{
-        height: 1,
-        backgroundColor: 'actionListItem.inlineDivider',
-        marginTop: (theme: Theme) => `calc(${get('space.2')(theme)} - 1px)`,
-        marginBottom: 2,
-        listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
-      }}
-      data-component="ActionList.Divider"
-    />
-  )
-}

package/src/ActionList2/Group.tsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import Box from '../Box'
-import {SxProp} from '../sx'
-import {Header, HeaderProps} from './Header'
-import {ListProps} from './List'
-
-export type GroupProps = HeaderProps &
-  SxProp & {
-    selectionVariant?: ListProps['selectionVariant'] | false
-  }
-
-type ContextProps = Pick<GroupProps, 'selectionVariant'>
-export const GroupContext = React.createContext<ContextProps>({})
-
-export const Group: React.FC<GroupProps> = ({title, variant, auxiliaryText, selectionVariant, sx = {}, ...props}) => {
-  return (
-    <Box
-      as="li"
-      sx={{
-        '&:not(:first-child)': {marginTop: 2},
-        listStyle: 'none', // hide the ::marker inserted by browser's stylesheet
-        ...sx
-      }}
-      {...props}
-    >
-      {title && <Header title={title} variant={variant} auxiliaryText={auxiliaryText} />}
-      <GroupContext.Provider value={{selectionVariant}}>
-        <Box as="ul" sx={{paddingInlineStart: 0}}>
-          {props.children}
-        </Box>
-      </GroupContext.Provider>
-    </Box>
-  )
-}

package/src/ActionList2/Header.tsx

@@ -1,58 +0,0 @@
-import React from 'react'
-import Box from '../Box'
-import {SxProp} from '../sx'
-import {ListContext} from './List'
-
-/**
- * Contract for props passed to the `Header` component.
- */
-export type HeaderProps = {
-  /**
-   * Style variations. Usage is discretionary.
-   *
-   * - `"filled"` - Superimposed on a background, offset from nearby content
-   * - `"subtle"` - Relatively less offset from nearby content
-   */
-  variant?: 'subtle' | 'filled'
-
-  /**
-   * Primary text which names a `Group`.
-   */
-  title?: string
-
-  /**
-   * Secondary text which provides additional information about a `Group`.
-   */
-  auxiliaryText?: string
-} & SxProp
-
-/**
- * Displays the name and description of a `Group`.
- */
-export const Header = ({variant = 'subtle', title, auxiliaryText, sx = {}, ...props}: HeaderProps): JSX.Element => {
-  const {variant: listVariant} = React.useContext(ListContext)
-
-  const styles = {
-    paddingY: '6px',
-    paddingX: listVariant === 'full' ? 2 : 3,
-    fontSize: 0,
-    fontWeight: 'bold',
-    color: 'fg.muted',
-    ...(variant === 'filled' && {
-      backgroundColor: 'canvas.subtle',
-      marginX: 0,
-      marginBottom: 2,
-      borderTop: '1px solid',
-      borderBottom: '1px solid',
-      borderColor: 'neutral.muted'
-    }),
-    ...sx
-  }
-
-  return (
-    <Box sx={styles} role="heading" {...props}>
-      {title}
-      {auxiliaryText && <span>{auxiliaryText}</span>}
-    </Box>
-  )
-}

package/src/ActionList2/Item.tsx

@@ -1,246 +0,0 @@
-import React from 'react'
-import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
-import {useSSRSafeId} from '@react-aria/ssr'
-import styled from 'styled-components'
-import {useTheme} from '../ThemeProvider'
-import Box, {BoxProps} from '../Box'
-import sx, {SxProp, merge} from '../sx'
-import createSlots from '../utils/create-slots'
-import {AriaRole} from '../utils/types'
-import {ListContext} from './List'
-import {Selection} from './Selection'
-
-export const getVariantStyles = (variant: ItemProps['variant'], disabled: ItemProps['disabled']) => {
-  if (disabled) {
-    return {
-      color: 'primer.fg.disabled',
-      iconColor: 'primer.fg.disabled',
-      annotationColor: 'primer.fg.disabled'
-    }
-  }
-
-  switch (variant) {
-    case 'danger':
-      return {
-        color: 'danger.fg',
-        iconColor: 'danger.fg',
-        annotationColor: 'fg.muted',
-        hoverColor: 'actionListItem.danger.hoverText'
-      }
-    default:
-      return {
-        color: 'fg.default',
-        iconColor: 'fg.muted',
-        annotationColor: 'fg.muted',
-        hoverColor: 'fg.default'
-      }
-  }
-}
-
-export type ItemProps = {
-  /**
-   * Primary content for an Item
-   */
-  children?: React.ReactNode
-  /**
-   * Callback that will trigger both on click selection and keyboard selection.
-   */
-  onSelect?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void
-  /**
-   * Is the `Item` is currently selected?
-   */
-  selected?: boolean
-  /**
-   * Style variations associated with various `Item` types.
-   *
-   * - `"default"` - An action `Item`.
-   * - `"danger"` - A destructive action `Item`.
-   */
-  variant?: 'default' | 'danger'
-  /**
-   * Items that are disabled can not be clicked, selected, or navigated through.
-   */
-  disabled?: boolean
-  /**
-   * The ARIA role describing the function of `Item` component. `option` is a common value.
-   */
-  role?: AriaRole
-  /**
-   * id to attach to the root element of the Item
-   */
-  id?: string
-  /**
-   * Private API for use internally only. Used by LinkItem to wrap contents in an anchor
-   */
-  _PrivateItemWrapper?: React.FC
-} & SxProp
-
-const {Slots, Slot} = createSlots(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual'])
-export {Slot}
-export type ItemContext = Pick<ItemProps, 'variant' | 'disabled'> & {
-  inlineDescriptionId: string
-  blockDescriptionId: string
-}
-
-const LiBox = styled.li<SxProp>(sx)
-export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale
-
-export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
-  (
-    {
-      variant = 'default',
-      disabled = false,
-      selected = undefined,
-      onSelect = () => null,
-      sx: sxProp = {},
-      id,
-      _PrivateItemWrapper,
-      ...props
-    },
-    forwardedRef
-  ): JSX.Element => {
-    const {variant: listVariant, showDividers} = React.useContext(ListContext)
-
-    const {theme} = useTheme()
-
-    const styles = {
-      display: 'flex',
-      paddingX: 2,
-      fontSize: 1,
-      paddingY: '6px', // custom value off the scale
-      lineHeight: TEXT_ROW_HEIGHT,
-      minHeight: 5,
-      marginX: listVariant === 'inset' ? 2 : 0,
-      borderRadius: listVariant === 'inset' ? 2 : 0,
-      transition: 'background 33.333ms linear',
-      color: getVariantStyles(variant, disabled).color,
-      cursor: 'pointer',
-      '&[aria-disabled]': {cursor: 'not-allowed'},
-
-      '@media (hover: hover) and (pointer: fine)': {
-        ':hover:not([aria-disabled])': {
-          backgroundColor: `actionListItem.${variant}.hoverBg`,
-          color: getVariantStyles(variant, disabled).hoverColor
-        },
-        ':focus:not([data-focus-visible-added])': {
-          backgroundColor: `actionListItem.${variant}.selectedBg`,
-          color: getVariantStyles(variant, disabled).hoverColor,
-          outline: 'none'
-        },
-        '&[data-focus-visible-added]': {
-          // we don't use :focus-visible because not all browsers (safari) have it yet
-          outline: 'none',
-          border: `2 solid`,
-          boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}`
-        },
-        ':active:not([aria-disabled])': {
-          backgroundColor: `actionListItem.${variant}.activeBg`,
-          color: getVariantStyles(variant, disabled).hoverColor
-        }
-      },
-
-      /** Divider styles */
-      '[data-component="ActionList.Item--DividerContainer"]': {
-        position: 'relative'
-      },
-      '[data-component="ActionList.Item--DividerContainer"]::before': {
-        content: '" "',
-        display: 'block',
-        position: 'absolute',
-        width: '100%',
-        top: '-7px',
-        border: '0 solid',
-        borderTopWidth: showDividers ? `1px` : '0',
-        borderColor: 'var(--divider-color, transparent)'
-      },
-      // show between 2 items
-      ':not(:first-of-type)': {'--divider-color': theme?.colors.actionListItem.inlineDivider},
-      // hide divider after dividers & group header, with higher importance!
-      '[data-component="ActionList.Divider"] + &': {'--divider-color': 'transparent !important'},
-      // hide border on current and previous item
-      '&:hover:not([aria-disabled]), &:focus:not([aria-disabled]), &[data-focus-visible-added]:not([aria-disabled])': {
-        '--divider-color': 'transparent'
-      },
-      '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &, &[data-focus-visible-added] + li': {
-        '--divider-color': 'transparent'
-      }
-    }
-
-    const clickHandler = React.useCallback(
-      event => {
-        if (disabled) return
-        if (!event.defaultPrevented) onSelect(event)
-      },
-      [onSelect, disabled]
-    )
-
-    const keyPressHandler = React.useCallback(
-      event => {
-        if (disabled) return
-
-        if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
-          onSelect(event)
-        }
-      },
-      [onSelect, disabled]
-    )
-
-    // use props.id if provided, otherwise generate one.
-    const labelId = useSSRSafeId(id)
-    const inlineDescriptionId = useSSRSafeId(id && `${id}--inline-description`)
-    const blockDescriptionId = useSSRSafeId(id && `${id}--block-description`)
-
-    const ItemWrapper = _PrivateItemWrapper || React.Fragment
-
-    return (
-      <Slots context={{variant, disabled, inlineDescriptionId, blockDescriptionId}}>
-        {slots => (
-          <LiBox
-            ref={forwardedRef}
-            sx={merge(styles, sxProp as SxProp)}
-            onClick={clickHandler}
-            onKeyPress={keyPressHandler}
-            aria-selected={selected}
-            aria-disabled={disabled ? true : undefined}
-            tabIndex={disabled || _PrivateItemWrapper ? undefined : 0}
-            aria-labelledby={`${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`}
-            aria-describedby={slots.BlockDescription ? blockDescriptionId : undefined}
-            {...props}
-          >
-            <ItemWrapper>
-              <Selection selected={selected} />
-              {slots.LeadingVisual}
-              <Box
-                data-component="ActionList.Item--DividerContainer"
-                sx={{display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0}}
-              >
-                <ConditionalBox if={Boolean(slots.TrailingVisual)} sx={{display: 'flex', flexGrow: 1}}>
-                  <ConditionalBox
-                    if={Boolean(slots.InlineDescription)}
-                    sx={{display: 'flex', flexGrow: 1, alignItems: 'baseline', minWidth: 0}}
-                  >
-                    <Box as="span" id={labelId} sx={{flexGrow: slots.InlineDescription ? 0 : 1}}>
-                      {props.children}
-                    </Box>
-                    {slots.InlineDescription}
-                  </ConditionalBox>
-                  {slots.TrailingVisual}
-                </ConditionalBox>
-                {slots.BlockDescription}
-              </Box>
-            </ItemWrapper>
-          </LiBox>
-        )}
-      </Slots>
-    )
-  }
-) as PolymorphicForwardRefComponent<'li', ItemProps>
-
-Item.displayName = 'ActionList.Item'
-
-const ConditionalBox: React.FC<{if: boolean} & BoxProps> = props => {
-  const {if: condition, ...rest} = props
-
-  if (condition) return <Box {...rest}>{props.children}</Box>
-  else return <>{props.children}</>
-}