@canonical/react-components 0.22.0 → 0.31.0
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/README.md +4 -4
- package/dist/components/Accordion/Accordion.js +9 -6
- package/dist/components/AccordionSection/AccordionSection.js +3 -16
- package/dist/components/ActionButton/ActionButton.js +9 -10
- package/dist/components/ArticlePagination/ArticlePagination.js +3 -1
- package/dist/components/Button/Button.d.ts +1 -2
- package/dist/components/Button/Button.js +5 -17
- package/dist/components/Button/index.js +7 -7
- package/dist/components/Card/Card.js +3 -1
- package/dist/components/CheckableInput/CheckableInput.js +6 -4
- package/dist/components/CheckboxInput/CheckboxInput.js +3 -1
- package/dist/components/Chip/Chip.d.ts +13 -2
- package/dist/components/Chip/Chip.js +45 -31
- package/dist/components/Code/Code.js +6 -4
- package/dist/components/CodeSnippet/CodeSnippetBlock.js +2 -13
- package/dist/components/CodeSnippet/CodeSnippetDropdown.js +6 -10
- package/dist/components/CodeSnippet/index.js +4 -4
- package/dist/components/Col/Col.js +3 -1
- package/dist/components/Col/index.js +7 -7
- package/dist/components/ContextualMenu/ContextualMenu.js +9 -6
- package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js +11 -24
- package/dist/components/Field/Field.js +0 -16
- package/dist/components/Form/Form.js +3 -1
- package/dist/components/Icon/Icon.js +3 -1
- package/dist/components/Icon/index.js +7 -7
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Input/Input.js +36 -13
- package/dist/components/Label/Label.js +3 -1
- package/dist/components/Link/Link.d.ts +1 -5
- package/dist/components/Link/Link.js +3 -4
- package/dist/components/List/List.js +9 -19
- package/dist/components/MainTable/MainTable.js +14 -9
- package/dist/components/Modal/Modal.js +72 -21
- package/dist/components/Notification/Notification.js +11 -9
- package/dist/components/Notification/index.js +7 -7
- package/dist/components/Pagination/Pagination.js +3 -1
- package/dist/components/PaginationButton/PaginationButton.js +1 -8
- package/dist/components/PaginationItem/PaginationItem.js +0 -7
- package/dist/components/PasswordToggle/PasswordToggle.d.ts +99 -0
- package/dist/components/PasswordToggle/PasswordToggle.js +109 -0
- package/dist/components/PasswordToggle/index.d.ts +2 -0
- package/dist/components/PasswordToggle/index.js +15 -0
- package/dist/components/RadioInput/RadioInput.js +3 -1
- package/dist/components/Row/Row.js +3 -1
- package/dist/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.js +7 -8
- package/dist/components/SearchAndFilter/SearchAndFilter.js +8 -6
- package/dist/components/SearchAndFilter/utils.js +1 -1
- package/dist/components/Select/Select.js +8 -5
- package/dist/components/Slider/Slider.d.ts +1 -0
- package/dist/components/Slider/Slider.js +7 -3
- package/dist/components/Spinner/Spinner.d.ts +3 -2
- package/dist/components/Spinner/Spinner.js +13 -3
- package/dist/components/Strip/Strip.js +3 -1
- package/dist/components/SummaryButton/SummaryButton.js +0 -11
- package/dist/components/Table/Table.js +3 -1
- package/dist/components/TableCell/TableCell.js +3 -1
- package/dist/components/TableHeader/TableHeader.js +3 -1
- package/dist/components/TableRow/TableRow.js +3 -1
- package/dist/components/Tabs/Tabs.js +4 -8
- package/dist/components/Textarea/Textarea.js +8 -6
- package/dist/components/Tooltip/Tooltip.js +5 -16
- package/dist/hooks/index.js +6 -6
- package/dist/hooks/useListener.js +1 -7
- package/dist/hooks/usePrevious.js +1 -7
- package/dist/hooks/useThrottle.js +2 -8
- package/dist/hooks/useWindowFitment.js +1 -7
- package/dist/index.d.ts +1 -0
- package/dist/index.js +19 -11
- package/package.json +62 -56
|
@@ -5,12 +5,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
|
|
8
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
|
|
10
8
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
9
|
|
|
12
10
|
var _react = _interopRequireDefault(require("react"));
|
|
13
11
|
|
|
12
|
+
var _excluded = ["title", "className", "content", "titleElement"],
|
|
13
|
+
_excluded2 = ["title", "className", "content"],
|
|
14
|
+
_excluded3 = ["className", "detailed", "divided", "inline", "isDark", "items", "middot", "stretch", "split", "stepped", "ticked"];
|
|
15
|
+
|
|
14
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
17
|
|
|
16
18
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
@@ -19,7 +21,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
|
19
21
|
|
|
20
22
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
21
23
|
|
|
22
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
24
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
23
25
|
|
|
24
26
|
var generateItems = function generateItems(items, ticked, inline, stepped) {
|
|
25
27
|
return items.map(function (item, i) {
|
|
@@ -30,7 +32,7 @@ var generateItems = function generateItems(items, ticked, inline, stepped) {
|
|
|
30
32
|
var TitleComponent = "h3";
|
|
31
33
|
var liProps;
|
|
32
34
|
|
|
33
|
-
if (_react.default.isValidElement(item) || typeof item === "string" || typeof item === "number") {
|
|
35
|
+
if ( /*#__PURE__*/_react.default.isValidElement(item) || typeof item === "string" || typeof item === "number") {
|
|
34
36
|
content = item;
|
|
35
37
|
} else if (item && _typeof(item) === "object" && "content" in item) {
|
|
36
38
|
if ("titleElement" in item) {
|
|
@@ -40,14 +42,14 @@ var generateItems = function generateItems(items, ticked, inline, stepped) {
|
|
|
40
42
|
content = _item.content;
|
|
41
43
|
var _item$titleElement = _item.titleElement;
|
|
42
44
|
TitleComponent = _item$titleElement === void 0 ? "h3" : _item$titleElement;
|
|
43
|
-
liProps = _objectWithoutProperties(_item,
|
|
45
|
+
liProps = _objectWithoutProperties(_item, _excluded);
|
|
44
46
|
_item;
|
|
45
47
|
} else {
|
|
46
48
|
var _item2 = item;
|
|
47
49
|
title = _item2.title;
|
|
48
50
|
className = _item2.className;
|
|
49
51
|
content = _item2.content;
|
|
50
|
-
liProps = _objectWithoutProperties(_item2,
|
|
52
|
+
liProps = _objectWithoutProperties(_item2, _excluded2);
|
|
51
53
|
_item2;
|
|
52
54
|
}
|
|
53
55
|
}
|
|
@@ -86,7 +88,7 @@ var List = function List(_ref) {
|
|
|
86
88
|
split = _ref.split,
|
|
87
89
|
stepped = _ref.stepped,
|
|
88
90
|
ticked = _ref.ticked,
|
|
89
|
-
props = _objectWithoutProperties(_ref,
|
|
91
|
+
props = _objectWithoutProperties(_ref, _excluded3);
|
|
90
92
|
|
|
91
93
|
var Component = stepped ? "ol" : "ul";
|
|
92
94
|
return /*#__PURE__*/_react.default.createElement(Component, _extends({
|
|
@@ -104,17 +106,5 @@ var List = function List(_ref) {
|
|
|
104
106
|
}, props), generateItems(items, ticked, inline || middot || stretch, stepped));
|
|
105
107
|
};
|
|
106
108
|
|
|
107
|
-
List.propTypes = {
|
|
108
|
-
items: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.array]).isRequired,
|
|
109
|
-
detailed: _propTypes.default.bool,
|
|
110
|
-
divided: _propTypes.default.bool,
|
|
111
|
-
inline: _propTypes.default.bool,
|
|
112
|
-
isDark: _propTypes.default.bool,
|
|
113
|
-
middot: _propTypes.default.bool,
|
|
114
|
-
split: _propTypes.default.bool,
|
|
115
|
-
stepped: _propTypes.default.bool,
|
|
116
|
-
stretch: _propTypes.default.bool,
|
|
117
|
-
ticked: _propTypes.default.bool
|
|
118
|
-
};
|
|
119
109
|
var _default = List;
|
|
120
110
|
exports.default = _default;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
@@ -19,19 +19,24 @@ var _TableHeader = _interopRequireDefault(require("../TableHeader"));
|
|
|
19
19
|
|
|
20
20
|
var _TableCell = _interopRequireDefault(require("../TableCell"));
|
|
21
21
|
|
|
22
|
+
var _excluded = ["content", "sortKey"],
|
|
23
|
+
_excluded2 = ["columns", "expanded", "expandedContent", "key", "sortData"],
|
|
24
|
+
_excluded3 = ["content"],
|
|
25
|
+
_excluded4 = ["defaultSort", "defaultSortDirection", "emptyStateMsg", "expanding", "headers", "onUpdateSort", "paginate", "rows", "responsive", "sortable", "sortFunction"];
|
|
26
|
+
|
|
22
27
|
var _this = void 0;
|
|
23
28
|
|
|
24
29
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
30
|
|
|
26
|
-
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var
|
|
31
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
32
|
|
|
28
|
-
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
33
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
29
34
|
|
|
30
35
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
31
36
|
|
|
32
37
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
33
38
|
|
|
34
|
-
function _iterableToArrayLimit(arr, i) {
|
|
39
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
35
40
|
|
|
36
41
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
37
42
|
|
|
@@ -41,7 +46,7 @@ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread n
|
|
|
41
46
|
|
|
42
47
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
43
48
|
|
|
44
|
-
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator
|
|
49
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
45
50
|
|
|
46
51
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
47
52
|
|
|
@@ -72,7 +77,7 @@ var generateHeaders = function generateHeaders(currentSortKey, currentSortDirect
|
|
|
72
77
|
var headerItems = headers.map(function (_ref, index) {
|
|
73
78
|
var content = _ref.content,
|
|
74
79
|
sortKey = _ref.sortKey,
|
|
75
|
-
props = _objectWithoutProperties(_ref,
|
|
80
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
76
81
|
|
|
77
82
|
var sortDirection;
|
|
78
83
|
|
|
@@ -148,11 +153,11 @@ var generateRows = function generateRows(currentSortDirection, currentSortKey, e
|
|
|
148
153
|
expandedContent = _ref2.expandedContent,
|
|
149
154
|
key = _ref2.key,
|
|
150
155
|
sortData = _ref2.sortData,
|
|
151
|
-
rowProps = _objectWithoutProperties(_ref2,
|
|
156
|
+
rowProps = _objectWithoutProperties(_ref2, _excluded2);
|
|
152
157
|
|
|
153
158
|
var cellItems = columns.map(function (_ref3, index) {
|
|
154
159
|
var content = _ref3.content,
|
|
155
|
-
cellProps = _objectWithoutProperties(_ref3,
|
|
160
|
+
cellProps = _objectWithoutProperties(_ref3, _excluded3);
|
|
156
161
|
|
|
157
162
|
return /*#__PURE__*/_react.default.createElement(_TableCell.default, _extends({
|
|
158
163
|
key: index
|
|
@@ -188,7 +193,7 @@ var MainTable = function MainTable(_ref4) {
|
|
|
188
193
|
responsive = _ref4.responsive,
|
|
189
194
|
sortable = _ref4.sortable,
|
|
190
195
|
sortFunction = _ref4.sortFunction,
|
|
191
|
-
props = _objectWithoutProperties(_ref4,
|
|
196
|
+
props = _objectWithoutProperties(_ref4, _excluded4);
|
|
192
197
|
|
|
193
198
|
var _useState = (0, _react.useState)(defaultSort),
|
|
194
199
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
@@ -13,9 +13,11 @@ var _nanoid = require("nanoid");
|
|
|
13
13
|
|
|
14
14
|
var _react = _interopRequireWildcard(require("react"));
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
var _excluded = ["buttonRow", "children", "className", "close", "title"];
|
|
17
17
|
|
|
18
|
-
function
|
|
18
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
|
+
|
|
20
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
21
|
|
|
20
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
23
|
|
|
@@ -31,41 +33,90 @@ var Modal = function Modal(_ref) {
|
|
|
31
33
|
className = _ref.className,
|
|
32
34
|
close = _ref.close,
|
|
33
35
|
title = _ref.title,
|
|
34
|
-
wrapperProps = _objectWithoutProperties(_ref,
|
|
36
|
+
wrapperProps = _objectWithoutProperties(_ref, _excluded);
|
|
35
37
|
|
|
38
|
+
// list of focusable selectors is based on this Stack Overflow answer:
|
|
39
|
+
// https://stackoverflow.com/a/30753870/3732840
|
|
40
|
+
var focusableElementSelectors = 'a[href]:not([tabindex="-1"]), button:not([disabled]), textarea:not([disabled]):not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), area[href]:not([tabindex="-1"]), iframe:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), [contentEditable=true]:not([tabindex="-1"])';
|
|
36
41
|
var descriptionId = (0, _react.useRef)((0, _nanoid.nanoid)());
|
|
37
|
-
var titleId = (0, _react.useRef)((0, _nanoid.nanoid)());
|
|
38
|
-
|
|
42
|
+
var titleId = (0, _react.useRef)((0, _nanoid.nanoid)());
|
|
43
|
+
var shouldClose = (0, _react.useRef)(false);
|
|
44
|
+
var modalRef = (0, _react.useRef)(null);
|
|
45
|
+
var focusableModalElements = (0, _react.useRef)(null);
|
|
46
|
+
|
|
47
|
+
var handleTabKey = function handleTabKey(e) {
|
|
48
|
+
if (focusableModalElements.current.length > 0) {
|
|
49
|
+
var firstElement = focusableModalElements.current[0];
|
|
50
|
+
var lastElement = focusableModalElements.current[focusableModalElements.current.length - 1];
|
|
51
|
+
|
|
52
|
+
if (!e.shiftKey && document.activeElement === lastElement) {
|
|
53
|
+
firstElement.focus();
|
|
54
|
+
e.preventDefault();
|
|
55
|
+
}
|
|
39
56
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
// Close panel if Esc keydown detected
|
|
44
|
-
if (close) {
|
|
45
|
-
close();
|
|
46
|
-
}
|
|
57
|
+
if (e.shiftKey && document.activeElement === firstElement) {
|
|
58
|
+
lastElement.focus();
|
|
59
|
+
return e.preventDefault();
|
|
47
60
|
}
|
|
48
|
-
}
|
|
61
|
+
}
|
|
62
|
+
};
|
|
49
63
|
|
|
64
|
+
var keyListenersMap = new Map([[27, close], [9, handleTabKey]]);
|
|
65
|
+
(0, _react.useEffect)(function () {
|
|
66
|
+
modalRef.current.focus();
|
|
67
|
+
}, [modalRef]);
|
|
68
|
+
(0, _react.useEffect)(function () {
|
|
69
|
+
var _focusableModalElemen;
|
|
50
70
|
|
|
51
|
-
|
|
71
|
+
focusableModalElements.current = modalRef.current.querySelectorAll(focusableElementSelectors);
|
|
72
|
+
(_focusableModalElemen = focusableModalElements.current[0]) === null || _focusableModalElemen === void 0 ? void 0 : _focusableModalElemen.focus();
|
|
73
|
+
}, []);
|
|
74
|
+
(0, _react.useEffect)(function () {
|
|
75
|
+
var keyDown = function keyDown(e) {
|
|
76
|
+
var listener = keyListenersMap.get(e.keyCode);
|
|
77
|
+
return listener && listener(e);
|
|
78
|
+
};
|
|
52
79
|
|
|
80
|
+
document.addEventListener("keydown", keyDown);
|
|
53
81
|
return function () {
|
|
54
82
|
document.removeEventListener("keydown", keyDown);
|
|
55
83
|
};
|
|
56
|
-
}
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
var handleContentOnMouseDown = function handleContentOnMouseDown() {
|
|
87
|
+
shouldClose.current = false;
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
var handleContentOnMouseUp = function handleContentOnMouseUp() {
|
|
91
|
+
shouldClose.current = false;
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
var handleOverlayOnMouseDown = function handleOverlayOnMouseDown(event) {
|
|
95
|
+
if (event.target === modalRef.current) {
|
|
96
|
+
shouldClose.current = true;
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
var handleOverlayOnClick = function handleOverlayOnClick() {
|
|
101
|
+
if (shouldClose.current) {
|
|
102
|
+
close();
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
|
|
57
106
|
return /*#__PURE__*/_react.default.createElement("div", _extends({
|
|
58
107
|
className: (0, _classnames.default)("p-modal", className),
|
|
59
|
-
onClick:
|
|
60
|
-
|
|
108
|
+
onClick: handleOverlayOnClick,
|
|
109
|
+
onMouseDown: handleOverlayOnMouseDown
|
|
110
|
+
}, wrapperProps, {
|
|
111
|
+
ref: modalRef
|
|
112
|
+
}), /*#__PURE__*/_react.default.createElement("section", {
|
|
61
113
|
className: "p-modal__dialog",
|
|
62
114
|
role: "dialog",
|
|
63
115
|
"aria-modal": "true",
|
|
64
116
|
"aria-labelledby": titleId.current,
|
|
65
117
|
"aria-describedby": descriptionId.current,
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}
|
|
118
|
+
onMouseDown: handleContentOnMouseDown,
|
|
119
|
+
onMouseUp: handleContentOnMouseUp
|
|
69
120
|
}, !!title && /*#__PURE__*/_react.default.createElement("header", {
|
|
70
121
|
className: "p-modal__header"
|
|
71
122
|
}, /*#__PURE__*/_react.default.createElement("h2", {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
@@ -15,9 +15,11 @@ var _Button = _interopRequireWildcard(require("../Button"));
|
|
|
15
15
|
|
|
16
16
|
var _utils = require("../../utils");
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
var _excluded = ["actions", "borderless", "children", "className", "close", "inline", "onDismiss", "severity", "status", "timeout", "timestamp", "title", "type"];
|
|
19
19
|
|
|
20
|
-
function
|
|
20
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
21
|
+
|
|
22
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
23
|
|
|
22
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
25
|
|
|
@@ -56,7 +58,7 @@ var Notification = function Notification(_ref) {
|
|
|
56
58
|
timestamp = _ref.timestamp,
|
|
57
59
|
title = _ref.title,
|
|
58
60
|
type = _ref.type,
|
|
59
|
-
props = _objectWithoutProperties(_ref,
|
|
61
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
60
62
|
|
|
61
63
|
var timeoutId = (0, _react.useRef)(null);
|
|
62
64
|
var hasActions = (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
|
|
@@ -83,27 +85,27 @@ var Notification = function Notification(_ref) {
|
|
|
83
85
|
className: "p-notification__content"
|
|
84
86
|
}, title && /*#__PURE__*/_react.default.createElement("h5", {
|
|
85
87
|
className: "p-notification__title",
|
|
86
|
-
"data-
|
|
88
|
+
"data-testid": "notification-title"
|
|
87
89
|
}, title), inline && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\u2002"), /*#__PURE__*/_react.default.createElement("p", {
|
|
88
90
|
className: "p-notification__message"
|
|
89
91
|
}, children), onDismiss && /*#__PURE__*/_react.default.createElement("button", {
|
|
90
92
|
"aria-label": "Close notification",
|
|
91
93
|
className: "p-notification__close",
|
|
92
|
-
"data-
|
|
94
|
+
"data-testid": "notification-close-button",
|
|
93
95
|
onClick: onDismiss
|
|
94
96
|
}, "Close")), showMeta && /*#__PURE__*/_react.default.createElement("div", {
|
|
95
97
|
className: "p-notification__meta",
|
|
96
|
-
"data-
|
|
98
|
+
"data-testid": "notification-meta"
|
|
97
99
|
}, timestamp && /*#__PURE__*/_react.default.createElement("span", {
|
|
98
100
|
className: "p-notification__timestamp",
|
|
99
|
-
"data-
|
|
101
|
+
"data-testid": "notification-timestamp"
|
|
100
102
|
}, timestamp), hasActions ? /*#__PURE__*/_react.default.createElement("div", {
|
|
101
103
|
className: "p-notification__actions"
|
|
102
104
|
}, actions.map(function (action, i) {
|
|
103
105
|
return /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
104
106
|
appearance: _Button.ButtonAppearance.LINK,
|
|
105
107
|
className: "p-notification__action",
|
|
106
|
-
"data-
|
|
108
|
+
"data-testid": "notification-action",
|
|
107
109
|
key: "".concat(action.label, "-").concat(i),
|
|
108
110
|
onClick: action.onClick
|
|
109
111
|
}, action.label);
|
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
Object.defineProperty(exports, "
|
|
8
|
+
Object.defineProperty(exports, "NotificationSeverity", {
|
|
9
9
|
enumerable: true,
|
|
10
10
|
get: function get() {
|
|
11
|
-
return _Notification.
|
|
11
|
+
return _Notification.NotificationSeverity;
|
|
12
12
|
}
|
|
13
13
|
});
|
|
14
|
-
Object.defineProperty(exports, "
|
|
14
|
+
Object.defineProperty(exports, "default", {
|
|
15
15
|
enumerable: true,
|
|
16
16
|
get: function get() {
|
|
17
|
-
return _Notification.
|
|
17
|
+
return _Notification.default;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
20
20
|
|
|
21
21
|
var _Notification = _interopRequireWildcard(require("./Notification"));
|
|
22
22
|
|
|
23
|
-
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var
|
|
23
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
24
24
|
|
|
25
|
-
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -11,6 +11,8 @@ var _PaginationButton = _interopRequireDefault(require("../PaginationButton"));
|
|
|
11
11
|
|
|
12
12
|
var _PaginationItem = _interopRequireDefault(require("../PaginationItem"));
|
|
13
13
|
|
|
14
|
+
var _excluded = ["itemsPerPage", "totalItems", "paginate", "currentPage", "scrollToTop", "truncateThreshold"];
|
|
15
|
+
|
|
14
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
17
|
|
|
16
18
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
@@ -119,7 +121,7 @@ var Pagination = function Pagination(_ref) {
|
|
|
119
121
|
scrollToTop = _ref.scrollToTop,
|
|
120
122
|
_ref$truncateThreshol = _ref.truncateThreshold,
|
|
121
123
|
truncateThreshold = _ref$truncateThreshol === void 0 ? 10 : _ref$truncateThreshol,
|
|
122
|
-
navProps = _objectWithoutProperties(_ref,
|
|
124
|
+
navProps = _objectWithoutProperties(_ref, _excluded);
|
|
123
125
|
|
|
124
126
|
// return early if no pagination is required
|
|
125
127
|
if (totalItems <= itemsPerPage) {
|
|
@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
|
|
8
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
|
|
10
8
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
9
|
|
|
12
10
|
var _react = _interopRequireDefault(require("react"));
|
|
@@ -29,14 +27,9 @@ var PaginationButton = function PaginationButton(_ref) {
|
|
|
29
27
|
disabled: disabled,
|
|
30
28
|
onClick: onClick
|
|
31
29
|
}, /*#__PURE__*/_react.default.createElement("i", {
|
|
32
|
-
className: "p-icon--
|
|
30
|
+
className: "p-icon--chevron-down"
|
|
33
31
|
}, label)));
|
|
34
32
|
};
|
|
35
33
|
|
|
36
|
-
PaginationButton.propTypes = {
|
|
37
|
-
direction: _propTypes.default.oneOf(["forward", "back"]).isRequired,
|
|
38
|
-
disabled: _propTypes.default.bool,
|
|
39
|
-
onClick: _propTypes.default.func.isRequired
|
|
40
|
-
};
|
|
41
34
|
var _default = PaginationButton;
|
|
42
35
|
exports.default = _default;
|
|
@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
|
|
8
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
|
|
10
8
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
9
|
|
|
12
10
|
var _react = _interopRequireDefault(require("react"));
|
|
@@ -28,10 +26,5 @@ var PaginationItem = function PaginationItem(_ref) {
|
|
|
28
26
|
}, number));
|
|
29
27
|
};
|
|
30
28
|
|
|
31
|
-
PaginationItem.propTypes = {
|
|
32
|
-
isActive: _propTypes.default.bool,
|
|
33
|
-
number: _propTypes.default.number.isRequired,
|
|
34
|
-
onClick: _propTypes.default.func.isRequired
|
|
35
|
-
};
|
|
36
29
|
var _default = PaginationItem;
|
|
37
30
|
exports.default = _default;
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { InputHTMLAttributes, ReactNode } from "react";
|
|
3
|
+
import type { ClassName, PropsWithSpread } from "../../types";
|
|
4
|
+
/**
|
|
5
|
+
* The props for the Password Toggle component.
|
|
6
|
+
*/
|
|
7
|
+
export declare type Props = PropsWithSpread<{
|
|
8
|
+
/**
|
|
9
|
+
* The content for caution validation.
|
|
10
|
+
*/
|
|
11
|
+
caution?: ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* Optional class(es) to pass to the input element.
|
|
14
|
+
*/
|
|
15
|
+
className?: ClassName;
|
|
16
|
+
/**
|
|
17
|
+
* The content for error validation.
|
|
18
|
+
*/
|
|
19
|
+
error?: ReactNode;
|
|
20
|
+
/**
|
|
21
|
+
* Help text to show below the field.
|
|
22
|
+
*/
|
|
23
|
+
help?: ReactNode;
|
|
24
|
+
/**
|
|
25
|
+
* The id of the input.
|
|
26
|
+
*/
|
|
27
|
+
id: string;
|
|
28
|
+
/**
|
|
29
|
+
* The label for the field.
|
|
30
|
+
*/
|
|
31
|
+
label?: ReactNode;
|
|
32
|
+
/**
|
|
33
|
+
* Whether the field is read only.
|
|
34
|
+
*/
|
|
35
|
+
readOnly?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* Whether the field is required.
|
|
38
|
+
*/
|
|
39
|
+
required?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* The content for success validation.
|
|
42
|
+
*/
|
|
43
|
+
success?: ReactNode;
|
|
44
|
+
/**
|
|
45
|
+
* The content for success validation.
|
|
46
|
+
*/
|
|
47
|
+
type?: "submit" | "reset" | "button";
|
|
48
|
+
/**
|
|
49
|
+
* Optional class(es) to pass to the wrapping Field component
|
|
50
|
+
*/
|
|
51
|
+
wrapperClassName?: string;
|
|
52
|
+
}, InputHTMLAttributes<HTMLInputElement>>;
|
|
53
|
+
declare const PasswordToggle: React.ForwardRefExoticComponent<{
|
|
54
|
+
/**
|
|
55
|
+
* The content for caution validation.
|
|
56
|
+
*/
|
|
57
|
+
caution?: ReactNode;
|
|
58
|
+
/**
|
|
59
|
+
* Optional class(es) to pass to the input element.
|
|
60
|
+
*/
|
|
61
|
+
className?: ClassName;
|
|
62
|
+
/**
|
|
63
|
+
* The content for error validation.
|
|
64
|
+
*/
|
|
65
|
+
error?: ReactNode;
|
|
66
|
+
/**
|
|
67
|
+
* Help text to show below the field.
|
|
68
|
+
*/
|
|
69
|
+
help?: ReactNode;
|
|
70
|
+
/**
|
|
71
|
+
* The id of the input.
|
|
72
|
+
*/
|
|
73
|
+
id: string;
|
|
74
|
+
/**
|
|
75
|
+
* The label for the field.
|
|
76
|
+
*/
|
|
77
|
+
label?: ReactNode;
|
|
78
|
+
/**
|
|
79
|
+
* Whether the field is read only.
|
|
80
|
+
*/
|
|
81
|
+
readOnly?: boolean;
|
|
82
|
+
/**
|
|
83
|
+
* Whether the field is required.
|
|
84
|
+
*/
|
|
85
|
+
required?: boolean;
|
|
86
|
+
/**
|
|
87
|
+
* The content for success validation.
|
|
88
|
+
*/
|
|
89
|
+
success?: ReactNode;
|
|
90
|
+
/**
|
|
91
|
+
* The content for success validation.
|
|
92
|
+
*/
|
|
93
|
+
type?: "submit" | "reset" | "button";
|
|
94
|
+
/**
|
|
95
|
+
* Optional class(es) to pass to the wrapping Field component
|
|
96
|
+
*/
|
|
97
|
+
wrapperClassName?: string;
|
|
98
|
+
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "label" | "className" | "error" | "id" | "type" | "readOnly" | "required" | "help" | "success" | "caution" | "wrapperClassName"> & React.RefAttributes<HTMLInputElement>>;
|
|
99
|
+
export default PasswordToggle;
|