@canonical/react-components 0.47.1 → 0.47.2
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 +3 -3
- package/dist/components/Accordion/Accordion.js +28 -41
- package/dist/components/Accordion/AccordionSection/AccordionSection.js +18 -18
- package/dist/components/Accordion/AccordionSection/index.js +1 -1
- package/dist/components/Accordion/index.js +1 -1
- package/dist/components/ActionButton/ActionButton.js +34 -66
- package/dist/components/ActionButton/index.js +1 -1
- package/dist/components/ArticlePagination/ArticlePagination.js +10 -12
- package/dist/components/ArticlePagination/index.js +1 -1
- package/dist/components/Badge/Badge.js +24 -29
- package/dist/components/Badge/index.js +1 -1
- package/dist/components/Button/Button.js +21 -26
- package/dist/components/Button/index.js +4 -5
- package/dist/components/Card/Card.js +12 -14
- package/dist/components/Card/index.js +1 -1
- package/dist/components/CheckboxInput/CheckableInput/CheckableInput.js +15 -19
- package/dist/components/CheckboxInput/CheckableInput/index.js +1 -1
- package/dist/components/CheckboxInput/CheckboxInput.js +7 -10
- package/dist/components/CheckboxInput/index.js +1 -1
- package/dist/components/Chip/Chip.js +23 -33
- package/dist/components/Chip/index.js +1 -1
- package/dist/components/Code/Code.js +14 -17
- package/dist/components/Code/index.js +1 -1
- package/dist/components/CodeSnippet/CodeSnippet.js +9 -14
- package/dist/components/CodeSnippet/CodeSnippetBlock.js +24 -29
- package/dist/components/CodeSnippet/CodeSnippetDropdown.js +11 -11
- package/dist/components/CodeSnippet/index.js +2 -2
- package/dist/components/Col/Col.js +24 -26
- package/dist/components/Col/index.js +4 -5
- package/dist/components/ConfirmationButton/ConfirmationButton.js +18 -21
- package/dist/components/ConfirmationButton/index.js +1 -1
- package/dist/components/ConfirmationModal/ConfirmationModal.js +11 -15
- package/dist/components/ConfirmationModal/index.js +1 -1
- package/dist/components/ContextualMenu/ContextualMenu.js +89 -107
- package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.d.ts +4 -4
- package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js +97 -107
- package/dist/components/ContextualMenu/ContextualMenuDropdown/index.js +1 -1
- package/dist/components/ContextualMenu/index.js +1 -1
- package/dist/components/EmptyState/EmptyState.js +9 -11
- package/dist/components/EmptyState/index.js +1 -1
- package/dist/components/Field/Field.js +66 -65
- package/dist/components/Field/index.js +1 -1
- package/dist/components/Form/Form.js +9 -11
- package/dist/components/Form/index.js +1 -1
- package/dist/components/Icon/Icon.js +9 -12
- package/dist/components/Icon/index.js +4 -5
- package/dist/components/Input/Input.js +38 -45
- package/dist/components/Input/index.js +1 -1
- package/dist/components/Label/Label.js +9 -11
- package/dist/components/Label/index.js +1 -1
- package/dist/components/Link/Link.js +12 -18
- package/dist/components/Link/index.js +1 -1
- package/dist/components/List/List.js +50 -54
- package/dist/components/List/index.js +1 -1
- package/dist/components/Loader/Loader.js +2 -3
- package/dist/components/Loader/index.js +1 -1
- package/dist/components/MainTable/MainTable.js +87 -104
- package/dist/components/MainTable/index.js +1 -1
- package/dist/components/Modal/Modal.js +37 -38
- package/dist/components/Modal/index.js +1 -1
- package/dist/components/ModularTable/ModularTable.js +63 -77
- package/dist/components/ModularTable/index.js +1 -1
- package/dist/components/Navigation/Navigation.js +63 -97
- package/dist/components/Navigation/NavigationLink/NavigationLink.js +32 -35
- package/dist/components/Navigation/NavigationLink/index.js +1 -1
- package/dist/components/Navigation/NavigationMenu/NavigationMenu.js +26 -45
- package/dist/components/Navigation/NavigationMenu/index.js +1 -1
- package/dist/components/Navigation/index.js +1 -1
- package/dist/components/Notification/Notification.js +49 -59
- package/dist/components/Notification/index.js +4 -5
- package/dist/components/NotificationProvider/NotificationProvider.js +47 -68
- package/dist/components/NotificationProvider/index.js +7 -7
- package/dist/components/NotificationProvider/messageBuilder.js +9 -9
- package/dist/components/NotificationProvider/types.d.ts +1 -0
- package/dist/components/Pagination/Pagination.js +50 -69
- package/dist/components/Pagination/PaginationButton/PaginationButton.js +11 -12
- package/dist/components/Pagination/PaginationButton/index.js +1 -1
- package/dist/components/Pagination/PaginationItem/PaginationItem.js +7 -7
- package/dist/components/Pagination/PaginationItem/index.js +1 -1
- package/dist/components/Pagination/index.js +1 -1
- package/dist/components/PasswordToggle/PasswordToggle.d.ts +1 -1
- package/dist/components/PasswordToggle/PasswordToggle.js +25 -40
- package/dist/components/PasswordToggle/index.js +1 -1
- package/dist/components/RadioInput/RadioInput.js +6 -8
- package/dist/components/RadioInput/index.js +1 -1
- package/dist/components/Row/Row.js +7 -9
- package/dist/components/Row/index.js +1 -1
- package/dist/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.js +38 -51
- package/dist/components/SearchAndFilter/FilterPanelSection/index.js +1 -1
- package/dist/components/SearchAndFilter/SearchAndFilter.js +75 -135
- package/dist/components/SearchAndFilter/index.js +1 -1
- package/dist/components/SearchAndFilter/utils.js +4 -8
- package/dist/components/SearchBox/SearchBox.js +25 -33
- package/dist/components/SearchBox/index.js +1 -1
- package/dist/components/Select/Select.js +38 -44
- package/dist/components/Select/index.js +1 -1
- package/dist/components/Slider/Slider.js +27 -35
- package/dist/components/Slider/index.js +1 -1
- package/dist/components/Spinner/Spinner.js +10 -15
- package/dist/components/Spinner/index.js +1 -1
- package/dist/components/StatusLabel/StatusLabel.js +11 -13
- package/dist/components/StatusLabel/index.js +4 -5
- package/dist/components/Strip/Strip.js +27 -34
- package/dist/components/Strip/index.js +1 -1
- package/dist/components/SummaryButton/SummaryButton.js +9 -8
- package/dist/components/SummaryButton/index.js +1 -1
- package/dist/components/Switch/Switch.js +7 -10
- package/dist/components/Switch/index.js +1 -1
- package/dist/components/Table/Table.js +9 -13
- package/dist/components/Table/index.js +1 -1
- package/dist/components/TableCell/TableCell.js +11 -17
- package/dist/components/TableCell/index.js +1 -1
- package/dist/components/TableHeader/TableHeader.js +7 -9
- package/dist/components/TableHeader/index.js +1 -1
- package/dist/components/TablePagination/TablePagination.d.ts +37 -0
- package/dist/components/TablePagination/TablePagination.js +125 -0
- package/dist/components/TablePagination/TablePagination.scss +40 -0
- package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.d.ts +16 -0
- package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.js +66 -0
- package/dist/components/TablePagination/TablePaginationControls/index.d.ts +2 -0
- package/dist/components/TablePagination/TablePaginationControls/index.js +13 -0
- package/dist/components/TablePagination/index.d.ts +2 -0
- package/dist/components/TablePagination/index.js +13 -0
- package/dist/components/TableRow/TableRow.js +6 -8
- package/dist/components/TableRow/index.js +1 -1
- package/dist/components/Tabs/Tabs.js +17 -17
- package/dist/components/Tabs/index.js +1 -1
- package/dist/components/Textarea/Textarea.js +51 -45
- package/dist/components/Textarea/index.js +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +5 -1
- package/dist/components/Tooltip/Tooltip.js +76 -79
- package/dist/components/Tooltip/index.js +4 -5
- package/dist/enums.js +2 -3
- package/dist/hooks/index.d.ts +1 -1
- package/dist/hooks/index.js +16 -10
- package/dist/hooks/useId.js +1 -3
- package/dist/hooks/useListener.d.ts +2 -1
- package/dist/hooks/useListener.js +25 -24
- package/dist/hooks/useOnClickOutside.d.ts +12 -0
- package/dist/hooks/useOnClickOutside.js +45 -0
- package/dist/hooks/useOnEscapePressed.d.ts +3 -1
- package/dist/hooks/useOnEscapePressed.js +13 -6
- package/dist/hooks/usePagination.js +17 -29
- package/dist/hooks/usePrevious.js +4 -4
- package/dist/hooks/useThrottle.js +16 -25
- package/dist/hooks/useWindowFitment.js +30 -28
- package/dist/index.d.ts +3 -1
- package/dist/index.js +86 -74
- package/dist/utils.js +6 -13
- package/package.json +42 -35
- package/dist/hooks/useClickOutside.d.ts +0 -6
- package/dist/hooks/useClickOutside.js +0 -32
|
@@ -8,27 +8,11 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _hooks = require("../../../hooks");
|
|
10
10
|
var _Button = _interopRequireDefault(require("../../Button"));
|
|
11
|
-
|
|
12
|
-
|
|
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); }
|
|
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; }
|
|
11
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
12
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
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); }
|
|
17
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
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."); }
|
|
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); }
|
|
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; } }
|
|
22
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
23
14
|
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); }
|
|
24
|
-
|
|
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; }
|
|
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; }
|
|
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; }
|
|
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); }
|
|
31
|
-
var Label = /*#__PURE__*/function (Label) {
|
|
15
|
+
let Label = exports.Label = /*#__PURE__*/function (Label) {
|
|
32
16
|
Label["Dropdown"] = "submenu";
|
|
33
17
|
return Label;
|
|
34
18
|
}({});
|
|
@@ -40,23 +24,24 @@ var Label = /*#__PURE__*/function (Label) {
|
|
|
40
24
|
* The props for the ContextualMenuDropdown component.
|
|
41
25
|
* @template L - The type of the link props.
|
|
42
26
|
*/
|
|
43
|
-
exports.Label = Label;
|
|
44
27
|
/**
|
|
45
28
|
* Calculate the styles for the menu.
|
|
46
29
|
* @param position - The menu position.
|
|
47
30
|
* @param positionCoords - The coordinates of the position node.
|
|
48
31
|
* @param constrainPanelWidth - Whether the menu width should be constrained to the position width.
|
|
49
32
|
*/
|
|
50
|
-
|
|
33
|
+
const getPositionStyle = (position, positionCoords, constrainPanelWidth) => {
|
|
51
34
|
if (!positionCoords) {
|
|
52
35
|
return null;
|
|
53
36
|
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
37
|
+
const {
|
|
38
|
+
height,
|
|
39
|
+
left,
|
|
40
|
+
top,
|
|
41
|
+
width
|
|
42
|
+
} = positionCoords;
|
|
43
|
+
const topPos = top + height + (window.scrollY || 0);
|
|
44
|
+
let leftPos = left;
|
|
60
45
|
switch (position) {
|
|
61
46
|
case "left":
|
|
62
47
|
leftPos = left;
|
|
@@ -70,13 +55,15 @@ var getPositionStyle = function getPositionStyle(position, positionCoords, const
|
|
|
70
55
|
default:
|
|
71
56
|
break;
|
|
72
57
|
}
|
|
73
|
-
return
|
|
58
|
+
return {
|
|
74
59
|
position: "absolute",
|
|
75
60
|
left: leftPos,
|
|
76
|
-
top: topPos
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
61
|
+
top: topPos,
|
|
62
|
+
// The width only needs to be set if the width is to be constrained.
|
|
63
|
+
...(constrainPanelWidth ? {
|
|
64
|
+
width
|
|
65
|
+
} : null)
|
|
66
|
+
};
|
|
80
67
|
};
|
|
81
68
|
|
|
82
69
|
/**
|
|
@@ -85,8 +72,8 @@ var getPositionStyle = function getPositionStyle(position, positionCoords, const
|
|
|
85
72
|
* @param fitsWindow - The window fitment info.
|
|
86
73
|
* @return The new position.
|
|
87
74
|
*/
|
|
88
|
-
|
|
89
|
-
|
|
75
|
+
const adjustForWindow = (position, fitsWindow) => {
|
|
76
|
+
let newPosition = position;
|
|
90
77
|
if (!fitsWindow.fromRight.fitsLeft && newPosition === "right") {
|
|
91
78
|
newPosition = "left";
|
|
92
79
|
}
|
|
@@ -114,57 +101,55 @@ var adjustForWindow = function adjustForWindow(position, fitsWindow) {
|
|
|
114
101
|
* @template L - The type of the link props.
|
|
115
102
|
* @param link - A button
|
|
116
103
|
* @param key - A key for the DOM.
|
|
117
|
-
* @param
|
|
104
|
+
* @param handleClose - The function to close the menu.
|
|
118
105
|
*/
|
|
119
106
|
exports.adjustForWindow = adjustForWindow;
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
107
|
+
const generateLink = (link, key, handleClose) => {
|
|
108
|
+
const {
|
|
109
|
+
children,
|
|
110
|
+
className,
|
|
111
|
+
onClick,
|
|
112
|
+
...props
|
|
113
|
+
} = link;
|
|
125
114
|
return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
|
|
126
115
|
className: (0, _classnames.default)("p-contextual-menu__link", className),
|
|
127
116
|
key: key,
|
|
128
|
-
onClick: onClick ?
|
|
129
|
-
|
|
117
|
+
onClick: onClick ? evt => {
|
|
118
|
+
handleClose(evt.nativeEvent);
|
|
130
119
|
onClick(evt);
|
|
131
120
|
} : null
|
|
132
121
|
}, props), children);
|
|
133
122
|
};
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
var _useState3 = (0, _react.useState)(),
|
|
157
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
158
|
-
maxHeight = _useState4[0],
|
|
159
|
-
setMaxHeight = _useState4[1];
|
|
123
|
+
const ContextualMenuDropdown = _ref => {
|
|
124
|
+
let {
|
|
125
|
+
adjustedPosition,
|
|
126
|
+
autoAdjust,
|
|
127
|
+
handleClose,
|
|
128
|
+
constrainPanelWidth,
|
|
129
|
+
dropdownClassName,
|
|
130
|
+
dropdownContent,
|
|
131
|
+
id,
|
|
132
|
+
isOpen,
|
|
133
|
+
links,
|
|
134
|
+
position,
|
|
135
|
+
positionCoords,
|
|
136
|
+
positionNode,
|
|
137
|
+
scrollOverflow,
|
|
138
|
+
setAdjustedPosition,
|
|
139
|
+
contextualMenuClassName,
|
|
140
|
+
...props
|
|
141
|
+
} = _ref;
|
|
142
|
+
const dropdown = (0, _react.useRef)();
|
|
143
|
+
const [positionStyle, setPositionStyle] = (0, _react.useState)(getPositionStyle(adjustedPosition, positionCoords, constrainPanelWidth));
|
|
144
|
+
const [maxHeight, setMaxHeight] = (0, _react.useState)();
|
|
160
145
|
|
|
161
146
|
// Update the styles to position the menu.
|
|
162
|
-
|
|
147
|
+
const updatePositionStyle = (0, _react.useCallback)(() => {
|
|
163
148
|
setPositionStyle(getPositionStyle(adjustedPosition, positionCoords, constrainPanelWidth));
|
|
164
149
|
}, [adjustedPosition, positionCoords, constrainPanelWidth]);
|
|
165
150
|
|
|
166
151
|
// Update the position when the window fitment info changes.
|
|
167
|
-
|
|
152
|
+
const onUpdateWindowFitment = (0, _react.useCallback)(fitsWindow => {
|
|
168
153
|
if (autoAdjust) {
|
|
169
154
|
setAdjustedPosition(adjustForWindow(position, fitsWindow));
|
|
170
155
|
}
|
|
@@ -177,43 +162,48 @@ var ContextualMenuDropdown = function ContextualMenuDropdown(_ref) {
|
|
|
177
162
|
(0, _hooks.useWindowFitment)(dropdown.current, positionNode, onUpdateWindowFitment, 0, isOpen && (autoAdjust || scrollOverflow));
|
|
178
163
|
|
|
179
164
|
// Update the styles when the position changes.
|
|
180
|
-
(0, _react.useEffect)(
|
|
165
|
+
(0, _react.useEffect)(() => {
|
|
181
166
|
updatePositionStyle();
|
|
182
167
|
}, [adjustedPosition, updatePositionStyle]);
|
|
183
|
-
return
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
"
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
168
|
+
return (
|
|
169
|
+
/*#__PURE__*/
|
|
170
|
+
// Vanilla Framework uses .p-contextual-menu parent modifier classnames to determine the correct position of the .p-contextual-menu__dropdown dropdown (left, center, right).
|
|
171
|
+
// Extra span wrapper is required as the dropdown is rendered in a portal.
|
|
172
|
+
_react.default.createElement("span", {
|
|
173
|
+
className: contextualMenuClassName,
|
|
174
|
+
style: positionStyle
|
|
175
|
+
}, /*#__PURE__*/_react.default.createElement("span", _extends({
|
|
176
|
+
className: (0, _classnames.default)("p-contextual-menu__dropdown", dropdownClassName),
|
|
177
|
+
id: id,
|
|
178
|
+
"aria-hidden": isOpen ? "false" : "true",
|
|
179
|
+
"aria-label": Label.Dropdown,
|
|
180
|
+
ref: dropdown,
|
|
181
|
+
style: {
|
|
182
|
+
...(constrainPanelWidth && positionStyle !== null && positionStyle !== void 0 && positionStyle.width ? {
|
|
183
|
+
width: positionStyle.width,
|
|
184
|
+
minWidth: 0,
|
|
185
|
+
maxWidth: "none"
|
|
186
|
+
} : {}),
|
|
187
|
+
...(scrollOverflow ? {
|
|
188
|
+
maxHeight,
|
|
189
|
+
minHeight: "2rem",
|
|
190
|
+
overflowX: "auto"
|
|
191
|
+
} : {})
|
|
192
|
+
}
|
|
193
|
+
}, props), dropdownContent ? typeof dropdownContent === "function" ? dropdownContent(handleClose) : dropdownContent : links.map((item, i) => {
|
|
194
|
+
if (Array.isArray(item)) {
|
|
195
|
+
return /*#__PURE__*/_react.default.createElement("span", {
|
|
196
|
+
className: "p-contextual-menu__group",
|
|
197
|
+
key: i
|
|
198
|
+
}, item.map((link, j) => generateLink(link, j, handleClose)));
|
|
199
|
+
} else if (typeof item === "string") {
|
|
200
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
201
|
+
className: "p-contextual-menu__non-interactive",
|
|
202
|
+
key: i
|
|
203
|
+
}, item);
|
|
204
|
+
}
|
|
205
|
+
return generateLink(item, i, handleClose);
|
|
206
|
+
})))
|
|
207
|
+
);
|
|
217
208
|
};
|
|
218
|
-
var _default = ContextualMenuDropdown;
|
|
219
|
-
exports.default = _default;
|
|
209
|
+
var _default = exports.default = ContextualMenuDropdown;
|
|
@@ -5,17 +5,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = exports.EmptyState = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _excluded = ["children", "className", "image", "title"];
|
|
9
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
9
|
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); }
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
10
|
+
const EmptyState = _ref => {
|
|
11
|
+
let {
|
|
12
|
+
children,
|
|
13
|
+
className,
|
|
14
|
+
image,
|
|
15
|
+
title,
|
|
16
|
+
...props
|
|
17
|
+
} = _ref;
|
|
19
18
|
return /*#__PURE__*/_react.default.createElement("div", _extends({
|
|
20
19
|
className: className
|
|
21
20
|
}, props), image, /*#__PURE__*/_react.default.createElement("h2", {
|
|
@@ -23,5 +22,4 @@ var EmptyState = function EmptyState(_ref) {
|
|
|
23
22
|
}, title), children);
|
|
24
23
|
};
|
|
25
24
|
exports.EmptyState = EmptyState;
|
|
26
|
-
var _default = EmptyState;
|
|
27
|
-
exports.default = _default;
|
|
25
|
+
var _default = exports.default = EmptyState;
|
|
@@ -8,20 +8,19 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _Label = _interopRequireDefault(require("../Label"));
|
|
10
10
|
var _Col = _interopRequireDefault(require("../Col"));
|
|
11
|
-
var _excluded = ["caution", "children", "className", "error", "forId", "help", "helpClassName", "helpId", "isSelect", "isTickElement", "label", "labelClassName", "labelFirst", "required", "stacked", "success", "validationId"];
|
|
12
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
12
|
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); }
|
|
14
|
-
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; }
|
|
15
|
-
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; }
|
|
16
13
|
/**
|
|
17
14
|
* The props for the Field component.
|
|
18
15
|
*/
|
|
19
16
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
17
|
+
const generateHelpText = _ref => {
|
|
18
|
+
let {
|
|
19
|
+
help,
|
|
20
|
+
helpId,
|
|
21
|
+
helpClassName,
|
|
22
|
+
isTickElement
|
|
23
|
+
} = _ref;
|
|
25
24
|
return help ? /*#__PURE__*/_react.default.createElement("p", {
|
|
26
25
|
className: (0, _classnames.default)("p-form-help-text", helpClassName, {
|
|
27
26
|
"is-tick-element": isTickElement
|
|
@@ -29,21 +28,21 @@ var generateHelpText = function generateHelpText(_ref) {
|
|
|
29
28
|
id: helpId
|
|
30
29
|
}, help) : null;
|
|
31
30
|
};
|
|
32
|
-
|
|
31
|
+
const generateError = (error, caution, success, validationId) => {
|
|
33
32
|
if (!error && !caution && !success) {
|
|
34
33
|
return null;
|
|
35
34
|
}
|
|
36
|
-
|
|
35
|
+
const messageType = error && "Error" || caution && "Caution" || success && "Success";
|
|
37
36
|
return /*#__PURE__*/_react.default.createElement("p", {
|
|
38
37
|
className: "p-form-validation__message",
|
|
39
38
|
id: validationId
|
|
40
39
|
}, /*#__PURE__*/_react.default.createElement("strong", null, messageType, ":"), " ", error || caution || success);
|
|
41
40
|
};
|
|
42
|
-
|
|
41
|
+
const generateLabel = (forId, required, label, labelClassName, stacked) => {
|
|
43
42
|
if (!label) {
|
|
44
43
|
return null;
|
|
45
44
|
}
|
|
46
|
-
|
|
45
|
+
const labelNode = /*#__PURE__*/_react.default.createElement(_Label.default, {
|
|
47
46
|
className: labelClassName,
|
|
48
47
|
forId: forId,
|
|
49
48
|
required: required
|
|
@@ -55,64 +54,67 @@ var generateLabel = function generateLabel(forId, required, label, labelClassNam
|
|
|
55
54
|
}
|
|
56
55
|
return labelNode;
|
|
57
56
|
};
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
57
|
+
const generateContent = _ref2 => {
|
|
58
|
+
let {
|
|
59
|
+
isSelect,
|
|
60
|
+
children,
|
|
61
|
+
labelFirst,
|
|
62
|
+
labelNode,
|
|
63
|
+
help,
|
|
64
|
+
helpClassName,
|
|
65
|
+
error,
|
|
66
|
+
caution,
|
|
67
|
+
success,
|
|
68
|
+
validationId,
|
|
69
|
+
helpId,
|
|
70
|
+
isTickElement
|
|
71
|
+
} = _ref2;
|
|
71
72
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
72
73
|
className: "p-form__control u-clearfix"
|
|
73
74
|
}, isSelect ? /*#__PURE__*/_react.default.createElement("div", {
|
|
74
75
|
className: "p-form-validation__select-wrapper"
|
|
75
76
|
}, children) : children, !labelFirst && labelNode, generateHelpText({
|
|
76
|
-
helpId
|
|
77
|
-
help
|
|
78
|
-
helpClassName
|
|
79
|
-
isTickElement
|
|
77
|
+
helpId,
|
|
78
|
+
help,
|
|
79
|
+
helpClassName,
|
|
80
|
+
isTickElement
|
|
80
81
|
}), generateError(error, caution, success, validationId));
|
|
81
82
|
};
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
labelFirst =
|
|
97
|
-
required
|
|
98
|
-
stacked
|
|
99
|
-
success
|
|
100
|
-
validationId
|
|
101
|
-
props
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
83
|
+
const Field = _ref3 => {
|
|
84
|
+
let {
|
|
85
|
+
caution,
|
|
86
|
+
children,
|
|
87
|
+
className,
|
|
88
|
+
error,
|
|
89
|
+
forId,
|
|
90
|
+
help,
|
|
91
|
+
helpClassName,
|
|
92
|
+
helpId,
|
|
93
|
+
isSelect,
|
|
94
|
+
isTickElement,
|
|
95
|
+
label,
|
|
96
|
+
labelClassName,
|
|
97
|
+
labelFirst = true,
|
|
98
|
+
required,
|
|
99
|
+
stacked,
|
|
100
|
+
success,
|
|
101
|
+
validationId,
|
|
102
|
+
...props
|
|
103
|
+
} = _ref3;
|
|
104
|
+
const labelNode = generateLabel(forId, required, label, labelClassName, stacked);
|
|
105
|
+
const content = generateContent({
|
|
106
|
+
isSelect,
|
|
107
|
+
isTickElement,
|
|
108
|
+
children,
|
|
109
|
+
labelFirst,
|
|
110
|
+
labelNode,
|
|
111
|
+
help,
|
|
112
|
+
helpClassName,
|
|
113
|
+
error,
|
|
114
|
+
caution,
|
|
115
|
+
success,
|
|
116
|
+
validationId,
|
|
117
|
+
helpId
|
|
116
118
|
});
|
|
117
119
|
return /*#__PURE__*/_react.default.createElement("div", _extends({
|
|
118
120
|
className: (0, _classnames.default)("p-form__group", "p-form-validation", className, {
|
|
@@ -125,5 +127,4 @@ var Field = function Field(_ref3) {
|
|
|
125
127
|
size: 8
|
|
126
128
|
}, content) : content);
|
|
127
129
|
};
|
|
128
|
-
var _default = Field;
|
|
129
|
-
exports.default = _default;
|
|
130
|
+
var _default = exports.default = Field;
|
|
@@ -6,17 +6,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var _excluded = ["children", "className", "inline", "stacked"];
|
|
10
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
10
|
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); }
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
11
|
+
const Form = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
children,
|
|
14
|
+
className,
|
|
15
|
+
inline,
|
|
16
|
+
stacked,
|
|
17
|
+
...props
|
|
18
|
+
} = _ref;
|
|
20
19
|
return /*#__PURE__*/_react.default.createElement("form", _extends({
|
|
21
20
|
className: (0, _classnames.default)(className, {
|
|
22
21
|
"p-form": inline || stacked,
|
|
@@ -25,5 +24,4 @@ var Form = function Form(_ref) {
|
|
|
25
24
|
})
|
|
26
25
|
}, props), children);
|
|
27
26
|
};
|
|
28
|
-
var _default = Form;
|
|
29
|
-
exports.default = _default;
|
|
27
|
+
var _default = exports.default = Form;
|
|
@@ -6,12 +6,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = exports.ICONS = void 0;
|
|
7
7
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var _excluded = ["className", "light", "name"];
|
|
10
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
10
|
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); }
|
|
12
|
-
|
|
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; }
|
|
14
|
-
var ICONS = {
|
|
11
|
+
const ICONS = exports.ICONS = {
|
|
15
12
|
anchor: "anchor",
|
|
16
13
|
chevronDown: "chevron-down",
|
|
17
14
|
chevronUp: "chevron-up",
|
|
@@ -44,23 +41,23 @@ var ICONS = {
|
|
|
44
41
|
rss: "rss",
|
|
45
42
|
email: "email"
|
|
46
43
|
};
|
|
47
|
-
exports.ICONS = ICONS;
|
|
48
44
|
/**
|
|
49
45
|
* Icon
|
|
50
46
|
*
|
|
51
47
|
* @param name One of built-in Vanilla icons or a name of a custom icon that follows `p-icon--{name}` convention.
|
|
52
48
|
* @returns Icon
|
|
53
49
|
*/
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
50
|
+
const Icon = _ref => {
|
|
51
|
+
let {
|
|
52
|
+
className,
|
|
53
|
+
light,
|
|
54
|
+
name,
|
|
55
|
+
...props
|
|
56
|
+
} = _ref;
|
|
59
57
|
return /*#__PURE__*/_react.default.createElement("i", _extends({
|
|
60
58
|
className: (0, _classnames.default)(className, "p-icon--".concat(name), {
|
|
61
59
|
"is-light": light
|
|
62
60
|
})
|
|
63
61
|
}, props));
|
|
64
62
|
};
|
|
65
|
-
var _default = Icon;
|
|
66
|
-
exports.default = _default;
|
|
63
|
+
var _default = exports.default = Icon;
|