@primer/components 0.0.0-20211030163410 → 0.0.0-20211030175556

package/lib/utils/testing.jsx

@@ -0,0 +1,206 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkExports = exports.behavesAsComponent = exports.unloadCSS = exports.loadCSS = exports.getClasses = exports.getClassName = exports.getProps = exports.getComputedStyles = exports.renderStyles = exports.percent = exports.px = exports.rendersClass = exports.renderClasses = exports.renderRoot = exports.render = exports.mount = exports.COMPONENT_DISPLAY_NAME_REGEX = void 0;
+const react_1 = __importDefault(require("react"));
+const util_1 = require("util");
+const react_test_renderer_1 = __importDefault(require("react-test-renderer"));
+const enzyme_1 = __importDefault(require("enzyme"));
+const enzyme_adapter_react_17_1 = __importDefault(require("@wojtekmaj/enzyme-adapter-react-17"));
+const __1 = require("..");
+const theme_1 = __importDefault(require("../theme"));
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const readFile = util_1.promisify(require('fs').readFile);
+exports.COMPONENT_DISPLAY_NAME_REGEX = /^[A-Z][A-Za-z]+(\.[A-Z][A-Za-z]+)*$/;
+enzyme_1.default.configure({ adapter: new enzyme_adapter_react_17_1.default() });
+function mount(component) {
+    return enzyme_1.default.mount(component);
+}
+exports.mount = mount;
+/**
+ * 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_1.default) {
+    return react_test_renderer_1.default
+        .create(<__1.ThemeProvider theme={theme}>{component}</__1.ThemeProvider>)
+        .toJSON();
+}
+exports.render = render;
+/**
+ * Render the component (a React.createElement() or JSX expression)
+ * using react-test-renderer and return the root node
+ * ```
+ */
+function renderRoot(component) {
+    return react_test_renderer_1.default.create(component).root;
+}
+exports.renderRoot = renderRoot;
+/**
+ * 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(' ') : [];
+}
+exports.renderClasses = renderClasses;
+/**
+ * Returns true if a node renders with a single class.
+ */
+function rendersClass(node, klass) {
+    return renderClasses(node).includes(klass);
+}
+exports.rendersClass = rendersClass;
+function px(value) {
+    return typeof value === 'number' ? `${value}px` : value;
+}
+exports.px = px;
+function percent(value) {
+    return typeof value === 'number' ? `${value}%` : value;
+}
+exports.percent = percent;
+function renderStyles(node) {
+    const { props: { className } } = render(node);
+    return getComputedStyles(className);
+}
+exports.renderStyles = renderStyles;
+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;
+        }
+    }
+}
+exports.getComputedStyles = getComputedStyles;
+/**
+ * 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;
+}
+exports.getProps = getProps;
+function getClassName(node) {
+    return getProps(node).className;
+}
+exports.getClassName = getClassName;
+function getClasses(node) {
+    const className = getClassName(node);
+    return className ? className.trim().split(/ +/) : [];
+}
+exports.getClasses = getClasses;
+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;
+}
+exports.loadCSS = loadCSS;
+function unloadCSS(path) {
+    const style = document.querySelector(`style[data-path="${path}"]`);
+    if (style) {
+        style.remove();
+        return true;
+    }
+}
+exports.unloadCSS = unloadCSS;
+function behavesAsComponent({ Component, toRender, options }) {
+    options = options || {};
+    const getElement = () => (toRender ? toRender() : <Component />);
+    if (!options.skipSx) {
+        it('implements sx prop behavior', () => {
+            expect(getElement()).toImplementSxBehavior();
+        });
+    }
+    if (!options.skipAs) {
+        it('respects the as prop', () => {
+            const As = react_1.default.forwardRef((_props, ref) => <div className="as-component" ref={ref}/>);
+            const elem = react_1.default.cloneElement(getElement(), { as: As });
+            expect(render(elem)).toEqual(render(<As />));
+        });
+    }
+    it('sets a valid displayName', () => {
+        expect(Component.displayName).toMatch(exports.COMPONENT_DISPLAY_NAME_REGEX);
+    });
+    it('renders consistently', () => {
+        expect(render(getElement())).toMatchSnapshot();
+    });
+}
+exports.behavesAsComponent = behavesAsComponent;
+// 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);
+    });
+}
+exports.checkExports = checkExports;

package/lib/utils/theme.js

@@ -1,68 +1,54 @@
 "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.
+    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);
+    return typeof value === 'string' && /(inset\s|)([0-9.]+(\w*)\s){1,4}(rgb[a]?\(.*\)|\w+)/.test(value);
 }
-
 function isColorValue(value) {
-  return chroma.valid(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;
+    if (Array.isArray(obj)) {
+        return obj.filter(predicate);
     }
-
-    return acc;
-  }, {});
+    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))
-  };
+    return {
+        colors: filterObject(colors, value => isColorValue(value)),
+        shadows: filterObject(colors, value => isShadowValue(value))
+    };
 }
-
 function omitScale(obj) {
-  const {
-    scale,
-    ...rest
-  } = obj;
-  return rest;
+    const { scale, ...rest } = obj;
+    return rest;
 }
-
 module.exports = {
-  fontStack,
-  isShadowValue,
-  isColorValue,
-  filterObject,
-  partitionColors,
-  omitScale
-};
+    fontStack,
+    isShadowValue,
+    isColorValue,
+    filterObject,
+    partitionColors,
+    omitScale
+};

package/lib/utils/types/AriaRole.js

@@ -1 +1,2 @@
-"use strict";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/types/ComponentProps.js

@@ -1 +1,2 @@
-"use strict";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/types/Flatten.js

@@ -1 +1,2 @@
-"use strict";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/types/KeyPaths.js

@@ -1 +1,2 @@
-"use strict";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/types/MandateProps.js

@@ -1 +1,16 @@
-"use strict";
+"use strict";
+/*
+Used to convert a list of properties in a type from optional to required
+
+For example, we could make a new type from `Datum`
+where 'id' and 'label' required:
+  type Datum = {
+    description?: string
+    id?: string
+    label?: string
+    value: string
+  }
+
+  type DatumWithRequiredIdAndLabel = MandateProps<Datum, 'id' | 'label'>
+*/
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/types/Merge.js

@@ -1 +1,2 @@
-"use strict";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/types/index.js

@@ -1,70 +1,17 @@
 "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];
-    }
-  });
-});
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AriaRole"), exports);
+__exportStar(require("./ComponentProps"), exports);
+__exportStar(require("./Flatten"), exports);
+__exportStar(require("./Merge"), exports);
+__exportStar(require("./MandateProps"), exports);

package/lib/utils/uniqueId.js

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

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

@@ -1,19 +1,13 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 react_1 = __importDefault(require("react"));
 const useForceUpdate = () => {
-  const [, rerender] = _react.default.useState({});
-
-  return _react.default.useCallback(() => rerender({}), []);
+    const [, rerender] = react_1.default.useState({});
+    return react_1.default.useCallback(() => rerender({}), []);
 };
-
-exports.useForceUpdate = useForceUpdate;
+exports.useForceUpdate = useForceUpdate;

package/lib/utils/useIsomorphicLayoutEffect.js

@@ -1,12 +1,9 @@
 "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;
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' &&
+    typeof window.document !== 'undefined' &&
+    typeof window.document.createElement !== 'undefined'
+    ? react_1.useLayoutEffect
+    : react_1.useEffect;
+exports.default = useIsomorphicLayoutEffect;

package/lib/utils/userAgent.js

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

package/lib-esm/ActionList/Item.js

@@ -93,7 +93,7 @@ export const TextContainer = styled.span.withConfig({
 const BaseVisualContainer = styled.div.withConfig({
   displayName: "Item__BaseVisualContainer",
   componentId: "jqpvy8-4"
-})(["height:20px;width:", ";margin-right:", ";display:flex;justify-content:center;align-items:center;flex-shrink:0;"], get('space.3'), get('space.2'));
+})(["height:20px;width:", ";margin-right:", ";display:flex;justify-content:center;align-items:center;"], get('space.3'), get('space.2'));
 const ColoredVisualContainer = styled(BaseVisualContainer).withConfig({
   displayName: "Item__ColoredVisualContainer",
   componentId: "jqpvy8-5"
@@ -104,7 +104,7 @@ const ColoredVisualContainer = styled(BaseVisualContainer).withConfig({
 const LeadingVisualContainer = styled(ColoredVisualContainer).withConfig({
   displayName: "Item__LeadingVisualContainer",
   componentId: "jqpvy8-6"
-})(["display:flex;flex-direction:column;justify-content:center;"]);
+})(["flex-shrink:0;display:flex;flex-direction:column;justify-content:center;"]);
 const TrailingContent = styled(ColoredVisualContainer).withConfig({
   displayName: "Item__TrailingContent",
   componentId: "jqpvy8-7"
@@ -119,7 +119,7 @@ const DescriptionContainer = styled.span.withConfig({
 const MultiSelectIcon = styled.svg.withConfig({
   displayName: "Item__MultiSelectIcon",
   componentId: "jqpvy8-9"
-})(["rect{fill:", ";stroke:", ";shape-rendering:auto;}path{fill:", ";boxshadow:", ";opacity:", ";}"], ({
+})(["rect{fill:", ";stroke:", ";}path{fill:", ";boxshadow:", ";opacity:", ";}"], ({
   selected
 }) => selected ? get('colors.accent.fg') : get('colors.canvas.default'), ({
   selected

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { SxProp } from '../sx';
+/**
+ * Contract for props passed to the `Header` component.
+ */
+export declare type HeaderProps = {
+    /**
+     * 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;
+} & SxProp;
+/**
+ * Displays the name and description of a `Group`.
+ */
+export declare const Header: ({ variant, title, auxiliaryText, sx, ...props }: HeaderProps) => JSX.Element;

package/lib-esm/ActionList2/Header.js

@@ -0,0 +1,44 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import Box from '../Box';
+import { ListContext } from './List';
+/**
+ * Contract for props passed to the `Header` component.
+ */
+
+/**
+ * Displays the name and description of a `Group`.
+ */
+export const Header = ({
+  variant = 'subtle',
+  title,
+  auxiliaryText,
+  sx = {},
+  ...props
+}) => {
+  const {
+    variant: listVariant
+  } = React.useContext(ListContext);
+  const styles = {
+    paddingY: '6px',
+    paddingX: listVariant === 'full' ? 2 : 3,
+    fontSize: 0,
+    fontWeight: 'bold',
+    color: 'fg.muted',
+    ...(variant === 'filled' && {
+      backgroundColor: 'canvas.subtle',
+      marginX: 0,
+      marginBottom: 2,
+      borderTop: '1px solid',
+      borderBottom: '1px solid',
+      borderColor: 'neutral.muted'
+    }),
+    ...sx
+  };
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    sx: styles,
+    role: "heading"
+  }, props), title, auxiliaryText && /*#__PURE__*/React.createElement("span", null, auxiliaryText));
+};
+Header.displayName = "Header";

package/lib-esm/ActionList2/Item.js

@@ -51,7 +51,7 @@ export const Item = /*#__PURE__*/React.forwardRef(({
   variant = 'default',
   disabled = false,
   selected = undefined,
-  onSelect,
+  onSelect = () => null,
   sx: sxProp = {},
   id,
   _PrivateItemWrapper,
@@ -133,12 +133,10 @@ export const Item = /*#__PURE__*/React.forwardRef(({
     }
   };
   const clickHandler = React.useCallback(event => {
-    if (typeof onSelect !== 'function') return;
     if (disabled) return;
     if (!event.defaultPrevented) onSelect(event);
   }, [onSelect, disabled]);
   const keyPressHandler = React.useCallback(event => {
-    if (typeof onSelect !== 'function') return;
     if (disabled) return;
 
     if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {

package/lib-esm/ActionList2/List.js

@@ -22,7 +22,8 @@ export const List = /*#__PURE__*/React.forwardRef(({
     paddingY: variant === 'inset' ? 2 : 0
   };
   return /*#__PURE__*/React.createElement(ListBox, _extends({
-    sx: merge(styles, sxProp)
+    sx: merge(styles, sxProp),
+    "aria-multiselectable": selectionVariant === 'multiple' ? true : undefined
   }, props, {
     ref: forwardedRef
   }), /*#__PURE__*/React.createElement(ListContext.Provider, {