@primer/components 0.0.0-20219421304 → 0.0.0-202194215436

package/lib/theme.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _themePreval = require("./theme-preval");
+
+var _default = _themePreval.theme;
+exports.default = _default;

package/lib/utils/deprecate.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Deprecations = exports.useDeprecation = exports.deprecate = void 0;
+
+var _react = require("react");
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {}; // eslint-disable-next-line import/no-mutable-exports
+
+
+let deprecate = noop;
+exports.deprecate = deprecate;
+
+if (process.env.NODE_ENV !== 'production') {
+  exports.deprecate = deprecate = ({
+    name,
+    message,
+    version
+  }) => {
+    Deprecations.deprecate({
+      name,
+      message,
+      version
+    });
+  };
+}
+
+// eslint-disable-next-line import/no-mutable-exports
+let useDeprecation = null;
+exports.useDeprecation = useDeprecation;
+
+if (process.env.NODE_ENV !== 'production') {
+  exports.useDeprecation = useDeprecation = ({
+    name,
+    message,
+    version
+  }) => {
+    const ref = (0, _react.useRef)(false);
+    const logDeprecation = (0, _react.useCallback)(() => {
+      if (!ref.current) {
+        ref.current = true;
+        deprecate({
+          name,
+          message,
+          version
+        });
+      }
+    }, [name, message, version]);
+    return logDeprecation;
+  };
+} else {
+  exports.useDeprecation = useDeprecation = () => {
+    return noop;
+  };
+}
+
+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;
+  }
+
+}
+
+exports.Deprecations = Deprecations;

package/lib/utils/isNumeric.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = isNumeric;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isNumeric(n) {
+  return !isNaN(parseFloat(n)) && isFinite(n);
+}

package/lib/utils/iterateFocusableElements.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.iterateFocusableElements = iterateFocusableElements;
+exports.isFocusable = isFocusable;
+exports.isTabbable = isTabbable;
+
+/**
+ * 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.
+ */
+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
+ */
+
+
+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
+ */
+
+
+function isTabbable(elem, strict = false) {
+  return isFocusable(elem, strict) && elem.getAttribute('tabindex') !== '-1';
+}

package/lib/utils/ssr.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SSRProvider", {
+  enumerable: true,
+  get: function () {
+    return _ssr.SSRProvider;
+  }
+});
+Object.defineProperty(exports, "useSSRSafeId", {
+  enumerable: true,
+  get: function () {
+    return _ssr.useSSRSafeId;
+  }
+});
+
+var _ssr = require("@react-aria/ssr");

package/lib/utils/test-deprecations.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _semver = _interopRequireDefault(require("semver"));
+
+var _deprecate = require("./deprecate");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const ourVersion = require('../../package.json').version;
+
+beforeEach(() => {
+  _deprecate.Deprecations.clearDeprecations();
+});
+afterEach(() => {
+  const deprecations = _deprecate.Deprecations.getDeprecations();
+
+  for (const dep of deprecations) {
+    if (_semver.default.gte(ourVersion, dep.version)) {
+      throw new Error(`Found a deprecation that should be removed in ${dep.version}`);
+    }
+  }
+});

package/lib/utils/test-helpers.js

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

package/lib/utils/test-matchers.js

@@ -0,0 +1,119 @@
+"use strict";
+
+require("jest-styled-components");
+
+var _serializer = require("jest-styled-components/serializer");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _testing = require("./testing");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.addSnapshotSerializer(_serializer.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 = (0, _testing.getClasses)(node);
+    const pass = classes.includes(klass);
+    return {
+      pass,
+      message: () => `expected ${stringify(classes)} to include: ${stringify(klass)}`
+    };
+  },
+
+  toHaveClasses(node, klasses, only = false) {
+    const classes = (0, _testing.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.default.cloneElement(element, {
+      sx: sxPropValue
+    });
+
+    function checkStylesDeep(rendered) {
+      const className = rendered.props.className;
+      const styles = (0, _testing.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((0, _testing.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/utils/testing.js

@@ -0,0 +1,273 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mount = mount;
+exports.render = render;
+exports.renderRoot = renderRoot;
+exports.renderClasses = renderClasses;
+exports.rendersClass = rendersClass;
+exports.px = px;
+exports.percent = percent;
+exports.renderStyles = renderStyles;
+exports.getComputedStyles = getComputedStyles;
+exports.getProps = getProps;
+exports.getClassName = getClassName;
+exports.getClasses = getClasses;
+exports.loadCSS = loadCSS;
+exports.unloadCSS = unloadCSS;
+exports.behavesAsComponent = behavesAsComponent;
+exports.checkExports = checkExports;
+exports.COMPONENT_DISPLAY_NAME_REGEX = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _util = require("util");
+
+var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
+
+var _enzyme = _interopRequireDefault(require("enzyme"));
+
+var _enzymeAdapterReact = _interopRequireDefault(require("@wojtekmaj/enzyme-adapter-react-17"));
+
+var _ = require("..");
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const readFile = (0, _util.promisify)(require('fs').readFile);
+const COMPONENT_DISPLAY_NAME_REGEX = /^[A-Z][A-Za-z]+(\.[A-Z][A-Za-z]+)*$/;
+exports.COMPONENT_DISPLAY_NAME_REGEX = COMPONENT_DISPLAY_NAME_REGEX;
+
+_enzyme.default.configure({
+  adapter: new _enzymeAdapterReact.default()
+});
+
+function mount(component) {
+  return _enzyme.default.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' />))
+ * ```
+ */
+function render(component, theme = _theme.default) {
+  return _reactTestRenderer.default.create( /*#__PURE__*/_react.default.createElement(_.ThemeProvider, {
+    theme: theme
+  }, component)).toJSON();
+}
+/**
+ * Render the component (a React.createElement() or JSX expression)
+ * using react-test-renderer and return the root node
+ * ```
+ */
+
+
+function renderRoot(component) {
+  return _reactTestRenderer.default.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'])
+ * ```
+ */
+
+
+function renderClasses(component) {
+  const {
+    props: {
+      className
+    }
+  } = render(component);
+  return className ? className.trim().split(' ') : [];
+}
+/**
+ * Returns true if a node renders with a single class.
+ */
+
+
+function rendersClass(node, klass) {
+  return renderClasses(node).includes(klass);
+}
+
+function px(value) {
+  return typeof value === 'number' ? `${value}px` : value;
+}
+
+function percent(value) {
+  return typeof value === 'number' ? `${value}%` : value;
+}
+
+function renderStyles(node) {
+  const {
+    props: {
+      className
+    }
+  } = render(node);
+  return getComputedStyles(className);
+}
+
+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()
+ */
+
+
+function getProps(node) {
+  return typeof node.props === 'function' ? node.props() : node.props;
+}
+
+function getClassName(node) {
+  return getProps(node).className;
+}
+
+function getClasses(node) {
+  const className = getClassName(node);
+  return className ? className.trim().split(/ +/) : [];
+}
+
+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;
+}
+
+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.
+
+
+function behavesAsComponent({
+  Component,
+  toRender,
+  options
+}) {
+  options = options || {};
+
+  const getElement = () => toRender ? toRender() : /*#__PURE__*/_react.default.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.default.forwardRef((_props, ref) => /*#__PURE__*/_react.default.createElement("div", {
+        className: "as-component",
+        ref: ref
+      }));
+
+      const elem = /*#__PURE__*/_react.default.cloneElement(getElement(), {
+        as: As
+      });
+
+      expect(render(elem)).toEqual(render( /*#__PURE__*/_react.default.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
+
+
+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);
+  });
+}