@primer/components 31.0.1 → 31.1.0-rc.71d00800

package/lib-esm/TextInputWithTokens.js

@@ -9,9 +9,17 @@ import Token from './Token/Token';
 import { useProvidedRefOrCreate } from './hooks';
 import UnstyledTextInput from './_UnstyledTextInput';
 import TextInputWrapper from './_TextInputWrapper';
-import Box from './Box'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import Box from './Box';
+import Text from './Text';
+import { isFocusable } from './utils/iterateFocusableElements'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+const overflowCountFontSizeMap = {
+  small: 0,
+  medium: 1,
+  large: 1,
+  extralarge: 2
+}; // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
 
-// using forwardRef is important so that other components (ex. Autocomplete) can use the ref
 function TextInputWithTokensInnerComponent({
   icon: IconComponent,
   contrast,
@@ -31,9 +39,11 @@ function TextInputWithTokensInnerComponent({
   minWidth: minWidthProp,
   maxWidth: maxWidthProp,
   variant: variantProp,
+  visibleTokenCount,
   ...rest
 }, externalRef) {
   const {
+    onBlur,
     onFocus,
     onKeyDown,
     ...inputPropsRest
@@ -42,6 +52,7 @@ function TextInputWithTokensInnerComponent({
   const localInputRef = useRef(null);
   const combinedInputRef = useCombinedRefs(localInputRef, ref);
   const [selectedTokenIndex, setSelectedTokenIndex] = useState();
+  const [tokensAreTruncated, setTokensAreTruncated] = useState(Boolean(visibleTokenCount));
   const {
     containerRef
   } = useFocusZone({
@@ -76,14 +87,25 @@ function TextInputWithTokensInnerComponent({
   }, [selectedTokenIndex]);
 
   const handleTokenRemove = tokenId => {
-    onTokenRemove(tokenId);
+    onTokenRemove(tokenId); // HACK: wait a tick for the the token node to be removed from the DOM
 
-    if (selectedTokenIndex) {
-      var _containerRef$current2;
+    setTimeout(() => {
+      var _containerRef$current2, _containerRef$current3;
 
-      const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex];
-      nextElementToFocus.focus();
-    }
+      const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex || 0]; // when removing the first token by keying "Backspace" or "Delete",
+      // `nextFocusableElement` is the div that wraps the input
+
+      const firstFocusable = nextElementToFocus && isFocusable(nextElementToFocus) ? nextElementToFocus : Array.from(((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.children) || []).find(el => isFocusable(el));
+
+      if (firstFocusable) {
+        firstFocusable.focus();
+      } else {
+        var _ref$current;
+
+        // if there are no tokens left, focus the input
+        (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+      }
+    }, 0);
   };
 
   const handleTokenFocus = tokenIndex => () => {
@@ -91,30 +113,55 @@ function TextInputWithTokensInnerComponent({
   };
 
   const handleTokenBlur = () => {
-    setSelectedTokenIndex(undefined);
+    setSelectedTokenIndex(undefined); // HACK: wait a tick and check the focused element before hiding truncated tokens
+    // this prevents the tokens from hiding when the user is moving focus between tokens,
+    // but still hides the tokens when the user blurs the token by tabbing out or clicking somewhere else on the page
+
+    setTimeout(() => {
+      var _containerRef$current4;
+
+      if (!((_containerRef$current4 = containerRef.current) !== null && _containerRef$current4 !== void 0 && _containerRef$current4.contains(document.activeElement)) && visibleTokenCount) {
+        setTokensAreTruncated(true);
+      }
+    }, 0);
   };
 
-  const handleTokenKeyUp = e => {
-    if (e.key === 'Escape') {
-      var _ref$current;
+  const handleTokenKeyUp = event => {
+    if (event.key === 'Escape') {
+      var _ref$current2;
 
-      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+      (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
     }
   };
 
-  const handleInputFocus = e => {
-    onFocus && onFocus(e);
+  const handleInputFocus = event => {
+    onFocus && onFocus(event);
     setSelectedTokenIndex(undefined);
+    visibleTokenCount && setTokensAreTruncated(false);
+  };
+
+  const handleInputBlur = event => {
+    onBlur && onBlur(event); // HACK: wait a tick and check the focused element before hiding truncated tokens
+    // this prevents the tokens from hiding when the user is moving focus from the input to a token,
+    // but still hides the tokens when the user blurs the input by tabbing out or clicking somewhere else on the page
+
+    setTimeout(() => {
+      var _containerRef$current5;
+
+      if (!((_containerRef$current5 = containerRef.current) !== null && _containerRef$current5 !== void 0 && _containerRef$current5.contains(document.activeElement)) && visibleTokenCount) {
+        setTokensAreTruncated(true);
+      }
+    }, 0);
   };
 
   const handleInputKeyDown = e => {
-    var _ref$current2;
+    var _ref$current3;
 
     if (onKeyDown) {
       onKeyDown(e);
     }
 
-    if ((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.value) {
+    if ((_ref$current3 = ref.current) !== null && _ref$current3 !== void 0 && _ref$current3.value) {
       return;
     }
 
@@ -135,13 +182,24 @@ function TextInputWithTokensInnerComponent({
 
 
       setTimeout(() => {
-        var _ref$current3;
+        var _ref$current4;
 
-        (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.select();
+        (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.select();
       }, 0);
     }
   };
 
+  const focusInput = () => {
+    var _combinedInputRef$cur;
+
+    (_combinedInputRef$cur = combinedInputRef.current) === null || _combinedInputRef$cur === void 0 ? void 0 : _combinedInputRef$cur.focus();
+  };
+
+  const preventTokenClickPropagation = event => {
+    event.stopPropagation();
+  };
+
+  const visibleTokens = tokensAreTruncated ? tokens.slice(0, visibleTokenCount) : tokens;
   return /*#__PURE__*/React.createElement(TextInputWrapper, {
     block: block,
     className: className,
@@ -153,15 +211,8 @@ function TextInputWithTokensInnerComponent({
     minWidth: minWidthProp,
     maxWidth: maxWidthProp,
     variant: variantProp,
-    ref: containerRef,
-    sx: {
-      alignItems: 'center',
-      flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
-      gap: '0.25rem',
-      '> *': {
-        flexShrink: 0
-      },
-      ...(block ? {
+    onClick: focusInput,
+    sx: { ...(block ? {
         display: 'flex',
         width: '100%'
       } : {}),
@@ -174,6 +225,21 @@ function TextInputWithTokensInnerComponent({
       } : {}),
       ...sxProp
     }
+  }, /*#__PURE__*/React.createElement(Box, {
+    ref: containerRef,
+    display: "flex",
+    sx: {
+      alignItems: 'center',
+      flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
+      marginLeft: '-0.25rem',
+      marginBottom: '-0.25rem',
+      flexGrow: 1,
+      '> *': {
+        flexShrink: 0,
+        marginLeft: '0.25rem',
+        marginBottom: '0.25rem'
+      }
+    }
   }, /*#__PURE__*/React.createElement(Box, {
     sx: {
       order: 1,
@@ -185,12 +251,13 @@ function TextInputWithTokensInnerComponent({
     ref: combinedInputRef,
     disabled: disabled,
     onFocus: handleInputFocus,
+    onBlur: handleInputBlur,
     onKeyDown: handleInputKeyDown,
     type: "text",
     sx: {
       height: '100%'
     }
-  }, inputPropsRest))), tokens.length && TokenComponent ? tokens.map(({
+  }, inputPropsRest))), TokenComponent ? visibleTokens.map(({
     id,
     ...tokenRest
   }, i) => /*#__PURE__*/React.createElement(TokenComponent, _extends({
@@ -198,6 +265,7 @@ function TextInputWithTokensInnerComponent({
     onFocus: handleTokenFocus(i),
     onBlur: handleTokenBlur,
     onKeyUp: handleTokenKeyUp,
+    onClick: preventTokenClickPropagation,
     isSelected: selectedTokenIndex === i,
     onRemove: () => {
       handleTokenRemove(id);
@@ -205,7 +273,10 @@ function TextInputWithTokensInnerComponent({
     hideRemoveButton: hideTokenRemoveButtons,
     size: size,
     tabIndex: 0
-  }, tokenRest))) : null);
+  }, tokenRest))) : null, tokensAreTruncated ? /*#__PURE__*/React.createElement(Text, {
+    color: "fg.muted",
+    fontSize: size && overflowCountFontSizeMap[size]
+  }, "+", tokens.length - visibleTokens.length) : null));
 }
 
 TextInputWithTokensInnerComponent.displayName = "TextInputWithTokensInnerComponent";

package/lib-esm/Token/Token.js

@@ -19,7 +19,16 @@ const DefaultTokenStyled = styled(TokenBase).withConfig({
 const LeadingVisualContainer = styled('span').withConfig({
   displayName: "Token__LeadingVisualContainer",
   componentId: "sc-1dg52pw-1"
-})(["flex-shrink:0;line-height:0;"]);
+})(["flex-shrink:0;line-height:0;", ""], props => {
+  switch (props.size) {
+    case 'large':
+    case 'extralarge':
+      return css(["margin-right:", ";"], get('space.2'));
+
+    default:
+      return css(["margin-right:", ";"], get('space.1'));
+  }
+});
 const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     as,
@@ -54,7 +63,9 @@ const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     isTokenInteractive: isTokenInteractive(props)
   }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
     ref: forwardedRef
-  }), LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer, null, /*#__PURE__*/React.createElement(LeadingVisual, null)) : null, /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
+  }), LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer, {
+    size: size
+  }, /*#__PURE__*/React.createElement(LeadingVisual, null)) : null, /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
     borderOffset: tokenBorderWidthPx,
     onClick: onRemoveClick,
     size: size,

package/lib-esm/Token/TokenBase.js

@@ -20,7 +20,6 @@ const variants = variant({
   variants: {
     small: {
       fontSize: 0,
-      gap: 1,
       height: tokenSizes.small,
       // without setting lineHeight to match height, the "x" appears vertically mis-aligned
       lineHeight: tokenSizes.small,
@@ -33,7 +32,6 @@ const variants = variant({
     },
     medium: {
       fontSize: 0,
-      gap: 1,
       height: tokenSizes.medium,
       lineHeight: tokenSizes.medium,
       paddingLeft: 2,
@@ -43,7 +41,6 @@ const variants = variant({
     },
     large: {
       fontSize: 0,
-      gap: 2,
       height: tokenSizes.large,
       lineHeight: tokenSizes.large,
       paddingLeft: 2,
@@ -53,7 +50,6 @@ const variants = variant({
     },
     extralarge: {
       fontSize: 1,
-      gap: 2,
       height: tokenSizes.extralarge,
       lineHeight: tokenSizes.extralarge,
       paddingLeft: 3,

package/lib-esm/Token/_RemoveTokenButton.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import { XIcon } from '@primer/octicons-react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { variant } from 'styled-system';
 import { get } from '../constants';
 import sx from '../sx';
@@ -34,7 +34,16 @@ const getTokenButtonIconSize = size => parseInt(tokenSizes[size || defaultTokenS
 const StyledTokenButton = styled.span.withConfig({
   displayName: "_RemoveTokenButton__StyledTokenButton",
   componentId: "sc-14lvcw1-0"
-})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, get('colors.neutral.muted'), get('colors.neutral.subtle'), variants, sx);
+})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;", " &:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, props => {
+  switch (props.size) {
+    case 'large':
+    case 'extralarge':
+      return css(["margin-left:", ";"], get('space.2'));
+
+    default:
+      return css(["margin-left:", ";"], get('space.1'));
+  }
+}, get('colors.neutral.muted'), get('colors.neutral.subtle'), variants, sx);
 
 const RemoveTokenButton = ({
   'aria-label': ariaLabel,

package/lib-esm/_TextInputWrapper.js

@@ -21,7 +21,7 @@ const sizeVariants = variant({
 const TextInputWrapper = styled.span.withConfig({
   displayName: "_TextInputWrapper__TextInputWrapper",
   componentId: "sc-5vfcis-0"
-})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('shadows.primer.shadow.inset'), props => {
+})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('shadows.primer.shadow.inset'), props => {
   if (props.hasIcon) {
     return css(["padding:0;"]);
   } else {

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

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

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

@@ -0,0 +1,57 @@
+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 { ActionList } from '../ActionList';
+import { behavesAsComponent, checkExports } from '../utils/testing';
+import { BaseStyles, ThemeProvider } from '..';
+expect.extend(toHaveNoViolations);
+
+function SimpleActionList() {
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(ActionList, {
+    items: [{
+      text: 'New file'
+    }, ActionList.Divider, {
+      text: 'Copy link'
+    }, {
+      text: 'Edit file'
+    }, {
+      text: 'Delete file',
+      variant: 'danger'
+    }]
+  })));
+}
+
+SimpleActionList.displayName = "SimpleActionList";
+describe('ActionList', () => {
+  behavesAsComponent({
+    Component: ActionList,
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/React.createElement(ActionList, {
+      items: []
+    })
+  });
+  checkExports('ActionList', {
+    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();
+  });
+});
+describe('ActionList.Item', () => {
+  behavesAsComponent({
+    Component: ActionList.Item
+  });
+});

package/lib-esm/__tests__/ActionList.types.test.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function emptyList(): JSX.Element;
+export declare function listWithSingleItem(): JSX.Element;
+export declare function canUseDivDOMProps(): JSX.Element;
+export declare function cannotUseAnchorDOMProps(): JSX.Element;
+export declare function cannotUseAsWithoutRenderProp(): JSX.Element;

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

@@ -0,0 +1,45 @@
+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__/ActionMenu.test.d.ts

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

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

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

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