@canonical/react-components 0.41.0 → 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 +32 -65
- 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 +14 -30
- 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 +66 -101
- package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js +47 -84
- 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 +59 -111
- 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 +39 -46
- 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.js +25 -41
- package/dist/components/Notification/index.js +0 -4
- package/dist/components/Pagination/Pagination.js +14 -44
- package/dist/components/Pagination/PaginationButton/PaginationButton.js +3 -10
- 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 +16 -45
- 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 +68 -104
- package/dist/components/SearchAndFilter/index.js +0 -2
- package/dist/components/SearchAndFilter/utils.js +1 -7
- package/dist/components/SearchBox/SearchBox.js +14 -34
- 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 +37 -87
- package/dist/components/Tooltip/index.js +0 -4
- package/dist/enums.js +0 -2
- 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.js +6 -13
- package/dist/index.js +0 -52
- package/dist/utils.js +3 -10
- package/package.json +6 -5
|
@@ -1,54 +1,33 @@
|
|
|
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 = exports.Label = 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
|
var _Button = _interopRequireDefault(require("../Button"));
|
|
19
|
-
|
|
20
13
|
var _ContextualMenuDropdown = _interopRequireDefault(require("./ContextualMenuDropdown"));
|
|
21
|
-
|
|
22
14
|
var _useId = require("../../hooks/useId");
|
|
23
|
-
|
|
24
15
|
var _excluded = ["autoAdjust", "children", "className", "closeOnEsc", "closeOnOutsideClick", "constrainPanelWidth", "dropdownClassName", "dropdownProps", "hasToggleIcon", "links", "onToggleMenu", "position", "positionNode", "toggleAppearance", "toggleClassName", "toggleDisabled", "toggleLabel", "toggleLabelFirst", "toggleProps", "visible"];
|
|
25
|
-
|
|
26
16
|
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
|
-
|
|
28
17
|
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
|
-
|
|
30
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
31
|
-
|
|
32
19
|
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); }
|
|
33
|
-
|
|
34
|
-
function
|
|
35
|
-
|
|
20
|
+
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; }
|
|
21
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
22
|
+
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); }
|
|
36
23
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
37
|
-
|
|
38
24
|
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."); }
|
|
39
|
-
|
|
40
25
|
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); }
|
|
41
|
-
|
|
42
|
-
function
|
|
43
|
-
|
|
44
|
-
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; }
|
|
45
|
-
|
|
26
|
+
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; }
|
|
27
|
+
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; } }
|
|
46
28
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
47
|
-
|
|
48
29
|
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; }
|
|
49
|
-
|
|
50
30
|
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; }
|
|
51
|
-
|
|
52
31
|
var Label = /*#__PURE__*/function (Label) {
|
|
53
32
|
Label["Toggle"] = "Toggle menu";
|
|
54
33
|
return Label;
|
|
@@ -57,10 +36,7 @@ var Label = /*#__PURE__*/function (Label) {
|
|
|
57
36
|
* The props for the ContextualMenu component.
|
|
58
37
|
* @template L - The type of the link props.
|
|
59
38
|
*/
|
|
60
|
-
|
|
61
|
-
|
|
62
39
|
exports.Label = Label;
|
|
63
|
-
|
|
64
40
|
/**
|
|
65
41
|
* Get the node to use for positioning the menu.
|
|
66
42
|
* @param wrapper - The component's wrapping element.
|
|
@@ -75,19 +51,18 @@ var getPositionNode = function getPositionNode(wrapper, positionNode) {
|
|
|
75
51
|
var toggle = wrapper.querySelector(".p-contextual-menu__toggle");
|
|
76
52
|
return toggle || wrapper;
|
|
77
53
|
}
|
|
78
|
-
|
|
79
54
|
return null;
|
|
80
55
|
};
|
|
56
|
+
|
|
81
57
|
/**
|
|
82
58
|
* Whether the positioning node is visible.
|
|
83
59
|
* @param positionNode - The node that is used to position the menu.
|
|
84
60
|
* @return Whether the positioning node is visible.
|
|
85
61
|
*/
|
|
86
|
-
|
|
87
|
-
|
|
88
62
|
var getPositionNodeVisible = function getPositionNodeVisible(positionNode) {
|
|
89
63
|
return !positionNode || positionNode.offsetParent !== null;
|
|
90
64
|
};
|
|
65
|
+
|
|
91
66
|
/**
|
|
92
67
|
* A component for the Vanilla contextual menu.
|
|
93
68
|
* @template L - The type of the link props.
|
|
@@ -110,98 +85,90 @@ var getPositionNodeVisible = function getPositionNodeVisible(positionNode) {
|
|
|
110
85
|
* @param [toggleLabelFirst=true] - Whether the toggle lable or icon should appear first.
|
|
111
86
|
* @param [visible=false] - Whether the menu should be visible.
|
|
112
87
|
*/
|
|
113
|
-
|
|
114
|
-
|
|
115
88
|
var ContextualMenu = function ContextualMenu(_ref) {
|
|
116
89
|
var _ref$autoAdjust = _ref.autoAdjust,
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
90
|
+
autoAdjust = _ref$autoAdjust === void 0 ? true : _ref$autoAdjust,
|
|
91
|
+
children = _ref.children,
|
|
92
|
+
className = _ref.className,
|
|
93
|
+
_ref$closeOnEsc = _ref.closeOnEsc,
|
|
94
|
+
closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
|
|
95
|
+
_ref$closeOnOutsideCl = _ref.closeOnOutsideClick,
|
|
96
|
+
closeOnOutsideClick = _ref$closeOnOutsideCl === void 0 ? true : _ref$closeOnOutsideCl,
|
|
97
|
+
constrainPanelWidth = _ref.constrainPanelWidth,
|
|
98
|
+
dropdownClassName = _ref.dropdownClassName,
|
|
99
|
+
dropdownProps = _ref.dropdownProps,
|
|
100
|
+
hasToggleIcon = _ref.hasToggleIcon,
|
|
101
|
+
links = _ref.links,
|
|
102
|
+
onToggleMenu = _ref.onToggleMenu,
|
|
103
|
+
_ref$position = _ref.position,
|
|
104
|
+
position = _ref$position === void 0 ? "right" : _ref$position,
|
|
105
|
+
positionNode = _ref.positionNode,
|
|
106
|
+
toggleAppearance = _ref.toggleAppearance,
|
|
107
|
+
toggleClassName = _ref.toggleClassName,
|
|
108
|
+
toggleDisabled = _ref.toggleDisabled,
|
|
109
|
+
toggleLabel = _ref.toggleLabel,
|
|
110
|
+
_ref$toggleLabelFirst = _ref.toggleLabelFirst,
|
|
111
|
+
toggleLabelFirst = _ref$toggleLabelFirst === void 0 ? true : _ref$toggleLabelFirst,
|
|
112
|
+
toggleProps = _ref.toggleProps,
|
|
113
|
+
_ref$visible = _ref.visible,
|
|
114
|
+
visible = _ref$visible === void 0 ? false : _ref$visible,
|
|
115
|
+
wrapperProps = _objectWithoutProperties(_ref, _excluded);
|
|
144
116
|
var id = (0, _useId.useId)();
|
|
145
117
|
var wrapper = (0, _react.useRef)();
|
|
146
|
-
|
|
147
118
|
var _useState = (0, _react.useState)(),
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
119
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
120
|
+
positionCoords = _useState2[0],
|
|
121
|
+
setPositionCoords = _useState2[1];
|
|
152
122
|
var _useState3 = (0, _react.useState)(position),
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
var hasToggle = hasToggleIcon || toggleLabel; // Update the coordinates of the position node.
|
|
123
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
124
|
+
adjustedPosition = _useState4[0],
|
|
125
|
+
setAdjustedPosition = _useState4[1];
|
|
126
|
+
var hasToggle = hasToggleIcon || toggleLabel;
|
|
158
127
|
|
|
128
|
+
// Update the coordinates of the position node.
|
|
159
129
|
var updatePositionCoords = (0, _react.useCallback)(function () {
|
|
160
130
|
var parent = getPositionNode(wrapper.current, positionNode);
|
|
161
|
-
|
|
162
131
|
if (!parent) {
|
|
163
132
|
return null;
|
|
164
133
|
}
|
|
165
|
-
|
|
166
134
|
setPositionCoords(parent.getBoundingClientRect());
|
|
167
135
|
}, [wrapper, positionNode]);
|
|
168
|
-
|
|
169
136
|
var _usePortal = (0, _reactUseportal.default)({
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
137
|
+
closeOnEsc: closeOnEsc,
|
|
138
|
+
closeOnOutsideClick: closeOnOutsideClick,
|
|
139
|
+
isOpen: visible,
|
|
140
|
+
onOpen: function onOpen() {
|
|
141
|
+
// Call the toggle callback, if supplied.
|
|
142
|
+
onToggleMenu && onToggleMenu(true);
|
|
143
|
+
// When the menu opens then update the coordinates of the parent.
|
|
144
|
+
updatePositionCoords();
|
|
145
|
+
},
|
|
146
|
+
onClose: function onClose() {
|
|
147
|
+
// Call the toggle callback, if supplied.
|
|
148
|
+
onToggleMenu && onToggleMenu(false);
|
|
149
|
+
}
|
|
150
|
+
}),
|
|
151
|
+
openPortal = _usePortal.openPortal,
|
|
152
|
+
closePortal = _usePortal.closePortal,
|
|
153
|
+
isOpen = _usePortal.isOpen,
|
|
154
|
+
Portal = _usePortal.Portal,
|
|
155
|
+
ref = _usePortal.ref;
|
|
190
156
|
var previousVisible = (0, _hooks.usePrevious)(visible);
|
|
191
157
|
var labelNode = toggleLabel && typeof toggleLabel === "string" ? /*#__PURE__*/_react.default.createElement("span", null, toggleLabel) : /*#__PURE__*/_react.default.isValidElement(toggleLabel) ? toggleLabel : null;
|
|
192
|
-
var wrapperClass = (0, _classnames.default)(className, "p-contextual-menu", _defineProperty({}, "p-contextual-menu--".concat(adjustedPosition), adjustedPosition !== "right"));
|
|
158
|
+
var wrapperClass = (0, _classnames.default)(className, "p-contextual-menu", _defineProperty({}, "p-contextual-menu--".concat(adjustedPosition), adjustedPosition !== "right"));
|
|
159
|
+
|
|
160
|
+
// Update the coordinates of the wrapper once it mounts to the dom. This uses
|
|
193
161
|
// The callback ref pattern:
|
|
194
162
|
// https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
|
|
195
|
-
|
|
196
163
|
var wrapperRef = (0, _react.useCallback)(function (node) {
|
|
197
164
|
wrapper.current = node;
|
|
198
|
-
|
|
199
165
|
if (node !== null) {
|
|
200
166
|
updatePositionCoords();
|
|
201
167
|
}
|
|
202
|
-
}, [updatePositionCoords]);
|
|
203
|
-
// the component.
|
|
168
|
+
}, [updatePositionCoords]);
|
|
204
169
|
|
|
170
|
+
// Handle controlling updates to the menu visibility from outside
|
|
171
|
+
// the component.
|
|
205
172
|
(0, _react.useEffect)(function () {
|
|
206
173
|
if (visible !== previousVisible) {
|
|
207
174
|
if (visible && !isOpen) {
|
|
@@ -213,7 +180,6 @@ var ContextualMenu = function ContextualMenu(_ref) {
|
|
|
213
180
|
}, [closePortal, openPortal, visible, isOpen, previousVisible]);
|
|
214
181
|
var onResize = (0, _react.useCallback)(function (evt) {
|
|
215
182
|
var parent = getPositionNode(wrapper.current, positionNode);
|
|
216
|
-
|
|
217
183
|
if (parent && !getPositionNodeVisible(parent)) {
|
|
218
184
|
// Hide the menu if the item has become hidden. This might happen in
|
|
219
185
|
// a responsive table when columns become hidden as the page
|
|
@@ -276,6 +242,5 @@ var ContextualMenu = function ContextualMenu(_ref) {
|
|
|
276
242
|
wrapperClass: wrapperClass
|
|
277
243
|
}, dropdownProps))));
|
|
278
244
|
};
|
|
279
|
-
|
|
280
245
|
var _default = ContextualMenu;
|
|
281
246
|
exports.default = _default;
|
|
@@ -1,53 +1,33 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
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
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: true
|
|
7
5
|
});
|
|
8
6
|
exports.default = exports.adjustForWindow = exports.Label = void 0;
|
|
9
|
-
|
|
10
7
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
|
-
|
|
12
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
|
|
14
9
|
var _hooks = require("../../../hooks");
|
|
15
|
-
|
|
16
10
|
var _Button = _interopRequireDefault(require("../../Button"));
|
|
17
|
-
|
|
18
11
|
var _excluded = ["children", "className", "onClick"],
|
|
19
|
-
|
|
20
|
-
|
|
12
|
+
_excluded2 = ["adjustedPosition", "autoAdjust", "closePortal", "constrainPanelWidth", "dropdownClassName", "dropdownContent", "id", "isOpen", "links", "position", "positionCoords", "positionNode", "setAdjustedPosition", "wrapperClass"];
|
|
21
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); }
|
|
22
|
-
|
|
23
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; }
|
|
24
|
-
|
|
25
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
26
|
-
|
|
16
|
+
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); }
|
|
27
17
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
28
|
-
|
|
29
18
|
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."); }
|
|
30
|
-
|
|
31
19
|
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); }
|
|
32
|
-
|
|
33
|
-
function
|
|
34
|
-
|
|
35
|
-
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; }
|
|
36
|
-
|
|
20
|
+
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; }
|
|
21
|
+
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; } }
|
|
37
22
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
38
|
-
|
|
39
23
|
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); }
|
|
40
|
-
|
|
41
24
|
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; }
|
|
42
|
-
|
|
43
25
|
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; }
|
|
44
|
-
|
|
45
26
|
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; }
|
|
46
|
-
|
|
47
27
|
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; }
|
|
48
|
-
|
|
49
|
-
function
|
|
50
|
-
|
|
28
|
+
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; }
|
|
29
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
30
|
+
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); }
|
|
51
31
|
var Label = /*#__PURE__*/function (Label) {
|
|
52
32
|
Label["Dropdown"] = "submenu";
|
|
53
33
|
return Label;
|
|
@@ -56,10 +36,11 @@ var Label = /*#__PURE__*/function (Label) {
|
|
|
56
36
|
* The type of the menu links.
|
|
57
37
|
* @template L - The type of the link props.
|
|
58
38
|
*/
|
|
59
|
-
|
|
60
|
-
|
|
39
|
+
/**
|
|
40
|
+
* The props for the ContextualMenuDropdown component.
|
|
41
|
+
* @template L - The type of the link props.
|
|
42
|
+
*/
|
|
61
43
|
exports.Label = Label;
|
|
62
|
-
|
|
63
44
|
/**
|
|
64
45
|
* Calculate the styles for the menu.
|
|
65
46
|
* @param position - The menu position.
|
|
@@ -70,31 +51,25 @@ var getPositionStyle = function getPositionStyle(position, positionCoords, const
|
|
|
70
51
|
if (!positionCoords) {
|
|
71
52
|
return null;
|
|
72
53
|
}
|
|
73
|
-
|
|
74
54
|
var height = positionCoords.height,
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
55
|
+
left = positionCoords.left,
|
|
56
|
+
top = positionCoords.top,
|
|
57
|
+
width = positionCoords.width;
|
|
78
58
|
var topPos = top + height + (window.scrollY || 0);
|
|
79
59
|
var leftPos = left;
|
|
80
|
-
|
|
81
60
|
switch (position) {
|
|
82
61
|
case "left":
|
|
83
62
|
leftPos = left;
|
|
84
63
|
break;
|
|
85
|
-
|
|
86
64
|
case "center":
|
|
87
65
|
leftPos = left + width / 2;
|
|
88
66
|
break;
|
|
89
|
-
|
|
90
67
|
case "right":
|
|
91
68
|
leftPos = left + width;
|
|
92
69
|
break;
|
|
93
|
-
|
|
94
70
|
default:
|
|
95
71
|
break;
|
|
96
72
|
}
|
|
97
|
-
|
|
98
73
|
return _objectSpread({
|
|
99
74
|
position: "absolute",
|
|
100
75
|
left: leftPos,
|
|
@@ -103,43 +78,37 @@ var getPositionStyle = function getPositionStyle(position, positionCoords, const
|
|
|
103
78
|
width: width
|
|
104
79
|
} : null);
|
|
105
80
|
};
|
|
81
|
+
|
|
106
82
|
/**
|
|
107
83
|
* Calculate the adjusted position in relation to the window.
|
|
108
84
|
* @param position - The requested position.
|
|
109
85
|
* @param fitsWindow - The window fitment info.
|
|
110
86
|
* @return The new position.
|
|
111
87
|
*/
|
|
112
|
-
|
|
113
|
-
|
|
114
88
|
var adjustForWindow = function adjustForWindow(position, fitsWindow) {
|
|
115
89
|
var newPosition = position;
|
|
116
|
-
|
|
117
90
|
if (!fitsWindow.fromRight.fitsLeft && newPosition === "right") {
|
|
118
91
|
newPosition = "left";
|
|
119
92
|
}
|
|
120
|
-
|
|
121
93
|
if (!fitsWindow.fromLeft.fitsRight && newPosition === "left") {
|
|
122
94
|
newPosition = "right";
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
|
|
95
|
+
}
|
|
96
|
+
// If the menu doesn't fit to the left or the right then center it.
|
|
126
97
|
if (!fitsWindow.fromLeft.fitsRight && !fitsWindow.fromRight.fitsLeft && (newPosition === "left" || newPosition === "right")) {
|
|
127
98
|
newPosition = "center";
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
|
|
99
|
+
}
|
|
100
|
+
// If the menu doesn't fit when centered then find a new position.
|
|
131
101
|
if (newPosition === "center" && (!fitsWindow.fromCenter.fitsCentered.fitsRight || !fitsWindow.fromCenter.fitsCentered.fitsLeft)) {
|
|
132
102
|
if (fitsWindow.fromLeft.fitsRight) {
|
|
133
103
|
newPosition = "left";
|
|
134
104
|
}
|
|
135
|
-
|
|
136
105
|
if (fitsWindow.fromRight.fitsLeft) {
|
|
137
106
|
newPosition = "right";
|
|
138
107
|
}
|
|
139
108
|
}
|
|
140
|
-
|
|
141
109
|
return newPosition;
|
|
142
110
|
};
|
|
111
|
+
|
|
143
112
|
/**
|
|
144
113
|
* Generate a menu link
|
|
145
114
|
* @template L - The type of the link props.
|
|
@@ -147,16 +116,12 @@ var adjustForWindow = function adjustForWindow(position, fitsWindow) {
|
|
|
147
116
|
* @param key - A key for the DOM.
|
|
148
117
|
* @param closePortal - The function to close the portal.
|
|
149
118
|
*/
|
|
150
|
-
|
|
151
|
-
|
|
152
119
|
exports.adjustForWindow = adjustForWindow;
|
|
153
|
-
|
|
154
120
|
var generateLink = function generateLink(link, key, closePortal) {
|
|
155
121
|
var children = link.children,
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
122
|
+
className = link.className,
|
|
123
|
+
onClick = link.onClick,
|
|
124
|
+
props = _objectWithoutProperties(link, _excluded);
|
|
160
125
|
return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
|
|
161
126
|
className: (0, _classnames.default)("p-contextual-menu__link", className),
|
|
162
127
|
key: key,
|
|
@@ -166,42 +131,42 @@ var generateLink = function generateLink(link, key, closePortal) {
|
|
|
166
131
|
} : null
|
|
167
132
|
}, props), children);
|
|
168
133
|
};
|
|
169
|
-
|
|
170
134
|
var ContextualMenuDropdown = function ContextualMenuDropdown(_ref) {
|
|
171
135
|
var adjustedPosition = _ref.adjustedPosition,
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
136
|
+
autoAdjust = _ref.autoAdjust,
|
|
137
|
+
closePortal = _ref.closePortal,
|
|
138
|
+
constrainPanelWidth = _ref.constrainPanelWidth,
|
|
139
|
+
dropdownClassName = _ref.dropdownClassName,
|
|
140
|
+
dropdownContent = _ref.dropdownContent,
|
|
141
|
+
id = _ref.id,
|
|
142
|
+
isOpen = _ref.isOpen,
|
|
143
|
+
links = _ref.links,
|
|
144
|
+
position = _ref.position,
|
|
145
|
+
positionCoords = _ref.positionCoords,
|
|
146
|
+
positionNode = _ref.positionNode,
|
|
147
|
+
setAdjustedPosition = _ref.setAdjustedPosition,
|
|
148
|
+
wrapperClass = _ref.wrapperClass,
|
|
149
|
+
props = _objectWithoutProperties(_ref, _excluded2);
|
|
187
150
|
var dropdown = (0, _react.useRef)();
|
|
188
|
-
|
|
189
151
|
var _useState = (0, _react.useState)(getPositionStyle(adjustedPosition, positionCoords, constrainPanelWidth)),
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
152
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
153
|
+
positionStyle = _useState2[0],
|
|
154
|
+
setPositionStyle = _useState2[1];
|
|
194
155
|
|
|
156
|
+
// Update the styles to position the menu.
|
|
195
157
|
var updatePositionStyle = (0, _react.useCallback)(function () {
|
|
196
158
|
setPositionStyle(getPositionStyle(adjustedPosition, positionCoords, constrainPanelWidth));
|
|
197
|
-
}, [adjustedPosition, positionCoords, constrainPanelWidth]);
|
|
159
|
+
}, [adjustedPosition, positionCoords, constrainPanelWidth]);
|
|
198
160
|
|
|
161
|
+
// Update the position when the window fitment info changes.
|
|
199
162
|
var onUpdateWindowFitment = (0, _react.useCallback)(function (fitsWindow) {
|
|
200
163
|
setAdjustedPosition(adjustForWindow(position, fitsWindow));
|
|
201
|
-
}, [position, setAdjustedPosition]);
|
|
164
|
+
}, [position, setAdjustedPosition]);
|
|
202
165
|
|
|
203
|
-
|
|
166
|
+
// Handle adjusting the position of the dropdown so that it remains on screen.
|
|
167
|
+
(0, _hooks.useWindowFitment)(dropdown.current, positionNode, onUpdateWindowFitment, 0, isOpen && autoAdjust);
|
|
204
168
|
|
|
169
|
+
// Update the styles when the position changes.
|
|
205
170
|
(0, _react.useEffect)(function () {
|
|
206
171
|
updatePositionStyle();
|
|
207
172
|
}, [adjustedPosition, updatePositionStyle]);
|
|
@@ -233,10 +198,8 @@ var ContextualMenuDropdown = function ContextualMenuDropdown(_ref) {
|
|
|
233
198
|
key: i
|
|
234
199
|
}, item);
|
|
235
200
|
}
|
|
236
|
-
|
|
237
201
|
return generateLink(item, i, closePortal);
|
|
238
202
|
})));
|
|
239
203
|
};
|
|
240
|
-
|
|
241
204
|
var _default = ContextualMenuDropdown;
|
|
242
205
|
exports.default = _default;
|
|
@@ -9,7 +9,5 @@ Object.defineProperty(exports, "default", {
|
|
|
9
9
|
return _ContextualMenuDropdown.default;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
|
|
13
12
|
var _ContextualMenuDropdown = _interopRequireDefault(require("./ContextualMenuDropdown"));
|
|
14
|
-
|
|
15
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -9,7 +9,5 @@ Object.defineProperty(exports, "default", {
|
|
|
9
9
|
return _ContextualMenu.default;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
|
|
13
12
|
var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
|
|
14
|
-
|
|
15
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|