@primer/components 31.0.2-rc.1e80de40 → 31.1.0

package/src/theme-preval.js

@@ -1,79 +0,0 @@
-// @preval
-// This file needs to be a JavaScript file using CommonJS to be compatiable with preval
-
-const {default: primitives} = require('@primer/primitives')
-const {partitionColors, fontStack, omitScale} = require('./utils/theme')
-
-const {lineHeight: lineHeights} = primitives.typography.normal
-
-const animation = {
-  easeOutCubic: 'cubic-bezier(0.33, 1, 0.68, 1)'
-}
-
-const breakpoints = ['544px', '768px', '1012px', '1280px']
-
-const fonts = {
-  normal: fontStack([
-    '-apple-system',
-    'BlinkMacSystemFont',
-    'Segoe UI',
-    'Helvetica',
-    'Arial',
-    'sans-serif',
-    'Apple Color Emoji',
-    'Segoe UI Emoji'
-  ]),
-  mono: fontStack(['SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', 'monospace'])
-}
-
-const fontWeights = {
-  light: 300,
-  normal: 400,
-  semibold: 500,
-  bold: 600
-}
-
-const borderWidths = [0, '1px']
-
-const radii = ['0', '3px', '6px', '100px']
-
-const sizes = {
-  small: '544px',
-  medium: '768px',
-  large: '1012px',
-  xlarge: '1280px'
-}
-
-const fontSizes = ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px']
-
-const space = ['0', '4px', '8px', '16px', '24px', '32px', '40px', '48px', '64px', '80px', '96px', '112px', '128px']
-
-/**
- * @type Record<keyof typeof primitives.colors, Record<'colors' | 'shadows', Partial<typeof primitives.colors.light>>
- */
-const colorSchemes = Object.entries(primitives.colors).reduce((acc, [name, variables]) => {
-  const {colors, shadows} = partitionColors(variables)
-  acc[name] = {
-    colors: omitScale(colors),
-    shadows: omitScale(shadows)
-  }
-  return acc
-}, {})
-
-const theme = {
-  animation,
-  borderWidths,
-  breakpoints,
-  fonts,
-  fontSizes,
-  fontWeights,
-  lineHeights,
-  radii,
-  sizes,
-  space,
-  colorSchemes
-}
-
-module.exports = {
-  theme
-}

package/src/theme.ts

@@ -1,3 +0,0 @@
-import {theme} from './theme-preval'
-
-export default theme

package/src/utils/deprecate.tsx

@@ -1,73 +0,0 @@
-import {useRef, useCallback} from 'react'
-declare let __DEV__: boolean
-
-type DeprecationType = {name: string; message: string; version: string}
-
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {}
-// eslint-disable-next-line import/no-mutable-exports
-let deprecate: ({name, message, version}: DeprecationType) => void | (() => void) = noop
-
-if (__DEV__) {
-  deprecate = ({name, message, version}: DeprecationType) => {
-    Deprecations.deprecate({name, message, version})
-  }
-}
-
-export {deprecate}
-
-// eslint-disable-next-line import/no-mutable-exports
-let useDeprecation = null
-
-if (__DEV__) {
-  useDeprecation = ({name, message, version}: DeprecationType) => {
-    const ref = useRef(false)
-    const logDeprecation = useCallback(() => {
-      if (!ref.current) {
-        ref.current = true
-        deprecate({name, message, version})
-      }
-    }, [name, message, version])
-
-    return logDeprecation
-  }
-} else {
-  useDeprecation = () => {
-    return noop
-  }
-}
-
-export {useDeprecation}
-
-export class Deprecations {
-  static instance: Deprecations | null = null
-  deprecations: Array<DeprecationType>
-
-  static get() {
-    if (!Deprecations.instance) {
-      Deprecations.instance = new Deprecations()
-    }
-
-    return Deprecations.instance
-  }
-
-  constructor() {
-    this.deprecations = []
-  }
-
-  static deprecate({name, message, version}: DeprecationType) {
-    const msg = `WARNING! ${name} is deprecated and will be removed in version ${version}. ${message}`
-    // eslint-disable-next-line no-console
-    console.warn(msg)
-
-    this.get().deprecations.push({name, message, version})
-  }
-
-  static getDeprecations() {
-    return this.get().deprecations
-  }
-
-  static clearDeprecations() {
-    this.get().deprecations.length = 0
-  }
-}

package/src/utils/isNumeric.tsx

@@ -1,4 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default function isNumeric(n: any) {
-  return !isNaN(parseFloat(n)) && isFinite(n)
-}

package/src/utils/iterateFocusableElements.ts

@@ -1,121 +0,0 @@
-/**
- * Options to the focusable elements iterator
- */
-export interface IterateFocusableElements {
-  /**
-   * (Default: false) Iterate through focusable elements in reverse-order
-   */
-  reverse?: boolean
-
-  /**
-   * (Default: false) Perform additional checks to determine tabbability
-   * which may adversely affect app performance.
-   */
-  strict?: boolean
-
-  /**
-   * (Default: false) Only iterate tabbable elements, which is the subset
-   * of focusable elements that are part of the page's tab sequence.
-   */
-  onlyTabbable?: boolean
-}
-
-/**
- * Returns an iterator over all of the focusable elements within `container`.
- * Note: If `container` is itself focusable it will be included in the results.
- * @param container The container over which to find focusable elements.
- * @param reverse If true, iterate backwards through focusable elements.
- */
-export function* iterateFocusableElements(
-  container: HTMLElement,
-  options: IterateFocusableElements = {}
-): Generator<HTMLElement, undefined, undefined> {
-  const strict = options.strict ?? false
-  const acceptFn = options.onlyTabbable ?? false ? isTabbable : isFocusable
-  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
-    acceptNode: node =>
-      node instanceof HTMLElement && acceptFn(node, strict) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
-  })
-  let nextNode: Node | null = null
-
-  // Allow the container to participate
-  if (!options.reverse && acceptFn(container, strict)) {
-    yield container
-  }
-
-  // If iterating in reverse, continue traversing down into the last child until we reach
-  // a leaf DOM node
-  if (options.reverse) {
-    let lastChild = walker.lastChild()
-    while (lastChild) {
-      nextNode = lastChild
-      lastChild = walker.lastChild()
-    }
-  } else {
-    nextNode = walker.firstChild()
-  }
-  while (nextNode instanceof HTMLElement) {
-    yield nextNode
-    nextNode = options.reverse ? walker.previousNode() : walker.nextNode()
-  }
-
-  // Allow the container to participate (in reverse)
-  if (options.reverse && acceptFn(container, strict)) {
-    yield container
-  }
-
-  return undefined
-}
-
-/**
- * Determines whether the given element is focusable. If `strict` is true, we may
- * perform additional checks that require a reflow (less performant).
- * @param elem
- * @param strict
- */
-export function isFocusable(elem: HTMLElement, strict = false): boolean {
-  // Certain conditions cause an element to never be focusable, even if they have tabindex="0"
-  const disabledAttrInert =
-    ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) &&
-    (elem as HTMLElement & {disabled: boolean}).disabled
-  const hiddenInert = elem.hidden
-  const hiddenInputInert = elem instanceof HTMLInputElement && elem.type === 'hidden'
-  if (disabledAttrInert || hiddenInert || hiddenInputInert) {
-    return false
-  }
-
-  // Each of the conditions checked below require a reflow, thus are gated by the `strict`
-  // argument. If any are true, the element is not focusable, even if tabindex is set.
-  if (strict) {
-    const sizeInert = elem.offsetWidth === 0 || elem.offsetHeight === 0
-    const visibilityInert = ['hidden', 'collapse'].includes(getComputedStyle(elem).visibility)
-    const clientRectsInert = elem.getClientRects().length === 0
-    if (sizeInert || visibilityInert || clientRectsInert) {
-      return false
-    }
-  }
-
-  // Any element with `tabindex` explicitly set can be focusable, even if it's set to "-1"
-  if (elem.getAttribute('tabindex') != null) {
-    return true
-  }
-
-  // One last way `elem.tabIndex` can be wrong.
-  if (elem instanceof HTMLAnchorElement && elem.getAttribute('href') == null) {
-    return false
-  }
-
-  return elem.tabIndex !== -1
-}
-
-/**
- * Determines whether the given element is tabbable. If `strict` is true, we may
- * perform additional checks that require a reflow (less performant). This check
- * ensures that the element is focusable and that its tabindex is not explicitly
- * set to "-1" (which makes it focusable, but removes it from the tab order).
- * @param elem
- * @param strict
- */
-export function isTabbable(elem: HTMLElement, strict = false): boolean {
-  return isFocusable(elem, strict) && elem.getAttribute('tabindex') !== '-1'
-}

package/src/utils/ssr.tsx

@@ -1 +0,0 @@
-export {SSRProvider, useSSRSafeId} from '@react-aria/ssr'

package/src/utils/test-deprecations.tsx

@@ -1,19 +0,0 @@
-import semver from 'semver'
-import {Deprecations} from './deprecate'
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const ourVersion = require('../../package.json').version
-
-beforeEach(() => {
-  Deprecations.clearDeprecations()
-})
-
-afterEach(() => {
-  const deprecations = Deprecations.getDeprecations()
-
-  for (const dep of deprecations) {
-    if (semver.gte(ourVersion, dep.version)) {
-      throw new Error(`Found a deprecation that should be removed in ${dep.version}`)
-    }
-  }
-})

package/src/utils/test-helpers.tsx

@@ -1,7 +0,0 @@
-// JSDOM doesn't mock ResizeObserver
-global.ResizeObserver = jest.fn().mockImplementation(() => {
-  return {
-    observe: jest.fn(),
-    disconnect: jest.fn()
-  }
-})

package/src/utils/test-matchers.tsx

@@ -1,109 +0,0 @@
-import 'jest-styled-components'
-import {styleSheetSerializer} from 'jest-styled-components/serializer'
-import React from 'react'
-import {ReactTestRendererJSON, ReactTestRendererNode} from 'react-test-renderer'
-import {getClasses, getComputedStyles, render} from './testing'
-
-expect.addSnapshotSerializer(styleSheetSerializer)
-
-const stringify = (d: Record<string, unknown>) => JSON.stringify(d, null, '  ')
-
-expect.extend({
-  toMatchKeys(obj, values) {
-    return {
-      pass: Object.keys(values).every(key => this.equals(obj[key], values[key])),
-      message: () => `Expected ${stringify(obj)} to have matching keys: ${stringify(values)}`
-    }
-  },
-
-  toHaveClass(node, klass) {
-    const classes = getClasses(node)
-    const pass = classes.includes(klass)
-    return {
-      pass,
-      message: () => `expected ${stringify(classes)} to include: ${stringify(klass)}`
-    }
-  },
-
-  toHaveClasses(node, klasses, only = false) {
-    const classes = getClasses(node)
-    const pass = only
-      ? this.equals(classes.sort(), klasses.sort())
-      : klasses.every((klass: Array<string>) => classes.includes(klass))
-    return {
-      pass,
-      message: () => `expected ${stringify(classes)} to include: ${stringify(klasses)}`
-    }
-  },
-
-  toImplementSxBehavior(element) {
-    const mediaKey = '@media (max-width:123px)'
-    const sxPropValue = {
-      [mediaKey]: {
-        color: 'red.5'
-      }
-    }
-
-    const elem = React.cloneElement(element, {sx: sxPropValue})
-
-    function checkStylesDeep(rendered: ReactTestRendererJSON): boolean {
-      const className = rendered.props.className
-      const styles = getComputedStyles(className)
-      const mediaStyles = styles[mediaKey] as Record<string, string> | null
-      if (mediaStyles && mediaStyles.color) {
-        return true
-      } else if (rendered.children) {
-        return rendered.children.some((child: ReactTestRendererNode) => checkStylesDeep(child as ReactTestRendererJSON))
-      } else {
-        return false
-      }
-    }
-
-    return {
-      pass: checkStylesDeep(render(elem)),
-      message: () => 'sx prop values did not change styles of component nor of any sub-components'
-    }
-  },
-
-  toSetExports(mod, expectedExports) {
-    if (!Object.keys(expectedExports).includes('default')) {
-      return {
-        pass: false,
-        message: () => "You must specify the module's default export"
-      }
-    }
-
-    const seen = new Set()
-    for (const exp of Object.keys(expectedExports)) {
-      seen.add(exp)
-      if (mod[exp] !== expectedExports[exp]) {
-        if (!mod[exp] && !expectedExports[exp]) {
-          continue
-        }
-
-        return {
-          pass: false,
-          message: () => `Module exported a different value from key '${exp}' than expected`
-        }
-      }
-    }
-
-    for (const exp of Object.keys(mod)) {
-      if (seen.has(exp)) {
-        continue
-      }
-
-      if (mod[exp] !== expectedExports[exp]) {
-        return {
-          pass: false,
-          message: () => `Module exported an unexpected value from key '${exp}'`
-        }
-      }
-    }
-
-    return {
-      pass: true,
-      message: () => ''
-    }
-  }
-})

package/src/utils/testing.tsx

@@ -1,242 +0,0 @@
-import React from 'react'
-import {promisify} from 'util'
-import renderer from 'react-test-renderer'
-import enzyme from 'enzyme'
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
-import {ThemeProvider} from '..'
-import {default as defaultTheme} from '../theme'
-
-type ComputedStyles = Record<string, string | Record<string, string>>
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const readFile = promisify(require('fs').readFile)
-
-export const COMPONENT_DISPLAY_NAME_REGEX = /^[A-Z][A-Za-z]+(\.[A-Z][A-Za-z]+)*$/
-
-enzyme.configure({adapter: new Adapter()})
-
-export function mount(component: React.ReactElement) {
-  return enzyme.mount(component)
-}
-
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace jest {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    interface Matchers<R> {
-      toImplementSxBehavior: () => boolean
-      toSetExports: (exports: Record<string, string>) => boolean
-    }
-  }
-}
-
-/**
- * Render the component (a React.createElement() or JSX expression)
- * into its intermediate object representation with 'type',
- * 'props', and 'children' keys
- *
- * The returned object can be matched with expect().toEqual(), e.g.
- *
- * ```js
- * expect(render(<Foo />)).toEqual(render(<div foo='bar' />))
- * ```
- */
-export function render(component: React.ReactElement, theme = defaultTheme) {
-  return renderer
-    .create(<ThemeProvider theme={theme}>{component}</ThemeProvider>)
-    .toJSON() as renderer.ReactTestRendererJSON
-}
-
-/**
- * Render the component (a React.createElement() or JSX expression)
- * using react-test-renderer and return the root node
- * ```
- */
-export function renderRoot(component: React.ReactElement) {
-  return renderer.create(component).root
-}
-
-/**
- * Get the HTML class names rendered by the component instance
- * as an array.
- *
- * ```js
- * expect(renderClasses(<div className='a b' />))
- *   .toEqual(['a', 'b'])
- * ```
- */
-export function renderClasses(component: React.ReactElement): string {
-  const {
-    props: {className}
-  } = render(component)
-  return className ? className.trim().split(' ') : []
-}
-
-/**
- * Returns true if a node renders with a single class.
- */
-export function rendersClass(node: React.ReactElement, klass: string): boolean {
-  return renderClasses(node).includes(klass)
-}
-
-export function px(value: number | string): string {
-  return typeof value === 'number' ? `${value}px` : value
-}
-
-export function percent(value: number | string): string {
-  return typeof value === 'number' ? `${value}%` : value
-}
-
-export function renderStyles(node: React.ReactElement) {
-  const {
-    props: {className}
-  } = render(node)
-  return getComputedStyles(className)
-}
-
-export function getComputedStyles(className: string) {
-  const div = document.createElement('div')
-  div.className = className
-
-  const computed: ComputedStyles = {}
-  for (const sheet of document.styleSheets) {
-    // CSSRulesLists assumes every rule is a CSSRule, not a CSSStyleRule
-    for (const rule of sheet.cssRules) {
-      if (rule instanceof CSSMediaRule) {
-        readMedia(rule)
-      } else if (rule instanceof CSSStyleRule) {
-        readRule(rule, computed)
-      } else {
-        // console.warn('rule.type =', rule.type)
-      }
-    }
-  }
-
-  return computed
-
-  function matchesSafe(node: HTMLDivElement, selector: string) {
-    if (!selector) {
-      return false
-    }
-    try {
-      return node.matches(selector)
-    } catch (error) {
-      return false
-    }
-  }
-
-  function readRule(rule: CSSStyleRule, dest: ComputedStyles) {
-    if (matchesSafe(div, rule.selectorText)) {
-      const {style} = rule
-      for (let i = 0; i < style.length; i++) {
-        const prop = style[i]
-        dest[prop] = style.getPropertyValue(prop)
-      }
-    } else {
-      // console.warn('no match:', rule.selectorText)
-    }
-  }
-
-  function readMedia(mediaRule: CSSMediaRule) {
-    const key = `@media ${mediaRule.media[0]}`
-    // const dest = computed[key] || (computed[key] = {})
-    const dest = {}
-    for (const rule of mediaRule.cssRules) {
-      if (rule instanceof CSSStyleRule) {
-        readRule(rule, dest)
-      }
-    }
-
-    // Don't add media rule to computed styles
-    // if no styles were actually applied
-    if (Object.keys(dest).length > 0) {
-      computed[key] = dest
-    }
-  }
-}
-/**
- * This provides a layer of compatibility between the render() function from
- * react-test-renderer and Enzyme's mount()
- */
-export function getProps(node: React.ReactElement) {
-  return typeof node.props === 'function' ? node.props() : node.props
-}
-
-export function getClassName(node: React.ReactElement) {
-  return getProps(node).className
-}
-
-export function getClasses(node: React.ReactElement) {
-  const className = getClassName(node)
-  return className ? className.trim().split(/ +/) : []
-}
-
-export async function loadCSS(path: string) {
-  const css = await readFile(require.resolve(path), 'utf8')
-  const style = document.createElement('style')
-  style.setAttribute('data-path', path)
-  style.textContent = css
-  document.head.appendChild(style)
-  return style
-}
-
-export function unloadCSS(path: string) {
-  const style = document.querySelector(`style[data-path="${path}"]`)
-  if (style) {
-    style.remove()
-    return true
-  }
-}
-
-// If a component requires certain props or other conditions in order
-// to render without errors, you can pass a `toRender` function that
-// returns an element ready to be rendered.
-
-interface Options {
-  skipAs?: boolean
-  skipSx?: boolean
-}
-
-interface BehavesAsComponent {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  Component: React.ComponentType<any>
-  toRender?: () => React.ReactElement
-  options?: Options
-}
-
-export function behavesAsComponent({Component, toRender, options}: BehavesAsComponent) {
-  options = options || {}
-
-  const getElement = () => (toRender ? toRender() : <Component />)
-
-  if (!options.skipSx) {
-    it('implements sx prop behavior', () => {
-      expect(getElement()).toImplementSxBehavior()
-    })
-  }
-
-  if (!options.skipAs) {
-    it('respects the as prop', () => {
-      const As = React.forwardRef<HTMLDivElement>((_props, ref) => <div className="as-component" ref={ref} />)
-      const elem = React.cloneElement(getElement(), {as: As})
-      expect(render(elem)).toEqual(render(<As />))
-    })
-  }
-
-  it('sets a valid displayName', () => {
-    expect(Component.displayName).toMatch(COMPONENT_DISPLAY_NAME_REGEX)
-  })
-
-  it('renders consistently', () => {
-    expect(render(getElement())).toMatchSnapshot()
-  })
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function checkExports(path: string, exports: Record<any, any>): void {
-  it('has declared exports', () => {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const mod = require(`../${path}`)
-    expect(mod).toSetExports(exports)
-  })
-}