carbon-react 119.9.2 → 119.9.3

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

@@ -8,6 +8,7 @@ import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import Logger from "../../__internal__/utils/logger";
 import { ButtonBarContext } from "../button-bar/button-bar.component";
+import SplitButtonContext from "../split-button/__internal__/split-button.context";
 function renderChildren(_ref) {
   let {
     /* eslint-disable react/prop-types */
@@ -79,6 +80,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     iconTooltipMessage,
     iconTooltipPosition,
     fullWidth: fullWidthProp = false,
+    onClick,
     ...rest
   } = _ref2;
   const {
@@ -104,6 +106,10 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     Logger.deprecate("The `dashed` variant of the `buttonType` prop for `Button` component is deprecated and will soon be removed.");
   }
   const [internalRef, setInternalRef] = useState();
+  const {
+    inSplitButton,
+    onChildButtonClick
+  } = useContext(SplitButtonContext);
   let paddingX;
   const handleLinkKeyDown = event => {
     // If space key click link
@@ -134,11 +140,12 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     "aria-label": !isValidChildren && iconType ? ariaLabel || iconType : ariaLabel,
     as: !disabled && href ? "a" : "button",
     onKeyDown: href ? handleLinkKeyDown : undefined,
+    onClick: inSplitButton ? onChildButtonClick?.(onClick) : onClick,
     draggable: false,
     buttonType: buttonType,
     disabled: disabled,
     destructive: destructive,
-    role: "button",
+    role: inSplitButton ? "menu-item" : "button",
     type: href ? undefined : "button",
     iconType: iconType,
     size: size,

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

@@ -1,13 +1,13 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useCallback, useState, useRef, useMemo } from "react";
+import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
+import SplitButtonContext from "../split-button/__internal__/split-button.context";
 import { StyledMultiActionButton, StyledButtonChildrenContainer } from "./multi-action-button.style";
 import Button from "../button";
-import Events from "../../__internal__/utils/helpers/events";
 import Popover from "../../__internal__/popover";
 import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from "../../style/utils";
-import useMenuKeyboardNavigation from "../../hooks/__internal__/useMenuKeyboardNavigation";
+import useChildButtons from "../../hooks/__internal__/useChildButtons";
 export const MultiActionButton = _ref => {
   let {
     align = "left",
@@ -23,57 +23,17 @@ export const MultiActionButton = _ref => {
     "data-role": dataRole,
     ...rest
   } = _ref;
-  const ref = useRef(null);
   const buttonRef = useRef(null);
-  const buttonContainer = useRef(null);
-  const buttonChildren = useMemo(() => React.Children.toArray(children), [children]);
-  const buttonChildrenRefs = useMemo(() => buttonChildren.map(() => /*#__PURE__*/React.createRef()), [buttonChildren]);
-  const [showAdditionalButtons, setShowAdditionalButtons] = useState(false);
-  const [minWidth, setMinWidth] = useState(0);
-  const hideButtons = useCallback(() => {
-    setShowAdditionalButtons(false);
-  }, []);
-  const showButtons = () => {
-    setShowAdditionalButtons(true);
-
-    /* istanbul ignore else */
-    if (ref.current) {
-      setMinWidth(ref.current.getBoundingClientRect().width);
-    }
-  };
-  const childrenWithProps = () => {
-    return buttonChildren.map((child, index) => {
-      if (! /*#__PURE__*/React.isValidElement(child)) {
-        return child;
-      }
-      const props = {
-        key: index.toString(),
-        role: "menuitem",
-        ref: buttonChildrenRefs[index],
-        tabIndex: -1,
-        onClick: ev => {
-          if (child.props.onClick) child.props.onClick(ev);
-          hideButtons();
-          buttonRef.current?.focus();
-        }
-      };
-      return /*#__PURE__*/React.cloneElement(child, props);
-    });
-  };
-  const handleKeyDown = useMenuKeyboardNavigation(buttonRef, buttonChildrenRefs, hideButtons, showAdditionalButtons);
-  const handleMainButtonKeyDown = ev => {
-    if (Events.isEnterKey(ev) || Events.isSpaceKey(ev) || Events.isDownKey(ev) || Events.isUpKey(ev)) {
-      ev.preventDefault();
-      if (!showAdditionalButtons) {
-        showButtons();
-      }
-
-      // see if setTimeout could be removed after we update react to v18 thanks to the concurrent mode
-      setTimeout(() => {
-        buttonChildrenRefs[0]?.current?.focus();
-      }, 0);
-    }
-  };
+  const {
+    showAdditionalButtons,
+    showButtons,
+    hideButtons,
+    buttonNode,
+    hideButtonsIfTriggerNotFocused,
+    handleToggleButtonKeyDown,
+    wrapperProps,
+    contextValue
+  } = useChildButtons(buttonRef);
   const handleInsideClick = useClickAwayListener(hideButtons);
   const handleClick = ev => {
     showButtons();
@@ -86,7 +46,7 @@ export const MultiActionButton = _ref => {
     disabled,
     displayed: showAdditionalButtons,
     onTouchStart: showButtons,
-    onKeyDown: handleMainButtonKeyDown,
+    onKeyDown: handleToggleButtonKeyDown,
     onClick: handleClick,
     buttonType,
     size,
@@ -98,24 +58,17 @@ export const MultiActionButton = _ref => {
   };
   const renderAdditionalButtons = () => /*#__PURE__*/React.createElement(Popover, {
     placement: "bottom-end",
-    reference: ref
-  }, /*#__PURE__*/React.createElement(StyledButtonChildrenContainer, {
-    role: "menu",
+    reference: buttonNode
+  }, /*#__PURE__*/React.createElement(StyledButtonChildrenContainer, _extends({}, wrapperProps, {
     "aria-label": text,
-    "data-element": "additional-buttons",
-    align: align,
-    minWidth: minWidth,
-    ref: buttonContainer,
-    onKeyDown: handleKeyDown
-  }, childrenWithProps()));
-  const hideButtonsIfTriggerNotFocused = useCallback(() => {
-    if (buttonRef.current === document.activeElement) return;
-    setShowAdditionalButtons(false);
-  }, []);
+    align: align
+  }), /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
+    value: contextValue
+  }, children)));
   const marginProps = filterStyledSystemMarginProps(rest);
   return /*#__PURE__*/React.createElement(StyledMultiActionButton, _extends({
     onMouseLeave: hideButtonsIfTriggerNotFocused,
-    ref: ref,
+    ref: buttonNode,
     "data-component": "multi-action-button",
     "data-element": dataElement,
     "data-role": dataRole,

package/esm/components/split-button/__internal__/split-button.context.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface SplitButtonContextProps {
+    inSplitButton: boolean;
+    onChildButtonClick?: (childOnClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>) => React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement> | undefined;
+}
+declare const _default: React.Context<SplitButtonContextProps>;
+export default _default;

package/esm/components/split-button/__internal__/split-button.context.js

@@ -0,0 +1,4 @@
+import React from "react";
+export default /*#__PURE__*/React.createContext({
+  inSplitButton: false
+});

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

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useContext, useCallback, useMemo, useRef, useState } from "react";
+import React, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
 import { ThemeContext } from "styled-components";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
@@ -8,12 +8,12 @@ import Button from "../button";
 import StyledSplitButton from "./split-button.style";
 import StyledSplitButtonToggle from "./split-button-toggle.style";
 import StyledSplitButtonChildrenContainer from "./split-button-children.style";
-import Events from "../../__internal__/utils/helpers/events";
 import guid from "../../__internal__/utils/helpers/guid";
 import Popover from "../../__internal__/popover";
 import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from "../../style/utils";
 import { baseTheme } from "../../style/themes";
-import useMenuKeyboardNavigation from "../../hooks/__internal__/useMenuKeyboardNavigation";
+import useChildButtons from "../../hooks/__internal__/useChildButtons";
+import SplitButtonContext from "./__internal__/split-button.context";
 const CONTENT_WIDTH_RATIO = 0.75;
 export const SplitButton = _ref => {
   let {
@@ -33,39 +33,17 @@ export const SplitButton = _ref => {
   } = _ref;
   const theme = useContext(ThemeContext) || baseTheme;
   const buttonLabelId = useRef(guid());
-  const buttonChildren = useMemo(() => React.Children.toArray(children), [children]);
-  const buttonChildrenRefs = useMemo(() => buttonChildren.map(() => /*#__PURE__*/React.createRef()), [buttonChildren]);
-  const splitButtonNode = useRef(null);
   const toggleButton = useRef(null);
-  const [showAdditionalButtons, setShowAdditionalButtons] = useState(false);
-  const [minWidth, setMinWidth] = useState(0);
-  const hideButtons = useCallback(() => {
-    setShowAdditionalButtons(false);
-  }, []);
-  const handleKeyDown = useMenuKeyboardNavigation(toggleButton, buttonChildrenRefs, hideButtons, showAdditionalButtons);
-  function showButtons() {
-    setShowAdditionalButtons(true);
-
-    /* istanbul ignore else */
-    if (splitButtonNode.current) {
-      setMinWidth(CONTENT_WIDTH_RATIO * splitButtonNode.current.getBoundingClientRect().width);
-    }
-  }
-  function handleToggleButtonKeyDown(ev) {
-    if (Events.isEnterKey(ev) || Events.isSpaceKey(ev) || Events.isDownKey(ev) || Events.isUpKey(ev)) {
-      ev.preventDefault();
-      if (!showAdditionalButtons) {
-        showButtons();
-      }
-      setTimeout(() => {
-        buttonChildrenRefs[0]?.current?.focus();
-      }, 0);
-    }
-  }
-  const hideButtonsIfTriggerNotFocused = useCallback(() => {
-    if (toggleButton.current === document.activeElement) return;
-    setShowAdditionalButtons(false);
-  }, []);
+  const {
+    showAdditionalButtons,
+    showButtons,
+    hideButtons,
+    buttonNode,
+    hideButtonsIfTriggerNotFocused,
+    handleToggleButtonKeyDown,
+    wrapperProps,
+    contextValue
+  } = useChildButtons(toggleButton, CONTENT_WIDTH_RATIO);
   const mainButtonProps = {
     onMouseEnter: hideButtonsIfTriggerNotFocused,
     onFocus: hideButtonsIfTriggerNotFocused,
@@ -126,43 +104,24 @@ export const SplitButton = _ref => {
       disabled: disabled
     }))];
   }
-  function childrenWithProps() {
-    const childArray = Array.isArray(children) ? children : [children];
-    return childArray.filter(Boolean).map((child, index) => {
-      const childProps = {
-        key: index.toString(),
-        role: "menuitem",
-        ref: buttonChildrenRefs[index],
-        tabIndex: -1,
-        onClick: ev => {
-          if (child.props.onClick) child.props.onClick(ev);
-          hideButtons();
-          toggleButton.current?.focus();
-        }
-      };
-      return /*#__PURE__*/React.cloneElement(child, childProps);
-    });
-  }
   function renderAdditionalButtons() {
     if (!showAdditionalButtons) return null;
     return /*#__PURE__*/React.createElement(Popover, {
       placement: "bottom-end",
-      reference: splitButtonNode
-    }, /*#__PURE__*/React.createElement(StyledSplitButtonChildrenContainer, {
-      role: "menu",
+      reference: buttonNode
+    }, /*#__PURE__*/React.createElement(StyledSplitButtonChildrenContainer, _extends({}, wrapperProps, {
       "aria-label": text,
-      "data-element": "additional-buttons",
-      align: align,
-      minWidth: minWidth,
-      onKeyDown: handleKeyDown
-    }, childrenWithProps()));
+      align: align
+    }), /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
+      value: contextValue
+    }, children)));
   }
   const handleClick = useClickAwayListener(hideButtons);
   const marginProps = filterStyledSystemMarginProps(rest);
   return /*#__PURE__*/React.createElement(StyledSplitButton, _extends({
     onMouseLeave: hideButtonsIfTriggerNotFocused,
     onClick: handleClick,
-    ref: splitButtonNode
+    ref: buttonNode
   }, componentTags(), marginProps), renderMainButton(), renderAdditionalButtons());
 };
 export default SplitButton;

package/esm/hooks/__internal__/useChildButtons/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useChildButtons";

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

@@ -0,0 +1 @@
+export { default } from "./useChildButtons";

package/esm/hooks/__internal__/useChildButtons/useChildButtons.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+declare const useChildButtons: (toggleButtonRef: React.RefObject<HTMLButtonElement>, widthRatio?: number) => {
+    showAdditionalButtons: boolean;
+    showButtons: () => void;
+    hideButtons: () => void;
+    buttonNode: import("react").RefObject<HTMLDivElement>;
+    hideButtonsIfTriggerNotFocused: () => void;
+    handleToggleButtonKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
+    wrapperProps: {
+        role: string;
+        "data-element": string;
+        onKeyDown: (ev: any) => void;
+        minWidth: number;
+        ref: import("react").RefObject<HTMLDivElement>;
+    };
+    contextValue: {
+        inSplitButton: boolean;
+        onChildButtonClick: (childOnClick?: React.MouseEventHandler<HTMLButtonElement>) => (ev: React.MouseEvent<HTMLButtonElement>) => void;
+    };
+};
+export default useChildButtons;

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

@@ -0,0 +1,71 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import Events from "../../../__internal__/utils/helpers/events";
+import useMenuKeyboardNavigation from "../useMenuKeyboardNavigation";
+const useChildButtons = function (toggleButtonRef) {
+  let widthRatio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  const [showAdditionalButtons, setShowAdditionalButtons] = useState(false);
+  const [minWidth, setMinWidth] = useState(0);
+  const buttonNode = useRef(null);
+  const childrenContainer = useRef(null);
+  const focusFirstChildButtonOnOpen = useRef(false);
+  const hideButtons = useCallback(() => {
+    setShowAdditionalButtons(false);
+  }, []);
+  function showButtons() {
+    setShowAdditionalButtons(true);
+
+    /* istanbul ignore else */
+    if (buttonNode.current) {
+      setMinWidth(widthRatio * buttonNode.current.getBoundingClientRect().width);
+    }
+  }
+  const getButtonChildren = useCallback(() => childrenContainer.current?.querySelectorAll('[data-component="button"]'), []);
+  useEffect(() => {
+    const firstChild = getButtonChildren()?.[0];
+    if (focusFirstChildButtonOnOpen.current && showAdditionalButtons && firstChild) {
+      focusFirstChildButtonOnOpen.current = false;
+      firstChild.focus();
+    }
+  }, [showAdditionalButtons, getButtonChildren]);
+  const handleToggleButtonKeyDown = ev => {
+    if (Events.isEnterKey(ev) || Events.isSpaceKey(ev) || Events.isDownKey(ev) || Events.isUpKey(ev)) {
+      ev.preventDefault();
+      if (!showAdditionalButtons) {
+        showButtons();
+      }
+      focusFirstChildButtonOnOpen.current = true;
+    }
+  };
+  const handleKeyDown = useMenuKeyboardNavigation(toggleButtonRef, getButtonChildren, hideButtons, showAdditionalButtons);
+  const onChildButtonClick = childOnClick => ev => {
+    childOnClick?.(ev);
+    hideButtons();
+    toggleButtonRef.current?.focus();
+  };
+  const hideButtonsIfTriggerNotFocused = useCallback(() => {
+    if (toggleButtonRef.current === document.activeElement) return;
+    setShowAdditionalButtons(false);
+  }, [toggleButtonRef]);
+  const wrapperProps = {
+    role: "menu",
+    "data-element": "additional-buttons",
+    onKeyDown: handleKeyDown,
+    minWidth,
+    ref: childrenContainer
+  };
+  const contextValue = {
+    inSplitButton: true,
+    onChildButtonClick
+  };
+  return {
+    showAdditionalButtons,
+    showButtons,
+    hideButtons,
+    buttonNode,
+    hideButtonsIfTriggerNotFocused,
+    handleToggleButtonKeyDown,
+    wrapperProps,
+    contextValue
+  };
+};
+export default useChildButtons;

package/esm/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (mainControlRef: React.RefObject<HTMLButtonElement>, childrenRefs: React.RefObject<HTMLButtonElement>[], hide: () => void, isOpen: boolean) => (ev: any) => void;
+declare const _default: (mainControlRef: React.RefObject<HTMLButtonElement>, getButtonChildren: () => NodeListOf<HTMLButtonElement>, hide: () => void, isOpen: boolean) => (ev: any) => void;
 export default _default;

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

@@ -1,9 +1,8 @@
-import { useCallback, useMemo } from "react";
+import { useCallback } 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, childrenRefs, hide, isOpen) => {
-  const childrenLength = useMemo(() => childrenRefs.length, [childrenRefs]);
+export default ((mainControlRef, getButtonChildren, hide, isOpen) => {
   const refocusMainControl = useCallback(() => {
     hide();
     mainControlRef.current?.focus();
@@ -26,8 +25,10 @@ export default ((mainControlRef, childrenRefs, hide, isOpen) => {
     if (!(Events.isEnterKey(ev) || Events.isSpaceKey(ev))) {
       ev.preventDefault();
     }
-    const currentIndex = childrenRefs?.findIndex(node => node.current === document.activeElement);
+    const buttonChildren = getButtonChildren();
+    const childrenLength = buttonChildren?.length;
     let nextIndex = -1;
+    const currentIndex = Array.from(buttonChildren).indexOf(document.activeElement);
     const arrowModifierPressed = ev.ctrlKey || ev.metaKey;
     if (Events.isEndKey(ev) || arrowModifierPressed && Events.isDownKey(ev)) {
       nextIndex = childrenLength - 1;
@@ -54,15 +55,15 @@ export default ((mainControlRef, childrenRefs, hide, isOpen) => {
         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
+        // 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) {
-      childrenRefs[nextIndex].current?.focus();
+      buttonChildren?.[nextIndex]?.focus();
     }
-  }, [childrenLength, hide, refocusMainControl, childrenRefs, mainControlRef]);
+  }, [hide, refocusMainControl, mainControlRef, getButtonChildren]);
   return handleKeyDown;
 });

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

@@ -13,6 +13,7 @@ var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tag
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _buttonBar = require("../button-bar/button-bar.component");
+var _splitButton = _interopRequireDefault(require("../split-button/__internal__/split-button.context"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -88,6 +89,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     iconTooltipMessage,
     iconTooltipPosition,
     fullWidth: fullWidthProp = false,
+    onClick,
     ...rest
   } = _ref2;
   const {
@@ -113,6 +115,10 @@ const Button = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     _logger.default.deprecate("The `dashed` variant of the `buttonType` prop for `Button` component is deprecated and will soon be removed.");
   }
   const [internalRef, setInternalRef] = (0, _react.useState)();
+  const {
+    inSplitButton,
+    onChildButtonClick
+  } = (0, _react.useContext)(_splitButton.default);
   let paddingX;
   const handleLinkKeyDown = event => {
     // If space key click link
@@ -143,11 +149,12 @@ const Button = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     "aria-label": !isValidChildren && iconType ? ariaLabel || iconType : ariaLabel,
     as: !disabled && href ? "a" : "button",
     onKeyDown: href ? handleLinkKeyDown : undefined,
+    onClick: inSplitButton ? onChildButtonClick?.(onClick) : onClick,
     draggable: false,
     buttonType: buttonType,
     disabled: disabled,
     destructive: destructive,
-    role: "button",
+    role: inSplitButton ? "menu-item" : "button",
     type: href ? undefined : "button",
     iconType: iconType,
     size: size,

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

@@ -7,12 +7,12 @@ exports.default = exports.MultiActionButton = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
+var _splitButton = _interopRequireDefault(require("../split-button/__internal__/split-button.context"));
 var _multiActionButton = require("./multi-action-button.style");
 var _button = _interopRequireDefault(require("../button"));
-var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 var _popover = _interopRequireDefault(require("../../__internal__/popover"));
 var _utils = require("../../style/utils");
-var _useMenuKeyboardNavigation = _interopRequireDefault(require("../../hooks/__internal__/useMenuKeyboardNavigation"));
+var _useChildButtons = _interopRequireDefault(require("../../hooks/__internal__/useChildButtons"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -32,57 +32,17 @@ const MultiActionButton = _ref => {
     "data-role": dataRole,
     ...rest
   } = _ref;
-  const ref = (0, _react.useRef)(null);
   const buttonRef = (0, _react.useRef)(null);
-  const buttonContainer = (0, _react.useRef)(null);
-  const buttonChildren = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
-  const buttonChildrenRefs = (0, _react.useMemo)(() => buttonChildren.map(() => /*#__PURE__*/_react.default.createRef()), [buttonChildren]);
-  const [showAdditionalButtons, setShowAdditionalButtons] = (0, _react.useState)(false);
-  const [minWidth, setMinWidth] = (0, _react.useState)(0);
-  const hideButtons = (0, _react.useCallback)(() => {
-    setShowAdditionalButtons(false);
-  }, []);
-  const showButtons = () => {
-    setShowAdditionalButtons(true);
-
-    /* istanbul ignore else */
-    if (ref.current) {
-      setMinWidth(ref.current.getBoundingClientRect().width);
-    }
-  };
-  const childrenWithProps = () => {
-    return buttonChildren.map((child, index) => {
-      if (! /*#__PURE__*/_react.default.isValidElement(child)) {
-        return child;
-      }
-      const props = {
-        key: index.toString(),
-        role: "menuitem",
-        ref: buttonChildrenRefs[index],
-        tabIndex: -1,
-        onClick: ev => {
-          if (child.props.onClick) child.props.onClick(ev);
-          hideButtons();
-          buttonRef.current?.focus();
-        }
-      };
-      return /*#__PURE__*/_react.default.cloneElement(child, props);
-    });
-  };
-  const handleKeyDown = (0, _useMenuKeyboardNavigation.default)(buttonRef, buttonChildrenRefs, hideButtons, showAdditionalButtons);
-  const handleMainButtonKeyDown = ev => {
-    if (_events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev) || _events.default.isDownKey(ev) || _events.default.isUpKey(ev)) {
-      ev.preventDefault();
-      if (!showAdditionalButtons) {
-        showButtons();
-      }
-
-      // see if setTimeout could be removed after we update react to v18 thanks to the concurrent mode
-      setTimeout(() => {
-        buttonChildrenRefs[0]?.current?.focus();
-      }, 0);
-    }
-  };
+  const {
+    showAdditionalButtons,
+    showButtons,
+    hideButtons,
+    buttonNode,
+    hideButtonsIfTriggerNotFocused,
+    handleToggleButtonKeyDown,
+    wrapperProps,
+    contextValue
+  } = (0, _useChildButtons.default)(buttonRef);
   const handleInsideClick = (0, _useClickAwayListener.default)(hideButtons);
   const handleClick = ev => {
     showButtons();
@@ -95,7 +55,7 @@ const MultiActionButton = _ref => {
     disabled,
     displayed: showAdditionalButtons,
     onTouchStart: showButtons,
-    onKeyDown: handleMainButtonKeyDown,
+    onKeyDown: handleToggleButtonKeyDown,
     onClick: handleClick,
     buttonType,
     size,
@@ -107,24 +67,17 @@ const MultiActionButton = _ref => {
   };
   const renderAdditionalButtons = () => /*#__PURE__*/_react.default.createElement(_popover.default, {
     placement: "bottom-end",
-    reference: ref
-  }, /*#__PURE__*/_react.default.createElement(_multiActionButton.StyledButtonChildrenContainer, {
-    role: "menu",
+    reference: buttonNode
+  }, /*#__PURE__*/_react.default.createElement(_multiActionButton.StyledButtonChildrenContainer, _extends({}, wrapperProps, {
     "aria-label": text,
-    "data-element": "additional-buttons",
-    align: align,
-    minWidth: minWidth,
-    ref: buttonContainer,
-    onKeyDown: handleKeyDown
-  }, childrenWithProps()));
-  const hideButtonsIfTriggerNotFocused = (0, _react.useCallback)(() => {
-    if (buttonRef.current === document.activeElement) return;
-    setShowAdditionalButtons(false);
-  }, []);
+    align: align
+  }), /*#__PURE__*/_react.default.createElement(_splitButton.default.Provider, {
+    value: contextValue
+  }, children)));
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   return /*#__PURE__*/_react.default.createElement(_multiActionButton.StyledMultiActionButton, _extends({
     onMouseLeave: hideButtonsIfTriggerNotFocused,
-    ref: ref,
+    ref: buttonNode,
     "data-component": "multi-action-button",
     "data-element": dataElement,
     "data-role": dataRole,

package/lib/components/split-button/__internal__/split-button.context.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface SplitButtonContextProps {
+    inSplitButton: boolean;
+    onChildButtonClick?: (childOnClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>) => React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement> | undefined;
+}
+declare const _default: React.Context<SplitButtonContextProps>;
+export default _default;

package/lib/components/split-button/__internal__/split-button.context.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = /*#__PURE__*/_react.default.createContext({
+  inSplitButton: false
+});
+exports.default = _default;

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

@@ -13,12 +13,12 @@ var _button = _interopRequireDefault(require("../button"));
 var _splitButton = _interopRequireDefault(require("./split-button.style"));
 var _splitButtonToggle = _interopRequireDefault(require("./split-button-toggle.style"));
 var _splitButtonChildren = _interopRequireDefault(require("./split-button-children.style"));
-var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 var _popover = _interopRequireDefault(require("../../__internal__/popover"));
 var _utils = require("../../style/utils");
 var _themes = require("../../style/themes");
-var _useMenuKeyboardNavigation = _interopRequireDefault(require("../../hooks/__internal__/useMenuKeyboardNavigation"));
+var _useChildButtons = _interopRequireDefault(require("../../hooks/__internal__/useChildButtons"));
+var _splitButton2 = _interopRequireDefault(require("./__internal__/split-button.context"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -42,39 +42,17 @@ const SplitButton = _ref => {
   } = _ref;
   const theme = (0, _react.useContext)(_styledComponents.ThemeContext) || _themes.baseTheme;
   const buttonLabelId = (0, _react.useRef)((0, _guid.default)());
-  const buttonChildren = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
-  const buttonChildrenRefs = (0, _react.useMemo)(() => buttonChildren.map(() => /*#__PURE__*/_react.default.createRef()), [buttonChildren]);
-  const splitButtonNode = (0, _react.useRef)(null);
   const toggleButton = (0, _react.useRef)(null);
-  const [showAdditionalButtons, setShowAdditionalButtons] = (0, _react.useState)(false);
-  const [minWidth, setMinWidth] = (0, _react.useState)(0);
-  const hideButtons = (0, _react.useCallback)(() => {
-    setShowAdditionalButtons(false);
-  }, []);
-  const handleKeyDown = (0, _useMenuKeyboardNavigation.default)(toggleButton, buttonChildrenRefs, hideButtons, showAdditionalButtons);
-  function showButtons() {
-    setShowAdditionalButtons(true);
-
-    /* istanbul ignore else */
-    if (splitButtonNode.current) {
-      setMinWidth(CONTENT_WIDTH_RATIO * splitButtonNode.current.getBoundingClientRect().width);
-    }
-  }
-  function handleToggleButtonKeyDown(ev) {
-    if (_events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev) || _events.default.isDownKey(ev) || _events.default.isUpKey(ev)) {
-      ev.preventDefault();
-      if (!showAdditionalButtons) {
-        showButtons();
-      }
-      setTimeout(() => {
-        buttonChildrenRefs[0]?.current?.focus();
-      }, 0);
-    }
-  }
-  const hideButtonsIfTriggerNotFocused = (0, _react.useCallback)(() => {
-    if (toggleButton.current === document.activeElement) return;
-    setShowAdditionalButtons(false);
-  }, []);
+  const {
+    showAdditionalButtons,
+    showButtons,
+    hideButtons,
+    buttonNode,
+    hideButtonsIfTriggerNotFocused,
+    handleToggleButtonKeyDown,
+    wrapperProps,
+    contextValue
+  } = (0, _useChildButtons.default)(toggleButton, CONTENT_WIDTH_RATIO);
   const mainButtonProps = {
     onMouseEnter: hideButtonsIfTriggerNotFocused,
     onFocus: hideButtonsIfTriggerNotFocused,
@@ -135,43 +113,24 @@ const SplitButton = _ref => {
       disabled: disabled
     }))];
   }
-  function childrenWithProps() {
-    const childArray = Array.isArray(children) ? children : [children];
-    return childArray.filter(Boolean).map((child, index) => {
-      const childProps = {
-        key: index.toString(),
-        role: "menuitem",
-        ref: buttonChildrenRefs[index],
-        tabIndex: -1,
-        onClick: ev => {
-          if (child.props.onClick) child.props.onClick(ev);
-          hideButtons();
-          toggleButton.current?.focus();
-        }
-      };
-      return /*#__PURE__*/_react.default.cloneElement(child, childProps);
-    });
-  }
   function renderAdditionalButtons() {
     if (!showAdditionalButtons) return null;
     return /*#__PURE__*/_react.default.createElement(_popover.default, {
       placement: "bottom-end",
-      reference: splitButtonNode
-    }, /*#__PURE__*/_react.default.createElement(_splitButtonChildren.default, {
-      role: "menu",
+      reference: buttonNode
+    }, /*#__PURE__*/_react.default.createElement(_splitButtonChildren.default, _extends({}, wrapperProps, {
       "aria-label": text,
-      "data-element": "additional-buttons",
-      align: align,
-      minWidth: minWidth,
-      onKeyDown: handleKeyDown
-    }, childrenWithProps()));
+      align: align
+    }), /*#__PURE__*/_react.default.createElement(_splitButton2.default.Provider, {
+      value: contextValue
+    }, children)));
   }
   const handleClick = (0, _useClickAwayListener.default)(hideButtons);
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   return /*#__PURE__*/_react.default.createElement(_splitButton.default, _extends({
     onMouseLeave: hideButtonsIfTriggerNotFocused,
     onClick: handleClick,
-    ref: splitButtonNode
+    ref: buttonNode
   }, componentTags(), marginProps), renderMainButton(), renderAdditionalButtons());
 };
 exports.SplitButton = SplitButton;

package/lib/hooks/__internal__/useChildButtons/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useChildButtons";

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useChildButtons.default;
+  }
+});
+var _useChildButtons = _interopRequireDefault(require("./useChildButtons"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/hooks/__internal__/useChildButtons/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/hooks/__internal__/useChildButtons/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/hooks/__internal__/useChildButtons/useChildButtons.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+declare const useChildButtons: (toggleButtonRef: React.RefObject<HTMLButtonElement>, widthRatio?: number) => {
+    showAdditionalButtons: boolean;
+    showButtons: () => void;
+    hideButtons: () => void;
+    buttonNode: import("react").RefObject<HTMLDivElement>;
+    hideButtonsIfTriggerNotFocused: () => void;
+    handleToggleButtonKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
+    wrapperProps: {
+        role: string;
+        "data-element": string;
+        onKeyDown: (ev: any) => void;
+        minWidth: number;
+        ref: import("react").RefObject<HTMLDivElement>;
+    };
+    contextValue: {
+        inSplitButton: boolean;
+        onChildButtonClick: (childOnClick?: React.MouseEventHandler<HTMLButtonElement>) => (ev: React.MouseEvent<HTMLButtonElement>) => void;
+    };
+};
+export default useChildButtons;

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

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
+var _useMenuKeyboardNavigation = _interopRequireDefault(require("../useMenuKeyboardNavigation"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const useChildButtons = function (toggleButtonRef) {
+  let widthRatio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  const [showAdditionalButtons, setShowAdditionalButtons] = (0, _react.useState)(false);
+  const [minWidth, setMinWidth] = (0, _react.useState)(0);
+  const buttonNode = (0, _react.useRef)(null);
+  const childrenContainer = (0, _react.useRef)(null);
+  const focusFirstChildButtonOnOpen = (0, _react.useRef)(false);
+  const hideButtons = (0, _react.useCallback)(() => {
+    setShowAdditionalButtons(false);
+  }, []);
+  function showButtons() {
+    setShowAdditionalButtons(true);
+
+    /* istanbul ignore else */
+    if (buttonNode.current) {
+      setMinWidth(widthRatio * buttonNode.current.getBoundingClientRect().width);
+    }
+  }
+  const getButtonChildren = (0, _react.useCallback)(() => childrenContainer.current?.querySelectorAll('[data-component="button"]'), []);
+  (0, _react.useEffect)(() => {
+    const firstChild = getButtonChildren()?.[0];
+    if (focusFirstChildButtonOnOpen.current && showAdditionalButtons && firstChild) {
+      focusFirstChildButtonOnOpen.current = false;
+      firstChild.focus();
+    }
+  }, [showAdditionalButtons, getButtonChildren]);
+  const handleToggleButtonKeyDown = ev => {
+    if (_events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev) || _events.default.isDownKey(ev) || _events.default.isUpKey(ev)) {
+      ev.preventDefault();
+      if (!showAdditionalButtons) {
+        showButtons();
+      }
+      focusFirstChildButtonOnOpen.current = true;
+    }
+  };
+  const handleKeyDown = (0, _useMenuKeyboardNavigation.default)(toggleButtonRef, getButtonChildren, hideButtons, showAdditionalButtons);
+  const onChildButtonClick = childOnClick => ev => {
+    childOnClick?.(ev);
+    hideButtons();
+    toggleButtonRef.current?.focus();
+  };
+  const hideButtonsIfTriggerNotFocused = (0, _react.useCallback)(() => {
+    if (toggleButtonRef.current === document.activeElement) return;
+    setShowAdditionalButtons(false);
+  }, [toggleButtonRef]);
+  const wrapperProps = {
+    role: "menu",
+    "data-element": "additional-buttons",
+    onKeyDown: handleKeyDown,
+    minWidth,
+    ref: childrenContainer
+  };
+  const contextValue = {
+    inSplitButton: true,
+    onChildButtonClick
+  };
+  return {
+    showAdditionalButtons,
+    showButtons,
+    hideButtons,
+    buttonNode,
+    hideButtonsIfTriggerNotFocused,
+    handleToggleButtonKeyDown,
+    wrapperProps,
+    contextValue
+  };
+};
+var _default = useChildButtons;
+exports.default = _default;

package/lib/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (mainControlRef: React.RefObject<HTMLButtonElement>, childrenRefs: React.RefObject<HTMLButtonElement>[], hide: () => void, isOpen: boolean) => (ev: any) => void;
+declare const _default: (mainControlRef: React.RefObject<HTMLButtonElement>, getButtonChildren: () => NodeListOf<HTMLButtonElement>, hide: () => void, isOpen: boolean) => (ev: any) => void;
 export default _default;

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

@@ -9,8 +9,7 @@ var _events = _interopRequireDefault(require("../../../__internal__/utils/helper
 var _focusTrapUtils = require("../../../__internal__/focus-trap/focus-trap-utils");
 var _useModalManager = _interopRequireDefault(require("../useModalManager"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = (mainControlRef, childrenRefs, hide, isOpen) => {
-  const childrenLength = (0, _react.useMemo)(() => childrenRefs.length, [childrenRefs]);
+var _default = (mainControlRef, getButtonChildren, hide, isOpen) => {
   const refocusMainControl = (0, _react.useCallback)(() => {
     hide();
     mainControlRef.current?.focus();
@@ -33,8 +32,10 @@ var _default = (mainControlRef, childrenRefs, hide, isOpen) => {
     if (!(_events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev))) {
       ev.preventDefault();
     }
-    const currentIndex = childrenRefs?.findIndex(node => node.current === document.activeElement);
+    const buttonChildren = getButtonChildren();
+    const childrenLength = buttonChildren?.length;
     let nextIndex = -1;
+    const currentIndex = Array.from(buttonChildren).indexOf(document.activeElement);
     const arrowModifierPressed = ev.ctrlKey || ev.metaKey;
     if (_events.default.isEndKey(ev) || arrowModifierPressed && _events.default.isDownKey(ev)) {
       nextIndex = childrenLength - 1;
@@ -61,16 +62,16 @@ var _default = (mainControlRef, childrenRefs, hide, isOpen) => {
         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
+        // 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) {
-      childrenRefs[nextIndex].current?.focus();
+      buttonChildren?.[nextIndex]?.focus();
     }
-  }, [childrenLength, hide, refocusMainControl, childrenRefs, mainControlRef]);
+  }, [hide, refocusMainControl, mainControlRef, getButtonChildren]);
   return handleKeyDown;
 };
 exports.default = _default;

package/package.json

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