@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/src/Dropdown.tsx

@@ -0,0 +1,158 @@
+import React from 'react'
+import styled from 'styled-components'
+import Button, {ButtonProps} from './Button'
+import {COMMON, get, SystemCommonProps} 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<SystemCommonProps & 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;
+  ${COMMON};
+  ${sx};
+`
+
+type StyledDropdownMenuProps = {
+  direction?: 'ne' | 'e' | 'se' | 's' | 'sw' | 'w'
+} & SystemCommonProps &
+  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) : '')};
+  ${COMMON};
+  ${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;
+  }
+  ${COMMON};
+  ${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

@@ -0,0 +1,15 @@
+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} ml={1} />
+    </Button>
+  )
+)

package/src/DropdownMenu/DropdownMenu.tsx

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

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

package/src/DropdownStyles.ts

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

@@ -0,0 +1,81 @@
+import React from 'react'
+import styled from 'styled-components'
+import {COMMON, get, SystemCommonProps} from './constants'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+const FilterListBase = styled.ul<SystemCommonProps & SxProp>`
+  list-style-type: none;
+  ${COMMON};
+  ${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
+} & SystemCommonProps &
+  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')};
+  }
+  ${COMMON};
+  ${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>
+  )
+}
+
+FilterList.defaultProps = {
+  m: 0,
+  p: 0
+}
+
+FilterListItem.displayName = 'FilterList.Item'
+
+export default Object.assign(FilterList, {Item: FilterListItem})

package/src/FilteredActionList/FilteredActionList.tsx

@@ -0,0 +1,152 @@
+import React, {KeyboardEventHandler, useCallback, useEffect, useRef} from 'react'
+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 {useSSRSafeId} from '@react-aria/ssr'
+
+export interface FilteredActionListProps extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>, ListPropsBase {
+  loading?: boolean
+  placeholderText: string
+  filterValue?: string
+  onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void
+  textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>
+  inputRef?: React.RefObject<HTMLInputElement>
+}
+
+function scrollIntoViewingArea(
+  child: HTMLElement,
+  container: HTMLElement,
+  margin = 8,
+  behavior: ScrollBehavior = 'smooth'
+) {
+  const {top: childTop, bottom: childBottom} = child.getBoundingClientRect()
+  const {top: containerTop, bottom: containerBottom} = container.getBoundingClientRect()
+
+  const isChildTopAboveViewingArea = childTop < containerTop + margin
+  const isChildBottomBelowViewingArea = childBottom > containerBottom - margin
+
+  if (isChildTopAboveViewingArea) {
+    const scrollHeightToChildTop = childTop - containerTop + container.scrollTop
+    container.scrollTo({behavior, top: scrollHeightToChildTop - margin})
+  } else if (isChildBottomBelowViewingArea) {
+    const scrollHeightToChildBottom = childBottom - containerBottom + container.scrollTop
+    container.scrollTo({behavior, top: scrollHeightToChildBottom + margin})
+  }
+
+  // either completely in view or outside viewing area on both ends, don't scroll
+}
+
+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,
+  ...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, undefined, 'auto')
+    }
+  }, [items])
+
+  useScrollFlash(scrollContainerRef)
+
+  return (
+    <Box display="flex" flexDirection="column" overflow="hidden">
+      <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

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

package/src/FilteredSearch.tsx

@@ -0,0 +1,28 @@
+import styled from 'styled-components'
+import {COMMON, get, SystemCommonProps} from './constants'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+const FilteredSearch = styled.div<SystemCommonProps & SxProp>`
+  ${COMMON};
+  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