@primer/components 31.2.1-rc.f73a0f8c → 32.0.1-rc.44e3df9b

package/lib/UnderlineNav.jsx

@@ -1,90 +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 classnames_1 = __importDefault(require("classnames"));
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("./constants");
-const sx_1 = __importDefault(require("./sx"));
-const ITEM_CLASS = 'UnderlineNav-item';
-const SELECTED_CLASS = 'selected';
-const UnderlineNavBase = styled_components_1.default.nav `
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid ${constants_1.get('colors.border.muted')};
-  &.UnderlineNav--right {
-    justify-content: flex-end;
-
-    .UnderlineNav-item {
-      margin-right: 0;
-      margin-left: ${constants_1.get('space.3')};
-    }
-
-    .UnderlineNav-actions {
-      flex: 1 1 auto;
-    }
-  }
-  &.UnderlineNav--full {
-    display: block;
-  }
-
-  .UnderlineNav-body {
-    display: flex;
-    margin-bottom: -1px;
-  }
-
-  .UnderlineNav-actions {
-    align-self: center;
-  }
-
-  ${constants_1.COMMON};
-  ${sx_1.default};
-`;
-function UnderlineNav({ actions, className, align, children, full, label, theme, ...rest }) {
-    const classes = classnames_1.default(className, 'UnderlineNav', align && `UnderlineNav--${align}`, full && 'UnderlineNav--full');
-    return (<UnderlineNavBase className={classes} aria-label={label} theme={theme} {...rest}>
-      <div className="UnderlineNav-body">{children}</div>
-      {actions && <div className="UnderlineNav-actions">{actions}</div>}
-    </UnderlineNavBase>);
-}
-const UnderlineNavLink = styled_components_1.default.a.attrs(props => ({
-    activeClassName: typeof props.to === 'string' ? 'selected' : '',
-    className: classnames_1.default(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
-})) `
-  padding: ${constants_1.get('space.3')} ${constants_1.get('space.2')};
-  margin-right: ${constants_1.get('space.3')};
-  font-size: ${constants_1.get('fontSizes.1')};
-  line-height: ${constants_1.get('lineHeights.default')};
-  color: ${constants_1.get('colors.fg.default')};
-  text-align: center;
-  border-bottom: 2px solid transparent;
-  text-decoration: none;
-
-  &:hover,
-  &:focus {
-    color: ${constants_1.get('colors.fg.default')};
-    text-decoration: none;
-    border-bottom-color: ${constants_1.get('colors.neutral.muted')};
-    transition: 0.2s ease;
-
-    .UnderlineNav-octicon {
-      color: ${constants_1.get('colors.fg.muted')};
-    }
-  }
-
-  &.selected {
-    color: ${constants_1.get('colors.fg.default')};
-    border-bottom-color: ${constants_1.get('colors.primer.border.active')};
-
-    .UnderlineNav-octicon {
-      color: ${constants_1.get('colors.fg.default')};
-    }
-  }
-
-  ${constants_1.COMMON};
-  ${sx_1.default};
-`;
-UnderlineNavLink.displayName = 'UnderlineNav.Link';
-exports.default = Object.assign(UnderlineNav, { Link: UnderlineNavLink });

package/lib/_TextInputWrapper.jsx

@@ -1,120 +0,0 @@
-"use strict";
-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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const styled_components_1 = __importStar(require("styled-components"));
-const styled_system_1 = require("styled-system");
-const constants_1 = require("./constants");
-const sx_1 = __importDefault(require("./sx"));
-const sizeVariants = styled_system_1.variant({
-    variants: {
-        small: {
-            minHeight: '28px',
-            px: 2,
-            py: '3px',
-            fontSize: 0,
-            lineHeight: '20px'
-        },
-        large: {
-            px: 2,
-            py: '10px',
-            fontSize: 3
-        }
-    }
-});
-const TextInputWrapper = styled_components_1.default.span `
-  display: inline-flex;
-  align-items: stretch;
-  min-height: 34px;
-  font-size: ${constants_1.get('fontSizes.1')};
-  line-height: 20px;
-  color: ${constants_1.get('colors.fg.default')};
-  vertical-align: middle;
-  background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
-  background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
-  border: 1px solid ${constants_1.get('colors.border.default')};
-  border-radius: ${constants_1.get('radii.2')};
-  outline: none;
-  box-shadow: ${constants_1.get('shadows.primer.shadow.inset')};
-  cursor: text;
-
-  ${props => {
-    if (props.hasIcon) {
-        return styled_components_1.css `
-        padding: 0;
-      `;
-    }
-    else {
-        return styled_components_1.css `
-        padding: 6px 12px;
-      `;
-    }
-}}
-
-  .TextInput-icon {
-    align-self: center;
-    color: ${constants_1.get('colors.fg.muted')};
-    margin: 0 ${constants_1.get('space.2')};
-    flex-shrink: 0;
-  }
-
-  &:focus-within {
-    border-color: ${constants_1.get('colors.accent.emphasis')};
-    box-shadow: ${constants_1.get('shadows.primer.shadow.focus')};
-  }
-
-  ${props => props.contrast &&
-    styled_components_1.css `
-      background-color: ${constants_1.get('colors.canvas.inset')};
-    `}
-
-  ${props => props.disabled &&
-    styled_components_1.css `
-      color: ${constants_1.get('colors.primer.fg.disabled')};
-      background-color: ${constants_1.get('colors.input.disabledBg')};
-      border-color: ${constants_1.get('colors.border.default')};
-    `}
-  
-    ${props => props.block &&
-    styled_components_1.css `
-      display: block;
-      width: 100%;
-    `}
-
-    ${props => props.block &&
-    props.hasIcon &&
-    styled_components_1.css `
-      display: flex;
-    `}
-  
-    // Ensures inputs don't zoom on mobile but are body-font size on desktop
-    @media (min-width: ${constants_1.get('breakpoints.1')}) {
-    font-size: ${constants_1.get('fontSizes.1')};
-  }
-  ${styled_system_1.width}
-  ${styled_system_1.minWidth}
-    ${styled_system_1.maxWidth}
-    ${sizeVariants}
-    ${sx_1.default};
-`;
-exports.default = TextInputWrapper;

package/lib/_UnstyledTextInput.jsx

@@ -1,22 +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 styled_components_1 = __importDefault(require("styled-components"));
-const sx_1 = __importDefault(require("./sx"));
-const UnstyledTextInput = styled_components_1.default.input `
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  &:focus {
-    outline: 0;
-  }
-
-  ${sx_1.default};
-`;
-exports.default = UnstyledTextInput;

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

@@ -1,124 +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 ActionMenu_1 = require("../ActionMenu");
-const testing_1 = require("../utils/testing");
-const __1 = require("..");
-expect.extend(jest_axe_1.toHaveNoViolations);
-const items = [
-    { text: 'New file' },
-    { text: 'Copy link' },
-    { text: 'Edit file' },
-    { text: 'Delete file', variant: 'danger' }
-];
-const mockOnActivate = jest.fn();
-function SimpleActionMenu() {
-    return (<__1.ThemeProvider theme={theme_1.default}>
-      <__1.SSRProvider>
-        <__1.BaseStyles>
-          <div id="something-else">X</div>
-          <ActionMenu_1.ActionMenu onAction={mockOnActivate} anchorContent="Menu" items={items}/>
-          <div id="portal-root"></div>
-        </__1.BaseStyles>
-      </__1.SSRProvider>
-    </__1.ThemeProvider>);
-}
-describe('ActionMenu', () => {
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-    testing_1.behavesAsComponent({
-        Component: ActionMenu_1.ActionMenu,
-        options: { skipAs: true, skipSx: true },
-        toRender: () => (<__1.SSRProvider>
-        <ActionMenu_1.ActionMenu items={[]}/>
-      </__1.SSRProvider>)
-    });
-    testing_1.checkExports('ActionMenu', {
-        default: undefined,
-        ActionMenu: ActionMenu_1.ActionMenu
-    });
-    it('should have no axe violations', async () => {
-        const { container } = react_1.render(<SimpleActionMenu />);
-        const results = await jest_axe_1.axe(container);
-        expect(results).toHaveNoViolations();
-        react_1.cleanup();
-    });
-    it('should trigger the overlay on trigger click', async () => {
-        const menu = react_1.render(<SimpleActionMenu />);
-        let portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
-        expect(portalRoot).toBeNull();
-        const anchor = await menu.findByText('Menu');
-        react_1.act(() => {
-            react_1.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?.textContent?.trim()).toEqual(itemText);
-    });
-    it('should dismiss the overlay on menuitem click', async () => {
-        const menu = react_1.render(<SimpleActionMenu />);
-        let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
-        expect(portalRoot).toBeNull();
-        const anchor = await menu.findByText('Menu');
-        react_1.act(() => {
-            react_1.fireEvent.click(anchor);
-        });
-        portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
-        expect(portalRoot).toBeTruthy();
-        const menuItem = await menu.queryByText(items[0].text);
-        react_1.act(() => {
-            react_1.fireEvent.click(menuItem);
-        });
-        expect(portalRoot?.textContent).toEqual(''); // menu items are hidden
-    });
-    it('should dismiss the overlay on clicking outside overlay', async () => {
-        const menu = react_1.render(<SimpleActionMenu />);
-        let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
-        expect(portalRoot).toBeNull();
-        const anchor = await menu.findByText('Menu');
-        react_1.act(() => {
-            react_1.fireEvent.click(anchor);
-        });
-        portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
-        expect(portalRoot).toBeTruthy();
-        const somethingElse = (await menu.baseElement.querySelector('#something-else'));
-        react_1.act(() => {
-            react_1.fireEvent.mouseDown(somethingElse);
-        });
-        expect(portalRoot?.textContent).toEqual(''); // menu items are hidden
-    });
-    it('should pass correct values to onAction on menu click', async () => {
-        const menu = react_1.render(<SimpleActionMenu />);
-        let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
-        expect(portalRoot).toBeNull();
-        const anchor = await menu.findByText('Menu');
-        react_1.act(() => {
-            react_1.fireEvent.click(anchor);
-        });
-        portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
-        expect(portalRoot).toBeTruthy();
-        const menuItem = (await portalRoot?.querySelector("[role='menuitem']"));
-        react_1.act(() => {
-            react_1.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.jsx

@@ -1,121 +0,0 @@
-"use strict";
-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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const AnchoredOverlay_1 = require("../AnchoredOverlay");
-const testing_1 = require("../utils/testing");
-const react_2 = require("@testing-library/react");
-const jest_axe_1 = require("jest-axe");
-require("babel-polyfill");
-const index_1 = require("../index");
-const theme_1 = __importDefault(require("../theme"));
-const BaseStyles_1 = __importDefault(require("../BaseStyles"));
-const ThemeProvider_1 = require("../ThemeProvider");
-expect.extend(jest_axe_1.toHaveNoViolations);
-const AnchoredOverlayTestComponent = ({ initiallyOpen = false, onOpenCallback, onCloseCallback } = {}) => {
-    const [open, setOpen] = react_1.useState(initiallyOpen);
-    const onOpen = react_1.useCallback((gesture) => {
-        setOpen(true);
-        onOpenCallback?.(gesture);
-    }, [onOpenCallback]);
-    const onClose = react_1.useCallback((gesture) => {
-        setOpen(true);
-        onCloseCallback?.(gesture);
-    }, [onCloseCallback]);
-    return (<ThemeProvider_1.ThemeProvider theme={theme_1.default}>
-      <index_1.SSRProvider>
-        <BaseStyles_1.default>
-          <AnchoredOverlay_1.AnchoredOverlay open={open} onOpen={onOpen} onClose={onClose} renderAnchor={props => <index_1.Button {...props}>Anchor Button</index_1.Button>}>
-            <button type="button">Focusable Child</button>
-          </AnchoredOverlay_1.AnchoredOverlay>
-        </BaseStyles_1.default>
-      </index_1.SSRProvider>
-    </ThemeProvider_1.ThemeProvider>);
-};
-describe('AnchoredOverlay', () => {
-    testing_1.behavesAsComponent({
-        Component: AnchoredOverlay_1.AnchoredOverlay,
-        options: { skipAs: true, skipSx: true },
-        toRender: () => <AnchoredOverlayTestComponent />
-    });
-    testing_1.checkExports('AnchoredOverlay', {
-        default: undefined,
-        AnchoredOverlay: AnchoredOverlay_1.AnchoredOverlay
-    });
-    it('should have no axe violations when open', async () => {
-        const { container } = react_2.render(<AnchoredOverlayTestComponent initiallyOpen={true}></AnchoredOverlayTestComponent>);
-        const results = await jest_axe_1.axe(container);
-        expect(results).toHaveNoViolations();
-        react_2.cleanup();
-    });
-    it('should have no axe violations when closed', async () => {
-        const { container } = react_2.render(<AnchoredOverlayTestComponent></AnchoredOverlayTestComponent>);
-        const results = await jest_axe_1.axe(container);
-        expect(results).toHaveNoViolations();
-        react_2.cleanup();
-    });
-    it('should call onOpen when the anchor is clicked', () => {
-        const mockOpenCallback = jest.fn();
-        const mockCloseCallback = jest.fn();
-        const anchoredOverlay = react_2.render(<AnchoredOverlayTestComponent onOpenCallback={mockOpenCallback} onCloseCallback={mockCloseCallback}/>);
-        const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]');
-        react_2.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 = react_2.render(<AnchoredOverlayTestComponent onOpenCallback={mockOpenCallback} onCloseCallback={mockCloseCallback}/>);
-        const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]');
-        react_2.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 = react_2.render(<AnchoredOverlayTestComponent initiallyOpen={true} onOpenCallback={mockOpenCallback} onCloseCallback={mockCloseCallback}/>);
-        react_2.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 = react_2.render(<AnchoredOverlayTestComponent initiallyOpen={true} onOpenCallback={mockOpenCallback} onCloseCallback={mockCloseCallback}/>);
-        const overlay = await anchoredOverlay.findByRole('none');
-        react_2.fireEvent.keyDown(overlay, { key: 'Escape' });
-        expect(mockOpenCallback).toHaveBeenCalledTimes(0);
-        expect(mockCloseCallback).toHaveBeenCalledTimes(1);
-        expect(mockCloseCallback).toHaveBeenCalledWith('escape');
-    });
-    it('should render consistently when open', () => {
-        const { container } = react_2.render(<AnchoredOverlayTestComponent initiallyOpen={true}/>);
-        expect(container).toMatchSnapshot();
-    });
-});