@primer/components 29.0.0 → 29.1.1-rc.cea79543

package/lib/Timeline.d.ts

@@ -374,7 +374,6 @@ declare const _default: string & import("styled-components").StyledComponentBase
             onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
             onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
             onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
-            css?: import("@emotion/core").InterpolationWithTheme<any>;
             bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
             m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
             mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;

package/lib/Timeline.js

@@ -34,7 +34,7 @@ const TimelineItem = (0, _styledComponents.default)(_Box.default).attrs(props =>
 })).withConfig({
   displayName: "Timeline__TimelineItem",
   componentId: "c4dq2e-1"
-})(["display:flex;position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.secondary'), props => props.condensed && (0, _styledComponents.css)(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], (0, _constants.get)('space.1'), (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.icon.tertiary'), (0, _constants.get)('colors.bg.canvas')), _constants.COMMON, _sx.default);
+})(["display:flex;position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.muted'), props => props.condensed && (0, _styledComponents.css)(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], (0, _constants.get)('space.1'), (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.canvas.default')), _constants.COMMON, _sx.default);
 
 const TimelineBadge = props => {
   return /*#__PURE__*/_react.default.createElement(_Box.default, {
@@ -47,9 +47,9 @@ const TimelineBadge = props => {
     borderRadius: "50%",
     borderWidth: "2px",
     borderStyle: "solid",
-    borderColor: "bg.canvas",
+    borderColor: "canvas.default",
     overflow: "hidden",
-    color: "icon.secondary",
+    color: "fg.muted",
     bg: "timeline.badgeBg",
     width: "32px",
     height: "32px",
@@ -64,11 +64,11 @@ TimelineBadge.displayName = "TimelineBadge";
 const TimelineBody = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "Timeline__TimelineBody",
   componentId: "c4dq2e-2"
-})(["min-width:0;max-width:100%;margin-top:", ";color:", ";flex:auto;font-size:", ";", ";"], (0, _constants.get)('space.1'), (0, _constants.get)('colors.timeline.text'), (0, _constants.get)('fontSizes.1'), _sx.default);
+})(["min-width:0;max-width:100%;margin-top:", ";color:", ";flex:auto;font-size:", ";", ";"], (0, _constants.get)('space.1'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('fontSizes.1'), _sx.default);
 const TimelineBreak = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "Timeline__TimelineBreak",
   componentId: "c4dq2e-3"
-})(["position:relative z-index:1;height:24px;margin:0;margin-bottom:-", ";margin-left:0;background-color:", ";border:0;border-top:", " solid ", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('colors.bg.canvas'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.border.primary'), _sx.default);
+})(["position:relative z-index:1;height:24px;margin:0;margin-bottom:-", ";margin-left:0;background-color:", ";border:0;border-top:", " solid ", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.border.default'), _sx.default);
 TimelineItem.displayName = 'Timeline.Item';
 TimelineBadge.displayName = 'Timeline.Badge';
 TimelineBody.displayName = 'Timeline.Body';

package/lib/Tooltip.js

@@ -22,7 +22,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const TooltipBase = _styledComponents.default.span.withConfig({
   displayName: "Tooltip__TooltipBase",
   componentId: "kp39nc-0"
-})(["position:relative;&::before{position:absolute;z-index:1000001;display:none;width:0px;height:0px;color:", ";pointer-events:none;content:'';border:6px solid transparent;opacity:0;}&::after{position:absolute;z-index:1000000;display:none;padding:0.5em 0.75em;font:normal normal 11px/1.5 ", ";-webkit-font-smoothing:subpixel-antialiased;color:", ";text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:", ";border-radius:", ";opacity:0;}@keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}&:hover,&:active,&:focus{&::before,&::after{display:inline-block;text-decoration:none;animation-name:tooltip-appear;animation-duration:0.1s;animation-fill-mode:forwards;animation-timing-function:ease-in;animation-delay:0.4s;}}&.tooltipped-no-delay:hover,&.tooltipped-no-delay:active,&.tooltipped-no-delay:focus{&::before,&::after{animation-delay:0s;}}&.tooltipped-multiline:hover,&.tooltipped-multiline:active,&.tooltipped-multiline:focus{&::after{display:table-cell;}}&.tooltipped-s,&.tooltipped-se,&.tooltipped-sw{&::after{top:100%;right:50%;margin-top:6px;}&::before{top:auto;right:50%;bottom:-7px;margin-right:-6px;border-bottom-color:", ";}}&.tooltipped-se{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-sw::after{margin-right:-", ";}&.tooltipped-n,&.tooltipped-ne,&.tooltipped-nw{&::after{right:50%;bottom:100%;margin-bottom:6px;}&::before{top:-7px;right:50%;bottom:auto;margin-right:-6px;border-top-color:", ";}}&.tooltipped-ne{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-nw::after{margin-right:-", ";}&.tooltipped-s::after,&.tooltipped-n::after{transform:translateX(50%);}&.tooltipped-w{&::after{right:100%;bottom:50%;margin-right:6px;transform:translateY(50%);}&::before{top:50%;bottom:50%;left:-7px;margin-top:-6px;border-left-color:", ";}}&.tooltipped-e{&::after{bottom:50%;left:100%;margin-left:6px;transform:translateY(50%);}&::before{top:50%;right:-7px;bottom:50%;margin-top:-6px;border-right-color:", ";}}&.tooltipped-multiline{&::after{width:max-content;max-width:250px;word-wrap:break-word;white-space:pre-line;border-collapse:separate;}&.tooltipped-s::after,&.tooltipped-n::after{right:auto;left:50%;transform:translateX(-50%);}&.tooltipped-w::after,&.tooltipped-e::after{right:100%;}}&.tooltipped-align-right-2::after{right:0;margin-right:0;}&.tooltipped-align-right-2::before{right:15px;}&.tooltipped-align-left-2::after{left:0;margin-left:0;}&.tooltipped-align-left-2::before{left:10px;}", ";", ";"], (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('fonts.normal'), (0, _constants.get)('colors.tooltip.text'), (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('radii.1'), (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('colors.tooltip.bg'), _constants.COMMON, _sx.default);
+})(["position:relative;&::before{position:absolute;z-index:1000001;display:none;width:0px;height:0px;color:", ";pointer-events:none;content:'';border:6px solid transparent;opacity:0;}&::after{position:absolute;z-index:1000000;display:none;padding:0.5em 0.75em;font:normal normal 11px/1.5 ", ";-webkit-font-smoothing:subpixel-antialiased;color:", ";text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:", ";border-radius:", ";opacity:0;}@keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}&:hover,&:active,&:focus{&::before,&::after{display:inline-block;text-decoration:none;animation-name:tooltip-appear;animation-duration:0.1s;animation-fill-mode:forwards;animation-timing-function:ease-in;animation-delay:0.4s;}}&.tooltipped-no-delay:hover,&.tooltipped-no-delay:active,&.tooltipped-no-delay:focus{&::before,&::after{animation-delay:0s;}}&.tooltipped-multiline:hover,&.tooltipped-multiline:active,&.tooltipped-multiline:focus{&::after{display:table-cell;}}&.tooltipped-s,&.tooltipped-se,&.tooltipped-sw{&::after{top:100%;right:50%;margin-top:6px;}&::before{top:auto;right:50%;bottom:-7px;margin-right:-6px;border-bottom-color:", ";}}&.tooltipped-se{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-sw::after{margin-right:-", ";}&.tooltipped-n,&.tooltipped-ne,&.tooltipped-nw{&::after{right:50%;bottom:100%;margin-bottom:6px;}&::before{top:-7px;right:50%;bottom:auto;margin-right:-6px;border-top-color:", ";}}&.tooltipped-ne{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-nw::after{margin-right:-", ";}&.tooltipped-s::after,&.tooltipped-n::after{transform:translateX(50%);}&.tooltipped-w{&::after{right:100%;bottom:50%;margin-right:6px;transform:translateY(50%);}&::before{top:50%;bottom:50%;left:-7px;margin-top:-6px;border-left-color:", ";}}&.tooltipped-e{&::after{bottom:50%;left:100%;margin-left:6px;transform:translateY(50%);}&::before{top:50%;right:-7px;bottom:50%;margin-top:-6px;border-right-color:", ";}}&.tooltipped-multiline{&::after{width:max-content;max-width:250px;word-wrap:break-word;white-space:pre-line;border-collapse:separate;}&.tooltipped-s::after,&.tooltipped-n::after{right:auto;left:50%;transform:translateX(-50%);}&.tooltipped-w::after,&.tooltipped-e::after{right:100%;}}&.tooltipped-align-right-2::after{right:0;margin-right:0;}&.tooltipped-align-right-2::before{right:15px;}&.tooltipped-align-left-2::after{left:0;margin-left:0;}&.tooltipped-align-left-2::before{left:10px;}", ";", ";"], (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('fonts.normal'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('radii.1'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('colors.neutral.emphasisPlus'), _constants.COMMON, _sx.default);
 
 function Tooltip({
   direction = 'n',

package/lib/UnderlineNav.js

@@ -25,7 +25,7 @@ const SELECTED_CLASS = 'selected';
 const UnderlineNavBase = _styledComponents.default.nav.withConfig({
   displayName: "UnderlineNav__UnderlineNavBase",
   componentId: "zrnxqt-0"
-})(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.UnderlineNav--right{justify-content:flex-end;.UnderlineNav-item{margin-right:0;margin-left:", ";}.UnderlineNav-actions{flex:1 1 auto;}}&.UnderlineNav--full{display:block;}.UnderlineNav-body{display:flex;margin-bottom:-1px;}.UnderlineNav-actions{align-self:center;}", ";", ";"], (0, _constants.get)('colors.border.secondary'), (0, _constants.get)('space.3'), _constants.COMMON, _sx.default);
+})(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.UnderlineNav--right{justify-content:flex-end;.UnderlineNav-item{margin-right:0;margin-left:", ";}.UnderlineNav-actions{flex:1 1 auto;}}&.UnderlineNav--full{display:block;}.UnderlineNav-body{display:flex;margin-bottom:-1px;}.UnderlineNav-actions{align-self:center;}", ";", ";"], (0, _constants.get)('colors.border.muted'), (0, _constants.get)('space.3'), _constants.COMMON, _sx.default);
 
 function UnderlineNav({
   actions,
@@ -57,7 +57,7 @@ const UnderlineNavLink = _styledComponents.default.a.attrs(props => ({
 })).withConfig({
   displayName: "UnderlineNav__UnderlineNavLink",
   componentId: "zrnxqt-1"
-})(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:0.2s ease;.UnderlineNav-octicon{color:", ";}}&.selected{color:", ";border-bottom-color:", ";.UnderlineNav-octicon{color:", ";}}", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('lineHeights.default'), (0, _constants.get)('colors.underlinenav.text'), (0, _constants.get)('colors.underlinenav.textHover'), (0, _constants.get)('colors.border.tertiary'), (0, _constants.get)('colors.text.tertiary'), (0, _constants.get)('colors.underlinenav.textActive'), (0, _constants.get)('colors.underlinenav.borderActive'), (0, _constants.get)('colors.underlinenav.iconActive'), _constants.COMMON, _sx.default);
+})(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:0.2s ease;.UnderlineNav-octicon{color:", ";}}&.selected{color:", ";border-bottom-color:", ";.UnderlineNav-octicon{color:", ";}}", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('lineHeights.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.primer.border.active'), (0, _constants.get)('colors.fg.default'), _constants.COMMON, _sx.default);
 
 UnderlineNavLink.displayName = 'UnderlineNav.Link';
 

package/lib/__tests__/ActionList.d.ts

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

package/lib/__tests__/ActionList.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+require("babel-polyfill");
+
+var _jestAxe = require("jest-axe");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+var _ActionList = require("../ActionList");
+
+var _constants = require("../constants");
+
+var _testing = require("../utils/testing");
+
+var _ = require("..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+
+function SimpleActionList() {
+  return /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+    theme: _theme.default
+  }, /*#__PURE__*/_react2.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, {
+    items: [{
+      text: 'New file'
+    }, _ActionList.ActionList.Divider, {
+      text: 'Copy link'
+    }, {
+      text: 'Edit file'
+    }, {
+      text: 'Delete file',
+      variant: 'danger'
+    }]
+  })));
+}
+
+SimpleActionList.displayName = "SimpleActionList";
+describe('ActionList', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _ActionList.ActionList,
+    systemPropArray: [_constants.COMMON],
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, {
+      items: []
+    })
+  });
+  (0, _testing.checkExports)('ActionList', {
+    default: undefined,
+    ActionList: _ActionList.ActionList
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionList, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react.cleanup)();
+  });
+});

package/lib/__tests__/ActionMenu.d.ts

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

package/lib/__tests__/ActionMenu.js

@@ -0,0 +1,154 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+require("babel-polyfill");
+
+var _jestAxe = require("jest-axe");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+var _ActionMenu = require("../ActionMenu");
+
+var _constants = require("../constants");
+
+var _testing = require("../utils/testing");
+
+var _ = require("..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.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__*/_react2.default.createElement(_.ThemeProvider, {
+    theme: _theme.default
+  }, /*#__PURE__*/_react2.default.createElement(_.SSRProvider, null, /*#__PURE__*/_react2.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react2.default.createElement("div", {
+    id: "something-else"
+  }, "X"), /*#__PURE__*/_react2.default.createElement(_ActionMenu.ActionMenu, {
+    onAction: mockOnActivate,
+    anchorContent: "Menu",
+    items: items
+  }), /*#__PURE__*/_react2.default.createElement("div", {
+    id: "portal-root"
+  }))));
+}
+
+SimpleActionMenu.displayName = "SimpleActionMenu";
+describe('ActionMenu', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  (0, _testing.behavesAsComponent)({
+    Component: _ActionMenu.ActionMenu,
+    systemPropArray: [_constants.COMMON],
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/_react2.default.createElement(_.SSRProvider, null, /*#__PURE__*/_react2.default.createElement(_ActionMenu.ActionMenu, {
+      items: []
+    }))
+  });
+  (0, _testing.checkExports)('ActionMenu', {
+    default: undefined,
+    ActionMenu: _ActionMenu.ActionMenu
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionMenu, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react.cleanup)();
+  });
+  it('should trigger the overlay on trigger click', async () => {
+    var _portalRoot, _portalRoot$textConte;
+
+    const menu = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionMenu, null));
+    let portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Menu');
+    (0, _react.act)(() => {
+      _react.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 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionMenu, null));
+    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Menu');
+    (0, _react.act)(() => {
+      _react.fireEvent.click(anchor);
+    });
+    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeTruthy();
+    const menuItem = await menu.queryByText(items[0].text);
+    (0, _react.act)(() => {
+      _react.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 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionMenu, null));
+    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Menu');
+    (0, _react.act)(() => {
+      _react.fireEvent.click(anchor);
+    });
+    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeTruthy();
+    const somethingElse = await menu.baseElement.querySelector('#something-else');
+    (0, _react.act)(() => {
+      _react.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 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionMenu, null));
+    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Menu');
+    (0, _react.act)(() => {
+      _react.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']"));
+    (0, _react.act)(() => {
+      _react.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.d.ts

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

package/lib/__tests__/AnchoredOverlay.js

@@ -0,0 +1,161 @@
+"use strict";
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _AnchoredOverlay = require("../AnchoredOverlay");
+
+var _testing = require("../utils/testing");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+var _index = require("../index");
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+var _BaseStyles = _interopRequireDefault(require("../BaseStyles"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+
+const AnchoredOverlayTestComponent = ({
+  initiallyOpen = false,
+  onOpenCallback,
+  onCloseCallback
+} = {}) => {
+  const [open, setOpen] = (0, _react.useState)(initiallyOpen);
+  const onOpen = (0, _react.useCallback)(gesture => {
+    setOpen(true);
+    onOpenCallback === null || onOpenCallback === void 0 ? void 0 : onOpenCallback(gesture);
+  }, [onOpenCallback]);
+  const onClose = (0, _react.useCallback)(gesture => {
+    setOpen(true);
+    onCloseCallback === null || onCloseCallback === void 0 ? void 0 : onCloseCallback(gesture);
+  }, [onCloseCallback]);
+  return /*#__PURE__*/_react.default.createElement(_ThemeProvider.ThemeProvider, {
+    theme: _theme.default
+  }, /*#__PURE__*/_react.default.createElement(_index.SSRProvider, null, /*#__PURE__*/_react.default.createElement(_BaseStyles.default, null, /*#__PURE__*/_react.default.createElement(_AnchoredOverlay.AnchoredOverlay, {
+    open: open,
+    onOpen: onOpen,
+    onClose: onClose,
+    renderAnchor: props => /*#__PURE__*/_react.default.createElement(_index.Button, props, "Anchor Button")
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button"
+  }, "Focusable Child")))));
+};
+
+AnchoredOverlayTestComponent.displayName = "AnchoredOverlayTestComponent";
+describe('AnchoredOverlay', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _AnchoredOverlay.AnchoredOverlay,
+    systemPropArray: [],
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, null)
+  });
+  (0, _testing.checkExports)('AnchoredOverlay', {
+    default: undefined,
+    AnchoredOverlay: _AnchoredOverlay.AnchoredOverlay
+  });
+  it('should have no axe violations when open', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
+      initiallyOpen: true
+    }));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('should have no axe violations when closed', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('should call onOpen when the anchor is clicked', () => {
+    const mockOpenCallback = jest.fn();
+    const mockCloseCallback = jest.fn();
+    const anchoredOverlay = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
+      onOpenCallback: mockOpenCallback,
+      onCloseCallback: mockCloseCallback
+    }));
+    const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]');
+
+    _react2.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 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
+      onOpenCallback: mockOpenCallback,
+      onCloseCallback: mockCloseCallback
+    }));
+    const anchor = anchoredOverlay.baseElement.querySelector('[aria-haspopup="true"]');
+
+    _react2.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 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
+      initiallyOpen: true,
+      onOpenCallback: mockOpenCallback,
+      onCloseCallback: mockCloseCallback
+    }));
+
+    _react2.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 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
+      initiallyOpen: true,
+      onOpenCallback: mockOpenCallback,
+      onCloseCallback: mockCloseCallback
+    }));
+    const overlay = await anchoredOverlay.findByRole('none');
+
+    _react2.fireEvent.keyDown(overlay, {
+      key: 'Escape'
+    });
+
+    expect(mockOpenCallback).toHaveBeenCalledTimes(0);
+    expect(mockCloseCallback).toHaveBeenCalledTimes(1);
+    expect(mockCloseCallback).toHaveBeenCalledWith('escape');
+  });
+  it('should render consistently when open', () => {
+    const anchoredOverlay = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
+      initiallyOpen: true
+    }));
+    expect(anchoredOverlay).toMatchSnapshot();
+  });
+});

package/lib/__tests__/Avatar.d.ts

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

package/lib/__tests__/Avatar.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+var _testing = require("../utils/testing");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+var _constants = require("../constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+describe('Avatar', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Avatar,
+    systemPropArray: [_constants.COMMON]
+  });
+  (0, _testing.checkExports)('Avatar', {
+    default: _.Avatar
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Avatar, {
+      src: "primer.png"
+    }));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('renders small by default', () => {
+    const size = 20;
+    const result = (0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Avatar, {
+      src: "primer.png"
+    }));
+    expect(result.props.width).toEqual(size);
+    expect(result.props.height).toEqual(size);
+  });
+  it('respects the size prop', () => {
+    const result = (0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Avatar, {
+      size: 40,
+      src: "primer.png",
+      alt: "github"
+    }));
+    expect(result.props.width).toEqual(40);
+    expect(result.props.height).toEqual(40);
+  });
+  it('passes through the src prop', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Avatar, {
+      src: "primer.png",
+      alt: ""
+    })).props.src).toEqual('primer.png');
+  });
+  it('respects margin props', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Avatar, {
+      m: 2,
+      src: "primer.png",
+      alt: ""
+    }))).toHaveStyleRule('margin', (0, _testing.px)(_theme.default.space[2]));
+  });
+});

package/lib/__tests__/AvatarStack.d.ts

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

package/lib/__tests__/AvatarStack.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _testing = require("../utils/testing");
+
+var _constants = require("../constants");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+
+const avatarComp = /*#__PURE__*/_react.default.createElement(_.AvatarStack, null, /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://avatars.githubusercontent.com/primer",
+  alt: ""
+}), /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://avatars.githubusercontent.com/github",
+  alt: ""
+}), /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://avatars.githubusercontent.com/primer",
+  alt: ""
+}), /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://avatars.githubusercontent.com/github",
+  alt: ""
+}));
+
+const rightAvatarComp = /*#__PURE__*/_react.default.createElement(_.AvatarStack, {
+  alignRight: true
+}, /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://avatars.githubusercontent.com/primer",
+  alt: ""
+}), /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://avatars.githubusercontent.com/github",
+  alt: ""
+}), /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://avatars.githubusercontent.com/primer",
+  alt: ""
+}), /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://avatars.githubusercontent.com/github",
+  alt: ""
+}));
+
+describe('Avatar', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.AvatarStack,
+    systemPropArray: [_constants.COMMON],
+    toRender: () => avatarComp
+  });
+  (0, _testing.checkExports)('AvatarStack', {
+    default: _.AvatarStack
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)(avatarComp);
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('respects alignRight props', () => {
+    expect((0, _testing.render)(rightAvatarComp)).toMatchSnapshot();
+  });
+});

package/lib/__tests__/BorderBox.d.ts

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