@planningcenter/tapestry-react 1.3.0 → 2.0.0-rc.1

package/dist/cjs/Dropdown/Link.js

@@ -35,6 +35,8 @@ var Link = /*#__PURE__*/function (_Component) {
 
   var _proto = Link.prototype;
 
+  // Graphql wasn't picking up the correct displayName when this was
+  // assigned to LINK_DISPLAY_NAME, but using a string works
   _proto.render = function render() {
     var _this$props = this.props,
         disabled = _this$props.disabled,
@@ -80,6 +82,6 @@ var Link = /*#__PURE__*/function (_Component) {
   return Link;
 }(_react.Component);
 
-(0, _defineProperty2["default"])(Link, "displayName", LINK_DISPLAY_NAME);
+(0, _defineProperty2["default"])(Link, "displayName", 'Dropdown.Link');
 var _default = Link;
 exports["default"] = _default;

package/dist/cjs/EditActions/EditActions.js

@@ -19,6 +19,8 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 
 var _hooks = require("../hooks");
 
+var _system = require("../system");
+
 function EditActions(_ref) {
   var display = _ref.display,
       edit = _ref.edit,
@@ -47,6 +49,10 @@ function EditActions(_ref) {
     });
   };
 
+  var _useThemeProps = (0, _system.useThemeProps)('editActions', restProps),
+      buttonProps = _useThemeProps.buttonProps,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["buttonProps"]);
+
   (0, _react.useEffect)(function () {
     if (loading === false) {
       setShowCheck(true);
@@ -68,11 +74,11 @@ function EditActions(_ref) {
     onClick: on ? undefined : function () {
       return setOn(true);
     }
-  }, focusProps, hoverProps, restProps), _react.Children.toArray(on ? edit : display), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  }, focusProps, hoverProps, themeProps), _react.Children.toArray(on ? edit : display), /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
     grow: 0,
     title: on ? 'Close' : 'Edit',
     icon: {
-      name: showCheck ? 'checkmark' : on ? 'close' : 'pencil',
+      name: showCheck ? 'general.check' : on ? 'general.x' : 'general.pencil',
       color: showCheck ? 'green' : undefined
     },
     tooltip: {
@@ -87,7 +93,7 @@ function EditActions(_ref) {
     spinner: on && loading ? {
       color: 'primary'
     } : undefined
-  }));
+  }, buttonProps)));
 }
 
 var _default = EditActions;

package/dist/cjs/Field/Field.js

@@ -103,6 +103,7 @@ var Field = /*#__PURE__*/function (_Component) {
       order: inline ? 0 : 1,
       grow: 1,
       marginTop: inline || !label ? undefined : 1,
+      maxWidth: "100%",
       spacing: spacing
     }, (0, _utils.cloneChildren)(children, function (child, _ref) {
       var firstChild = _ref.firstChild;

package/dist/cjs/FieldSet/FieldSet.js

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -19,30 +21,42 @@ var _TileView = _interopRequireDefault(require("../TileView"));
 
 var _Toolbar = _interopRequireDefault(require("../Toolbar"));
 
+var _system = require("../system");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function FieldSet(_ref) {
   var children = _ref.children,
-      _ref$minCellWidth = _ref.minCellWidth,
-      minCellWidth = _ref$minCellWidth === void 0 ? 16 : _ref$minCellWidth,
-      _ref$spacing = _ref.spacing,
-      spacing = _ref$spacing === void 0 ? 1 : _ref$spacing,
       helpContent = _ref.helpContent,
       legend = _ref.legend,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "minCellWidth", "spacing", "helpContent", "legend"]);
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "helpContent", "legend"]);
+
+  var _useThemeProps = (0, _system.useThemeProps)('fieldset', _objectSpread({}, restProps)),
+      headingProps = _useThemeProps.headingProps,
+      tileViewProps = _useThemeProps.tileViewProps,
+      _useThemeProps$spacin = _useThemeProps.spacing,
+      spacing = _useThemeProps$spacin === void 0 ? 1 : _useThemeProps$spacin,
+      _useThemeProps$minCel = _useThemeProps.minCellWidth,
+      minCellWidth = _useThemeProps$minCel === void 0 ? 16 : _useThemeProps$minCel,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["headingProps", "tileViewProps", "spacing", "minCellWidth"]);
+
   return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
     as: "fieldset",
     padding: 0,
     margin: 2
-  }, restProps), /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], {
-    title: /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+  }, themeProps, restProps), /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], {
+    title: /*#__PURE__*/_react["default"].createElement(_Heading["default"], (0, _extends2["default"])({
       as: "legend",
       level: 4
-    }, legend),
+    }, headingProps), legend),
     helpContent: helpContent,
     marginBottom: 1
-  }), /*#__PURE__*/_react["default"].createElement(_TileView["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_TileView["default"], (0, _extends2["default"])({
     minCellWidth: minCellWidth,
     spacing: spacing
-  }, children));
+  }, tileViewProps), children));
 }
 
 var _default = FieldSet;

package/dist/cjs/FilterLayout/FilterLayout.js

@@ -70,7 +70,8 @@ function FilterLayout(props) {
     title: "Filter",
     "aria-label": sidebarOpen ? 'close filter' : 'open filter',
     iconRight: {
-      name: sidebarOpen ? 'caret-left' : 'filter'
+      name: sidebarOpen ? 'general.leftChevron' : 'general.threeReducingHorizontalBars',
+      size: sidebarOpen ? 'xs' : 'md'
     },
     onClick: toggleSidebar
   }), /*#__PURE__*/React.createElement(_Box["default"], {

package/dist/cjs/Form/Form.js

@@ -113,7 +113,7 @@ var Form = /*#__PURE__*/function (_React$Component) {
       editButtonProps: {
         disabled: isSubmitting,
         icon: isEditing ? undefined : {
-          name: 'pencil'
+          name: 'general.pencil'
         },
         onClick: function onClick() {
           // bail out if we've already triggered a submit in onBlur

package/dist/cjs/GridView/GridView.js

@@ -19,6 +19,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _splitStyles = _interopRequireDefault(require("../system/split-styles"));
 
+var _system = require("../system");
+
 var _VariantProvider = require("../VariantProvider");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -75,15 +77,15 @@ var gridViewPlugin = {
     }
 
     if (columnSpacing !== undefined && styles.gridColumnGap === undefined) {
-      styles.gridColumnGap = columnSpacing * 8;
+      styles.gridColumnGap = (0, _system.spacingValue)(columnSpacing);
     }
 
     if (rowSpacing !== undefined && styles.gridRowGap === undefined) {
-      styles.gridRowGap = rowSpacing * 8;
+      styles.gridRowGap = (0, _system.spacingValue)(rowSpacing);
     }
 
-    if (spacing !== undefined && styles.gridGap === undefined) {
-      styles.gridGap = spacing * 8;
+    if (spacing !== undefined && styles.gap === undefined) {
+      styles.gap = (0, _system.spacingValue)(spacing);
     }
 
     return styles;

package/dist/cjs/Group/Group.js

@@ -29,20 +29,27 @@ function Group(_ref) {
       childProps = _ref.childProps,
       children = _ref.children,
       radius = _ref.radius,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["axis", "childProps", "children", "radius"]);
+      spacing = _ref.spacing,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["axis", "childProps", "children", "radius", "spacing"]);
   var themeRadius = (0, _system.useThemeValue)('group.radius');
   var radiusValue = radius != null ? radius : themeRadius;
   var isHorizontalLayout = axis === 'horizontal';
   var startRadius = isHorizontalLayout ? 'radiusLeft' : 'radiusTop';
   var endRadius = isHorizontalLayout ? 'radiusRight' : 'radiusBottom';
+  var marginBottom = isHorizontalLayout ? 0 : '-1px';
+  var marginRight = isHorizontalLayout ? '-1px' : 0;
   return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
     axis: axis,
-    spacing: -0.125
+    spacing: spacing
   }, restProps), (0, _utils.cloneChildren)(children, function (child, _ref2) {
     var _objectSpread2;
 
     var firstChild = _ref2.firstChild,
         lastChild = _ref2.lastChild;
-    return _objectSpread(_objectSpread({}, childProps), {}, (_objectSpread2 = {}, _objectSpread2[startRadius] = firstChild ? radiusValue : 0, _objectSpread2[endRadius] = lastChild ? radiusValue : 0, _objectSpread2));
+    return _objectSpread(_objectSpread(_objectSpread({}, childProps), {}, (_objectSpread2 = {}, _objectSpread2[startRadius] = firstChild ? radiusValue : 0, _objectSpread2[endRadius] = lastChild ? radiusValue : 0, _objectSpread2), !spacing && !lastChild && {
+      marginBottom: marginBottom
+    }), !spacing && !lastChild && {
+      marginRight: marginRight
+    });
   }));
 }

package/dist/cjs/HeadingUppercase/HeadingUppercase.js

@@ -18,7 +18,7 @@ var _system = require("../system");
 function HeadingUppercase(_ref) {
   var children = _ref.children,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children"]);
-  var themedProps = (0, _system.useThemeValue)('HeadingUppercase');
+  var themeProps = (0, _system.useThemeProps)('HeadingUppercase', restProps);
   return /*#__PURE__*/_react["default"].createElement(_Text["default"], (0, _extends2["default"])({
     as: "span",
     uppercase: true,
@@ -28,7 +28,7 @@ function HeadingUppercase(_ref) {
     color: "foregroundSecondary",
     shrink: 0,
     margin: 0
-  }, themedProps, restProps), children);
+  }, themeProps), children);
 }
 
 var _default = HeadingUppercase;

package/dist/cjs/HelperDrawer/HelperDrawer.js

@@ -37,7 +37,7 @@ function Toggle(_ref) {
   }, [drawerId]);
   return (0, _core.jsx)(_Button["default"], (0, _extends2["default"])({
     icon: {
-      name: 'info'
+      name: 'general.outlinedInfoCircle'
     },
     tooltip: {
       title: 'More info'

package/dist/cjs/Highlight/Highlight.js

@@ -13,22 +13,28 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Text = _interopRequireDefault(require("../Text"));
 
+var _system = require("../system");
+
 var _utils = require("./utils");
 
 /**
  * Highlight or mark letters in a string using a provided query.
  */
 function Highlight(_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'primary' : _ref$color,
-      _ref$marker = _ref.marker,
+  var _ref$marker = _ref.marker,
       marker = _ref$marker === void 0 ? _utils.markStartsWithMatchSubstring : _ref$marker,
       query = _ref.query,
       text = _ref.text,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["color", "marker", "query", "text"]);
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["marker", "query", "text"]);
+
+  var _useThemeProps = (0, _system.useThemeProps)('highlight', restProps),
+      _useThemeProps$color = _useThemeProps.color,
+      color = _useThemeProps$color === void 0 ? 'primary' : _useThemeProps$color,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["color"]);
+
   return /*#__PURE__*/_react["default"].createElement(_Text["default"], (0, _extends2["default"])({
     as: "span"
-  }, restProps), marker(text, query).map(function (part, index) {
+  }, themeProps), marker(text, query).map(function (part, index) {
     return /*#__PURE__*/_react["default"].createElement(_Text["default"], {
       key: index,
       inline: true,

package/dist/cjs/Icon/Status.js

@@ -16,9 +16,9 @@ var _Icon = _interopRequireDefault(require("./Icon"));
 var _Path = _interopRequireDefault(require("./Path"));
 
 var STATUS_VARIANTS = {
-  confirmed: ['checkmark-circle', 'success'],
-  unconfirmed: ['question-circle', 'warning'],
-  declined: ['close-circle', 'error']
+  confirmed: ['general.outlinedCircleCheck', 'success'],
+  unconfirmed: ['general.outlinedQuestionCircle', 'warning'],
+  declined: ['general.outlinedXCircle', 'error']
 };
 
 function Status(props) {
@@ -42,7 +42,7 @@ function Status(props) {
     name: variantName,
     color: color || variantColor
   }, restProps), /*#__PURE__*/_react["default"].createElement(_Path["default"], {
-    name: "radio-0",
+    name: "tapestry.radio0",
     color: color
   }));
 }

package/dist/cjs/Input/InputBox.js

@@ -324,7 +324,7 @@ var InputBox = /*#__PURE__*/function (_Component) {
       size: size
     }) : onClear ? /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       icon: {
-        name: 'close'
+        name: 'general.x'
       },
       title: "clear input value",
       size: size,

package/dist/cjs/List/ListItem.js

@@ -36,7 +36,7 @@ function ListItem(_ref) {
     backgroundColor: "surface"
   }, hoverProps, restProps), children, onRemoveRequest && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     icon: {
-      name: 'remove-circle-filled'
+      name: 'general.minusCircle'
     },
     title: removeTitle,
     size: "sm",

package/dist/cjs/Menu/Heading.js

@@ -23,5 +23,6 @@ function Heading(_ref) {
   }, restProps), children);
 }
 
+Heading.displayName = 'Menu.Heading';
 var _default = Heading;
 exports["default"] = _default;

package/dist/cjs/Modal/Modal.test.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _Dropdown = _interopRequireDefault(require("../Dropdown"));
+
+var _Select = _interopRequireDefault(require("../Select"));
+
+var _ = require("../");
+
+var _lodash = require("lodash");
+
+describe('Modal', function () {
+  var TestModal = function TestModal() {
+    var _useState = (0, _react.useState)(false),
+        open = _useState[0],
+        setOpen = _useState[1];
+
+    return /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.Button, {
+      "data-testid": "modal-toggle",
+      onClick: function onClick() {
+        return setOpen(!open);
+      },
+      title: "Toggle modal"
+    }), /*#__PURE__*/_react["default"].createElement(_.Modal, {
+      open: open,
+      onRequestClose: function onRequestClose() {
+        return setOpen(false);
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_.Heading, {
+      "data-testid": "modal-header"
+    }, "Hello"), /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], null, [1, 2, 3].map(function (n) {
+      return /*#__PURE__*/_react["default"].createElement(_Dropdown["default"].Item, {
+        "data-testid": "dropdown-item-" + n,
+        key: n
+      }, n);
+    })), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      onChange: _lodash.noop
+    }, [1, 2, 3].map(function (n) {
+      return /*#__PURE__*/_react["default"].createElement(_Select["default"].Option, {
+        "data-testid": "select-option-" + n,
+        key: n,
+        value: n
+      }, n);
+    })))));
+  };
+
+  describe('Keyboard navigation', function () {
+    it('should close modal on escape keypress (dropdown button has focus)', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(TestModal, null));
+      expect(_react2.screen.queryByTestId('modal-header')).toBeNull();
+
+      _userEvent["default"].click(_react2.screen.getByTestId('modal-toggle'));
+
+      expect(_react2.screen.getByTestId('modal-header')).toBeInTheDocument();
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(_react2.screen.queryByTestId('modal-header')).toBeNull();
+    });
+    it('should not close modal when escape key closes a dropdown within modal', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(TestModal, null));
+
+      _userEvent["default"].click(_react2.screen.getByTestId('modal-toggle'));
+
+      var _screen$getAllByRole = _react2.screen.getAllByRole('button'),
+          dropdown = _screen$getAllByRole[1];
+
+      expect(dropdown).toHaveFocus();
+
+      _userEvent["default"].keyboard('{arrowdown}');
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(_react2.screen.getByTestId('modal-header')).toBeInTheDocument();
+    });
+    it('should close dropdown on escape & close modal on subsequent escape', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(TestModal, null));
+
+      _userEvent["default"].click(_react2.screen.getByTestId('modal-toggle'));
+
+      _userEvent["default"].keyboard('{arrowdown}');
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(_react2.screen.getByTestId('modal-header')).toBeInTheDocument();
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(_react2.screen.queryByTestId('modal-header')).toBeNull();
+    });
+    it('should hide select popover on escape, but select remains in dom', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(TestModal, null));
+
+      _userEvent["default"].click(_react2.screen.getByTestId('modal-toggle'));
+
+      _userEvent["default"].tab();
+
+      _userEvent["default"].keyboard('{arrowdown}');
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(_react2.screen.queryByTestId('select-option-1')).toBeInTheDocument();
+    });
+    it('should hide select popover on escape, close (unmount) select popover on subsequent escape, persist modal', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(TestModal, null));
+
+      _userEvent["default"].click(_react2.screen.getByTestId('modal-toggle'));
+
+      _userEvent["default"].tab();
+
+      _userEvent["default"].keyboard('{arrowdown}');
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(_react2.screen.queryByTestId('select-option-1')).toBeInTheDocument();
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(_react2.screen.queryByTestId('select-option-1')).toBeNull();
+      expect(_react2.screen.queryByTestId('modal-header')).toBeInTheDocument();
+    });
+    it('should hide select popover on escape, close (unmount) select popover on subsequent escape, close modal on subsequent escape', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(TestModal, null));
+
+      _userEvent["default"].click(_react2.screen.getByTestId('modal-toggle'));
+
+      _userEvent["default"].tab();
+
+      _userEvent["default"].keyboard('{arrowdown}');
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(_react2.screen.queryByTestId('select-option-1')).toBeInTheDocument();
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(_react2.screen.queryByTestId('select-option-1')).toBeNull();
+      expect(_react2.screen.queryByTestId('modal-header')).toBeInTheDocument();
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(_react2.screen.queryByTestId('modal-header')).toBeNull();
+    });
+  });
+});

package/dist/cjs/Pagination/Pagination.js

@@ -112,7 +112,8 @@ var Pagination = /*#__PURE__*/function (_Component) {
       onClick: onPageChange.bind(null, currentPage - 1),
       disabled: currentPage === 1,
       icon: {
-        name: 'caret-left'
+        name: 'general.leftChevron',
+        size: 'xs'
       },
       tooltip: {
         title: 'Previous Page'
@@ -123,7 +124,8 @@ var Pagination = /*#__PURE__*/function (_Component) {
       onClick: onPageChange.bind(null, currentPage + 1),
       disabled: currentPage === totalPages,
       icon: {
-        name: 'caret-right'
+        name: 'general.rightChevron',
+        size: 'xs'
       },
       tooltip: {
         title: 'Next Page'

package/dist/cjs/Popover/Popover.js

@@ -119,6 +119,10 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   var requestClose = function requestClose(event) {
     if (event.key === 'Escape' && onRequestClose) {
+      if (open) {
+        event.nativeEvent.stopImmediatePropagation();
+      }
+
       onRequestClose();
     }
 

package/dist/cjs/Popover/Popover.test.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _ = require("..");
+
+var PopBasic = function PopBasic(_ref) {
+  var children = _ref.children;
+
+  var _useState = (0, _react.useState)(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_.Box, {
+    id: "container"
+  }, /*#__PURE__*/_react["default"].createElement(_.Popover, {
+    open: open,
+    offset: 1,
+    renderTo: "#container",
+    anchorElement: /*#__PURE__*/_react["default"].createElement(_.Button, {
+      title: "Toggle",
+      onClick: function onClick() {
+        return setOpen(!open);
+      },
+      id: "anchor-element"
+    })
+  }, children));
+};
+
+describe('Popover', function () {
+  it('should not render string in closed Popover', function () {
+    var string = 'Test Text';
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(PopBasic, null, /*#__PURE__*/_react["default"].createElement(_.Text, null, string)));
+    expect(_react2.screen.queryByText(string)).toBeNull();
+  });
+  it('should render string in open Popover', function () {
+    var string = 'Test Text';
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(PopBasic, null, /*#__PURE__*/_react["default"].createElement(_.Text, null, string)));
+
+    var openPopover = _react2.screen.getByRole('button');
+
+    _userEvent["default"].click(openPopover);
+
+    expect(_react2.screen.getByText(string)).toBeInTheDocument();
+  });
+  it('should focus open button on click', function () {
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(PopBasic, null, /*#__PURE__*/_react["default"].createElement(_.Box, null)));
+
+    var openPopover = _react2.screen.getByRole('button');
+
+    _userEvent["default"].click(openPopover);
+
+    expect(openPopover).toHaveFocus();
+  });
+});