carbon-react 115.0.0 → 115.0.2

package/esm/components/action-popover/action-popover-item/action-popover-item.component.js

@@ -129,11 +129,7 @@ const ActionPopoverItem = ({
     }
   }, [disabled, focusButton, onClickProp, setOpenPopover]);
   const onKeyDown = useCallback(e => {
-    if (Events.isEscKey(e)) {
-      e.stopPropagation();
-      setOpenPopover(false);
-      focusButton();
-    } else if (Events.isSpaceKey(e)) {
+    if (Events.isSpaceKey(e)) {
       e.preventDefault();
       e.stopPropagation();
     } else if (!disabled) {
@@ -182,7 +178,7 @@ const ActionPopoverItem = ({
     } else if (Events.isEnterKey(e)) {
       e.stopPropagation();
     }
-  }, [disabled, download, focusButton, isHref, isLeftAligned, onClick, setOpenPopover, submenu]);
+  }, [disabled, download, isHref, isLeftAligned, onClick, submenu]);
   const itemSubmenuProps = { ...(!disabled && {
       onMouseEnter: e => {
         if (mouseEnterTimer.current) clearTimeout(mouseEnterTimer.current);

package/esm/components/action-popover/action-popover.component.js

@@ -12,6 +12,7 @@ import ActionPopoverMenu from "./action-popover-menu/action-popover-menu.compone
 import ActionPopoverItem from "./action-popover-item/action-popover-item.component";
 import ActionPopoverDivider from "./action-popover-divider/action-popover-divider.component";
 import ActionPopoverContext from "./action-popover-context";
+import useModalManager from "../../hooks/__internal__/useModalManager";
 
 const onOpenDefault = () => {};
 
@@ -107,6 +108,14 @@ const ActionPopover = ({
       setOpen(true);
     }
   }, [itemCount, setOpen]);
+  const handleEscapeKey = useCallback(e => {
+    /* istanbul ignore else */
+    if (Events.isEscKey(e)) {
+      setOpen(false);
+      focusButton();
+    }
+  }, [setOpen, focusButton]);
+  useModalManager(isOpen, handleEscapeKey, buttonRef);
   useEffect(() => {
     const handler = ({
       target

package/esm/components/multi-action-button/multi-action-button.component.d.ts

@@ -7,5 +7,5 @@ export interface MultiActionButtonProps extends WidthProps, Omit<SplitButtonProp
     /** Second text child, renders under main text, only when size is "large" */
     subtext?: string;
 }
-export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, width, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
+export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, width, onClick, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
 export default MultiActionButton;

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -19,6 +19,7 @@ const MultiActionButton = ({
   text,
   subtext,
   width,
+  onClick,
   "data-element": dataElement,
   "data-role": dataRole,
   ...rest
@@ -85,11 +86,23 @@ const MultiActionButton = ({
     }
   };
 
+  const handleInsideClick = useClickAwayListener(hideButtons);
+
+  const handleClick = ev => {
+    showButtons();
+    handleInsideClick();
+
+    if (onClick) {
+      onClick(ev);
+    }
+  };
+
   const mainButtonProps = {
     disabled,
     displayed: showAdditionalButtons,
     onTouchStart: showButtons,
     onKeyDown: handleMainButtonKeyDown,
+    onClick: handleClick,
     buttonType,
     size,
     subtext,
@@ -112,16 +125,13 @@ const MultiActionButton = ({
     onKeyDown: handleKeyDown
   }, childrenWithProps()));
 
-  const handleClick = useClickAwayListener(hideButtons);
   const hideButtonsIfTriggerNotFocused = useCallback(() => {
     if (buttonRef.current === document.activeElement) return;
     setShowAdditionalButtons(false);
   }, []);
   const marginProps = filterStyledSystemMarginProps(rest);
   return /*#__PURE__*/React.createElement(StyledMultiActionButton, _extends({
-    "aria-haspopup": "true",
     onMouseLeave: hideButtonsIfTriggerNotFocused,
-    onClick: handleClick,
     ref: ref,
     "data-component": "multi-action-button",
     "data-element": dataElement,

package/esm/components/pages/pages.component.d.ts

@@ -2,8 +2,6 @@ import React from "react";
 import Page from "./page";
 import { ThemeObject } from "../../style/themes/base";
 export interface PagesProps {
-    /** [legacy] Custom className */
-    className?: string;
     /** The selected tab on page load */
     initialpageIndex?: number | string;
     /** The current page's index */

package/esm/components/pages/pages.component.js

@@ -86,7 +86,6 @@ const Pages = ({
 
 Pages.propTypes = {
   "children": PropTypes.node,
-  "className": PropTypes.string,
   "initialpageIndex": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   "pageIndex": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   "theme": PropTypes.shape({

package/esm/components/split-button/split-button.component.js

@@ -95,7 +95,8 @@ const SplitButton = ({
     buttonType,
     size,
     ...(!disabled && {
-      onMouseEnter: showButtons
+      onMouseEnter: showButtons,
+      onClick: showButtons
     })
   };
 
@@ -175,7 +176,6 @@ const SplitButton = ({
   const handleClick = useClickAwayListener(hideButtons);
   const marginProps = filterStyledSystemMarginProps(rest);
   return /*#__PURE__*/React.createElement(StyledSplitButton, _extends({
-    "aria-haspopup": "true",
     onMouseLeave: hideButtonsIfTriggerNotFocused,
     onClick: handleClick,
     ref: splitButtonNode

package/lib/components/action-popover/action-popover-item/action-popover-item.component.js

@@ -151,11 +151,7 @@ const ActionPopoverItem = ({
     }
   }, [disabled, focusButton, onClickProp, setOpenPopover]);
   const onKeyDown = (0, _react.useCallback)(e => {
-    if (_events.default.isEscKey(e)) {
-      e.stopPropagation();
-      setOpenPopover(false);
-      focusButton();
-    } else if (_events.default.isSpaceKey(e)) {
+    if (_events.default.isSpaceKey(e)) {
       e.preventDefault();
       e.stopPropagation();
     } else if (!disabled) {
@@ -204,7 +200,7 @@ const ActionPopoverItem = ({
     } else if (_events.default.isEnterKey(e)) {
       e.stopPropagation();
     }
-  }, [disabled, download, focusButton, isHref, isLeftAligned, onClick, setOpenPopover, submenu]);
+  }, [disabled, download, isHref, isLeftAligned, onClick, submenu]);
   const itemSubmenuProps = { ...(!disabled && {
       onMouseEnter: e => {
         if (mouseEnterTimer.current) clearTimeout(mouseEnterTimer.current);

package/lib/components/action-popover/action-popover.component.js

@@ -29,6 +29,8 @@ var _actionPopoverDivider = _interopRequireDefault(require("./action-popover-div
 
 var _actionPopoverContext = _interopRequireDefault(require("./action-popover-context"));
 
+var _useModalManager = _interopRequireDefault(require("../../hooks/__internal__/useModalManager"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -132,6 +134,14 @@ const ActionPopover = ({
       setOpen(true);
     }
   }, [itemCount, setOpen]);
+  const handleEscapeKey = (0, _react.useCallback)(e => {
+    /* istanbul ignore else */
+    if (_events.default.isEscKey(e)) {
+      setOpen(false);
+      focusButton();
+    }
+  }, [setOpen, focusButton]);
+  (0, _useModalManager.default)(isOpen, handleEscapeKey, buttonRef);
   (0, _react.useEffect)(() => {
     const handler = ({
       target

package/lib/components/multi-action-button/multi-action-button.component.d.ts

@@ -7,5 +7,5 @@ export interface MultiActionButtonProps extends WidthProps, Omit<SplitButtonProp
     /** Second text child, renders under main text, only when size is "large" */
     subtext?: string;
 }
-export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, width, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
+export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, width, onClick, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
 export default MultiActionButton;

package/lib/components/multi-action-button/multi-action-button.component.js

@@ -40,6 +40,7 @@ const MultiActionButton = ({
   text,
   subtext,
   width,
+  onClick,
   "data-element": dataElement,
   "data-role": dataRole,
   ...rest
@@ -106,11 +107,23 @@ const MultiActionButton = ({
     }
   };
 
+  const handleInsideClick = (0, _useClickAwayListener.default)(hideButtons);
+
+  const handleClick = ev => {
+    showButtons();
+    handleInsideClick();
+
+    if (onClick) {
+      onClick(ev);
+    }
+  };
+
   const mainButtonProps = {
     disabled,
     displayed: showAdditionalButtons,
     onTouchStart: showButtons,
     onKeyDown: handleMainButtonKeyDown,
+    onClick: handleClick,
     buttonType,
     size,
     subtext,
@@ -133,16 +146,13 @@ const MultiActionButton = ({
     onKeyDown: handleKeyDown
   }, childrenWithProps()));
 
-  const handleClick = (0, _useClickAwayListener.default)(hideButtons);
   const hideButtonsIfTriggerNotFocused = (0, _react.useCallback)(() => {
     if (buttonRef.current === document.activeElement) return;
     setShowAdditionalButtons(false);
   }, []);
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   return /*#__PURE__*/_react.default.createElement(_multiActionButton.StyledMultiActionButton, _extends({
-    "aria-haspopup": "true",
     onMouseLeave: hideButtonsIfTriggerNotFocused,
-    onClick: handleClick,
     ref: ref,
     "data-component": "multi-action-button",
     "data-element": dataElement,

package/lib/components/pages/pages.component.d.ts

@@ -2,8 +2,6 @@ import React from "react";
 import Page from "./page";
 import { ThemeObject } from "../../style/themes/base";
 export interface PagesProps {
-    /** [legacy] Custom className */
-    className?: string;
     /** The selected tab on page load */
     initialpageIndex?: number | string;
     /** The current page's index */

package/lib/components/pages/pages.component.js

@@ -113,7 +113,6 @@ const Pages = ({
 
 Pages.propTypes = {
   "children": _propTypes.default.node,
-  "className": _propTypes.default.string,
   "initialpageIndex": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   "pageIndex": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   "theme": _propTypes.default.shape({

package/lib/components/split-button/split-button.component.js

@@ -124,7 +124,8 @@ const SplitButton = ({
     buttonType,
     size,
     ...(!disabled && {
-      onMouseEnter: showButtons
+      onMouseEnter: showButtons,
+      onClick: showButtons
     })
   };
 
@@ -204,7 +205,6 @@ const SplitButton = ({
   const handleClick = (0, _useClickAwayListener.default)(hideButtons);
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   return /*#__PURE__*/_react.default.createElement(_splitButton.default, _extends({
-    "aria-haspopup": "true",
     onMouseLeave: hideButtonsIfTriggerNotFocused,
     onClick: handleClick,
     ref: splitButtonNode

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "115.0.0",
+  "version": "115.0.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",