@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.
Files changed (69) hide show
  1. package/README.md +4 -4
  2. package/dist/components/Accordion/Accordion.js +9 -6
  3. package/dist/components/AccordionSection/AccordionSection.js +3 -16
  4. package/dist/components/ActionButton/ActionButton.js +9 -10
  5. package/dist/components/ArticlePagination/ArticlePagination.js +3 -1
  6. package/dist/components/Button/Button.d.ts +1 -2
  7. package/dist/components/Button/Button.js +5 -17
  8. package/dist/components/Button/index.js +7 -7
  9. package/dist/components/Card/Card.js +3 -1
  10. package/dist/components/CheckableInput/CheckableInput.js +6 -4
  11. package/dist/components/CheckboxInput/CheckboxInput.js +3 -1
  12. package/dist/components/Chip/Chip.d.ts +13 -2
  13. package/dist/components/Chip/Chip.js +45 -31
  14. package/dist/components/Code/Code.js +6 -4
  15. package/dist/components/CodeSnippet/CodeSnippetBlock.js +2 -13
  16. package/dist/components/CodeSnippet/CodeSnippetDropdown.js +6 -10
  17. package/dist/components/CodeSnippet/index.js +4 -4
  18. package/dist/components/Col/Col.js +3 -1
  19. package/dist/components/Col/index.js +7 -7
  20. package/dist/components/ContextualMenu/ContextualMenu.js +9 -6
  21. package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js +11 -24
  22. package/dist/components/Field/Field.js +0 -16
  23. package/dist/components/Form/Form.js +3 -1
  24. package/dist/components/Icon/Icon.js +3 -1
  25. package/dist/components/Icon/index.js +7 -7
  26. package/dist/components/Input/Input.d.ts +1 -1
  27. package/dist/components/Input/Input.js +36 -13
  28. package/dist/components/Label/Label.js +3 -1
  29. package/dist/components/Link/Link.d.ts +1 -5
  30. package/dist/components/Link/Link.js +3 -4
  31. package/dist/components/List/List.js +9 -19
  32. package/dist/components/MainTable/MainTable.js +14 -9
  33. package/dist/components/Modal/Modal.js +72 -21
  34. package/dist/components/Notification/Notification.js +11 -9
  35. package/dist/components/Notification/index.js +7 -7
  36. package/dist/components/Pagination/Pagination.js +3 -1
  37. package/dist/components/PaginationButton/PaginationButton.js +1 -8
  38. package/dist/components/PaginationItem/PaginationItem.js +0 -7
  39. package/dist/components/PasswordToggle/PasswordToggle.d.ts +99 -0
  40. package/dist/components/PasswordToggle/PasswordToggle.js +109 -0
  41. package/dist/components/PasswordToggle/index.d.ts +2 -0
  42. package/dist/components/PasswordToggle/index.js +15 -0
  43. package/dist/components/RadioInput/RadioInput.js +3 -1
  44. package/dist/components/Row/Row.js +3 -1
  45. package/dist/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.js +7 -8
  46. package/dist/components/SearchAndFilter/SearchAndFilter.js +8 -6
  47. package/dist/components/SearchAndFilter/utils.js +1 -1
  48. package/dist/components/Select/Select.js +8 -5
  49. package/dist/components/Slider/Slider.d.ts +1 -0
  50. package/dist/components/Slider/Slider.js +7 -3
  51. package/dist/components/Spinner/Spinner.d.ts +3 -2
  52. package/dist/components/Spinner/Spinner.js +13 -3
  53. package/dist/components/Strip/Strip.js +3 -1
  54. package/dist/components/SummaryButton/SummaryButton.js +0 -11
  55. package/dist/components/Table/Table.js +3 -1
  56. package/dist/components/TableCell/TableCell.js +3 -1
  57. package/dist/components/TableHeader/TableHeader.js +3 -1
  58. package/dist/components/TableRow/TableRow.js +3 -1
  59. package/dist/components/Tabs/Tabs.js +4 -8
  60. package/dist/components/Textarea/Textarea.js +8 -6
  61. package/dist/components/Tooltip/Tooltip.js +5 -16
  62. package/dist/hooks/index.js +6 -6
  63. package/dist/hooks/useListener.js +1 -7
  64. package/dist/hooks/usePrevious.js +1 -7
  65. package/dist/hooks/useThrottle.js +2 -8
  66. package/dist/hooks/useWindowFitment.js +1 -7
  67. package/dist/index.d.ts +1 -0
  68. package/dist/index.js +19 -11
  69. 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"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
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, ["title", "className", "content", "titleElement"]);
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, ["title", "className", "content"]);
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, ["className", "detailed", "divided", "inline", "isDark", "items", "middot", "stretch", "split", "stepped", "ticked"]);
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"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
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 cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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; }
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 in Object(iter)) return Array.from(iter); }
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, ["content", "sortKey"]);
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, ["columns", "expanded", "expandedContent", "key", "sortData"]);
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, ["content"]);
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, ["defaultSort", "defaultSortDirection", "emptyStateMsg", "expanding", "headers", "onUpdateSort", "paginate", "rows", "responsive", "sortable", "sortFunction"]);
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"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
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
- function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
16
+ var _excluded = ["buttonRow", "children", "className", "close", "title"];
17
17
 
18
- 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; }
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, ["buttonRow", "children", "className", "close", "title"]);
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)()); // This useEffect sets up listeners so the panel will close if user clicks
38
- // anywhere else on the page or hits the escape key
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
- (0, _react.useEffect)(function () {
41
- var keyDown = function keyDown(e) {
42
- if (e.code === "Escape") {
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
- }; // Add listener on document to capture keydown events
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
- document.addEventListener("keydown", keyDown); // return function to be called when unmounted
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
- }, [close]);
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: close
60
- }, wrapperProps), /*#__PURE__*/_react.default.createElement("section", {
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
- onClick: function onClick(evt) {
67
- return evt.stopPropagation();
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"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
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
- function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
18
+ var _excluded = ["actions", "borderless", "children", "className", "close", "inline", "onDismiss", "severity", "status", "timeout", "timestamp", "title", "type"];
19
19
 
20
- 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; }
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, ["actions", "borderless", "children", "className", "close", "inline", "onDismiss", "severity", "status", "timeout", "timestamp", "title", "type"]);
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-test": "notification-title"
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-test": "notification-close-button",
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-test": "notification-meta"
98
+ "data-testid": "notification-meta"
97
99
  }, timestamp && /*#__PURE__*/_react.default.createElement("span", {
98
100
  className: "p-notification__timestamp",
99
- "data-test": "notification-timestamp"
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-test": "notification-action",
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"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
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, "default", {
8
+ Object.defineProperty(exports, "NotificationSeverity", {
9
9
  enumerable: true,
10
10
  get: function get() {
11
- return _Notification.default;
11
+ return _Notification.NotificationSeverity;
12
12
  }
13
13
  });
14
- Object.defineProperty(exports, "NotificationSeverity", {
14
+ Object.defineProperty(exports, "default", {
15
15
  enumerable: true,
16
16
  get: function get() {
17
- return _Notification.NotificationSeverity;
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 cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
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, ["itemsPerPage", "totalItems", "paginate", "currentPage", "scrollToTop", "truncateThreshold"]);
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--contextual-menu"
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;