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

package/dist/cjs/ThemeProvider/ThemeProvider.js

@@ -18,7 +18,7 @@ var _core = require("@emotion/core");
 
 var _cache = _interopRequireDefault(require("@emotion/cache"));
 
-var _deepmerge = _interopRequireDefault(require("deepmerge"));
+var _lodash = require("lodash");
 
 var _defaultTheme = _interopRequireDefault(require("../system/default-theme"));
 
@@ -78,12 +78,12 @@ function mergeThemes(a, b) {
 
   return _objectSpread(_objectSpread(_objectSpread({}, a), b), {}, {
     button: _objectSpread(_objectSpread(_objectSpread({}, a.button), b.button), {}, {
-      themes: (0, _deepmerge["default"])(((_a$button = a.button) == null ? void 0 : _a$button.themes) || {}, ((_b$button = b.button) == null ? void 0 : _b$button.themes) || {})
+      themes: (0, _lodash.merge)(((_a$button = a.button) == null ? void 0 : _a$button.themes) || {}, ((_b$button = b.button) == null ? void 0 : _b$button.themes) || {})
     }),
-    colors: (0, _deepmerge["default"])((0, _system.flattenPalette)(a.colors || {}), (0, _system.flattenPalette)(b.colors || {})),
+    colors: (0, _lodash.merge)((0, _system.flattenPalette)(a.colors || {}), (0, _system.flattenPalette)(b.colors || {})),
     spinner: _objectSpread(_objectSpread(_objectSpread({}, a.spinner), b.spinner), {}, {
-      sizes: (0, _deepmerge["default"])(((_a$spinner = a.spinner) == null ? void 0 : _a$spinner.sizes) || {}, ((_b$spinner = b.spinner) == null ? void 0 : _b$spinner.sizes) || {}),
-      thickness: (0, _deepmerge["default"])(((_a$spinner2 = a.spinner) == null ? void 0 : _a$spinner2.thickness) || {}, ((_b$spinner2 = b.spinner) == null ? void 0 : _b$spinner2.thickness) || {})
+      sizes: (0, _lodash.merge)(((_a$spinner = a.spinner) == null ? void 0 : _a$spinner.sizes) || {}, ((_b$spinner = b.spinner) == null ? void 0 : _b$spinner.sizes) || {}),
+      thickness: (0, _lodash.merge)(((_a$spinner2 = a.spinner) == null ? void 0 : _a$spinner2.thickness) || {}, ((_b$spinner2 = b.spinner) == null ? void 0 : _b$spinner2.thickness) || {})
     })
   });
 }

package/dist/cjs/hooks/useConstant.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+exports.__esModule = true;
+exports["default"] = useConstant;
+
+var React = _interopRequireWildcard(require("react"));
+
+// A copy/paste of the source of the `use-constant` package.
+// https://github.com/Andarist/use-constant/blob/main/src/index.ts
+// This is done to reduce dependencies.
+function useConstant(fn) {
+  var ref = React.useRef();
+
+  if (!ref.current) {
+    ref.current = {
+      v: fn()
+    };
+  }
+
+  return ref.current.v;
+}

package/dist/cjs/system/utils.js

@@ -24,7 +24,7 @@ var _core = require("@emotion/core");
 
 var _polished = require("polished");
 
-var _lodash = _interopRequireDefault(require("lodash.get"));
+var _lodash = require("lodash");
 
 var _colors = require("./colors");
 
@@ -161,7 +161,7 @@ function getForegroundColor(color) {
 
 function useThemeValue(path, defaultValue) {
   var userTheme = (0, _react.useContext)(_core.ThemeContext);
-  return path ? (0, _lodash["default"])(userTheme, path, defaultValue || (0, _lodash["default"])(_defaultTheme["default"], path)) : userTheme || _defaultTheme["default"];
+  return path ? (0, _lodash.get)(userTheme, path, defaultValue || (0, _lodash.get)(_defaultTheme["default"], path)) : userTheme || _defaultTheme["default"];
 }
 
 function useThemeProps(path, props) {

package/dist/cjs/utils.js

@@ -46,7 +46,7 @@ var _react = require("react");
 
 var _tabbable = require("tabbable");
 
-var _camelToKebab = _interopRequireDefault(require("camel-to-kebab"));
+var _lodash = require("lodash");
 
 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; }
 
@@ -785,11 +785,11 @@ function createCSSProperty(key, value) {
     createdCSSProperties.add(key);
   }
 
-  return "--" + (0, _camelToKebab["default"])(key) + "-" + (0, _camelToKebab["default"])(value);
+  return "--" + (0, _lodash.kebabCase)(key) + "-" + (0, _lodash.kebabCase)(value);
 }
 
 function getCSSProperty(key, value) {
-  return key && value ? "var(--" + (0, _camelToKebab["default"])(key) + "-" + (0, _camelToKebab["default"])(value) + ")" : undefined;
+  return key && value ? "var(--" + (0, _lodash.kebabCase)(key) + "-" + (0, _lodash.kebabCase)(value) + ")" : undefined;
 }
 
 function objectToCSSProperties(themeKey, props) {

package/dist/esm/DataTable/hooks/useCollapsibleRows.js

@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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) { _defineProperty(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; }
 
 import { createContext, useCallback, useContext, useEffect } from 'react';
-import useConstant from 'use-constant';
+import useConstant from '../../hooks/useConstant';
 import create from 'zustand';
 import { range } from '../../utils';
 export var CollapsibleRowsContext = /*#__PURE__*/createContext(null);

package/dist/esm/Dropdown/Dropdown.test.js

@@ -1,26 +1,167 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import { noop } from 'lodash';
+import { Box, Button, Text, ThemeProvider } from '..';
 import Dropdown from './Dropdown';
-import ThemeProvider from '../ThemeProvider';
 
 var _ref = /*#__PURE__*/React.createElement(Dropdown, {
   title: "A menu"
 });
 
-it("should render title", function () {
-  render(_ref);
-  screen.getByText('A menu');
-});
-it("calls passed onSearch function when receiving keyboard input", function () {
-  var customTextSearch = jest.fn();
-  render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, {
-    title: "A menu",
-    onSearch: customTextSearch
-  })));
-  var dropdown = screen.getByText('A menu');
-  fireEvent.keyDown(dropdown, {
-    key: 'A',
-    code: 'KeyA'
+describe('Dropdown', function () {
+  describe('Text search', function () {
+    it("should render title", function () {
+      render(_ref);
+      screen.getByText('A menu');
+    });
+    it("calls passed onSearch function when receiving keyboard input", function () {
+      var customTextSearch = jest.fn();
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, {
+        title: "A menu",
+        onSearch: customTextSearch
+      })));
+      var dropdown = screen.getByText('A menu');
+      fireEvent.keyDown(dropdown, {
+        key: 'A',
+        code: 'KeyA'
+      });
+      expect(customTextSearch).toHaveBeenCalled();
+    });
+  });
+  describe('Keyboard navigation', function () {
+    var StatefulDropdown = function StatefulDropdown() {
+      var _useState = useState(0),
+          count = _useState[0],
+          setCount = _useState[1];
+
+      return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Item, null, /*#__PURE__*/React.createElement(Button, {
+        title: "One",
+        onClick: function onClick() {
+          return noop();
+        }
+      })), /*#__PURE__*/React.createElement(Dropdown.Item, null, /*#__PURE__*/React.createElement(Button, {
+        title: "Two",
+        onClick: function onClick() {
+          return setCount(function (c) {
+            return c + 1;
+          });
+        }
+      }), /*#__PURE__*/React.createElement(Text, {
+        "data-testid": "count-text"
+      }, count)), /*#__PURE__*/React.createElement(Dropdown.Item, null, /*#__PURE__*/React.createElement(Button, {
+        title: "Three",
+        onClick: function onClick() {
+          return noop();
+        }
+      })))));
+    };
+
+    var _ref2 = /*#__PURE__*/React.createElement(StatefulDropdown, null);
+
+    it('should trap focus, tab forward through all elements', function () {
+      render(_ref2);
+      userEvent.tab();
+      userEvent.keyboard('{enter}');
+
+      var _screen$getAllByRole = screen.getAllByRole('button'),
+          openPopover = _screen$getAllByRole[0],
+          buttonOne = _screen$getAllByRole[1],
+          buttonTwo = _screen$getAllByRole[2],
+          buttonThree = _screen$getAllByRole[3];
+
+      expect(openPopover).toHaveFocus();
+      userEvent.tab();
+      expect(buttonOne).toHaveFocus();
+      userEvent.tab();
+      expect(buttonTwo).toHaveFocus();
+      userEvent.tab();
+      expect(buttonThree).toHaveFocus();
+      userEvent.tab();
+      expect(buttonOne).toHaveFocus();
+    });
+
+    var _ref3 = /*#__PURE__*/React.createElement(StatefulDropdown, null);
+
+    it('should trap focus, tab backwards from first element to last', function () {
+      render(_ref3);
+      userEvent.tab();
+      userEvent.keyboard('{enter}');
+
+      var _screen$getAllByRole2 = screen.getAllByRole('button'),
+          openPopover = _screen$getAllByRole2[0],
+          buttonOne = _screen$getAllByRole2[1],
+          _buttonTwo = _screen$getAllByRole2[2],
+          buttonThree = _screen$getAllByRole2[3];
+
+      expect(openPopover).toHaveFocus();
+      userEvent.tab();
+      expect(buttonOne).toHaveFocus();
+      userEvent.tab({
+        shift: true
+      });
+      expect(buttonThree).toHaveFocus();
+    });
+
+    var _ref4 = /*#__PURE__*/React.createElement(StatefulDropdown, null);
+
+    it('should retain tab order after rerender', function () {
+      render(_ref4);
+      userEvent.tab();
+      userEvent.keyboard('{enter}');
+
+      var _screen$getAllByRole3 = screen.getAllByRole('button'),
+          buttonOne = _screen$getAllByRole3[1],
+          buttonTwo = _screen$getAllByRole3[2],
+          buttonThree = _screen$getAllByRole3[3];
+
+      userEvent.tab();
+      userEvent.tab();
+      expect(screen.getByTestId('count-text')).toHaveTextContent('0');
+      userEvent.keyboard('{enter}');
+      expect(screen.getByTestId('count-text')).toHaveTextContent('1');
+      expect(buttonTwo).toHaveFocus();
+      userEvent.tab();
+      expect(buttonThree).toHaveFocus();
+      userEvent.tab({
+        shift: true
+      });
+      userEvent.tab({
+        shift: true
+      });
+      expect(buttonOne).toHaveFocus();
+      userEvent.tab();
+      userEvent.tab();
+      userEvent.tab();
+      expect(buttonOne).toHaveFocus();
+      userEvent.tab({
+        shift: true
+      });
+      userEvent.tab({
+        shift: true
+      });
+      userEvent.tab({
+        shift: true
+      });
+      expect(buttonOne).toHaveFocus();
+    });
+
+    var _ref5 = /*#__PURE__*/React.createElement(StatefulDropdown, null);
+
+    it('should focus dropdown toggle when a user presses escape key', function () {
+      render(_ref5);
+      userEvent.tab();
+      userEvent.keyboard('{enter}');
+
+      var _screen$getAllByRole4 = screen.getAllByRole('button'),
+          openPopover = _screen$getAllByRole4[0],
+          buttonOne = _screen$getAllByRole4[1];
+
+      userEvent.tab();
+      expect(buttonOne).toHaveFocus();
+      userEvent.keyboard("{esc}");
+      expect(openPopover).toHaveFocus();
+    });
   });
-  expect(customTextSearch).toHaveBeenCalled();
 });

package/dist/esm/Group/Group.js

@@ -16,7 +16,8 @@ export function Group(_ref) {
       childProps = _ref.childProps,
       children = _ref.children,
       radius = _ref.radius,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["axis", "childProps", "children", "radius"]);
+      spacing = _ref.spacing,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["axis", "childProps", "children", "radius", "spacing"]);
 
   var themeRadius = useThemeValue('group.radius');
   var radiusValue = radius != null ? radius : themeRadius;
@@ -26,15 +27,16 @@ export function Group(_ref) {
   var marginBottom = isHorizontalLayout ? 0 : '-1px';
   var marginRight = isHorizontalLayout ? '-1px' : 0;
   return /*#__PURE__*/React.createElement(StackView, _extends({
-    axis: axis
+    axis: axis,
+    spacing: spacing
   }, restProps), 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/esm/Modal/Modal.test.js

@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import Dropdown from '../Dropdown';
+import Select from '../Select';
+import { Button, Heading, Modal, ThemeProvider } from '../';
+import { noop } from 'lodash';
+
+var _ref = /*#__PURE__*/React.createElement(Heading, {
+  "data-testid": "modal-header"
+}, "Hello");
+
+describe('Modal', function () {
+  var TestModal = function TestModal() {
+    var _useState = useState(false),
+        open = _useState[0],
+        setOpen = _useState[1];
+
+    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      "data-testid": "modal-toggle",
+      onClick: function onClick() {
+        return setOpen(!open);
+      },
+      title: "Toggle modal"
+    }), /*#__PURE__*/React.createElement(Modal, {
+      open: open,
+      onRequestClose: function onRequestClose() {
+        return setOpen(false);
+      }
+    }, _ref, /*#__PURE__*/React.createElement(Dropdown, null, [1, 2, 3].map(function (n) {
+      return /*#__PURE__*/React.createElement(Dropdown.Item, {
+        "data-testid": "dropdown-item-" + n,
+        key: n
+      }, n);
+    })), /*#__PURE__*/React.createElement(Select, {
+      onChange: noop
+    }, [1, 2, 3].map(function (n) {
+      return /*#__PURE__*/React.createElement(Select.Option, {
+        "data-testid": "select-option-" + n,
+        key: n,
+        value: n
+      }, n);
+    })))));
+  };
+
+  var _ref2 = /*#__PURE__*/React.createElement(TestModal, null);
+
+  var _ref3 = /*#__PURE__*/React.createElement(TestModal, null);
+
+  var _ref4 = /*#__PURE__*/React.createElement(TestModal, null);
+
+  var _ref5 = /*#__PURE__*/React.createElement(TestModal, null);
+
+  var _ref6 = /*#__PURE__*/React.createElement(TestModal, null);
+
+  var _ref7 = /*#__PURE__*/React.createElement(TestModal, null);
+
+  describe('Keyboard navigation', function () {
+    it('should close modal on escape keypress (dropdown button has focus)', function () {
+      render(_ref2);
+      expect(screen.queryByTestId('modal-header')).toBeNull();
+      userEvent.click(screen.getByTestId('modal-toggle'));
+      expect(screen.getByTestId('modal-header')).toBeInTheDocument();
+      userEvent.keyboard("{esc}");
+      expect(screen.queryByTestId('modal-header')).toBeNull();
+    });
+    it('should not close modal when escape key closes a dropdown within modal', function () {
+      render(_ref3);
+      userEvent.click(screen.getByTestId('modal-toggle'));
+
+      var _screen$getAllByRole = screen.getAllByRole('button'),
+          dropdown = _screen$getAllByRole[1];
+
+      expect(dropdown).toHaveFocus();
+      userEvent.keyboard('{arrowdown}');
+      userEvent.keyboard("{esc}");
+      expect(screen.getByTestId('modal-header')).toBeInTheDocument();
+    });
+    it('should close dropdown on escape & close modal on subsequent escape', function () {
+      render(_ref4);
+      userEvent.click(screen.getByTestId('modal-toggle'));
+      userEvent.keyboard('{arrowdown}');
+      userEvent.keyboard("{esc}");
+      expect(screen.getByTestId('modal-header')).toBeInTheDocument();
+      userEvent.keyboard("{esc}");
+      expect(screen.queryByTestId('modal-header')).toBeNull();
+    });
+    it('should hide select popover on escape, but select remains in dom', function () {
+      render(_ref5);
+      userEvent.click(screen.getByTestId('modal-toggle'));
+      userEvent.tab();
+      userEvent.keyboard('{arrowdown}');
+      userEvent.keyboard("{esc}");
+      expect(screen.queryByTestId('select-option-1')).toBeInTheDocument();
+    });
+    it('should hide select popover on escape, close (unmount) select popover on subsequent escape, persist modal', function () {
+      render(_ref6);
+      userEvent.click(screen.getByTestId('modal-toggle'));
+      userEvent.tab();
+      userEvent.keyboard('{arrowdown}');
+      userEvent.keyboard("{esc}");
+      expect(screen.queryByTestId('select-option-1')).toBeInTheDocument();
+      userEvent.keyboard("{esc}");
+      expect(screen.queryByTestId('select-option-1')).toBeNull();
+      expect(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 () {
+      render(_ref7);
+      userEvent.click(screen.getByTestId('modal-toggle'));
+      userEvent.tab();
+      userEvent.keyboard('{arrowdown}');
+      userEvent.keyboard("{esc}");
+      expect(screen.queryByTestId('select-option-1')).toBeInTheDocument();
+      userEvent.keyboard("{esc}");
+      expect(screen.queryByTestId('select-option-1')).toBeNull();
+      expect(screen.queryByTestId('modal-header')).toBeInTheDocument();
+      userEvent.keyboard("{esc}");
+      expect(screen.queryByTestId('modal-header')).toBeNull();
+    });
+  });
+});

package/dist/esm/Popover/Popover.js

@@ -103,6 +103,10 @@ export 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/esm/Popover/Popover.test.js

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import { Box, Text, Button, Popover } from '..';
+
+var PopBasic = function PopBasic(_ref) {
+  var children = _ref.children;
+
+  var _useState = useState(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  return /*#__PURE__*/React.createElement(Box, {
+    id: "container"
+  }, /*#__PURE__*/React.createElement(Popover, {
+    open: open,
+    offset: 1,
+    renderTo: "#container",
+    anchorElement: /*#__PURE__*/React.createElement(Button, {
+      title: "Toggle",
+      onClick: function onClick() {
+        return setOpen(!open);
+      },
+      id: "anchor-element"
+    })
+  }, children));
+};
+
+var _ref2 = /*#__PURE__*/React.createElement(PopBasic, null, /*#__PURE__*/React.createElement(Box, null));
+
+describe('Popover', function () {
+  it('should not render string in closed Popover', function () {
+    var string = 'Test Text';
+    render( /*#__PURE__*/React.createElement(PopBasic, null, /*#__PURE__*/React.createElement(Text, null, string)));
+    expect(screen.queryByText(string)).toBeNull();
+  });
+  it('should render string in open Popover', function () {
+    var string = 'Test Text';
+    render( /*#__PURE__*/React.createElement(PopBasic, null, /*#__PURE__*/React.createElement(Text, null, string)));
+    var openPopover = screen.getByRole('button');
+    userEvent.click(openPopover);
+    expect(screen.getByText(string)).toBeInTheDocument();
+  });
+  it('should focus open button on click', function () {
+    render(_ref2);
+    var openPopover = screen.getByRole('button');
+    userEvent.click(openPopover);
+    expect(openPopover).toHaveFocus();
+  });
+});

package/dist/esm/Popover/rewireTabOrder.js

@@ -32,43 +32,31 @@ var RewireTabOrder = /*#__PURE__*/function () {
 
     _defineProperty(this, "nextActiveElement", null);
 
-    _defineProperty(this, "focusOriginalActiveElement", function () {
-      _this.originalActiveElement.focus();
-    });
-
-    _defineProperty(this, "focusNextActiveElement", function () {
-      _this.nextActiveElement.focus();
-    });
-
     _defineProperty(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();
+        }
       }
     });
 
-    _defineProperty(this, "moveFocusFromTargetToTriggerElement", function (event) {
+    _defineProperty(this, "moveFocusToTargetFromFirstElement", function (event) {
       if (event.target === _this.firstFocusableElement && event.shiftKey && event.keyCode === TAB_KEY) {
         event.preventDefault();
 
-        _this.originalActiveElement.focus();
-      }
-    });
-
-    _defineProperty(this, "moveFocusToTargetFromNextElement", function (event) {
-      if (event.shiftKey && event.keyCode === TAB_KEY) {
-        event.preventDefault();
-
         _this.lastFocusableElement.focus();
       }
     });
 
-    _defineProperty(this, "moveFocusFromTargetToNextElement", function (event) {
-      if (!event.shiftKey && event.keyCode === TAB_KEY) {
+    _defineProperty(this, "moveFocusToTargetFromLastElement", function (event) {
+      if (event.target === _this.lastFocusableElement && !event.shiftKey && event.keyCode === TAB_KEY) {
         event.preventDefault();
 
-        _this.nextActiveElement.focus();
+        _this.firstFocusableElement.focus();
       }
     });
 
@@ -89,12 +77,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() {
@@ -103,12 +87,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/esm/Scrim/Scrim.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import StackView from '../StackView';
-var Scrim = /*#__PURE__*/React.forwardRef(function (props) {
+var Scrim = /*#__PURE__*/React.forwardRef(function (props, _ref) {
   React.useLayoutEffect(function () {
     document.body.style.overflow = 'hidden';
     return function () {

package/dist/esm/Select/Select.js

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

package/dist/esm/Sidebar/Sidebar.js

@@ -7,7 +7,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import { jsx } from '@emotion/core';
 import { Children } from 'react';
 import StickyBox from 'react-sticky-box';
-import warning from 'warning';
 import { css } from '../system';
 import StackView from '../StackView';
 import SidebarList from './SidebarList';
@@ -29,7 +28,10 @@ function Sidebar(_ref) {
   }, restProps), jsx(StickyBox, {
     css: flexColumnCss
   }, Children.map(children, function (child) {
-    warning(child && child.type !== Sidebar.List || child && child.type !== Sidebar.Item, "Invalid component nesting. " + child.type + " cannot appear as a child of <Sidebar>. Only <Sidebar.List/> or <Sidebar.Item/> may be used.");
+    if (child && child.type !== Sidebar.List || child && child.type !== Sidebar.Item) {
+      console.warn("Invalid component nesting. " + child.type + " cannot appear as a child of <Sidebar>. Only <Sidebar.List/> or <Sidebar.Item/> may be used.");
+    }
+
     return child;
   })));
 }

package/dist/esm/Table/Table.js

@@ -10,8 +10,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { PureComponent, Children, Fragment } from 'react';
 import { Global } from '@emotion/core';
-import camelCase from 'lodash.camelcase';
-import snakeCase from 'lodash.snakecase';
+import { camelCase, snakeCase } from 'lodash';
 import Button from '../Button';
 import DragDrop from '../DragDrop';
 import Pagination from '../Pagination';

package/dist/esm/ThemeProvider/ThemeProvider.js

@@ -8,7 +8,7 @@ import React, { useLayoutEffect, useState } from 'react';
 import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
 import { CacheProvider } from '@emotion/core';
 import createCache from '@emotion/cache';
-import merge from 'deepmerge';
+import { merge } from 'lodash';
 import defaultTheme from '../system/default-theme';
 import { flattenPalette } from '../system';
 import { objectToCSSProperties, shallowEqual } from '../utils';