@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/lib-esm/__tests__/Popover.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import Popover from '../Popover';
+import { render, behavesAsComponent, checkExports } from '../utils/testing';
+import { BORDER, COMMON, LAYOUT, POSITION } from '../constants';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+const comp = /*#__PURE__*/React.createElement(Popover, {
+  caret: "top",
+  open: true
+}, /*#__PURE__*/React.createElement(Popover.Content, null, "Hello!"));
+describe('Popover', () => {
+  behavesAsComponent({
+    Component: Popover,
+    systemPropArray: [COMMON, LAYOUT, POSITION],
+    toRender: () => comp
+  });
+  checkExports('Popover', {
+    default: Popover
+  });
+  describe('Popover.Content', () => {
+    behavesAsComponent({
+      Component: Popover.Content,
+      systemPropArray: [COMMON, LAYOUT, BORDER],
+      toRender: () => comp
+    });
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Popover, {
+      caret: "top",
+      open: true
+    }, /*#__PURE__*/React.createElement(Popover.Content, null, "Hello!")));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  const CARET_POSITIONS = ['top', 'bottom', 'left', 'right', 'bottom-left', 'bottom-right', 'top-left', 'top-right', 'left-bottom', 'left-top', 'right-bottom', 'right-top'];
+
+  for (const pos of CARET_POSITIONS) {
+    it(`renders correctly for a caret position of ${pos}`, () => {
+      const element = /*#__PURE__*/React.createElement(Popover, {
+        caret: pos,
+        open: true
+      }, /*#__PURE__*/React.createElement(Popover.Content, null, "Hello!"));
+      expect(render(element)).toMatchSnapshot();
+    });
+  }
+
+  it('renders both elements as a <div>', () => {
+    expect(render( /*#__PURE__*/React.createElement(Popover, null)).type).toEqual('div');
+    expect(render( /*#__PURE__*/React.createElement(Popover.Content, null)).type).toEqual('div');
+  });
+});

package/lib-esm/__tests__/Portal.d.ts

@@ -0,0 +1 @@
+export {};

package/lib-esm/__tests__/Portal.js

@@ -0,0 +1,104 @@
+import Portal, { registerPortalRoot } from '../Portal/index';
+import { render } from '@testing-library/react';
+import React from 'react';
+import BaseStyles from '../BaseStyles';
+describe('Portal', () => {
+  it('renders a default portal into document.body (no BaseStyles present)', () => {
+    var _generatedRoot$textCo;
+
+    const {
+      baseElement
+    } = render( /*#__PURE__*/React.createElement(Portal, null, "123test123"));
+    const generatedRoot = baseElement.querySelector('#__primerPortalRoot__');
+    expect(generatedRoot).toBeInstanceOf(HTMLElement);
+    expect(generatedRoot === null || generatedRoot === void 0 ? void 0 : (_generatedRoot$textCo = generatedRoot.textContent) === null || _generatedRoot$textCo === void 0 ? void 0 : _generatedRoot$textCo.trim()).toEqual('123test123');
+    baseElement.innerHTML = '';
+  });
+  it('renders a default portal into nearest BaseStyles element', () => {
+    var _generatedRoot$textCo2;
+
+    const toRender = /*#__PURE__*/React.createElement("div", {
+      id: "renderedRoot"
+    }, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement("div", {
+      id: "baseStylesRoot"
+    }, /*#__PURE__*/React.createElement(Portal, null, "123test123"))));
+    const {
+      baseElement
+    } = render(toRender);
+    const baseStylesRoot = baseElement.querySelector('#baseStylesRoot');
+    const baseStylesElement = baseStylesRoot === null || baseStylesRoot === void 0 ? void 0 : baseStylesRoot.parentElement;
+    const generatedRoot = baseStylesElement === null || baseStylesElement === void 0 ? void 0 : baseStylesElement.querySelector('#__primerPortalRoot__');
+    expect(baseStylesRoot).toBeInstanceOf(HTMLElement);
+    expect(baseStylesElement).toBeInstanceOf(HTMLElement);
+    expect(generatedRoot).toBeInstanceOf(HTMLElement);
+    expect(generatedRoot === null || generatedRoot === void 0 ? void 0 : (_generatedRoot$textCo2 = generatedRoot.textContent) === null || _generatedRoot$textCo2 === void 0 ? void 0 : _generatedRoot$textCo2.trim()).toEqual('123test123');
+    baseElement.innerHTML = '';
+  });
+  it('renders into the custom portal root (default root name - declarative)', () => {
+    var _portalRoot$textConte;
+
+    const toRender = /*#__PURE__*/React.createElement("div", {
+      id: "renderedRoot"
+    }, /*#__PURE__*/React.createElement("div", {
+      id: "__primerPortalRoot__"
+    }), /*#__PURE__*/React.createElement(Portal, null, "123test123"));
+    const {
+      baseElement
+    } = render(toRender);
+    const renderedRoot = baseElement.querySelector('#renderedRoot');
+    const portalRoot = renderedRoot === null || renderedRoot === void 0 ? void 0 : renderedRoot.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeInstanceOf(HTMLElement);
+    expect(portalRoot === null || portalRoot === void 0 ? void 0 : (_portalRoot$textConte = portalRoot.textContent) === null || _portalRoot$textConte === void 0 ? void 0 : _portalRoot$textConte.trim()).toEqual('123test123');
+    baseElement.innerHTML = '';
+  });
+  it('renders into the custom portal root (default root name - imperative)', () => {
+    var _portalRoot$textConte2;
+
+    const portalRootJSX = /*#__PURE__*/React.createElement("div", {
+      id: "myPortalRoot"
+    });
+    let {
+      baseElement
+    } = render(portalRootJSX);
+    const portalRoot = baseElement.querySelector('#myPortalRoot');
+    expect(portalRoot).toBeInstanceOf(HTMLElement);
+    registerPortalRoot(baseElement.querySelector('#myPortalRoot'));
+    const toRender = /*#__PURE__*/React.createElement(Portal, null, "123test123");
+    ({
+      baseElement
+    } = render(toRender));
+    expect(portalRoot === null || portalRoot === void 0 ? void 0 : (_portalRoot$textConte2 = portalRoot.textContent) === null || _portalRoot$textConte2 === void 0 ? void 0 : _portalRoot$textConte2.trim()).toEqual('123test123');
+    baseElement.innerHTML = '';
+  });
+  it('renders into multiple custom portal roots (named)', () => {
+    var _generatedRoot$textCo3, _fancyPortalRoot1$tex, _fancyPortalRoot2$tex;
+
+    const portalRootJSX = /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement("div", {
+      id: "myPortalRoot1"
+    }), /*#__PURE__*/React.createElement("div", {
+      id: "myPortalRoot2"
+    }));
+    let {
+      baseElement
+    } = render(portalRootJSX);
+    const fancyPortalRoot1 = baseElement.querySelector('#myPortalRoot1');
+    const fancyPortalRoot2 = baseElement.querySelector('#myPortalRoot2');
+    expect(fancyPortalRoot1).toBeInstanceOf(HTMLElement);
+    expect(fancyPortalRoot2).toBeInstanceOf(HTMLElement);
+    registerPortalRoot(baseElement.querySelector('#myPortalRoot1'), 'fancyPortal1');
+    registerPortalRoot(baseElement.querySelector('#myPortalRoot2'), 'fancyPortal2');
+    const toRender = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Portal, null, "123test123"), /*#__PURE__*/React.createElement(Portal, {
+      containerName: "fancyPortal1"
+    }, "456test456"), /*#__PURE__*/React.createElement(Portal, {
+      containerName: "fancyPortal2"
+    }, "789test789"));
+    ({
+      baseElement
+    } = render(toRender));
+    const generatedRoot = baseElement.querySelector('#__primerPortalRoot__');
+    expect(generatedRoot === null || generatedRoot === void 0 ? void 0 : (_generatedRoot$textCo3 = generatedRoot.textContent) === null || _generatedRoot$textCo3 === void 0 ? void 0 : _generatedRoot$textCo3.trim()).toEqual('123test123');
+    expect(fancyPortalRoot1 === null || fancyPortalRoot1 === void 0 ? void 0 : (_fancyPortalRoot1$tex = fancyPortalRoot1.textContent) === null || _fancyPortalRoot1$tex === void 0 ? void 0 : _fancyPortalRoot1$tex.trim()).toEqual('456test456');
+    expect(fancyPortalRoot2 === null || fancyPortalRoot2 === void 0 ? void 0 : (_fancyPortalRoot2$tex = fancyPortalRoot2.textContent) === null || _fancyPortalRoot2$tex === void 0 ? void 0 : _fancyPortalRoot2$tex.trim()).toEqual('789test789');
+    baseElement.innerHTML = '';
+  });
+});

package/lib-esm/__tests__/Position.d.ts

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

package/lib-esm/__tests__/Position.js

@@ -0,0 +1,138 @@
+import React from 'react';
+import { LAYOUT, POSITION } from '../constants';
+import { Box, Position, Absolute, Fixed, Relative, Sticky } from '..';
+import { render, behavesAsComponent, checkExports } from '../utils/testing';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+describe('position components', () => {
+  describe('Absolute', () => {
+    behavesAsComponent({
+      Component: Absolute,
+      systemPropArray: [LAYOUT, POSITION]
+    });
+    checkExports('Position', {
+      default: Position,
+      Absolute,
+      Fixed,
+      Relative,
+      Sticky
+    });
+    it('should have no axe violations', async () => {
+      const {
+        container
+      } = HTMLRender( /*#__PURE__*/React.createElement(Absolute, null));
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+      cleanup();
+    });
+    it('sets position: absolute', () => {
+      expect(render( /*#__PURE__*/React.createElement(Absolute, null))).toHaveStyleRule('position', 'absolute');
+    });
+    it('can render other components with the as prop', () => {
+      const result = render( /*#__PURE__*/React.createElement(Absolute, {
+        as: Box,
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "border.default",
+        borderRadius: 2
+      }));
+      expect(result).toHaveStyleRule('position', 'absolute');
+      expect(result).toHaveStyleRule('border-width', '1px');
+      expect(result).toHaveStyleRule('border-style', 'solid');
+    });
+  });
+  describe('Fixed', () => {
+    behavesAsComponent({
+      Component: Fixed,
+      systemPropArray: [LAYOUT, POSITION]
+    });
+    it('respects the "as" prop', () => {
+      expect(render( /*#__PURE__*/React.createElement(Fixed, {
+        as: "span"
+      })).type).toEqual('span');
+    });
+    it('should have no axe violations', async () => {
+      const {
+        container
+      } = HTMLRender( /*#__PURE__*/React.createElement(Fixed, null));
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+      cleanup();
+    });
+    it('sets position: fixed', () => {
+      expect(render( /*#__PURE__*/React.createElement(Fixed, null))).toHaveStyleRule('position', 'fixed');
+    });
+    it('can render other components with the as prop', () => {
+      const result = render( /*#__PURE__*/React.createElement(Fixed, {
+        as: Box,
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "border.default",
+        borderRadius: 2
+      }));
+      expect(result).toHaveStyleRule('position', 'fixed');
+      expect(result).toHaveStyleRule('border-width', '1px');
+      expect(result).toHaveStyleRule('border-style', 'solid');
+    });
+  });
+  describe('Relative', () => {
+    behavesAsComponent({
+      Component: Relative,
+      systemPropArray: [LAYOUT, POSITION]
+    });
+    it('should have no axe violations', async () => {
+      const {
+        container
+      } = HTMLRender( /*#__PURE__*/React.createElement(Relative, null));
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+      cleanup();
+    });
+    it('sets position: relative', () => {
+      expect(render( /*#__PURE__*/React.createElement(Relative, null))).toHaveStyleRule('position', 'relative');
+    });
+    it('can render other components with the as prop', () => {
+      const result = render( /*#__PURE__*/React.createElement(Relative, {
+        as: Box,
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "border.default",
+        borderRadius: 2
+      }));
+      expect(result).toHaveStyleRule('position', 'relative');
+      expect(result).toHaveStyleRule('border-width', '1px');
+      expect(result).toHaveStyleRule('border-style', 'solid');
+    });
+  });
+  describe('Sticky', () => {
+    behavesAsComponent({
+      Component: Sticky,
+      systemPropArray: [LAYOUT, POSITION]
+    });
+    it('should have no axe violations', async () => {
+      const {
+        container
+      } = HTMLRender( /*#__PURE__*/React.createElement(Sticky, null));
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+      cleanup();
+    });
+    it('sets position: sticky', () => {
+      expect(render( /*#__PURE__*/React.createElement(Sticky, null))).toHaveStyleRule('position', 'sticky');
+    });
+    it('can render other components with the as prop', () => {
+      const result = render( /*#__PURE__*/React.createElement(Sticky, {
+        as: Box,
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "border.default",
+        borderRadius: 2
+      }));
+      expect(result).toHaveStyleRule('position', 'sticky');
+      expect(result).toHaveStyleRule('border-width', '1px');
+      expect(result).toHaveStyleRule('border-style', 'solid');
+    });
+  });
+});

package/lib-esm/__tests__/ProgressBar.d.ts

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

package/lib-esm/__tests__/ProgressBar.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { ProgressBar } from '..';
+import { render, behavesAsComponent, checkExports } from '../utils/testing';
+import { COMMON } from '../constants';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+describe('ProgressBar', () => {
+  behavesAsComponent({
+    Component: ProgressBar,
+    systemPropArray: [COMMON]
+  });
+  checkExports('ProgressBar', {
+    default: ProgressBar
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(ProgressBar, {
+      progress: 80,
+      barSize: "small"
+    }));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('respects the "barSize" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(ProgressBar, {
+      progress: 80,
+      barSize: "small"
+    }))).toHaveStyleRule('height', '5px');
+    expect(render( /*#__PURE__*/React.createElement(ProgressBar, {
+      progress: 80,
+      barSize: "default"
+    }))).toHaveStyleRule('height', '8px');
+    expect(render( /*#__PURE__*/React.createElement(ProgressBar, {
+      progress: 80,
+      barSize: "large"
+    }))).toHaveStyleRule('height', '10px');
+  });
+  it('respects the "inline" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(ProgressBar, {
+      progress: 80,
+      inline: true
+    }))).toHaveStyleRule('display', 'inline-flex');
+  });
+  it('respects the "width" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(ProgressBar, {
+      progress: 80,
+      inline: true,
+      width: "100px"
+    }))).toHaveStyleRule('width', '100px');
+  });
+  it('respects the "progress" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(ProgressBar, {
+      progress: 80
+    }))).toMatchSnapshot();
+  });
+});

package/lib-esm/__tests__/SelectMenu.d.ts

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

package/lib-esm/__tests__/SelectMenu.js

@@ -0,0 +1,145 @@
+import React from 'react';
+import { SelectMenu, Button } from '..';
+import { mount, render, renderRoot, COMPONENT_DISPLAY_NAME_REGEX, checkExports } from '../utils/testing';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+
+const BasicSelectMenu = ({
+  onClick,
+  as,
+  align = 'left'
+}) => {
+  return /*#__PURE__*/React.createElement(SelectMenu, {
+    as: as
+  }, /*#__PURE__*/React.createElement(Button, {
+    as: "summary"
+  }, "Projects"), /*#__PURE__*/React.createElement(SelectMenu.Modal, {
+    title: "Projects",
+    align: align
+  }, /*#__PURE__*/React.createElement(SelectMenu.List, null, /*#__PURE__*/React.createElement(SelectMenu.Item, {
+    selected: true,
+    href: "#"
+  }, "Primer Components bugs"), /*#__PURE__*/React.createElement(SelectMenu.Item, {
+    onClick: onClick,
+    as: as,
+    "data-test": "menu-item",
+    href: "#"
+  }, "Primer Components roadmap"), /*#__PURE__*/React.createElement(SelectMenu.Divider, null, "stuff"), /*#__PURE__*/React.createElement(SelectMenu.Item, {
+    href: "#"
+  }, " Project 3"), /*#__PURE__*/React.createElement(SelectMenu.Item, {
+    href: "#"
+  }, "Project 4"), /*#__PURE__*/React.createElement(SelectMenu.Footer, null, "footer"))));
+};
+
+BasicSelectMenu.displayName = "BasicSelectMenu";
+
+const MenuWithTabs = ({
+  onClick
+}) => {
+  return /*#__PURE__*/React.createElement(SelectMenu, {
+    initialTab: "Organization"
+  }, /*#__PURE__*/React.createElement(Button, {
+    as: "summary"
+  }, "Projects"), /*#__PURE__*/React.createElement(SelectMenu.Modal, {
+    title: "Projects"
+  }, /*#__PURE__*/React.createElement(SelectMenu.Tabs, null, /*#__PURE__*/React.createElement(SelectMenu.Tab, {
+    index: 0,
+    onClick: onClick,
+    "data-test": "repo-tab",
+    tabName: "Repository"
+  }), /*#__PURE__*/React.createElement(SelectMenu.Tab, {
+    index: 1,
+    tabName: "Organization"
+  })), /*#__PURE__*/React.createElement(SelectMenu.TabPanel, {
+    tabName: "Repository"
+  }, /*#__PURE__*/React.createElement(SelectMenu.Item, {
+    href: "#"
+  }, "Primer Components bugs"), /*#__PURE__*/React.createElement(SelectMenu.Item, {
+    href: "#"
+  }, "Primer Components roadmap"), /*#__PURE__*/React.createElement(SelectMenu.Item, {
+    href: "#"
+  }, " Project 3"), /*#__PURE__*/React.createElement(SelectMenu.Item, {
+    href: "#"
+  }, "Project 4")), /*#__PURE__*/React.createElement(SelectMenu.TabPanel, {
+    tabName: "Organization"
+  }, /*#__PURE__*/React.createElement(SelectMenu.Item, {
+    href: "#"
+  }, " Project 2")), /*#__PURE__*/React.createElement(SelectMenu.Footer, null, "Showing 3 of 3")));
+};
+
+MenuWithTabs.displayName = "MenuWithTabs";
+describe('SelectMenu', () => {
+  checkExports('SelectMenu', {
+    default: SelectMenu
+  });
+
+  for (const Comp of [SelectMenu.List, SelectMenu.Divider, SelectMenu.Filter, SelectMenu.Item, SelectMenu.List, SelectMenu.Modal, SelectMenu.Tabs, SelectMenu.Tab, SelectMenu.TabPanel, SelectMenu.Header]) {
+    it('sets a valid displayName', () => {
+      expect(Comp.displayName).toMatch(COMPONENT_DISPLAY_NAME_REGEX);
+    });
+  }
+
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(BasicSelectMenu, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('does not allow the "as" prop on SelectMenu', () => {
+    const component = mount( /*#__PURE__*/React.createElement(BasicSelectMenu, {
+      as: "span"
+    }));
+    expect(component.find('details').length).toEqual(1);
+  });
+  it('shows correct initial tab', () => {
+    const testInstance = renderRoot( /*#__PURE__*/React.createElement(MenuWithTabs, null));
+    expect(testInstance.findByProps({
+      'aria-selected': true
+    }).props.children).toBe('Organization');
+  });
+  it('clicking on a tab opens the tab', () => {
+    const component = mount( /*#__PURE__*/React.createElement(MenuWithTabs, null));
+    const tab = component.find("[data-test='repo-tab']").first();
+    tab.simulate('click');
+    expect(tab.getDOMNode().attributes.getNamedItem('aria-selected')).toBeTruthy();
+  });
+  it('selected items have aria-checked', () => {
+    const testInstance = renderRoot( /*#__PURE__*/React.createElement(BasicSelectMenu, null));
+    expect(testInstance.findByProps({
+      'aria-checked': true
+    }).props.children[1]).toBe('Primer Components bugs');
+  });
+  it('clicking on a list item calls user provided onClick handler', () => {
+    const mockClick = jest.fn();
+    const component = mount( /*#__PURE__*/React.createElement(BasicSelectMenu, {
+      onClick: mockClick
+    }));
+    const item = component.find("[data-test='menu-item']").first();
+    item.simulate('click');
+    expect(mockClick.mock.calls.length).toEqual(1);
+  });
+  it('clicking on a tab calls user provided onClick handler', () => {
+    const mockClick = jest.fn();
+    const component = mount( /*#__PURE__*/React.createElement(MenuWithTabs, {
+      onClick: mockClick
+    }));
+    const item = component.find("[data-test='repo-tab']").first();
+    item.simulate('click');
+    expect(mockClick.mock.calls.length).toEqual(1);
+  });
+  it('clicking on an item closes the modal', () => {
+    const component = mount( /*#__PURE__*/React.createElement(BasicSelectMenu, null));
+    const item = component.find("[data-test='menu-item']").first();
+    item.simulate('click');
+    expect(component.getDOMNode().attributes.getNamedItem('open')).toBeFalsy();
+  });
+  it('right-aligned modal has right: 0px', () => {
+    expect(render( /*#__PURE__*/React.createElement(BasicSelectMenu, {
+      align: "right"
+    }))).toMatchSnapshot();
+  });
+});

package/lib-esm/__tests__/SelectPanel.d.ts

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

package/lib-esm/__tests__/SelectPanel.js

@@ -0,0 +1,67 @@
+import { cleanup, render as HTMLRender } from '@testing-library/react';
+import 'babel-polyfill';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import React from 'react';
+import theme from '../theme';
+import { SelectPanel } from '../SelectPanel';
+import { COMMON } from '../constants';
+import { behavesAsComponent, checkExports } from '../utils/testing';
+import { BaseStyles, SSRProvider, ThemeProvider } from '..';
+expect.extend(toHaveNoViolations);
+const items = [{
+  text: 'Foo'
+}, {
+  text: 'Bar'
+}, {
+  text: 'Baz'
+}, {
+  text: 'Bon'
+}];
+
+function SimpleSelectPanel() {
+  const [selected, setSelected] = React.useState([]);
+  const [, setFilter] = React.useState('');
+  const [open, setOpen] = React.useState(false);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement(SSRProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(SelectPanel, {
+    items: items,
+    placeholder: "Select Items",
+    placeholderText: "Filter Items",
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    open: open,
+    onOpenChange: setOpen
+  }), /*#__PURE__*/React.createElement("div", {
+    id: "portal-root"
+  }))));
+}
+
+SimpleSelectPanel.displayName = "SimpleSelectPanel";
+describe('SelectPanel', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  behavesAsComponent({
+    Component: SelectPanel,
+    systemPropArray: [COMMON],
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/React.createElement(SimpleSelectPanel, null)
+  });
+  checkExports('SelectPanel', {
+    default: undefined,
+    SelectPanel
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(SimpleSelectPanel, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+});

package/lib-esm/__tests__/SideNav.d.ts

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

package/lib-esm/__tests__/SideNav.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { SideNav } from '..';
+import { render, behavesAsComponent, mount, checkExports } from '../utils/testing';
+import { BORDER, COMMON, LAYOUT, FLEX, TYPOGRAPHY } from '../constants';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+describe('SideNav', () => {
+  behavesAsComponent({
+    Component: SideNav,
+    systemPropArray: [BORDER, LAYOUT, COMMON, FLEX]
+  });
+  checkExports('SideNav', {
+    default: SideNav
+  });
+  describe('SideNav.Link', () => {
+    behavesAsComponent({
+      Component: SideNav.Link,
+      systemPropArray: [COMMON, TYPOGRAPHY]
+    });
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(SideNav, null, /*#__PURE__*/React.createElement(SideNav.Link, {
+      href: "#"
+    }, "One"), /*#__PURE__*/React.createElement(SideNav.Link, {
+      href: "#",
+      selected: true
+    }, "Two")));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('renders a <nav> and <a>', () => {
+    expect(render( /*#__PURE__*/React.createElement(SideNav, null)).type).toEqual('nav');
+    expect(render( /*#__PURE__*/React.createElement(SideNav.Link, null)).type).toEqual('a');
+  });
+  it('sets aria-label appropriately', () => {
+    expect(render( /*#__PURE__*/React.createElement(SideNav, {
+      "aria-label": "foo"
+    })).props['aria-label']).toEqual('foo');
+  });
+  it('sets aria-current on a selected link', () => {
+    const elem = /*#__PURE__*/React.createElement(SideNav, null, /*#__PURE__*/React.createElement(SideNav.Link, {
+      href: "#one"
+    }, "One"), /*#__PURE__*/React.createElement(SideNav.Link, {
+      href: "#two",
+      selected: true
+    }, "Two"));
+    const wrapper = mount(elem);
+    expect(wrapper.find('[aria-current="page"]').text()).toEqual('Two');
+  });
+  it('sets different styles for SideNavs with the lightweight variant', () => {
+    const regular = render( /*#__PURE__*/React.createElement(SideNav, null));
+    const lightweight = render( /*#__PURE__*/React.createElement(SideNav, {
+      variant: "lightweight"
+    }));
+    expect(regular.props.className).toEqual(expect.stringContaining('variant-normal'));
+    expect(lightweight.props.className).toEqual(expect.stringContaining('variant-lightweight'));
+  });
+});

package/lib-esm/__tests__/Spinner.d.ts

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