@primer/components 0.0.0-202111023322 → 0.0.0-20211110135525

package/lib/utils/testing.js

@@ -8,7 +8,6 @@ exports.render = render;
 exports.renderRoot = renderRoot;
 exports.renderClasses = renderClasses;
 exports.rendersClass = rendersClass;
-exports.renderWithTheme = renderWithTheme;
 exports.px = px;
 exports.percent = percent;
 exports.renderStyles = renderStyles;
@@ -20,6 +19,7 @@ exports.loadCSS = loadCSS;
 exports.unloadCSS = unloadCSS;
 exports.behavesAsComponent = behavesAsComponent;
 exports.checkExports = checkExports;
+exports.checkStoriesForAxeViolations = checkStoriesForAxeViolations;
 exports.COMPONENT_DISPLAY_NAME_REGEX = void 0;
 
 var _react = _interopRequireDefault(require("react"));
@@ -32,12 +32,17 @@ var _enzyme = _interopRequireDefault(require("enzyme"));
 
 var _enzymeAdapterReact = _interopRequireDefault(require("@wojtekmaj/enzyme-adapter-react-17"));
 
-var _styledComponents = require("styled-components");
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+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;
@@ -49,6 +54,7 @@ _enzyme.default.configure({
 function mount(component) {
   return _enzyme.default.mount(component);
 }
+
 /**
  * Render the component (a React.createElement() or JSX expression)
  * into its intermediate object representation with 'type',
@@ -60,10 +66,10 @@ function mount(component) {
  * expect(render(<Foo />)).toEqual(render(<div foo='bar' />))
  * ```
  */
-
-
-function render(component) {
-  return _reactTestRenderer.default.create(component).toJSON();
+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)
@@ -103,12 +109,6 @@ function rendersClass(node, klass) {
   return renderClasses(node).includes(klass);
 }
 
-function renderWithTheme(node, theme = _theme.default) {
-  return render( /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-    theme: theme
-  }, node));
-}
-
 function px(value) {
   return typeof value === 'number' ? `${value}px` : value;
 }
@@ -132,11 +132,12 @@ 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)
       }
     }
@@ -144,6 +145,18 @@ 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 {
@@ -164,7 +177,9 @@ 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
 
@@ -173,18 +188,6 @@ 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
@@ -226,26 +229,16 @@ function unloadCSS(path) {
 // returns an element ready to be rendered.
 
 
-function behavesAsComponent(Component, systemPropArray, toRender = null, options) {
-  if (typeof toRender === 'object' && !options) {
-    options = toRender;
-    toRender = null;
-  }
-
+function behavesAsComponent({
+  Component,
+  toRender,
+  options
+}) {
   options = options || {};
 
   const getElement = () => toRender ? toRender() : /*#__PURE__*/_react.default.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();
     });
@@ -253,12 +246,12 @@ function behavesAsComponent(Component, systemPropArray, toRender = null, options
 
   if (!options.skipAs) {
     it('respects the as prop', () => {
-      const As = _react.default.forwardRef((_props, ref) => /*#__PURE__*/_react.default.createElement("div", {
+      const As = /*#__PURE__*/_react.default.forwardRef((_props, ref) => /*#__PURE__*/_react.default.createElement("div", {
         className: "as-component",
         ref: ref
       }));
 
-      const elem = _react.default.cloneElement(getElement(), {
+      const elem = /*#__PURE__*/_react.default.cloneElement(getElement(), {
         as: As
       });
 
@@ -269,18 +262,41 @@ function behavesAsComponent(Component, systemPropArray, toRender = null, options
   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
+
 
 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(_jestAxe.toHaveNoViolations);
+
+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
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Story, null));
+      const results = await (0, _jestAxe.axe)(container);
+      expect(results).toHaveNoViolations();
+      (0, _react2.cleanup)();
+    });
+  });
 }

package/lib/utils/theme.d.ts

@@ -0,0 +1,9 @@
+export function fontStack(fonts: any): any;
+export function isShadowValue(value: any): boolean;
+export function isColorValue(value: any): boolean;
+export function filterObject(obj: any, predicate: any): {};
+export function partitionColors(colors: any): {
+    colors: {};
+    shadows: {};
+};
+export function omitScale(obj: any): any;

package/lib/utils/theme.js

@@ -0,0 +1,68 @@
+"use strict";
+
+// 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/utils/types/AriaRole.d.ts

@@ -0,0 +1 @@
+export declare type AriaRole = 'alert' | 'alertdialog' | 'application' | 'article' | 'banner' | 'button' | 'cell' | 'checkbox' | 'columnheader' | 'combobox' | 'complementary' | 'contentinfo' | 'definition' | 'dialog' | 'directory' | 'document' | 'feed' | 'figure' | 'form' | 'grid' | 'gridcell' | 'group' | 'heading' | 'img' | 'link' | 'list' | 'listbox' | 'listitem' | 'log' | 'main' | 'marquee' | 'math' | 'menu' | 'menubar' | 'menuitem' | 'menuitemcheckbox ' | 'menuitemradio' | 'navigation' | 'none' | 'note' | 'option' | 'presentation' | 'progressbar' | 'radio' | 'radiogroup' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'scrollbar' | 'search' | 'searchbox' | 'separator' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'table' | 'tablist' | 'tabpanel' | 'term' | 'textbox' | 'timer' | 'toolbar' | 'tooltip' | 'tree' | 'treegrid' | 'treeitem';

package/lib/utils/types/AriaRole.js

@@ -0,0 +1 @@
+"use strict";

package/lib/utils/types/ComponentProps.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/**
+ * Extract a component's props
+ *
+ * Source: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase#wrappingmirroring-a-component
+ *
+ * @example ComponentProps<typeof MyComponent>
+ */
+export declare type ComponentProps<T> = T extends React.ComponentType<infer Props> ? Props extends object ? Props : never : never;

package/lib/utils/types/ComponentProps.js

@@ -0,0 +1 @@
+"use strict";

package/lib/utils/types/Flatten.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Contruct a type describing the items in `T`, if `T` is an array.
+ */
+export declare type Flatten<T extends unknown> = T extends (infer U)[] ? U : never;

package/lib/utils/types/Flatten.js

@@ -0,0 +1 @@
+"use strict";

package/lib/utils/types/KeyPaths.d.ts

@@ -0,0 +1,3 @@
+export declare type KeyPaths<O extends Record<string, unknown>> = {
+    [K in keyof O]: K extends string ? O[K] extends string ? `${K}` : `${K}.${KeyPaths<O[K]>}` : never;
+}[keyof O];

package/lib/utils/types/KeyPaths.js

@@ -0,0 +1 @@
+"use strict";

package/lib/utils/types/MandateProps.d.ts

@@ -0,0 +1,3 @@
+export declare type MandateProps<T extends unknown, K extends keyof T> = Omit<T, K> & {
+    [MK in K]-?: NonNullable<T[MK]>;
+};

package/lib/utils/types/MandateProps.js

@@ -0,0 +1 @@
+"use strict";

package/lib/utils/types/Merge.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Given two object types A and B, return a type with all the properties of A that aren't also
+ * properties of B, and all the properties of B.
+ *
+ * Useful when we have a component that spreads a "rest" of its props on a subcomponent:
+ *
+ * ```ts
+ * interface OwnProps {
+ *  foo: string
+ * }
+ *
+ * type MyComponentProps = Merge<SubcomponentProps, OwnProps>
+ * const MyComponent = ({foo, ...rest}: MyComponentProps) => {
+ *   // ...
+ *   return <SubComponent {...rest} />
+ * }
+ * ```
+ */
+export declare type Merge<A = {}, B = {}> = Omit<A, keyof B> & B;

package/lib/utils/types/Merge.js

@@ -0,0 +1 @@
+"use strict";

package/lib/utils/types/index.d.ts

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

package/lib/utils/types/index.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _AriaRole = require("./AriaRole");
+
+Object.keys(_AriaRole).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AriaRole[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AriaRole[key];
+    }
+  });
+});
+
+var _ComponentProps = require("./ComponentProps");
+
+Object.keys(_ComponentProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ComponentProps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ComponentProps[key];
+    }
+  });
+});
+
+var _Flatten = require("./Flatten");
+
+Object.keys(_Flatten).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Flatten[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Flatten[key];
+    }
+  });
+});
+
+var _Merge = require("./Merge");
+
+Object.keys(_Merge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Merge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Merge[key];
+    }
+  });
+});
+
+var _MandateProps = require("./MandateProps");
+
+Object.keys(_MandateProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MandateProps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _MandateProps[key];
+    }
+  });
+});

package/lib/utils/uniqueId.d.ts

@@ -0,0 +1 @@
+export declare function uniqueId(): string;

package/lib/utils/uniqueId.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.uniqueId = uniqueId;
+// 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;
+
+function uniqueId() {
+  return `__primer_id_${idSeed++}`;
+}

package/lib/utils/use-force-update.d.ts

@@ -0,0 +1 @@
+export declare const useForceUpdate: () => () => void;

package/lib/utils/use-force-update.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useForceUpdate = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Inspired from reach-ui: https://github.com/reach/reach-ui/blob/develop/packages/utils/src/use-force-update.ts
+const useForceUpdate = () => {
+  const [, rerender] = _react.default.useState({});
+
+  return _react.default.useCallback(() => rerender({}), []);
+};
+
+exports.useForceUpdate = useForceUpdate;

package/lib/utils/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,3 @@
+import { useEffect } from 'react';
+declare const useIsomorphicLayoutEffect: typeof useEffect;
+export default useIsomorphicLayoutEffect;

package/lib/utils/useIsomorphicLayoutEffect.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
+var _default = useIsomorphicLayoutEffect;
+exports.default = _default;

package/lib/utils/userAgent.d.ts

@@ -0,0 +1 @@
+export declare function isMacOS(): boolean;

package/lib/utils/userAgent.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isMacOS = isMacOS;
+let isMac = undefined;
+
+function isMacOS() {
+  if (isMac === undefined) {
+    isMac = /^mac/i.test(window.navigator.platform);
+  }
+
+  return isMac;
+}

package/lib-esm/ActionList/Divider.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+export declare function Divider(): JSX.Element;
+export declare namespace Divider {
+    var renderItem: typeof Divider;
+}

package/lib-esm/ActionList/Divider.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+import { get } from '../constants';
+export const StyledDivider = styled.div.withConfig({
+  displayName: "Divider__StyledDivider",
+  componentId: "sc-42656i-0"
+})(["height:1px;background:", ";margin-top:calc(", " - 1px);margin-bottom:", ";"], get('colors.border.muted'), get('space.2'), get('space.2'));
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+
+export function Divider() {
+  return /*#__PURE__*/React.createElement(StyledDivider, null);
+}
+Divider.displayName = "Divider";
+
+/**
+ * `Divider` fulfills the `ItemPropsWithCustomRenderer` contract,
+ * so it can be used inline in an `ActionList`’s `items` prop.
+ * In other words, `items={[ActionList.Divider]}` is supported as a concise
+ * alternative to `items={[{renderItem: () => <ActionList.Divider />}]}`.
+ */
+Divider.renderItem = Divider;

package/lib-esm/ActionList/Group.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { SxProp } from '../sx';
+import { HeaderProps } from './Header';
+/**
+ * Contract for props passed to the `Group` component.
+ */
+export interface GroupProps extends React.ComponentPropsWithoutRef<'div'>, SxProp {
+    /**
+     * Props for a `Header` to render in the `Group`.
+     */
+    header?: HeaderProps;
+    /**
+     * The id of the group.
+     */
+    groupId?: string;
+    /**
+     * `Items` to render in the `Group`.
+     */
+    items?: JSX.Element[];
+    /**
+     * Whether to display a divider above each `Item` in this `Group` when it does not follow a `Header` or `Divider`.
+     */
+    showItemDividers?: boolean;
+}
+/**
+ * Collects related `Items` in an `ActionList`.
+ */
+export declare function Group({ header, items, ...props }: GroupProps): JSX.Element;

package/lib-esm/ActionList/Group.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import sx from '../sx';
+import { Header } from './Header';
+/**
+ * Contract for props passed to the `Group` component.
+ */
+
+const StyledGroup = styled.div.withConfig({
+  displayName: "Group__StyledGroup",
+  componentId: "sc-10w5bj9-0"
+})(["", ""], sx);
+/**
+ * Collects related `Items` in an `ActionList`.
+ */
+
+export function Group({
+  header,
+  items,
+  ...props
+}) {
+  return /*#__PURE__*/React.createElement(StyledGroup, props, header && /*#__PURE__*/React.createElement(Header, header), items);
+}
+Group.displayName = "Group";

package/lib-esm/ActionList/Header.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { SxProp } from '../sx';
+/**
+ * Contract for props passed to the `Header` component.
+ */
+export interface HeaderProps extends React.ComponentPropsWithoutRef<'div'>, SxProp {
+    /**
+     * Style variations. Usage is discretionary.
+     *
+     * - `"filled"` - Superimposed on a background, offset from nearby content
+     * - `"subtle"` - Relatively less offset from nearby content
+     */
+    variant?: 'subtle' | 'filled';
+    /**
+     * Primary text which names a `Group`.
+     */
+    title: string;
+    /**
+     * Secondary text which provides additional information about a `Group`.
+     */
+    auxiliaryText?: string;
+}
+export declare const StyledHeader: import("styled-components").StyledComponent<"div", any, {
+    variant: HeaderProps['variant'];
+} & SxProp, never>;
+/**
+ * Displays the name and description of a `Group`.
+ */
+export declare function Header({ variant, title, auxiliaryText, children: _children, ...props }: HeaderProps): JSX.Element;