carbon-react 127.0.3 → 127.1.0

package/esm/__spec_helper__/mock-dom-rect.d.ts

@@ -0,0 +1,2 @@
+declare const mockDOMRect: (width: number, height: number, elementIdentifier: string) => void;
+export default mockDOMRect;

package/esm/__spec_helper__/mock-dom-rect.js

@@ -0,0 +1,20 @@
+const getDOMRect = (width, height) => ({
+  width,
+  height,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  x: 0,
+  y: 0,
+  toJSON: () => {}
+});
+const mockDOMRect = (width, height, elementIdentifier) => {
+  Element.prototype.getBoundingClientRect = jest.fn(function () {
+    if (this.getAttribute("data-component") === elementIdentifier) {
+      return getDOMRect(width, height);
+    }
+    return getDOMRect(0, 0);
+  });
+};
+export default mockDOMRect;

package/esm/__spec_helper__/select-test-utils.js

@@ -1,6 +1,6 @@
 import { act } from "react-dom/test-utils";
 import { mockResizeObserver } from "jsdom-testing-mocks";
-import StyledSelectListContainer from "../components/select/select-list/select-list-container.style";
+import { StyledSelectListContainer } from "../components/select/select-list/select-list.style";
 const resizeObserver = mockResizeObserver();
 export function simulateSelectTextboxEvent(container, eventType,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/esm/components/action-popover/action-popover-item/action-popover-item.component.js

@@ -6,7 +6,6 @@ import { MenuItemIcon, SubMenuItemIcon, StyledMenuItem, StyledMenuItemInnerText,
 import Events from "../../../__internal__/utils/helpers/events";
 import createGuid from "../../../__internal__/utils/helpers/guid";
 import ActionPopoverContext from "../action-popover-context";
-import useLocale from "../../../hooks/__internal__/useLocale";
 import ActionPopoverMenu from "../action-popover-menu/action-popover-menu.component";
 const INTERVAL = 150;
 function checkRef(ref) {
@@ -49,7 +48,6 @@ export const ActionPopoverItem = ({
   isASubmenu = false,
   ...rest
 }) => {
-  const l = useLocale();
   const context = useContext(ActionPopoverContext);
   !context ? process.env.NODE_ENV !== "production" ? invariant(false, "ActionPopoverItem must be used within an ActionPopover component") : invariant(false) : void 0;
   !( /*#__PURE__*/React.isValidElement(submenu) ? submenu.type === ActionPopoverMenu : true) ? process.env.NODE_ENV !== "production" ? invariant(false, "ActionPopoverItem only accepts submenu of type `ActionPopoverMenu`") : invariant(false) : void 0;
@@ -198,11 +196,10 @@ export const ActionPopoverItem = ({
       }
     }),
     "aria-haspopup": "true",
-    "aria-label": l.actionPopover.ariaLabel(),
     "aria-controls": `ActionPopoverMenu_${guid}`,
     "aria-expanded": isOpen
   };
-  const wrapperDivProps = {
+  const wrapperProps = {
     ...(!disabled && {
       onMouseEnter: e => {
         if (mouseEnterTimer.current) clearTimeout(mouseEnterTimer.current);
@@ -234,14 +231,13 @@ export const ActionPopoverItem = ({
       isASubmenu: isASubmenu
     });
   };
-  return /*#__PURE__*/React.createElement(StyledMenuItemWrapper, submenu && wrapperDivProps, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(StyledMenuItemWrapper, submenu && wrapperProps, /*#__PURE__*/React.createElement("div", {
     onKeyDown: onKeyDown,
     role: "presentation"
   }, /*#__PURE__*/React.createElement(StyledMenuItem, _extends({}, rest, {
     ref: ref,
     onClick: onClick,
     type: "button",
-    role: "menuitem",
     tabIndex: 0,
     isDisabled: disabled,
     horizontalAlignment: horizontalAlignment,

package/esm/components/action-popover/action-popover-menu/action-popover-menu.component.d.ts

@@ -33,7 +33,7 @@ export interface ActionPopoverMenuBaseProps {
         right: string | number;
     };
 }
-export interface ActionPopoverMenuProps extends ActionPopoverMenuBaseProps, React.RefAttributes<HTMLDivElement> {
+export interface ActionPopoverMenuProps extends ActionPopoverMenuBaseProps, React.RefAttributes<HTMLUListElement> {
 }
-declare const ActionPopoverMenu: React.ForwardRefExoticComponent<ActionPopoverMenuBaseProps & React.RefAttributes<HTMLDivElement>>;
+declare const ActionPopoverMenu: React.ForwardRefExoticComponent<ActionPopoverMenuBaseProps & React.RefAttributes<HTMLUListElement>>;
 export default ActionPopoverMenu;

package/esm/components/action-popover/action-popover-menu/action-popover-menu.component.js

@@ -163,8 +163,8 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
     onKeyDown: onKeyDown,
     id: menuID,
     "aria-labelledby": parentID,
-    role: "menu",
-    ref: ref
+    ref: ref,
+    role: "list"
   }, rest), clonedChildren);
 });
 if (process.env.NODE_ENV !== "production") {

package/esm/components/action-popover/action-popover.component.d.ts

@@ -30,6 +30,8 @@ export interface ActionPopoverProps extends MarginProps {
     renderButton?: (buttonProps: RenderButtonProps) => React.ReactNode;
     /** Boolean to control whether menu should align to right */
     rightAlignMenu?: boolean;
+    /** Prop to specify an aria-label for the component */
+    "aria-label"?: string;
 }
-export declare const ActionPopover: ({ children, id, onOpen, onClose, rightAlignMenu, renderButton, placement, horizontalAlignment, submenuPosition, ...rest }: ActionPopoverProps) => React.JSX.Element;
+export declare const ActionPopover: ({ children, id, onOpen, onClose, rightAlignMenu, renderButton, placement, horizontalAlignment, submenuPosition, "aria-label": ariaLabel, ...rest }: ActionPopoverProps) => React.JSX.Element;
 export default ActionPopover;

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

@@ -24,6 +24,7 @@ export const ActionPopover = ({
   placement = "bottom",
   horizontalAlignment = "left",
   submenuPosition = "left",
+  "aria-label": ariaLabel,
   ...rest
 }) => {
   const l = useLocale();
@@ -141,7 +142,7 @@ export const ActionPopover = ({
         "data-element": "action-popover-button",
         ariaAttributes: {
           "aria-haspopup": "true",
-          "aria-label": l.actionPopover.ariaLabel(),
+          "aria-label": ariaLabel || l.actionPopover.ariaLabel(),
           "aria-controls": menuID,
           "aria-expanded": `${isOpen}`
         }
@@ -150,7 +151,7 @@ export const ActionPopover = ({
     return /*#__PURE__*/React.createElement(StyledButtonIcon, {
       role: "button",
       "aria-haspopup": "true",
-      "aria-label": l.actionPopover.ariaLabel(),
+      "aria-label": ariaLabel || l.actionPopover.ariaLabel(),
       "aria-controls": menuID,
       "aria-expanded": isOpen,
       tabIndex: isOpen ? -1 : 0,
@@ -192,7 +193,6 @@ export const ActionPopover = ({
     reference: buttonRef
   }, /*#__PURE__*/React.createElement(ActionPopoverMenu, _extends({
     "data-component": "action-popover",
-    role: "menu",
     ref: menu
   }, menuProps), children))));
 };

package/esm/components/action-popover/action-popover.style.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare const Menu: import("styled-components").StyledComponent<"div", any, {
+declare const Menu: import("styled-components").StyledComponent<"ul", any, {
     isOpen?: boolean | undefined;
 }, never>;
 declare type StyledMenuItemProps = {
@@ -15,8 +15,8 @@ declare type StyledMenuItemProps = {
 declare const StyledMenuItemInnerText: import("styled-components").StyledComponent<"div", any, Omit<StyledMenuItemProps, "isDisabled">, never>;
 declare const StyledMenuItemOuterContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledMenuItem: import("styled-components").StyledComponent<"button", any, Omit<StyledMenuItemProps, "variant">, never>;
-declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const MenuItemDivider: import("styled-components").StyledComponent<"div", any, {
+declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"li", any, {}, never>;
+declare const MenuItemDivider: import("styled-components").StyledComponent<"li", any, {
     "data-element": string;
 }, "data-element">;
 declare const MenuButton: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/action-popover/action-popover.style.js

@@ -9,11 +9,12 @@ import baseTheme from "../../style/themes/base";
 const oldFocusStyling = `
   outline: solid 3px var(--colorsSemanticFocus500);
 `;
-const Menu = styled.div`
+const Menu = styled.ul`
   ${({
   isOpen
 }) => isOpen ? "display: block;" : "visibility: hidden;"}
   margin: 0;
+  list-style: none;
   padding: var(--spacing100) 0;
   box-shadow: var(--boxShadow100);
   position: absolute;
@@ -156,10 +157,10 @@ const StyledMenuItem = styled.button`
 StyledMenuItem.defaultProps = {
   theme: baseTheme
 };
-const StyledMenuItemWrapper = styled.div`
+const StyledMenuItemWrapper = styled.li`
   position: relative;
 `;
-const MenuItemDivider = styled.div.attrs({
+const MenuItemDivider = styled.li.attrs({
   "data-element": "action-popover-divider"
 })`
   background-color: var(--colorsUtilityMajor050);

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

@@ -148,7 +148,6 @@ const Button = /*#__PURE__*/React.forwardRef(({
     buttonType: buttonType,
     disabled: disabled,
     destructive: destructive,
-    role: inSplitButton ? "menuitem" : "button",
     type: href ? undefined : "button",
     iconType: iconType,
     size: size,

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

@@ -59,11 +59,10 @@ export const MultiActionButton = ({
     placement: "bottom-end",
     reference: buttonNode
   }, /*#__PURE__*/React.createElement(StyledButtonChildrenContainer, _extends({}, wrapperProps, {
-    "aria-label": text,
     align: align
   }), /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
     value: contextValue
-  }, children)));
+  }, React.Children.map(children, child => /*#__PURE__*/React.createElement("li", null, child)))));
   const marginProps = filterStyledSystemMarginProps(rest);
   return /*#__PURE__*/React.createElement(StyledMultiActionButton, _extends({
     onMouseLeave: hideButtonsIfTriggerNotFocused,

package/esm/components/multi-action-button/multi-action-button.style.d.ts

@@ -6,5 +6,5 @@ declare type StyledButtonChildrenContainerProps = {
     align: "left" | "right";
     minWidth: number;
 };
-declare const StyledButtonChildrenContainer: import("styled-components").StyledComponent<"div", any, StyledButtonChildrenContainerProps, never>;
+declare const StyledButtonChildrenContainer: import("styled-components").StyledComponent<"ul", any, StyledButtonChildrenContainerProps, never>;
 export { StyledButtonChildrenContainer, StyledMultiActionButton };

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

@@ -69,7 +69,7 @@ theme.focusRedesignOptOut && css`
       `}
   }
 `;
-const StyledButtonChildrenContainer = styled.div`
+const StyledButtonChildrenContainer = styled.ul`
   ${({
   theme,
   align,
@@ -81,6 +81,9 @@ const StyledButtonChildrenContainer = styled.div`
     z-index: ${theme.zIndex.popover};
     box-shadow: var(--boxShadow100);
     border-radius: var(--borderRadius100);
+    list-style: none;
+    padding: 0;
+    margin: 0;
 
     ${borderRadiusStyling}
 

package/esm/components/select/list-action-button/list-action-button.style.js

@@ -9,6 +9,8 @@ const StyledListActionButtonWrapper = styled.div`
   position: sticky;
   bottom: 0;
   background-color: inherit;
+  border-bottom-left-radius: var(--borderRadius050);
+  border-bottom-right-radius: var(--borderRadius050);
 
   ${StyledButton} {
     border: none;

package/esm/components/select/option-row/option-row.style.js

@@ -1,10 +1,10 @@
 import styled, { css } from "styled-components";
 const StyledOptionRow = styled.tr`
   cursor: pointer;
+  width: 100%;
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
 
   ${({
   hidden

package/esm/components/select/select-list/select-list.component.js

@@ -7,14 +7,13 @@ import findLastIndex from "lodash/findLastIndex";
 import usePrevious from "../../../hooks/__internal__/usePrevious";
 import useScrollBlock from "../../../hooks/__internal__/useScrollBlock";
 import useModalManager from "../../../hooks/__internal__/useModalManager";
-import { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody } from "./select-list.style";
+import { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody, StyledSelectListContainer, StyledScrollableContainer } from "./select-list.style";
 import Popover from "../../../__internal__/popover";
 import OptionRow from "../option-row/option-row.component";
 import getNextChildByText from "../utils/get-next-child-by-text";
 import getNextIndexByKey from "../utils/get-next-index-by-key";
 import isNavigationKey from "../utils/is-navigation-key";
 import ListActionButton from "../list-action-button";
-import StyledSelectListContainer from "./select-list-container.style";
 import Loader from "../../loader";
 import Option from "../option";
 import SelectListContext from "../__internal__/select-list-context";
@@ -363,13 +362,11 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   }), ...(flipEnabled ? [flip({
     fallbackStrategy: "initialPlacement"
   })] : [])], [flipEnabled]);
-  const loader = () => {
-    return /*#__PURE__*/React.createElement(StyledSelectLoaderContainer, {
-      key: "loader"
-    }, /*#__PURE__*/React.createElement(Loader, {
-      "data-role": loaderDataRole
-    }));
-  };
+  const loader = isLoading ? /*#__PURE__*/React.createElement(StyledSelectLoaderContainer, {
+    key: "loader"
+  }, /*#__PURE__*/React.createElement(Loader, {
+    "data-role": loaderDataRole
+  })) : undefined;
   let selectListContent = renderedChildren;
   const listBoxProps = {
     role: "listbox",
@@ -406,17 +403,20 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     animationFrame: true
   }, /*#__PURE__*/React.createElement(StyledSelectListContainer, _extends({
     "data-element": "select-list-wrapper",
-    ref: listContainerRef,
-    maxHeight: listMaxHeight + actionButtonHeight.current,
     isLoading: isLoading
-  }, listProps), /*#__PURE__*/React.createElement(StyledSelectList, _extends({
+  }, listProps), /*#__PURE__*/React.createElement(StyledScrollableContainer, {
+    ref: listContainerRef,
+    maxHeight: listMaxHeight,
+    "data-component": "select-list-scrollable-container",
+    hasActionButton: !!listActionButton
+  }, /*#__PURE__*/React.createElement(StyledSelectList, _extends({
     as: multiColumn ? "div" : "ul",
     "data-element": "select-list"
   }, multiColumn ? {} : listBoxProps, {
     ref: listRef,
     tabIndex: -1,
     listHeight: multiColumn ? undefined : listHeight
-  }), selectListContent), isLoading && loader(), listActionButton && /*#__PURE__*/React.createElement(ListActionButton, {
+  }), selectListContent), loader), listActionButton && /*#__PURE__*/React.createElement(ListActionButton, {
     ref: listActionButtonRef,
     listActionButton: listActionButton,
     onListAction: onListAction

package/esm/components/select/select-list/select-list.style.d.ts

@@ -1,3 +1,4 @@
+import { SelectListProps } from ".";
 interface StyledSelectListProps {
     listHeight?: number;
 }
@@ -9,4 +10,9 @@ interface StyledSelectListTableHeaderProps {
 }
 declare const StyledSelectListTableHeader: import("styled-components").StyledComponent<"thead", any, StyledSelectListTableHeaderProps, never>;
 declare const StyledSelectListTableBody: import("styled-components").StyledComponent<"tbody", any, StyledSelectListProps, never>;
-export { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody, };
+declare const StyledSelectListContainer: import("styled-components").StyledComponent<"div", any, Pick<SelectListProps, "isLoading">, never>;
+declare const StyledScrollableContainer: import("styled-components").StyledComponent<"div", any, {
+    maxHeight: number;
+    hasActionButton: boolean;
+}, never>;
+export { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody, StyledSelectListContainer, StyledScrollableContainer, };

package/esm/components/select/select-list/select-list.style.js

@@ -1,4 +1,5 @@
 import styled, { css } from "styled-components";
+import { baseTheme } from "../../../style/themes";
 const StyledSelectList = styled.ul`
   ${({
   listHeight
@@ -91,4 +92,48 @@ const StyledSelectListTableBody = styled.tbody`
   listHeight
 }) => `${listHeight}px`};
 `;
-export { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody };
+const StyledSelectListContainer = styled.div`
+  background-color: white;
+  box-shadow: var(--boxShadow100);
+  animation: fadeIn 250ms ease-out;
+  position: absolute;
+  z-index: ${({
+  theme
+}) => theme.zIndex.popover};
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  border-radius: var(--borderRadius050);
+  ${({
+  isLoading
+}) => isLoading && "min-height: 150px"};
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`;
+const StyledScrollableContainer = styled.div`
+  max-height: ${({
+  maxHeight
+}) => `${maxHeight}px`};
+  width: 100%;
+  border-top-left-radius: var(--borderRadius050);
+  border-top-right-radius: var(--borderRadius050);
+  overflow-y: auto;
+
+  ${({
+  hasActionButton
+}) => !hasActionButton && css`
+      border-bottom-left-radius: var(--borderRadius050);
+      border-bottom-right-radius: var(--borderRadius050);
+    `}
+`;
+StyledSelectListContainer.defaultProps = {
+  theme: baseTheme
+};
+export { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody, StyledSelectListContainer, StyledScrollableContainer };

package/esm/components/split-button/split-button-children.style.d.ts

@@ -1,9 +1,9 @@
 import { ThemeObject } from "../../style/themes/base";
-export declare const borderRadiusStyling = "\n  > {\n    &:first-child:last-child {\n      border-radius: var(--borderRadius100);\n    }\n\n    &:first-child:not(:last-child) {\n      border-top-left-radius: var(--borderRadius100);\n      border-top-right-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius000);\n    }\n\n    &:not(:first-child):not(:last-child) {\n      border-radius: var(--borderRadius000);\n    }\n\n    &:last-child:not(:first-child) {\n      border-top-right-radius: var(--borderRadius000);\n      border-top-left-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius100);\n    }\n  }\n";
+export declare const borderRadiusStyling = "\n  > {\n    &:first-child:last-child > * {\n      border-radius: var(--borderRadius100);\n    }\n\n    &:first-child:not(:last-child) > * {\n      border-top-left-radius: var(--borderRadius100);\n      border-top-right-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius000);\n    }\n\n    &:not(:first-child):not(:last-child) > * {\n      border-radius: var(--borderRadius000);\n    }\n\n    &:last-child:not(:first-child) > * {\n      border-top-right-radius: var(--borderRadius000);\n      border-top-left-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius100);\n    }\n  }\n";
 declare type StyledSplitButtonChildrenContainerProps = {
     theme: ThemeObject;
     align: "left" | "right";
     minWidth: number;
 };
-declare const StyledSplitButtonChildrenContainer: import("styled-components").StyledComponent<"div", any, StyledSplitButtonChildrenContainerProps, never>;
+declare const StyledSplitButtonChildrenContainer: import("styled-components").StyledComponent<"ul", any, StyledSplitButtonChildrenContainerProps, never>;
 export default StyledSplitButtonChildrenContainer;

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

@@ -3,22 +3,22 @@ import BaseTheme from "../../style/themes/base";
 import StyledButton from "../button/button.style";
 export const borderRadiusStyling = `
   > {
-    &:first-child:last-child {
+    &:first-child:last-child > * {
       border-radius: var(--borderRadius100);
     }
 
-    &:first-child:not(:last-child) {
+    &:first-child:not(:last-child) > * {
       border-top-left-radius: var(--borderRadius100);
       border-top-right-radius: var(--borderRadius100);
       border-bottom-right-radius: var(--borderRadius000);
       border-bottom-left-radius: var(--borderRadius000);
     }
 
-    &:not(:first-child):not(:last-child) {
+    &:not(:first-child):not(:last-child) > * {
       border-radius: var(--borderRadius000);
     }
 
-    &:last-child:not(:first-child) {
+    &:last-child:not(:first-child) > * {
       border-top-right-radius: var(--borderRadius000);
       border-top-left-radius: var(--borderRadius000);
       border-bottom-left-radius: var(--borderRadius100);
@@ -26,7 +26,7 @@ export const borderRadiusStyling = `
     }
   }
 `;
-const StyledSplitButtonChildrenContainer = styled.div`
+const StyledSplitButtonChildrenContainer = styled.ul`
   border-radius: var(--borderRadius100);
   ${({
   theme,
@@ -38,6 +38,9 @@ const StyledSplitButtonChildrenContainer = styled.div`
     white-space: nowrap;
     z-index: ${theme.zIndex.popover};
     box-shadow: var(--boxShadow100);
+    list-style: none;
+    padding: 0;
+    margin: 0;
 
     ${borderRadiusStyling}
 

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

@@ -111,11 +111,10 @@ export const SplitButton = ({
       placement: "bottom-end",
       reference: buttonNode
     }, /*#__PURE__*/React.createElement(StyledSplitButtonChildrenContainer, _extends({}, wrapperProps, {
-      "aria-label": text,
       align: align
     }), /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
       value: contextValue
-    }, children)));
+    }, React.Children.map(children, child => /*#__PURE__*/React.createElement("li", null, child)))));
   }
   const handleClick = useClickAwayListener(hideButtons);
   const marginProps = filterStyledSystemMarginProps(rest);

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

@@ -7,11 +7,11 @@ declare const useChildButtons: (toggleButtonRef: React.RefObject<HTMLButtonEleme
     hideButtonsIfTriggerNotFocused: () => void;
     handleToggleButtonKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
     wrapperProps: {
-        role: string;
         "data-element": string;
+        role: string;
         onKeyDown: (ev: any) => void;
         minWidth: number;
-        ref: import("react").RefObject<HTMLDivElement>;
+        ref: import("react").RefObject<HTMLUListElement>;
     };
     contextValue: {
         inSplitButton: boolean;

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

@@ -46,8 +46,8 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
     setShowAdditionalButtons(false);
   }, [toggleButtonRef]);
   const wrapperProps = {
-    role: "menu",
     "data-element": "additional-buttons",
+    role: "list",
     onKeyDown: handleKeyDown,
     minWidth,
     ref: childrenContainer

package/lib/__spec_helper__/mock-dom-rect.d.ts

@@ -0,0 +1,2 @@
+declare const mockDOMRect: (width: number, height: number, elementIdentifier: string) => void;
+export default mockDOMRect;

package/lib/__spec_helper__/mock-dom-rect.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const getDOMRect = (width, height) => ({
+  width,
+  height,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  x: 0,
+  y: 0,
+  toJSON: () => {}
+});
+const mockDOMRect = (width, height, elementIdentifier) => {
+  Element.prototype.getBoundingClientRect = jest.fn(function () {
+    if (this.getAttribute("data-component") === elementIdentifier) {
+      return getDOMRect(width, height);
+    }
+    return getDOMRect(0, 0);
+  });
+};
+var _default = exports.default = mockDOMRect;

package/lib/__spec_helper__/select-test-utils.js

@@ -7,15 +7,14 @@ exports.simulateDropdownEvent = simulateDropdownEvent;
 exports.simulateSelectTextboxEvent = simulateSelectTextboxEvent;
 var _testUtils = require("react-dom/test-utils");
 var _jsdomTestingMocks = require("jsdom-testing-mocks");
-var _selectListContainer = _interopRequireDefault(require("../components/select/select-list/select-list-container.style"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _selectList = require("../components/select/select-list/select-list.style");
 const resizeObserver = (0, _jsdomTestingMocks.mockResizeObserver)();
 function simulateSelectTextboxEvent(container, eventType,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ...eventArgs) {
   const selectText = container.find('input[type="text"]').first();
   selectText.simulate(eventType, ...eventArgs);
-  const selectList = container.find(_selectListContainer.default).getDOMNode();
+  const selectList = container.find(_selectList.StyledSelectListContainer).getDOMNode();
   // need to manually trigger a resize to make react-virtual realise that child options should be rendered
   (0, _testUtils.act)(() => {
     resizeObserver.mockElementSize(selectList, {
@@ -32,7 +31,7 @@ function simulateSelectTextboxEvent(container, eventType,
 function simulateDropdownEvent(container, eventType) {
   const dropdown = container.find('[type="dropdown"]').first();
   dropdown.simulate(eventType);
-  const selectList = container.find(_selectListContainer.default).getDOMNode();
+  const selectList = container.find(_selectList.StyledSelectListContainer).getDOMNode();
   // need to manually trigger a resize to make react-virtual realise that child options should be rendered
   (0, _testUtils.act)(() => {
     resizeObserver.mockElementSize(selectList, {

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

@@ -11,7 +11,6 @@ var _actionPopover = require("../action-popover.style");
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 var _actionPopoverContext = _interopRequireDefault(require("../action-popover-context"));
-var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
 var _actionPopoverMenu = _interopRequireDefault(require("../action-popover-menu/action-popover-menu.component"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -58,7 +57,6 @@ const ActionPopoverItem = ({
   isASubmenu = false,
   ...rest
 }) => {
-  const l = (0, _useLocale.default)();
   const context = (0, _react.useContext)(_actionPopoverContext.default);
   !context ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ActionPopoverItem must be used within an ActionPopover component") : (0, _invariant.default)(false) : void 0;
   !( /*#__PURE__*/_react.default.isValidElement(submenu) ? submenu.type === _actionPopoverMenu.default : true) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ActionPopoverItem only accepts submenu of type `ActionPopoverMenu`") : (0, _invariant.default)(false) : void 0;
@@ -207,11 +205,10 @@ const ActionPopoverItem = ({
       }
     }),
     "aria-haspopup": "true",
-    "aria-label": l.actionPopover.ariaLabel(),
     "aria-controls": `ActionPopoverMenu_${guid}`,
     "aria-expanded": isOpen
   };
-  const wrapperDivProps = {
+  const wrapperProps = {
     ...(!disabled && {
       onMouseEnter: e => {
         if (mouseEnterTimer.current) clearTimeout(mouseEnterTimer.current);
@@ -243,14 +240,13 @@ const ActionPopoverItem = ({
       isASubmenu: isASubmenu
     });
   };
-  return /*#__PURE__*/_react.default.createElement(_actionPopover.StyledMenuItemWrapper, submenu && wrapperDivProps, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_actionPopover.StyledMenuItemWrapper, submenu && wrapperProps, /*#__PURE__*/_react.default.createElement("div", {
     onKeyDown: onKeyDown,
     role: "presentation"
   }, /*#__PURE__*/_react.default.createElement(_actionPopover.StyledMenuItem, _extends({}, rest, {
     ref: ref,
     onClick: onClick,
     type: "button",
-    role: "menuitem",
     tabIndex: 0,
     isDisabled: disabled,
     horizontalAlignment: horizontalAlignment,

package/lib/components/action-popover/action-popover-menu/action-popover-menu.component.d.ts

@@ -33,7 +33,7 @@ export interface ActionPopoverMenuBaseProps {
         right: string | number;
     };
 }
-export interface ActionPopoverMenuProps extends ActionPopoverMenuBaseProps, React.RefAttributes<HTMLDivElement> {
+export interface ActionPopoverMenuProps extends ActionPopoverMenuBaseProps, React.RefAttributes<HTMLUListElement> {
 }
-declare const ActionPopoverMenu: React.ForwardRefExoticComponent<ActionPopoverMenuBaseProps & React.RefAttributes<HTMLDivElement>>;
+declare const ActionPopoverMenu: React.ForwardRefExoticComponent<ActionPopoverMenuBaseProps & React.RefAttributes<HTMLUListElement>>;
 export default ActionPopoverMenu;

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

@@ -172,8 +172,8 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
     onKeyDown: onKeyDown,
     id: menuID,
     "aria-labelledby": parentID,
-    role: "menu",
-    ref: ref
+    ref: ref,
+    role: "list"
   }, rest), clonedChildren);
 });
 if (process.env.NODE_ENV !== "production") {

package/lib/components/action-popover/action-popover.component.d.ts

@@ -30,6 +30,8 @@ export interface ActionPopoverProps extends MarginProps {
     renderButton?: (buttonProps: RenderButtonProps) => React.ReactNode;
     /** Boolean to control whether menu should align to right */
     rightAlignMenu?: boolean;
+    /** Prop to specify an aria-label for the component */
+    "aria-label"?: string;
 }
-export declare const ActionPopover: ({ children, id, onOpen, onClose, rightAlignMenu, renderButton, placement, horizontalAlignment, submenuPosition, ...rest }: ActionPopoverProps) => React.JSX.Element;
+export declare const ActionPopover: ({ children, id, onOpen, onClose, rightAlignMenu, renderButton, placement, horizontalAlignment, submenuPosition, "aria-label": ariaLabel, ...rest }: ActionPopoverProps) => React.JSX.Element;
 export default ActionPopover;

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

@@ -33,6 +33,7 @@ const ActionPopover = ({
   placement = "bottom",
   horizontalAlignment = "left",
   submenuPosition = "left",
+  "aria-label": ariaLabel,
   ...rest
 }) => {
   const l = (0, _useLocale.default)();
@@ -150,7 +151,7 @@ const ActionPopover = ({
         "data-element": "action-popover-button",
         ariaAttributes: {
           "aria-haspopup": "true",
-          "aria-label": l.actionPopover.ariaLabel(),
+          "aria-label": ariaLabel || l.actionPopover.ariaLabel(),
           "aria-controls": menuID,
           "aria-expanded": `${isOpen}`
         }
@@ -159,7 +160,7 @@ const ActionPopover = ({
     return /*#__PURE__*/_react.default.createElement(_actionPopover.StyledButtonIcon, {
       role: "button",
       "aria-haspopup": "true",
-      "aria-label": l.actionPopover.ariaLabel(),
+      "aria-label": ariaLabel || l.actionPopover.ariaLabel(),
       "aria-controls": menuID,
       "aria-expanded": isOpen,
       tabIndex: isOpen ? -1 : 0,
@@ -201,7 +202,6 @@ const ActionPopover = ({
     reference: buttonRef
   }, /*#__PURE__*/_react.default.createElement(_actionPopoverMenu.default, _extends({
     "data-component": "action-popover",
-    role: "menu",
     ref: menu
   }, menuProps), children))));
 };

package/lib/components/action-popover/action-popover.style.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare const Menu: import("styled-components").StyledComponent<"div", any, {
+declare const Menu: import("styled-components").StyledComponent<"ul", any, {
     isOpen?: boolean | undefined;
 }, never>;
 declare type StyledMenuItemProps = {
@@ -15,8 +15,8 @@ declare type StyledMenuItemProps = {
 declare const StyledMenuItemInnerText: import("styled-components").StyledComponent<"div", any, Omit<StyledMenuItemProps, "isDisabled">, never>;
 declare const StyledMenuItemOuterContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledMenuItem: import("styled-components").StyledComponent<"button", any, Omit<StyledMenuItemProps, "variant">, never>;
-declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const MenuItemDivider: import("styled-components").StyledComponent<"div", any, {
+declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"li", any, {}, never>;
+declare const MenuItemDivider: import("styled-components").StyledComponent<"li", any, {
     "data-element": string;
 }, "data-element">;
 declare const MenuButton: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -18,11 +18,12 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const oldFocusStyling = `
   outline: solid 3px var(--colorsSemanticFocus500);
 `;
-const Menu = exports.Menu = _styledComponents.default.div`
+const Menu = exports.Menu = _styledComponents.default.ul`
   ${({
   isOpen
 }) => isOpen ? "display: block;" : "visibility: hidden;"}
   margin: 0;
+  list-style: none;
   padding: var(--spacing100) 0;
   box-shadow: var(--boxShadow100);
   position: absolute;
@@ -165,10 +166,10 @@ const StyledMenuItem = exports.StyledMenuItem = _styledComponents.default.button
 StyledMenuItem.defaultProps = {
   theme: _base.default
 };
-const StyledMenuItemWrapper = exports.StyledMenuItemWrapper = _styledComponents.default.div`
+const StyledMenuItemWrapper = exports.StyledMenuItemWrapper = _styledComponents.default.li`
   position: relative;
 `;
-const MenuItemDivider = exports.MenuItemDivider = _styledComponents.default.div.attrs({
+const MenuItemDivider = exports.MenuItemDivider = _styledComponents.default.li.attrs({
   "data-element": "action-popover-divider"
 })`
   background-color: var(--colorsUtilityMajor050);

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

@@ -157,7 +157,6 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({
     buttonType: buttonType,
     disabled: disabled,
     destructive: destructive,
-    role: inSplitButton ? "menuitem" : "button",
     type: href ? undefined : "button",
     iconType: iconType,
     size: size,

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

@@ -68,11 +68,10 @@ const MultiActionButton = ({
     placement: "bottom-end",
     reference: buttonNode
   }, /*#__PURE__*/_react.default.createElement(_multiActionButton.StyledButtonChildrenContainer, _extends({}, wrapperProps, {
-    "aria-label": text,
     align: align
   }), /*#__PURE__*/_react.default.createElement(_splitButton.default.Provider, {
     value: contextValue
-  }, children)));
+  }, _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement("li", null, child)))));
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   return /*#__PURE__*/_react.default.createElement(_multiActionButton.StyledMultiActionButton, _extends({
     onMouseLeave: hideButtonsIfTriggerNotFocused,

package/lib/components/multi-action-button/multi-action-button.style.d.ts

@@ -6,5 +6,5 @@ declare type StyledButtonChildrenContainerProps = {
     align: "left" | "right";
     minWidth: number;
 };
-declare const StyledButtonChildrenContainer: import("styled-components").StyledComponent<"div", any, StyledButtonChildrenContainerProps, never>;
+declare const StyledButtonChildrenContainer: import("styled-components").StyledComponent<"ul", any, StyledButtonChildrenContainerProps, never>;
 export { StyledButtonChildrenContainer, StyledMultiActionButton };

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

@@ -78,7 +78,7 @@ theme.focusRedesignOptOut && (0, _styledComponents.css)`
       `}
   }
 `;
-const StyledButtonChildrenContainer = exports.StyledButtonChildrenContainer = _styledComponents.default.div`
+const StyledButtonChildrenContainer = exports.StyledButtonChildrenContainer = _styledComponents.default.ul`
   ${({
   theme,
   align,
@@ -90,6 +90,9 @@ const StyledButtonChildrenContainer = exports.StyledButtonChildrenContainer = _s
     z-index: ${theme.zIndex.popover};
     box-shadow: var(--boxShadow100);
     border-radius: var(--borderRadius100);
+    list-style: none;
+    padding: 0;
+    margin: 0;
 
     ${_splitButtonChildren.borderRadiusStyling}
 

package/lib/components/select/list-action-button/list-action-button.style.js

@@ -16,6 +16,8 @@ const StyledListActionButtonWrapper = _styledComponents.default.div`
   position: sticky;
   bottom: 0;
   background-color: inherit;
+  border-bottom-left-radius: var(--borderRadius050);
+  border-bottom-right-radius: var(--borderRadius050);
 
   ${_button.default} {
     border: none;

package/lib/components/select/option-row/option-row.style.js

@@ -9,10 +9,10 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledOptionRow = _styledComponents.default.tr`
   cursor: pointer;
+  width: 100%;
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
 
   ${({
   hidden

package/lib/components/select/select-list/select-list.component.js

@@ -19,7 +19,6 @@ var _getNextChildByText = _interopRequireDefault(require("../utils/get-next-chil
 var _getNextIndexByKey = _interopRequireDefault(require("../utils/get-next-index-by-key"));
 var _isNavigationKey = _interopRequireDefault(require("../utils/is-navigation-key"));
 var _listActionButton = _interopRequireDefault(require("../list-action-button"));
-var _selectListContainer = _interopRequireDefault(require("./select-list-container.style"));
 var _loader = _interopRequireDefault(require("../../loader"));
 var _option = _interopRequireDefault(require("../option"));
 var _selectListContext = _interopRequireDefault(require("../__internal__/select-list-context"));
@@ -372,13 +371,11 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   }), ...(flipEnabled ? [(0, _dom.flip)({
     fallbackStrategy: "initialPlacement"
   })] : [])], [flipEnabled]);
-  const loader = () => {
-    return /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectLoaderContainer, {
-      key: "loader"
-    }, /*#__PURE__*/_react.default.createElement(_loader.default, {
-      "data-role": loaderDataRole
-    }));
-  };
+  const loader = isLoading ? /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectLoaderContainer, {
+    key: "loader"
+  }, /*#__PURE__*/_react.default.createElement(_loader.default, {
+    "data-role": loaderDataRole
+  })) : undefined;
   let selectListContent = renderedChildren;
   const listBoxProps = {
     role: "listbox",
@@ -413,19 +410,22 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     isOpen: isOpen,
     disableBackgroundUI: true,
     animationFrame: true
-  }, /*#__PURE__*/_react.default.createElement(_selectListContainer.default, _extends({
+  }, /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectListContainer, _extends({
     "data-element": "select-list-wrapper",
-    ref: listContainerRef,
-    maxHeight: listMaxHeight + actionButtonHeight.current,
     isLoading: isLoading
-  }, listProps), /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectList, _extends({
+  }, listProps), /*#__PURE__*/_react.default.createElement(_selectList.StyledScrollableContainer, {
+    ref: listContainerRef,
+    maxHeight: listMaxHeight,
+    "data-component": "select-list-scrollable-container",
+    hasActionButton: !!listActionButton
+  }, /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectList, _extends({
     as: multiColumn ? "div" : "ul",
     "data-element": "select-list"
   }, multiColumn ? {} : listBoxProps, {
     ref: listRef,
     tabIndex: -1,
     listHeight: multiColumn ? undefined : listHeight
-  }), selectListContent), isLoading && loader(), listActionButton && /*#__PURE__*/_react.default.createElement(_listActionButton.default, {
+  }), selectListContent), loader), listActionButton && /*#__PURE__*/_react.default.createElement(_listActionButton.default, {
     ref: listActionButtonRef,
     listActionButton: listActionButton,
     onListAction: onListAction

package/lib/components/select/select-list/select-list.style.d.ts

@@ -1,3 +1,4 @@
+import { SelectListProps } from ".";
 interface StyledSelectListProps {
     listHeight?: number;
 }
@@ -9,4 +10,9 @@ interface StyledSelectListTableHeaderProps {
 }
 declare const StyledSelectListTableHeader: import("styled-components").StyledComponent<"thead", any, StyledSelectListTableHeaderProps, never>;
 declare const StyledSelectListTableBody: import("styled-components").StyledComponent<"tbody", any, StyledSelectListProps, never>;
-export { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody, };
+declare const StyledSelectListContainer: import("styled-components").StyledComponent<"div", any, Pick<SelectListProps, "isLoading">, never>;
+declare const StyledScrollableContainer: import("styled-components").StyledComponent<"div", any, {
+    maxHeight: number;
+    hasActionButton: boolean;
+}, never>;
+export { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody, StyledSelectListContainer, StyledScrollableContainer, };

package/lib/components/select/select-list/select-list.style.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSelectLoaderContainer = exports.StyledSelectListTableHeader = exports.StyledSelectListTableBody = exports.StyledSelectListTable = exports.StyledSelectList = void 0;
+exports.StyledSelectLoaderContainer = exports.StyledSelectListTableHeader = exports.StyledSelectListTableBody = exports.StyledSelectListTable = exports.StyledSelectListContainer = exports.StyledSelectList = exports.StyledScrollableContainer = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _themes = require("../../../style/themes");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledSelectList = exports.StyledSelectList = _styledComponents.default.ul`
@@ -98,4 +99,48 @@ const StyledSelectListTableBody = exports.StyledSelectListTableBody = _styledCom
   height: ${({
   listHeight
 }) => `${listHeight}px`};
-`;
+`;
+const StyledSelectListContainer = exports.StyledSelectListContainer = _styledComponents.default.div`
+  background-color: white;
+  box-shadow: var(--boxShadow100);
+  animation: fadeIn 250ms ease-out;
+  position: absolute;
+  z-index: ${({
+  theme
+}) => theme.zIndex.popover};
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  border-radius: var(--borderRadius050);
+  ${({
+  isLoading
+}) => isLoading && "min-height: 150px"};
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`;
+const StyledScrollableContainer = exports.StyledScrollableContainer = _styledComponents.default.div`
+  max-height: ${({
+  maxHeight
+}) => `${maxHeight}px`};
+  width: 100%;
+  border-top-left-radius: var(--borderRadius050);
+  border-top-right-radius: var(--borderRadius050);
+  overflow-y: auto;
+
+  ${({
+  hasActionButton
+}) => !hasActionButton && (0, _styledComponents.css)`
+      border-bottom-left-radius: var(--borderRadius050);
+      border-bottom-right-radius: var(--borderRadius050);
+    `}
+`;
+StyledSelectListContainer.defaultProps = {
+  theme: _themes.baseTheme
+};

package/lib/components/split-button/split-button-children.style.d.ts

@@ -1,9 +1,9 @@
 import { ThemeObject } from "../../style/themes/base";
-export declare const borderRadiusStyling = "\n  > {\n    &:first-child:last-child {\n      border-radius: var(--borderRadius100);\n    }\n\n    &:first-child:not(:last-child) {\n      border-top-left-radius: var(--borderRadius100);\n      border-top-right-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius000);\n    }\n\n    &:not(:first-child):not(:last-child) {\n      border-radius: var(--borderRadius000);\n    }\n\n    &:last-child:not(:first-child) {\n      border-top-right-radius: var(--borderRadius000);\n      border-top-left-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius100);\n    }\n  }\n";
+export declare const borderRadiusStyling = "\n  > {\n    &:first-child:last-child > * {\n      border-radius: var(--borderRadius100);\n    }\n\n    &:first-child:not(:last-child) > * {\n      border-top-left-radius: var(--borderRadius100);\n      border-top-right-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius000);\n    }\n\n    &:not(:first-child):not(:last-child) > * {\n      border-radius: var(--borderRadius000);\n    }\n\n    &:last-child:not(:first-child) > * {\n      border-top-right-radius: var(--borderRadius000);\n      border-top-left-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius100);\n    }\n  }\n";
 declare type StyledSplitButtonChildrenContainerProps = {
     theme: ThemeObject;
     align: "left" | "right";
     minWidth: number;
 };
-declare const StyledSplitButtonChildrenContainer: import("styled-components").StyledComponent<"div", any, StyledSplitButtonChildrenContainerProps, never>;
+declare const StyledSplitButtonChildrenContainer: import("styled-components").StyledComponent<"ul", any, StyledSplitButtonChildrenContainerProps, never>;
 export default StyledSplitButtonChildrenContainer;

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

@@ -12,22 +12,22 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const borderRadiusStyling = exports.borderRadiusStyling = `
   > {
-    &:first-child:last-child {
+    &:first-child:last-child > * {
       border-radius: var(--borderRadius100);
     }
 
-    &:first-child:not(:last-child) {
+    &:first-child:not(:last-child) > * {
       border-top-left-radius: var(--borderRadius100);
       border-top-right-radius: var(--borderRadius100);
       border-bottom-right-radius: var(--borderRadius000);
       border-bottom-left-radius: var(--borderRadius000);
     }
 
-    &:not(:first-child):not(:last-child) {
+    &:not(:first-child):not(:last-child) > * {
       border-radius: var(--borderRadius000);
     }
 
-    &:last-child:not(:first-child) {
+    &:last-child:not(:first-child) > * {
       border-top-right-radius: var(--borderRadius000);
       border-top-left-radius: var(--borderRadius000);
       border-bottom-left-radius: var(--borderRadius100);
@@ -35,7 +35,7 @@ const borderRadiusStyling = exports.borderRadiusStyling = `
     }
   }
 `;
-const StyledSplitButtonChildrenContainer = _styledComponents.default.div`
+const StyledSplitButtonChildrenContainer = _styledComponents.default.ul`
   border-radius: var(--borderRadius100);
   ${({
   theme,
@@ -47,6 +47,9 @@ const StyledSplitButtonChildrenContainer = _styledComponents.default.div`
     white-space: nowrap;
     z-index: ${theme.zIndex.popover};
     box-shadow: var(--boxShadow100);
+    list-style: none;
+    padding: 0;
+    margin: 0;
 
     ${borderRadiusStyling}
 

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

@@ -120,11 +120,10 @@ const SplitButton = ({
       placement: "bottom-end",
       reference: buttonNode
     }, /*#__PURE__*/_react.default.createElement(_splitButtonChildren.default, _extends({}, wrapperProps, {
-      "aria-label": text,
       align: align
     }), /*#__PURE__*/_react.default.createElement(_splitButton2.default.Provider, {
       value: contextValue
-    }, children)));
+    }, _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement("li", null, child)))));
   }
   const handleClick = (0, _useClickAwayListener.default)(hideButtons);
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);

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

@@ -7,11 +7,11 @@ declare const useChildButtons: (toggleButtonRef: React.RefObject<HTMLButtonEleme
     hideButtonsIfTriggerNotFocused: () => void;
     handleToggleButtonKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
     wrapperProps: {
-        role: string;
         "data-element": string;
+        role: string;
         onKeyDown: (ev: any) => void;
         minWidth: number;
-        ref: import("react").RefObject<HTMLDivElement>;
+        ref: import("react").RefObject<HTMLUListElement>;
     };
     contextValue: {
         inSplitButton: boolean;

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

@@ -53,8 +53,8 @@ const useChildButtons = (toggleButtonRef, widthRatio = 1) => {
     setShowAdditionalButtons(false);
   }, [toggleButtonRef]);
   const wrapperProps = {
-    role: "menu",
     "data-element": "additional-buttons",
+    role: "list",
     onKeyDown: handleKeyDown,
     minWidth,
     ref: childrenContainer

package/package.json

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

package/esm/components/select/select-list/select-list-container.style.d.ts

@@ -1,6 +0,0 @@
-import { SelectListProps } from ".";
-interface StyledSelectListContainerProps extends Pick<SelectListProps, "isLoading"> {
-    maxHeight: number;
-}
-declare const StyledSelectListContainer: import("styled-components").StyledComponent<"div", any, StyledSelectListContainerProps, never>;
-export default StyledSelectListContainer;

package/esm/components/select/select-list/select-list-container.style.js

@@ -1,36 +0,0 @@
-import styled from "styled-components";
-import { baseTheme } from "../../../style/themes";
-const StyledSelectListContainer = styled.div`
-  background-color: white;
-  box-shadow: var(--boxShadow100);
-  animation: fadeIn 250ms ease-out;
-  position: absolute;
-  z-index: ${({
-  theme
-}) => theme.zIndex.popover};
-  max-height: ${({
-  maxHeight
-}) => `${maxHeight}px`};
-  overflow-y: auto;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  border-radius: var(--borderRadius050);
-
-  ${({
-  isLoading
-}) => isLoading && "min-height: 150px"};
-
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-`;
-StyledSelectListContainer.defaultProps = {
-  theme: baseTheme
-};
-export default StyledSelectListContainer;

package/lib/components/select/select-list/select-list-container.style.d.ts

@@ -1,6 +0,0 @@
-import { SelectListProps } from ".";
-interface StyledSelectListContainerProps extends Pick<SelectListProps, "isLoading"> {
-    maxHeight: number;
-}
-declare const StyledSelectListContainer: import("styled-components").StyledComponent<"div", any, StyledSelectListContainerProps, never>;
-export default StyledSelectListContainer;

package/lib/components/select/select-list/select-list-container.style.js

@@ -1,43 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _themes = require("../../../style/themes");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const StyledSelectListContainer = _styledComponents.default.div`
-  background-color: white;
-  box-shadow: var(--boxShadow100);
-  animation: fadeIn 250ms ease-out;
-  position: absolute;
-  z-index: ${({
-  theme
-}) => theme.zIndex.popover};
-  max-height: ${({
-  maxHeight
-}) => `${maxHeight}px`};
-  overflow-y: auto;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  border-radius: var(--borderRadius050);
-
-  ${({
-  isLoading
-}) => isLoading && "min-height: 150px"};
-
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-`;
-StyledSelectListContainer.defaultProps = {
-  theme: _themes.baseTheme
-};
-var _default = exports.default = StyledSelectListContainer;