carbon-react 119.9.2 → 119.10.0

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/checkbox/checkbox-group.component.d.ts

@@ -4,6 +4,8 @@ import { ValidationProps } from "../../__internal__/validations";
 export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     /** The content for the CheckboxGroup Legend */
     legend?: string;
+    /** The content for the CheckboxGroup Legend Help text  */
+    legendHelp?: string;
     /** When true, legend is placed inline with the checkboxes */
     legendInline?: boolean;
     /** Percentage width of legend (only when legend is inline)  */
@@ -20,6 +22,8 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     required?: boolean;
     /** Overrides the default tooltip */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
+    /** When true, Checkboxes are in line */
+    inline?: boolean;
 }
 export declare const CheckboxGroupContext: React.Context<ValidationProps>;
 export declare const CheckboxGroup: {

package/esm/components/checkbox/checkbox-group.component.js

@@ -1,14 +1,21 @@
 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 from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import StyledCheckboxGroup from "./checkbox-group.style";
+import StyledCheckboxGroup, { StyledHintText } from "./checkbox-group.style";
 import Fieldset from "../../__internal__/fieldset";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import FormSpacingProvider from "../../__internal__/form-spacing-provider";
+import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
+import ValidationMessage from "../../__internal__/validation-message/validation-message.component";
+import Box from "../../components/box";
+import { ErrorBorder } from "../../components/textbox/textbox.style";
 export const CheckboxGroupContext = /*#__PURE__*/React.createContext({});
 export const CheckboxGroup = props => {
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
   const {
     children,
     legend,
@@ -20,9 +27,42 @@ export const CheckboxGroup = props => {
     legendWidth,
     legendAlign,
     legendSpacing,
-    tooltipPosition
+    legendHelp,
+    tooltipPosition,
+    inline
   } = props;
-  return /*#__PURE__*/React.createElement(TooltipProvider, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/React.createElement(Fieldset, _extends({
+    legend: legend,
+    inline: legendInline,
+    legendWidth: legendWidth,
+    legendAlign: legendAlign,
+    legendSpacing: legendSpacing,
+    error: error,
+    warning: warning,
+    info: info,
+    isRequired: required
+  }, tagComponent("checkboxgroup", props), {
+    blockGroupBehaviour: !(error || warning)
+  }, filterStyledSystemMarginProps(props)), legendHelp && /*#__PURE__*/React.createElement(StyledHintText, null, legendHelp), /*#__PURE__*/React.createElement(Box, {
+    position: "relative"
+  }, /*#__PURE__*/React.createElement(ValidationMessage, {
+    error: error,
+    warning: warning
+  }), (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
+    warning: !!(!error && warning),
+    inline: inline
+  }), /*#__PURE__*/React.createElement(StyledCheckboxGroup, {
+    "data-component": "checkbox-group",
+    legendInline: legendInline,
+    inline: inline
+  }, /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
+    value: {
+      error: !!error,
+      warning: !!warning
+    }
+  }, /*#__PURE__*/React.createElement(FormSpacingProvider, {
+    marginBottom: undefined
+  }, children))))) : /*#__PURE__*/React.createElement(TooltipProvider, {
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/React.createElement(Fieldset, _extends({
     legend: legend,
@@ -47,7 +87,7 @@ export const CheckboxGroup = props => {
     }
   }, /*#__PURE__*/React.createElement(FormSpacingProvider, {
     marginBottom: undefined
-  }, children)))));
+  }, children))))));
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 export default CheckboxGroup;

package/esm/components/checkbox/checkbox-group.style.d.ts

@@ -1,4 +1,6 @@
+export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledCheckboxGroup: import("styled-components").StyledComponent<"div", any, {
     legendInline?: boolean | undefined;
+    inline?: boolean | undefined;
 }, never>;
 export default StyledCheckboxGroup;

package/esm/components/checkbox/checkbox-group.style.js

@@ -4,10 +4,15 @@ import StyledIcon from "../icon/icon.style";
 import CheckboxStyle from "./checkbox.style";
 import { StyledLabelContainer } from "../../__internal__/label/label.style";
 import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
+export const StyledHintText = styled.div`
+  margin-top: -4px;
+  margin-bottom: 8px;
+  color: var(--colorsUtilityYin055);
+  font-size: 14px;
+`;
 const StyledCheckboxGroup = styled.div`
   display: flex;
   flex-direction: column;
-
   ${StyledIcon}::before {
     font-size: 16px;
   }
@@ -45,5 +50,17 @@ const StyledCheckboxGroup = styled.div`
       }
     `;
 }}
+
+  ${_ref2 => {
+  let {
+    inline
+  } = _ref2;
+  return inline && css`
+      flex-direction: row;
+      ${CheckboxStyle}:not(:first-of-type) {
+        margin-left: 32px;
+      }
+    `;
+}}
 `;
 export default StyledCheckboxGroup;

package/esm/components/checkbox/checkbox.component.js

@@ -85,38 +85,42 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     labelHelp,
     labelSpacing,
     required,
-    error: contextError || error,
-    warning: contextWarning || warning,
-    info: contextInfo || info,
     fieldHelpInline,
     checked,
     disabled,
     inputWidth,
     labelWidth,
-    tooltipPosition,
     ref: ref || inputRef,
     ...rest
   };
+  const validationProps = {
+    error: contextError || error,
+    warning: contextWarning || warning,
+    ...(validationRedesignOptIn ? {
+      validationOnLabel: false
+    } : {
+      info: contextInfo || info
+    })
+  };
   const marginProps = useFormSpacing(rest);
-  return /*#__PURE__*/React.createElement(TooltipProvider, {
-    helpAriaLabel: helpAriaLabel,
-    tooltipPosition: tooltipPosition
-  }, /*#__PURE__*/React.createElement(CheckboxStyle, _extends({
+  const componentToRender = /*#__PURE__*/React.createElement(CheckboxStyle, _extends({
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
     disabled: disabled,
     labelSpacing: labelSpacing,
     inputWidth: inputWidth,
-    adaptiveSpacingSmallScreen: adaptiveSpacingSmallScreen,
-    error: contextError || error,
-    warning: contextWarning || warning,
-    info: contextInfo || info,
+    adaptiveSpacingSmallScreen: adaptiveSpacingSmallScreen
+  }, validationProps, {
     fieldHelpInline: fieldHelpInline,
     reverse: reverse,
     size: size,
     applyNewValidation: validationRedesignOptIn
-  }, marginProps), /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(CheckboxSvg, null))));
+  }, marginProps), /*#__PURE__*/React.createElement(CheckableInput, _extends({}, inputProps, validationProps), /*#__PURE__*/React.createElement(CheckboxSvg, null)));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? componentToRender : /*#__PURE__*/React.createElement(TooltipProvider, {
+    helpAriaLabel: helpAriaLabel,
+    tooltipPosition: tooltipPosition
+  }, componentToRender));
 });
 Checkbox.propTypes = {
   "about": PropTypes.string,

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;
 });