carbon-react 94.0.2 → 94.0.3

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

@@ -56,7 +56,7 @@ const ActionPopover = ({
   const [isOpen, setOpenState] = (0, _react.useState)(false);
   const [focusIndex, setFocusIndex] = (0, _react.useState)(0);
   const [guid] = (0, _react.useState)((0, _guid.default)());
-  const button = (0, _react.useRef)();
+  const buttonRef = (0, _react.useRef)();
   const menu = (0, _react.useRef)();
   const itemCount = (0, _react.useMemo)(() => {
     return _react.default.Children.toArray(children).filter(child => child.type === _actionPopoverItem.default).length;
@@ -94,7 +94,7 @@ const ActionPopover = ({
 
     if (!isOpening) {
       // Closing the menu should focus the MenuButton
-      button.current.focus();
+      buttonRef.current.querySelector("[data-component='action-popover-button']").focus();
     }
   }, [isOpen, setOpen]); // Keyboard commands implemented as recommended by WAI-ARIA best practices
   // https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions.html
@@ -112,7 +112,7 @@ const ActionPopover = ({
       setOpen(true);
     }
   }, [itemCount, setOpen]);
-  const focusButton = (0, _react.useCallback)(() => button.current.focus(), []);
+  const focusButton = (0, _react.useCallback)(() => buttonRef.current.querySelector("[data-component='action-popover-button']").focus(), []);
   (0, _react.useEffect)(() => {
     const handler = ({
       target
@@ -120,7 +120,7 @@ const ActionPopover = ({
       // If the event didn't came from part of this component, close the menu.
       // There will be multiple document click listeners but we cant prevent propagation because it will interfere with
       // other instances on the same page
-      if (!button.current.contains(target) && menu.current && !menu.current.contains(target)) {
+      if (!buttonRef.current.contains(target) && menu.current && !menu.current.contains(target)) {
         setOpen(false);
       }
     };
@@ -136,23 +136,37 @@ const ActionPopover = ({
     };
   }, [setOpen]);
 
-  const menuButton = () => {
+  const menuButton = menuID => {
     if (renderButton) {
       return renderButton({
-        tabIndex: -1,
-        "data-element": "action-popover-menu-button"
+        tabIndex: isOpen ? "-1" : "0",
+        "data-component": "action-popover-button",
+        ariaAttributes: {
+          "aria-haspopup": "true",
+          "aria-label": l.actionPopover.ariaLabel(),
+          "aria-controls": menuID,
+          "aria-expanded": isOpen
+        }
       });
     }
 
-    return /*#__PURE__*/_react.default.createElement(_actionPopover.ButtonIcon, {
+    return /*#__PURE__*/_react.default.createElement(_actionPopover.StyledButtonIcon, {
+      role: "button",
+      "aria-haspopup": "true",
+      "aria-label": l.actionPopover.ariaLabel(),
+      "aria-controls": menuID,
+      "aria-expanded": isOpen,
+      tabIndex: isOpen ? "-1" : "0",
+      "data-component": "action-popover-button"
+    }, /*#__PURE__*/_react.default.createElement(_actionPopover.ButtonIcon, {
       type: "ellipsis_vertical"
-    });
+    }));
   };
 
   const parentID = id || `ActionPopoverButton_${guid}`;
   const menuID = `ActionPopoverMenu_${guid}`;
   const menuProps = {
-    button,
+    buttonRef,
     parentID,
     setFocusIndex,
     focusIndex,
@@ -165,18 +179,12 @@ const ActionPopover = ({
   };
   return /*#__PURE__*/_react.default.createElement(_actionPopover.MenuButton, _extends({
     id: parentID,
-    "data-component": "action-popover-button",
-    role: "button",
-    "aria-haspopup": "true",
-    "aria-label": l.actionPopover.ariaLabel(),
-    "aria-controls": menuID,
-    "aria-expanded": isOpen,
-    tabIndex: isOpen ? "-1" : "0",
+    "data-component": "action-popover-wrapper",
     onKeyDown: onButtonKeyDown,
     onClick: onButtonClick,
     isOpen,
-    ref: button
-  }, rest), menuButton(), /*#__PURE__*/_react.default.createElement(_actionPopoverContext.default.Provider, {
+    ref: buttonRef
+  }, rest), menuButton(menuID), /*#__PURE__*/_react.default.createElement(_actionPopoverContext.default.Provider, {
     value: {
       setOpenPopover: setOpen,
       focusButton,
@@ -184,7 +192,7 @@ const ActionPopover = ({
     }
   }, isOpen && /*#__PURE__*/_react.default.createElement(_popover.default, {
     placement: mappedPlacement,
-    reference: button
+    reference: buttonRef
   }, /*#__PURE__*/_react.default.createElement(_actionPopoverMenu.default, _extends({
     "data-component": "action-popover",
     role: "menu",

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.ButtonIcon = exports.MenuButton = exports.MenuItemFactory = exports.Menu = void 0;
+exports.StyledMenuItem = exports.MenuButtonOverrideWrapper = exports.SubMenuItemIcon = exports.MenuItemDivider = exports.MenuItemIcon = exports.StyledButtonIcon = exports.ButtonIcon = exports.MenuButton = exports.MenuItemFactory = exports.Menu = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -131,16 +131,6 @@ const MenuButton = _styledComponents.default.div`
   isOpen,
   theme
 }) => isOpen && `background-color: ${theme.colors.white}`}
-  &:hover, &:focus {
-    background-color: ${({
-  theme
-}) => theme.colors.white};
-  }
-  &:focus {
-    outline: 2px solid ${({
-  theme
-}) => theme.colors.focus};
-  }
 `;
 /**
  * Creates a factory that returns a styled component with a custom
@@ -168,6 +158,21 @@ const iconThemeProviderFactory = (Component, themeFn) => (0, _styledComponents.w
 
 const ButtonIcon = iconThemeProviderFactory(_icon.default, palette => palette.slate);
 exports.ButtonIcon = ButtonIcon;
+const StyledButtonIcon = _styledComponents.default.div`
+  &:hover,
+  &:focus {
+    background-color: ${({
+  theme
+}) => theme.colors.white};
+  }
+
+  &:focus {
+    outline: 2px solid ${({
+  theme
+}) => theme.colors.focus};
+  }
+`;
+exports.StyledButtonIcon = StyledButtonIcon;
 const MenuItemIcon = (0, _styledComponents.default)(iconThemeProviderFactory(_icon.default, () => "inherit"))`
   ${({
   theme,
@@ -203,13 +208,18 @@ exports.SubMenuItemIcon = SubMenuItemIcon;
 const MenuButtonOverrideWrapper = _styledComponents.default.div`
   ${({
   theme
-}) => `
+}) => (0, _styledComponents.css)`
     ${_button.default} {
       padding: 0px ${theme.spacing}px;
       width: 100%;
       &:focus {
         outline-width: 2px;
       }
+
+      &:hover,
+      &:focus {
+        background-color: ${theme.colors.white};
+      }
     }
   `}
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "94.0.2",
+  "version": "94.0.3",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {