carbon-react 118.4.0 → 118.4.1

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

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { useCallback, useEffect, useRef, useState, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
-import { MenuItemIcon, SubMenuItemIcon, StyledMenuItem } from "../action-popover.style";
+import { MenuItemIcon, SubMenuItemIcon, StyledMenuItem, StyledMenuItemWrapper } from "../action-popover.style";
 import Events from "../../../__internal__/utils/helpers/events";
 import createGuid from "../../../__internal__/utils/helpers/guid";
 import ActionPopoverContext from "../action-popover-context";
@@ -172,7 +172,8 @@ const ActionPopoverItem = ({
           (_ref$current5 = ref.current) === null || _ref$current5 === void 0 ? void 0 : _ref$current5.click();
         }
 
-        e.preventDefault();
+        e.preventDefault(); // this type assertion should be safe as the onclick handler is designed to catch events propagating from the inner buttons
+
         onClick(e);
       }
     } else if (Events.isEnterKey(e)) {
@@ -180,6 +181,21 @@ const ActionPopoverItem = ({
     }
   }, [disabled, download, isHref, isLeftAligned, onClick, submenu]);
   const itemSubmenuProps = { ...(!disabled && {
+      onClick: e => {
+        var _ref$current6;
+
+        setOpen(true);
+        (_ref$current6 = ref.current) === null || _ref$current6 === void 0 ? void 0 : _ref$current6.focus();
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }),
+    "aria-haspopup": "true",
+    "aria-label": l.actionPopover.ariaLabel(),
+    "aria-controls": `ActionPopoverMenu_${guid}`,
+    "aria-expanded": isOpen
+  };
+  const wrapperDivProps = { ...(!disabled && {
       onMouseEnter: e => {
         if (mouseEnterTimer.current) clearTimeout(mouseEnterTimer.current);
         setFocusIndex(-1);
@@ -194,20 +210,8 @@ const ActionPopoverItem = ({
           setOpen(false);
         }, INTERVAL);
         e.stopPropagation();
-      },
-      onClick: e => {
-        var _ref$current6;
-
-        setOpen(true);
-        (_ref$current6 = ref.current) === null || _ref$current6 === void 0 ? void 0 : _ref$current6.focus();
-        e.preventDefault();
-        e.stopPropagation();
       }
-    }),
-    "aria-haspopup": "true",
-    "aria-label": l.actionPopover.ariaLabel(),
-    "aria-controls": `ActionPopoverMenu_${guid}`,
-    "aria-expanded": isOpen
+    })
   };
 
   const renderMenuItemIcon = () => {
@@ -217,13 +221,15 @@ const ActionPopoverItem = ({
     });
   };
 
-  return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(StyledMenuItemWrapper, submenu && wrapperDivProps, /*#__PURE__*/React.createElement("div", {
+    onKeyDown: onKeyDown,
+    role: "presentation"
+  }, /*#__PURE__*/React.createElement(StyledMenuItem, _extends({}, rest, {
     ref: ref,
     onClick: onClick,
-    onKeyDown: onKeyDown,
     type: "button",
-    tabIndex: 0,
     role: "menuitem",
+    tabIndex: 0,
     isDisabled: disabled,
     horizontalAlignment: horizontalAlignment
   }, disabled && {
@@ -232,7 +238,11 @@ const ActionPopoverItem = ({
     as: "a",
     download,
     href
-  }, submenu && itemSubmenuProps), /*#__PURE__*/React.isValidElement(submenu) ? /*#__PURE__*/React.cloneElement(submenu, {
+  }, submenu && itemSubmenuProps), submenu && checkRef(ref) && isLeftAligned ? /*#__PURE__*/React.createElement(SubMenuItemIcon, {
+    type: "chevron_left"
+  }) : null, horizontalAlignment === "left" ? renderMenuItemIcon() : null, children, horizontalAlignment === "right" ? renderMenuItemIcon() : null, submenu && checkRef(ref) && !isLeftAligned ? /*#__PURE__*/React.createElement(SubMenuItemIcon, {
+    type: "chevron_right"
+  }) : null), /*#__PURE__*/React.isValidElement(submenu) ? /*#__PURE__*/React.cloneElement(submenu, {
     parentID: `ActionPopoverItem_${guid}`,
     menuID: `ActionPopoverMenu_${guid}`,
     "data-element": "action-popover-submenu",
@@ -242,11 +252,7 @@ const ActionPopoverItem = ({
     setOpen,
     setFocusIndex,
     focusIndex
-  }) : null, submenu && checkRef(ref) && isLeftAligned ? /*#__PURE__*/React.createElement(SubMenuItemIcon, {
-    type: "chevron_left"
-  }) : null, horizontalAlignment === "left" ? renderMenuItemIcon() : null, children, horizontalAlignment === "right" ? renderMenuItemIcon() : null, submenu && checkRef(ref) && !isLeftAligned ? /*#__PURE__*/React.createElement(SubMenuItemIcon, {
-    type: "chevron_right"
-  }) : null);
+  }) : null));
 };
 
 ActionPopoverItem.propTypes = {

package/esm/components/action-popover/action-popover.style.d.ts

@@ -7,6 +7,7 @@ declare type StyledMenuItemProps = {
     horizontalAlignment: "left" | "right";
 };
 declare const StyledMenuItem: import("styled-components").StyledComponent<"button", any, StyledMenuItemProps, never>;
+declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const MenuItemDivider: import("styled-components").StyledComponent<"div", any, {
     "data-element": string;
 }, "data-element">;
@@ -16,4 +17,4 @@ declare const StyledButtonIcon: import("styled-components").StyledComponent<"div
 declare const MenuItemIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 declare const SubMenuItemIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 declare const MenuButtonOverrideWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { Menu, MenuButton, ButtonIcon, StyledButtonIcon, MenuItemIcon, MenuItemDivider, SubMenuItemIcon, MenuButtonOverrideWrapper, StyledMenuItem, };
+export { Menu, MenuButton, ButtonIcon, StyledButtonIcon, MenuItemIcon, MenuItemDivider, SubMenuItemIcon, MenuButtonOverrideWrapper, StyledMenuItem, StyledMenuItemWrapper, };

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

@@ -16,7 +16,11 @@ const Menu = styled.div`
   background-color: var(--colorsUtilityYang100);
   z-index: ${({
   theme
-}) => `${theme.zIndex.popover}`}; // TODO (tokens): implement elevation tokens - FE-4437
+}) => {
+  var _theme$zIndex;
+
+  return `${(_theme$zIndex = theme.zIndex) === null || _theme$zIndex === void 0 ? void 0 : _theme$zIndex.popover}`;
+}}; // TODO (tokens): implement elevation tokens - FE-4437
 `;
 const StyledMenuItem = styled.button`
   text-decoration: none;
@@ -69,6 +73,9 @@ const StyledMenuItem = styled.button`
       }
     `}
 `;
+const StyledMenuItemWrapper = styled.div`
+  position: relative;
+`;
 const MenuItemDivider = styled.div.attrs({
   "data-element": "action-popover-divider"
 })`
@@ -135,4 +142,4 @@ const MenuButtonOverrideWrapper = styled.div`
     }
   }
 `;
-export { Menu, MenuButton, ButtonIcon, StyledButtonIcon, MenuItemIcon, MenuItemDivider, SubMenuItemIcon, MenuButtonOverrideWrapper, StyledMenuItem };
+export { Menu, MenuButton, ButtonIcon, StyledButtonIcon, MenuItemIcon, MenuItemDivider, SubMenuItemIcon, MenuButtonOverrideWrapper, StyledMenuItem, StyledMenuItemWrapper };

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

@@ -194,7 +194,8 @@ const ActionPopoverItem = ({
           (_ref$current5 = ref.current) === null || _ref$current5 === void 0 ? void 0 : _ref$current5.click();
         }
 
-        e.preventDefault();
+        e.preventDefault(); // this type assertion should be safe as the onclick handler is designed to catch events propagating from the inner buttons
+
         onClick(e);
       }
     } else if (_events.default.isEnterKey(e)) {
@@ -202,6 +203,21 @@ const ActionPopoverItem = ({
     }
   }, [disabled, download, isHref, isLeftAligned, onClick, submenu]);
   const itemSubmenuProps = { ...(!disabled && {
+      onClick: e => {
+        var _ref$current6;
+
+        setOpen(true);
+        (_ref$current6 = ref.current) === null || _ref$current6 === void 0 ? void 0 : _ref$current6.focus();
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }),
+    "aria-haspopup": "true",
+    "aria-label": l.actionPopover.ariaLabel(),
+    "aria-controls": `ActionPopoverMenu_${guid}`,
+    "aria-expanded": isOpen
+  };
+  const wrapperDivProps = { ...(!disabled && {
       onMouseEnter: e => {
         if (mouseEnterTimer.current) clearTimeout(mouseEnterTimer.current);
         setFocusIndex(-1);
@@ -216,20 +232,8 @@ const ActionPopoverItem = ({
           setOpen(false);
         }, INTERVAL);
         e.stopPropagation();
-      },
-      onClick: e => {
-        var _ref$current6;
-
-        setOpen(true);
-        (_ref$current6 = ref.current) === null || _ref$current6 === void 0 ? void 0 : _ref$current6.focus();
-        e.preventDefault();
-        e.stopPropagation();
       }
-    }),
-    "aria-haspopup": "true",
-    "aria-label": l.actionPopover.ariaLabel(),
-    "aria-controls": `ActionPopoverMenu_${guid}`,
-    "aria-expanded": isOpen
+    })
   };
 
   const renderMenuItemIcon = () => {
@@ -239,13 +243,15 @@ const ActionPopoverItem = ({
     });
   };
 
-  return /*#__PURE__*/_react.default.createElement(_actionPopover.StyledMenuItem, _extends({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_actionPopover.StyledMenuItemWrapper, submenu && wrapperDivProps, /*#__PURE__*/_react.default.createElement("div", {
+    onKeyDown: onKeyDown,
+    role: "presentation"
+  }, /*#__PURE__*/_react.default.createElement(_actionPopover.StyledMenuItem, _extends({}, rest, {
     ref: ref,
     onClick: onClick,
-    onKeyDown: onKeyDown,
     type: "button",
-    tabIndex: 0,
     role: "menuitem",
+    tabIndex: 0,
     isDisabled: disabled,
     horizontalAlignment: horizontalAlignment
   }, disabled && {
@@ -254,7 +260,11 @@ const ActionPopoverItem = ({
     as: "a",
     download,
     href
-  }, submenu && itemSubmenuProps), /*#__PURE__*/_react.default.isValidElement(submenu) ? /*#__PURE__*/_react.default.cloneElement(submenu, {
+  }, submenu && itemSubmenuProps), submenu && checkRef(ref) && isLeftAligned ? /*#__PURE__*/_react.default.createElement(_actionPopover.SubMenuItemIcon, {
+    type: "chevron_left"
+  }) : null, horizontalAlignment === "left" ? renderMenuItemIcon() : null, children, horizontalAlignment === "right" ? renderMenuItemIcon() : null, submenu && checkRef(ref) && !isLeftAligned ? /*#__PURE__*/_react.default.createElement(_actionPopover.SubMenuItemIcon, {
+    type: "chevron_right"
+  }) : null), /*#__PURE__*/_react.default.isValidElement(submenu) ? /*#__PURE__*/_react.default.cloneElement(submenu, {
     parentID: `ActionPopoverItem_${guid}`,
     menuID: `ActionPopoverMenu_${guid}`,
     "data-element": "action-popover-submenu",
@@ -264,11 +274,7 @@ const ActionPopoverItem = ({
     setOpen,
     setFocusIndex,
     focusIndex
-  }) : null, submenu && checkRef(ref) && isLeftAligned ? /*#__PURE__*/_react.default.createElement(_actionPopover.SubMenuItemIcon, {
-    type: "chevron_left"
-  }) : null, horizontalAlignment === "left" ? renderMenuItemIcon() : null, children, horizontalAlignment === "right" ? renderMenuItemIcon() : null, submenu && checkRef(ref) && !isLeftAligned ? /*#__PURE__*/_react.default.createElement(_actionPopover.SubMenuItemIcon, {
-    type: "chevron_right"
-  }) : null);
+  }) : null));
 };
 
 exports.ActionPopoverItem = ActionPopoverItem;

package/lib/components/action-popover/action-popover.style.d.ts

@@ -7,6 +7,7 @@ declare type StyledMenuItemProps = {
     horizontalAlignment: "left" | "right";
 };
 declare const StyledMenuItem: import("styled-components").StyledComponent<"button", any, StyledMenuItemProps, never>;
+declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const MenuItemDivider: import("styled-components").StyledComponent<"div", any, {
     "data-element": string;
 }, "data-element">;
@@ -16,4 +17,4 @@ declare const StyledButtonIcon: import("styled-components").StyledComponent<"div
 declare const MenuItemIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 declare const SubMenuItemIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 declare const MenuButtonOverrideWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { Menu, MenuButton, ButtonIcon, StyledButtonIcon, MenuItemIcon, MenuItemDivider, SubMenuItemIcon, MenuButtonOverrideWrapper, StyledMenuItem, };
+export { Menu, MenuButton, ButtonIcon, StyledButtonIcon, MenuItemIcon, MenuItemDivider, SubMenuItemIcon, MenuButtonOverrideWrapper, StyledMenuItem, StyledMenuItemWrapper, };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMenuItem = exports.MenuButtonOverrideWrapper = exports.SubMenuItemIcon = exports.MenuItemDivider = exports.MenuItemIcon = exports.StyledButtonIcon = exports.ButtonIcon = exports.MenuButton = exports.Menu = void 0;
+exports.StyledMenuItemWrapper = exports.StyledMenuItem = exports.MenuButtonOverrideWrapper = exports.SubMenuItemIcon = exports.MenuItemDivider = exports.MenuItemIcon = exports.StyledButtonIcon = exports.ButtonIcon = exports.MenuButton = exports.Menu = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -35,7 +35,11 @@ const Menu = _styledComponents.default.div`
   background-color: var(--colorsUtilityYang100);
   z-index: ${({
   theme
-}) => `${theme.zIndex.popover}`}; // TODO (tokens): implement elevation tokens - FE-4437
+}) => {
+  var _theme$zIndex;
+
+  return `${(_theme$zIndex = theme.zIndex) === null || _theme$zIndex === void 0 ? void 0 : _theme$zIndex.popover}`;
+}}; // TODO (tokens): implement elevation tokens - FE-4437
 `;
 exports.Menu = Menu;
 const StyledMenuItem = _styledComponents.default.button`
@@ -90,6 +94,10 @@ const StyledMenuItem = _styledComponents.default.button`
     `}
 `;
 exports.StyledMenuItem = StyledMenuItem;
+const StyledMenuItemWrapper = _styledComponents.default.div`
+  position: relative;
+`;
+exports.StyledMenuItemWrapper = StyledMenuItemWrapper;
 const MenuItemDivider = _styledComponents.default.div.attrs({
   "data-element": "action-popover-divider"
 })`

package/package.json

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