@primer/components 0.0.0-2021111171525 → 0.0.0-20211111716

package/lib/theme.d.ts

@@ -0,0 +1,80 @@
+import { theme } from './theme-preval';
+import { KeyPaths } from './utils/types/KeyPaths';
+export default theme;
+declare 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;
+    };
+    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;
+    };
+};
+declare type ThemeShadows = {
+    shadow: {
+        small: string;
+        medium: string;
+        large: string;
+        extraLarge: string;
+    };
+};
+export declare type ThemeColorPaths = KeyPaths<ThemeColors>;
+export declare type ThemeShadowPaths = KeyPaths<ThemeShadows>;

package/lib/theme.js

@@ -3,14 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.colors = exports.default = void 0;
+exports.default = void 0;
 
-const themeExport = require('./theme-preval');
+var _themePreval = require("./theme-preval");
+
+var _default = _themePreval.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).
 
-const {
-  theme,
-  colors
-} = themeExport;
-exports.colors = colors;
-var _default = theme;
 exports.default = _default;

package/lib/utils/create-slots.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+/** 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
+ */
+declare const createSlots: <SlotNames extends string>(slotNames: SlotNames[]) => {
+    Slots: React.FC<{
+        context?: Record<string, unknown> | undefined;
+        children: (slots: { [key in SlotNames]?: React.ReactNode; }) => React.ReactNode;
+    }>;
+    Slot: React.FC<{
+        name: SlotNames;
+        children: React.ReactNode;
+    }>;
+};
+export default createSlots;

package/lib/utils/create-slots.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useForceUpdate = require("./use-force-update");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/** 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.default.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.default.useRef(slotsDefinition);
+
+    const rerenderWithSlots = (0, _useForceUpdate.useForceUpdate)();
+
+    const [isMounted, setIsMounted] = _react.default.useState(false); // fires after all the effects in children
+
+
+    _react.default.useEffect(() => {
+      rerenderWithSlots();
+      setIsMounted(true);
+    }, [rerenderWithSlots]);
+
+    const registerSlot = _react.default.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.default.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.default.createElement(SlotsContext.Provider, {
+      value: {
+        registerSlot,
+        unregisterSlot,
+        context
+      }
+    }, children(slots));
+  };
+
+  const Slot = ({
+    name,
+    children
+  }) => {
+    const {
+      registerSlot,
+      unregisterSlot,
+      context
+    } = _react.default.useContext(SlotsContext);
+
+    _react.default.useEffect(() => {
+      registerSlot(name, typeof children === 'function' ? children(context) : children);
+      return () => unregisterSlot(name);
+    }, [name, children, registerSlot, unregisterSlot, context]);
+
+    return null;
+  };
+
+  return {
+    Slots,
+    Slot
+  };
+};
+
+var _default = createSlots;
+exports.default = _default;

package/lib/utils/deprecate.d.ts

@@ -0,0 +1,18 @@
+declare type DeprecationType = {
+    name: string;
+    message: string;
+    version: string;
+};
+declare let deprecate: ({ name, message, version }: DeprecationType) => void | (() => void);
+export { deprecate };
+declare let useDeprecation: any;
+export { useDeprecation };
+export declare class Deprecations {
+    static instance: Deprecations | null;
+    deprecations: Array<DeprecationType>;
+    static get(): Deprecations;
+    constructor();
+    static deprecate({ name, message, version }: DeprecationType): void;
+    static getDeprecations(): DeprecationType[];
+    static clearDeprecations(): void;
+}

package/lib/utils/deprecate.js

@@ -7,11 +7,11 @@ exports.Deprecations = exports.useDeprecation = exports.deprecate = void 0;
 
 var _react = require("react");
 
-/* eslint-disable no-console */
+// 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;
 exports.deprecate = deprecate;
 
 if (process.env.NODE_ENV !== 'production') {
@@ -26,8 +26,6 @@ if (process.env.NODE_ENV !== 'production') {
       version
     });
   };
-} else {
-  exports.deprecate = deprecate = noop;
 }
 
 // eslint-disable-next-line import/no-mutable-exports
@@ -60,6 +58,8 @@ if (process.env.NODE_ENV !== 'production') {
 }
 
 class Deprecations {
+  static instance = null;
+
   static get() {
     if (!Deprecations.instance) {
       Deprecations.instance = new Deprecations();
@@ -77,7 +77,8 @@ 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/utils/isNumeric.d.ts

@@ -0,0 +1 @@
+export default function isNumeric(n: any): boolean;

package/lib/utils/isNumeric.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 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.d.ts

@@ -0,0 +1,42 @@
+/**
+ * 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 declare function iterateFocusableElements(container: HTMLElement, options?: IterateFocusableElements): Generator<HTMLElement, undefined, 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 declare function isFocusable(elem: HTMLElement, strict?: boolean): boolean;
+/**
+ * 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 declare function isTabbable(elem: HTMLElement, strict?: boolean): boolean;

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.d.ts

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

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.d.ts

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

package/lib/utils/test-deprecations.js

@@ -2,10 +2,11 @@
 
 var _semver = _interopRequireDefault(require("semver"));
 
-var _deprecate = require("../utils/deprecate");
+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(() => {

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.d.ts

@@ -0,0 +1 @@
+import 'jest-styled-components';

package/lib/utils/test-matchers.js

@@ -1,12 +1,10 @@
 "use strict";
 
-var _react = _interopRequireDefault(require("react"));
-
 require("jest-styled-components");
 
 var _serializer = require("jest-styled-components/serializer");
 
-var _theme = _interopRequireDefault(require("../theme"));
+var _react = _interopRequireDefault(require("react"));
 
 var _testing = require("./testing");
 
@@ -15,14 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 expect.addSnapshotSerializer(_serializer.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 {
@@ -49,23 +40,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 = {
@@ -74,17 +48,16 @@ expect.extend({
       }
     };
 
-    const elem = _react.default.cloneElement(element, {
+    const elem = /*#__PURE__*/_react.default.cloneElement(element, {
       sx: sxPropValue
     });
 
-    const rendered = (0, _testing.render)(elem);
-
     function checkStylesDeep(rendered) {
-      const className = rendered.props ? rendered.props.className : '';
+      const className = rendered.props.className;
       const styles = (0, _testing.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));
@@ -94,28 +67,11 @@ expect.extend({
     }
 
     return {
-      pass: checkStylesDeep(rendered),
+      pass: checkStylesDeep((0, _testing.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.default.createElement(Component, null);
-    }
-
-    const wrapper = (0, _testing.mount)(comp);
-    const pass = this.equals(wrapper.prop('theme'), _theme.default);
-    return {
-      pass,
-      message: () => 'default theme is not set'
-    };
-  },
-
   toSetExports(mod, expectedExports) {
     if (!Object.keys(expectedExports).includes('default')) {
       return {