@canonical/react-components 0.40.1 → 0.42.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 (127) hide show
  1. package/dist/__mocks__/nanoid.js +0 -2
  2. package/dist/components/Accordion/Accordion.js +13 -37
  3. package/dist/components/Accordion/AccordionSection/AccordionSection.js +8 -14
  4. package/dist/components/Accordion/AccordionSection/index.js +0 -2
  5. package/dist/components/Accordion/index.js +0 -2
  6. package/dist/components/ActionButton/ActionButton.js +36 -68
  7. package/dist/components/ActionButton/index.js +0 -2
  8. package/dist/components/ArticlePagination/ArticlePagination.js +5 -15
  9. package/dist/components/ArticlePagination/index.js +0 -2
  10. package/dist/components/Badge/Badge.js +10 -28
  11. package/dist/components/Badge/index.js +0 -2
  12. package/dist/components/Button/Button.js +12 -25
  13. package/dist/components/Button/index.js +0 -4
  14. package/dist/components/Card/Card.js +6 -17
  15. package/dist/components/Card/index.js +0 -2
  16. package/dist/components/CheckboxInput/CheckableInput/CheckableInput.js +6 -20
  17. package/dist/components/CheckboxInput/CheckableInput/index.js +0 -2
  18. package/dist/components/CheckboxInput/CheckboxInput.js +3 -13
  19. package/dist/components/CheckboxInput/index.js +0 -2
  20. package/dist/components/Chip/Chip.js +18 -35
  21. package/dist/components/Chip/index.js +0 -2
  22. package/dist/components/Code/Code.js +5 -23
  23. package/dist/components/Code/index.js +0 -2
  24. package/dist/components/CodeSnippet/CodeSnippet.js +2 -12
  25. package/dist/components/CodeSnippet/CodeSnippetBlock.js +10 -18
  26. package/dist/components/CodeSnippet/CodeSnippetDropdown.js +5 -14
  27. package/dist/components/CodeSnippet/index.js +0 -3
  28. package/dist/components/Col/Col.js +15 -25
  29. package/dist/components/Col/index.js +0 -4
  30. package/dist/components/ContextualMenu/ContextualMenu.js +70 -105
  31. package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js +51 -88
  32. package/dist/components/ContextualMenu/ContextualMenuDropdown/index.js +0 -2
  33. package/dist/components/ContextualMenu/index.js +0 -2
  34. package/dist/components/Field/Field.js +35 -51
  35. package/dist/components/Field/index.js +0 -2
  36. package/dist/components/Form/Form.js +4 -14
  37. package/dist/components/Form/index.js +0 -2
  38. package/dist/components/Icon/Icon.js +3 -14
  39. package/dist/components/Icon/index.js +0 -4
  40. package/dist/components/Input/Input.js +21 -39
  41. package/dist/components/Input/index.js +0 -2
  42. package/dist/components/Label/Label.js +7 -13
  43. package/dist/components/Label/index.js +0 -2
  44. package/dist/components/Link/Link.js +10 -22
  45. package/dist/components/Link/index.js +0 -2
  46. package/dist/components/List/List.js +18 -31
  47. package/dist/components/List/index.js +0 -2
  48. package/dist/components/Loader/Loader.js +0 -7
  49. package/dist/components/Loader/index.js +0 -2
  50. package/dist/components/MainTable/MainTable.js +60 -112
  51. package/dist/components/MainTable/index.js +0 -2
  52. package/dist/components/Modal/Modal.js +7 -34
  53. package/dist/components/Modal/index.js +0 -2
  54. package/dist/components/ModularTable/ModularTable.d.ts +9 -1
  55. package/dist/components/ModularTable/ModularTable.js +74 -63
  56. package/dist/components/ModularTable/index.js +0 -2
  57. package/dist/components/Navigation/Navigation.js +46 -82
  58. package/dist/components/Navigation/NavigationLink/NavigationLink.js +15 -30
  59. package/dist/components/Navigation/NavigationLink/index.js +0 -2
  60. package/dist/components/Navigation/NavigationMenu/NavigationMenu.js +12 -35
  61. package/dist/components/Navigation/NavigationMenu/index.js +0 -2
  62. package/dist/components/Navigation/index.js +0 -2
  63. package/dist/components/Notification/Notification.d.ts +6 -1
  64. package/dist/components/Notification/Notification.js +31 -46
  65. package/dist/components/Notification/index.js +0 -4
  66. package/dist/components/Pagination/Pagination.js +14 -44
  67. package/dist/components/Pagination/PaginationButton/PaginationButton.js +7 -14
  68. package/dist/components/Pagination/PaginationButton/index.js +0 -2
  69. package/dist/components/Pagination/PaginationItem/PaginationItem.js +3 -8
  70. package/dist/components/Pagination/PaginationItem/index.js +0 -2
  71. package/dist/components/Pagination/index.js +0 -2
  72. package/dist/components/PasswordToggle/PasswordToggle.js +21 -50
  73. package/dist/components/PasswordToggle/index.js +0 -2
  74. package/dist/components/RadioInput/RadioInput.js +1 -11
  75. package/dist/components/RadioInput/index.js +0 -2
  76. package/dist/components/Row/Row.js +2 -12
  77. package/dist/components/Row/index.js +0 -2
  78. package/dist/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.js +27 -49
  79. package/dist/components/SearchAndFilter/FilterPanelSection/index.js +0 -2
  80. package/dist/components/SearchAndFilter/SearchAndFilter.d.ts +9 -1
  81. package/dist/components/SearchAndFilter/SearchAndFilter.js +84 -105
  82. package/dist/components/SearchAndFilter/index.js +0 -2
  83. package/dist/components/SearchAndFilter/utils.js +1 -7
  84. package/dist/components/SearchBox/SearchBox.js +18 -38
  85. package/dist/components/SearchBox/index.js +0 -2
  86. package/dist/components/Select/Select.js +20 -33
  87. package/dist/components/Select/index.js +0 -2
  88. package/dist/components/Slider/Slider.js +16 -32
  89. package/dist/components/Slider/index.js +0 -2
  90. package/dist/components/Spinner/Spinner.js +8 -19
  91. package/dist/components/Spinner/index.js +0 -2
  92. package/dist/components/StatusLabel/StatusLabel.js +4 -15
  93. package/dist/components/StatusLabel/index.js +0 -4
  94. package/dist/components/Strip/Strip.js +25 -36
  95. package/dist/components/Strip/index.js +0 -2
  96. package/dist/components/SummaryButton/SummaryButton.js +4 -10
  97. package/dist/components/SummaryButton/index.js +0 -2
  98. package/dist/components/Switch/Switch.js +3 -12
  99. package/dist/components/Switch/index.js +0 -2
  100. package/dist/components/Table/Table.js +6 -16
  101. package/dist/components/Table/index.js +0 -2
  102. package/dist/components/TableCell/TableCell.js +10 -20
  103. package/dist/components/TableCell/index.js +0 -2
  104. package/dist/components/TableHeader/TableHeader.js +2 -11
  105. package/dist/components/TableHeader/index.js +0 -2
  106. package/dist/components/TableRow/TableRow.js +1 -10
  107. package/dist/components/TableRow/index.js +0 -2
  108. package/dist/components/Tabs/Tabs.js +7 -17
  109. package/dist/components/Tabs/index.js +0 -2
  110. package/dist/components/Textarea/Textarea.js +23 -36
  111. package/dist/components/Textarea/index.js +0 -2
  112. package/dist/components/Tooltip/Tooltip.js +42 -87
  113. package/dist/components/Tooltip/index.js +0 -4
  114. package/dist/enums.js +4 -6
  115. package/dist/hooks/index.js +0 -8
  116. package/dist/hooks/useClickOutside.js +2 -7
  117. package/dist/hooks/useId.js +0 -4
  118. package/dist/hooks/useListener.js +0 -8
  119. package/dist/hooks/useOnEscapePressed.js +0 -3
  120. package/dist/hooks/usePagination.js +13 -25
  121. package/dist/hooks/usePrevious.js +0 -3
  122. package/dist/hooks/useThrottle.js +1 -15
  123. package/dist/hooks/useWindowFitment.d.ts +12 -0
  124. package/dist/hooks/useWindowFitment.js +22 -17
  125. package/dist/index.js +0 -52
  126. package/dist/utils.js +3 -10
  127. package/package.json +36 -35
@@ -4,37 +4,28 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _classnames = _interopRequireDefault(require("classnames"));
9
-
10
8
  var _react = _interopRequireDefault(require("react"));
11
-
12
9
  var _excluded = ["active", "className", "component", "label", "listItemClassName"];
13
-
14
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
-
16
11
  function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
17
-
18
12
  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; }
19
-
20
13
  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
-
22
14
  var Tabs = function Tabs(_ref) {
23
15
  var className = _ref.className,
24
- links = _ref.links,
25
- listClassName = _ref.listClassName;
16
+ links = _ref.links,
17
+ listClassName = _ref.listClassName;
26
18
  return /*#__PURE__*/_react.default.createElement("nav", {
27
19
  className: (0, _classnames.default)("p-tabs", className)
28
20
  }, /*#__PURE__*/_react.default.createElement("ul", {
29
21
  className: (0, _classnames.default)("p-tabs__list", listClassName)
30
22
  }, links.map(function (link, i) {
31
23
  var active = link.active,
32
- className = link.className,
33
- component = link.component,
34
- label = link.label,
35
- listItemClassName = link.listItemClassName,
36
- rest = _objectWithoutProperties(link, _excluded);
37
-
24
+ className = link.className,
25
+ component = link.component,
26
+ label = link.label,
27
+ listItemClassName = link.listItemClassName,
28
+ rest = _objectWithoutProperties(link, _excluded);
38
29
  var Component = component || "a";
39
30
  return /*#__PURE__*/_react.default.createElement("li", {
40
31
  className: (0, _classnames.default)("p-tabs__item", listItemClassName),
@@ -46,6 +37,5 @@ var Tabs = function Tabs(_ref) {
46
37
  }, rest), label));
47
38
  })));
48
39
  };
49
-
50
40
  var _default = Tabs;
51
41
  exports.default = _default;
@@ -9,7 +9,5 @@ Object.defineProperty(exports, "default", {
9
9
  return _Tabs.default;
10
10
  }
11
11
  });
12
-
13
12
  var _Tabs = _interopRequireDefault(require("./Tabs"));
14
-
15
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -1,60 +1,49 @@
1
1
  "use strict";
2
2
 
3
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
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
-
10
8
  var _classnames = _interopRequireDefault(require("classnames"));
11
-
12
9
  var _react = _interopRequireWildcard(require("react"));
13
-
14
10
  var _Field = _interopRequireDefault(require("../Field"));
15
-
16
11
  var _hooks = require("../../hooks");
17
-
18
12
  var _excluded = ["caution", "className", "error", "grow", "help", "id", "label", "labelClassName", "onKeyUp", "required", "stacked", "style", "success", "takeFocus", "wrapperClassName"];
19
-
20
13
  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
14
  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; }
23
-
24
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
-
26
16
  function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
27
-
28
17
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
29
-
30
18
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
31
-
32
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
33
-
19
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
20
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
21
+ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
34
22
  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; }
35
-
36
23
  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; }
24
+ /**
25
+ * The props for the Textarea component.
26
+ */
37
27
 
38
28
  var Textarea = function Textarea(_ref) {
39
29
  var caution = _ref.caution,
40
- className = _ref.className,
41
- error = _ref.error,
42
- _ref$grow = _ref.grow,
43
- grow = _ref$grow === void 0 ? false : _ref$grow,
44
- help = _ref.help,
45
- id = _ref.id,
46
- label = _ref.label,
47
- labelClassName = _ref.labelClassName,
48
- _onKeyUp = _ref.onKeyUp,
49
- required = _ref.required,
50
- stacked = _ref.stacked,
51
- style = _ref.style,
52
- success = _ref.success,
53
- _ref$takeFocus = _ref.takeFocus,
54
- takeFocus = _ref$takeFocus === void 0 ? false : _ref$takeFocus,
55
- wrapperClassName = _ref.wrapperClassName,
56
- props = _objectWithoutProperties(_ref, _excluded);
57
-
30
+ className = _ref.className,
31
+ error = _ref.error,
32
+ _ref$grow = _ref.grow,
33
+ grow = _ref$grow === void 0 ? false : _ref$grow,
34
+ help = _ref.help,
35
+ id = _ref.id,
36
+ label = _ref.label,
37
+ labelClassName = _ref.labelClassName,
38
+ _onKeyUp = _ref.onKeyUp,
39
+ required = _ref.required,
40
+ stacked = _ref.stacked,
41
+ style = _ref.style,
42
+ success = _ref.success,
43
+ _ref$takeFocus = _ref.takeFocus,
44
+ takeFocus = _ref$takeFocus === void 0 ? false : _ref$takeFocus,
45
+ wrapperClassName = _ref.wrapperClassName,
46
+ props = _objectWithoutProperties(_ref, _excluded);
58
47
  var textareaRef = (0, _react.useRef)(null);
59
48
  var validationId = (0, _hooks.useId)();
60
49
  var helpId = (0, _hooks.useId)();
@@ -85,7 +74,6 @@ var Textarea = function Textarea(_ref) {
85
74
  id: id,
86
75
  onKeyUp: function onKeyUp(evt) {
87
76
  _onKeyUp && _onKeyUp(evt);
88
-
89
77
  if (grow) {
90
78
  evt.currentTarget.style.height = evt.currentTarget.scrollHeight + "px";
91
79
  }
@@ -99,6 +87,5 @@ var Textarea = function Textarea(_ref) {
99
87
  }, style) || style
100
88
  }, props)));
101
89
  };
102
-
103
90
  var _default = Textarea;
104
91
  exports.default = _default;
@@ -9,7 +9,5 @@ Object.defineProperty(exports, "default", {
9
9
  return _Textarea.default;
10
10
  }
11
11
  });
12
-
13
12
  var _Textarea = _interopRequireDefault(require("./Textarea"));
14
-
15
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -1,38 +1,23 @@
1
1
  "use strict";
2
2
 
3
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
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.position = exports.default = exports.adjustForWindow = void 0;
9
-
10
8
  var _classnames = _interopRequireDefault(require("classnames"));
11
-
12
9
  var _react = _interopRequireWildcard(require("react"));
13
-
14
10
  var _reactUseportal = _interopRequireDefault(require("react-useportal"));
15
-
16
11
  var _hooks = require("../../hooks");
17
-
18
12
  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
13
  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
-
22
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
-
24
15
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
25
-
26
16
  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."); }
27
-
28
17
  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); }
29
-
30
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
31
-
32
- 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; }
33
-
18
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
19
+ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
34
20
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
35
-
36
21
  var position = {
37
22
  btmCenter: "btm-center",
38
23
  btmLeft: "btm-left",
@@ -44,109 +29,87 @@ var position = {
44
29
  topRight: "top-right"
45
30
  };
46
31
  exports.position = position;
47
-
48
32
  var getPositionStyle = function getPositionStyle(pos, wrapperNode) {
49
33
  if (!wrapperNode) {
50
34
  return null;
51
35
  }
52
-
53
36
  var dimensions = wrapperNode.getBoundingClientRect();
54
37
  var x = dimensions.x,
55
- y = dimensions.y,
56
- height = dimensions.height,
57
- width = dimensions.width;
38
+ y = dimensions.y,
39
+ height = dimensions.height,
40
+ width = dimensions.width;
58
41
  var left = x + window.scrollX || 0;
59
42
  var top = y + window.scrollY || 0;
60
-
61
43
  switch (pos) {
62
44
  case "btm-center":
63
45
  left += width / 2;
64
46
  top += height;
65
47
  break;
66
-
67
48
  case "btm-left":
68
49
  top += height;
69
50
  break;
70
-
71
51
  case "btm-right":
72
52
  left += width;
73
53
  top += height;
74
54
  break;
75
-
76
55
  case "left":
77
56
  top += height / 2;
78
57
  break;
79
-
80
58
  case "right":
81
59
  left += width;
82
60
  top += height / 2;
83
61
  break;
84
-
85
62
  case "top-center":
86
63
  left += width / 2;
87
64
  break;
88
-
89
65
  case "top-left":
90
66
  break;
91
-
92
67
  case "top-right":
93
68
  left += width;
94
69
  break;
95
-
96
70
  default:
97
71
  break;
98
72
  }
99
-
100
73
  return {
101
74
  position: "absolute",
102
75
  left: left,
103
76
  top: top
104
77
  };
105
78
  };
106
-
107
79
  var adjustForWindow = function adjustForWindow(position, fitsWindow) {
108
80
  var newPosition = position;
109
-
110
81
  if (!fitsWindow.fromLeft.fitsLeft && newPosition === "left") {
111
82
  newPosition = "top-right";
112
83
  }
113
-
114
84
  if (!fitsWindow.fromRight.fitsRight && newPosition === "right") {
115
85
  newPosition = "top-left";
116
86
  }
117
-
118
87
  if (!fitsWindow.fromRight.fitsLeft && newPosition.endsWith("-right")) {
119
88
  newPosition = newPosition.replace("right", "left");
120
89
  }
121
-
122
90
  if (!fitsWindow.fromLeft.fitsRight && newPosition.endsWith("-left")) {
123
91
  newPosition = newPosition.replace("left", "right");
124
92
  }
125
-
126
93
  if (!fitsWindow.fromTop.fitsAbove && newPosition.startsWith("top")) {
127
94
  newPosition = newPosition.replace("top", "btm");
128
95
  }
129
-
130
96
  if (!fitsWindow.fromBottom.fitsBelow && newPosition.startsWith("btm")) {
131
97
  newPosition = newPosition.replace("btm", "top");
132
98
  }
133
-
134
99
  if (!fitsWindow.fromLeft.fitsRight && !fitsWindow.fromRight.fitsLeft && (newPosition.endsWith("-left") || newPosition.endsWith("-right"))) {
135
100
  newPosition = newPosition.replace("left", "center").replace("right", "center");
136
101
  }
137
-
138
102
  if (newPosition.endsWith("center") && (fitsWindow.fromCenter.fitsCentered.fitsRight || fitsWindow.fromCenter.fitsCentered.fitsLeft)) {
139
103
  if (!fitsWindow.fromCenter.fitsCentered.fitsRight) {
140
104
  newPosition = newPosition.replace("center", "right");
141
105
  }
142
-
143
106
  if (!fitsWindow.fromCenter.fitsCentered.fitsLeft) {
144
107
  newPosition = newPosition.replace("center", "left");
145
108
  }
146
109
  }
147
-
148
110
  return newPosition;
149
111
  };
112
+
150
113
  /**
151
114
  * A React component for Vanilla tooltips.
152
115
  * @param [autoAdjust=true] Whether the tooltip should adjust to fit in the screen.
@@ -159,48 +122,41 @@ var adjustForWindow = function adjustForWindow(position, fitsWindow) {
159
122
  * @param tooltipClassName An optional class to apply to the tooltip message element.
160
123
  * @param zIndex The z-index value of the tooltip message element.
161
124
  */
162
-
163
-
164
125
  exports.adjustForWindow = adjustForWindow;
165
-
166
126
  var Tooltip = function Tooltip(_ref) {
167
127
  var _ref$autoAdjust = _ref.autoAdjust,
168
- autoAdjust = _ref$autoAdjust === void 0 ? true : _ref$autoAdjust,
169
- children = _ref.children,
170
- className = _ref.className,
171
- _ref$followMouse = _ref.followMouse,
172
- followMouse = _ref$followMouse === void 0 ? false : _ref$followMouse,
173
- message = _ref.message,
174
- _ref$position = _ref.position,
175
- position = _ref$position === void 0 ? "top-left" : _ref$position,
176
- positionElementClassName = _ref.positionElementClassName,
177
- tooltipClassName = _ref.tooltipClassName,
178
- zIndex = _ref.zIndex;
128
+ autoAdjust = _ref$autoAdjust === void 0 ? true : _ref$autoAdjust,
129
+ children = _ref.children,
130
+ className = _ref.className,
131
+ _ref$followMouse = _ref.followMouse,
132
+ followMouse = _ref$followMouse === void 0 ? false : _ref$followMouse,
133
+ message = _ref.message,
134
+ _ref$position = _ref.position,
135
+ position = _ref$position === void 0 ? "top-left" : _ref$position,
136
+ positionElementClassName = _ref.positionElementClassName,
137
+ tooltipClassName = _ref.tooltipClassName,
138
+ zIndex = _ref.zIndex;
179
139
  var wrapperRef = (0, _react.useRef)(null);
180
140
  var messageRef = (0, _react.useRef)(null);
181
-
182
141
  var _useState = (0, _react.useState)(position),
183
- _useState2 = _slicedToArray(_useState, 2),
184
- adjustedPosition = _useState2[0],
185
- setAdjustedPosition = _useState2[1];
186
-
142
+ _useState2 = _slicedToArray(_useState, 2),
143
+ adjustedPosition = _useState2[0],
144
+ setAdjustedPosition = _useState2[1];
187
145
  var _useState3 = (0, _react.useState)({
188
- position: "absolute",
189
- // Initially position the tooltip of the screen in case it gets shown
190
- // before setting the position.
191
- left: -9999999,
192
- top: -9999999
193
- }),
194
- _useState4 = _slicedToArray(_useState3, 2),
195
- positionStyle = _useState4[0],
196
- setPositionStyle = _useState4[1];
197
-
146
+ position: "absolute",
147
+ // Initially position the tooltip of the screen in case it gets shown
148
+ // before setting the position.
149
+ left: -9999999,
150
+ top: -9999999
151
+ }),
152
+ _useState4 = _slicedToArray(_useState3, 2),
153
+ positionStyle = _useState4[0],
154
+ setPositionStyle = _useState4[1];
198
155
  var _usePortal = (0, _reactUseportal.default)(),
199
- openPortal = _usePortal.openPortal,
200
- closePortal = _usePortal.closePortal,
201
- isOpen = _usePortal.isOpen,
202
- Portal = _usePortal.Portal;
203
-
156
+ openPortal = _usePortal.openPortal,
157
+ closePortal = _usePortal.closePortal,
158
+ isOpen = _usePortal.isOpen,
159
+ Portal = _usePortal.Portal;
204
160
  var tooltipId = (0, _hooks.useId)();
205
161
  (0, _react.useEffect)(function () {
206
162
  if (isOpen && !followMouse && wrapperRef.current) {
@@ -220,10 +176,12 @@ var Tooltip = function Tooltip(_ref) {
220
176
  }, []);
221
177
  var onUpdateWindowFitment = (0, _react.useCallback)(function (fitsWindow) {
222
178
  setAdjustedPosition(adjustForWindow(position, fitsWindow));
223
- }, [setAdjustedPosition, position]); // Handle mouse events.
179
+ }, [setAdjustedPosition, position]);
224
180
 
225
- (0, _hooks.useListener)(wrapperRef.current, mouseHandler, "mousemove", true, followMouse && isOpen); // Handle adjusting the position of the tooltip so that it remains on screen.
181
+ // Handle mouse events.
182
+ (0, _hooks.useListener)(wrapperRef.current, mouseHandler, "mousemove", true, followMouse && isOpen);
226
183
 
184
+ // Handle adjusting the position of the tooltip so that it remains on screen.
227
185
  (0, _hooks.useWindowFitment)(messageRef.current, wrapperRef.current, onUpdateWindowFitment, 20, isOpen, autoAdjust && followMouse);
228
186
  var handleKeyPress = (0, _react.useCallback)(function (event) {
229
187
  if (event.key === "Escape") {
@@ -236,32 +194,25 @@ var Tooltip = function Tooltip(_ref) {
236
194
  window.removeEventListener("keypress", handleKeyPress);
237
195
  };
238
196
  }, [handleKeyPress]);
239
-
240
197
  var handleBlur = function handleBlur(e) {
241
198
  var _wrapperRef$current, _messageRef$current;
242
-
243
199
  // do not close if the focus is within the tooltip wrapper
244
200
  if (wrapperRef !== null && wrapperRef !== void 0 && (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(document.activeElement)) {
245
201
  return;
246
202
  }
247
-
248
203
  if (e.relatedTarget ? !((_messageRef$current = messageRef.current) !== null && _messageRef$current !== void 0 && _messageRef$current.contains(e.relatedTarget)) : e.target !== messageRef.current) {
249
204
  closePortal();
250
205
  }
251
206
  };
252
-
253
207
  var handleClick = function handleClick(e) {
254
208
  var _messageRef$current2;
255
-
256
209
  // ignore clicks within the tooltip message
257
210
  if ((_messageRef$current2 = messageRef.current) !== null && _messageRef$current2 !== void 0 && _messageRef$current2.contains(e.target)) {
258
211
  return;
259
212
  }
260
-
261
213
  e.target.focus();
262
214
  openPortal();
263
215
  };
264
-
265
216
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message ? /*#__PURE__*/_react.default.createElement("span", {
266
217
  className: className,
267
218
  onBlur: handleBlur,
@@ -286,6 +237,11 @@ var Tooltip = function Tooltip(_ref) {
286
237
  }, /*#__PURE__*/_react.default.createElement("span", {
287
238
  role: "tooltip",
288
239
  className: "p-tooltip__message",
240
+ onClick: function onClick(event) {
241
+ // Prevent clicks inside the message from bubbling to parent
242
+ // click handlers.
243
+ event.stopPropagation();
244
+ },
289
245
  ref: messageRef,
290
246
  id: tooltipId,
291
247
  style: {
@@ -295,6 +251,5 @@ var Tooltip = function Tooltip(_ref) {
295
251
  className: className
296
252
  }, children));
297
253
  };
298
-
299
254
  var _default = Tooltip;
300
255
  exports.default = _default;
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
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
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
@@ -17,9 +16,6 @@ Object.defineProperty(exports, "position", {
17
16
  return _Tooltip.position;
18
17
  }
19
18
  });
20
-
21
19
  var _Tooltip = _interopRequireWildcard(require("./Tooltip"));
22
-
23
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); }
24
-
25
21
  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; }
package/dist/enums.js CHANGED
@@ -4,14 +4,12 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.Theme = void 0;
7
-
8
7
  /**
9
8
  * The Vanilla theme types.
10
9
  */
11
- var Theme;
12
- exports.Theme = Theme;
13
-
14
- (function (Theme) {
10
+ var Theme = /*#__PURE__*/function (Theme) {
15
11
  Theme["DARK"] = "dark";
16
12
  Theme["LIGHT"] = "light";
17
- })(Theme || (exports.Theme = Theme = {}));
13
+ return Theme;
14
+ }({});
15
+ exports.Theme = Theme;
@@ -51,19 +51,11 @@ Object.defineProperty(exports, "useWindowFitment", {
51
51
  return _useWindowFitment.useWindowFitment;
52
52
  }
53
53
  });
54
-
55
54
  var _useClickOutside = require("./useClickOutside");
56
-
57
55
  var _useId = require("./useId");
58
-
59
56
  var _useListener = require("./useListener");
60
-
61
57
  var _useOnEscapePressed = require("./useOnEscapePressed");
62
-
63
58
  var _usePrevious = require("./usePrevious");
64
-
65
59
  var _useThrottle = require("./useThrottle");
66
-
67
60
  var _usePagination = require("./usePagination");
68
-
69
61
  var _useWindowFitment = require("./useWindowFitment");
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useClickOutside = void 0;
7
-
8
7
  var _react = require("react");
9
-
10
8
  /**
11
9
  * Handle clicks outside an element.
12
10
  * @returns A ref to pass to the element to handle clicks outside of.
@@ -15,12 +13,10 @@ var useClickOutside = function useClickOutside(onClickOutside) {
15
13
  var ref = (0, _react.useRef)(null);
16
14
  var handleClickOutside = (0, _react.useCallback)(function (evt) {
17
15
  var _evt$target, _ref$current;
18
-
19
- var target = evt.target; // The target might be something like an SVG node which doesn't provide
16
+ var target = evt.target;
17
+ // The target might be something like an SVG node which doesn't provide
20
18
  // the class name as a string.
21
-
22
19
  var isValidTarget = typeof (evt === null || evt === void 0 ? void 0 : (_evt$target = evt.target) === null || _evt$target === void 0 ? void 0 : _evt$target.className) === "string";
23
-
24
20
  if (!isValidTarget || ref.current && !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target)) && ref.current !== target) {
25
21
  onClickOutside();
26
22
  }
@@ -33,5 +29,4 @@ var useClickOutside = function useClickOutside(onClickOutside) {
33
29
  }, [handleClickOutside]);
34
30
  return ref;
35
31
  };
36
-
37
32
  exports.useClickOutside = useClickOutside;
@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useId = void 0;
7
-
8
7
  var _react = require("react");
9
-
10
8
  var _nanoid = require("nanoid");
11
-
12
9
  /**
13
10
  * A hook that returns the same random ID string on every render.
14
11
  * Can be used as a value for HTML "id" attributes.
@@ -17,5 +14,4 @@ var _nanoid = require("nanoid");
17
14
  var useId = function useId() {
18
15
  return (0, _react.useRef)((0, _nanoid.nanoid)()).current;
19
16
  };
20
-
21
17
  exports.useId = useId;
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useListener = void 0;
7
-
8
7
  var _react = require("react");
9
-
10
8
  var _useThrottle = require("./useThrottle");
11
-
12
9
  var _usePrevious = require("./usePrevious");
13
-
14
10
  /**
15
11
  * A hook that handles attaching/removing listeners and smartly reattaching if
16
12
  * any of the attributes change.
@@ -34,17 +30,14 @@ var useListener = function useListener(targetNode, callback, eventType) {
34
30
  // If any of the props related to the attached listener changed then the
35
31
  // listener needs to be re-attached.
36
32
  var listenerAttributesChanged = callback !== previousCallback || eventType !== previousEventType || shouldThrottle !== previousShouldThrottle || targetNode !== previousTargetNode;
37
-
38
33
  if (isListening.current && (!shouldListen || listenerAttributesChanged)) {
39
34
  previousTargetNode.removeEventListener(previousEventType, eventListener.current);
40
35
  isListening.current = false;
41
36
  }
42
-
43
37
  if (shouldThrottle !== previousShouldThrottle || callback !== previousCallback) {
44
38
  // Set the listener to the callback, or used the throttled callback.
45
39
  eventListener.current = shouldThrottle ? throttle : callback;
46
40
  }
47
-
48
41
  if (targetNode && shouldListen && !isListening.current) {
49
42
  targetNode.addEventListener(eventType, eventListener.current);
50
43
  isListening.current = true;
@@ -60,5 +53,4 @@ var useListener = function useListener(targetNode, callback, eventType) {
60
53
  };
61
54
  }, [eventType, targetNode]);
62
55
  };
63
-
64
56
  exports.useListener = useListener;
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useOnEscapePressed = void 0;
7
-
8
7
  var _react = require("react");
9
-
10
8
  /**
11
9
  * Handle the escape key pressed.
12
10
  */
@@ -23,5 +21,4 @@ var useOnEscapePressed = function useOnEscapePressed(onEscape) {
23
21
  };
24
22
  }, [keyDown]);
25
23
  };
26
-
27
24
  exports.useOnEscapePressed = useOnEscapePressed;