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

package/dist/cjs/Dropdown/Dropdown.test.js

@@ -2,34 +2,209 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _react = _interopRequireDefault(require("react"));
+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 _lodash = require("lodash");
+
+var _ = require("..");
+
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
 
-var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
+describe('Dropdown', function () {
+  describe('Text search', function () {
+    it("should render title", function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+        title: "A menu"
+      }));
 
-it("should render title", function () {
-  (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
-    title: "A menu"
-  }));
+      _react2.screen.getByText('A menu');
+    });
+    it("calls passed onSearch function when receiving keyboard input", function () {
+      var customTextSearch = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
+        title: "A menu",
+        onSearch: customTextSearch
+      })));
 
-  _react2.screen.getByText('A menu');
-});
-it("calls passed onSearch function when receiving keyboard input", function () {
-  var customTextSearch = jest.fn();
-  (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], null, /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
-    title: "A menu",
-    onSearch: customTextSearch
-  })));
+      var dropdown = _react2.screen.getByText('A menu');
 
-  var dropdown = _react2.screen.getByText('A menu');
+      _react2.fireEvent.keyDown(dropdown, {
+        key: 'A',
+        code: 'KeyA'
+      });
 
-  _react2.fireEvent.keyDown(dropdown, {
-    key: 'A',
-    code: 'KeyA'
+      expect(customTextSearch).toHaveBeenCalled();
+    });
   });
+  describe('Keyboard navigation', function () {
+    var StatefulDropdown = function StatefulDropdown() {
+      var _useState = (0, _react.useState)(0),
+          count = _useState[0],
+          setCount = _useState[1];
+
+      return /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Box, null, /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], null, /*#__PURE__*/_react["default"].createElement(_Dropdown["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_.Button, {
+        title: "One",
+        onClick: function onClick() {
+          return (0, _lodash.noop)();
+        }
+      })), /*#__PURE__*/_react["default"].createElement(_Dropdown["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_.Button, {
+        title: "Two",
+        onClick: function onClick() {
+          return setCount(function (c) {
+            return c + 1;
+          });
+        }
+      }), /*#__PURE__*/_react["default"].createElement(_.Text, {
+        "data-testid": "count-text"
+      }, count)), /*#__PURE__*/_react["default"].createElement(_Dropdown["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_.Button, {
+        title: "Three",
+        onClick: function onClick() {
+          return (0, _lodash.noop)();
+        }
+      })))));
+    };
+
+    it('should trap focus, tab forward through all elements', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(StatefulDropdown, null));
+
+      _userEvent["default"].tab();
+
+      _userEvent["default"].keyboard('{enter}');
+
+      var _screen$getAllByRole = _react2.screen.getAllByRole('button'),
+          openPopover = _screen$getAllByRole[0],
+          buttonOne = _screen$getAllByRole[1],
+          buttonTwo = _screen$getAllByRole[2],
+          buttonThree = _screen$getAllByRole[3];
+
+      expect(openPopover).toHaveFocus();
+
+      _userEvent["default"].tab();
+
+      expect(buttonOne).toHaveFocus();
+
+      _userEvent["default"].tab();
+
+      expect(buttonTwo).toHaveFocus();
+
+      _userEvent["default"].tab();
+
+      expect(buttonThree).toHaveFocus();
+
+      _userEvent["default"].tab();
+
+      expect(buttonOne).toHaveFocus();
+    });
+    it('should trap focus, tab backwards from first element to last', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(StatefulDropdown, null));
+
+      _userEvent["default"].tab();
+
+      _userEvent["default"].keyboard('{enter}');
+
+      var _screen$getAllByRole2 = _react2.screen.getAllByRole('button'),
+          openPopover = _screen$getAllByRole2[0],
+          buttonOne = _screen$getAllByRole2[1],
+          _buttonTwo = _screen$getAllByRole2[2],
+          buttonThree = _screen$getAllByRole2[3];
+
+      expect(openPopover).toHaveFocus();
+
+      _userEvent["default"].tab();
+
+      expect(buttonOne).toHaveFocus();
+
+      _userEvent["default"].tab({
+        shift: true
+      });
+
+      expect(buttonThree).toHaveFocus();
+    });
+    it('should retain tab order after rerender', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(StatefulDropdown, null));
+
+      _userEvent["default"].tab();
 
-  expect(customTextSearch).toHaveBeenCalled();
+      _userEvent["default"].keyboard('{enter}');
+
+      var _screen$getAllByRole3 = _react2.screen.getAllByRole('button'),
+          buttonOne = _screen$getAllByRole3[1],
+          buttonTwo = _screen$getAllByRole3[2],
+          buttonThree = _screen$getAllByRole3[3];
+
+      _userEvent["default"].tab();
+
+      _userEvent["default"].tab();
+
+      expect(_react2.screen.getByTestId('count-text')).toHaveTextContent('0');
+
+      _userEvent["default"].keyboard('{enter}');
+
+      expect(_react2.screen.getByTestId('count-text')).toHaveTextContent('1');
+      expect(buttonTwo).toHaveFocus();
+
+      _userEvent["default"].tab();
+
+      expect(buttonThree).toHaveFocus();
+
+      _userEvent["default"].tab({
+        shift: true
+      });
+
+      _userEvent["default"].tab({
+        shift: true
+      });
+
+      expect(buttonOne).toHaveFocus();
+
+      _userEvent["default"].tab();
+
+      _userEvent["default"].tab();
+
+      _userEvent["default"].tab();
+
+      expect(buttonOne).toHaveFocus();
+
+      _userEvent["default"].tab({
+        shift: true
+      });
+
+      _userEvent["default"].tab({
+        shift: true
+      });
+
+      _userEvent["default"].tab({
+        shift: true
+      });
+
+      expect(buttonOne).toHaveFocus();
+    });
+    it('should focus dropdown toggle when a user presses escape key', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(StatefulDropdown, null));
+
+      _userEvent["default"].tab();
+
+      _userEvent["default"].keyboard('{enter}');
+
+      var _screen$getAllByRole4 = _react2.screen.getAllByRole('button'),
+          openPopover = _screen$getAllByRole4[0],
+          buttonOne = _screen$getAllByRole4[1];
+
+      _userEvent["default"].tab();
+
+      expect(buttonOne).toHaveFocus();
+
+      _userEvent["default"].keyboard("{esc}");
+
+      expect(openPopover).toHaveFocus();
+    });
+  });
 });

package/dist/cjs/Group/Group.js

@@ -29,7 +29,8 @@ 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';
@@ -38,15 +39,16 @@ function Group(_ref) {
   var marginBottom = isHorizontalLayout ? 0 : '-1px';
   var marginRight = isHorizontalLayout ? '-1px' : 0;
   return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
-    axis: axis
+    axis: axis,
+    spacing: spacing
   }, restProps), (0, _utils.cloneChildren)(children, function (child, _ref2) {
     var _objectSpread2;
 
     var firstChild = _ref2.firstChild,
         lastChild = _ref2.lastChild;
-    return _objectSpread(_objectSpread(_objectSpread({}, childProps), {}, (_objectSpread2 = {}, _objectSpread2[startRadius] = firstChild ? radiusValue : 0, _objectSpread2[endRadius] = lastChild ? radiusValue : 0, _objectSpread2), !lastChild && {
+    return _objectSpread(_objectSpread(_objectSpread({}, childProps), {}, (_objectSpread2 = {}, _objectSpread2[startRadius] = firstChild ? radiusValue : 0, _objectSpread2[endRadius] = lastChild ? radiusValue : 0, _objectSpread2), !spacing && !lastChild && {
       marginBottom: marginBottom
-    }), !lastChild && {
+    }), !spacing && !lastChild && {
       marginRight: marginRight
     });
   }));

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/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();
+  });
+});

package/dist/cjs/Popover/rewireTabOrder.js

@@ -36,38 +36,29 @@ var RewireTabOrder = /*#__PURE__*/function () {
     (0, _defineProperty2["default"])(this, "lastFocusableElement", null);
     (0, _defineProperty2["default"])(this, "originalActiveElement", null);
     (0, _defineProperty2["default"])(this, "nextActiveElement", null);
-    (0, _defineProperty2["default"])(this, "focusOriginalActiveElement", function () {
-      _this.originalActiveElement.focus();
-    });
-    (0, _defineProperty2["default"])(this, "focusNextActiveElement", function () {
-      _this.nextActiveElement.focus();
-    });
     (0, _defineProperty2["default"])(this, "moveFocusToTargetFromTriggerElement", function (event) {
       if (!event.shiftKey && event.keyCode === TAB_KEY) {
         event.preventDefault();
 
-        _this.firstFocusableElement.focus();
+        if (_this.tabbables.includes(_this.nextActiveElement)) {
+          _this.nextActiveElement.focus();
+        } else {
+          _this.firstFocusableElement.focus();
+        }
       }
     });
-    (0, _defineProperty2["default"])(this, "moveFocusFromTargetToTriggerElement", function (event) {
+    (0, _defineProperty2["default"])(this, "moveFocusToTargetFromFirstElement", function (event) {
       if (event.target === _this.firstFocusableElement && event.shiftKey && event.keyCode === TAB_KEY) {
         event.preventDefault();
 
-        _this.originalActiveElement.focus();
-      }
-    });
-    (0, _defineProperty2["default"])(this, "moveFocusToTargetFromNextElement", function (event) {
-      if (event.shiftKey && event.keyCode === TAB_KEY) {
-        event.preventDefault();
-
         _this.lastFocusableElement.focus();
       }
     });
-    (0, _defineProperty2["default"])(this, "moveFocusFromTargetToNextElement", function (event) {
-      if (!event.shiftKey && event.keyCode === TAB_KEY) {
+    (0, _defineProperty2["default"])(this, "moveFocusToTargetFromLastElement", function (event) {
+      if (event.target === _this.lastFocusableElement && !event.shiftKey && event.keyCode === TAB_KEY) {
         event.preventDefault();
 
-        _this.nextActiveElement.focus();
+        _this.firstFocusableElement.focus();
       }
     });
 
@@ -88,12 +79,8 @@ var RewireTabOrder = /*#__PURE__*/function () {
     this.originalActiveElement = document.activeElement;
     this.nextActiveElement = getNextActiveElement(this.originalActiveElement);
     this.originalActiveElement.addEventListener('keydown', this.moveFocusToTargetFromTriggerElement);
-    this.firstFocusableElement.addEventListener('keydown', this.moveFocusFromTargetToTriggerElement);
-
-    if (this.nextActiveElement) {
-      this.nextActiveElement.addEventListener('keydown', this.moveFocusToTargetFromNextElement);
-      this.lastFocusableElement.addEventListener('keydown', this.moveFocusFromTargetToNextElement);
-    }
+    this.firstFocusableElement.addEventListener('keydown', this.moveFocusToTargetFromFirstElement);
+    this.lastFocusableElement.addEventListener('keydown', this.moveFocusToTargetFromLastElement);
   };
 
   _proto.destroy = function destroy() {
@@ -102,12 +89,8 @@ var RewireTabOrder = /*#__PURE__*/function () {
     }
 
     this.originalActiveElement.removeEventListener('keydown', this.moveFocusToTargetFromTriggerElement);
-    this.firstFocusableElement.removeEventListener('keydown', this.moveFocusFromTargetToTriggerElement);
-
-    if (this.nextActiveElement) {
-      this.nextActiveElement.removeEventListener('keydown', this.moveFocusToTargetFromNextElement);
-      this.lastFocusableElement.removeEventListener('keydown', this.moveFocusFromTargetToNextElement);
-    }
+    this.firstFocusableElement.removeEventListener('keydown', this.moveFocusToTargetFromFirstElement);
+    this.lastFocusableElement.removeEventListener('keydown', this.moveFocusToTargetFromLastElement);
   };
 
   return RewireTabOrder;

package/dist/cjs/Select/Select.js

@@ -366,6 +366,15 @@ var Select = /*#__PURE__*/function (_Component) {
 
               break;
 
+            case 'Escape':
+              if (isPopoverOpen && !isPopoverVisible) {
+                event.preventDefault();
+
+                _this2.closePopover();
+              }
+
+              break;
+
             case ' ':
               event.preventDefault();