carbon-react 144.9.9 → 144.9.11

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

@@ -36,8 +36,6 @@ export const MultiActionButton = ({
   } = useChildButtons(buttonRef);
   const handleInsideClick = useClickAwayListener(hideButtons);
   const handleClick = ev => {
-    // ensure button is focused when clicked (Safari)
-    buttonRef.current?.focus();
     showButtons();
     handleInsideClick();
     if (onClick) {
@@ -56,6 +54,7 @@ export const MultiActionButton = ({
     ...filterOutStyledSystemSpacingProps(rest)
   };
   const renderAdditionalButtons = () => /*#__PURE__*/React.createElement(Popover, {
+    disablePortal: true,
     placement: position === "left" ? "bottom-start" : /* istanbul ignore next */"bottom-end",
     reference: buttonNode,
     middleware: [offset(6), flip({

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

@@ -68,8 +68,6 @@ export const SplitButton = ({
     ...filterOutStyledSystemSpacingProps(rest)
   };
   const handleToggleClick = () => {
-    // ensure button is focused when clicked (Safari)
-    toggleButton.current?.focus();
     showButtons();
   };
   const toggleButtonProps = {
@@ -119,6 +117,7 @@ export const SplitButton = ({
   function renderAdditionalButtons() {
     if (!showAdditionalButtons) return null;
     return /*#__PURE__*/React.createElement(Popover, {
+      disablePortal: true,
       placement: position === "left" ? /* istanbul ignore next */"bottom-start" : "bottom-end",
       reference: buttonNode,
       middleware: [offset(6), flip({

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

@@ -7,7 +7,7 @@ const StyledSplitButton = styled.div`
   display: inline-block;
   position: relative;
 
-  ${StyledButton}:first-of-type {
+  & > ${StyledButton}:first-of-type {
     border-top-right-radius: var(--borderRadius000);
     border-bottom-right-radius: var(--borderRadius000);
   }

package/esm/components/switch/switch.style.js

@@ -39,7 +39,7 @@ export const StyledHintText = styled.div`
   ${({
   isDarkBackground
 }) => css`
-    color: ${isDarkBackground ? "var(--colorsUtilityYang065)" : "var(--colorsUtilityYin055)"};
+    color: ${isDarkBackground ? "var(--colorsUtilityYang080)" : "var(--colorsUtilityYin055)"};
   `}
 `;
 const StyledSwitch = styled.div`

package/esm/hooks/__internal__/useChildButtons/useChildButtons.js

@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback } from "react";
+import { useState, useRef, useCallback, useEffect } from "react";
 import Events from "../../../__internal__/utils/helpers/events";
 import useMenuKeyboardNavigation from "../useMenuKeyboardNavigation";
 const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
@@ -18,16 +18,18 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
     }
   }
   const getButtonChildren = useCallback(() => childrenContainer.current?.querySelectorAll('[data-component="button"]'), []);
+
+  // focus first child button when opened
+  useEffect(() => {
+    if (showAdditionalButtons) {
+      getButtonChildren()?.[0]?.focus();
+    }
+  }, [showAdditionalButtons, getButtonChildren]);
   const handleToggleButtonKeyDown = ev => {
-    const isToggleKey = Events.isEnterKey(ev) || Events.isSpaceKey(ev) || Events.isDownKey(ev) || Events.isUpKey(ev) || showAdditionalButtons && Events.isTabKey(ev);
+    const isToggleKey = Events.isEnterKey(ev) || Events.isSpaceKey(ev) || Events.isDownKey(ev) || Events.isUpKey(ev);
     if (isToggleKey) {
       ev.preventDefault();
-      if (!showAdditionalButtons) {
-        showButtons();
-      }
-      setTimeout(() => {
-        getButtonChildren()?.[0]?.focus();
-      });
+      showButtons();
     }
   };
   const handleKeyDown = useMenuKeyboardNavigation(toggleButtonRef, getButtonChildren, hideButtons, showAdditionalButtons);

package/esm/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.js

@@ -1,6 +1,5 @@
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import Events from "../../../__internal__/utils/helpers/events";
-import { defaultFocusableSelectors } from "../../../__internal__/focus-trap/focus-trap-utils";
 import useModalManager from "../useModalManager";
 export default (mainControlRef, getButtonChildren, hide, isOpen) => {
   const refocusMainControl = useCallback(() => {
@@ -22,7 +21,7 @@ export default (mainControlRef, getButtonChildren, hide, isOpen) => {
     modalRef: mainControlRef
   });
   const handleKeyDown = useCallback(ev => {
-    if (!(Events.isEnterKey(ev) || Events.isSpaceKey(ev))) {
+    if (!(Events.isEnterKey(ev) || Events.isSpaceKey(ev) || Events.isTabKey(ev))) {
       ev.preventDefault();
     }
     const buttonChildren = getButtonChildren();
@@ -42,28 +41,29 @@ export default (mainControlRef, getButtonChildren, hide, isOpen) => {
     if (!arrowModifierPressed && Events.isDownKey(ev) && currentIndex < childrenLength - 1) {
       nextIndex = currentIndex + 1;
     }
-    const tabPressed = Events.isTabKey(ev);
-    const tabShiftPressed = tabPressed && Events.isShiftKey(ev);
-    if (tabShiftPressed) {
-      if (currentIndex === 0) {
-        refocusMainControl();
-      } else {
-        nextIndex = currentIndex - 1;
-      }
-    } else if (tabPressed) {
-      if (currentIndex === childrenLength - 1) {
-        const elements = Array.from(document.querySelectorAll(defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
-        const indexOf = elements.indexOf(mainControlRef.current);
-        elements[indexOf + 1]?.focus();
-        // timeout enforces that the "hide" method will be run after browser focuses on the next element
-        setTimeout(hide, 0);
-      } else {
-        nextIndex = currentIndex + 1;
-      }
-    }
     if (nextIndex > -1) {
       buttonChildren?.[nextIndex]?.focus();
     }
-  }, [hide, refocusMainControl, mainControlRef, getButtonChildren]);
+  }, [getButtonChildren]);
+
+  // check if a child button is focused, if not hide the menu
+  const checkFocus = useCallback(() => {
+    const buttonChildren = getButtonChildren();
+    if (!buttonChildren) {
+      return;
+    }
+    const buttonChildrenFocused = Array.from(buttonChildren).some(button => button === document.activeElement);
+    if (!buttonChildrenFocused) {
+      hide();
+    }
+  }, [getButtonChildren, hide]);
+  useEffect(() => {
+    document.addEventListener("focusin", checkFocus);
+    window.addEventListener("blur", hide);
+    return () => {
+      document.removeEventListener("focusin", checkFocus);
+      window.removeEventListener("blur", hide);
+    };
+  }, [checkFocus, hide]);
   return handleKeyDown;
 };

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

@@ -45,8 +45,6 @@ const MultiActionButton = ({
   } = (0, _useChildButtons.default)(buttonRef);
   const handleInsideClick = (0, _useClickAwayListener.default)(hideButtons);
   const handleClick = ev => {
-    // ensure button is focused when clicked (Safari)
-    buttonRef.current?.focus();
     showButtons();
     handleInsideClick();
     if (onClick) {
@@ -65,6 +63,7 @@ const MultiActionButton = ({
     ...(0, _utils.filterOutStyledSystemSpacingProps)(rest)
   };
   const renderAdditionalButtons = () => /*#__PURE__*/_react.default.createElement(_popover.default, {
+    disablePortal: true,
     placement: position === "left" ? "bottom-start" : /* istanbul ignore next */"bottom-end",
     reference: buttonNode,
     middleware: [(0, _dom.offset)(6), (0, _dom.flip)({

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

@@ -77,8 +77,6 @@ const SplitButton = ({
     ...(0, _utils.filterOutStyledSystemSpacingProps)(rest)
   };
   const handleToggleClick = () => {
-    // ensure button is focused when clicked (Safari)
-    toggleButton.current?.focus();
     showButtons();
   };
   const toggleButtonProps = {
@@ -128,6 +126,7 @@ const SplitButton = ({
   function renderAdditionalButtons() {
     if (!showAdditionalButtons) return null;
     return /*#__PURE__*/_react.default.createElement(_popover.default, {
+      disablePortal: true,
       placement: position === "left" ? /* istanbul ignore next */"bottom-start" : "bottom-end",
       reference: buttonNode,
       middleware: [(0, _dom.offset)(6), (0, _dom.flip)({

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

@@ -16,7 +16,7 @@ const StyledSplitButton = _styledComponents.default.div`
   display: inline-block;
   position: relative;
 
-  ${_button.default}:first-of-type {
+  & > ${_button.default}:first-of-type {
     border-top-right-radius: var(--borderRadius000);
     border-bottom-right-radius: var(--borderRadius000);
   }

package/lib/components/switch/switch.style.js

@@ -48,7 +48,7 @@ const StyledHintText = exports.StyledHintText = _styledComponents.default.div`
   ${({
   isDarkBackground
 }) => (0, _styledComponents.css)`
-    color: ${isDarkBackground ? "var(--colorsUtilityYang065)" : "var(--colorsUtilityYin055)"};
+    color: ${isDarkBackground ? "var(--colorsUtilityYang080)" : "var(--colorsUtilityYin055)"};
   `}
 `;
 const StyledSwitch = _styledComponents.default.div`

package/lib/hooks/__internal__/useChildButtons/useChildButtons.js

@@ -25,16 +25,18 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
     }
   }
   const getButtonChildren = (0, _react.useCallback)(() => childrenContainer.current?.querySelectorAll('[data-component="button"]'), []);
+
+  // focus first child button when opened
+  (0, _react.useEffect)(() => {
+    if (showAdditionalButtons) {
+      getButtonChildren()?.[0]?.focus();
+    }
+  }, [showAdditionalButtons, getButtonChildren]);
   const handleToggleButtonKeyDown = ev => {
-    const isToggleKey = _events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev) || _events.default.isDownKey(ev) || _events.default.isUpKey(ev) || showAdditionalButtons && _events.default.isTabKey(ev);
+    const isToggleKey = _events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev) || _events.default.isDownKey(ev) || _events.default.isUpKey(ev);
     if (isToggleKey) {
       ev.preventDefault();
-      if (!showAdditionalButtons) {
-        showButtons();
-      }
-      setTimeout(() => {
-        getButtonChildren()?.[0]?.focus();
-      });
+      showButtons();
     }
   };
   const handleKeyDown = (0, _useMenuKeyboardNavigation.default)(toggleButtonRef, getButtonChildren, hideButtons, showAdditionalButtons);

package/lib/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
-var _focusTrapUtils = require("../../../__internal__/focus-trap/focus-trap-utils");
 var _useModalManager = _interopRequireDefault(require("../useModalManager"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var _default = (mainControlRef, getButtonChildren, hide, isOpen) => {
@@ -29,7 +28,7 @@ var _default = (mainControlRef, getButtonChildren, hide, isOpen) => {
     modalRef: mainControlRef
   });
   const handleKeyDown = (0, _react.useCallback)(ev => {
-    if (!(_events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev))) {
+    if (!(_events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev) || _events.default.isTabKey(ev))) {
       ev.preventDefault();
     }
     const buttonChildren = getButtonChildren();
@@ -49,29 +48,30 @@ var _default = (mainControlRef, getButtonChildren, hide, isOpen) => {
     if (!arrowModifierPressed && _events.default.isDownKey(ev) && currentIndex < childrenLength - 1) {
       nextIndex = currentIndex + 1;
     }
-    const tabPressed = _events.default.isTabKey(ev);
-    const tabShiftPressed = tabPressed && _events.default.isShiftKey(ev);
-    if (tabShiftPressed) {
-      if (currentIndex === 0) {
-        refocusMainControl();
-      } else {
-        nextIndex = currentIndex - 1;
-      }
-    } else if (tabPressed) {
-      if (currentIndex === childrenLength - 1) {
-        const elements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
-        const indexOf = elements.indexOf(mainControlRef.current);
-        elements[indexOf + 1]?.focus();
-        // timeout enforces that the "hide" method will be run after browser focuses on the next element
-        setTimeout(hide, 0);
-      } else {
-        nextIndex = currentIndex + 1;
-      }
-    }
     if (nextIndex > -1) {
       buttonChildren?.[nextIndex]?.focus();
     }
-  }, [hide, refocusMainControl, mainControlRef, getButtonChildren]);
+  }, [getButtonChildren]);
+
+  // check if a child button is focused, if not hide the menu
+  const checkFocus = (0, _react.useCallback)(() => {
+    const buttonChildren = getButtonChildren();
+    if (!buttonChildren) {
+      return;
+    }
+    const buttonChildrenFocused = Array.from(buttonChildren).some(button => button === document.activeElement);
+    if (!buttonChildrenFocused) {
+      hide();
+    }
+  }, [getButtonChildren, hide]);
+  (0, _react.useEffect)(() => {
+    document.addEventListener("focusin", checkFocus);
+    window.addEventListener("blur", hide);
+    return () => {
+      document.removeEventListener("focusin", checkFocus);
+      window.removeEventListener("blur", hide);
+    };
+  }, [checkFocus, hide]);
   return handleKeyDown;
 };
 exports.default = _default;

package/package.json

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