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

package/src/TabNav.tsx

@@ -1,77 +0,0 @@
-import classnames from 'classnames'
-// eslint-disable-next-line import/no-namespace
-import * as History from 'history'
-import React from 'react'
-import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps, SystemTypographyProps} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const ITEM_CLASS = 'TabNav-item'
-const SELECTED_CLASS = 'selected'
-
-const TabNavBase = styled.div<SystemCommonProps & SxProp>`
-  margin-top: 0;
-  border-bottom: 1px solid ${get('colors.border.default')};
-  ${COMMON}
-  ${sx}
-`
-
-const TabNavBody = styled.nav`
-  display: flex;
-  margin-bottom: -1px;
-  overflow: auto;
-`
-
-export type TabNavProps = ComponentProps<typeof TabNavBase>
-
-function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
-  return (
-    <TabNavBase {...rest}>
-      <TabNavBody aria-label={ariaLabel}>{children}</TabNavBody>
-    </TabNavBase>
-  )
-}
-
-type StyledTabNavLinkProps = {
-  to?: History.LocationDescriptor
-  selected?: boolean
-} & SystemCommonProps &
-  SxProp &
-  SystemTypographyProps
-
-const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
-  activeClassName: typeof props.to === 'string' ? 'selected' : '',
-  className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
-}))<StyledTabNavLinkProps>`
-  padding: 8px 12px;
-  font-size: ${get('fontSizes.1')};
-  line-height: 20px;
-  color: ${get('colors.fg.default')};
-  text-decoration: none;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-bottom: 0;
-
-  &:hover,
-  &:focus {
-    color: ${get('colors.fg.default')};
-    text-decoration: none;
-  }
-
-  &.selected {
-    color: ${get('colors.fg.default')};
-    border-color: ${get('colors.border.default')};
-    border-top-right-radius: ${get('radii.2')};
-    border-top-left-radius: ${get('radii.2')};
-    background-color: ${get('colors.canvas.default')};
-  }
-
-  ${COMMON};
-  ${sx};
-`
-
-TabNavLink.displayName = 'TabNav.Link'
-
-export type TabNavLinkProps = ComponentProps<typeof TabNavLink>
-export default Object.assign(TabNav, {Link: TabNavLink})

package/src/Text.tsx

@@ -1,13 +0,0 @@
-import styled from 'styled-components'
-import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-const Text = styled.span<SystemTypographyProps & SystemCommonProps & SxProp>`
-  ${TYPOGRAPHY};
-  ${COMMON};
-  ${sx};
-`
-
-export type TextProps = ComponentProps<typeof Text>
-export default Text

package/src/TextInput.tsx

@@ -1,68 +0,0 @@
-import classnames from 'classnames'
-import React from 'react'
-import {ComponentProps, Merge} from './utils/types'
-import UnstyledTextInput from './_UnstyledTextInput'
-import TextInputWrapper from './_TextInputWrapper'
-
-type NonPassthroughProps = {
-  className?: string
-  icon?: React.ComponentType<{className?: string}>
-} & Pick<
-  ComponentProps<typeof TextInputWrapper>,
-  'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'
->
-
-// Note: using ComponentProps instead of ComponentPropsWithoutRef here would cause a type issue where `css` is a required prop.
-type TextInputInternalProps = Merge<React.ComponentPropsWithoutRef<typeof UnstyledTextInput>, NonPassthroughProps>
-
-// using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
-const TextInput = React.forwardRef<HTMLInputElement, TextInputInternalProps>(
-  (
-    {
-      icon: IconComponent,
-      block,
-      className,
-      contrast,
-      disabled,
-      sx: sxProp,
-      theme,
-      width: widthProp,
-      minWidth: minWidthProp,
-      maxWidth: maxWidthProp,
-      variant: variantProp,
-      ...inputProps
-    },
-    ref
-  ) => {
-    // this class is necessary to style FilterSearch, plz no touchy!
-    const wrapperClasses = classnames(className, 'TextInput-wrapper')
-
-    return (
-      <TextInputWrapper
-        block={block}
-        className={wrapperClasses}
-        contrast={contrast}
-        disabled={disabled}
-        hasIcon={!!IconComponent}
-        sx={sxProp}
-        theme={theme}
-        width={widthProp}
-        minWidth={minWidthProp}
-        maxWidth={maxWidthProp}
-        variant={variantProp}
-      >
-        {IconComponent && <IconComponent className="TextInput-icon" />}
-        <UnstyledTextInput ref={ref} disabled={disabled} {...inputProps} />
-      </TextInputWrapper>
-    )
-  }
-)
-
-TextInput.defaultProps = {
-  type: 'text'
-}
-
-TextInput.displayName = 'TextInput'
-
-export type TextInputProps = ComponentProps<typeof TextInput>
-export default TextInput

package/src/TextInputWithTokens.tsx

@@ -1,351 +0,0 @@
-import React, {FocusEventHandler, KeyboardEventHandler, MouseEventHandler, 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 Text from './Text'
-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
-  /**
-   * The number of tokens to display before truncating
-   */
-  visibleTokenCount?: number
-} & TextInputProps
-
-const overflowCountFontSizeMap: Record<TokenSizeKeys, number> = {
-  small: 0,
-  medium: 1,
-  large: 1,
-  extralarge: 2
-}
-
-// 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,
-    visibleTokenCount,
-    ...rest
-  }: TextInputWithTokensInternalProps<TokenComponentType> & {
-    selectedTokenIndex: number | undefined
-    setSelectedTokenIndex: React.Dispatch<React.SetStateAction<number | undefined>>
-  },
-  externalRef: React.ForwardedRef<HTMLInputElement>
-) {
-  const {onBlur, 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 [tokensAreTruncated, setTokensAreTruncated] = useState<boolean>(Boolean(visibleTokenCount))
-  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)
-
-    // HACK: wait a tick and check the focused element before hiding truncated tokens
-    // this prevents the tokens from hiding when the user is moving focus between tokens,
-    // but still hides the tokens when the user blurs the token by tabbing out or clicking somewhere else on the page
-    setTimeout(() => {
-      if (!containerRef.current?.contains(document.activeElement) && visibleTokenCount) {
-        setTokensAreTruncated(true)
-      }
-    }, 0)
-  }
-
-  const handleTokenKeyUp: KeyboardEventHandler = event => {
-    if (event.key === 'Escape') {
-      ref.current?.focus()
-    }
-  }
-
-  const handleInputFocus: FocusEventHandler = event => {
-    onFocus && onFocus(event)
-    setSelectedTokenIndex(undefined)
-    visibleTokenCount && setTokensAreTruncated(false)
-  }
-
-  const handleInputBlur: FocusEventHandler = event => {
-    onBlur && onBlur(event)
-
-    // HACK: wait a tick and check the focused element before hiding truncated tokens
-    // this prevents the tokens from hiding when the user is moving focus from the input to a token,
-    // but still hides the tokens when the user blurs the input by tabbing out or clicking somewhere else on the page
-    setTimeout(() => {
-      if (!containerRef.current?.contains(document.activeElement) && visibleTokenCount) {
-        setTokensAreTruncated(true)
-      }
-    }, 0)
-  }
-
-  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)
-    }
-  }
-
-  const focusInput: MouseEventHandler = () => {
-    combinedInputRef.current?.focus()
-  }
-
-  const preventTokenClickPropagation: MouseEventHandler = event => {
-    event.stopPropagation()
-  }
-
-  const visibleTokens = tokensAreTruncated ? tokens.slice(0, visibleTokenCount) : tokens
-
-  return (
-    <TextInputWrapper
-      block={block}
-      className={className}
-      contrast={contrast}
-      disabled={disabled}
-      hasIcon={!!IconComponent}
-      theme={theme}
-      width={widthProp}
-      minWidth={minWidthProp}
-      maxWidth={maxWidthProp}
-      variant={variantProp}
-      onClick={focusInput}
-      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}
-            onBlur={handleInputBlur}
-            onKeyDown={handleInputKeyDown}
-            type="text"
-            sx={{height: '100%'}}
-            {...inputPropsRest}
-          />
-        </Box>
-        {TokenComponent
-          ? visibleTokens.map(({id, ...tokenRest}, i) => (
-              <TokenComponent
-                key={id}
-                onFocus={handleTokenFocus(i)}
-                onBlur={handleTokenBlur}
-                onKeyUp={handleTokenKeyUp}
-                onClick={preventTokenClickPropagation}
-                isSelected={selectedTokenIndex === i}
-                onRemove={() => {
-                  handleTokenRemove(id)
-                }}
-                hideRemoveButton={hideTokenRemoveButtons}
-                size={size}
-                tabIndex={0}
-                {...tokenRest}
-              />
-            ))
-          : null}
-        {tokensAreTruncated ? (
-          <Text color="fg.muted" fontSize={size && overflowCountFontSizeMap[size]}>
-            +{tokens.length - visibleTokens.length}
-          </Text>
-        ) : 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

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