@planningcenter/tapestry-react 2.6.0-rc.8 → 2.6.0

package/dist/cjs/Button/Button.js

@@ -217,6 +217,13 @@ function Button(_ref) {
 
   if (to) {
     restProps['href'] = to;
+  } // remove `type` if either `to` or `href` is specified
+
+
+  if (to || restProps.href) {
+    buttonProps = _objectSpread(_objectSpread({}, buttonProps), {}, {
+      type: null
+    });
   } // apply stroke defaults and higher z-index when hovering to show outline in group properly
 
 
@@ -259,7 +266,7 @@ function Button(_ref) {
       restProps = (0, _utils.mergeProps)(restProps, wrapperProps);
     }
 
-    if (type && restProps.as && restProps.as !== "button") {
+    if (buttonProps.type && restProps.as && restProps.as !== "button") {
       console.log("Tapestry-React: <Button/> type prop is only supported by <button> and not <" + restProps.as + ">.");
     }
   }

package/dist/cjs/Button/Button.test.js

@@ -8,25 +8,68 @@ var _react2 = require("@testing-library/react");
 
 var _Button = require("./Button");
 
+it("should render as <button> with type=\"button\" by default", function () {
+  var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, null)),
+      container = _render.container;
+
+  var button = container.querySelector('button');
+  expect(button.getAttribute('type')).toEqual('button');
+});
+it("should render as <button> with type=\"submit\"", function () {
+  var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    type: "submit"
+  })),
+      container = _render2.container;
+
+  var button = container.querySelector('button');
+  expect(button.getAttribute('type')).toEqual('submit');
+});
 it("should render title", function () {
   var title = 'Hello';
 
-  var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     title: title
   })),
-      getByText = _render.getByText;
+      getByText = _render3.getByText;
 
   getByText(title);
 });
+it("should render <a> without a type if \"to\" is provided", function () {
+  var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    to: "#"
+  })),
+      container = _render4.container;
+
+  var button = container.querySelector('a');
+  expect(button.getAttribute('type')).toBeNull();
+});
+it("should render <a> without a type if \"href\" is provided", function () {
+  var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    href: "#"
+  })),
+      container = _render5.container;
+
+  var button = container.querySelector('a');
+  expect(button.getAttribute('type')).toBeNull();
+});
+it("should render <a> with \"href\" if \"to\" is specifed", function () {
+  var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    to: "#"
+  })),
+      container = _render6.container;
+
+  var button = container.querySelector('a');
+  expect(button.getAttribute('href')).toEqual('#');
+});
 it("should render href and external link values", function () {
   var title = 'Hello';
 
-  var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     external: true,
     title: title,
     to: "https://www.planningcenter.com"
   })),
-      getByText = _render2.getByText;
+      getByText = _render7.getByText;
 
   var button = getByText(title);
   expect(button.getAttribute('href')).toEqual('https://www.planningcenter.com');
@@ -36,18 +79,18 @@ it("should render href and external link values", function () {
 it("should call onClick when clicked or Enter or Space key is pressed", function () {
   var onClick = jest.fn();
 
-  var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     onClick: onClick
   })),
-      container = _render3.container;
+      container = _render8.container;
 
   _react2.fireEvent.click(container.firstChild);
 
   expect(onClick).toHaveBeenCalledTimes(1);
 });
 it("should not call onClick when Enter or Space key is pressed and onClick isn't present", function () {
-  var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, null)),
-      container = _render4.container;
+  var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, null)),
+      container = _render9.container;
 
   _react2.fireEvent.keyDown(container.firstChild, {
     key: 'Enter'

package/dist/cjs/DataTable/DataTable.js

@@ -205,7 +205,7 @@ var DataTable = function DataTable(props) {
     style: isLoadingOrEmpty ? {
       display: 'none'
     } : undefined,
-    className: css({
+    className: "tapestry-react-reset " + css({
       position: 'relative'
     })
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -226,7 +226,7 @@ var DataTable = function DataTable(props) {
       column: column,
       columnIndex: columnIndex,
       columnSort: columnSort,
-      className: css([].concat(cellVariantClassName, [column.css]))
+      className: "tapestry-react-reset " + css([].concat(cellVariantClassName, [column.css]))
     });
   }))), bodyToRender, hasFooterColumns && /*#__PURE__*/_react["default"].createElement("div", {
     ref: footerRef,
@@ -244,7 +244,7 @@ var DataTable = function DataTable(props) {
       key: columnIndex,
       role: "cell",
       ref: getColumnRef(columnIndex + "." + (data.length + 1)),
-      className: css([].concat(cellVariantClassName, [column.css]))
+      className: "tapestry-react-reset " + css([].concat(cellVariantClassName, [column.css]))
     }, typeof column.footer === 'string' || /*#__PURE__*/_react["default"].isValidElement(column.footer) ? column.footer : column.footer ? /*#__PURE__*/_react["default"].createElement(column.footer, {
       columnIndex: columnIndex
     }) : null);

package/dist/cjs/DataTable/components/BodyRow.js

@@ -37,8 +37,8 @@ function BodyRow(_ref) {
 
   var props = _objectSpread({
     ref: innerRef,
-    onClick: onRowClick && function () {
-      return onRowClick(rowData, rowIndex);
+    onClick: function onClick(event) {
+      return onRowClick && onRowClick(rowData, rowIndex, event);
     },
     onMouseEnter: bindKeyboardShortcuts,
     onMouseLeave: unbindKeyboardShortcuts,

package/dist/cjs/DataTable/components/BodyRows.js

@@ -57,7 +57,7 @@ function BodyRows(_ref) {
           ref: getColumnRef(columnIndex + "." + (rowIndex + 1)) // offset by 1 to account for header row
           ,
           role: "cell",
-          className: css([].concat(cellVariantStyles, [column.css]))
+          className: "tapestry-react-reset " + css([].concat(cellVariantStyles, [column.css]))
         }, (0, _utils.getCell)(column.cell, {
           columnIndex: columnIndex,
           rowData: rowData,
@@ -83,7 +83,7 @@ function BodyRows(_ref) {
       rowIndex: rowIndex,
       keyboardShortcuts: keyboardShortcuts,
       onRowClick: onRowClick,
-      className: css(rowVariantClassName)
+      className: "tapestry-react-reset " + css(rowVariantClassName)
     }, (0, _utils.getRowLinkProps)({
       getRowLink: getRowLink,
       data: rowData,

package/dist/cjs/DataTable/components/BodySubRows.js

@@ -71,7 +71,7 @@ var BodySubRows = function BodySubRows(_ref2) {
       rowIndex: rowIndex,
       keyboardShortcuts: keyboardShortcuts,
       onRowClick: onRowClick,
-      className: css(rowVariantClassName)
+      className: "tapestry-react-reset " + css(rowVariantClassName)
     }, (0, _utils.getRowLinkProps)({
       getRowLink: getRowLink,
       data: rowData,
@@ -90,7 +90,7 @@ var BodySubRows = function BodySubRows(_ref2) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: columnIndex,
         ref: getColumnRef(columnIndex + "." + (parentRowIndex + 1) + "." + rowIndex),
-        className: css([].concat(cellVariantClassName, [column.css]))
+        className: "tapestry-react-reset " + css([].concat(cellVariantClassName, [column.css]))
       }, (0, _utils.getCell)(column.subCell !== undefined ? column.subCell : column.cell, {
         columnIndex: columnIndex,
         rowData: rowData,

package/dist/cjs/DataTable/components/CheckboxCell.js

@@ -96,19 +96,19 @@ function CheckboxCell(_ref) {
     onKeyDown: function onKeyDown(event) {
       return event.key === ' ' && handleChange(event);
     },
-    className: "tapestry-react-Checkbox",
+    className: "tapestry-react-reset tapestry-react-Checkbox",
     css: cssStyles
   }, /*#__PURE__*/_react["default"].createElement(_Icon["default"].Path, {
     name: iconPaths.fill,
-    className: "tapestry-react-Checkbox-Fill",
+    className: "tapestry-react-reset tapestry-react-Checkbox-Fill",
     fill: checked || indeterminate ? 'primary' : 'surfaceTertiary',
     stroke: checked || indeterminate ? 'primary' : 'separatorSecondary'
   }), /*#__PURE__*/_react["default"].createElement(_Icon["default"].Path, {
     name: iconPaths.minus,
-    className: "tapestry-react-Checkbox-Minus"
+    className: "tapestry-react-reset tapestry-react-Checkbox-Fill"
   }), /*#__PURE__*/_react["default"].createElement(_Icon["default"].Path, {
     name: iconPaths.checked,
-    className: "tapestry-react-Checkbox-Checked"
+    className: "tapestry-react-reset tapestry-react-Checkbox-Checked"
   }));
 }
 

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

@@ -15,7 +15,7 @@ var _react = require("react");
 
 var _useConstant = _interopRequireDefault(require("../../hooks/useConstant"));
 
-var _zustand = _interopRequireDefault(require("zustand"));
+var _zustand = require("zustand");
 
 var _utils = require("../../utils");
 
@@ -51,7 +51,7 @@ function useCollapsibleRows(data, defaultAllSubRowsOpen) {
   }
 
   var useStore = (0, _useConstant["default"])(function () {
-    return (0, _zustand["default"])(function (set) {
+    return (0, _zustand.create)(function (set) {
       return {
         instant: false,
         allSubRowsOpen: defaultAllSubRowsOpen,

package/dist/cjs/Dropdown/Dropdown.js

@@ -84,7 +84,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         _this.popover.focusAnchor();
       }
 
-      if (data === _Link.LINK_DATA) {
+      if (node.tagName === 'A' && event.type !== 'click') {
         node.click();
       } else if (_this.props.onSelect) {
         _this.props.onSelect(data);
@@ -112,7 +112,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         keepInView = _this$props.keepInView,
         lockScrollWhileOpen = _this$props.lockScrollWhileOpen,
         matchWidths = _this$props.matchWidths,
-        onClick = _this$props.onClick,
+        _onClick = _this$props.onClick,
         onClose = _this$props.onClose,
         onKeyDown = _this$props.onKeyDown,
         onOpen = _this$props.onOpen,
@@ -194,12 +194,14 @@ var Dropdown = /*#__PURE__*/function (_Component) {
               }, _objectSpread2[arrowIconOnly ? 'icon' : 'iconRight'] = {
                 name: isPopoverOpen ? 'general.upCaret' : 'general.downCaret',
                 size: 'sm'
-              }, _objectSpread2.title = arrowIconOnly ? 'arrow down' : restProps.title, _objectSpread2.tabIndex = 0, _objectSpread2.cursor = 'pointer', _objectSpread2.onBlur = requestBlur, _objectSpread2.onClick = function onClick() {
+              }, _objectSpread2.title = arrowIconOnly ? 'arrow down' : restProps.title, _objectSpread2.tabIndex = 0, _objectSpread2.cursor = 'pointer', _objectSpread2.onBlur = requestBlur, _objectSpread2.onClick = function onClick(event) {
                 _this2.togglePopover();
 
                 if (!isPopoverOpen) {
                   _this2.popover.focusAnchor();
                 }
+
+                _onClick && _onClick(event);
               }, _objectSpread2.onKeyDown = function onKeyDown(event) {
                 anchorProps.onKeyDown(event);
 

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

@@ -12,7 +12,7 @@ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
 require("@testing-library/jest-dom/extend-expect");
 
-var _lodash = require("lodash");
+var _noop = _interopRequireDefault(require("lodash/noop"));
 
 var _ = require("..");
 
@@ -53,7 +53,7 @@ describe('Dropdown', function () {
       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)();
+          return (0, _noop["default"])();
         }
       })), /*#__PURE__*/_react["default"].createElement(_Dropdown["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_.Button, {
         title: "Two",
@@ -67,7 +67,7 @@ describe('Dropdown', function () {
       }, count)), /*#__PURE__*/_react["default"].createElement(_Dropdown["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_.Button, {
         title: "Three",
         onClick: function onClick() {
-          return (0, _lodash.noop)();
+          return (0, _noop["default"])();
         }
       })))));
     };

package/dist/cjs/Dropdown/Link.js

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.LINK_DATA = exports.LINK_DISPLAY_NAME = void 0;
+exports["default"] = exports.LINK_DISPLAY_NAME = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -23,8 +23,6 @@ var _Menu = _interopRequireDefault(require("../Menu"));
 
 var LINK_DISPLAY_NAME = 'Dropdown.Link';
 exports.LINK_DISPLAY_NAME = LINK_DISPLAY_NAME;
-var LINK_DATA = 'link';
-exports.LINK_DATA = LINK_DATA;
 
 var Link = /*#__PURE__*/function (_Component) {
   (0, _inheritsLoose2["default"])(Link, _Component);
@@ -51,7 +49,7 @@ var Link = /*#__PURE__*/function (_Component) {
     }
 
     return /*#__PURE__*/_react["default"].createElement(_ItemList.ItemListItem, {
-      data: LINK_DATA,
+      data: "link",
       text: text,
       disabled: disabled,
       index: index

package/dist/cjs/Input/InputLabel.js

@@ -11,12 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _system = require("../system");
@@ -25,68 +19,51 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _utils = require("./utils");
 
-var InputLabel = /*#__PURE__*/function (_Component) {
-  (0, _inheritsLoose2["default"])(InputLabel, _Component);
+function InputLabel(_ref) {
+  var controls = _ref.controls,
+      state = _ref.state,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["controls", "state"]);
 
-  function InputLabel() {
-    var _this;
+  var _useThemeProps = (0, _system.useThemeProps)('inputLabel', restProps),
+      themeProps = (0, _extends2["default"])({}, _useThemeProps);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var input = (0, _react.useRef)(null);
 
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focusInput", function () {
-      _this.input && _this.input.focus();
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseOver", function () {
-      _this.input && _this.input.setState({
-        isHovered: true
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseOut", function () {
-      _this.input && _this.input.setState({
-        isHovered: false
-      });
-    });
-    return _this;
+  if (controls) {
+    themeProps.id = controls + "-label";
+  }
+
+  if (state) {
+    themeProps.color = (0, _system.getColor)(state);
   }
 
-  var _proto = InputLabel.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    this.input = _utils.inputs[this.props.controls];
-    _utils.inputLabels[this.props.controls] = true;
-  };
-
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    delete _utils.inputLabels[this.props.controls];
-  };
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        controls = _this$props.controls,
-        state = _this$props.state,
-        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["controls", "state"]);
-
-    if (controls) {
-      restProps.id = controls + "-label";
-    }
-
-    if (state) {
-      restProps.color = (0, _system.getColor)(state);
-    }
-
-    return /*#__PURE__*/_react["default"].createElement(_Text["default"], (0, _extends2["default"])({
-      as: "label",
-      onMouseOver: this.handleMouseOver,
-      onMouseOut: this.handleMouseOut,
-      onClick: this.focusInput
-    }, restProps));
-  };
-
-  return InputLabel;
-}(_react.Component);
+  (0, _react.useEffect)(function () {
+    input.current = _utils.inputs[controls];
+    _utils.inputLabels[controls] = true;
+    return function () {
+      delete _utils.inputLabels[controls];
+    };
+  }, []);
+  var focusInput = (0, _react.useCallback)(function () {
+    input.current && input.current.focus();
+  }, [input]);
+  var handleMouseOver = (0, _react.useCallback)(function () {
+    input.current && input.current.setState({
+      isHovered: true
+    });
+  }, [input]);
+  var handleMouseOut = (0, _react.useCallback)(function () {
+    input.current && input.current.setState({
+      isHovered: false
+    });
+  }, [input]);
+  return /*#__PURE__*/_react["default"].createElement(_Text["default"], (0, _extends2["default"])({
+    as: "label",
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    onClick: focusInput
+  }, themeProps));
+}
 
 InputLabel.displayName = 'Input.InputLabel';
 var _default = InputLabel;

package/dist/cjs/Modal/Modal.js

@@ -21,12 +21,20 @@ var _hooks = require("../hooks");
 
 var _utils = require("../utils");
 
+var _system = require("../system");
+
 function Modal(_ref) {
   var children = _ref.children,
       closeOnOutsideClick = _ref.closeOnOutsideClick,
       onRequestClose = _ref.onRequestClose,
       open = _ref.open,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "closeOnOutsideClick", "onRequestClose", "open"]);
+
+  var _useThemeProps = (0, _system.useThemeProps)('modal', restProps),
+      _useThemeProps$scrimP = _useThemeProps.scrimProps,
+      scrimProps = _useThemeProps$scrimP === void 0 ? {} : _useThemeProps$scrimP,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["scrimProps"]);
+
   var modalRef = (0, _react.useRef)(null);
   (0, _react.useLayoutEffect)(function () {
     if (open) {
@@ -43,22 +51,22 @@ function Modal(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/_react["default"].createElement(_Scrim["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_Scrim["default"], (0, _extends2["default"])({
     alignment: "center",
     onMouseDown: function onMouseDown(event) {
       if (closeOnOutsideClick && event.currentTarget === event.target) {
         onRequestClose();
       }
     }
-  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
+  }, scrimProps), /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
+    backgroundColor: "surface",
     innerRef: modalRef,
-    width: "100%",
+    margin: 4,
     maxWidth: 60,
     padding: 2,
-    margin: 4,
-    backgroundColor: "surface",
-    radius: 3
-  }, restProps), children));
+    radius: 3,
+    width: "100%"
+  }, themeProps), children));
 }
 
 var _default = Modal;

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

@@ -18,7 +18,7 @@ var _Select = _interopRequireDefault(require("../Select"));
 
 var _ = require("../");
 
-var _lodash = require("lodash");
+var _noop = _interopRequireDefault(require("lodash/noop"));
 
 describe('Modal', function () {
   var TestModal = function TestModal() {
@@ -45,7 +45,7 @@ describe('Modal', function () {
         key: n
       }, n);
     })), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      onChange: _lodash.noop
+      onChange: _noop["default"]
     }, [1, 2, 3].map(function (n) {
       return /*#__PURE__*/_react["default"].createElement(_Select["default"].Option, {
         "data-testid": "select-option-" + n,

package/dist/cjs/Popover/Popover.js

@@ -25,6 +25,8 @@ var _rewireTabOrder = _interopRequireDefault(require("./rewireTabOrder"));
 
 var _utils2 = require("./utils");
 
+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; }
@@ -50,6 +52,12 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _ref$shouldFlip = _ref.shouldFlip,
       shouldFlip = _ref$shouldFlip === void 0 ? false : _ref$shouldFlip,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["anchorElement", "as", "innerRef", "keepInView", "lockScrollWhileOpen", "matchWidths", "offset", "open", "onKeyDown", "onRequestClose", "placement", "relativeTo", "renderTo", "shouldFlip"]);
+
+  var _useThemeProps = (0, _system.useThemeProps)('popover', restProps),
+      _useThemeProps$zIndex = _useThemeProps.zIndex,
+      zIndex = _useThemeProps$zIndex === void 0 ? 10000 : _useThemeProps$zIndex,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["zIndex"]);
+
   var anchorRef = React.useRef(null);
   var popperRef = React.useRef(null);
   var unlockScroll = React.useRef(null);
@@ -210,9 +218,9 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }),
     // ideally this should be pulled out to something like ThemeProvider for predictable z indices
     style: {
-      zIndex: 10000
+      zIndex: zIndex
     }
-  }, restProps)) : null);
+  }, themeProps)) : null);
 });
 exports.Popover = Popover;
 Popover.displayName = 'Popover';

package/dist/cjs/Scrim/Scrim.js

@@ -9,28 +9,40 @@ exports.Scrim = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _StackView = _interopRequireDefault(require("../StackView"));
 
-var Scrim = /*#__PURE__*/React.forwardRef(function (props, _ref) {
+var _system = require("../system");
+
+var Scrim = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
+  var ref = _ref2.ref,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["ref"]);
   React.useLayoutEffect(function () {
     document.body.style.overflow = 'hidden';
     return function () {
       document.body.style.overflow = '';
     };
   }, []);
+
+  var _useThemeProps = (0, _system.useThemeProps)('scrim', restProps),
+      _useThemeProps$zIndex = _useThemeProps.zIndex,
+      zIndex = _useThemeProps$zIndex === void 0 ? 10000 : _useThemeProps$zIndex,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["zIndex"]);
+
   return /*#__PURE__*/React.createElement(_StackView["default"], (0, _extends2["default"])({
-    innerRef: props.ref,
+    innerRef: ref,
     position: "fixed",
     top: 0,
     right: 0,
     bottom: 0,
     left: 0,
-    zIndex: 10000,
+    zIndex: zIndex,
     overflow: "auto" // @ts-ignore
     ,
     backgroundColor: "hsla(0,0%,0%,0.4)"
-  }, props));
+  }, themeProps));
 });
 exports.Scrim = Scrim;

package/dist/cjs/Table/Table.js

@@ -21,7 +21,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@emotion/react");
 
-var _lodash = require("lodash");
+var _camelCase = _interopRequireDefault(require("lodash/camelCase"));
+
+var _snakeCase = _interopRequireDefault(require("lodash/snakeCase"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
@@ -309,13 +311,13 @@ var Table = /*#__PURE__*/function (_PureComponent) {
   _proto.getSortOrder = function getSortOrder(_ref3) {
     var columnId = _ref3.columnId,
         direction = _ref3.direction;
-    return "" + (direction === Table.ASC ? '' : '-') + (0, _lodash.snakeCase)(columnId);
+    return "" + (direction === Table.ASC ? '' : '-') + (0, _snakeCase["default"])(columnId);
   };
 
   _proto.parseSortOrder = function parseSortOrder(query) {
     var isDescending = query[0] === '-';
     return {
-      columnId: (0, _lodash.camelCase)(isDescending ? query.substring(1) : query),
+      columnId: (0, _camelCase["default"])(isDescending ? query.substring(1) : query),
       direction: isDescending ? Table.DESC : Table.ASC
     };
   };