@primer/components 33.0.0 → 33.1.0-rc.6856bcf5

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

@@ -0,0 +1,133 @@
+import React from 'react';
+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
+    });
+    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
+    });
+    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
+    });
+    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
+    });
+    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.test.d.ts

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

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { ProgressBar } 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('ProgressBar', () => {
+  behavesAsComponent({
+    Component: ProgressBar
+  });
+  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__/Radio.test.d.ts

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

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

@@ -0,0 +1,183 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { Radio } from '..';
+import { behavesAsComponent, checkExports } from '../utils/testing';
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import { toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+import '@testing-library/jest-dom';
+expect.extend(toHaveNoViolations);
+describe('Radio', () => {
+  const defaultProps = {
+    name: 'mock',
+    value: 'mock value'
+  };
+  beforeEach(() => {
+    jest.resetAllMocks();
+    cleanup();
+  });
+  behavesAsComponent({
+    Component: Radio
+  });
+  checkExports('Radio', {
+    default: Radio
+  });
+  it('renders a valid radio input', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Radio, defaultProps));
+    const radio = getByRole('radio');
+    expect(radio).toBeDefined();
+  });
+  it('renders an unchecked radio by default', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Radio, defaultProps));
+    const radio = getByRole('radio');
+    expect(radio.checked).toEqual(false);
+  });
+  it('accepts and applies value and name attributes', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Radio, defaultProps));
+    const radio = getByRole('radio');
+    expect(radio).toHaveAttribute('name', defaultProps.name);
+    expect(radio).toHaveAttribute('value', defaultProps.value);
+  });
+  it('renders an active radio when checked attribute is passed', () => {
+    const handleChange = jest.fn();
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Radio, _extends({}, defaultProps, {
+      checked: true,
+      onChange: handleChange
+    })));
+    const radio = getByRole('radio');
+    expect(radio.checked).toEqual(true);
+  });
+  it('accepts a change handler that can alter a single radio state', () => {
+    const handleChange = jest.fn();
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Radio, _extends({}, defaultProps, {
+      onChange: handleChange
+    })));
+    const radio = getByRole('radio');
+    expect(radio.checked).toEqual(false);
+    fireEvent.click(radio);
+    expect(handleChange).toHaveBeenCalled();
+    expect(radio.checked).toEqual(true);
+  });
+  it('renders correct behavior for multiple radio buttons in a group', () => {
+    const handleChange = jest.fn();
+
+    const RadioGroup = () => /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement(Radio, _extends({}, defaultProps, {
+      value: "radio-one",
+      onChange: handleChange
+    })), /*#__PURE__*/React.createElement(Radio, _extends({}, defaultProps, {
+      value: "radio-two",
+      onChange: handleChange
+    })));
+
+    const {
+      getByDisplayValue
+    } = render( /*#__PURE__*/React.createElement(RadioGroup, null));
+    const radioOne = getByDisplayValue('radio-one');
+    const radioTwo = getByDisplayValue('radio-two');
+    expect(radioOne).not.toBeChecked();
+    expect(radioTwo).not.toBeChecked();
+    fireEvent.click(radioOne);
+    expect(radioOne).toBeChecked();
+    expect(radioTwo).not.toBeChecked();
+    fireEvent.click(radioTwo);
+    expect(radioOne).not.toBeChecked();
+    expect(radioTwo).toBeChecked();
+  });
+  it('renders an inactive radio state correctly', () => {
+    const handleChange = jest.fn();
+    const {
+      getByRole,
+      rerender
+    } = render( /*#__PURE__*/React.createElement(Radio, _extends({}, defaultProps, {
+      disabled: true,
+      onChange: handleChange
+    })));
+    const radio = getByRole('radio');
+    expect(radio.disabled).toEqual(true);
+    expect(radio).not.toBeChecked();
+    expect(radio).toHaveAttribute('aria-disabled', 'true');
+    fireEvent.change(radio);
+    expect(radio.disabled).toEqual(true);
+    expect(radio).not.toBeChecked();
+    expect(radio).toHaveAttribute('aria-disabled', 'true'); // remove disabled attribute and retest
+
+    rerender( /*#__PURE__*/React.createElement(Radio, _extends({}, defaultProps, {
+      onChange: handleChange
+    })));
+    expect(radio).toHaveAttribute('aria-disabled', 'false');
+  });
+  it('renders an uncontrolled component correctly', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Radio, _extends({}, defaultProps, {
+      defaultChecked: true
+    })));
+    const radio = getByRole('radio');
+    expect(radio.checked).toEqual(true);
+  });
+  it('renders an aria-checked attribute correctly', () => {
+    const handleChange = jest.fn();
+    const {
+      getByRole,
+      rerender
+    } = render( /*#__PURE__*/React.createElement(Radio, _extends({}, defaultProps, {
+      checked: false,
+      onChange: handleChange
+    })));
+    const radio = getByRole('radio');
+    expect(radio).toHaveAttribute('aria-checked', 'false');
+    rerender( /*#__PURE__*/React.createElement(Radio, _extends({}, defaultProps, {
+      checked: true,
+      onChange: handleChange
+    })));
+    expect(radio).toHaveAttribute('aria-checked', 'true');
+  });
+  it('renders an invalid aria state when validation prop indicates an error', () => {
+    const handleChange = jest.fn();
+    const {
+      getByRole,
+      rerender
+    } = render( /*#__PURE__*/React.createElement(Radio, _extends({}, defaultProps, {
+      onChange: handleChange
+    })));
+    const radio = getByRole('radio');
+    expect(radio).toHaveAttribute('aria-invalid', 'false');
+    rerender( /*#__PURE__*/React.createElement(Radio, _extends({}, defaultProps, {
+      onChange: handleChange,
+      validationStatus: "success"
+    })));
+    expect(radio).toHaveAttribute('aria-invalid', 'false');
+    rerender( /*#__PURE__*/React.createElement(Radio, _extends({}, defaultProps, {
+      onChange: handleChange,
+      validationStatus: "error"
+    })));
+    expect(radio).toHaveAttribute('aria-invalid', 'true');
+  });
+  it('renders an aria state indicating the field is required', () => {
+    const handleChange = jest.fn();
+    const {
+      getByRole,
+      rerender
+    } = render( /*#__PURE__*/React.createElement(Radio, _extends({}, defaultProps, {
+      onChange: handleChange
+    })));
+    const radio = getByRole('radio');
+    expect(radio).toHaveAttribute('aria-required', 'false');
+    rerender( /*#__PURE__*/React.createElement(Radio, _extends({}, defaultProps, {
+      onChange: handleChange,
+      required: true
+    })));
+    expect(radio).toHaveAttribute('aria-required', 'true');
+  });
+});

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

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

package/lib-esm/__tests__/SelectMenu.test.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__/SelectMenu.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import SelectMenu from '../SelectMenu';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(SelectMenu, null);
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectMenu, {
+    backgroundColor: "lightgray"
+  }), /*#__PURE__*/React.createElement(SelectMenu.List, {
+    backgroundColor: "lightgreen"
+  }), /*#__PURE__*/React.createElement(SelectMenu.Divider, {
+    backgroundColor: "lightgrey"
+  }), /*#__PURE__*/React.createElement(SelectMenu.Filter, {
+    backgroundColor: "lightpink"
+  }), /*#__PURE__*/React.createElement(SelectMenu.Footer, {
+    backgroundColor: "lightsalmon"
+  }), /*#__PURE__*/React.createElement(SelectMenu.Item, {
+    backgroundColor: "lightseagreen"
+  }), /*#__PURE__*/React.createElement(SelectMenu.Modal, {
+    backgroundColor: "lightskyblue"
+  }), /*#__PURE__*/React.createElement(SelectMenu.Tabs, {
+    backgroundColor: "lightslategray"
+  }), /*#__PURE__*/React.createElement(SelectMenu.Tab, {
+    backgroundColor: "lightslategrey"
+  }), /*#__PURE__*/React.createElement(SelectMenu.TabPanel, {
+    backgroundColor: "lightsteelblue"
+  }), /*#__PURE__*/React.createElement(SelectMenu.Header, {
+    backgroundColor: "lightyellow"
+  }), /*#__PURE__*/React.createElement(SelectMenu.LoadingAnimation, {
+    backgroundColor: "lightcyan"
+  }));
+}

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

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

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

@@ -0,0 +1,65 @@
+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 { 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,
+    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__/SelectPanel.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldAcceptDOMPropsOnOverlay(): JSX.Element;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { SelectPanel } from '../SelectPanel';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(SelectPanel, {
+    placeholderText: "",
+    open: false,
+    onOpenChange: () => null,
+    items: [],
+    selected: [],
+    onSelectedChange: () => null,
+    onFilterChange: () => null
+  });
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldAcceptDOMPropsOnOverlay() {
+  return /*#__PURE__*/React.createElement(SelectPanel, {
+    placeholderText: "",
+    open: false,
+    onOpenChange: () => null,
+    items: [],
+    selected: [],
+    onSelectedChange: () => null,
+    onFilterChange: () => null,
+    overlayProps: {
+      onMouseDown: () => null
+    }
+  });
+}
+shouldAcceptDOMPropsOnOverlay.displayName = "shouldAcceptDOMPropsOnOverlay";

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

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