@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.
- package/dist/cjs/Button/Button.js +8 -1
- package/dist/cjs/Button/Button.test.js +51 -8
- package/dist/cjs/Collapse/Collapse.js +3 -1
- package/dist/cjs/DataTable/components/BodyRow.js +2 -2
- package/dist/cjs/DataTable/hooks/useCollapsibleRows.js +2 -2
- package/dist/cjs/Dropdown/Dropdown.js +23 -4
- package/dist/cjs/Dropdown/Dropdown.test.js +3 -3
- package/dist/cjs/Dropdown/Link.js +2 -4
- package/dist/cjs/Input/InputLabel.js +40 -63
- package/dist/cjs/Modal/Modal.js +18 -8
- package/dist/cjs/Modal/Modal.test.js +2 -2
- package/dist/cjs/Popover/Popover.js +10 -2
- package/dist/cjs/Scrim/Scrim.js +16 -4
- package/dist/cjs/Table/Table.js +5 -3
- package/dist/cjs/ThemeProvider/ThemeProvider.js +2 -2
- package/dist/cjs/TimeField/TimeField.js +38 -3
- package/dist/cjs/TimeField/TimeField.test.js +179 -10
- package/dist/cjs/Tooltip/Tooltip.js +27 -23
- package/dist/cjs/Tooltip/Tooltip.test.js +178 -0
- package/dist/cjs/system/utils.js +2 -2
- package/dist/cjs/utils.js +3 -3
- package/dist/esm/Button/Button.js +8 -1
- package/dist/esm/Button/Button.test.js +67 -9
- package/dist/esm/Collapse/Collapse.js +3 -1
- package/dist/esm/DataTable/components/BodyRow.js +2 -2
- package/dist/esm/DataTable/hooks/useCollapsibleRows.js +1 -1
- package/dist/esm/Dropdown/Dropdown.js +24 -5
- package/dist/esm/Dropdown/Dropdown.test.js +1 -1
- package/dist/esm/Dropdown/Link.js +1 -2
- package/dist/esm/Input/InputLabel.js +40 -63
- package/dist/esm/Modal/Modal.js +16 -8
- package/dist/esm/Modal/Modal.test.js +1 -1
- package/dist/esm/Popover/Popover.js +8 -2
- package/dist/esm/Scrim/Scrim.js +15 -4
- package/dist/esm/Table/Table.js +2 -1
- package/dist/esm/ThemeProvider/ThemeProvider.js +1 -1
- package/dist/esm/TimeField/TimeField.js +37 -3
- package/dist/esm/TimeField/TimeField.test.js +153 -10
- package/dist/esm/Tooltip/Tooltip.js +29 -24
- package/dist/esm/Tooltip/Tooltip.test.js +160 -0
- package/dist/esm/system/utils.js +1 -1
- package/dist/esm/utils.js +1 -1
- package/dist/types/Button/Button.d.ts +4 -0
- package/dist/types/ThemeProvider/ThemeProvider.d.ts +3 -3
- package/dist/types/Tooltip/Tooltip.test.d.ts +1 -0
- package/dist/types/index.d.ts +1 -1
- package/package.json +4 -4
- package/src/Button/Button.test.tsx +30 -0
- package/src/Button/Button.tsx +14 -1
- package/src/Collapse/Collapse.js +1 -1
- package/src/DataTable/DataTable.js +1 -1
- package/src/DataTable/components/BodyRow.js +1 -1
- package/src/DataTable/hooks/useCollapsibleRows.js +1 -1
- package/src/Dropdown/Dropdown.js +19 -5
- package/src/Dropdown/Dropdown.mdx +3 -3
- package/src/Dropdown/Dropdown.test.tsx +1 -1
- package/src/Dropdown/Link.js +1 -7
- package/src/Input/InputLabel.js +39 -36
- package/src/Input/InputLabel.mdx +1 -0
- package/src/Modal/Modal.js +16 -6
- package/src/Modal/Modal.mdx +2 -1
- package/src/Modal/Modal.test.tsx +1 -1
- package/src/Popover/Popover.mdx +1 -0
- package/src/Popover/Popover.tsx +8 -2
- package/src/Scrim/Scrim.mdx +1 -0
- package/src/Scrim/Scrim.tsx +11 -6
- package/src/Sidebar/Sidebar.mdx +0 -1
- package/src/Table/Table.js +2 -1
- package/src/ThemeProvider/ThemeProvider.tsx +7 -6
- package/src/TimeField/TimeField.js +36 -3
- package/src/TimeField/TimeField.test.tsx +105 -1
- package/src/Tooltip/Tooltip.js +19 -21
- package/src/Tooltip/Tooltip.test.tsx +136 -0
- package/src/index.d.ts +1 -1
- package/src/system/utils.js +1 -1
- 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
|
|
30
|
+
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
15
31
|
title: title
|
|
16
32
|
})),
|
|
17
|
-
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
|
|
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 =
|
|
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
|
|
82
|
+
var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
40
83
|
onClick: onClick
|
|
41
84
|
})),
|
|
42
|
-
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
|
|
50
|
-
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'
|
|
@@ -37,8 +37,8 @@ function BodyRow(_ref) {
|
|
|
37
37
|
|
|
38
38
|
var props = _objectSpread({
|
|
39
39
|
ref: innerRef,
|
|
40
|
-
onClick:
|
|
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 =
|
|
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
|
|
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 (
|
|
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
|
-
|
|
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 =
|
|
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
|
|
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,
|
|
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,
|
|
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.
|
|
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:
|
|
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
|
-
|
|
29
|
-
|
|
22
|
+
function InputLabel(_ref) {
|
|
23
|
+
var controls = _ref.controls,
|
|
24
|
+
state = _ref.state,
|
|
25
|
+
restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["controls", "state"]);
|
|
30
26
|
|
|
31
|
-
|
|
32
|
-
|
|
27
|
+
var _useThemeProps = (0, _system.useThemeProps)('inputLabel', restProps),
|
|
28
|
+
themeProps = (0, _extends2["default"])({}, _useThemeProps);
|
|
33
29
|
|
|
34
|
-
|
|
35
|
-
args[_key] = arguments[_key];
|
|
36
|
-
}
|
|
30
|
+
var input = (0, _react.useRef)(null);
|
|
37
31
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
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
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
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;
|
package/dist/cjs/Modal/Modal.js
CHANGED
|
@@ -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
|
-
|
|
60
|
-
|
|
61
|
-
|
|
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
|
|
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:
|
|
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:
|
|
221
|
+
zIndex: zIndex
|
|
214
222
|
}
|
|
215
|
-
},
|
|
223
|
+
}, themeProps)) : null);
|
|
216
224
|
});
|
|
217
225
|
exports.Popover = Popover;
|
|
218
226
|
Popover.displayName = 'Popover';
|
package/dist/cjs/Scrim/Scrim.js
CHANGED
|
@@ -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
|
|
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:
|
|
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:
|
|
42
|
+
zIndex: zIndex,
|
|
31
43
|
overflow: "auto" // @ts-ignore
|
|
32
44
|
,
|
|
33
45
|
backgroundColor: "hsla(0,0%,0%,0.4)"
|
|
34
|
-
},
|
|
46
|
+
}, themeProps));
|
|
35
47
|
});
|
|
36
48
|
exports.Scrim = Scrim;
|
package/dist/cjs/Table/Table.js
CHANGED
|
@@ -21,7 +21,9 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
21
21
|
|
|
22
22
|
var _react2 = require("@emotion/react");
|
|
23
23
|
|
|
24
|
-
var
|
|
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,
|
|
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,
|
|
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
|
|
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
|
|
53
|
+
return _merge["default"].apply(void 0, [{}].concat(merges));
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
var themeStorage = {
|