@primer/components 31.2.0-rc.6afeaa37 → 31.2.0-rc.76ed571d

package/lib/_UnstyledTextInput.jsx

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

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

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

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

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

@@ -0,0 +1,121 @@
+"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();
+    });
+});