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

package/src/Dropdown.tsx

@@ -1,154 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import Button, {ButtonProps} from './Button'
-import {get} from './constants'
-import Details, {DetailsProps} from './Details'
-import getDirectionStyles from './DropdownStyles'
-import useDetails from './hooks/useDetails'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const StyledDetails = styled(Details)`
-  position: relative;
-  display: inline-block;
-`
-
-export type DropdownProps = DetailsProps
-
-const Dropdown = ({children, className, ...rest}: DropdownProps) => {
-  const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
-  return (
-    <StyledDetails className={className} {...getDetailsProps()} {...rest}>
-      {children}
-    </StyledDetails>
-  )
-}
-
-export type DropdownButtonProps = ButtonProps
-
-const DropdownButton = ({children, ...rest}: DropdownButtonProps) => {
-  return (
-    <Button as="summary" aria-haspopup="true" {...rest}>
-      {children}
-      <DropdownCaret />
-    </Button>
-  )
-}
-
-const DropdownCaret = styled.div<SxProp>`
-  border: 4px solid transparent;
-  margin-left: 12px;
-  border-top-color: currentcolor;
-  border-bottom-width: 0;
-  content: '';
-  display: inline-block;
-  height: 0;
-  vertical-align: middle;
-  width: 0;
-  ${sx};
-`
-
-type StyledDropdownMenuProps = {
-  direction?: 'ne' | 'e' | 'se' | 's' | 'sw' | 'w'
-} & SxProp
-
-const DropdownMenu = styled.ul<StyledDropdownMenuProps>`
-  background-clip: padding-box;
-  background-color: ${get('colors.canvas.overlay')};
-  border: 1px solid ${get('colors.border.default')};
-  border-radius: ${get('radii.2')};
-  box-shadow: ${get('shadows.shadow.large')};
-  left: 0;
-  list-style: none;
-  margin-top: 2px;
-  padding: 5px 0 5px 0 !important; //TODO: fix this override on our markdown styles
-  position: absolute;
-  top: 100%;
-  width: 160px;
-  z-index: 100;
-
-  &::before {
-    position: absolute;
-    display: inline-block;
-    content: '';
-  }
-
-  &::after {
-    position: absolute;
-    display: inline-block;
-    content: '';
-  }
-
-  &::before {
-    border: 8px solid transparent;
-    border-bottom-color: ${get('colors.canvas.overlay')};
-  }
-
-  &::after {
-    border: 7px solid transparent;
-    border-bottom-color: ${get('colors.canvas.overlay')};
-  }
-
-  // stylelint-disable-next-line selector-max-type
-  > ul {
-    list-style: none;
-  }
-  ${props => (props.direction ? getDirectionStyles(props.theme, props.direction) : '')};
-  ${sx};
-`
-
-const DropdownItem = styled.li`
-  display: block;
-  padding: ${get('space.1')} 10px ${get('space.1')} 15px;
-  overflow: hidden;
-  color: ${get('colors.fg.default')};
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  a {
-    color: ${get('colors.fg.default')};
-    text-decoration: none;
-    display: block;
-    overflow: hidden;
-    color: ${get('colors.fg.default')};
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &:focus,
-  a:focus {
-    color: ${get('colors.fg.onEmphasis')};
-    text-decoration: none;
-    background-color: ${get('colors.accent.emphasis')};
-  }
-
-  &:hover,
-  &:hover a {
-    color: ${get('colors.fg.onEmphasis')};
-    text-decoration: none;
-    background-color: ${get('colors.accent.emphasis')};
-    outline: none;
-  }
-  ${sx};
-`
-
-DropdownMenu.defaultProps = {direction: 'sw'}
-DropdownMenu.displayName = 'Dropdown.Menu'
-
-DropdownItem.displayName = 'Dropdown.Item'
-
-DropdownButton.defaultProps = Button.defaultProps
-DropdownButton.displayName = 'Dropdown.Button'
-
-DropdownCaret.displayName = 'Dropdown.Caret'
-
-Dropdown.defaultProps = Details.defaultProps
-
-export type DropdownCaretProps = ComponentProps<typeof DropdownCaret>
-export type DropdownMenuProps = ComponentProps<typeof DropdownMenu>
-export type DropdownItemProps = ComponentProps<typeof DropdownItem>
-export default Object.assign(Dropdown, {
-  Caret: DropdownCaret,
-  Menu: DropdownMenu,
-  Item: DropdownItem,
-  Button: DropdownButton
-})

package/src/DropdownMenu/DropdownButton.tsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import {TriangleDownIcon} from '@primer/octicons-react'
-import Button, {ButtonProps} from '../Button/Button'
-import StyledOcticon from '../StyledOcticon'
-
-export type DropdownButtonProps = ButtonProps
-
-export const DropdownButton = React.forwardRef<HTMLElement, React.PropsWithChildren<DropdownButtonProps>>(
-  ({children, ...props}: React.PropsWithChildren<DropdownButtonProps>, ref): JSX.Element => (
-    <Button ref={ref} type="button" {...props}>
-      {children}
-      <StyledOcticon icon={TriangleDownIcon} sx={{ml: 1}} />
-    </Button>
-  )
-)

package/src/DropdownMenu/DropdownMenu.tsx

@@ -1,115 +0,0 @@
-import React, {useCallback, useMemo} from 'react'
-import {List, GroupedListProps, ListPropsBase, ItemInput} from '../ActionList/List'
-import {DropdownButton, DropdownButtonProps} from './DropdownButton'
-import {ItemProps} from '../ActionList/Item'
-import {AnchoredOverlay} from '../AnchoredOverlay'
-import {OverlayProps} from '../Overlay'
-import {AnchoredOverlayWrapperAnchorProps} from '../AnchoredOverlay/AnchoredOverlay'
-import {useProvidedRefOrCreate} from '../hooks/useProvidedRefOrCreate'
-import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
-
-interface DropdownMenuBaseProps extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>, ListPropsBase {
-  /**
-   * A placeholder value to display on the trigger button when no selection has been made.
-   */
-  placeholder?: string
-
-  /**
-   * An `ItemProps` item from the list of `items` which is currently selected.  This item will receive a checkmark next to it in the menu.
-   */
-  selectedItem?: ItemInput
-
-  /**
-   * A callback which receives the selected item or `undefined` when an item is activated in the menu.  If the activated item is the same as the current
-   * `selectedItem`, `undefined` will be passed.
-   */
-  onChange?: (item?: ItemInput) => unknown
-
-  /**
-   * Props to be spread on the internal `Overlay` component.
-   */
-  overlayProps?: Partial<OverlayProps>
-
-  /**
-   * If defined, will control the open/closed state of the overlay. If not defined, the overlay will manage its own state (in other words, an
-   * uncontrolled component). Must be used in conjuction with `onOpenChange`.
-   */
-  open?: boolean
-
-  /**
-   * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`.
-   */
-  onOpenChange?: (open: boolean) => void
-}
-
-export type DropdownMenuProps = DropdownMenuBaseProps & AnchoredOverlayWrapperAnchorProps
-
-/**
- * A `DropdownMenu` provides an anchor (button by default) that will open a floating menu of selectable items.  The menu can be
- * opened and navigated using keyboard or mouse.  When an item is selected, the menu will close and the `onChange` callback will be called.
- * If the default anchor button is used, the anchor contents will be updated with the selection.
- */
-export function DropdownMenu({
-  renderAnchor = <T extends DropdownButtonProps>(props: T) => <DropdownButton {...props} />,
-  anchorRef: externalAnchorRef,
-  placeholder,
-  selectedItem,
-  onChange,
-  overlayProps,
-  items,
-  open,
-  onOpenChange,
-  ...listProps
-}: DropdownMenuProps): JSX.Element {
-  const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, onOpenChange, false)
-  const onOpen = useCallback(() => setCombinedOpenState(true), [setCombinedOpenState])
-  const onClose = useCallback(() => setCombinedOpenState(false), [setCombinedOpenState])
-
-  const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
-
-  const renderMenuAnchor = useMemo(() => {
-    if (renderAnchor === null) {
-      return null
-    }
-    return <T extends React.HTMLAttributes<HTMLElement>>(props: T) =>
-      renderAnchor({
-        ...props,
-        children: selectedItem?.text ?? placeholder
-      })
-  }, [placeholder, renderAnchor, selectedItem?.text])
-
-  const itemsToRender = useMemo(() => {
-    return items.map(item => {
-      return {
-        ...item,
-        role: 'option',
-        selected: item === selectedItem,
-        onAction: (itemFromAction, event) => {
-          item.onAction?.(itemFromAction, event)
-
-          if (event.defaultPrevented) {
-            return
-          }
-
-          onClose()
-          onChange?.(item === selectedItem ? undefined : item)
-        }
-      } as ItemProps
-    })
-  }, [items, onChange, onClose, selectedItem])
-
-  return (
-    <AnchoredOverlay
-      renderAnchor={renderMenuAnchor}
-      anchorRef={anchorRef}
-      open={combinedOpenState}
-      onOpen={onOpen}
-      onClose={onClose}
-      overlayProps={overlayProps}
-    >
-      <List {...listProps} role="listbox" items={itemsToRender} />
-    </AnchoredOverlay>
-  )
-}
-
-DropdownMenu.displayName = 'DropdownMenu'

package/src/DropdownMenu/index.ts

@@ -1,4 +0,0 @@
-export {DropdownMenu} from './DropdownMenu'
-export type {DropdownMenuProps} from './DropdownMenu'
-export {DropdownButton} from './DropdownButton'
-export type {DropdownButtonProps} from './DropdownButton'

package/src/DropdownStyles.ts

@@ -1,128 +0,0 @@
-import {get} from './constants'
-import {Theme} from './ThemeProvider'
-
-const getDirectionStyles = (theme: Theme, direction: 'ne' | 'e' | 'se' | 's' | 'sw' | 'w') => {
-  const map = {
-    w: `
-      top: 0;
-      right: 100%;
-      left: auto;
-      width: auto;
-      margin-top: 0;
-      margin-right: 10px;
-
-      &::before {
-        top: 10px;
-        right: -16px;
-        left: auto;
-        border-color: transparent;
-        border-left-color: ${get('colors.border.default')(theme)};
-      }
-
-      &::after {
-        top: 11px;
-        right: -14px;
-        left: auto;
-        border-color: transparent;
-        border-left-color: ${get('colors.border.default')(theme)};
-      }
-    `,
-    e: `
-      top: 0;
-      left: 100%;
-      width: auto;
-      margin-top: 0;
-      margin-left: 10px;
-
-      &::before {
-        top: 10px;
-        left: -16px;
-        border-color: transparent;
-        border-right-color: ${get('colors.border.default')(theme)};
-      }
-
-      &::after {
-        top: 11px;
-        left: -14px;
-        border-color: transparent;
-        border-right-color: ${get('colors.border.default')(theme)};
-      }
-    `,
-    ne: `
-      top: auto;
-      bottom: 100%;
-      left: 0;
-      margin-bottom: 3px;
-
-      &::before,
-      &::after {
-        top: auto;
-        right: auto;
-      }
-
-      &::before {
-        bottom: -8px;
-        left: 9px;
-        border-top: 8px solid ${get('colors.border.default')(theme)};
-        border-bottom: 0;
-        border-left: 8px solid transparent;
-      }
-
-      &::after {
-        bottom: -7px;
-        left: 10px;
-        border-top: 7px solid ${get('colors.border.default')(theme)};
-        border-right: 7px solid transparent;
-        border-bottom: 0;
-        border-left: 7px solid transparent;
-      }
-    `,
-    s: `
-      right: 50%;
-      left: auto;
-      transform: translateX(50%);
-
-      &::before {
-        top: -16px;
-        right: 50%;
-        transform: translateX(50%);
-      }
-
-      &::after {
-        top: -14px;
-        right: 50%;
-        transform: translateX(50%);
-      }
-    `,
-    sw: `
-      right: 0;
-      left: auto;
-
-      &::before {
-        top: -16px;
-        right: 9px;
-        left: auto;
-      }
-
-      &::after {
-        top: -14px;
-        right: 10px;
-        left: auto;
-      }
-    `,
-    se: `
-      &::before {
-        top: -16px;
-        left: 9px;
-      }
-
-      &::after {
-        top: -14px;
-        left: 10px;
-      }
-    `
-  }
-  return map[direction]
-}
-
-export default getDirectionStyles

package/src/FilterList.tsx

@@ -1,75 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import {get} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const FilterListBase = styled.ul<SxProp>`
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  ${sx};
-`
-
-export type FilterListProps = ComponentProps<typeof FilterListBase>
-
-const FilterList = ({children, ...rest}: React.PropsWithChildren<FilterListProps>) => {
-  const items = React.Children.map(children, child => {
-    return <li>{child}</li>
-  })
-
-  return <FilterListBase {...rest}>{items}</FilterListBase>
-}
-
-type StyledFilterListItemBaseProps = {
-  small?: boolean
-  selected?: boolean
-} & SxProp
-
-const FilterListItemBase = styled.a<StyledFilterListItemBaseProps>`
-  position: relative;
-  display: block;
-  padding: ${props => (props.small ? `${get('space.1')(props)} 10px` : `${get('space.2')(props)} 11px`)};
-  margin: ${props => (props.small ? '0 0 2px' : '0 0 5px 0')};
-  overflow: hidden;
-  font-size: ${get('fontSizes.1')};
-  color: ${props => (props.selected ? get('colors.fg.onEmphasis') : get('colors.fg.muted'))};
-  background-color: ${props => (props.selected ? get('colors.accent.emphasis') : '')}!important;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-  border-radius: ${get('radii.1')};
-  &:hover {
-    text-decoration: none;
-    background-color: ${get('colors.canvas.subtle')};
-  }
-  &:active {
-    color: ${get('colors.fg.onEmphasis')};
-    background-color: ${get('colors.accent.emphasis')};
-  }
-  .count {
-    float: right;
-    font-weight: ${get('fontWeights.bold')};
-  }
-  ${sx};
-`
-
-export type FilterListItemProps = {count?: number} & ComponentProps<typeof FilterListItemBase>
-
-function FilterListItem({children, count, ...rest}: React.PropsWithChildren<FilterListItemProps>) {
-  return (
-    <FilterListItemBase {...rest}>
-      {count && (
-        <span title="results" className="count">
-          {count}
-        </span>
-      )}
-      {children}
-    </FilterListItemBase>
-  )
-}
-
-FilterListItem.displayName = 'FilterList.Item'
-
-export default Object.assign(FilterList, {Item: FilterListItem})

package/src/FilteredActionList/FilteredActionList.tsx

@@ -1,142 +0,0 @@
-import React, {KeyboardEventHandler, useCallback, useEffect, useRef} from 'react'
-import {useSSRSafeId} from '@react-aria/ssr'
-import {GroupedListProps, ListPropsBase} from '../ActionList/List'
-import TextInput, {TextInputProps} from '../TextInput'
-import Box from '../Box'
-import {ActionList} from '../ActionList'
-import Spinner from '../Spinner'
-import {useFocusZone} from '../hooks/useFocusZone'
-import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
-import styled from 'styled-components'
-import {get} from '../constants'
-import {useProvidedRefOrCreate} from '../hooks/useProvidedRefOrCreate'
-import useScrollFlash from '../hooks/useScrollFlash'
-import {scrollIntoViewingArea} from '../behaviors/scrollIntoViewingArea'
-import {SxProp} from '../sx'
-
-export interface FilteredActionListProps
-  extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>,
-    ListPropsBase,
-    SxProp {
-  loading?: boolean
-  placeholderText: string
-  filterValue?: string
-  onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void
-  textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>
-  inputRef?: React.RefObject<HTMLInputElement>
-}
-
-const StyledHeader = styled.div`
-  box-shadow: 0 1px 0 ${get('colors.border.default')};
-  z-index: 1;
-`
-
-export function FilteredActionList({
-  loading = false,
-  placeholderText,
-  filterValue: externalFilterValue,
-  onFilterChange,
-  items,
-  textInputProps,
-  inputRef: providedInputRef,
-  sx,
-  ...listProps
-}: FilteredActionListProps): JSX.Element {
-  const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '')
-  const onInputChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = e.target.value
-      onFilterChange(value, e)
-      setInternalFilterValue(value)
-    },
-    [onFilterChange, setInternalFilterValue]
-  )
-
-  const scrollContainerRef = useRef<HTMLDivElement>(null)
-  const listContainerRef = useRef<HTMLDivElement>(null)
-  const inputRef = useProvidedRefOrCreate<HTMLInputElement>(providedInputRef)
-  const activeDescendantRef = useRef<HTMLElement>()
-  const listId = useSSRSafeId()
-  const onInputKeyPress: KeyboardEventHandler = useCallback(
-    event => {
-      if (event.key === 'Enter' && activeDescendantRef.current) {
-        event.preventDefault()
-        event.nativeEvent.stopImmediatePropagation()
-
-        // Forward Enter key press to active descendant so that item gets activated
-        const activeDescendantEvent = new KeyboardEvent(event.type, event.nativeEvent)
-        activeDescendantRef.current.dispatchEvent(activeDescendantEvent)
-      }
-    },
-    [activeDescendantRef]
-  )
-
-  useFocusZone(
-    {
-      containerRef: listContainerRef,
-      focusOutBehavior: 'wrap',
-      focusableElementFilter: element => {
-        return !(element instanceof HTMLInputElement)
-      },
-      activeDescendantFocus: inputRef,
-      onActiveDescendantChanged: (current, previous, directlyActivated) => {
-        activeDescendantRef.current = current
-
-        if (current && scrollContainerRef.current && directlyActivated) {
-          scrollIntoViewingArea(current, scrollContainerRef.current)
-        }
-      }
-    },
-    [
-      // List ref isn't set while loading.  Need to re-bind focus zone when it changes
-      loading
-    ]
-  )
-
-  useEffect(() => {
-    // if items changed, we want to instantly move active descendant into view
-    if (activeDescendantRef.current && scrollContainerRef.current) {
-      scrollIntoViewingArea(
-        activeDescendantRef.current,
-        scrollContainerRef.current,
-        'vertical',
-        undefined,
-        undefined,
-        'auto'
-      )
-    }
-  }, [items])
-
-  useScrollFlash(scrollContainerRef)
-
-  return (
-    <Box display="flex" flexDirection="column" overflow="hidden" sx={sx}>
-      <StyledHeader>
-        <TextInput
-          ref={inputRef}
-          block
-          width="auto"
-          color="fg.default"
-          value={filterValue}
-          onChange={onInputChange}
-          onKeyPress={onInputKeyPress}
-          placeholder={placeholderText}
-          aria-label={placeholderText}
-          aria-controls={listId}
-          {...textInputProps}
-        />
-      </StyledHeader>
-      <Box ref={scrollContainerRef} overflow="auto">
-        {loading ? (
-          <Box width="100%" display="flex" flexDirection="row" justifyContent="center" pt={6} pb={7}>
-            <Spinner />
-          </Box>
-        ) : (
-          <ActionList ref={listContainerRef} items={items} {...listProps} role="listbox" id={listId} />
-        )}
-      </Box>
-    </Box>
-  )
-}
-
-FilteredActionList.displayName = 'FilteredActionList'

package/src/FilteredActionList/index.ts

@@ -1,2 +0,0 @@
-export {FilteredActionList} from './FilteredActionList'
-export type {FilteredActionListProps} from './FilteredActionList'

package/src/FilteredSearch.tsx

@@ -1,27 +0,0 @@
-import styled from 'styled-components'
-import {get} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const FilteredSearch = styled.div<SxProp>`
-  display: flex;
-  align-items: stretch;
-
-  summary {
-    border-radius: 0;
-    border-top-left-radius: ${get('radii.2')};
-    border-bottom-left-radius: ${get('radii.2')};
-    border-right: 0;
-  }
-  .TextInput-wrapper {
-    border-radius: 0;
-    border-top-right-radius: ${get('radii.2')};
-    border-bottom-right-radius: ${get('radii.2')};
-    z-index: 1; // Allows the focus outline to show on top of the dropdown.
-  }
-
-  ${sx}
-`
-
-export type FilteredSearchProps = ComponentProps<typeof FilteredSearch>
-export default FilteredSearch