@planningcenter/tapestry-react 2.6.0-rc.9 → 2.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/dist/cjs/Button/Button.js +8 -1
  2. package/dist/cjs/Button/Button.test.js +51 -8
  3. package/dist/cjs/Collapse/Collapse.js +3 -1
  4. package/dist/cjs/DataTable/components/BodyRow.js +2 -2
  5. package/dist/cjs/DataTable/hooks/useCollapsibleRows.js +2 -2
  6. package/dist/cjs/Dropdown/Dropdown.js +23 -4
  7. package/dist/cjs/Dropdown/Dropdown.test.js +3 -3
  8. package/dist/cjs/Dropdown/Link.js +2 -4
  9. package/dist/cjs/Input/InputLabel.js +40 -63
  10. package/dist/cjs/Modal/Modal.js +18 -8
  11. package/dist/cjs/Modal/Modal.test.js +2 -2
  12. package/dist/cjs/Popover/Popover.js +10 -2
  13. package/dist/cjs/Scrim/Scrim.js +16 -4
  14. package/dist/cjs/Table/Table.js +5 -3
  15. package/dist/cjs/ThemeProvider/ThemeProvider.js +2 -2
  16. package/dist/cjs/TimeField/TimeField.js +38 -3
  17. package/dist/cjs/TimeField/TimeField.test.js +179 -10
  18. package/dist/cjs/Tooltip/Tooltip.js +27 -23
  19. package/dist/cjs/Tooltip/Tooltip.test.js +178 -0
  20. package/dist/cjs/system/utils.js +2 -2
  21. package/dist/cjs/utils.js +3 -3
  22. package/dist/esm/Button/Button.js +8 -1
  23. package/dist/esm/Button/Button.test.js +67 -9
  24. package/dist/esm/Collapse/Collapse.js +3 -1
  25. package/dist/esm/DataTable/components/BodyRow.js +2 -2
  26. package/dist/esm/DataTable/hooks/useCollapsibleRows.js +1 -1
  27. package/dist/esm/Dropdown/Dropdown.js +24 -5
  28. package/dist/esm/Dropdown/Dropdown.test.js +1 -1
  29. package/dist/esm/Dropdown/Link.js +1 -2
  30. package/dist/esm/Input/InputLabel.js +40 -63
  31. package/dist/esm/Modal/Modal.js +16 -8
  32. package/dist/esm/Modal/Modal.test.js +1 -1
  33. package/dist/esm/Popover/Popover.js +8 -2
  34. package/dist/esm/Scrim/Scrim.js +15 -4
  35. package/dist/esm/Table/Table.js +2 -1
  36. package/dist/esm/ThemeProvider/ThemeProvider.js +1 -1
  37. package/dist/esm/TimeField/TimeField.js +37 -3
  38. package/dist/esm/TimeField/TimeField.test.js +153 -10
  39. package/dist/esm/Tooltip/Tooltip.js +29 -24
  40. package/dist/esm/Tooltip/Tooltip.test.js +160 -0
  41. package/dist/esm/system/utils.js +1 -1
  42. package/dist/esm/utils.js +1 -1
  43. package/dist/types/Button/Button.d.ts +4 -0
  44. package/dist/types/ThemeProvider/ThemeProvider.d.ts +3 -3
  45. package/dist/types/Tooltip/Tooltip.test.d.ts +1 -0
  46. package/dist/types/index.d.ts +1 -1
  47. package/package.json +4 -4
  48. package/src/Button/Button.test.tsx +30 -0
  49. package/src/Button/Button.tsx +14 -1
  50. package/src/Collapse/Collapse.js +1 -1
  51. package/src/DataTable/DataTable.js +1 -1
  52. package/src/DataTable/components/BodyRow.js +1 -1
  53. package/src/DataTable/hooks/useCollapsibleRows.js +1 -1
  54. package/src/Dropdown/Dropdown.js +19 -5
  55. package/src/Dropdown/Dropdown.mdx +3 -3
  56. package/src/Dropdown/Dropdown.test.tsx +1 -1
  57. package/src/Dropdown/Link.js +1 -7
  58. package/src/Input/InputLabel.js +39 -36
  59. package/src/Input/InputLabel.mdx +1 -0
  60. package/src/Modal/Modal.js +16 -6
  61. package/src/Modal/Modal.mdx +2 -1
  62. package/src/Modal/Modal.test.tsx +1 -1
  63. package/src/Popover/Popover.mdx +1 -0
  64. package/src/Popover/Popover.tsx +8 -2
  65. package/src/Scrim/Scrim.mdx +1 -0
  66. package/src/Scrim/Scrim.tsx +11 -6
  67. package/src/Sidebar/Sidebar.mdx +0 -1
  68. package/src/Table/Table.js +2 -1
  69. package/src/ThemeProvider/ThemeProvider.tsx +7 -6
  70. package/src/TimeField/TimeField.js +36 -3
  71. package/src/TimeField/TimeField.test.tsx +105 -1
  72. package/src/Tooltip/Tooltip.js +19 -21
  73. package/src/Tooltip/Tooltip.test.tsx +136 -0
  74. package/src/index.d.ts +1 -1
  75. package/src/system/utils.js +1 -1
  76. package/src/utils.js +1 -1
@@ -217,6 +217,13 @@ function Button(_ref) {
217
217
 
218
218
  if (to) {
219
219
  restProps['href'] = to;
220
+ } // remove `type` if either `to` or `href` is specified
221
+
222
+
223
+ if (to || restProps.href) {
224
+ buttonProps = _objectSpread(_objectSpread({}, buttonProps), {}, {
225
+ type: null
226
+ });
220
227
  } // apply stroke defaults and higher z-index when hovering to show outline in group properly
221
228
 
222
229
 
@@ -259,7 +266,7 @@ function Button(_ref) {
259
266
  restProps = (0, _utils.mergeProps)(restProps, wrapperProps);
260
267
  }
261
268
 
262
- if (type && restProps.as && restProps.as !== "button") {
269
+ if (buttonProps.type && restProps.as && restProps.as !== "button") {
263
270
  console.log("Tapestry-React: <Button/> type prop is only supported by <button> and not <" + restProps.as + ">.");
264
271
  }
265
272
  }
@@ -8,25 +8,68 @@ var _react2 = require("@testing-library/react");
8
8
 
9
9
  var _Button = require("./Button");
10
10
 
11
+ it("should render as <button> with type=\"button\" by default", function () {
12
+ var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, null)),
13
+ container = _render.container;
14
+
15
+ var button = container.querySelector('button');
16
+ expect(button.getAttribute('type')).toEqual('button');
17
+ });
18
+ it("should render as <button> with type=\"submit\"", function () {
19
+ var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
20
+ type: "submit"
21
+ })),
22
+ container = _render2.container;
23
+
24
+ var button = container.querySelector('button');
25
+ expect(button.getAttribute('type')).toEqual('submit');
26
+ });
11
27
  it("should render title", function () {
12
28
  var title = 'Hello';
13
29
 
14
- var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
30
+ var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
15
31
  title: title
16
32
  })),
17
- getByText = _render.getByText;
33
+ getByText = _render3.getByText;
18
34
 
19
35
  getByText(title);
20
36
  });
37
+ it("should render <a> without a type if \"to\" is provided", function () {
38
+ var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
39
+ to: "#"
40
+ })),
41
+ container = _render4.container;
42
+
43
+ var button = container.querySelector('a');
44
+ expect(button.getAttribute('type')).toBeNull();
45
+ });
46
+ it("should render <a> without a type if \"href\" is provided", function () {
47
+ var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
48
+ href: "#"
49
+ })),
50
+ container = _render5.container;
51
+
52
+ var button = container.querySelector('a');
53
+ expect(button.getAttribute('type')).toBeNull();
54
+ });
55
+ it("should render <a> with \"href\" if \"to\" is specifed", function () {
56
+ var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
57
+ to: "#"
58
+ })),
59
+ container = _render6.container;
60
+
61
+ var button = container.querySelector('a');
62
+ expect(button.getAttribute('href')).toEqual('#');
63
+ });
21
64
  it("should render href and external link values", function () {
22
65
  var title = 'Hello';
23
66
 
24
- var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
67
+ var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
25
68
  external: true,
26
69
  title: title,
27
70
  to: "https://www.planningcenter.com"
28
71
  })),
29
- getByText = _render2.getByText;
72
+ getByText = _render7.getByText;
30
73
 
31
74
  var button = getByText(title);
32
75
  expect(button.getAttribute('href')).toEqual('https://www.planningcenter.com');
@@ -36,18 +79,18 @@ it("should render href and external link values", function () {
36
79
  it("should call onClick when clicked or Enter or Space key is pressed", function () {
37
80
  var onClick = jest.fn();
38
81
 
39
- var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
82
+ var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
40
83
  onClick: onClick
41
84
  })),
42
- container = _render3.container;
85
+ container = _render8.container;
43
86
 
44
87
  _react2.fireEvent.click(container.firstChild);
45
88
 
46
89
  expect(onClick).toHaveBeenCalledTimes(1);
47
90
  });
48
91
  it("should not call onClick when Enter or Space key is pressed and onClick isn't present", function () {
49
- var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, null)),
50
- container = _render4.container;
92
+ var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, null)),
93
+ container = _render9.container;
51
94
 
52
95
  _react2.fireEvent.keyDown(container.firstChild, {
53
96
  key: 'Enter'
@@ -103,7 +103,9 @@ function Collapse(props) {
103
103
  }
104
104
 
105
105
  if (instantRender) {
106
- handleComplete();
106
+ requestAnimationFrame(function () {
107
+ return handleComplete();
108
+ });
107
109
  }
108
110
 
109
111
  node.addEventListener('transitionend', handleTransitionEnd);
@@ -37,8 +37,8 @@ function BodyRow(_ref) {
37
37
 
38
38
  var props = _objectSpread({
39
39
  ref: innerRef,
40
- onClick: onRowClick && function () {
41
- return onRowClick(rowData, rowIndex);
40
+ onClick: function onClick(event) {
41
+ return onRowClick && onRowClick(rowData, rowIndex, event);
42
42
  },
43
43
  onMouseEnter: bindKeyboardShortcuts,
44
44
  onMouseLeave: unbindKeyboardShortcuts,
@@ -15,7 +15,7 @@ var _react = require("react");
15
15
 
16
16
  var _useConstant = _interopRequireDefault(require("../../hooks/useConstant"));
17
17
 
18
- var _zustand = _interopRequireDefault(require("zustand"));
18
+ var _zustand = require("zustand");
19
19
 
20
20
  var _utils = require("../../utils");
21
21
 
@@ -51,7 +51,7 @@ function useCollapsibleRows(data, defaultAllSubRowsOpen) {
51
51
  }
52
52
 
53
53
  var useStore = (0, _useConstant["default"])(function () {
54
- return (0, _zustand["default"])(function (set) {
54
+ return (0, _zustand.create)(function (set) {
55
55
  return {
56
56
  instant: false,
57
57
  allSubRowsOpen: defaultAllSubRowsOpen,
@@ -67,6 +67,10 @@ var Dropdown = /*#__PURE__*/function (_Component) {
67
67
  }
68
68
  });
69
69
  (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "togglePopover", function (event) {
70
+ _this.setState({
71
+ preventBlur: false
72
+ });
73
+
70
74
  if (_this.state.isPopoverOpen) {
71
75
  _this.closePopover(event);
72
76
  } else {
@@ -84,14 +88,15 @@ var Dropdown = /*#__PURE__*/function (_Component) {
84
88
  _this.popover.focusAnchor();
85
89
  }
86
90
 
87
- if (data === _Link.LINK_DATA) {
91
+ if (node.tagName === 'A' && event.type !== 'click') {
88
92
  node.click();
89
93
  } else if (_this.props.onSelect) {
90
94
  _this.props.onSelect(data);
91
95
  }
92
96
  });
93
97
  _this.state = {
94
- isPopoverOpen: props.defaultOpen || props.forceOpen
98
+ isPopoverOpen: props.defaultOpen || props.forceOpen,
99
+ preventBlur: false
95
100
  };
96
101
  _this.id = (0, _utils.generateId)('dropdown');
97
102
  return _this;
@@ -112,7 +117,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
112
117
  keepInView = _this$props.keepInView,
113
118
  lockScrollWhileOpen = _this$props.lockScrollWhileOpen,
114
119
  matchWidths = _this$props.matchWidths,
115
- onClick = _this$props.onClick,
120
+ _onClick = _this$props.onClick,
116
121
  onClose = _this$props.onClose,
117
122
  onKeyDown = _this$props.onKeyDown,
118
123
  onOpen = _this$props.onOpen,
@@ -194,12 +199,22 @@ var Dropdown = /*#__PURE__*/function (_Component) {
194
199
  }, _objectSpread2[arrowIconOnly ? 'icon' : 'iconRight'] = {
195
200
  name: isPopoverOpen ? 'general.upCaret' : 'general.downCaret',
196
201
  size: 'sm'
197
- }, _objectSpread2.title = arrowIconOnly ? 'arrow down' : restProps.title, _objectSpread2.tabIndex = 0, _objectSpread2.cursor = 'pointer', _objectSpread2.onBlur = requestBlur, _objectSpread2.onClick = function onClick() {
202
+ }, _objectSpread2.title = arrowIconOnly ? 'arrow down' : restProps.title, _objectSpread2.tabIndex = 0, _objectSpread2.cursor = 'pointer', _objectSpread2.onBlur = function onBlur(event) {
203
+ if (_this2.state.preventBlur) {
204
+ _this2.setState({
205
+ preventBlur: false
206
+ });
207
+ } else {
208
+ requestBlur(event);
209
+ }
210
+ }, _objectSpread2.onClick = function onClick(event) {
198
211
  _this2.togglePopover();
199
212
 
200
213
  if (!isPopoverOpen) {
201
214
  _this2.popover.focusAnchor();
202
215
  }
216
+
217
+ _onClick && _onClick(event);
203
218
  }, _objectSpread2.onKeyDown = function onKeyDown(event) {
204
219
  anchorProps.onKeyDown(event);
205
220
 
@@ -258,6 +273,10 @@ var Dropdown = /*#__PURE__*/function (_Component) {
258
273
  }
259
274
  });
260
275
  }
276
+ }, _objectSpread2.onMouseDown = function onMouseDown() {
277
+ _this2.setState({
278
+ preventBlur: true
279
+ });
261
280
  }, _objectSpread2), restProps);
262
281
 
263
282
  if ( /*#__PURE__*/_react["default"].isValidElement(triggerElement)) {
@@ -12,7 +12,7 @@ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
12
12
 
13
13
  require("@testing-library/jest-dom/extend-expect");
14
14
 
15
- var _lodash = require("lodash");
15
+ var _noop = _interopRequireDefault(require("lodash/noop"));
16
16
 
17
17
  var _ = require("..");
18
18
 
@@ -53,7 +53,7 @@ describe('Dropdown', function () {
53
53
  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, {
54
54
  title: "One",
55
55
  onClick: function onClick() {
56
- return (0, _lodash.noop)();
56
+ return (0, _noop["default"])();
57
57
  }
58
58
  })), /*#__PURE__*/_react["default"].createElement(_Dropdown["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_.Button, {
59
59
  title: "Two",
@@ -67,7 +67,7 @@ describe('Dropdown', function () {
67
67
  }, count)), /*#__PURE__*/_react["default"].createElement(_Dropdown["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_.Button, {
68
68
  title: "Three",
69
69
  onClick: function onClick() {
70
- return (0, _lodash.noop)();
70
+ return (0, _noop["default"])();
71
71
  }
72
72
  })))));
73
73
  };
@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
5
5
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
6
 
7
7
  exports.__esModule = true;
8
- exports["default"] = exports.LINK_DATA = exports.LINK_DISPLAY_NAME = void 0;
8
+ exports["default"] = exports.LINK_DISPLAY_NAME = void 0;
9
9
 
10
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
11
 
@@ -23,8 +23,6 @@ var _Menu = _interopRequireDefault(require("../Menu"));
23
23
 
24
24
  var LINK_DISPLAY_NAME = 'Dropdown.Link';
25
25
  exports.LINK_DISPLAY_NAME = LINK_DISPLAY_NAME;
26
- var LINK_DATA = 'link';
27
- exports.LINK_DATA = LINK_DATA;
28
26
 
29
27
  var Link = /*#__PURE__*/function (_Component) {
30
28
  (0, _inheritsLoose2["default"])(Link, _Component);
@@ -51,7 +49,7 @@ var Link = /*#__PURE__*/function (_Component) {
51
49
  }
52
50
 
53
51
  return /*#__PURE__*/_react["default"].createElement(_ItemList.ItemListItem, {
54
- data: LINK_DATA,
52
+ data: "link",
55
53
  text: text,
56
54
  disabled: disabled,
57
55
  index: index
@@ -11,12 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
11
11
 
12
12
  var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
13
13
 
14
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
15
-
16
- var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
17
-
18
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
19
-
20
14
  var _react = _interopRequireWildcard(require("react"));
21
15
 
22
16
  var _system = require("../system");
@@ -25,68 +19,51 @@ var _Text = _interopRequireDefault(require("../Text"));
25
19
 
26
20
  var _utils = require("./utils");
27
21
 
28
- var InputLabel = /*#__PURE__*/function (_Component) {
29
- (0, _inheritsLoose2["default"])(InputLabel, _Component);
22
+ function InputLabel(_ref) {
23
+ var controls = _ref.controls,
24
+ state = _ref.state,
25
+ restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["controls", "state"]);
30
26
 
31
- function InputLabel() {
32
- var _this;
27
+ var _useThemeProps = (0, _system.useThemeProps)('inputLabel', restProps),
28
+ themeProps = (0, _extends2["default"])({}, _useThemeProps);
33
29
 
34
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
35
- args[_key] = arguments[_key];
36
- }
30
+ var input = (0, _react.useRef)(null);
37
31
 
38
- _this = _Component.call.apply(_Component, [this].concat(args)) || this;
39
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focusInput", function () {
40
- _this.input && _this.input.focus();
41
- });
42
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseOver", function () {
43
- _this.input && _this.input.setState({
44
- isHovered: true
45
- });
46
- });
47
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseOut", function () {
48
- _this.input && _this.input.setState({
49
- isHovered: false
50
- });
51
- });
52
- return _this;
32
+ if (controls) {
33
+ themeProps.id = controls + "-label";
34
+ }
35
+
36
+ if (state) {
37
+ themeProps.color = (0, _system.getColor)(state);
53
38
  }
54
39
 
55
- var _proto = InputLabel.prototype;
56
-
57
- _proto.componentDidMount = function componentDidMount() {
58
- this.input = _utils.inputs[this.props.controls];
59
- _utils.inputLabels[this.props.controls] = true;
60
- };
61
-
62
- _proto.componentWillUnmount = function componentWillUnmount() {
63
- delete _utils.inputLabels[this.props.controls];
64
- };
65
-
66
- _proto.render = function render() {
67
- var _this$props = this.props,
68
- controls = _this$props.controls,
69
- state = _this$props.state,
70
- restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["controls", "state"]);
71
-
72
- if (controls) {
73
- restProps.id = controls + "-label";
74
- }
75
-
76
- if (state) {
77
- restProps.color = (0, _system.getColor)(state);
78
- }
79
-
80
- return /*#__PURE__*/_react["default"].createElement(_Text["default"], (0, _extends2["default"])({
81
- as: "label",
82
- onMouseOver: this.handleMouseOver,
83
- onMouseOut: this.handleMouseOut,
84
- onClick: this.focusInput
85
- }, restProps));
86
- };
87
-
88
- return InputLabel;
89
- }(_react.Component);
40
+ (0, _react.useEffect)(function () {
41
+ input.current = _utils.inputs[controls];
42
+ _utils.inputLabels[controls] = true;
43
+ return function () {
44
+ delete _utils.inputLabels[controls];
45
+ };
46
+ }, []);
47
+ var focusInput = (0, _react.useCallback)(function () {
48
+ input.current && input.current.focus();
49
+ }, [input]);
50
+ var handleMouseOver = (0, _react.useCallback)(function () {
51
+ input.current && input.current.setState({
52
+ isHovered: true
53
+ });
54
+ }, [input]);
55
+ var handleMouseOut = (0, _react.useCallback)(function () {
56
+ input.current && input.current.setState({
57
+ isHovered: false
58
+ });
59
+ }, [input]);
60
+ return /*#__PURE__*/_react["default"].createElement(_Text["default"], (0, _extends2["default"])({
61
+ as: "label",
62
+ onMouseOver: handleMouseOver,
63
+ onMouseOut: handleMouseOut,
64
+ onClick: focusInput
65
+ }, themeProps));
66
+ }
90
67
 
91
68
  InputLabel.displayName = 'Input.InputLabel';
92
69
  var _default = InputLabel;
@@ -21,12 +21,20 @@ var _hooks = require("../hooks");
21
21
 
22
22
  var _utils = require("../utils");
23
23
 
24
+ var _system = require("../system");
25
+
24
26
  function Modal(_ref) {
25
27
  var children = _ref.children,
26
28
  closeOnOutsideClick = _ref.closeOnOutsideClick,
27
29
  onRequestClose = _ref.onRequestClose,
28
30
  open = _ref.open,
29
31
  restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "closeOnOutsideClick", "onRequestClose", "open"]);
32
+
33
+ var _useThemeProps = (0, _system.useThemeProps)('modal', restProps),
34
+ _useThemeProps$scrimP = _useThemeProps.scrimProps,
35
+ scrimProps = _useThemeProps$scrimP === void 0 ? {} : _useThemeProps$scrimP,
36
+ themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["scrimProps"]);
37
+
30
38
  var modalRef = (0, _react.useRef)(null);
31
39
  (0, _react.useLayoutEffect)(function () {
32
40
  if (open) {
@@ -43,22 +51,24 @@ function Modal(_ref) {
43
51
  return null;
44
52
  }
45
53
 
46
- return /*#__PURE__*/_react["default"].createElement(_Scrim["default"], {
54
+ return /*#__PURE__*/_react["default"].createElement(_Scrim["default"], (0, _extends2["default"])({
47
55
  alignment: "center",
48
56
  onMouseDown: function onMouseDown(event) {
49
57
  if (closeOnOutsideClick && event.currentTarget === event.target) {
50
58
  onRequestClose();
51
59
  }
52
60
  }
53
- }, /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
61
+ }, scrimProps), /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
62
+ backgroundColor: "surface",
63
+ boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
54
64
  innerRef: modalRef,
55
- width: "100%",
56
- maxWidth: 60,
57
- padding: 2,
58
65
  margin: 4,
59
- backgroundColor: "surface",
60
- radius: 3
61
- }, restProps), children));
66
+ maxWidth: 60,
67
+ padding: 4,
68
+ paddingBottom: 3,
69
+ radius: 8,
70
+ width: "100%"
71
+ }, themeProps), children));
62
72
  }
63
73
 
64
74
  var _default = Modal;
@@ -18,7 +18,7 @@ var _Select = _interopRequireDefault(require("../Select"));
18
18
 
19
19
  var _ = require("../");
20
20
 
21
- var _lodash = require("lodash");
21
+ var _noop = _interopRequireDefault(require("lodash/noop"));
22
22
 
23
23
  describe('Modal', function () {
24
24
  var TestModal = function TestModal() {
@@ -45,7 +45,7 @@ describe('Modal', function () {
45
45
  key: n
46
46
  }, n);
47
47
  })), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
48
- onChange: _lodash.noop
48
+ onChange: _noop["default"]
49
49
  }, [1, 2, 3].map(function (n) {
50
50
  return /*#__PURE__*/_react["default"].createElement(_Select["default"].Option, {
51
51
  "data-testid": "select-option-" + n,
@@ -25,6 +25,8 @@ var _rewireTabOrder = _interopRequireDefault(require("./rewireTabOrder"));
25
25
 
26
26
  var _utils2 = require("./utils");
27
27
 
28
+ var _system = require("../system");
29
+
28
30
  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; }
29
31
 
30
32
  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) {
50
52
  _ref$shouldFlip = _ref.shouldFlip,
51
53
  shouldFlip = _ref$shouldFlip === void 0 ? false : _ref$shouldFlip,
52
54
  restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["anchorElement", "as", "innerRef", "keepInView", "lockScrollWhileOpen", "matchWidths", "offset", "open", "onKeyDown", "onRequestClose", "placement", "relativeTo", "renderTo", "shouldFlip"]);
55
+
56
+ var _useThemeProps = (0, _system.useThemeProps)('popover', restProps),
57
+ _useThemeProps$zIndex = _useThemeProps.zIndex,
58
+ zIndex = _useThemeProps$zIndex === void 0 ? 10000 : _useThemeProps$zIndex,
59
+ themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["zIndex"]);
60
+
53
61
  var anchorRef = React.useRef(null);
54
62
  var popperRef = React.useRef(null);
55
63
  var unlockScroll = React.useRef(null);
@@ -210,9 +218,9 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
210
218
  }),
211
219
  // ideally this should be pulled out to something like ThemeProvider for predictable z indices
212
220
  style: {
213
- zIndex: 10000
221
+ zIndex: zIndex
214
222
  }
215
- }, restProps)) : null);
223
+ }, themeProps)) : null);
216
224
  });
217
225
  exports.Popover = Popover;
218
226
  Popover.displayName = 'Popover';
@@ -9,28 +9,40 @@ exports.Scrim = void 0;
9
9
 
10
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
11
 
12
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
13
+
12
14
  var React = _interopRequireWildcard(require("react"));
13
15
 
14
16
  var _StackView = _interopRequireDefault(require("../StackView"));
15
17
 
16
- var Scrim = /*#__PURE__*/React.forwardRef(function (props, _ref) {
18
+ var _system = require("../system");
19
+
20
+ var Scrim = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
21
+ var ref = _ref2.ref,
22
+ restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["ref"]);
17
23
  React.useLayoutEffect(function () {
18
24
  document.body.style.overflow = 'hidden';
19
25
  return function () {
20
26
  document.body.style.overflow = '';
21
27
  };
22
28
  }, []);
29
+
30
+ var _useThemeProps = (0, _system.useThemeProps)('scrim', restProps),
31
+ _useThemeProps$zIndex = _useThemeProps.zIndex,
32
+ zIndex = _useThemeProps$zIndex === void 0 ? 10000 : _useThemeProps$zIndex,
33
+ themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["zIndex"]);
34
+
23
35
  return /*#__PURE__*/React.createElement(_StackView["default"], (0, _extends2["default"])({
24
- innerRef: props.ref,
36
+ innerRef: ref,
25
37
  position: "fixed",
26
38
  top: 0,
27
39
  right: 0,
28
40
  bottom: 0,
29
41
  left: 0,
30
- zIndex: 10000,
42
+ zIndex: zIndex,
31
43
  overflow: "auto" // @ts-ignore
32
44
  ,
33
45
  backgroundColor: "hsla(0,0%,0%,0.4)"
34
- }, props));
46
+ }, themeProps));
35
47
  });
36
48
  exports.Scrim = Scrim;
@@ -21,7 +21,9 @@ var _react = _interopRequireWildcard(require("react"));
21
21
 
22
22
  var _react2 = require("@emotion/react");
23
23
 
24
- var _lodash = require("lodash");
24
+ var _camelCase = _interopRequireDefault(require("lodash/camelCase"));
25
+
26
+ var _snakeCase = _interopRequireDefault(require("lodash/snakeCase"));
25
27
 
26
28
  var _Button = _interopRequireDefault(require("../Button"));
27
29
 
@@ -309,13 +311,13 @@ var Table = /*#__PURE__*/function (_PureComponent) {
309
311
  _proto.getSortOrder = function getSortOrder(_ref3) {
310
312
  var columnId = _ref3.columnId,
311
313
  direction = _ref3.direction;
312
- return "" + (direction === Table.ASC ? '' : '-') + (0, _lodash.snakeCase)(columnId);
314
+ return "" + (direction === Table.ASC ? '' : '-') + (0, _snakeCase["default"])(columnId);
313
315
  };
314
316
 
315
317
  _proto.parseSortOrder = function parseSortOrder(query) {
316
318
  var isDescending = query[0] === '-';
317
319
  return {
318
- columnId: (0, _lodash.camelCase)(isDescending ? query.substring(1) : query),
320
+ columnId: (0, _camelCase["default"])(isDescending ? query.substring(1) : query),
319
321
  direction: isDescending ? Table.DESC : Table.ASC
320
322
  };
321
323
  };
@@ -20,7 +20,7 @@ var _react2 = require("@emotion/react");
20
20
 
21
21
  var _cache = _interopRequireDefault(require("@emotion/cache"));
22
22
 
23
- var _lodash = require("lodash");
23
+ var _merge = _interopRequireDefault(require("lodash/merge"));
24
24
 
25
25
  var _Box = require("../Box");
26
26
 
@@ -50,7 +50,7 @@ function mergeIntoNewObject() {
50
50
  merges[_key] = arguments[_key];
51
51
  }
52
52
 
53
- return _lodash.merge.apply(void 0, [{}].concat(merges));
53
+ return _merge["default"].apply(void 0, [{}].concat(merges));
54
54
  }
55
55
 
56
56
  var themeStorage = {