carbon-react 104.54.1 → 104.54.2

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

@@ -8,6 +8,7 @@ import Button, { ButtonWithForwardRef } from "../button";
 import Events from "../../__internal__/utils/helpers/events";
 import Popover from "../../__internal__/popover";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import { defaultFocusableSelectors } from "../../__internal__/focus-trap/focus-trap-utils";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const MultiActionButton = ({
@@ -22,6 +23,7 @@ const MultiActionButton = ({
   ...rest
 }) => {
   const ref = useRef();
+  const buttonRef = useRef();
   const buttonContainer = useRef();
   const userInputType = "ontouchstart" in document.documentElement ? "touchstart" : "click";
   const buttonChildren = React.Children.toArray(children);
@@ -74,7 +76,12 @@ const MultiActionButton = ({
       nextIndex = currentIndex < children.length - 1 ? currentIndex + 1 : 0;
       ev.preventDefault();
     } else if (Events.isTabKey(ev)) {
-      // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+      var _elements$indexOf;
+
+      const elements = Array.from(document.querySelectorAll(defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
+      const indexOf = elements.indexOf(buttonRef.current);
+      (_elements$indexOf = elements[indexOf]) === null || _elements$indexOf === void 0 ? void 0 : _elements$indexOf.focus(); // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+
       setTimeout(hideButtons, 0);
     }
 
@@ -182,6 +189,7 @@ const MultiActionButton = ({
     key: "toggle-button",
     onKeyDown: handleMainButtonKeyDown
   }, mainButtonProps(), {
+    forwardRef: buttonRef,
     iconPosition: "after",
     iconType: "dropdown"
   }), text), showAdditionalButtons && renderAdditionalButtons());

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

@@ -14,6 +14,7 @@ import guid from "../../__internal__/utils/helpers/guid";
 import Popover from "../../__internal__/popover";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { baseTheme } from "../../style/themes";
+import { defaultFocusableSelectors } from "../../__internal__/focus-trap/focus-trap-utils";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 const CONTENT_WIDTH_RATIO = 0.75;
 
@@ -36,6 +37,7 @@ const SplitButton = ({
   const buttonLabelId = useRef(guid());
   const additionalButtons = useRef([]);
   const splitButtonNode = useRef();
+  const toggleButton = useRef();
   const buttonContainer = useRef();
   const [showAdditionalButtons, setShowAdditionalButtons] = useState(false);
   const [minWidth, setMinWidth] = useState(0);
@@ -69,7 +71,12 @@ const SplitButton = ({
       nextIndex = currentIndex < numOfChildren ? currentIndex + 1 : 0;
       ev.preventDefault();
     } else if (Events.isTabKey(ev)) {
-      // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+      var _elements$indexOf;
+
+      const elements = Array.from(document.querySelectorAll(defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
+      const indexOf = elements.indexOf(toggleButton.current);
+      (_elements$indexOf = elements[indexOf]) === null || _elements$indexOf === void 0 ? void 0 : _elements$indexOf.focus(); // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+
       setTimeout(hideButtons, 0);
     }
 
@@ -156,7 +163,8 @@ const SplitButton = ({
       "aria-label": "Show more",
       "data-element": "toggle-button",
       key: "toggle-button",
-      type: "button"
+      type: "button",
+      ref: toggleButton
     }, toggleButtonProps()), /*#__PURE__*/React.createElement(Icon, {
       type: "dropdown",
       bgSize: "extra-small",

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

@@ -21,6 +21,8 @@ var _popover = _interopRequireDefault(require("../../__internal__/popover"));
 
 var _utils = require("../../style/utils");
 
+var _focusTrapUtils = require("../../__internal__/focus-trap/focus-trap-utils");
+
 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; }
@@ -43,6 +45,7 @@ const MultiActionButton = ({
   ...rest
 }) => {
   const ref = (0, _react.useRef)();
+  const buttonRef = (0, _react.useRef)();
   const buttonContainer = (0, _react.useRef)();
   const userInputType = "ontouchstart" in document.documentElement ? "touchstart" : "click";
 
@@ -97,7 +100,12 @@ const MultiActionButton = ({
       nextIndex = currentIndex < children.length - 1 ? currentIndex + 1 : 0;
       ev.preventDefault();
     } else if (_events.default.isTabKey(ev)) {
-      // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+      var _elements$indexOf;
+
+      const elements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
+      const indexOf = elements.indexOf(buttonRef.current);
+      (_elements$indexOf = elements[indexOf]) === null || _elements$indexOf === void 0 ? void 0 : _elements$indexOf.focus(); // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+
       setTimeout(hideButtons, 0);
     }
 
@@ -205,6 +213,7 @@ const MultiActionButton = ({
     key: "toggle-button",
     onKeyDown: handleMainButtonKeyDown
   }, mainButtonProps(), {
+    forwardRef: buttonRef,
     iconPosition: "after",
     iconType: "dropdown"
   }), text), showAdditionalButtons && renderAdditionalButtons());

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

@@ -33,6 +33,8 @@ var _utils = require("../../style/utils");
 
 var _themes = require("../../style/themes");
 
+var _focusTrapUtils = require("../../__internal__/focus-trap/focus-trap-utils");
+
 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; }
@@ -64,6 +66,7 @@ const SplitButton = ({
   const buttonLabelId = (0, _react.useRef)((0, _guid.default)());
   const additionalButtons = (0, _react.useRef)([]);
   const splitButtonNode = (0, _react.useRef)();
+  const toggleButton = (0, _react.useRef)();
   const buttonContainer = (0, _react.useRef)();
   const [showAdditionalButtons, setShowAdditionalButtons] = (0, _react.useState)(false);
   const [minWidth, setMinWidth] = (0, _react.useState)(0);
@@ -97,7 +100,12 @@ const SplitButton = ({
       nextIndex = currentIndex < numOfChildren ? currentIndex + 1 : 0;
       ev.preventDefault();
     } else if (_events.default.isTabKey(ev)) {
-      // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+      var _elements$indexOf;
+
+      const elements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
+      const indexOf = elements.indexOf(toggleButton.current);
+      (_elements$indexOf = elements[indexOf]) === null || _elements$indexOf === void 0 ? void 0 : _elements$indexOf.focus(); // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+
       setTimeout(hideButtons, 0);
     }
 
@@ -184,7 +192,8 @@ const SplitButton = ({
       "aria-label": "Show more",
       "data-element": "toggle-button",
       key: "toggle-button",
-      type: "button"
+      type: "button",
+      ref: toggleButton
     }, toggleButtonProps()), /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: "dropdown",
       bgSize: "extra-small",

package/package.json

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