@primer/components 29.1.1 → 30.0.0-rc.48fd5c94

package/docs/src/props.js

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1,13 @@
+/* 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'
+  ],
+  testRegex: '/(src|codemods)/__tests__/.*\\.[jt]sx?$'
+}

package/lib/Breadcrumbs.d.ts

@@ -0,0 +1,40 @@
+import * as History from 'history';
+import React from 'react';
+import { SystemCommonProps, SystemFlexProps } from './constants';
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const BreadcrumbsBase: import("styled-components").StyledComponent<"nav", any, SystemFlexProps & SystemCommonProps & SxProp, never>;
+export declare type BreadcrumbsProps = ComponentProps<typeof BreadcrumbsBase>;
+declare function Breadcrumbs({ className, children, theme, ...rest }: React.PropsWithChildren<BreadcrumbsProps>): JSX.Element;
+declare namespace Breadcrumbs {
+    var displayName: string;
+}
+declare const BreadcrumbsItem: import("styled-components").StyledComponent<"a", any, {
+    to?: History.LocationDescriptor<unknown> | undefined;
+    selected?: boolean | undefined;
+} & SystemCommonProps & SxProp, never>;
+export declare type BreadcrumbsItemProps = ComponentProps<typeof BreadcrumbsItem>;
+declare const _default: typeof Breadcrumbs & {
+    Item: import("styled-components").StyledComponent<"a", any, {
+        to?: History.LocationDescriptor<unknown> | undefined;
+        selected?: boolean | undefined;
+    } & SystemCommonProps & SxProp, never>;
+};
+export default _default;
+/**
+ * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
+ */
+export declare const Breadcrumb: typeof Breadcrumbs & {
+    Item: import("styled-components").StyledComponent<"a", any, {
+        to?: History.LocationDescriptor<unknown> | undefined;
+        selected?: boolean | undefined;
+    } & SystemCommonProps & SxProp, never>;
+};
+/**
+ * @deprecated Use the `BreadcrumbsProps` type instead
+ */
+export declare type BreadcrumbProps = ComponentProps<typeof BreadcrumbsBase>;
+/**
+ * @deprecated Use the `BreadcrumbsItemProps` type instead
+ */
+export declare type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbsItem>;

package/lib/{Breadcrumb.js → Breadcrumbs.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Breadcrumb = exports.default = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -24,30 +24,28 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const SELECTED_CLASS = 'selected';
 
 const Wrapper = _styledComponents.default.li.withConfig({
-  displayName: "Breadcrumb__Wrapper",
-  componentId: "c1r3ff-0"
+  displayName: "Breadcrumbs__Wrapper",
+  componentId: "hwwoo0-0"
 })(["display:inline-block;white-space:nowrap;list-style:none;&::after{padding-right:0.5em;padding-left:0.5em;color:", ";font-size:", ";content:'/';}&:first-child{margin-left:0;}&:last-child{&::after{content:none;}}"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('fontSizes.1'));
 
-const BreadcrumbBase = _styledComponents.default.nav.withConfig({
-  displayName: "Breadcrumb__BreadcrumbBase",
-  componentId: "c1r3ff-1"
+const BreadcrumbsBase = _styledComponents.default.nav.withConfig({
+  displayName: "Breadcrumbs__BreadcrumbsBase",
+  componentId: "hwwoo0-1"
 })(["display:flex;justify-content:space-between;", ";", ";", ";"], _constants.COMMON, _constants.FLEX, _sx.default);
 
-function Breadcrumb({
+function Breadcrumbs({
   className,
   children,
   theme,
   ...rest
 }) {
-  const classes = (0, _classnames.default)(className, 'Breadcrumb');
-
   const wrappedChildren = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement(Wrapper, {
     theme: theme
   }, child));
 
-  return /*#__PURE__*/_react.default.createElement(BreadcrumbBase, _extends({
-    className: classes,
-    "aria-label": "breadcrumb",
+  return /*#__PURE__*/_react.default.createElement(BreadcrumbsBase, _extends({
+    className: className,
+    "aria-label": "Breadcrumbs",
     theme: theme
   }, rest), /*#__PURE__*/_react.default.createElement(_Box.default, {
     as: "ol",
@@ -56,22 +54,34 @@ function Breadcrumb({
   }, wrappedChildren));
 }
 
-Breadcrumb.displayName = "Breadcrumb";
+Breadcrumbs.displayName = "Breadcrumbs";
 
-const BreadcrumbItem = _styledComponents.default.a.attrs(props => ({
+const BreadcrumbsItem = _styledComponents.default.a.attrs(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
   className: (0, _classnames.default)(props.selected && SELECTED_CLASS, props.className),
   'aria-current': props.selected ? 'page' : null
 })).withConfig({
-  displayName: "Breadcrumb__BreadcrumbItem",
-  componentId: "c1r3ff-2"
+  displayName: "Breadcrumbs__BreadcrumbsItem",
+  componentId: "hwwoo0-2"
 })(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", " ", ";"], (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), _constants.COMMON, _sx.default);
 
-Breadcrumb.displayName = 'Breadcrumb';
-BreadcrumbItem.displayName = 'Breadcrumb.Item';
+Breadcrumbs.displayName = 'Breadcrumbs';
+BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
+
+var _default = Object.assign(Breadcrumbs, {
+  Item: BreadcrumbsItem
+});
+/**
+ * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
+ */
+
 
-var _default = Object.assign(Breadcrumb, {
-  Item: BreadcrumbItem
+exports.default = _default;
+const Breadcrumb = Object.assign(Breadcrumbs, {
+  Item: BreadcrumbsItem
 });
+/**
+ * @deprecated Use the `BreadcrumbsProps` type instead
+ */
 
-exports.default = _default;
+exports.Breadcrumb = Breadcrumb;

package/lib/__tests__/ActionList.d.ts

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

package/lib/__tests__/ActionList.js

@@ -0,0 +1,67 @@
+"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 _constants = require("../constants");
+
+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,
+    systemPropArray: [_constants.COMMON],
+    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)();
+  });
+});

package/lib/__tests__/ActionMenu.d.ts

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

package/lib/__tests__/ActionMenu.js

@@ -0,0 +1,154 @@
+"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 _constants = require("../constants");
+
+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,
+    systemPropArray: [_constants.COMMON],
+    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.d.ts

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

package/lib/__tests__/AnchoredOverlay.js

@@ -0,0 +1,161 @@
+"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,
+    systemPropArray: [],
+    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__/Avatar.d.ts

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