@primer/components 29.0.0-rc.f749c85e → 29.1.0

package/src/theme-preval.js

@@ -1,120 +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']
-
-const light = partitionColors(primitives.colors.light)
-const dark = partitionColors(primitives.colors.dark)
-const darkDimmed = partitionColors(primitives.colors['dark_dimmed'])
-
-// This file must be in vanilla JS to work with preval
-// but our temporary filter utils make it impossible for
-// our TypeScript to properly infer const object structure
-// so we need to use JSDoc comments.
-
-/**
- * @type Partial<typeof primitives.colors.light>
- */
-const lightColors = omitScale(light.colors)
-
-/**
- * @type Partial<typeof primitives.colors.light>
- */
-const lightShadows = omitScale(light.shadows)
-
-/**
- * @type Partial<typeof primitives.colors.dark>
- */
-const darkColors = omitScale(dark.colors)
-
-/**
- * @type Partial<typeof primitives.colors.dark>
- */
-const darkShadows = omitScale(dark.shadows)
-
-/**
- * @type Partial<typeof primitives.colors.dark_dimmed>
- */
-const darkDimmedColors = omitScale(darkDimmed.colors)
-
-/**
- * @type Partial<typeof primitives.colors.dark_dimmed>
- */
-const darkDimmedShadows = omitScale(darkDimmed.shadows)
-
-const theme = {
-  // General
-  animation,
-  borderWidths,
-  breakpoints,
-  fonts,
-  fontSizes,
-  fontWeights,
-  lineHeights,
-  radii,
-  sizes,
-  space,
-  colorSchemes: {
-    light: {
-      colors: lightColors,
-      shadows: lightShadows
-    },
-    dark: {
-      colors: darkColors,
-      shadows: darkShadows
-    },
-    dark_dimmed: {
-      colors: darkDimmedColors,
-      shadows: darkDimmedShadows
-    }
-  }
-}
-
-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: () => ''
-    }
-  }
-})