@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.
- package/dist/__mocks__/nanoid.js +0 -2
- package/dist/components/Accordion/Accordion.js +13 -37
- package/dist/components/Accordion/AccordionSection/AccordionSection.js +8 -14
- package/dist/components/Accordion/AccordionSection/index.js +0 -2
- package/dist/components/Accordion/index.js +0 -2
- package/dist/components/ActionButton/ActionButton.js +36 -68
- package/dist/components/ActionButton/index.js +0 -2
- package/dist/components/ArticlePagination/ArticlePagination.js +5 -15
- package/dist/components/ArticlePagination/index.js +0 -2
- package/dist/components/Badge/Badge.js +10 -28
- package/dist/components/Badge/index.js +0 -2
- package/dist/components/Button/Button.js +12 -25
- package/dist/components/Button/index.js +0 -4
- package/dist/components/Card/Card.js +6 -17
- package/dist/components/Card/index.js +0 -2
- package/dist/components/CheckboxInput/CheckableInput/CheckableInput.js +6 -20
- package/dist/components/CheckboxInput/CheckableInput/index.js +0 -2
- package/dist/components/CheckboxInput/CheckboxInput.js +3 -13
- package/dist/components/CheckboxInput/index.js +0 -2
- package/dist/components/Chip/Chip.js +18 -35
- package/dist/components/Chip/index.js +0 -2
- package/dist/components/Code/Code.js +5 -23
- package/dist/components/Code/index.js +0 -2
- package/dist/components/CodeSnippet/CodeSnippet.js +2 -12
- package/dist/components/CodeSnippet/CodeSnippetBlock.js +10 -18
- package/dist/components/CodeSnippet/CodeSnippetDropdown.js +5 -14
- package/dist/components/CodeSnippet/index.js +0 -3
- package/dist/components/Col/Col.js +15 -25
- package/dist/components/Col/index.js +0 -4
- package/dist/components/ContextualMenu/ContextualMenu.js +70 -105
- package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js +51 -88
- package/dist/components/ContextualMenu/ContextualMenuDropdown/index.js +0 -2
- package/dist/components/ContextualMenu/index.js +0 -2
- package/dist/components/Field/Field.js +35 -51
- package/dist/components/Field/index.js +0 -2
- package/dist/components/Form/Form.js +4 -14
- package/dist/components/Form/index.js +0 -2
- package/dist/components/Icon/Icon.js +3 -14
- package/dist/components/Icon/index.js +0 -4
- package/dist/components/Input/Input.js +21 -39
- package/dist/components/Input/index.js +0 -2
- package/dist/components/Label/Label.js +7 -13
- package/dist/components/Label/index.js +0 -2
- package/dist/components/Link/Link.js +10 -22
- package/dist/components/Link/index.js +0 -2
- package/dist/components/List/List.js +18 -31
- package/dist/components/List/index.js +0 -2
- package/dist/components/Loader/Loader.js +0 -7
- package/dist/components/Loader/index.js +0 -2
- package/dist/components/MainTable/MainTable.js +60 -112
- package/dist/components/MainTable/index.js +0 -2
- package/dist/components/Modal/Modal.js +7 -34
- package/dist/components/Modal/index.js +0 -2
- package/dist/components/ModularTable/ModularTable.d.ts +9 -1
- package/dist/components/ModularTable/ModularTable.js +74 -63
- package/dist/components/ModularTable/index.js +0 -2
- package/dist/components/Navigation/Navigation.js +46 -82
- package/dist/components/Navigation/NavigationLink/NavigationLink.js +15 -30
- package/dist/components/Navigation/NavigationLink/index.js +0 -2
- package/dist/components/Navigation/NavigationMenu/NavigationMenu.js +12 -35
- package/dist/components/Navigation/NavigationMenu/index.js +0 -2
- package/dist/components/Navigation/index.js +0 -2
- package/dist/components/Notification/Notification.d.ts +6 -1
- package/dist/components/Notification/Notification.js +31 -46
- package/dist/components/Notification/index.js +0 -4
- package/dist/components/Pagination/Pagination.js +14 -44
- package/dist/components/Pagination/PaginationButton/PaginationButton.js +7 -14
- package/dist/components/Pagination/PaginationButton/index.js +0 -2
- package/dist/components/Pagination/PaginationItem/PaginationItem.js +3 -8
- package/dist/components/Pagination/PaginationItem/index.js +0 -2
- package/dist/components/Pagination/index.js +0 -2
- package/dist/components/PasswordToggle/PasswordToggle.js +21 -50
- package/dist/components/PasswordToggle/index.js +0 -2
- package/dist/components/RadioInput/RadioInput.js +1 -11
- package/dist/components/RadioInput/index.js +0 -2
- package/dist/components/Row/Row.js +2 -12
- package/dist/components/Row/index.js +0 -2
- package/dist/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.js +27 -49
- package/dist/components/SearchAndFilter/FilterPanelSection/index.js +0 -2
- package/dist/components/SearchAndFilter/SearchAndFilter.d.ts +9 -1
- package/dist/components/SearchAndFilter/SearchAndFilter.js +84 -105
- package/dist/components/SearchAndFilter/index.js +0 -2
- package/dist/components/SearchAndFilter/utils.js +1 -7
- package/dist/components/SearchBox/SearchBox.js +18 -38
- package/dist/components/SearchBox/index.js +0 -2
- package/dist/components/Select/Select.js +20 -33
- package/dist/components/Select/index.js +0 -2
- package/dist/components/Slider/Slider.js +16 -32
- package/dist/components/Slider/index.js +0 -2
- package/dist/components/Spinner/Spinner.js +8 -19
- package/dist/components/Spinner/index.js +0 -2
- package/dist/components/StatusLabel/StatusLabel.js +4 -15
- package/dist/components/StatusLabel/index.js +0 -4
- package/dist/components/Strip/Strip.js +25 -36
- package/dist/components/Strip/index.js +0 -2
- package/dist/components/SummaryButton/SummaryButton.js +4 -10
- package/dist/components/SummaryButton/index.js +0 -2
- package/dist/components/Switch/Switch.js +3 -12
- package/dist/components/Switch/index.js +0 -2
- package/dist/components/Table/Table.js +6 -16
- package/dist/components/Table/index.js +0 -2
- package/dist/components/TableCell/TableCell.js +10 -20
- package/dist/components/TableCell/index.js +0 -2
- package/dist/components/TableHeader/TableHeader.js +2 -11
- package/dist/components/TableHeader/index.js +0 -2
- package/dist/components/TableRow/TableRow.js +1 -10
- package/dist/components/TableRow/index.js +0 -2
- package/dist/components/Tabs/Tabs.js +7 -17
- package/dist/components/Tabs/index.js +0 -2
- package/dist/components/Textarea/Textarea.js +23 -36
- package/dist/components/Textarea/index.js +0 -2
- package/dist/components/Tooltip/Tooltip.js +42 -87
- package/dist/components/Tooltip/index.js +0 -4
- package/dist/enums.js +4 -6
- package/dist/hooks/index.js +0 -8
- package/dist/hooks/useClickOutside.js +2 -7
- package/dist/hooks/useId.js +0 -4
- package/dist/hooks/useListener.js +0 -8
- package/dist/hooks/useOnEscapePressed.js +0 -3
- package/dist/hooks/usePagination.js +13 -25
- package/dist/hooks/usePrevious.js +0 -3
- package/dist/hooks/useThrottle.js +1 -15
- package/dist/hooks/useWindowFitment.d.ts +12 -0
- package/dist/hooks/useWindowFitment.js +22 -17
- package/dist/index.js +0 -52
- package/dist/utils.js +3 -10
- 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
|
-
|
|
25
|
-
|
|
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
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
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;
|
|
@@ -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
|
|
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
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
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;
|
|
@@ -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
|
|
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
|
-
|
|
56
|
-
|
|
57
|
-
|
|
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
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
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
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
142
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
143
|
+
adjustedPosition = _useState2[0],
|
|
144
|
+
setAdjustedPosition = _useState2[1];
|
|
187
145
|
var _useState3 = (0, _react.useState)({
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
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
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
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]);
|
|
179
|
+
}, [setAdjustedPosition, position]);
|
|
224
180
|
|
|
225
|
-
|
|
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
|
-
|
|
13
|
+
return Theme;
|
|
14
|
+
}({});
|
|
15
|
+
exports.Theme = Theme;
|
package/dist/hooks/index.js
CHANGED
|
@@ -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
|
-
|
|
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;
|
package/dist/hooks/useId.js
CHANGED
|
@@ -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;
|