@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/src/theme-preval.js

@@ -0,0 +1,136 @@
+// @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'])
+const darkHighContrast = partitionColors(primitives.colors['dark_high_contrast'])
+
+// 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)
+
+/**
+ * @type Partial<typeof primitives.colors.dark_dimmed>
+ */
+const darkHighContrastColors = omitScale(darkHighContrast.colors)
+
+/**
+ * @type Partial<typeof primitives.colors.dark_high_contrast>
+ */
+const darkHighContrastShadows = omitScale(darkHighContrast.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
+    },
+    // eslint-disable-next-line camelcase
+    dark_high_contrast: {
+      colors: darkHighContrastColors,
+      shadows: darkHighContrastShadows
+    }
+  }
+}
+
+module.exports = {
+  theme
+}

package/src/theme.ts

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

package/src/utils/deprecate.tsx

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

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

@@ -0,0 +1,121 @@
+/**
+ * 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

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

package/src/utils/test-deprecations.tsx

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

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

package/src/utils/test-matchers.tsx

@@ -0,0 +1,109 @@
+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: () => ''
+    }
+  }
+})