@primer/components 32.0.0-rc.7200a6a6 → 32.0.0

package/docs/src/component-checklist.js

@@ -1,81 +0,0 @@
-import {Box, StyledOcticon, Link, Text} from '@primer/components'
-import {H3} from '@primer/gatsby-theme-doctocat/src/components/heading'
-import {CheckCircleFillIcon, CircleIcon, SkipIcon} from '@primer/octicons-react'
-import React from 'react'
-
-/** Render component status checklist in documentation pages */
-export function ComponentChecklist({items}) {
-  return (
-    <>
-      <H3>Alpha</H3>
-      <Checklist aria-describedby="alpha">
-        <Checklist.Item checked={items.propsDocumented}>Component props are documented.</Checklist.Item>
-        <Checklist.Item checked={items.noUnnecessaryDeps}>
-          Component does not have any unnecessary third-party dependencies.
-        </Checklist.Item>
-        <Checklist.Item checked={items.adaptsToThemes}>Component can adapt to different themes.</Checklist.Item>
-        <Checklist.Item checked={items.adaptsToScreenSizes}>
-          Component can adapt to different screen sizes.
-        </Checklist.Item>
-        <Checklist.Item checked={items.fullTestCoverage}>Component has 100% test coverage.</Checklist.Item>
-      </Checklist>
-      <H3>Beta</H3>
-      <Checklist aria-describedby="beta">
-        <Checklist.Item checked={items.usedInProduction}>Component is used in a production application.</Checklist.Item>
-        <Checklist.Item checked={items.usageExamplesDocumented}>Common usage examples are documented.</Checklist.Item>
-        <Checklist.Item checked={items.designReviewed}>
-          Component has been reviewed by a systems designer and any resulting issues have been addressed.
-        </Checklist.Item>
-        <Checklist.Item checked={items.a11yReviewed}>
-          Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.
-        </Checklist.Item>
-      </Checklist>
-      <H3>Stable</H3>
-      <Checklist aria-describedby="stable">
-        <Checklist.Item checked={items.apiIsStable}>
-          Component API has been stable with no breaking changes for at least one month.
-        </Checklist.Item>
-        <Checklist.Item checked={items.addressedApiFeedback}>
-          Feedback on API usability has been sought from developers using the component and any resulting issues have
-          been addressed.
-        </Checklist.Item>
-        <Checklist.Item checked={items.hasDesignGuidelines}>
-          Component has corresponding design guidelines documented in the{' '}
-          <Link href="https://primer.style/design/">interface guidelines</Link>.
-        </Checklist.Item>
-        <Checklist.Item checked={items.hasFigmaComponent}>
-          Component has corresponding Figma component in the Primer Web library.
-        </Checklist.Item>
-      </Checklist>
-    </>
-  )
-}
-
-// TODO: This component should live in Doctocat
-function Checklist({'aria-describedby': ariaDescribedby, children}) {
-  return (
-    <Box aria-describedby={ariaDescribedby} as="ul" display="grid" gridGap={2} p={0} m={0} mb={3}>
-      {children}
-    </Box>
-  )
-}
-
-Checklist.Item = ({checked, children}) => {
-  return (
-    <Box as="li" display="grid" gridTemplateColumns="auto 1fr" gridGap={2} sx={{listStyleType: 'none'}}>
-      <Box height="24px" display="flex" alignItems="center">
-        {checked ? (
-          <StyledOcticon aria-label="Completed" icon={CheckCircleFillIcon} sx={{color: 'success.fg'}} />
-        ) : checked === null ? (
-          <StyledOcticon icon={SkipIcon} sx={{color: 'fg.subtle'}} />
-        ) : (
-          <StyledOcticon aria-label="To do" icon={CircleIcon} sx={{color: 'fg.subtle'}} />
-        )}
-      </Box>
-      <Text color={checked === null ? 'fg.subtle' : 'fg.default'}>
-        {checked === null ? <Text color="fg.subtle">N/A: </Text> : null}
-        {children}
-      </Text>
-    </Box>
-  )
-}

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.test.jsx

@@ -1,49 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("@testing-library/react");
-require("babel-polyfill");
-const jest_axe_1 = require("jest-axe");
-const react_2 = __importDefault(require("react"));
-const theme_1 = __importDefault(require("../theme"));
-const ActionList_1 = require("../ActionList");
-const testing_1 = require("../utils/testing");
-const __1 = require("..");
-expect.extend(jest_axe_1.toHaveNoViolations);
-function SimpleActionList() {
-    return (<__1.ThemeProvider theme={theme_1.default}>
-      <__1.BaseStyles>
-        <ActionList_1.ActionList items={[
-            { text: 'New file' },
-            ActionList_1.ActionList.Divider,
-            { text: 'Copy link' },
-            { text: 'Edit file' },
-            { text: 'Delete file', variant: 'danger' }
-        ]}/>
-      </__1.BaseStyles>
-    </__1.ThemeProvider>);
-}
-describe('ActionList', () => {
-    testing_1.behavesAsComponent({
-        Component: ActionList_1.ActionList,
-        options: { skipAs: true, skipSx: true },
-        toRender: () => <ActionList_1.ActionList items={[]}/>
-    });
-    testing_1.checkExports('ActionList', {
-        default: undefined,
-        ActionList: ActionList_1.ActionList
-    });
-    it('should have no axe violations', async () => {
-        const { container } = react_1.render(<SimpleActionList />);
-        const results = await jest_axe_1.axe(container);
-        expect(results).toHaveNoViolations();
-        react_1.cleanup();
-    });
-});
-describe('ActionList.Item', () => {
-    testing_1.behavesAsComponent({
-        Component: ActionList_1.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__/ActionList.types.test.jsx

@@ -1,45 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.cannotUseAsWithoutRenderProp = exports.cannotUseAnchorDOMProps = exports.canUseDivDOMProps = exports.listWithSingleItem = exports.emptyList = void 0;
-const react_1 = __importDefault(require("react"));
-const __1 = require("..");
-function emptyList() {
-    return <__1.ActionList items={[]}/>;
-}
-exports.emptyList = emptyList;
-function listWithSingleItem() {
-    return <__1.ActionList items={[{ text: 'One' }]}/>;
-}
-exports.listWithSingleItem = listWithSingleItem;
-function canUseDivDOMProps() {
-    return (<__1.ActionList items={[
-            {
-                text: 'One',
-                onMouseDown: () => undefined
-            }
-        ]}/>);
-}
-exports.canUseDivDOMProps = canUseDivDOMProps;
-function cannotUseAnchorDOMProps() {
-    return (<__1.ActionList items={[
-            {
-                text: 'One',
-                // @ts-expect-error href is not a div DOM prop
-                href: '#'
-            }
-        ]}/>);
-}
-exports.cannotUseAnchorDOMProps = cannotUseAnchorDOMProps;
-function cannotUseAsWithoutRenderProp() {
-    return (<__1.ActionList items={[
-            {
-                text: 'One',
-                // @ts-expect-error as is only available via manual rendering of items
-                as: 'a'
-            }
-        ]}/>);
-}
-exports.cannotUseAsWithoutRenderProp = cannotUseAsWithoutRenderProp;

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

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

package/lib/__tests__/ActionList2.test.js

@@ -1,53 +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("../ActionList2");
-
-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(_.SSRProvider, null, /*#__PURE__*/_react2.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, null, /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, null, "New file"), /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Divider, null), /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, null, "Copy link"), /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, null, "Edit file"), /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, {
-    variant: "danger"
-  }, "Delete file")))));
-}
-
-SimpleActionList.displayName = "SimpleActionList";
-describe('ActionList', () => {
-  (0, _testing.behavesAsComponent)({
-    Component: _ActionList.ActionList,
-    options: {
-      skipAs: true,
-      skipSx: true
-    },
-    toRender: () => /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, null)
-  });
-  (0, _testing.checkExports)('ActionList2', {
-    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)();
-  });
-});

package/lib/__tests__/ActionList2.test.jsx

@@ -1,46 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("@testing-library/react");
-require("babel-polyfill");
-const jest_axe_1 = require("jest-axe");
-const react_2 = __importDefault(require("react"));
-const theme_1 = __importDefault(require("../theme"));
-const ActionList2_1 = require("../ActionList2");
-const testing_1 = require("../utils/testing");
-const __1 = require("..");
-expect.extend(jest_axe_1.toHaveNoViolations);
-function SimpleActionList() {
-    return (<__1.ThemeProvider theme={theme_1.default}>
-      <__1.SSRProvider>
-        <__1.BaseStyles>
-          <ActionList2_1.ActionList>
-            <ActionList2_1.ActionList.Item>New file</ActionList2_1.ActionList.Item>
-            <ActionList2_1.ActionList.Divider />
-            <ActionList2_1.ActionList.Item>Copy link</ActionList2_1.ActionList.Item>
-            <ActionList2_1.ActionList.Item>Edit file</ActionList2_1.ActionList.Item>
-            <ActionList2_1.ActionList.Item variant="danger">Delete file</ActionList2_1.ActionList.Item>
-          </ActionList2_1.ActionList>
-        </__1.BaseStyles>
-      </__1.SSRProvider>
-    </__1.ThemeProvider>);
-}
-describe('ActionList', () => {
-    testing_1.behavesAsComponent({
-        Component: ActionList2_1.ActionList,
-        options: { skipAs: true, skipSx: true },
-        toRender: () => <ActionList2_1.ActionList />
-    });
-    testing_1.checkExports('ActionList2', {
-        default: undefined,
-        ActionList: ActionList2_1.ActionList
-    });
-    it('should have no axe violations', async () => {
-        const { container } = react_1.render(<SimpleActionList />);
-        const results = await jest_axe_1.axe(container);
-        expect(results).toHaveNoViolations();
-        react_1.cleanup();
-    });
-});

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