@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.
Files changed (152) hide show
  1. package/dist/__mocks__/nanoid.js +3 -3
  2. package/dist/components/Accordion/Accordion.js +28 -41
  3. package/dist/components/Accordion/AccordionSection/AccordionSection.js +18 -18
  4. package/dist/components/Accordion/AccordionSection/index.js +1 -1
  5. package/dist/components/Accordion/index.js +1 -1
  6. package/dist/components/ActionButton/ActionButton.js +34 -66
  7. package/dist/components/ActionButton/index.js +1 -1
  8. package/dist/components/ArticlePagination/ArticlePagination.js +10 -12
  9. package/dist/components/ArticlePagination/index.js +1 -1
  10. package/dist/components/Badge/Badge.js +24 -29
  11. package/dist/components/Badge/index.js +1 -1
  12. package/dist/components/Button/Button.js +21 -26
  13. package/dist/components/Button/index.js +4 -5
  14. package/dist/components/Card/Card.js +12 -14
  15. package/dist/components/Card/index.js +1 -1
  16. package/dist/components/CheckboxInput/CheckableInput/CheckableInput.js +15 -19
  17. package/dist/components/CheckboxInput/CheckableInput/index.js +1 -1
  18. package/dist/components/CheckboxInput/CheckboxInput.js +7 -10
  19. package/dist/components/CheckboxInput/index.js +1 -1
  20. package/dist/components/Chip/Chip.js +23 -33
  21. package/dist/components/Chip/index.js +1 -1
  22. package/dist/components/Code/Code.js +14 -17
  23. package/dist/components/Code/index.js +1 -1
  24. package/dist/components/CodeSnippet/CodeSnippet.js +9 -14
  25. package/dist/components/CodeSnippet/CodeSnippetBlock.js +24 -29
  26. package/dist/components/CodeSnippet/CodeSnippetDropdown.js +11 -11
  27. package/dist/components/CodeSnippet/index.js +2 -2
  28. package/dist/components/Col/Col.js +24 -26
  29. package/dist/components/Col/index.js +4 -5
  30. package/dist/components/ConfirmationButton/ConfirmationButton.js +18 -21
  31. package/dist/components/ConfirmationButton/index.js +1 -1
  32. package/dist/components/ConfirmationModal/ConfirmationModal.js +11 -15
  33. package/dist/components/ConfirmationModal/index.js +1 -1
  34. package/dist/components/ContextualMenu/ContextualMenu.js +89 -107
  35. package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.d.ts +4 -4
  36. package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js +97 -107
  37. package/dist/components/ContextualMenu/ContextualMenuDropdown/index.js +1 -1
  38. package/dist/components/ContextualMenu/index.js +1 -1
  39. package/dist/components/EmptyState/EmptyState.js +9 -11
  40. package/dist/components/EmptyState/index.js +1 -1
  41. package/dist/components/Field/Field.js +66 -65
  42. package/dist/components/Field/index.js +1 -1
  43. package/dist/components/Form/Form.js +9 -11
  44. package/dist/components/Form/index.js +1 -1
  45. package/dist/components/Icon/Icon.js +9 -12
  46. package/dist/components/Icon/index.js +4 -5
  47. package/dist/components/Input/Input.js +38 -45
  48. package/dist/components/Input/index.js +1 -1
  49. package/dist/components/Label/Label.js +9 -11
  50. package/dist/components/Label/index.js +1 -1
  51. package/dist/components/Link/Link.js +12 -18
  52. package/dist/components/Link/index.js +1 -1
  53. package/dist/components/List/List.js +50 -54
  54. package/dist/components/List/index.js +1 -1
  55. package/dist/components/Loader/Loader.js +2 -3
  56. package/dist/components/Loader/index.js +1 -1
  57. package/dist/components/MainTable/MainTable.js +87 -104
  58. package/dist/components/MainTable/index.js +1 -1
  59. package/dist/components/Modal/Modal.js +37 -38
  60. package/dist/components/Modal/index.js +1 -1
  61. package/dist/components/ModularTable/ModularTable.js +63 -77
  62. package/dist/components/ModularTable/index.js +1 -1
  63. package/dist/components/Navigation/Navigation.js +63 -97
  64. package/dist/components/Navigation/NavigationLink/NavigationLink.js +32 -35
  65. package/dist/components/Navigation/NavigationLink/index.js +1 -1
  66. package/dist/components/Navigation/NavigationMenu/NavigationMenu.js +26 -45
  67. package/dist/components/Navigation/NavigationMenu/index.js +1 -1
  68. package/dist/components/Navigation/index.js +1 -1
  69. package/dist/components/Notification/Notification.js +49 -59
  70. package/dist/components/Notification/index.js +4 -5
  71. package/dist/components/NotificationProvider/NotificationProvider.js +47 -68
  72. package/dist/components/NotificationProvider/index.js +7 -7
  73. package/dist/components/NotificationProvider/messageBuilder.js +9 -9
  74. package/dist/components/NotificationProvider/types.d.ts +1 -0
  75. package/dist/components/Pagination/Pagination.js +50 -69
  76. package/dist/components/Pagination/PaginationButton/PaginationButton.js +11 -12
  77. package/dist/components/Pagination/PaginationButton/index.js +1 -1
  78. package/dist/components/Pagination/PaginationItem/PaginationItem.js +7 -7
  79. package/dist/components/Pagination/PaginationItem/index.js +1 -1
  80. package/dist/components/Pagination/index.js +1 -1
  81. package/dist/components/PasswordToggle/PasswordToggle.d.ts +1 -1
  82. package/dist/components/PasswordToggle/PasswordToggle.js +25 -40
  83. package/dist/components/PasswordToggle/index.js +1 -1
  84. package/dist/components/RadioInput/RadioInput.js +6 -8
  85. package/dist/components/RadioInput/index.js +1 -1
  86. package/dist/components/Row/Row.js +7 -9
  87. package/dist/components/Row/index.js +1 -1
  88. package/dist/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.js +38 -51
  89. package/dist/components/SearchAndFilter/FilterPanelSection/index.js +1 -1
  90. package/dist/components/SearchAndFilter/SearchAndFilter.js +75 -135
  91. package/dist/components/SearchAndFilter/index.js +1 -1
  92. package/dist/components/SearchAndFilter/utils.js +4 -8
  93. package/dist/components/SearchBox/SearchBox.js +25 -33
  94. package/dist/components/SearchBox/index.js +1 -1
  95. package/dist/components/Select/Select.js +38 -44
  96. package/dist/components/Select/index.js +1 -1
  97. package/dist/components/Slider/Slider.js +27 -35
  98. package/dist/components/Slider/index.js +1 -1
  99. package/dist/components/Spinner/Spinner.js +10 -15
  100. package/dist/components/Spinner/index.js +1 -1
  101. package/dist/components/StatusLabel/StatusLabel.js +11 -13
  102. package/dist/components/StatusLabel/index.js +4 -5
  103. package/dist/components/Strip/Strip.js +27 -34
  104. package/dist/components/Strip/index.js +1 -1
  105. package/dist/components/SummaryButton/SummaryButton.js +9 -8
  106. package/dist/components/SummaryButton/index.js +1 -1
  107. package/dist/components/Switch/Switch.js +7 -10
  108. package/dist/components/Switch/index.js +1 -1
  109. package/dist/components/Table/Table.js +9 -13
  110. package/dist/components/Table/index.js +1 -1
  111. package/dist/components/TableCell/TableCell.js +11 -17
  112. package/dist/components/TableCell/index.js +1 -1
  113. package/dist/components/TableHeader/TableHeader.js +7 -9
  114. package/dist/components/TableHeader/index.js +1 -1
  115. package/dist/components/TablePagination/TablePagination.d.ts +37 -0
  116. package/dist/components/TablePagination/TablePagination.js +125 -0
  117. package/dist/components/TablePagination/TablePagination.scss +40 -0
  118. package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.d.ts +16 -0
  119. package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.js +66 -0
  120. package/dist/components/TablePagination/TablePaginationControls/index.d.ts +2 -0
  121. package/dist/components/TablePagination/TablePaginationControls/index.js +13 -0
  122. package/dist/components/TablePagination/index.d.ts +2 -0
  123. package/dist/components/TablePagination/index.js +13 -0
  124. package/dist/components/TableRow/TableRow.js +6 -8
  125. package/dist/components/TableRow/index.js +1 -1
  126. package/dist/components/Tabs/Tabs.js +17 -17
  127. package/dist/components/Tabs/index.js +1 -1
  128. package/dist/components/Textarea/Textarea.js +51 -45
  129. package/dist/components/Textarea/index.js +1 -1
  130. package/dist/components/Tooltip/Tooltip.d.ts +5 -1
  131. package/dist/components/Tooltip/Tooltip.js +76 -79
  132. package/dist/components/Tooltip/index.js +4 -5
  133. package/dist/enums.js +2 -3
  134. package/dist/hooks/index.d.ts +1 -1
  135. package/dist/hooks/index.js +16 -10
  136. package/dist/hooks/useId.js +1 -3
  137. package/dist/hooks/useListener.d.ts +2 -1
  138. package/dist/hooks/useListener.js +25 -24
  139. package/dist/hooks/useOnClickOutside.d.ts +12 -0
  140. package/dist/hooks/useOnClickOutside.js +45 -0
  141. package/dist/hooks/useOnEscapePressed.d.ts +3 -1
  142. package/dist/hooks/useOnEscapePressed.js +13 -6
  143. package/dist/hooks/usePagination.js +17 -29
  144. package/dist/hooks/usePrevious.js +4 -4
  145. package/dist/hooks/useThrottle.js +16 -25
  146. package/dist/hooks/useWindowFitment.js +30 -28
  147. package/dist/index.d.ts +3 -1
  148. package/dist/index.js +86 -74
  149. package/dist/utils.js +6 -13
  150. package/package.json +42 -35
  151. package/dist/hooks/useClickOutside.d.ts +0 -6
  152. 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
- var _excluded = ["children", "className", "onClick"],
12
- _excluded2 = ["adjustedPosition", "autoAdjust", "closePortal", "constrainPanelWidth", "dropdownClassName", "dropdownContent", "id", "isOpen", "links", "position", "positionCoords", "positionNode", "scrollOverflow", "setAdjustedPosition", "wrapperClass"];
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
- 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; }
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
- var getPositionStyle = function getPositionStyle(position, positionCoords, constrainPanelWidth) {
33
+ const getPositionStyle = (position, positionCoords, constrainPanelWidth) => {
51
34
  if (!positionCoords) {
52
35
  return null;
53
36
  }
54
- var height = positionCoords.height,
55
- left = positionCoords.left,
56
- top = positionCoords.top,
57
- width = positionCoords.width;
58
- var topPos = top + height + (window.scrollY || 0);
59
- var leftPos = left;
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 _objectSpread({
58
+ return {
74
59
  position: "absolute",
75
60
  left: leftPos,
76
- top: topPos
77
- }, constrainPanelWidth ? {
78
- width: width
79
- } : null);
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
- var adjustForWindow = function adjustForWindow(position, fitsWindow) {
89
- var newPosition = position;
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 closePortal - The function to close the portal.
104
+ * @param handleClose - The function to close the menu.
118
105
  */
119
106
  exports.adjustForWindow = adjustForWindow;
120
- var generateLink = function generateLink(link, key, closePortal) {
121
- var children = link.children,
122
- className = link.className,
123
- onClick = link.onClick,
124
- props = _objectWithoutProperties(link, _excluded);
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 ? function (evt) {
129
- closePortal(evt.nativeEvent);
117
+ onClick: onClick ? evt => {
118
+ handleClose(evt.nativeEvent);
130
119
  onClick(evt);
131
120
  } : null
132
121
  }, props), children);
133
122
  };
134
- var ContextualMenuDropdown = function ContextualMenuDropdown(_ref) {
135
- var adjustedPosition = _ref.adjustedPosition,
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
- scrollOverflow = _ref.scrollOverflow,
148
- setAdjustedPosition = _ref.setAdjustedPosition,
149
- wrapperClass = _ref.wrapperClass,
150
- props = _objectWithoutProperties(_ref, _excluded2);
151
- var dropdown = (0, _react.useRef)();
152
- var _useState = (0, _react.useState)(getPositionStyle(adjustedPosition, positionCoords, constrainPanelWidth)),
153
- _useState2 = _slicedToArray(_useState, 2),
154
- positionStyle = _useState2[0],
155
- setPositionStyle = _useState2[1];
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
- var updatePositionStyle = (0, _react.useCallback)(function () {
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
- var onUpdateWindowFitment = (0, _react.useCallback)(function (fitsWindow) {
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)(function () {
165
+ (0, _react.useEffect)(() => {
181
166
  updatePositionStyle();
182
167
  }, [adjustedPosition, updatePositionStyle]);
183
- return /*#__PURE__*/_react.default.createElement("span", _extends({
184
- className: wrapperClass,
185
- style: positionStyle
186
- }, props), /*#__PURE__*/_react.default.createElement("span", {
187
- className: (0, _classnames.default)("p-contextual-menu__dropdown", dropdownClassName),
188
- id: id,
189
- "aria-hidden": isOpen ? "false" : "true",
190
- "aria-label": Label.Dropdown,
191
- ref: dropdown,
192
- style: _objectSpread(_objectSpread({}, constrainPanelWidth && positionStyle !== null && positionStyle !== void 0 && positionStyle.width ? {
193
- width: positionStyle.width,
194
- minWidth: 0,
195
- maxWidth: "none"
196
- } : {}), scrollOverflow ? {
197
- maxHeight: maxHeight,
198
- minHeight: "2rem",
199
- overflowX: "auto"
200
- } : {})
201
- }, dropdownContent ? typeof dropdownContent === "function" ? dropdownContent(closePortal) : dropdownContent : links.map(function (item, i) {
202
- if (Array.isArray(item)) {
203
- return /*#__PURE__*/_react.default.createElement("span", {
204
- className: "p-contextual-menu__group",
205
- key: i
206
- }, item.map(function (link, j) {
207
- return generateLink(link, j, closePortal);
208
- }));
209
- } else if (typeof item === "string") {
210
- return /*#__PURE__*/_react.default.createElement("div", {
211
- className: "p-contextual-menu__non-interactive",
212
- key: i
213
- }, item);
214
- }
215
- return generateLink(item, i, closePortal);
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,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  Object.defineProperty(exports, "default", {
7
7
  enumerable: true,
8
- get: function get() {
8
+ get: function () {
9
9
  return _ContextualMenuDropdown.default;
10
10
  }
11
11
  });
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  Object.defineProperty(exports, "default", {
7
7
  enumerable: true,
8
- get: function get() {
8
+ get: function () {
9
9
  return _ContextualMenu.default;
10
10
  }
11
11
  });
@@ -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
- 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; }
12
- 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; }
13
- var EmptyState = function EmptyState(_ref) {
14
- var children = _ref.children,
15
- className = _ref.className,
16
- image = _ref.image,
17
- title = _ref.title,
18
- props = _objectWithoutProperties(_ref, _excluded);
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;
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  Object.defineProperty(exports, "default", {
7
7
  enumerable: true,
8
- get: function get() {
8
+ get: function () {
9
9
  return _EmptyState.default;
10
10
  }
11
11
  });
@@ -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
- var generateHelpText = function generateHelpText(_ref) {
21
- var help = _ref.help,
22
- helpId = _ref.helpId,
23
- helpClassName = _ref.helpClassName,
24
- isTickElement = _ref.isTickElement;
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
- var generateError = function generateError(error, caution, success, validationId) {
31
+ const generateError = (error, caution, success, validationId) => {
33
32
  if (!error && !caution && !success) {
34
33
  return null;
35
34
  }
36
- var messageType = error && "Error" || caution && "Caution" || success && "Success";
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
- var generateLabel = function generateLabel(forId, required, label, labelClassName, stacked) {
41
+ const generateLabel = (forId, required, label, labelClassName, stacked) => {
43
42
  if (!label) {
44
43
  return null;
45
44
  }
46
- var labelNode = /*#__PURE__*/_react.default.createElement(_Label.default, {
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
- var generateContent = function generateContent(_ref2) {
59
- var isSelect = _ref2.isSelect,
60
- children = _ref2.children,
61
- labelFirst = _ref2.labelFirst,
62
- labelNode = _ref2.labelNode,
63
- help = _ref2.help,
64
- helpClassName = _ref2.helpClassName,
65
- error = _ref2.error,
66
- caution = _ref2.caution,
67
- success = _ref2.success,
68
- validationId = _ref2.validationId,
69
- helpId = _ref2.helpId,
70
- isTickElement = _ref2.isTickElement;
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: helpId,
77
- help: help,
78
- helpClassName: helpClassName,
79
- isTickElement: isTickElement
77
+ helpId,
78
+ help,
79
+ helpClassName,
80
+ isTickElement
80
81
  }), generateError(error, caution, success, validationId));
81
82
  };
82
- var Field = function Field(_ref3) {
83
- var caution = _ref3.caution,
84
- children = _ref3.children,
85
- className = _ref3.className,
86
- error = _ref3.error,
87
- forId = _ref3.forId,
88
- help = _ref3.help,
89
- helpClassName = _ref3.helpClassName,
90
- helpId = _ref3.helpId,
91
- isSelect = _ref3.isSelect,
92
- isTickElement = _ref3.isTickElement,
93
- label = _ref3.label,
94
- labelClassName = _ref3.labelClassName,
95
- _ref3$labelFirst = _ref3.labelFirst,
96
- labelFirst = _ref3$labelFirst === void 0 ? true : _ref3$labelFirst,
97
- required = _ref3.required,
98
- stacked = _ref3.stacked,
99
- success = _ref3.success,
100
- validationId = _ref3.validationId,
101
- props = _objectWithoutProperties(_ref3, _excluded);
102
- var labelNode = generateLabel(forId, required, label, labelClassName, stacked);
103
- var content = generateContent({
104
- isSelect: isSelect,
105
- isTickElement: isTickElement,
106
- children: children,
107
- labelFirst: labelFirst,
108
- labelNode: labelNode,
109
- help: help,
110
- helpClassName: helpClassName,
111
- error: error,
112
- caution: caution,
113
- success: success,
114
- validationId: validationId,
115
- helpId: helpId
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;
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  Object.defineProperty(exports, "default", {
7
7
  enumerable: true,
8
- get: function get() {
8
+ get: function () {
9
9
  return _Field.default;
10
10
  }
11
11
  });
@@ -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
- 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; }
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 Form = function Form(_ref) {
15
- var children = _ref.children,
16
- className = _ref.className,
17
- inline = _ref.inline,
18
- stacked = _ref.stacked,
19
- props = _objectWithoutProperties(_ref, _excluded);
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;
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  Object.defineProperty(exports, "default", {
7
7
  enumerable: true,
8
- get: function get() {
8
+ get: function () {
9
9
  return _Form.default;
10
10
  }
11
11
  });
@@ -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
- 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; }
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
- var Icon = function Icon(_ref) {
55
- var className = _ref.className,
56
- light = _ref.light,
57
- name = _ref.name,
58
- props = _objectWithoutProperties(_ref, _excluded);
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;