@primer/components 33.1.0-rc.6856bcf5 → 33.1.0

package/src/theme-preval.js

@@ -1,80 +0,0 @@
-// @preval
-// This file needs to be a JavaScript file using CommonJS to be compatiable with preval
-// Cache bust: 2021-11-04 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
-
-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,89 +0,0 @@
-import {theme} from './theme-preval'
-import {KeyPaths} from './utils/types/KeyPaths'
-
-export default theme
-
-// NOTE: for now, ThemeColors and ThemeShadows are handcrafted types. It would be nice if these
-// were exports from primitives (or a different shape but derived from those exports).
-
-type ThemeColors = {
-  fg: {
-    default: string
-    muted: string
-    subtle: string
-    onEmphasis: string
-  }
-  canvas: {
-    default: string
-    overlay: string
-    inset: string
-    subtle: string
-  }
-  border: {
-    default: string
-    muted: string
-    subtle: string
-  }
-
-  // Roles
-  neutral: {
-    emphasisPlus: string
-    emphasis: string
-    muted: string
-    subtle: string
-  }
-  accent: {
-    fg: string
-    emphasis: string
-    muted: string
-    subtle: string
-  }
-  success: {
-    fg: string
-    emphasis: string
-    muted: string
-    subtle: string
-  }
-  attention: {
-    fg: string
-    emphasis: string
-    muted: string
-    subtle: string
-  }
-  severe: {
-    fg: string
-    emphasis: string
-    muted: string
-    subtle: string
-  }
-  danger: {
-    fg: string
-    emphasis: string
-    muted: string
-    subtle: string
-  }
-  done: {
-    fg: string
-    emphasis: string
-    muted: string
-    subtle: string
-  }
-  sponsors: {
-    fg: string
-    emphasis: string
-    muted: string
-    subtle: string
-  }
-}
-
-type ThemeShadows = {
-  shadow: {
-    small: string
-    medium: string
-    large: string
-    extraLarge: string
-  }
-}
-
-export type ThemeColorPaths = KeyPaths<ThemeColors>
-export type ThemeShadowPaths = KeyPaths<ThemeShadows>

package/src/utils/create-slots.tsx

@@ -1,96 +0,0 @@
-import React from 'react'
-import {useForceUpdate} from './use-force-update'
-
-/** createSlots is a factory that can create a
- *  typesafe Slots + Slot pair to use in a component definition
- *  For example: ActionList.Item uses createSlots to get a Slots wrapper
- *  + Slot component that is used by LeadingVisual, Description
- */
-const createSlots = <SlotNames extends string>(slotNames: SlotNames[]) => {
-  type Slots = {
-    [key in SlotNames]?: React.ReactNode
-  }
-
-  type ContextProps = {
-    registerSlot: (name: SlotNames, contents: React.ReactNode) => void
-    unregisterSlot: (name: SlotNames) => void
-    context: Record<string, unknown>
-  }
-  const SlotsContext = React.createContext<ContextProps>({
-    registerSlot: () => null,
-    unregisterSlot: () => null,
-    context: {}
-  })
-
-  /** Slots uses a Double render strategy inspired by [reach-ui/descendants](https://github.com/reach/reach-ui/tree/develop/packages/descendants)
-   *  Slot registers themself with the Slots parent.
-   *  When all the children have mounted = registered themselves in slot,
-   *  we re-render the parent component to render with slots
-   */
-  const Slots: React.FC<{
-    context?: ContextProps['context']
-    children: (slots: Slots) => React.ReactNode
-  }> = ({context = {}, children}) => {
-    // initialise slots
-    const slotsDefinition: Slots = {}
-    slotNames.map(name => (slotsDefinition[name] = null))
-    const slotsRef = React.useRef<Slots>(slotsDefinition)
-
-    const rerenderWithSlots = useForceUpdate()
-    const [isMounted, setIsMounted] = React.useState(false)
-
-    // fires after all the effects in children
-    React.useEffect(() => {
-      rerenderWithSlots()
-      setIsMounted(true)
-    }, [rerenderWithSlots])
-
-    const registerSlot = React.useCallback(
-      (name: SlotNames, contents: React.ReactNode) => {
-        slotsRef.current[name] = contents
-
-        // don't render until the component mounts = all slots are registered
-        if (isMounted) rerenderWithSlots()
-      },
-      [isMounted, rerenderWithSlots]
-    )
-
-    // Slot can be removed from the tree as well,
-    // we need to unregister them from the slot
-    const unregisterSlot = React.useCallback(
-      (name: SlotNames) => {
-        slotsRef.current[name] = null
-        rerenderWithSlots()
-      },
-      [rerenderWithSlots]
-    )
-
-    /**
-     * Slots uses a render prop API so abstract the
-     * implementation detail of using a context provider.
-     */
-    const slots = slotsRef.current
-
-    return (
-      <SlotsContext.Provider value={{registerSlot, unregisterSlot, context}}>{children(slots)}</SlotsContext.Provider>
-    )
-  }
-
-  const Slot: React.FC<{
-    name: SlotNames
-    children: React.ReactNode
-  }> = ({name, children}) => {
-    const {registerSlot, unregisterSlot, context} = React.useContext(SlotsContext)
-
-    React.useEffect(() => {
-      registerSlot(name, typeof children === 'function' ? children(context) : children)
-      return () => unregisterSlot(name)
-    }, [name, children, registerSlot, unregisterSlot, context])
-
-    return null
-  }
-
-  return {Slots, Slot}
-}
-
-export default createSlots

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: () => ''
-    }
-  }
-})