@primer/components 33.0.0-rc.b3e4ccee → 33.0.0

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import { ActionList } from '..';
-export function emptyList() {
-  return /*#__PURE__*/React.createElement(ActionList, {
-    items: []
-  });
-}
-emptyList.displayName = "emptyList";
-export function listWithSingleItem() {
-  return /*#__PURE__*/React.createElement(ActionList, {
-    items: [{
-      text: 'One'
-    }]
-  });
-}
-listWithSingleItem.displayName = "listWithSingleItem";
-export function canUseDivDOMProps() {
-  return /*#__PURE__*/React.createElement(ActionList, {
-    items: [{
-      text: 'One',
-      onMouseDown: () => undefined
-    }]
-  });
-}
-canUseDivDOMProps.displayName = "canUseDivDOMProps";
-export function cannotUseAnchorDOMProps() {
-  return /*#__PURE__*/React.createElement(ActionList, {
-    items: [{
-      text: 'One',
-      // @ts-expect-error href is not a div DOM prop
-      href: '#'
-    }]
-  });
-}
-cannotUseAnchorDOMProps.displayName = "cannotUseAnchorDOMProps";
-export function cannotUseAsWithoutRenderProp() {
-  return /*#__PURE__*/React.createElement(ActionList, {
-    items: [{
-      text: 'One',
-      // @ts-expect-error as is only available via manual rendering of items
-      as: 'a'
-    }]
-  });
-}
-cannotUseAsWithoutRenderProp.displayName = "cannotUseAsWithoutRenderProp";

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

@@ -1,2 +0,0 @@
-import 'babel-polyfill';
-import '@testing-library/jest-dom';

package/lib-esm/__tests__/ActionList2.test.js

@@ -1,144 +0,0 @@
-import { cleanup, render as HTMLRender, waitFor, fireEvent } from '@testing-library/react';
-import 'babel-polyfill';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import React from 'react';
-import theme from '../theme';
-import { ActionList } from '../ActionList2';
-import { behavesAsComponent, checkExports, checkStoriesForAxeViolations } from '../utils/testing';
-import { BaseStyles, ThemeProvider, SSRProvider } from '..';
-import '@testing-library/jest-dom';
-expect.extend(toHaveNoViolations);
-
-function SimpleActionList() {
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/React.createElement(SSRProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, null, "New file"), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, null, "Copy link"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Edit file"), /*#__PURE__*/React.createElement(ActionList.Item, {
-    variant: "danger"
-  }, "Delete file")))));
-}
-
-SimpleActionList.displayName = "SimpleActionList";
-const projects = [{
-  name: 'Primer Backlog',
-  scope: 'GitHub'
-}, {
-  name: 'Primer React',
-  scope: 'github/primer'
-}, {
-  name: 'Disabled Project',
-  scope: 'github/primer',
-  disabled: true
-}];
-
-function SingleSelectListStory() {
-  const [selectedIndex, setSelectedIndex] = React.useState(0);
-  return /*#__PURE__*/React.createElement(ActionList, {
-    selectionVariant: "single",
-    showDividers: true,
-    role: "listbox",
-    "aria-label": "Select a project"
-  }, projects.map((project, index) => /*#__PURE__*/React.createElement(ActionList.Item, {
-    key: index,
-    role: "option",
-    selected: index === selectedIndex,
-    onSelect: () => setSelectedIndex(index),
-    disabled: project.disabled
-  }, project.name)));
-}
-
-SingleSelectListStory.displayName = "SingleSelectListStory";
-describe('ActionList', () => {
-  behavesAsComponent({
-    Component: ActionList,
-    options: {
-      skipAs: true,
-      skipSx: true
-    },
-    toRender: () => /*#__PURE__*/React.createElement(ActionList, null)
-  });
-  checkExports('ActionList2', {
-    default: undefined,
-    ActionList
-  });
-  it('should have no axe violations', async () => {
-    const {
-      container
-    } = HTMLRender( /*#__PURE__*/React.createElement(SimpleActionList, null));
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-    cleanup();
-  });
-  it('should fire onSelect on click and keypress', async () => {
-    const component = HTMLRender( /*#__PURE__*/React.createElement(SingleSelectListStory, null));
-    const options = await waitFor(() => component.getAllByRole('option'));
-    expect(options[0]).toHaveAttribute('aria-selected', 'true');
-    expect(options[1]).toHaveAttribute('aria-selected', 'false');
-    fireEvent.click(options[1]);
-    expect(options[0]).toHaveAttribute('aria-selected', 'false');
-    expect(options[1]).toHaveAttribute('aria-selected', 'true'); // We pass keycode here to navigate a implementation detail in react-testing-library
-    // https://github.com/testing-library/react-testing-library/issues/269#issuecomment-455854112
-
-    fireEvent.keyPress(options[0], {
-      key: 'Enter',
-      charCode: 13
-    });
-    expect(options[0]).toHaveAttribute('aria-selected', 'true');
-    expect(options[1]).toHaveAttribute('aria-selected', 'false');
-    fireEvent.keyPress(options[1], {
-      key: ' ',
-      charCode: 32
-    });
-    expect(options[0]).toHaveAttribute('aria-selected', 'false');
-    expect(options[1]).toHaveAttribute('aria-selected', 'true');
-    cleanup();
-  });
-  it('should skip onSelect on disabled items', async () => {
-    const component = HTMLRender( /*#__PURE__*/React.createElement(SingleSelectListStory, null));
-    const options = await waitFor(() => component.getAllByRole('option'));
-    expect(options[0]).toHaveAttribute('aria-selected', 'true');
-    expect(options[2]).toHaveAttribute('aria-selected', 'false');
-    fireEvent.click(options[2]);
-    expect(options[0]).toHaveAttribute('aria-selected', 'true');
-    expect(options[2]).toHaveAttribute('aria-selected', 'false');
-    fireEvent.keyPress(options[2], {
-      key: 'Enter',
-      charCode: 13
-    });
-    expect(options[0]).toHaveAttribute('aria-selected', 'true');
-    expect(options[2]).toHaveAttribute('aria-selected', 'false');
-    cleanup();
-  });
-  it('should throw when selected is provided without a selectionVariant on parent', async () => {
-    // we expect console.error to be called, so we suppress that in the test
-    const mockError = jest.spyOn(console, 'error').mockImplementation(() => jest.fn());
-    expect(() => {
-      HTMLRender( /*#__PURE__*/React.createElement(ActionList, {
-        showDividers: true,
-        role: "listbox",
-        "aria-label": "Select a project"
-      }, /*#__PURE__*/React.createElement(ActionList.Item, {
-        role: "option",
-        selected: true
-      }, "Primer React")));
-    }).toThrow('For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined');
-    cleanup();
-    mockError.mockRestore();
-  });
-  it('should not crash when clicking an item without an onSelect', async () => {
-    const component = HTMLRender( /*#__PURE__*/React.createElement(ActionList, {
-      role: "listbox"
-    }, /*#__PURE__*/React.createElement(ActionList.Item, {
-      role: "option"
-    }, "Primer React")));
-    const option = await waitFor(() => component.getByRole('option'));
-    expect(option).toBeInTheDocument();
-    fireEvent.click(option);
-    fireEvent.keyPress(option, {
-      key: 'Enter',
-      charCode: 13
-    });
-    expect(option).toBeInTheDocument();
-    cleanup();
-  });
-  checkStoriesForAxeViolations('ActionList2');
-});

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

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

package/lib-esm/__tests__/ActionMenu.test.js

@@ -1,139 +0,0 @@
-import { cleanup, render as HTMLRender, act, fireEvent } from '@testing-library/react';
-import 'babel-polyfill';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import React from 'react';
-import theme from '../theme';
-import { ActionMenu } from '../ActionMenu';
-import { behavesAsComponent, checkExports } from '../utils/testing';
-import { BaseStyles, SSRProvider, ThemeProvider } from '..';
-expect.extend(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__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/React.createElement(SSRProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement("div", {
-    id: "something-else"
-  }, "X"), /*#__PURE__*/React.createElement(ActionMenu, {
-    onAction: mockOnActivate,
-    anchorContent: "Menu",
-    items: items
-  }), /*#__PURE__*/React.createElement("div", {
-    id: "portal-root"
-  }))));
-}
-
-SimpleActionMenu.displayName = "SimpleActionMenu";
-describe('ActionMenu', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-  behavesAsComponent({
-    Component: ActionMenu,
-    options: {
-      skipAs: true,
-      skipSx: true
-    },
-    toRender: () => /*#__PURE__*/React.createElement(SSRProvider, null, /*#__PURE__*/React.createElement(ActionMenu, {
-      items: []
-    }))
-  });
-  checkExports('ActionMenu', {
-    default: undefined,
-    ActionMenu
-  });
-  it('should have no axe violations', async () => {
-    const {
-      container
-    } = HTMLRender( /*#__PURE__*/React.createElement(SimpleActionMenu, null));
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-    cleanup();
-  });
-  it('should trigger the overlay on trigger click', async () => {
-    var _portalRoot, _portalRoot$textConte;
-
-    const menu = HTMLRender( /*#__PURE__*/React.createElement(SimpleActionMenu, null));
-    let portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
-    expect(portalRoot).toBeNull();
-    const anchor = await menu.findByText('Menu');
-    act(() => {
-      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 = HTMLRender( /*#__PURE__*/React.createElement(SimpleActionMenu, null));
-    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
-    expect(portalRoot).toBeNull();
-    const anchor = await menu.findByText('Menu');
-    act(() => {
-      fireEvent.click(anchor);
-    });
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
-    expect(portalRoot).toBeTruthy();
-    const menuItem = await menu.queryByText(items[0].text);
-    act(() => {
-      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 = HTMLRender( /*#__PURE__*/React.createElement(SimpleActionMenu, null));
-    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
-    expect(portalRoot).toBeNull();
-    const anchor = await menu.findByText('Menu');
-    act(() => {
-      fireEvent.click(anchor);
-    });
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
-    expect(portalRoot).toBeTruthy();
-    const somethingElse = await menu.baseElement.querySelector('#something-else');
-    act(() => {
-      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 = HTMLRender( /*#__PURE__*/React.createElement(SimpleActionMenu, null));
-    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
-    expect(portalRoot).toBeNull();
-    const anchor = await menu.findByText('Menu');
-    act(() => {
-      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']"));
-    act(() => {
-      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-esm/__tests__/AnchoredOverlay.test.d.ts

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

package/lib-esm/__tests__/AnchoredOverlay.test.js

@@ -1,136 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { AnchoredOverlay } from '../AnchoredOverlay';
-import { behavesAsComponent, checkExports } from '../utils/testing';
-import { render as HTMLRender, cleanup, fireEvent } from '@testing-library/react';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import 'babel-polyfill';
-import { Button, SSRProvider } from '../index';
-import theme from '../theme';
-import BaseStyles from '../BaseStyles';
-import { ThemeProvider } from '../ThemeProvider';
-expect.extend(toHaveNoViolations);
-
-const AnchoredOverlayTestComponent = ({
-  initiallyOpen = false,
-  onOpenCallback,
-  onCloseCallback
-} = {}) => {
-  const [open, setOpen] = useState(initiallyOpen);
-  const onOpen = useCallback(gesture => {
-    setOpen(true);
-    onOpenCallback === null || onOpenCallback === void 0 ? void 0 : onOpenCallback(gesture);
-  }, [onOpenCallback]);
-  const onClose = useCallback(gesture => {
-    setOpen(true);
-    onCloseCallback === null || onCloseCallback === void 0 ? void 0 : onCloseCallback(gesture);
-  }, [onCloseCallback]);
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/React.createElement(SSRProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(AnchoredOverlay, {
-    open: open,
-    onOpen: onOpen,
-    onClose: onClose,
-    renderAnchor: props => /*#__PURE__*/React.createElement(Button, props, "Anchor Button")
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button"
-  }, "Focusable Child")))));
-};
-
-AnchoredOverlayTestComponent.displayName = "AnchoredOverlayTestComponent";
-describe('AnchoredOverlay', () => {
-  behavesAsComponent({
-    Component: AnchoredOverlay,
-    options: {
-      skipAs: true,
-      skipSx: true
-    },
-    toRender: () => /*#__PURE__*/React.createElement(AnchoredOverlayTestComponent, null)
-  });
-  checkExports('AnchoredOverlay', {
-    default: undefined,
-    AnchoredOverlay
-  });
-  it('should have no axe violations when open', async () => {
-    const {
-      container
-    } = HTMLRender( /*#__PURE__*/React.createElement(AnchoredOverlayTestComponent, {
-      initiallyOpen: true
-    }));
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-    cleanup();
-  });
-  it('should have no axe violations when closed', async () => {
-    const {
-      container
-    } = HTMLRender( /*#__PURE__*/React.createElement(AnchoredOverlayTestComponent, null));
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-    cleanup();
-  });
-  it('should call onOpen when the anchor is clicked', () => {
-    const mockOpenCallback = jest.fn();
-    const mockCloseCallback = jest.fn();
-    const anchoredOverlay = HTMLRender( /*#__PURE__*/React.createElement(AnchoredOverlayTestComponent, {
-      onOpenCallback: mockOpenCallback,
-      onCloseCallback: mockCloseCallback
-    }));
-    const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]');
-    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 = HTMLRender( /*#__PURE__*/React.createElement(AnchoredOverlayTestComponent, {
-      onOpenCallback: mockOpenCallback,
-      onCloseCallback: mockCloseCallback
-    }));
-    const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]');
-    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 = HTMLRender( /*#__PURE__*/React.createElement(AnchoredOverlayTestComponent, {
-      initiallyOpen: true,
-      onOpenCallback: mockOpenCallback,
-      onCloseCallback: mockCloseCallback
-    }));
-    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 = HTMLRender( /*#__PURE__*/React.createElement(AnchoredOverlayTestComponent, {
-      initiallyOpen: true,
-      onOpenCallback: mockOpenCallback,
-      onCloseCallback: mockCloseCallback
-    }));
-    const overlay = await anchoredOverlay.findByRole('none');
-    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
-    } = HTMLRender( /*#__PURE__*/React.createElement(AnchoredOverlayTestComponent, {
-      initiallyOpen: true
-    }));
-    expect(container).toMatchSnapshot();
-  });
-});

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

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