@primer/components 31.0.0-rc.c90c1dae → 31.0.0

package/docs/src/props.js

@@ -1,77 +0,0 @@
-import {Flash, Label} from '@primer/components'
-import {H3} from '@primer/gatsby-theme-doctocat/src/components/heading'
-import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
-import Paragraph from '@primer/gatsby-theme-doctocat/src/components/paragraph'
-import Table from '@primer/gatsby-theme-doctocat/src/components/table'
-import {graphql, useStaticQuery} from 'gatsby'
-import React from 'react'
-
-/** Render prop documentation for the given component */
-export function Props({of}) {
-  const data = useStaticQuery(graphql`
-    query {
-      allComponentMetadata {
-        nodes {
-          id
-          name
-          props {
-            description
-            defaultValue
-            name
-            required
-            type
-          }
-        }
-      }
-    }
-  `)
-
-  const displayName = of?.displayName || of?.name || ''
-  const component = data.allComponentMetadata.nodes.find(node => node.name === displayName)
-
-  if (!component) {
-    // eslint-disable-next-line no-console
-    console.error(`Could not find component ${displayName}`)
-    return (
-      <>
-        <H3>{displayName}</H3>
-        <Flash variant="danger">Component not found</Flash>
-      </>
-    )
-  }
-
-  return (
-    <>
-      <H3>{component.name}</H3>
-      {component.props.length > 0 ? (
-        <Table>
-          <thead>
-            <tr>
-              <th align="left">Prop</th>
-              <th align="left">Type</th>
-              <th align="left">Default</th>
-              <th align="left">Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            {component.props.map(prop => (
-              <tr key={prop.name}>
-                <td style={{whiteSpace: 'nowrap'}}>
-                  <InlineCode>{prop.name}</InlineCode>{' '}
-                  {prop.required ? <Label style={{verticalAlign: 'text-top'}}>Required</Label> : null}
-                </td>
-                <td>
-                  <InlineCode>{prop.type}</InlineCode>
-                </td>
-                <td>{prop.defaultValue ? <InlineCode>{prop.defaultValue}</InlineCode> : '–'}</td>
-                <td>{prop.description}</td>
-              </tr>
-            ))}
-          </tbody>
-        </Table>
-      ) : (
-        <Paragraph>No props</Paragraph>
-      )}
-    </>
-  )
-}

package/jest.config.js

@@ -1,13 +0,0 @@
-/* eslint-disable github/unescaped-html-literal */
-module.exports = {
-  testEnvironment: 'jsdom',
-  cacheDirectory: '.test',
-  collectCoverage: true,
-  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/stories/**'],
-  setupFilesAfterEnv: [
-    '<rootDir>/src/utils/test-matchers.tsx',
-    '<rootDir>/src/utils/test-deprecations.tsx',
-    '<rootDir>/src/utils/test-helpers.tsx'
-  ],
-  testMatch: ['<rootDir>/(src|codemods)/__tests__/**/*.test.[jt]s?(x)', '!**/*.types.test.[jt]s?(x)']
-}

package/lib/__tests__/ActionList.test.d.ts

@@ -1 +0,0 @@
-import 'babel-polyfill';

package/lib/__tests__/ActionList.test.js

@@ -1,69 +0,0 @@
-"use strict";
-
-var _react = require("@testing-library/react");
-
-require("babel-polyfill");
-
-var _jestAxe = require("jest-axe");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _theme = _interopRequireDefault(require("../theme"));
-
-var _ActionList = require("../ActionList");
-
-var _testing = require("../utils/testing");
-
-var _ = require("..");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-expect.extend(_jestAxe.toHaveNoViolations);
-
-function SimpleActionList() {
-  return /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
-    theme: _theme.default
-  }, /*#__PURE__*/_react2.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, {
-    items: [{
-      text: 'New file'
-    }, _ActionList.ActionList.Divider, {
-      text: 'Copy link'
-    }, {
-      text: 'Edit file'
-    }, {
-      text: 'Delete file',
-      variant: 'danger'
-    }]
-  })));
-}
-
-SimpleActionList.displayName = "SimpleActionList";
-describe('ActionList', () => {
-  (0, _testing.behavesAsComponent)({
-    Component: _ActionList.ActionList,
-    options: {
-      skipAs: true,
-      skipSx: true
-    },
-    toRender: () => /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, {
-      items: []
-    })
-  });
-  (0, _testing.checkExports)('ActionList', {
-    default: undefined,
-    ActionList: _ActionList.ActionList
-  });
-  it('should have no axe violations', async () => {
-    const {
-      container
-    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionList, null));
-    const results = await (0, _jestAxe.axe)(container);
-    expect(results).toHaveNoViolations();
-    (0, _react.cleanup)();
-  });
-});
-describe('ActionList.Item', () => {
-  (0, _testing.behavesAsComponent)({
-    Component: _ActionList.ActionList.Item
-  });
-});

package/lib/__tests__/ActionList.types.test.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export declare function emptyList(): JSX.Element;
-export declare function listWithSingleItem(): JSX.Element;
-export declare function canUseDivDOMProps(): JSX.Element;
-export declare function cannotUseAnchorDOMProps(): JSX.Element;
-export declare function cannotUseAsWithoutRenderProp(): JSX.Element;

package/lib/__tests__/ActionList.types.test.js

@@ -1,69 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.emptyList = emptyList;
-exports.listWithSingleItem = listWithSingleItem;
-exports.canUseDivDOMProps = canUseDivDOMProps;
-exports.cannotUseAnchorDOMProps = cannotUseAnchorDOMProps;
-exports.cannotUseAsWithoutRenderProp = cannotUseAsWithoutRenderProp;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function emptyList() {
-  return /*#__PURE__*/_react.default.createElement(_.ActionList, {
-    items: []
-  });
-}
-
-emptyList.displayName = "emptyList";
-
-function listWithSingleItem() {
-  return /*#__PURE__*/_react.default.createElement(_.ActionList, {
-    items: [{
-      text: 'One'
-    }]
-  });
-}
-
-listWithSingleItem.displayName = "listWithSingleItem";
-
-function canUseDivDOMProps() {
-  return /*#__PURE__*/_react.default.createElement(_.ActionList, {
-    items: [{
-      text: 'One',
-      onMouseDown: () => undefined
-    }]
-  });
-}
-
-canUseDivDOMProps.displayName = "canUseDivDOMProps";
-
-function cannotUseAnchorDOMProps() {
-  return /*#__PURE__*/_react.default.createElement(_.ActionList, {
-    items: [{
-      text: 'One',
-      // @ts-expect-error href is not a div DOM prop
-      href: '#'
-    }]
-  });
-}
-
-cannotUseAnchorDOMProps.displayName = "cannotUseAnchorDOMProps";
-
-function cannotUseAsWithoutRenderProp() {
-  return /*#__PURE__*/_react.default.createElement(_.ActionList, {
-    items: [{
-      text: 'One',
-      // @ts-expect-error as is only available via manual rendering of items
-      as: 'a'
-    }]
-  });
-}
-
-cannotUseAsWithoutRenderProp.displayName = "cannotUseAsWithoutRenderProp";

package/lib/__tests__/ActionMenu.test.d.ts

@@ -1 +0,0 @@
-import 'babel-polyfill';

package/lib/__tests__/ActionMenu.test.js

@@ -1,151 +0,0 @@
-"use strict";
-
-var _react = require("@testing-library/react");
-
-require("babel-polyfill");
-
-var _jestAxe = require("jest-axe");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _theme = _interopRequireDefault(require("../theme"));
-
-var _ActionMenu = require("../ActionMenu");
-
-var _testing = require("../utils/testing");
-
-var _ = require("..");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-expect.extend(_jestAxe.toHaveNoViolations);
-const items = [{
-  text: 'New file'
-}, {
-  text: 'Copy link'
-}, {
-  text: 'Edit file'
-}, {
-  text: 'Delete file',
-  variant: 'danger'
-}];
-const mockOnActivate = jest.fn();
-
-function SimpleActionMenu() {
-  return /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
-    theme: _theme.default
-  }, /*#__PURE__*/_react2.default.createElement(_.SSRProvider, null, /*#__PURE__*/_react2.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react2.default.createElement("div", {
-    id: "something-else"
-  }, "X"), /*#__PURE__*/_react2.default.createElement(_ActionMenu.ActionMenu, {
-    onAction: mockOnActivate,
-    anchorContent: "Menu",
-    items: items
-  }), /*#__PURE__*/_react2.default.createElement("div", {
-    id: "portal-root"
-  }))));
-}
-
-SimpleActionMenu.displayName = "SimpleActionMenu";
-describe('ActionMenu', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-  (0, _testing.behavesAsComponent)({
-    Component: _ActionMenu.ActionMenu,
-    options: {
-      skipAs: true,
-      skipSx: true
-    },
-    toRender: () => /*#__PURE__*/_react2.default.createElement(_.SSRProvider, null, /*#__PURE__*/_react2.default.createElement(_ActionMenu.ActionMenu, {
-      items: []
-    }))
-  });
-  (0, _testing.checkExports)('ActionMenu', {
-    default: undefined,
-    ActionMenu: _ActionMenu.ActionMenu
-  });
-  it('should have no axe violations', async () => {
-    const {
-      container
-    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionMenu, null));
-    const results = await (0, _jestAxe.axe)(container);
-    expect(results).toHaveNoViolations();
-    (0, _react.cleanup)();
-  });
-  it('should trigger the overlay on trigger click', async () => {
-    var _portalRoot, _portalRoot$textConte;
-
-    const menu = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionMenu, null));
-    let portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
-    expect(portalRoot).toBeNull();
-    const anchor = await menu.findByText('Menu');
-    (0, _react.act)(() => {
-      _react.fireEvent.click(anchor);
-    });
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
-    expect(portalRoot).toBeTruthy();
-    const itemText = items.map(i => {
-      if (i.hasOwnProperty('text')) {
-        return i.text;
-      }
-    }).join('');
-    expect((_portalRoot = portalRoot) === null || _portalRoot === void 0 ? void 0 : (_portalRoot$textConte = _portalRoot.textContent) === null || _portalRoot$textConte === void 0 ? void 0 : _portalRoot$textConte.trim()).toEqual(itemText);
-  });
-  it('should dismiss the overlay on menuitem click', async () => {
-    var _portalRoot2;
-
-    const menu = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionMenu, null));
-    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
-    expect(portalRoot).toBeNull();
-    const anchor = await menu.findByText('Menu');
-    (0, _react.act)(() => {
-      _react.fireEvent.click(anchor);
-    });
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
-    expect(portalRoot).toBeTruthy();
-    const menuItem = await menu.queryByText(items[0].text);
-    (0, _react.act)(() => {
-      _react.fireEvent.click(menuItem);
-    });
-    expect((_portalRoot2 = portalRoot) === null || _portalRoot2 === void 0 ? void 0 : _portalRoot2.textContent).toEqual(''); // menu items are hidden
-  });
-  it('should dismiss the overlay on clicking outside overlay', async () => {
-    var _portalRoot3;
-
-    const menu = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionMenu, null));
-    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
-    expect(portalRoot).toBeNull();
-    const anchor = await menu.findByText('Menu');
-    (0, _react.act)(() => {
-      _react.fireEvent.click(anchor);
-    });
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
-    expect(portalRoot).toBeTruthy();
-    const somethingElse = await menu.baseElement.querySelector('#something-else');
-    (0, _react.act)(() => {
-      _react.fireEvent.mouseDown(somethingElse);
-    });
-    expect((_portalRoot3 = portalRoot) === null || _portalRoot3 === void 0 ? void 0 : _portalRoot3.textContent).toEqual(''); // menu items are hidden
-  });
-  it('should pass correct values to onAction on menu click', async () => {
-    var _portalRoot4;
-
-    const menu = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionMenu, null));
-    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
-    expect(portalRoot).toBeNull();
-    const anchor = await menu.findByText('Menu');
-    (0, _react.act)(() => {
-      _react.fireEvent.click(anchor);
-    });
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
-    expect(portalRoot).toBeTruthy();
-    const menuItem = await ((_portalRoot4 = portalRoot) === null || _portalRoot4 === void 0 ? void 0 : _portalRoot4.querySelector("[role='menuitem']"));
-    (0, _react.act)(() => {
-      _react.fireEvent.click(menuItem);
-    }); // onAction has been called with correct argument
-
-    expect(mockOnActivate).toHaveBeenCalledTimes(1);
-    const arg = mockOnActivate.mock.calls[0][0];
-    expect(arg.text).toEqual(items[0].text);
-  });
-});

package/lib/__tests__/AnchoredOverlay.test.d.ts

@@ -1 +0,0 @@
-import 'babel-polyfill';

package/lib/__tests__/AnchoredOverlay.test.js

@@ -1,160 +0,0 @@
-"use strict";
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _AnchoredOverlay = require("../AnchoredOverlay");
-
-var _testing = require("../utils/testing");
-
-var _react2 = require("@testing-library/react");
-
-var _jestAxe = require("jest-axe");
-
-require("babel-polyfill");
-
-var _index = require("../index");
-
-var _theme = _interopRequireDefault(require("../theme"));
-
-var _BaseStyles = _interopRequireDefault(require("../BaseStyles"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-expect.extend(_jestAxe.toHaveNoViolations);
-
-const AnchoredOverlayTestComponent = ({
-  initiallyOpen = false,
-  onOpenCallback,
-  onCloseCallback
-} = {}) => {
-  const [open, setOpen] = (0, _react.useState)(initiallyOpen);
-  const onOpen = (0, _react.useCallback)(gesture => {
-    setOpen(true);
-    onOpenCallback === null || onOpenCallback === void 0 ? void 0 : onOpenCallback(gesture);
-  }, [onOpenCallback]);
-  const onClose = (0, _react.useCallback)(gesture => {
-    setOpen(true);
-    onCloseCallback === null || onCloseCallback === void 0 ? void 0 : onCloseCallback(gesture);
-  }, [onCloseCallback]);
-  return /*#__PURE__*/_react.default.createElement(_ThemeProvider.ThemeProvider, {
-    theme: _theme.default
-  }, /*#__PURE__*/_react.default.createElement(_index.SSRProvider, null, /*#__PURE__*/_react.default.createElement(_BaseStyles.default, null, /*#__PURE__*/_react.default.createElement(_AnchoredOverlay.AnchoredOverlay, {
-    open: open,
-    onOpen: onOpen,
-    onClose: onClose,
-    renderAnchor: props => /*#__PURE__*/_react.default.createElement(_index.Button, props, "Anchor Button")
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    type: "button"
-  }, "Focusable Child")))));
-};
-
-AnchoredOverlayTestComponent.displayName = "AnchoredOverlayTestComponent";
-describe('AnchoredOverlay', () => {
-  (0, _testing.behavesAsComponent)({
-    Component: _AnchoredOverlay.AnchoredOverlay,
-    options: {
-      skipAs: true,
-      skipSx: true
-    },
-    toRender: () => /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, null)
-  });
-  (0, _testing.checkExports)('AnchoredOverlay', {
-    default: undefined,
-    AnchoredOverlay: _AnchoredOverlay.AnchoredOverlay
-  });
-  it('should have no axe violations when open', async () => {
-    const {
-      container
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
-      initiallyOpen: true
-    }));
-    const results = await (0, _jestAxe.axe)(container);
-    expect(results).toHaveNoViolations();
-    (0, _react2.cleanup)();
-  });
-  it('should have no axe violations when closed', async () => {
-    const {
-      container
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, null));
-    const results = await (0, _jestAxe.axe)(container);
-    expect(results).toHaveNoViolations();
-    (0, _react2.cleanup)();
-  });
-  it('should call onOpen when the anchor is clicked', () => {
-    const mockOpenCallback = jest.fn();
-    const mockCloseCallback = jest.fn();
-    const anchoredOverlay = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
-      onOpenCallback: mockOpenCallback,
-      onCloseCallback: mockCloseCallback
-    }));
-    const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]');
-
-    _react2.fireEvent.click(anchor);
-
-    expect(mockOpenCallback).toHaveBeenCalledTimes(1);
-    expect(mockOpenCallback).toHaveBeenCalledWith('anchor-click');
-    expect(mockCloseCallback).toHaveBeenCalledTimes(0);
-  });
-  it('should call onOpen when the anchor activated by a key press', () => {
-    const mockOpenCallback = jest.fn();
-    const mockCloseCallback = jest.fn();
-    const anchoredOverlay = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
-      onOpenCallback: mockOpenCallback,
-      onCloseCallback: mockCloseCallback
-    }));
-    const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]');
-
-    _react2.fireEvent.keyDown(anchor, {
-      key: ' '
-    });
-
-    expect(mockOpenCallback).toHaveBeenCalledTimes(1);
-    expect(mockOpenCallback).toHaveBeenCalledWith('anchor-key-press');
-    expect(mockCloseCallback).toHaveBeenCalledTimes(0);
-  });
-  it('should call onClose when the user clicks off of the overlay', () => {
-    const mockOpenCallback = jest.fn();
-    const mockCloseCallback = jest.fn();
-    const anchoredOverlay = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
-      initiallyOpen: true,
-      onOpenCallback: mockOpenCallback,
-      onCloseCallback: mockCloseCallback
-    }));
-
-    _react2.fireEvent.mouseDown(anchoredOverlay.baseElement);
-
-    expect(mockOpenCallback).toHaveBeenCalledTimes(0);
-    expect(mockCloseCallback).toHaveBeenCalledTimes(1);
-    expect(mockCloseCallback).toHaveBeenCalledWith('click-outside');
-  });
-  it('should call onClose when the escape key is pressed', async () => {
-    const mockOpenCallback = jest.fn();
-    const mockCloseCallback = jest.fn();
-    const anchoredOverlay = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
-      initiallyOpen: true,
-      onOpenCallback: mockOpenCallback,
-      onCloseCallback: mockCloseCallback
-    }));
-    const overlay = await anchoredOverlay.findByRole('none');
-
-    _react2.fireEvent.keyDown(overlay, {
-      key: 'Escape'
-    });
-
-    expect(mockOpenCallback).toHaveBeenCalledTimes(0);
-    expect(mockCloseCallback).toHaveBeenCalledTimes(1);
-    expect(mockCloseCallback).toHaveBeenCalledWith('escape');
-  });
-  it('should render consistently when open', () => {
-    const anchoredOverlay = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
-      initiallyOpen: true
-    }));
-    expect(anchoredOverlay).toMatchSnapshot();
-  });
-});

package/lib/__tests__/Autocomplete.test.d.ts

@@ -1 +0,0 @@
-import 'babel-polyfill';