@primer/components 29.1.0-rc.79e8b21e → 29.1.0

package/src/ActionList/List.tsx

@@ -1,253 +0,0 @@
-import React 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'
-
-export type ItemInput = ItemProps | (Partial<ItemProps> & {renderItem: typeof Item})
-
-/**
- * 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?: typeof Item
-
-  /**
-   * 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?: typeof Item; 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: typeof Item})) & {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 = itemProps.key ?? 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/ActionMenu.tsx

@@ -1,106 +0,0 @@
-import {GroupedListProps, List, ListPropsBase} from './ActionList/List'
-import {Item, ItemProps} from './ActionList/Item'
-import {Divider} from './ActionList/Divider'
-import Button, {ButtonProps} from './Button'
-import React, {useCallback, useMemo} from 'react'
-import {AnchoredOverlay} from './AnchoredOverlay'
-import {useProvidedStateOrCreate} from './hooks/useProvidedStateOrCreate'
-import {OverlayProps} from './Overlay'
-import {useProvidedRefOrCreate} from './hooks'
-import {AnchoredOverlayWrapperAnchorProps} from './AnchoredOverlay/AnchoredOverlay'
-
-interface ActionMenuBaseProps extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>, ListPropsBase {
-  /**
-   * Content that is passed into the renderAnchor component, which is a button by default.
-   */
-  anchorContent?: React.ReactNode
-
-  /**
-   * A callback that triggers both on clicks and keyboard events. This callback will be overridden by item level `onAction` callbacks.
-   */
-  onAction?: (props: ItemProps, event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void
-
-  /**
-   * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `setOpen`.
-   */
-  open?: boolean
-
-  /**
-   * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`.
-   */
-  setOpen?: (s: boolean) => void
-
-  /**
-   * Props to be spread on the internal `Overlay` component.
-   */
-  overlayProps?: Partial<OverlayProps>
-}
-
-export type ActionMenuProps = ActionMenuBaseProps & AnchoredOverlayWrapperAnchorProps
-
-const ActionMenuItem = (props: ItemProps) => <Item role="menuitem" {...props} />
-
-ActionMenuItem.displayName = 'ActionMenu.Item'
-
-const ActionMenuBase = ({
-  anchorContent,
-  renderAnchor = <T extends ButtonProps>(props: T) => <Button {...props} />,
-  anchorRef: externalAnchorRef,
-  onAction,
-  open,
-  setOpen,
-  overlayProps,
-  items,
-  ...listProps
-}: ActionMenuProps): JSX.Element => {
-  const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, setOpen, false)
-  const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
-  const onOpen = useCallback(() => setCombinedOpenState(true), [setCombinedOpenState])
-  const onClose = useCallback(() => setCombinedOpenState(false), [setCombinedOpenState])
-
-  const renderMenuAnchor = useMemo(() => {
-    if (renderAnchor === null) {
-      return null
-    }
-    return <T extends React.HTMLAttributes<HTMLElement>>(props: T) => {
-      return renderAnchor({
-        'aria-label': 'menu',
-        children: anchorContent,
-        ...props
-      })
-    }
-  }, [anchorContent, renderAnchor])
-
-  const itemsToRender = useMemo(() => {
-    return items.map(item => {
-      return {
-        ...item,
-        role: 'menuitem',
-        onAction: (props, event) => {
-          const actionCallback = item.onAction ?? onAction
-          actionCallback?.(props as ItemProps, event)
-          if (!event.defaultPrevented) {
-            onClose()
-          }
-        }
-      } as ItemProps
-    })
-  }, [items, onAction, onClose])
-
-  return (
-    <AnchoredOverlay
-      renderAnchor={renderMenuAnchor}
-      anchorRef={anchorRef}
-      open={combinedOpenState}
-      onOpen={onOpen}
-      onClose={onClose}
-      overlayProps={overlayProps}
-    >
-      <List {...listProps} role="menu" items={itemsToRender} />
-    </AnchoredOverlay>
-  )
-}
-
-ActionMenuBase.displayName = 'ActionMenu'
-
-export const ActionMenu = Object.assign(ActionMenuBase, {Divider, Item: ActionMenuItem})

package/src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -1,180 +0,0 @@
-import React, {useCallback, useEffect} from 'react'
-import Overlay, {OverlayProps} from '../Overlay'
-import {FocusTrapHookSettings, useFocusTrap} from '../hooks/useFocusTrap'
-import {FocusZoneHookSettings, useFocusZone} from '../hooks/useFocusZone'
-import {useAnchoredPosition, useProvidedRefOrCreate, useRenderForcingRef} from '../hooks'
-import {useSSRSafeId} from '@react-aria/ssr'
-
-interface AnchoredOverlayPropsWithAnchor {
-  /**
-   * A custom function component used to render the anchor element.
-   * Will receive the selected text as `children` prop when an item is activated.
-   */
-  renderAnchor: <T extends React.HTMLAttributes<HTMLElement>>(props: T) => JSX.Element
-
-  /**
-   * An override to the internal ref that will be spread on to the renderAnchor
-   */
-  anchorRef?: React.RefObject<HTMLElement>
-}
-
-interface AnchoredOverlayPropsWithoutAnchor {
-  /**
-   * A custom function component used to render the anchor element.
-   * When renderAnchor is null, an anchorRef is required.
-   */
-  renderAnchor: null
-
-  /**
-   * An override to the internal renderAnchor ref that will be used to position the overlay.
-   * When renderAnchor is null this can be used to make an anchor that is detached from ActionMenu.
-   */
-  anchorRef: React.RefObject<HTMLElement>
-}
-
-export type AnchoredOverlayWrapperAnchorProps =
-  | Partial<AnchoredOverlayPropsWithAnchor>
-  | AnchoredOverlayPropsWithoutAnchor
-
-interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'> {
-  /**
-   * Determines whether the overlay portion of the component should be shown or not
-   */
-  open: boolean
-
-  /**
-   * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
-   */
-  onOpen?: (gesture: 'anchor-click' | 'anchor-key-press') => unknown
-
-  /**
-   * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
-   */
-  onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape') => unknown
-
-  /**
-   * Props to be spread on the internal `Overlay` component.
-   */
-  overlayProps?: Partial<OverlayProps>
-
-  /**
-   * Settings to apply to the Focus Zone on the internal `Overlay` component.
-   */
-  focusTrapSettings?: Partial<FocusTrapHookSettings>
-
-  /**
-   * Settings to apply to the Focus Zone on the internal `Overlay` component.
-   */
-  focusZoneSettings?: Partial<FocusZoneHookSettings>
-}
-
-export type AnchoredOverlayProps = AnchoredOverlayBaseProps &
-  (AnchoredOverlayPropsWithAnchor | AnchoredOverlayPropsWithoutAnchor)
-
-/**
- * An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
- * The overlay can be opened and navigated using keyboard or mouse.
- */
-export const AnchoredOverlay: React.FC<AnchoredOverlayProps> = ({
-  renderAnchor,
-  anchorRef: externalAnchorRef,
-  children,
-  open,
-  onOpen,
-  onClose,
-  height,
-  width,
-  overlayProps,
-  focusTrapSettings,
-  focusZoneSettings
-}) => {
-  const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
-  const [overlayRef, updateOverlayRef] = useRenderForcingRef<HTMLDivElement>()
-  const anchorId = useSSRSafeId()
-
-  const onClickOutside = useCallback(() => onClose?.('click-outside'), [onClose])
-  const onEscape = useCallback(() => onClose?.('escape'), [onClose])
-
-  const onAnchorKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLElement>) => {
-      if (!event.defaultPrevented) {
-        if (!open && ['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(event.key)) {
-          onOpen?.('anchor-key-press')
-          event.preventDefault()
-        }
-      }
-    },
-    [open, onOpen]
-  )
-  const onAnchorClick = useCallback(
-    (event: React.MouseEvent<HTMLElement>) => {
-      if (event.defaultPrevented || event.button !== 0) {
-        return
-      }
-      if (!open) {
-        onOpen?.('anchor-click')
-      } else {
-        onClose?.('anchor-click')
-      }
-    },
-    [open, onOpen, onClose]
-  )
-
-  const {position} = useAnchoredPosition(
-    {
-      anchorElementRef: anchorRef,
-      floatingElementRef: overlayRef
-    },
-    [overlayRef.current]
-  )
-
-  useEffect(() => {
-    // ensure overlay ref gets cleared when closed, so position can reset between closing/re-opening
-    if (!open && overlayRef.current) {
-      updateOverlayRef(null)
-    }
-  }, [open, overlayRef, updateOverlayRef])
-
-  useFocusZone({
-    containerRef: overlayRef,
-    disabled: !open || !position,
-    ...focusZoneSettings
-  })
-  useFocusTrap({containerRef: overlayRef, disabled: !open || !position, ...focusTrapSettings})
-
-  return (
-    <>
-      {renderAnchor &&
-        renderAnchor({
-          ref: anchorRef,
-          id: anchorId,
-          'aria-labelledby': anchorId,
-          'aria-haspopup': 'true',
-          tabIndex: 0,
-          onClick: onAnchorClick,
-          onKeyDown: onAnchorKeyDown
-        })}
-      {open ? (
-        <Overlay
-          returnFocusRef={anchorRef}
-          onClickOutside={onClickOutside}
-          ignoreClickRefs={[anchorRef]}
-          onEscape={onEscape}
-          ref={updateOverlayRef}
-          role="none"
-          visibility={position ? 'visible' : 'hidden'}
-          height={height}
-          width={width}
-          top={position?.top || 0}
-          left={position?.left || 0}
-          anchorSide={position?.anchorSide}
-          {...overlayProps}
-        >
-          {children}
-        </Overlay>
-      ) : null}
-    </>
-  )
-}
-
-AnchoredOverlay.displayName = 'AnchoredOverlay'

package/src/AnchoredOverlay/index.ts

@@ -1,2 +0,0 @@
-export {AnchoredOverlay} from './AnchoredOverlay'
-export type {AnchoredOverlayProps} from './AnchoredOverlay'

package/src/Avatar.tsx

@@ -1,46 +0,0 @@
-import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-type StyledAvatarProps = {
-  /** Sets the width and height of the avatar. */
-  size?: number
-  /** Sets the shape of the avatar to a square if true. If false, the avatar will be circular. */
-  square?: boolean
-  /** URL of the avatar image. */
-  src: string
-  /** Provide alt text when the Avatar is used without the user's name next to it. */
-  alt?: string
-} & SystemCommonProps &
-  SxProp
-
-function getBorderRadius({size, square}: StyledAvatarProps) {
-  if (square) {
-    return size && size <= 24 ? '4px' : '6px'
-  } else {
-    return '50%'
-  }
-}
-
-const Avatar = styled.img.attrs<StyledAvatarProps>(props => ({
-  height: props.size,
-  width: props.size
-}))<StyledAvatarProps>`
-  display: inline-block;
-  overflow: hidden; // Ensure page layout in Firefox should images fail to load
-  line-height: ${get('lineHeights.condensedUltra')};
-  vertical-align: middle;
-  border-radius: ${props => getBorderRadius(props)};
-  ${COMMON};
-  ${sx}
-`
-
-Avatar.defaultProps = {
-  size: 20,
-  alt: '',
-  square: false
-}
-
-export type AvatarProps = ComponentProps<typeof Avatar>
-export default Avatar

package/src/AvatarPair.tsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import Avatar from './Avatar'
-import {get} from './constants'
-import {Box, BoxProps} from '.'
-
-const ChildAvatar = styled(Avatar)`
-  position: absolute;
-  right: -15%;
-  bottom: -9%;
-  box-shadow: ${get('shadows.avatar.childShadow')};
-`
-
-export type AvatarPairProps = BoxProps
-
-const AvatarPair = ({children, ...rest}: AvatarPairProps) => {
-  const avatars = React.Children.map(children, (child, i) => {
-    if (!React.isValidElement(child)) return child
-    return i === 0 ? (
-      React.cloneElement(child, {size: 40})
-    ) : (
-      <ChildAvatar bg="canvas.default" {...child.props} size={20} />
-    )
-  })
-  return (
-    <Box position="relative" display="inline-flex" {...rest}>
-      {avatars}
-    </Box>
-  )
-}
-
-// styled() changes this
-AvatarPair.displayName = 'AvatarPair'
-
-export default AvatarPair