@primer/components 0.0.0-20219421304 → 0.0.0-202194215436

package/lib-esm/theme.js

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

package/lib-esm/utils/deprecate.js

@@ -0,0 +1,91 @@
+import { useRef, useCallback } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {}; // eslint-disable-next-line import/no-mutable-exports
+
+
+let deprecate = noop;
+
+if (process.env.NODE_ENV !== 'production') {
+  deprecate = ({
+    name,
+    message,
+    version
+  }) => {
+    Deprecations.deprecate({
+      name,
+      message,
+      version
+    });
+  };
+}
+
+export { deprecate }; // eslint-disable-next-line import/no-mutable-exports
+
+let useDeprecation = null;
+
+if (process.env.NODE_ENV !== 'production') {
+  useDeprecation = ({
+    name,
+    message,
+    version
+  }) => {
+    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 = null;
+
+  static get() {
+    if (!Deprecations.instance) {
+      Deprecations.instance = new Deprecations();
+    }
+
+    return Deprecations.instance;
+  }
+
+  constructor() {
+    this.deprecations = [];
+  }
+
+  static deprecate({
+    name,
+    message,
+    version
+  }) {
+    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/lib-esm/utils/isNumeric.js

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

package/lib-esm/utils/iterateFocusableElements.js

@@ -0,0 +1,102 @@
+/**
+ * Options to the focusable elements iterator
+ */
+
+/**
+ * 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, options = {}) {
+  var _options$strict, _options$onlyTabbable;
+
+  const strict = (_options$strict = options.strict) !== null && _options$strict !== void 0 ? _options$strict : false;
+  const acceptFn = ((_options$onlyTabbable = options.onlyTabbable) !== null && _options$onlyTabbable !== void 0 ? _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 = 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, strict = false) {
+  // 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.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, strict = false) {
+  return isFocusable(elem, strict) && elem.getAttribute('tabindex') !== '-1';
+}

package/lib-esm/utils/ssr.js

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

package/lib-esm/utils/test-deprecations.js

@@ -0,0 +1,17 @@
+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/lib-esm/utils/test-helpers.js

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

package/lib-esm/utils/test-matchers.js

@@ -0,0 +1,110 @@
+import 'jest-styled-components';
+import { styleSheetSerializer } from 'jest-styled-components/serializer';
+import React from 'react';
+import { getClasses, getComputedStyles, render } from './testing';
+expect.addSnapshotSerializer(styleSheetSerializer);
+
+const stringify = d => 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 => 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 = /*#__PURE__*/React.cloneElement(element, {
+      sx: sxPropValue
+    });
+
+    function checkStylesDeep(rendered) {
+      const className = rendered.props.className;
+      const styles = getComputedStyles(className);
+      const mediaStyles = styles[mediaKey];
+
+      if (mediaStyles && mediaStyles.color) {
+        return true;
+      } else if (rendered.children) {
+        return rendered.children.some(child => checkStylesDeep(child));
+      } 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/lib-esm/utils/testing.js

@@ -0,0 +1,222 @@
+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';
+// 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) {
+  return enzyme.mount(component);
+}
+
+/**
+ * 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, theme = defaultTheme) {
+  return renderer.create( /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, component)).toJSON();
+}
+/**
+ * Render the component (a React.createElement() or JSX expression)
+ * using react-test-renderer and return the root node
+ * ```
+ */
+
+export function renderRoot(component) {
+  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) {
+  const {
+    props: {
+      className
+    }
+  } = render(component);
+  return className ? className.trim().split(' ') : [];
+}
+/**
+ * Returns true if a node renders with a single class.
+ */
+
+export function rendersClass(node, klass) {
+  return renderClasses(node).includes(klass);
+}
+export function px(value) {
+  return typeof value === 'number' ? `${value}px` : value;
+}
+export function percent(value) {
+  return typeof value === 'number' ? `${value}%` : value;
+}
+export function renderStyles(node) {
+  const {
+    props: {
+      className
+    }
+  } = render(node);
+  return getComputedStyles(className);
+}
+export function getComputedStyles(className) {
+  const div = document.createElement('div');
+  div.className = className;
+  const computed = {};
+
+  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, selector) {
+    if (!selector) {
+      return false;
+    }
+
+    try {
+      return node.matches(selector);
+    } catch (error) {
+      return false;
+    }
+  }
+
+  function readRule(rule, dest) {
+    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) {
+    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) {
+  return typeof node.props === 'function' ? node.props() : node.props;
+}
+export function getClassName(node) {
+  return getProps(node).className;
+}
+export function getClasses(node) {
+  const className = getClassName(node);
+  return className ? className.trim().split(/ +/) : [];
+}
+export async function loadCSS(path) {
+  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) {
+  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.
+
+export function behavesAsComponent({
+  Component,
+  toRender,
+  options
+}) {
+  options = options || {};
+
+  const getElement = () => toRender ? toRender() : /*#__PURE__*/React.createElement(Component, null);
+
+  if (!options.skipSx) {
+    it('implements sx prop behavior', () => {
+      expect(getElement()).toImplementSxBehavior();
+    });
+  }
+
+  if (!options.skipAs) {
+    it('respects the as prop', () => {
+      const As = /*#__PURE__*/React.forwardRef((_props, ref) => /*#__PURE__*/React.createElement("div", {
+        className: "as-component",
+        ref: ref
+      }));
+      const elem = /*#__PURE__*/React.cloneElement(getElement(), {
+        as: As
+      });
+      expect(render(elem)).toEqual(render( /*#__PURE__*/React.createElement(As, null)));
+    });
+  }
+
+  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, exports) {
+  it('has declared exports', () => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const mod = require(`../${path}`);
+
+    expect(mod).toSetExports(exports);
+  });
+}

package/lib-esm/utils/theme.js

@@ -0,0 +1,66 @@
+// Utility functions used in theme-preval.js
+// This file needs to be a JavaScript file using CommonJS to be compatiable with preval
+const isEmpty = require('lodash.isempty');
+
+const isObject = require('lodash.isobject');
+
+const chroma = require('chroma-js');
+
+function fontStack(fonts) {
+  return fonts.map(font => font.includes(' ') ? `"${font}"` : font).join(', ');
+} // The following functions are a temporary measure for splitting shadow values out from the colors object.
+// Eventually, we will push these structural changes upstream to primer/primitives so this data manipulation
+// will not be needed.
+
+
+function isShadowValue(value) {
+  return typeof value === 'string' && /(inset\s|)([0-9.]+(\w*)\s){1,4}(rgb[a]?\(.*\)|\w+)/.test(value);
+}
+
+function isColorValue(value) {
+  return chroma.valid(value);
+}
+
+function filterObject(obj, predicate) {
+  if (Array.isArray(obj)) {
+    return obj.filter(predicate);
+  }
+
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    if (isObject(value)) {
+      const result = filterObject(value, predicate); // Don't include empty objects or arrays
+
+      if (!isEmpty(result)) {
+        acc[key] = result;
+      }
+    } else if (predicate(value)) {
+      acc[key] = value;
+    }
+
+    return acc;
+  }, {});
+}
+
+function partitionColors(colors) {
+  return {
+    colors: filterObject(colors, value => isColorValue(value)),
+    shadows: filterObject(colors, value => isShadowValue(value))
+  };
+}
+
+function omitScale(obj) {
+  const {
+    scale,
+    ...rest
+  } = obj;
+  return rest;
+}
+
+module.exports = {
+  fontStack,
+  isShadowValue,
+  isColorValue,
+  filterObject,
+  partitionColors,
+  omitScale
+};

package/lib-esm/utils/types.js

@@ -0,0 +1 @@
+export {};

package/lib-esm/utils/uniqueId.js

@@ -0,0 +1,5 @@
+// Note: uniqueId may be unsafe in SSR contexts if it is used create DOM IDs or otherwise cause a hydration warning. Use useSSRSafeId instead.
+let idSeed = 10000;
+export function uniqueId() {
+  return `__primer_id_${idSeed++}`;
+}

package/lib-esm/utils/userAgent.js

@@ -0,0 +1,8 @@
+let isMac = undefined;
+export function isMacOS() {
+  if (isMac === undefined) {
+    isMac = /^mac/i.test(window.navigator.platform);
+  }
+
+  return isMac;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-20219421304",
+  "version": "0.0.0-202194215436",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -58,7 +58,8 @@
     "classnames": "2.3.1",
     "deepmerge": "4.2.2",
     "focus-visible": "5.2.0",
-    "styled-system": "5.1.5"
+    "styled-system": "5.1.5",
+    "tinycolor2": "1.4.2"
   },
   "devDependencies": {
     "@babel/cli": "7.14.5",
@@ -90,6 +91,7 @@
     "@types/jest-axe": "3.5.3",
     "@types/lodash.isempty": "4.4.6",
     "@types/lodash.isobject": "3.0.6",
+    "@types/tinycolor2": "1.4.3",
     "@typescript-eslint/eslint-plugin": "4.31.2",
     "@typescript-eslint/parser": "4.26.1",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.3",