@primer/components 31.0.0 → 31.0.2-rc.c7dafefb

package/src/TextInputWithTokens.tsx

@@ -0,0 +1,295 @@
+import React, {FocusEventHandler, KeyboardEventHandler, RefObject, useRef, useState} from 'react'
+import {omit} from '@styled-system/props'
+import {FocusKeys} from './behaviors/focusZone'
+import {useCombinedRefs} from './hooks/useCombinedRefs'
+import {useFocusZone} from './hooks/useFocusZone'
+import {ComponentProps} from './utils/types'
+import Token from './Token/Token'
+import {TokenSizeKeys} from './Token/TokenBase'
+import {TextInputProps} from './TextInput'
+import {useProvidedRefOrCreate} from './hooks'
+import UnstyledTextInput from './_UnstyledTextInput'
+import TextInputWrapper from './_TextInputWrapper'
+import Box from './Box'
+import {isFocusable} from './utils/iterateFocusableElements'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyReactComponent = React.ComponentType<any>
+
+// NOTE: if these props or their JSDoc comments are updated, be sure to also update
+// the prop table in docs/content/TextInputTokens.mdx
+type TextInputWithTokensInternalProps<TokenComponentType extends AnyReactComponent> = {
+  /**
+   * The array of tokens to render
+   */
+  tokens: TokenComponentType extends React.ComponentType<infer TokenProps> ? TokenProps[] : never
+  /**
+   * The function that gets called when a token is removed
+   */
+  onTokenRemove: (tokenId: string | number) => void
+  /**
+   * The component used to render each token
+   */
+  tokenComponent?: TokenComponentType
+  /**
+   * The maximum height of the component. If the content in the input exceeds this height,
+   * it will scroll vertically
+   */
+  maxHeight?: React.CSSProperties['maxHeight']
+  /**
+   * Whether tokens should render inline horizontally. By default, tokens wrap to new lines.
+   */
+  preventTokenWrapping?: boolean
+  /**
+   * The size of the tokens
+   */
+  size?: TokenSizeKeys
+  /**
+   * Whether the remove buttons should be rendered in the tokens
+   */
+  hideTokenRemoveButtons?: boolean
+} & TextInputProps
+
+// using forwardRef is important so that other components (ex. Autocomplete) can use the ref
+function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactComponent>(
+  {
+    icon: IconComponent,
+    contrast,
+    className,
+    block,
+    disabled,
+    theme,
+    sx: sxProp,
+    tokens,
+    onTokenRemove,
+    tokenComponent: TokenComponent,
+    preventTokenWrapping,
+    size,
+    hideTokenRemoveButtons,
+    maxHeight,
+    width: widthProp,
+    minWidth: minWidthProp,
+    maxWidth: maxWidthProp,
+    variant: variantProp,
+    ...rest
+  }: TextInputWithTokensInternalProps<TokenComponentType> & {
+    selectedTokenIndex: number | undefined
+    setSelectedTokenIndex: React.Dispatch<React.SetStateAction<number | undefined>>
+  },
+  externalRef: React.ForwardedRef<HTMLInputElement>
+) {
+  const {onFocus, onKeyDown, ...inputPropsRest} = omit(rest)
+  const ref = useProvidedRefOrCreate<HTMLInputElement>(externalRef as React.RefObject<HTMLInputElement>)
+  const localInputRef = useRef<HTMLInputElement>(null)
+  const combinedInputRef = useCombinedRefs(localInputRef, ref)
+  const [selectedTokenIndex, setSelectedTokenIndex] = useState<number | undefined>()
+  const {containerRef} = useFocusZone(
+    {
+      focusOutBehavior: 'wrap',
+      bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+      focusableElementFilter: element => {
+        return !element.getAttributeNames().includes('aria-hidden')
+      },
+      getNextFocusable: direction => {
+        if (!selectedTokenIndex && selectedTokenIndex !== 0) {
+          return undefined
+        }
+
+        let nextIndex = selectedTokenIndex + 1 // "+ 1" accounts for the first element: the text input
+
+        if (direction === 'next') {
+          nextIndex += 1
+        }
+
+        if (direction === 'previous') {
+          nextIndex -= 1
+        }
+
+        if (nextIndex > tokens.length || nextIndex < 1) {
+          return combinedInputRef.current || undefined
+        }
+
+        return containerRef.current?.children[nextIndex] as HTMLElement
+      }
+    },
+    [selectedTokenIndex]
+  )
+
+  const handleTokenRemove = (tokenId: string | number) => {
+    onTokenRemove(tokenId)
+
+    // HACK: wait a tick for the the token node to be removed from the DOM
+    setTimeout(() => {
+      const nextElementToFocus = containerRef.current?.children[selectedTokenIndex || 0] as HTMLElement | undefined
+
+      // when removing the first token by keying "Backspace" or "Delete",
+      // `nextFocusableElement` is the div that wraps the input
+      const firstFocusable =
+        nextElementToFocus && isFocusable(nextElementToFocus)
+          ? nextElementToFocus
+          : (Array.from(containerRef.current?.children || []) as HTMLElement[]).find(el => isFocusable(el))
+
+      if (firstFocusable) {
+        firstFocusable.focus()
+      } else {
+        // if there are no tokens left, focus the input
+        ref.current?.focus()
+      }
+    }, 0)
+  }
+
+  const handleTokenFocus: (tokenIndex: number) => FocusEventHandler = tokenIndex => () => {
+    setSelectedTokenIndex(tokenIndex)
+  }
+
+  const handleTokenBlur: FocusEventHandler = () => {
+    setSelectedTokenIndex(undefined)
+  }
+
+  const handleTokenKeyUp: KeyboardEventHandler = e => {
+    if (e.key === 'Escape') {
+      ref.current?.focus()
+    }
+  }
+
+  const handleInputFocus: FocusEventHandler = e => {
+    onFocus && onFocus(e)
+    setSelectedTokenIndex(undefined)
+  }
+  const handleInputKeyDown: KeyboardEventHandler = e => {
+    if (onKeyDown) {
+      onKeyDown(e)
+    }
+
+    if (ref.current?.value) {
+      return
+    }
+
+    const lastToken = tokens[tokens.length - 1]
+
+    if (e.key === 'Backspace' && lastToken) {
+      handleTokenRemove(lastToken.id)
+
+      if (ref.current) {
+        // TODO: eliminate the first hack by making changes to the Autocomplete component
+        //
+        // HACKS:
+        // 1. Directly setting `ref.current.value` instead of updating state because the autocomplete
+        //    highlight behavior doesn't work correctly if we update the value with a setState action in onChange
+        // 2. Adding an extra space so that when I backspace, it doesn't delete the last letter
+        ref.current.value = `${lastToken.text} `
+      }
+
+      // HACK: for some reason we need to wait a tick for `.select()` to work
+      setTimeout(() => {
+        ref.current?.select()
+      }, 0)
+    }
+  }
+
+  return (
+    <TextInputWrapper
+      block={block}
+      className={className}
+      contrast={contrast}
+      disabled={disabled}
+      hasIcon={!!IconComponent}
+      theme={theme}
+      width={widthProp}
+      minWidth={minWidthProp}
+      maxWidth={maxWidthProp}
+      variant={variantProp}
+      sx={{
+        ...(block
+          ? {
+              display: 'flex',
+              width: '100%'
+            }
+          : {}),
+
+        ...(maxHeight
+          ? {
+              maxHeight,
+              overflow: 'auto'
+            }
+          : {}),
+
+        ...(preventTokenWrapping
+          ? {
+              overflow: 'auto'
+            }
+          : {}),
+
+        ...sxProp
+      }}
+    >
+      <Box
+        ref={containerRef as RefObject<HTMLDivElement>}
+        display="flex"
+        sx={{
+          alignItems: 'center',
+          flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
+          marginLeft: '-0.25rem',
+          marginBottom: '-0.25rem',
+          flexGrow: 1,
+
+          '> *': {
+            flexShrink: 0,
+            marginLeft: '0.25rem',
+            marginBottom: '0.25rem'
+          }
+        }}
+      >
+        <Box
+          sx={{
+            order: 1,
+            flexGrow: 1
+          }}
+        >
+          {IconComponent && <IconComponent className="TextInput-icon" />}
+          <UnstyledTextInput
+            ref={combinedInputRef}
+            disabled={disabled}
+            onFocus={handleInputFocus}
+            onKeyDown={handleInputKeyDown}
+            type="text"
+            sx={{height: '100%'}}
+            {...inputPropsRest}
+          />
+        </Box>
+        {tokens.length && TokenComponent
+          ? tokens.map(({id, ...tokenRest}, i) => (
+              <TokenComponent
+                key={id}
+                onFocus={handleTokenFocus(i)}
+                onBlur={handleTokenBlur}
+                onKeyUp={handleTokenKeyUp}
+                isSelected={selectedTokenIndex === i}
+                onRemove={() => {
+                  handleTokenRemove(id)
+                }}
+                hideRemoveButton={hideTokenRemoveButtons}
+                size={size}
+                tabIndex={0}
+                {...tokenRest}
+              />
+            ))
+          : null}
+      </Box>
+    </TextInputWrapper>
+  )
+}
+
+const TextInputWithTokens = React.forwardRef(TextInputWithTokensInnerComponent)
+
+TextInputWithTokens.defaultProps = {
+  tokenComponent: Token,
+  size: 'extralarge',
+  hideTokenRemoveButtons: false,
+  preventTokenWrapping: false
+}
+
+TextInputWithTokens.displayName = 'TextInputWithTokens'
+
+export type TextInputWithTokensProps = ComponentProps<typeof TextInputWithTokens>
+export default TextInputWithTokens

package/src/ThemeProvider.tsx

@@ -0,0 +1,176 @@
+import React from 'react'
+import {ThemeProvider as SCThemeProvider} from 'styled-components'
+import defaultTheme from './theme'
+import deepmerge from 'deepmerge'
+
+const defaultColorMode = 'day'
+const defaultDayScheme = 'light'
+const defaultNightScheme = 'dark'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Theme = {[key: string]: any}
+type ColorMode = 'day' | 'night'
+type ColorModeWithAuto = ColorMode | 'auto'
+
+export type ThemeProviderProps = {
+  theme?: Theme
+  colorMode?: ColorModeWithAuto
+  dayScheme?: string
+  nightScheme?: string
+}
+
+const ThemeContext = React.createContext<{
+  theme?: Theme
+  colorScheme?: string
+  colorMode?: ColorModeWithAuto
+  resolvedColorMode?: ColorMode
+  dayScheme?: string
+  nightScheme?: string
+  setColorMode: React.Dispatch<React.SetStateAction<ColorModeWithAuto>>
+  setDayScheme: React.Dispatch<React.SetStateAction<string>>
+  setNightScheme: React.Dispatch<React.SetStateAction<string>>
+}>({
+  setColorMode: () => null,
+  setDayScheme: () => null,
+  setNightScheme: () => null
+})
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}) => {
+  // Get fallback values from parent ThemeProvider (if exists)
+  const {
+    theme: fallbackTheme,
+    colorMode: fallbackColorMode,
+    dayScheme: fallbackDayScheme,
+    nightScheme: fallbackNightScheme
+  } = useTheme()
+
+  // Initialize state
+  const theme = props.theme ?? fallbackTheme ?? defaultTheme
+  const [colorMode, setColorMode] = React.useState(props.colorMode ?? fallbackColorMode ?? defaultColorMode)
+  const [dayScheme, setDayScheme] = React.useState(props.dayScheme ?? fallbackDayScheme ?? defaultDayScheme)
+  const [nightScheme, setNightScheme] = React.useState(props.nightScheme ?? fallbackNightScheme ?? defaultNightScheme)
+  const systemColorMode = useSystemColorMode()
+  const resolvedColorMode = resolveColorMode(colorMode, systemColorMode)
+  const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme)
+  const resolvedTheme = React.useMemo(() => applyColorScheme(theme, colorScheme), [theme, colorScheme])
+
+  // Update state if props change
+  React.useEffect(() => {
+    setColorMode(props.colorMode ?? fallbackColorMode ?? defaultColorMode)
+  }, [props.colorMode, fallbackColorMode])
+
+  React.useEffect(() => {
+    setDayScheme(props.dayScheme ?? fallbackDayScheme ?? defaultDayScheme)
+  }, [props.dayScheme, fallbackDayScheme])
+
+  React.useEffect(() => {
+    setNightScheme(props.nightScheme ?? fallbackNightScheme ?? defaultNightScheme)
+  }, [props.nightScheme, fallbackNightScheme])
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        theme: resolvedTheme,
+        colorScheme,
+        colorMode,
+        resolvedColorMode,
+        dayScheme,
+        nightScheme,
+        setColorMode,
+        setDayScheme,
+        setNightScheme
+      }}
+    >
+      <SCThemeProvider theme={resolvedTheme}>{children}</SCThemeProvider>
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme() {
+  return React.useContext(ThemeContext)
+}
+
+export function useColorSchemeVar(values: Partial<Record<string, string>>, fallback: string) {
+  const {colorScheme = ''} = useTheme()
+  return values[colorScheme] ?? fallback
+}
+
+function useSystemColorMode() {
+  const [systemColorMode, setSystemColorMode] = React.useState(getSystemColorMode)
+
+  React.useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const media = window?.matchMedia?.('(prefers-color-scheme: dark)')
+
+    function handleChange(event: MediaQueryListEvent) {
+      const isNight = event.matches
+      setSystemColorMode(isNight ? 'night' : 'day')
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (media) {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (media.addEventListener !== undefined) {
+        media.addEventListener('change', handleChange)
+        return function cleanup() {
+          media.removeEventListener('change', handleChange)
+        }
+      }
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      else if (media.addListener !== undefined) {
+        media.addListener(handleChange)
+        return function cleanup() {
+          media.removeListener(handleChange)
+        }
+      }
+    }
+  }, [])
+
+  return systemColorMode
+}
+
+function getSystemColorMode(): ColorMode {
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)')?.matches) {
+    return 'night'
+  }
+
+  return 'day'
+}
+
+function resolveColorMode(colorMode: ColorModeWithAuto, systemColorMode: ColorMode) {
+  switch (colorMode) {
+    case 'auto':
+      return systemColorMode
+    default:
+      return colorMode
+  }
+}
+
+function chooseColorScheme(colorMode: ColorMode, dayScheme: string, nightScheme: string) {
+  switch (colorMode) {
+    case 'day':
+      return dayScheme
+    case 'night':
+      return nightScheme
+  }
+}
+
+function applyColorScheme(theme: Theme, colorScheme: string) {
+  if (!theme.colorSchemes) {
+    return theme
+  }
+
+  if (!theme.colorSchemes[colorScheme]) {
+    // eslint-disable-next-line no-console
+    console.error(`\`${colorScheme}\` scheme not defined in \`theme.colorSchemes\``)
+
+    // Apply the first defined color scheme
+    const defaultColorScheme = Object.keys(theme.colorSchemes)[0]
+    return deepmerge(theme, theme.colorSchemes[defaultColorScheme])
+  }
+
+  return deepmerge(theme, theme.colorSchemes[colorScheme])
+}
+
+export default ThemeProvider

package/src/Timeline.tsx

@@ -0,0 +1,141 @@
+import classnames from 'classnames'
+import React from 'react'
+import styled, {css} from 'styled-components'
+import Box, {BoxProps} from './Box'
+import {COMMON, get} from './constants'
+import sx from './sx'
+import {ComponentProps} from './utils/types'
+
+const Timeline = styled(Box)<{clipSidebar?: boolean}>`
+  display: flex;
+  flex-direction: column;
+  ${props =>
+    props.clipSidebar &&
+    css`
+      .Timeline-Item:first-child {
+        padding-top: 0;
+      }
+
+      .Timeline-Item:last-child {
+        padding-bottom: 0;
+      }
+    `}
+
+  ${sx};
+`
+
+type StyledTimelineItemProps = {condensed?: boolean}
+
+const TimelineItem = styled(Box).attrs<StyledTimelineItemProps>(props => ({
+  className: classnames('Timeline-Item', props.className)
+}))<StyledTimelineItemProps>`
+  display: flex;
+  position: relative;
+  padding: ${get('space.3')} 0;
+  margin-left: ${get('space.3')};
+
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    width: 2px;
+    content: '';
+    background-color: ${get('colors.border.muted')};
+  }
+
+  ${props =>
+    props.condensed &&
+    css`
+      padding-top: ${get('space.1')};
+      padding-bottom: 0;
+      &:last-child {
+        padding-bottom: ${get('space.3')};
+      }
+
+      .TimelineItem-Badge {
+        height: 16px;
+        margin-top: ${get('space.2')};
+        margin-bottom: ${get('space.2')};
+        color: ${get('colors.fg.muted')};
+        background-color: ${get('colors.canvas.default')};
+        border: 0;
+      }
+    `}
+
+  ${COMMON};
+  ${sx};
+`
+
+export type TimelineBadgeProps = BoxProps
+
+const TimelineBadge = (props: TimelineBadgeProps) => {
+  return (
+    <Box position="relative" zIndex={1}>
+      <Box
+        display="flex"
+        className={classnames(props.className, 'TimelineItem-Badge')}
+        flexShrink={0}
+        borderRadius="50%"
+        borderWidth="2px"
+        borderStyle="solid"
+        borderColor="canvas.default"
+        overflow="hidden"
+        color="fg.muted"
+        bg="timeline.badgeBg"
+        width="32px"
+        height="32px"
+        mr={2}
+        ml="-15px"
+        alignItems="center"
+        justifyContent="center"
+        {...props}
+      >
+        {props.children}
+      </Box>
+    </Box>
+  )
+}
+
+const TimelineBody = styled(Box)`
+  min-width: 0;
+  max-width: 100%;
+  margin-top: ${get('space.1')};
+  color: ${get('colors.fg.muted')};
+  flex: auto;
+  font-size: ${get('fontSizes.1')};
+  ${sx};
+`
+
+const TimelineBreak = styled(Box)`
+  position: relative
+  z-index: 1;
+  height: 24px;
+  margin: 0;
+  margin-bottom: -${get('space.3')};
+  margin-left: 0;
+  background-color: ${get('colors.canvas.default')};
+  border: 0;
+  border-top: ${get('space.1')} solid ${get('colors.border.default')};
+  ${sx};
+`
+
+TimelineItem.displayName = 'Timeline.Item'
+
+TimelineBadge.displayName = 'Timeline.Badge'
+
+TimelineBody.displayName = 'Timeline.Body'
+
+TimelineBreak.displayName = 'Timeline.Break'
+
+export type TimelineProps = ComponentProps<typeof Timeline>
+export type TimelineItemsProps = ComponentProps<typeof TimelineItem>
+export type TimelineBodyProps = ComponentProps<typeof TimelineBody>
+export type TimelineBreakProps = ComponentProps<typeof TimelineBreak>
+export default Object.assign(Timeline, {
+  Item: TimelineItem,
+  Badge: TimelineBadge,
+  Body: TimelineBody,
+  Break: TimelineBreak
+})

package/src/Token/AvatarToken.tsx

@@ -0,0 +1,54 @@
+import React, {forwardRef} from 'react'
+import styled from 'styled-components'
+import {get} from '../constants'
+import {TokenBaseProps, defaultTokenSize, tokenSizes, TokenSizeKeys} from './TokenBase'
+import Token from './Token'
+import {Avatar} from '..'
+
+export interface AvatarTokenProps extends TokenBaseProps {
+  avatarSrc: string
+}
+
+const AvatarContainer = styled.span<{avatarSize: TokenSizeKeys}>`
+  // 'space.1' is used because to match space from the left of the token to the left of the avatar
+  // '* 2' is done to account for the top and bottom
+  --spacing: calc(${get('space.1')} * 2);
+
+  display: block;
+  height: ${props => `calc(${tokenSizes[props.avatarSize]} - var(--spacing))`};
+  width: ${props => `calc(${tokenSizes[props.avatarSize]} - var(--spacing))`};
+`
+
+const AvatarToken = forwardRef<HTMLElement, AvatarTokenProps>(({avatarSrc, id, size, ...rest}, forwardedRef) => {
+  return (
+    <Token
+      leadingVisual={() => (
+        <AvatarContainer avatarSize={size || defaultTokenSize}>
+          <Avatar
+            src={avatarSrc}
+            size={parseInt(tokenSizes[size || defaultTokenSize], 10)}
+            sx={{
+              width: '100%',
+              height: '100%'
+            }}
+          />
+        </AvatarContainer>
+      )}
+      size={size}
+      id={id?.toString()}
+      sx={{
+        paddingLeft: get('space.1')
+      }}
+      {...rest}
+      ref={forwardedRef}
+    />
+  )
+})
+
+AvatarToken.defaultProps = {
+  size: defaultTokenSize
+}
+
+AvatarToken.displayName = 'AvatarToken'
+
+export default AvatarToken