carbon-react 104.54.2 → 104.55.0

package/esm/__spec_helper__/test-utils.d.ts

@@ -29,6 +29,6 @@ export function testStyledSystemWidth(component: any, styleContainer: any): void
 export function testStyledSystemLayout(component: any, styleContainer: any): void;
 export function testStyledSystemFlexBox(component: any, styleContainer: any): void;
 export function testStyledSystemBackground(component: any, styleContainer: any): void;
-export function expectError(errorMessage: any): () => void;
+export function expectConsoleOutput(message: any, type?: string): () => void;
 declare const keydown: {};
 export { mockMatchMedia };

package/esm/__spec_helper__/test-utils.js

@@ -317,38 +317,37 @@ const testStyledSystemBackground = (component, styleContainer) => {
       }, styleContainer ? styleContainer(wrapper) : wrapper));
     });
   });
-};
+}; // this util will catch that a console output occurred without polluting the output when running the unit tests
+
 
-const expectError = errorMessage => {
-  if (!errorMessage) {
-    throw new Error("no error message provided");
+const expectConsoleOutput = (message, type = "error") => {
+  if (!message) {
+    throw new Error(`no ${type} message provided`);
   }
 
   expect.assertions(1);
-  const {
-    error
-  } = global.console;
-  let errorArgs;
-  jest.spyOn(global.console, "error").mockImplementation((...args) => {
+  const consoleType = global.console[type];
+  let consoleArgs;
+  jest.spyOn(global.console, type).mockImplementation((...args) => {
     if (!args.length) return;
     const msg = args.join(" ");
     const params = args.slice(1, args.length);
 
-    if (sprintf(msg, ...params).includes(errorMessage)) {
-      errorArgs = args;
+    if (sprintf(msg, ...params).includes(message)) {
+      consoleArgs = args;
       return;
     }
 
-    error(...args);
+    consoleType(...args);
   });
   return () => {
-    if (errorArgs) {
+    if (consoleArgs) {
       // eslint-disable-next-line no-console
-      expect(console.error).toHaveBeenCalledWith(...errorArgs);
+      expect(console[type]).toHaveBeenCalledWith(...consoleArgs);
     }
 
-    global.console.error = error;
+    global.console[type] = consoleType;
   };
 };
 
-export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemBackground, expectError };
+export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemBackground, expectConsoleOutput };

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

@@ -79,12 +79,12 @@ const MenuItem = ({
     e.stopPropagation();
 
     if (!disabled) {
+      setOpenPopover(false);
+      focusButton();
+
       if (onClickProp) {
         onClickProp();
       }
-
-      setOpenPopover(false);
-      focusButton();
     } else {
       ref.current.focus();
       e.preventDefault();
@@ -128,7 +128,11 @@ const MenuItem = ({
 
         e.preventDefault();
       } else if (Events.isEnterKey(e)) {
-        if (isHref && download) ref.current.click();
+        if (isHref && download) {
+          ref.current.click();
+        }
+
+        e.preventDefault();
         onClick(e);
       }
     } else if (Events.isEnterKey(e)) {

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

@@ -9,5 +9,5 @@ export const MenuItemDivider: import("styled-components").StyledComponent<"div",
 }, "data-element">;
 export const SubMenuItemIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
 export const MenuButtonOverrideWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledMenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMenuItem: import("styled-components").StyledComponent<"button", any, {}, never>;
 import Icon from "../icon";

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

@@ -17,8 +17,9 @@ const Menu = styled.div`
   theme
 }) => `${theme.zIndex.popover}`}; // TODO (tokens): implement elevation tokens - FE-4437
 `;
-const StyledMenuItem = styled.div`
+const StyledMenuItem = styled.button`
   text-decoration: none;
+  background-color: var(--colorsActionMajorYang100);
 `;
 
 const MenuItemFactory = button => styled(button)`

package/esm/components/button/button.component.d.ts

@@ -24,7 +24,7 @@ declare function Button({ size, subtext, as, children, forwardRef, "aria-label":
 declare namespace Button {
     const propTypes: any;
     namespace defaultProps {
-        const as: string;
+        const buttonType: string;
         const size: string;
         const fullWidth: boolean;
         const disabled: boolean;

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

@@ -7,6 +7,7 @@ import Icon from "../icon";
 import StyledButton, { StyledButtonSubtext } from "./button.style";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
+import Logger from "../../__internal__/utils/logger";
 
 function renderChildren({
   /* eslint-disable react/prop-types */
@@ -51,6 +52,8 @@ function renderChildren({
   }))), iconType && iconPosition === "after" && children && /*#__PURE__*/React.createElement(Icon, iconProps));
 }
 
+let deprecatedWarnTriggered = false;
+
 const Button = ({
   size,
   subtext,
@@ -72,8 +75,14 @@ const Button = ({
   iconTooltipPosition,
   ...rest
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+    Logger.deprecate( // eslint-disable-next-line max-len
+    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+  }
+
   const [internalRef, setInternalRef] = useState(null);
-  const buttonType = buttonTypeProp || as;
+  const buttonType = as || buttonTypeProp;
 
   if (subtext.length > 0 && size !== "large") {
     throw new Error("subtext prop has no effect unless the button is large");
@@ -237,7 +246,7 @@ Button.propTypes = {
   rel: PropTypes.string
 };
 Button.defaultProps = {
-  as: "secondary",
+  buttonType: "secondary",
   size: "medium",
   fullWidth: false,
   disabled: false,

package/esm/components/modal/__internal__/modal-manager.d.ts

@@ -1,9 +1,9 @@
 export default ModalManager;
-declare const ModalManager: ModalManagerInstance;
-declare class ModalManagerInstance {
+export class ModalManagerInstance {
     addModal: (modal: any, setTriggerRefocusFlag: any) => void;
     isTopmost(modal: any): boolean;
     removeModal(modal: any): void;
     clearList(): void;
     #private;
 }
+declare const ModalManager: ModalManagerInstance;

package/esm/components/modal/__internal__/modal-manager.js

@@ -6,17 +6,17 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
-
-function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
-
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
 function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
 
+function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
+
+function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
+
 function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
 
-function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
+function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
 
 var _modalList = /*#__PURE__*/new WeakMap();
 
@@ -30,7 +30,7 @@ let ModalManagerInstance = /*#__PURE__*/function () {
 
     _modalList.set(this, {
       writable: true,
-      value: []
+      value: void 0
     });
 
     _defineProperty(this, "addModal", (modal, setTriggerRefocusFlag) => {
@@ -48,6 +48,14 @@ let ModalManagerInstance = /*#__PURE__*/function () {
         setTriggerRefocusFlag
       });
     });
+
+    // Due to possibility of multiple carbon versions using it
+    // it is necessary to maintain same structure in this global variable
+    if (!window.__CARBON_INTERNALS_MODAL_LIST) {
+      window.__CARBON_INTERNALS_MODAL_LIST = [];
+    }
+
+    _classPrivateFieldSet(this, _modalList, window.__CARBON_INTERNALS_MODAL_LIST);
   }
 
   _createClass(ModalManagerInstance, [{
@@ -91,7 +99,9 @@ let ModalManagerInstance = /*#__PURE__*/function () {
   }, {
     key: "clearList",
     value: function clearList() {
-      _classPrivateFieldSet(this, _modalList, []);
+      window.__CARBON_INTERNALS_MODAL_LIST = [];
+
+      _classPrivateFieldSet(this, _modalList, window.__CARBON_INTERNALS_MODAL_LIST);
     }
   }]);
 
@@ -107,4 +117,5 @@ function _getTopModal2() {
 }
 
 const ModalManager = new ModalManagerInstance();
+export { ModalManagerInstance };
 export default ModalManager;

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

@@ -9,7 +9,9 @@ import Events from "../../__internal__/utils/helpers/events";
 import Popover from "../../__internal__/popover";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { defaultFocusableSelectors } from "../../__internal__/focus-trap/focus-trap-utils";
+import Logger from "../../__internal__/utils/logger";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+let deprecatedWarnTriggered = false;
 
 const MultiActionButton = ({
   align = "left",
@@ -22,6 +24,12 @@ const MultiActionButton = ({
   subtext,
   ...rest
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+    Logger.deprecate( // eslint-disable-next-line max-len
+    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+  }
+
   const ref = useRef();
   const buttonRef = useRef();
   const buttonContainer = useRef();

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

@@ -414,8 +414,6 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     flipEnabled: flipEnabled
   }, children);
   return /*#__PURE__*/React.createElement(StyledSelect, _extends({
-    "aria-expanded": isOpen,
-    "aria-haspopup": "listbox",
     ref: containerRef,
     hasTextCursor: true,
     readOnly: readOnly,

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

@@ -427,8 +427,6 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     multiselectValues: selectedValue
   }, children);
   return /*#__PURE__*/React.createElement(StyledSelectMultiSelect, _extends({
-    "aria-expanded": isOpen,
-    "aria-haspopup": "listbox",
     disabled: disabled,
     readOnly: readOnly,
     hasTextCursor: true,

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

@@ -137,7 +137,7 @@ const SelectTextbox = ({
 
     const ariaLabelledby = hasTextCursor ? joinIds(labelId, accessibilityLabelId) : joinIds(labelId, textId.current);
     return {
-      "aria-expanded": isOpen,
+      "aria-expanded": readOnly ? undefined : isOpen,
       "aria-labelledby": ariaLabelledby || undefined,
       "aria-activedescendant": activeDescendantId,
       "aria-controls": ariaControls,

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

@@ -340,8 +340,6 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     transparent: transparent,
     disabled: disabled,
     readOnly: readOnly,
-    "aria-expanded": isOpen,
-    "aria-haspopup": "listbox",
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,

package/esm/components/split-button/split-button.component.d.ts

@@ -2,8 +2,8 @@ export default SplitButton;
 declare function SplitButton({ align, as, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, ...rest }: {
     [x: string]: any;
     align?: string | undefined;
-    as?: string | undefined;
-    buttonType: any;
+    as: any;
+    buttonType?: string | undefined;
     children: any;
     disabled?: boolean | undefined;
     iconPosition?: string | undefined;

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

@@ -15,13 +15,15 @@ import Popover from "../../__internal__/popover";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { baseTheme } from "../../style/themes";
 import { defaultFocusableSelectors } from "../../__internal__/focus-trap/focus-trap-utils";
+import Logger from "../../__internal__/utils/logger";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 const CONTENT_WIDTH_RATIO = 0.75;
+let deprecatedWarnTriggered = false;
 
 const SplitButton = ({
   align = "left",
-  as = "secondary",
-  buttonType,
+  as,
+  buttonType = "secondary",
   children,
   disabled = false,
   iconPosition = "before",
@@ -32,6 +34,12 @@ const SplitButton = ({
   text,
   ...rest
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+    Logger.deprecate( // eslint-disable-next-line max-len
+    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+  }
+
   const theme = useContext(ThemeContext) || baseTheme;
   const isToggleButtonFocused = useRef(false);
   const buttonLabelId = useRef(guid());
@@ -120,7 +128,7 @@ const SplitButton = ({
         isToggleButtonFocused.current = false;
       },
       onKeyDown: handleToggleButtonKeyDown,
-      buttonType: buttonType || as,
+      buttonType: as || buttonType,
       size
     };
 
@@ -149,7 +157,7 @@ const SplitButton = ({
       primary: theme.colors.white,
       secondary: theme.colors.primary
     };
-    return colorsMap[buttonType || as];
+    return colorsMap[as || buttonType];
   }
 
   function renderMainButton() {

package/lib/__spec_helper__/test-utils.d.ts

@@ -29,6 +29,6 @@ export function testStyledSystemWidth(component: any, styleContainer: any): void
 export function testStyledSystemLayout(component: any, styleContainer: any): void;
 export function testStyledSystemFlexBox(component: any, styleContainer: any): void;
 export function testStyledSystemBackground(component: any, styleContainer: any): void;
-export function expectError(errorMessage: any): () => void;
+export function expectConsoleOutput(message: any, type?: string): () => void;
 declare const keydown: {};
 export { mockMatchMedia };

package/lib/__spec_helper__/test-utils.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "mockMatchMedia", {
     return _mockMatchMedia.mockMatchMedia;
   }
 });
-exports.expectError = exports.testStyledSystemBackground = exports.testStyledSystemFlexBox = exports.testStyledSystemLayout = exports.testStyledSystemWidth = exports.testStyledSystemColor = exports.testStyledSystemPadding = exports.testStyledSystemMargin = exports.testStyledSystemSpacing = exports.carbonThemesJestTable = exports.simulate = exports.click = exports.listFrom = exports.assertHoverTraversal = exports.assertKeyboardTraversal = exports.keyboard = exports.makeArrayKeys = exports.childrenFrom = exports.selectedItemOf = exports.hoverList = exports.toCSSCase = exports.assertStyleMatch = exports.getDefaultValue = void 0;
+exports.expectConsoleOutput = exports.testStyledSystemBackground = exports.testStyledSystemFlexBox = exports.testStyledSystemLayout = exports.testStyledSystemWidth = exports.testStyledSystemColor = exports.testStyledSystemPadding = exports.testStyledSystemMargin = exports.testStyledSystemSpacing = exports.carbonThemesJestTable = exports.simulate = exports.click = exports.listFrom = exports.assertHoverTraversal = exports.assertKeyboardTraversal = exports.keyboard = exports.makeArrayKeys = exports.childrenFrom = exports.selectedItemOf = exports.hoverList = exports.toCSSCase = exports.assertStyleMatch = exports.getDefaultValue = void 0;
 
 var _enzyme = require("enzyme");
 
@@ -373,40 +373,39 @@ const testStyledSystemBackground = (component, styleContainer) => {
       }, styleContainer ? styleContainer(wrapper) : wrapper));
     });
   });
-};
+}; // this util will catch that a console output occurred without polluting the output when running the unit tests
+
 
 exports.testStyledSystemBackground = testStyledSystemBackground;
 
-const expectError = errorMessage => {
-  if (!errorMessage) {
-    throw new Error("no error message provided");
+const expectConsoleOutput = (message, type = "error") => {
+  if (!message) {
+    throw new Error(`no ${type} message provided`);
   }
 
   expect.assertions(1);
-  const {
-    error
-  } = global.console;
-  let errorArgs;
-  jest.spyOn(global.console, "error").mockImplementation((...args) => {
+  const consoleType = global.console[type];
+  let consoleArgs;
+  jest.spyOn(global.console, type).mockImplementation((...args) => {
     if (!args.length) return;
     const msg = args.join(" ");
     const params = args.slice(1, args.length);
 
-    if ((0, _sprintfJs.sprintf)(msg, ...params).includes(errorMessage)) {
-      errorArgs = args;
+    if ((0, _sprintfJs.sprintf)(msg, ...params).includes(message)) {
+      consoleArgs = args;
       return;
     }
 
-    error(...args);
+    consoleType(...args);
   });
   return () => {
-    if (errorArgs) {
+    if (consoleArgs) {
       // eslint-disable-next-line no-console
-      expect(console.error).toHaveBeenCalledWith(...errorArgs);
+      expect(console[type]).toHaveBeenCalledWith(...consoleArgs);
     }
 
-    global.console.error = error;
+    global.console[type] = consoleType;
   };
 };
 
-exports.expectError = expectError;
+exports.expectConsoleOutput = expectConsoleOutput;

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

@@ -100,12 +100,12 @@ const MenuItem = ({
     e.stopPropagation();
 
     if (!disabled) {
+      setOpenPopover(false);
+      focusButton();
+
       if (onClickProp) {
         onClickProp();
       }
-
-      setOpenPopover(false);
-      focusButton();
     } else {
       ref.current.focus();
       e.preventDefault();
@@ -149,7 +149,11 @@ const MenuItem = ({
 
         e.preventDefault();
       } else if (_events.default.isEnterKey(e)) {
-        if (isHref && download) ref.current.click();
+        if (isHref && download) {
+          ref.current.click();
+        }
+
+        e.preventDefault();
         onClick(e);
       }
     } else if (_events.default.isEnterKey(e)) {

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

@@ -9,5 +9,5 @@ export const MenuItemDivider: import("styled-components").StyledComponent<"div",
 }, "data-element">;
 export const SubMenuItemIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
 export const MenuButtonOverrideWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledMenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMenuItem: import("styled-components").StyledComponent<"button", any, {}, never>;
 import Icon from "../icon";

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

@@ -37,8 +37,9 @@ const Menu = _styledComponents.default.div`
 }) => `${theme.zIndex.popover}`}; // TODO (tokens): implement elevation tokens - FE-4437
 `;
 exports.Menu = Menu;
-const StyledMenuItem = _styledComponents.default.div`
+const StyledMenuItem = _styledComponents.default.button`
   text-decoration: none;
+  background-color: var(--colorsActionMajorYang100);
 `;
 exports.StyledMenuItem = StyledMenuItem;
 

package/lib/components/button/button.component.d.ts

@@ -24,7 +24,7 @@ declare function Button({ size, subtext, as, children, forwardRef, "aria-label":
 declare namespace Button {
     const propTypes: any;
     namespace defaultProps {
-        const as: string;
+        const buttonType: string;
         const size: string;
         const fullWidth: boolean;
         const disabled: boolean;

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

@@ -19,6 +19,8 @@ var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tag
 
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -70,6 +72,8 @@ function renderChildren({
   }))), iconType && iconPosition === "after" && children && /*#__PURE__*/_react.default.createElement(_icon.default, iconProps));
 }
 
+let deprecatedWarnTriggered = false;
+
 const Button = ({
   size,
   subtext,
@@ -91,8 +95,15 @@ const Button = ({
   iconTooltipPosition,
   ...rest
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+
+    _logger.default.deprecate( // eslint-disable-next-line max-len
+    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+  }
+
   const [internalRef, setInternalRef] = (0, _react.useState)(null);
-  const buttonType = buttonTypeProp || as;
+  const buttonType = as || buttonTypeProp;
 
   if (subtext.length > 0 && size !== "large") {
     throw new Error("subtext prop has no effect unless the button is large");
@@ -256,7 +267,7 @@ Button.propTypes = {
   rel: _propTypes.default.string
 };
 Button.defaultProps = {
-  as: "secondary",
+  buttonType: "secondary",
   size: "medium",
   fullWidth: false,
   disabled: false,

package/lib/components/modal/__internal__/modal-manager.d.ts

@@ -1,9 +1,9 @@
 export default ModalManager;
-declare const ModalManager: ModalManagerInstance;
-declare class ModalManagerInstance {
+export class ModalManagerInstance {
     addModal: (modal: any, setTriggerRefocusFlag: any) => void;
     isTopmost(modal: any): boolean;
     removeModal(modal: any): void;
     clearList(): void;
     #private;
 }
+declare const ModalManager: ModalManagerInstance;

package/lib/components/modal/__internal__/modal-manager.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.ModalManagerInstance = void 0;
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
@@ -13,17 +13,17 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
-
-function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
-
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
 function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
 
+function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
+
+function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
+
 function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
 
-function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
+function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
 
 var _modalList = /*#__PURE__*/new WeakMap();
 
@@ -37,7 +37,7 @@ let ModalManagerInstance = /*#__PURE__*/function () {
 
     _modalList.set(this, {
       writable: true,
-      value: []
+      value: void 0
     });
 
     _defineProperty(this, "addModal", (modal, setTriggerRefocusFlag) => {
@@ -55,6 +55,14 @@ let ModalManagerInstance = /*#__PURE__*/function () {
         setTriggerRefocusFlag
       });
     });
+
+    // Due to possibility of multiple carbon versions using it
+    // it is necessary to maintain same structure in this global variable
+    if (!window.__CARBON_INTERNALS_MODAL_LIST) {
+      window.__CARBON_INTERNALS_MODAL_LIST = [];
+    }
+
+    _classPrivateFieldSet(this, _modalList, window.__CARBON_INTERNALS_MODAL_LIST);
   }
 
   _createClass(ModalManagerInstance, [{
@@ -98,13 +106,17 @@ let ModalManagerInstance = /*#__PURE__*/function () {
   }, {
     key: "clearList",
     value: function clearList() {
-      _classPrivateFieldSet(this, _modalList, []);
+      window.__CARBON_INTERNALS_MODAL_LIST = [];
+
+      _classPrivateFieldSet(this, _modalList, window.__CARBON_INTERNALS_MODAL_LIST);
     }
   }]);
 
   return ModalManagerInstance;
 }();
 
+exports.ModalManagerInstance = ModalManagerInstance;
+
 function _getTopModal2() {
   if (!_classPrivateFieldGet(this, _modalList).length) {
     return {};

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

@@ -23,6 +23,8 @@ var _utils = require("../../style/utils");
 
 var _focusTrapUtils = require("../../__internal__/focus-trap/focus-trap-utils");
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -32,6 +34,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 function _extends() { _extends = Object.assign || 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); }
 
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
+let deprecatedWarnTriggered = false;
 
 const MultiActionButton = ({
   align = "left",
@@ -44,6 +47,13 @@ const MultiActionButton = ({
   subtext,
   ...rest
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+
+    _logger.default.deprecate( // eslint-disable-next-line max-len
+    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+  }
+
   const ref = (0, _react.useRef)();
   const buttonRef = (0, _react.useRef)();
   const buttonContainer = (0, _react.useRef)();

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

@@ -439,8 +439,6 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
-    "aria-expanded": isOpen,
-    "aria-haspopup": "listbox",
     ref: containerRef,
     hasTextCursor: true,
     readOnly: readOnly,

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

@@ -455,8 +455,6 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectMultiSelect, _extends({
-    "aria-expanded": isOpen,
-    "aria-haspopup": "listbox",
     disabled: disabled,
     readOnly: readOnly,
     hasTextCursor: true,

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

@@ -158,7 +158,7 @@ const SelectTextbox = ({
 
     const ariaLabelledby = hasTextCursor ? joinIds(labelId, accessibilityLabelId) : joinIds(labelId, textId.current);
     return {
-      "aria-expanded": isOpen,
+      "aria-expanded": readOnly ? undefined : isOpen,
       "aria-labelledby": ariaLabelledby || undefined,
       "aria-activedescendant": activeDescendantId,
       "aria-controls": ariaControls,

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

@@ -365,8 +365,6 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     transparent: transparent,
     disabled: disabled,
     readOnly: readOnly,
-    "aria-expanded": isOpen,
-    "aria-haspopup": "listbox",
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,

package/lib/components/split-button/split-button.component.d.ts

@@ -2,8 +2,8 @@ export default SplitButton;
 declare function SplitButton({ align, as, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, ...rest }: {
     [x: string]: any;
     align?: string | undefined;
-    as?: string | undefined;
-    buttonType: any;
+    as: any;
+    buttonType?: string | undefined;
     children: any;
     disabled?: boolean | undefined;
     iconPosition?: string | undefined;

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

@@ -35,6 +35,8 @@ var _themes = require("../../style/themes");
 
 var _focusTrapUtils = require("../../__internal__/focus-trap/focus-trap-utils");
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -45,11 +47,12 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 const CONTENT_WIDTH_RATIO = 0.75;
+let deprecatedWarnTriggered = false;
 
 const SplitButton = ({
   align = "left",
-  as = "secondary",
-  buttonType,
+  as,
+  buttonType = "secondary",
   children,
   disabled = false,
   iconPosition = "before",
@@ -60,6 +63,13 @@ const SplitButton = ({
   text,
   ...rest
 }) => {
+  if (!deprecatedWarnTriggered && as) {
+    deprecatedWarnTriggered = true;
+
+    _logger.default.deprecate( // eslint-disable-next-line max-len
+    "The `as` prop is deprecated and will soon be removed. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
+  }
+
   const theme = (0, _react.useContext)(_styledComponents.ThemeContext) || _themes.baseTheme;
 
   const isToggleButtonFocused = (0, _react.useRef)(false);
@@ -149,7 +159,7 @@ const SplitButton = ({
         isToggleButtonFocused.current = false;
       },
       onKeyDown: handleToggleButtonKeyDown,
-      buttonType: buttonType || as,
+      buttonType: as || buttonType,
       size
     };
 
@@ -178,7 +188,7 @@ const SplitButton = ({
       primary: theme.colors.white,
       secondary: theme.colors.primary
     };
-    return colorsMap[buttonType || as];
+    return colorsMap[as || buttonType];
   }
 
   function renderMainButton() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.54.2",
+  "version": "104.55.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -104,12 +104,12 @@
     "conventional-changelog-conventionalcommits": "^4.5.0",
     "core-js": "^3.20.3",
     "cross-env": "^5.2.0",
-    "cypress": "^9.2.0",
-    "cypress-axe": "^0.13.0",
+    "cypress": "^9.5.2",
+    "cypress-axe": "^0.14.0",
     "cypress-cucumber-preprocessor": "^4.3.1",
-    "cypress-each": "^1.10.0",
+    "cypress-each": "^1.11.0",
     "cypress-plugin-tab": "^1.0.5",
-    "cypress-real-events": "^1.6.0",
+    "cypress-real-events": "^1.7.0",
     "cypress-storybook": "^0.5.1",
     "cz-conventional-changelog": "^3.3.0",
     "date-fns-tz": "^1.2.2",