@canonical/react-components 0.47.1 → 0.47.2

package/dist/components/Col/index.js

@@ -1,21 +1,20 @@
 "use strict";
 
-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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "colSizes", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Col.colSizes;
   }
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Col.default;
   }
 });
 var _Col = _interopRequireWildcard(require("./Col"));
-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); }
-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; }
+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); }
+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; }

package/dist/components/ConfirmationButton/ConfirmationButton.js

@@ -8,35 +8,33 @@ var _react = _interopRequireDefault(require("react"));
 var _ActionButton = _interopRequireDefault(require("../ActionButton"));
 var _ConfirmationModal = _interopRequireDefault(require("../ConfirmationModal"));
 var _reactUseportal = _interopRequireDefault(require("react-useportal"));
-var _excluded = ["confirmationModalProps", "onHoverText", "shiftClickEnabled", "showShiftClickHint"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
-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; }
-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; }
-var ConfirmationButton = function ConfirmationButton(_ref) {
-  var confirmationModalProps = _ref.confirmationModalProps,
-    onHoverText = _ref.onHoverText,
-    _ref$shiftClickEnable = _ref.shiftClickEnabled,
-    shiftClickEnabled = _ref$shiftClickEnable === void 0 ? false : _ref$shiftClickEnable,
-    _ref$showShiftClickHi = _ref.showShiftClickHint,
-    showShiftClickHint = _ref$showShiftClickHi === void 0 ? false : _ref$showShiftClickHi,
-    actionButtonProps = _objectWithoutProperties(_ref, _excluded);
-  var _usePortal = (0, _reactUseportal.default)(),
-    openPortal = _usePortal.openPortal,
-    closePortal = _usePortal.closePortal,
-    isOpen = _usePortal.isOpen,
-    Portal = _usePortal.Portal;
-  var handleCancelModal = function handleCancelModal() {
+const ConfirmationButton = _ref => {
+  let {
+    confirmationModalProps,
+    onHoverText,
+    shiftClickEnabled = false,
+    showShiftClickHint = false,
+    ...actionButtonProps
+  } = _ref;
+  const {
+    openPortal,
+    closePortal,
+    isOpen,
+    Portal
+  } = (0, _reactUseportal.default)();
+  const handleCancelModal = () => {
     closePortal();
     if (confirmationModalProps.close) {
       confirmationModalProps.close();
     }
   };
-  var handleConfirmModal = function handleConfirmModal(e) {
+  const handleConfirmModal = e => {
     closePortal();
     confirmationModalProps.onConfirm(e);
   };
-  var handleShiftClick = function handleShiftClick(e) {
+  const handleShiftClick = e => {
     if (e.shiftKey) {
       confirmationModalProps.onConfirm(e);
     } else {
@@ -55,5 +53,4 @@ var ConfirmationButton = function ConfirmationButton(_ref) {
   }), actionButtonProps.children));
 };
 exports.ConfirmationButton = ConfirmationButton;
-var _default = ConfirmationButton;
-exports.default = _default;
+var _default = exports.default = ConfirmationButton;

package/dist/components/ConfirmationButton/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _ConfirmationButton.default;
   }
 });

package/dist/components/ConfirmationModal/ConfirmationModal.js

@@ -7,21 +7,18 @@ exports.default = exports.ConfirmationModal = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _Modal = _interopRequireDefault(require("../Modal"));
-var _excluded = ["cancelButtonLabel", "children", "confirmButtonAppearance", "confirmButtonLabel", "confirmExtra", "onConfirm"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
-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; }
-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; }
-var ConfirmationModal = function ConfirmationModal(_ref) {
-  var _ref$cancelButtonLabe = _ref.cancelButtonLabel,
-    cancelButtonLabel = _ref$cancelButtonLabe === void 0 ? "Cancel" : _ref$cancelButtonLabe,
-    children = _ref.children,
-    _ref$confirmButtonApp = _ref.confirmButtonAppearance,
-    confirmButtonAppearance = _ref$confirmButtonApp === void 0 ? "negative" : _ref$confirmButtonApp,
-    confirmButtonLabel = _ref.confirmButtonLabel,
-    confirmExtra = _ref.confirmExtra,
-    onConfirm = _ref.onConfirm,
-    props = _objectWithoutProperties(_ref, _excluded);
+const ConfirmationModal = _ref => {
+  let {
+    cancelButtonLabel = "Cancel",
+    children,
+    confirmButtonAppearance = "negative",
+    confirmButtonLabel,
+    confirmExtra,
+    onConfirm,
+    ...props
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
     buttonRow: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, confirmExtra, /*#__PURE__*/_react.default.createElement(_Button.default, {
       className: "u-no-margin--bottom",
@@ -34,5 +31,4 @@ var ConfirmationModal = function ConfirmationModal(_ref) {
   }, props), children);
 };
 exports.ConfirmationModal = ConfirmationModal;
-var _default = ConfirmationModal;
-exports.default = _default;
+var _default = exports.default = ConfirmationModal;

package/dist/components/ConfirmationModal/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _ConfirmationModal.default;
   }
 });

package/dist/components/ContextualMenu/ContextualMenu.js

@@ -1,6 +1,5 @@
 "use strict";
 
-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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,23 +11,11 @@ var _hooks = require("../../hooks");
 var _Button = _interopRequireDefault(require("../Button"));
 var _ContextualMenuDropdown = _interopRequireDefault(require("./ContextualMenuDropdown"));
 var _useId = require("../../hooks/useId");
-var _excluded = ["autoAdjust", "children", "className", "closeOnEsc", "closeOnOutsideClick", "constrainPanelWidth", "dropdownClassName", "dropdownProps", "hasToggleIcon", "links", "onToggleMenu", "position", "positionNode", "scrollOverflow", "toggleAppearance", "toggleClassName", "toggleDisabled", "toggleLabel", "toggleLabelFirst", "toggleProps", "visible"];
-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); }
-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; }
+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); }
+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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
-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; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-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); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-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."); }
-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); }
-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; }
-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; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-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; }
-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; }
-var Label = /*#__PURE__*/function (Label) {
+let Label = exports.Label = /*#__PURE__*/function (Label) {
   Label["Toggle"] = "Toggle menu";
   return Label;
 }({});
@@ -36,19 +23,18 @@ var Label = /*#__PURE__*/function (Label) {
  * The props for the ContextualMenu component.
  * @template L - The type of the link props.
  */
-exports.Label = Label;
 /**
  * Get the node to use for positioning the menu.
  * @param wrapper - The component's wrapping element.
  * @param positionNode - A positioning node, if supplied.
  * @return A node or null.
  */
-var getPositionNode = function getPositionNode(wrapper, positionNode) {
+const getPositionNode = (wrapper, positionNode) => {
   if (positionNode) {
     return positionNode;
   } else if (wrapper) {
     // We want to position the menu in relation to the toggle, if it exists.
-    var toggle = wrapper.querySelector(".p-contextual-menu__toggle");
+    const toggle = wrapper.querySelector(".p-contextual-menu__toggle");
     return toggle || wrapper;
   }
   return null;
@@ -59,7 +45,7 @@ var getPositionNode = function getPositionNode(wrapper, positionNode) {
  * @param positionNode - The node that is used to position the menu.
  * @return Whether the positioning node is visible.
  */
-var getPositionNodeVisible = function getPositionNodeVisible(positionNode) {
+const getPositionNodeVisible = positionNode => {
   return !positionNode || positionNode.offsetParent !== null;
 };
 
@@ -85,83 +71,78 @@ var getPositionNodeVisible = function getPositionNodeVisible(positionNode) {
  * @param [toggleLabelFirst=true] - Whether the toggle lable or icon should appear first.
  * @param [visible=false] - Whether the menu should be visible.
  */
-var ContextualMenu = function ContextualMenu(_ref) {
-  var _ref$autoAdjust = _ref.autoAdjust,
-    autoAdjust = _ref$autoAdjust === void 0 ? true : _ref$autoAdjust,
-    children = _ref.children,
-    className = _ref.className,
-    _ref$closeOnEsc = _ref.closeOnEsc,
-    closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
-    _ref$closeOnOutsideCl = _ref.closeOnOutsideClick,
-    closeOnOutsideClick = _ref$closeOnOutsideCl === void 0 ? true : _ref$closeOnOutsideCl,
-    constrainPanelWidth = _ref.constrainPanelWidth,
-    dropdownClassName = _ref.dropdownClassName,
-    dropdownProps = _ref.dropdownProps,
-    hasToggleIcon = _ref.hasToggleIcon,
-    links = _ref.links,
-    onToggleMenu = _ref.onToggleMenu,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? "right" : _ref$position,
-    positionNode = _ref.positionNode,
-    scrollOverflow = _ref.scrollOverflow,
-    toggleAppearance = _ref.toggleAppearance,
-    toggleClassName = _ref.toggleClassName,
-    toggleDisabled = _ref.toggleDisabled,
-    toggleLabel = _ref.toggleLabel,
-    _ref$toggleLabelFirst = _ref.toggleLabelFirst,
-    toggleLabelFirst = _ref$toggleLabelFirst === void 0 ? true : _ref$toggleLabelFirst,
-    toggleProps = _ref.toggleProps,
-    _ref$visible = _ref.visible,
-    visible = _ref$visible === void 0 ? false : _ref$visible,
-    wrapperProps = _objectWithoutProperties(_ref, _excluded);
-  var id = (0, _useId.useId)();
-  var wrapper = (0, _react.useRef)();
-  var _useState = (0, _react.useState)(),
-    _useState2 = _slicedToArray(_useState, 2),
-    positionCoords = _useState2[0],
-    setPositionCoords = _useState2[1];
-  var _useState3 = (0, _react.useState)(position),
-    _useState4 = _slicedToArray(_useState3, 2),
-    adjustedPosition = _useState4[0],
-    setAdjustedPosition = _useState4[1];
-  var hasToggle = hasToggleIcon || toggleLabel;
+const ContextualMenu = _ref => {
+  let {
+    autoAdjust = true,
+    children,
+    className,
+    closeOnEsc = true,
+    closeOnOutsideClick = true,
+    constrainPanelWidth,
+    dropdownClassName,
+    dropdownProps,
+    hasToggleIcon,
+    links,
+    onToggleMenu,
+    position = "right",
+    positionNode,
+    scrollOverflow,
+    toggleAppearance,
+    toggleClassName,
+    toggleDisabled,
+    toggleLabel,
+    toggleLabelFirst = true,
+    toggleProps,
+    visible = false,
+    ...wrapperProps
+  } = _ref;
+  const id = (0, _useId.useId)();
+  const wrapper = (0, _react.useRef)(null);
+  const [positionCoords, setPositionCoords] = (0, _react.useState)();
+  const [adjustedPosition, setAdjustedPosition] = (0, _react.useState)(position);
+  const hasToggle = hasToggleIcon || toggleLabel;
+  (0, _react.useEffect)(() => {
+    setAdjustedPosition(position);
+  }, [position, autoAdjust]);
 
   // Update the coordinates of the position node.
-  var updatePositionCoords = (0, _react.useCallback)(function () {
-    var parent = getPositionNode(wrapper.current, positionNode);
+  const updatePositionCoords = (0, _react.useCallback)(() => {
+    const parent = getPositionNode(wrapper.current, positionNode);
     if (!parent) {
       return null;
     }
     setPositionCoords(parent.getBoundingClientRect());
   }, [wrapper, positionNode]);
-  var _usePortal = (0, _reactUseportal.default)({
-      closeOnEsc: closeOnEsc,
-      closeOnOutsideClick: closeOnOutsideClick,
-      isOpen: visible,
-      onOpen: function onOpen() {
-        // Call the toggle callback, if supplied.
-        onToggleMenu && onToggleMenu(true);
-        // When the menu opens then update the coordinates of the parent.
-        updatePositionCoords();
-      },
-      onClose: function onClose() {
-        // Call the toggle callback, if supplied.
-        onToggleMenu && onToggleMenu(false);
-      }
-    }),
-    openPortal = _usePortal.openPortal,
-    closePortal = _usePortal.closePortal,
-    isOpen = _usePortal.isOpen,
-    Portal = _usePortal.Portal,
-    ref = _usePortal.ref;
-  var previousVisible = (0, _hooks.usePrevious)(visible);
-  var labelNode = toggleLabel && typeof toggleLabel === "string" ? /*#__PURE__*/_react.default.createElement("span", null, toggleLabel) : /*#__PURE__*/_react.default.isValidElement(toggleLabel) ? toggleLabel : null;
-  var wrapperClass = (0, _classnames.default)(className, "p-contextual-menu", _defineProperty({}, "p-contextual-menu--".concat(adjustedPosition), adjustedPosition !== "right"));
+  const {
+    openPortal,
+    closePortal,
+    isOpen,
+    Portal
+  } = (0, _reactUseportal.default)({
+    closeOnEsc,
+    closeOnOutsideClick,
+    isOpen: visible,
+    onOpen: () => {
+      // Call the toggle callback, if supplied.
+      onToggleMenu && onToggleMenu(true);
+      // When the menu opens then update the coordinates of the parent.
+      updatePositionCoords();
+    },
+    onClose: () => {
+      // Call the toggle callback, if supplied.
+      onToggleMenu && onToggleMenu(false);
+    }
+  });
+  const previousVisible = (0, _hooks.usePrevious)(visible);
+  const labelNode = toggleLabel && typeof toggleLabel === "string" ? /*#__PURE__*/_react.default.createElement("span", null, toggleLabel) : /*#__PURE__*/_react.default.isValidElement(toggleLabel) ? toggleLabel : null;
+  const contextualMenuClassName = (0, _classnames.default)(className, "p-contextual-menu", {
+    ["p-contextual-menu--".concat(adjustedPosition)]: adjustedPosition !== "right"
+  });
 
   // Update the coordinates of the wrapper once it mounts to the dom. This uses
   // The callback ref pattern:
   // https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
-  var wrapperRef = (0, _react.useCallback)(function (node) {
+  const wrapperRef = (0, _react.useCallback)(node => {
     wrapper.current = node;
     if (node !== null) {
       updatePositionCoords();
@@ -170,7 +151,7 @@ var ContextualMenu = function ContextualMenu(_ref) {
 
   // Handle controlling updates to the menu visibility from outside
   // the component.
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (visible !== previousVisible) {
       if (visible && !isOpen) {
         openPortal();
@@ -179,8 +160,8 @@ var ContextualMenu = function ContextualMenu(_ref) {
       }
     }
   }, [closePortal, openPortal, visible, isOpen, previousVisible]);
-  var onResize = (0, _react.useCallback)(function (evt) {
-    var parent = getPositionNode(wrapper.current, positionNode);
+  const onResize = (0, _react.useCallback)(evt => {
+    const parent = getPositionNode(wrapper.current, positionNode);
     if (parent && !getPositionNodeVisible(parent)) {
       // Hide the menu if the item has become hidden. This might happen in
       // a responsive table when columns become hidden as the page
@@ -192,13 +173,20 @@ var ContextualMenu = function ContextualMenu(_ref) {
       updatePositionCoords();
     }
   }, [closePortal, positionNode, updatePositionCoords]);
+  const onScroll = (0, _react.useCallback)(e => {
+    const parent = getPositionNode(wrapper.current, positionNode);
+    // update position if the scroll event is triggered by the parent of the menu
+    if (parent && e.target.contains(parent)) {
+      // Update the coordinates so that the menu stays relative to the
+      // toggle button.
+      updatePositionCoords();
+    }
+  }, [positionNode, updatePositionCoords]);
   (0, _hooks.useListener)(window, onResize, "resize", true, isOpen);
+  (0, _hooks.useListener)(window, onScroll, "scroll", false, isOpen, true);
   return /*#__PURE__*/_react.default.createElement("span", _extends({
-    className: wrapperClass,
-    ref: wrapperRef,
-    style: positionNode ? null : {
-      position: "relative"
-    }
+    className: contextualMenuClassName,
+    ref: wrapperRef
   }, wrapperProps), hasToggle ? /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
     appearance: toggleAppearance,
     "aria-controls": id,
@@ -209,7 +197,7 @@ var ContextualMenu = function ContextualMenu(_ref) {
     className: (0, _classnames.default)("p-contextual-menu__toggle", toggleClassName),
     disabled: toggleDisabled,
     hasIcon: hasToggleIcon,
-    onClick: function onClick(evt) {
+    onClick: evt => {
       if (!isOpen) {
         openPortal(evt);
       } else {
@@ -221,15 +209,10 @@ var ContextualMenu = function ContextualMenu(_ref) {
     className: (0, _classnames.default)("p-icon--chevron-down p-contextual-menu__indicator", {
       "is-light": ["negative", "positive"].includes(toggleAppearance)
     })
-  }) : null, toggleLabelFirst ? null : labelNode) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-    style: {
-      display: "none"
-    },
-    ref: ref
-  })), isOpen && /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement(_ContextualMenuDropdown.default, _extends({
+  }) : null, toggleLabelFirst ? null : labelNode) : null, isOpen && /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement(_ContextualMenuDropdown.default, _extends({
     adjustedPosition: adjustedPosition,
     autoAdjust: autoAdjust,
-    closePortal: closePortal,
+    handleClose: closePortal,
     constrainPanelWidth: constrainPanelWidth,
     dropdownClassName: dropdownClassName,
     dropdownContent: children,
@@ -238,11 +221,10 @@ var ContextualMenu = function ContextualMenu(_ref) {
     links: links,
     position: position,
     positionCoords: positionCoords,
-    positionNode: getPositionNode(wrapper.current, positionNode),
+    contextualMenuClassName: contextualMenuClassName,
+    positionNode: getPositionNode(wrapper.current),
     scrollOverflow: scrollOverflow,
-    setAdjustedPosition: setAdjustedPosition,
-    wrapperClass: wrapperClass
+    setAdjustedPosition: setAdjustedPosition
   }, dropdownProps))));
 };
-var _default = ContextualMenu;
-exports.default = _default;
+var _default = exports.default = ContextualMenu;

package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.d.ts

@@ -18,7 +18,7 @@ export type Position = "left" | "center" | "right";
 export type Props<L = null> = {
     adjustedPosition?: Position;
     autoAdjust?: boolean;
-    closePortal?: (evt?: MouseEvent) => void;
+    handleClose?: (evt?: MouseEvent) => void;
     constrainPanelWidth?: boolean;
     dropdownClassName?: string;
     dropdownContent?: ReactNode | ((close: () => void) => ReactElement);
@@ -26,11 +26,11 @@ export type Props<L = null> = {
     isOpen?: boolean;
     links?: MenuLink<L>[];
     position?: Position;
-    positionCoords?: ClientRect;
+    positionCoords?: DOMRect;
     positionNode?: HTMLElement;
     scrollOverflow?: boolean;
     setAdjustedPosition?: (position: Position) => void;
-    wrapperClass?: string;
+    contextualMenuClassName?: string;
 } & HTMLProps<HTMLSpanElement>;
 /**
  * Calculate the adjusted position in relation to the window.
@@ -39,5 +39,5 @@ export type Props<L = null> = {
  * @return The new position.
  */
 export declare const adjustForWindow: (position: Position, fitsWindow: WindowFitment) => Position;
-declare const ContextualMenuDropdown: <L>({ adjustedPosition, autoAdjust, closePortal, constrainPanelWidth, dropdownClassName, dropdownContent, id, isOpen, links, position, positionCoords, positionNode, scrollOverflow, setAdjustedPosition, wrapperClass, ...props }: Props<L>) => JSX.Element;
+declare const ContextualMenuDropdown: <L>({ adjustedPosition, autoAdjust, handleClose, constrainPanelWidth, dropdownClassName, dropdownContent, id, isOpen, links, position, positionCoords, positionNode, scrollOverflow, setAdjustedPosition, contextualMenuClassName, ...props }: Props<L>) => JSX.Element;
 export default ContextualMenuDropdown;