@primer/components 0.0.0-202111023322 → 0.0.0-2021111104725

package/lib-esm/theme.js

@@ -1,8 +1,3 @@
-const themeExport = require('./theme-preval');
-
-const {
-  theme,
-  colors
-} = themeExport;
-export default theme;
-export { colors };
+import { theme } from './theme-preval';
+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).

package/lib-esm/utils/create-slots.js

@@ -0,0 +1,84 @@
+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 => {
+  const SlotsContext = /*#__PURE__*/React.createContext({
+    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 = ({
+    context = {},
+    children
+  }) => {
+    // initialise slots
+    const slotsDefinition = {};
+    slotNames.map(name => slotsDefinition[name] = null);
+    const slotsRef = React.useRef(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, contents) => {
+      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 => {
+      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 /*#__PURE__*/React.createElement(SlotsContext.Provider, {
+      value: {
+        registerSlot,
+        unregisterSlot,
+        context
+      }
+    }, children(slots));
+  };
+
+  const Slot = ({
+    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/lib-esm/utils/deprecate.js

@@ -1,10 +1,10 @@
-/* eslint-disable no-console */
 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 = null;
+let deprecate = noop;
 
 if (process.env.NODE_ENV !== 'production') {
   deprecate = ({
@@ -18,8 +18,6 @@ if (process.env.NODE_ENV !== 'production') {
       version
     });
   };
-} else {
-  deprecate = noop;
 }
 
 export { deprecate }; // eslint-disable-next-line import/no-mutable-exports
@@ -53,6 +51,8 @@ if (process.env.NODE_ENV !== 'production') {
 
 export { useDeprecation };
 export class Deprecations {
+  static instance = null;
+
   static get() {
     if (!Deprecations.instance) {
       Deprecations.instance = new Deprecations();
@@ -70,7 +70,8 @@ export class Deprecations {
     message,
     version
   }) {
-    const msg = `WARNING! ${name} is deprecated and will be removed in version ${version}. ${message}`;
+    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,

package/lib-esm/utils/isNumeric.js

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

@@ -1,5 +1,5 @@
 import semver from 'semver';
-import { Deprecations } from '../utils/deprecate';
+import { Deprecations } from './deprecate'; // eslint-disable-next-line @typescript-eslint/no-var-requires
 
 const ourVersion = require('../../package.json').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

@@ -1,19 +1,11 @@
-import React from 'react';
 import 'jest-styled-components';
 import { styleSheetSerializer } from 'jest-styled-components/serializer';
-import theme from '../theme';
-import { getClasses, mount, getComputedStyles, render } from './testing';
+import React from 'react';
+import { getClasses, getComputedStyles, render } from './testing';
 expect.addSnapshotSerializer(styleSheetSerializer);
 
 const stringify = d => JSON.stringify(d, null, '  ');
-/**
- * These are props that styled-system aliases for backwards compatibility.
- * For some reason, they don't show up in our toImplementSystemProps() matcher,
- * so we skip over them.
- */
-
 
-const ALIAS_PROP_TYPES = ['w', 'align', 'justify', 'wrap'];
 expect.extend({
   toMatchKeys(obj, values) {
     return {
@@ -40,23 +32,6 @@ expect.extend({
     };
   },
 
-  toImplementSystemProps(Component, propNames) {
-    const propKeys = new Set(Object.keys(Component.propTypes));
-    const expectedPropKeys = Object.keys(propNames.propTypes);
-    const missing = expectedPropKeys.filter(key => !propKeys.has(key)).filter(key => !ALIAS_PROP_TYPES.includes(key));
-    return {
-      pass: missing.length === 0,
-      message: () => `Missing prop${missing.length === 1 ? '' : 's'}: ${stringify(missing)}`
-    };
-  },
-
-  toImplementSxProp(Component) {
-    return {
-      pass: !!Component.propTypes.sx,
-      message: () => 'Missing sx propTypes'
-    };
-  },
-
   toImplementSxBehavior(element) {
     const mediaKey = '@media (max-width:123px)';
     const sxPropValue = {
@@ -64,16 +39,16 @@ expect.extend({
         color: 'red.5'
       }
     };
-    const elem = React.cloneElement(element, {
+    const elem = /*#__PURE__*/React.cloneElement(element, {
       sx: sxPropValue
     });
-    const rendered = render(elem);
 
     function checkStylesDeep(rendered) {
-      const className = rendered.props ? rendered.props.className : '';
+      const className = rendered.props.className;
       const styles = getComputedStyles(className);
+      const mediaStyles = styles[mediaKey];
 
-      if (styles[mediaKey] && styles[mediaKey].color) {
+      if (mediaStyles && mediaStyles.color) {
         return true;
       } else if (rendered.children) {
         return rendered.children.some(child => checkStylesDeep(child));
@@ -83,28 +58,11 @@ expect.extend({
     }
 
     return {
-      pass: checkStylesDeep(rendered),
+      pass: checkStylesDeep(render(elem)),
       message: () => 'sx prop values did not change styles of component nor of any sub-components'
     };
   },
 
-  toSetDefaultTheme(Component) {
-    let comp;
-
-    if (Component.type) {
-      comp = Component;
-    } else {
-      comp = /*#__PURE__*/React.createElement(Component, null);
-    }
-
-    const wrapper = mount(comp);
-    const pass = this.equals(wrapper.prop('theme'), theme);
-    return {
-      pass,
-      message: () => 'default theme is not set'
-    };
-  },
-
   toSetExports(mod, expectedExports) {
     if (!Object.keys(expectedExports).includes('default')) {
       return {

package/lib-esm/utils/testing.js

@@ -3,8 +3,11 @@ 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 'styled-components';
+import { cleanup, render as HTMLRender } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+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({
@@ -13,6 +16,7 @@ enzyme.configure({
 export function mount(component) {
   return enzyme.mount(component);
 }
+
 /**
  * Render the component (a React.createElement() or JSX expression)
  * into its intermediate object representation with 'type',
@@ -24,9 +28,10 @@ export function mount(component) {
  * expect(render(<Foo />)).toEqual(render(<div foo='bar' />))
  * ```
  */
-
-export function render(component) {
-  return renderer.create(component).toJSON();
+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)
@@ -62,11 +67,6 @@ export function renderClasses(component) {
 export function rendersClass(node, klass) {
   return renderClasses(node).includes(klass);
 }
-export function renderWithTheme(node, theme = defaultTheme) {
-  return render( /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, node));
-}
 export function px(value) {
   return typeof value === 'number' ? `${value}px` : value;
 }
@@ -87,11 +87,12 @@ export function getComputedStyles(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.type === 1) {
-        readRule(rule, computed);
-      } else if (rule.type === 4) {
+      if (rule instanceof CSSMediaRule) {
         readMedia(rule);
+      } else if (rule instanceof CSSStyleRule) {
+        readRule(rule, computed);
       } else {// console.warn('rule.type =', rule.type)
       }
     }
@@ -99,6 +100,18 @@ export function getComputedStyles(className) {
 
   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 {
@@ -119,7 +132,9 @@ export function getComputedStyles(className) {
     const dest = {};
 
     for (const rule of mediaRule.cssRules) {
-      readRule(rule, dest);
+      if (rule instanceof CSSStyleRule) {
+        readRule(rule, dest);
+      }
     } // Don't add media rule to computed styles
     // if no styles were actually applied
 
@@ -128,18 +143,6 @@ export function getComputedStyles(className) {
       computed[key] = dest;
     }
   }
-
-  function matchesSafe(node, selector) {
-    if (!selector) {
-      return false;
-    }
-
-    try {
-      return node.matches(selector);
-    } catch (error) {
-      return false;
-    }
-  }
 }
 /**
  * This provides a layer of compatibility between the render() function from
@@ -175,26 +178,16 @@ export function unloadCSS(path) {
 // to render without errors, you can pass a `toRender` function that
 // returns an element ready to be rendered.
 
-export function behavesAsComponent(Component, systemPropArray, toRender = null, options) {
-  if (typeof toRender === 'object' && !options) {
-    options = toRender;
-    toRender = null;
-  }
-
+export function behavesAsComponent({
+  Component,
+  toRender,
+  options
+}) {
   options = options || {};
 
   const getElement = () => toRender ? toRender() : /*#__PURE__*/React.createElement(Component, null);
 
-  it('implements system props', () => {
-    for (const systemProps of systemPropArray) {
-      expect(Component).toImplementSystemProps(systemProps);
-    }
-  });
-
   if (!options.skipSx) {
-    it('implements the sx prop', () => {
-      expect(Component).toImplementSxProp();
-    });
     it('implements sx prop behavior', () => {
       expect(getElement()).toImplementSxBehavior();
     });
@@ -202,11 +195,11 @@ export function behavesAsComponent(Component, systemPropArray, toRender = null,
 
   if (!options.skipAs) {
     it('respects the as prop', () => {
-      const As = React.forwardRef((_props, ref) => /*#__PURE__*/React.createElement("div", {
+      const As = /*#__PURE__*/React.forwardRef((_props, ref) => /*#__PURE__*/React.createElement("div", {
         className: "as-component",
         ref: ref
       }));
-      const elem = React.cloneElement(getElement(), {
+      const elem = /*#__PURE__*/React.cloneElement(getElement(), {
         as: As
       });
       expect(render(elem)).toEqual(render( /*#__PURE__*/React.createElement(As, null)));
@@ -216,17 +209,38 @@ export function behavesAsComponent(Component, systemPropArray, toRender = null,
   it('sets a valid displayName', () => {
     expect(Component.displayName).toMatch(COMPONENT_DISPLAY_NAME_REGEX);
   });
-  it('sets the default theme', () => {
-    expect(getElement()).toSetDefaultTheme();
-  });
   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);
   });
+}
+expect.extend(toHaveNoViolations);
+export function checkStoriesForAxeViolations(name) {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const stories = require(`../stories/${name}.stories`); // eslint-disable-next-line @typescript-eslint/no-unused-vars -- _meta
+
+
+  const {
+    default: _meta,
+    ...Stories
+  } = stories;
+  Object.values(Stories).map(Story => {
+    if (typeof Story !== 'function') return;
+    it(`story ${Story.storyName} should have no axe violations`, async () => {
+      const {
+        container
+      } = HTMLRender( /*#__PURE__*/React.createElement(Story, null));
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+      cleanup();
+    });
+  });
 }

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/AriaRole.js

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

package/lib-esm/utils/types/ComponentProps.js

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

package/lib-esm/utils/types/Flatten.js

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

package/lib-esm/utils/types/KeyPaths.js

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

package/lib-esm/utils/types/MandateProps.js

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

package/lib-esm/utils/types/Merge.js

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

package/lib-esm/utils/types/index.js

@@ -0,0 +1,5 @@
+export * from './AriaRole';
+export * from './ComponentProps';
+export * from './Flatten';
+export * from './Merge';
+export * from './MandateProps';

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/use-force-update.js

@@ -0,0 +1,6 @@
+// Inspired from reach-ui: https://github.com/reach/reach-ui/blob/develop/packages/utils/src/use-force-update.ts
+import React from 'react';
+export const useForceUpdate = () => {
+  const [, rerender] = React.useState({});
+  return React.useCallback(() => rerender({}), []);
+};

package/lib-esm/utils/useIsomorphicLayoutEffect.js

@@ -0,0 +1,3 @@
+import { useEffect, useLayoutEffect } from 'react';
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? useLayoutEffect : useEffect;
+export default useIsomorphicLayoutEffect;

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;
+}