carbon-react 109.2.1 → 109.2.4

package/esm/__internal__/validations/validation-icon.component.js

@@ -38,7 +38,7 @@ const ValidationIcon = ({
   const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => ["bottom", "left", "right", "top"].includes(override));
 
   if (tooltipFlipOverrides) {
-    invariant(flipBehaviourCheck, `The tooltipFlipOverrides prop supplied to ValidationIcon must be an array containing some or all of ["top", "bottom", "left", "right"].`);
+    !flipBehaviourCheck ? process.env.NODE_ENV !== "production" ? invariant(false, `The tooltipFlipOverrides prop supplied to ValidationIcon must be an array containing some or all of ["top", "bottom", "left", "right"].`) : invariant(false) : void 0;
   }
 
   const {

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

@@ -18,7 +18,7 @@ const AccordionGroup = ({
     });
     return hasAccordionChildren;
   }, [children]);
-  invariant(hasProperChildren, `AccordionGroup accepts only children of type \`${Accordion.displayName}\`.`);
+  !hasProperChildren ? process.env.NODE_ENV !== "production" ? invariant(false, `AccordionGroup accepts only children of type \`${Accordion.displayName}\`.`) : invariant(false) : void 0;
   const filteredChildren = useMemo(() => React.Children.toArray(children).filter(child => {
     return /*#__PURE__*/React.isValidElement(child);
   }), [children]);

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

@@ -60,8 +60,8 @@ const ActionPopoverItem = ({
 }) => {
   const l = useLocale();
   const context = useContext(ActionPopoverContext);
-  invariant(context, "ActionPopoverItem must be used within an ActionPopover component");
-  invariant( /*#__PURE__*/React.isValidElement(submenu) ? submenu.type === ActionPopoverMenu : true, "ActionPopoverItem only accepts submenu of type `ActionPopoverMenu`");
+  !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;
   const {
     setOpenPopover,
     isOpenPopover,

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

@@ -21,11 +21,11 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
   ...rest
 }, ref) => {
   const context = useContext(ActionPopoverContext);
-  invariant(context, "ActionPopoverMenu must be used within an ActionPopover component");
+  !context ? process.env.NODE_ENV !== "production" ? invariant(false, "ActionPopoverMenu must be used within an ActionPopover component") : invariant(false) : void 0;
   const {
     focusButton
   } = context;
-  invariant(setOpen && setFocusIndex && typeof focusIndex !== "undefined", "ActionPopoverMenu must be used within an ActionPopover or ActionPopoverItem component");
+  !(setOpen && setFocusIndex && typeof focusIndex !== "undefined") ? process.env.NODE_ENV !== "production" ? invariant(false, "ActionPopoverMenu must be used within an ActionPopover or ActionPopoverItem component") : invariant(false) : void 0;
   const hasProperChildren = useMemo(() => {
     const incorrectChild = React.Children.toArray(children).find(child => {
       if (! /*#__PURE__*/React.isValidElement(child)) {
@@ -36,7 +36,7 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
     });
     return !incorrectChild;
   }, [children]);
-  invariant(hasProperChildren, `ActionPopoverMenu only accepts children of type \`${ActionPopoverItem.displayName}\`` + ` and \`${ActionPopoverDivider.displayName}\`.`);
+  !hasProperChildren ? process.env.NODE_ENV !== "production" ? invariant(false, `ActionPopoverMenu only accepts children of type \`${ActionPopoverItem.displayName}\`` + ` and \`${ActionPopoverDivider.displayName}\`.`) : invariant(false) : void 0;
   const items = useMemo(() => {
     return React.Children.toArray(children).filter(child => {
       return /*#__PURE__*/React.isValidElement(child) && child.type === ActionPopoverItem;

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

@@ -49,7 +49,7 @@ const ActionPopover = ({
     });
     return !incorrectChild;
   }, [children]);
-  invariant(hasProperChildren, `ActionPopover only accepts children of type \`${ActionPopoverItem.displayName}\`` + ` and \`${ActionPopoverDivider.displayName}\`.`);
+  !hasProperChildren ? process.env.NODE_ENV !== "production" ? invariant(false, `ActionPopover only accepts children of type \`${ActionPopoverItem.displayName}\`` + ` and \`${ActionPopoverDivider.displayName}\`.`) : invariant(false) : void 0;
   const mappedPlacement = useMemo(() => {
     if (placement === "top" && !rightAlignMenu) {
       return "top-end";

package/esm/components/anchor-navigation/anchor-navigation.component.js

@@ -13,14 +13,14 @@ const AnchorNavigation = ({
   children,
   stickyNavigation
 }) => {
-  invariant(isFragment(stickyNavigation), "`stickyNavigation` prop in `AnchorNavigation` should be a React Fragment.");
+  !isFragment(stickyNavigation) ? process.env.NODE_ENV !== "production" ? invariant(false, "`stickyNavigation` prop in `AnchorNavigation` should be a React Fragment.") : invariant(false) : void 0;
   const hasCorrectItemStructure = useMemo(() => {
     const incorrectChild = React.Children.toArray(stickyNavigation.props.children).find(child => {
       return ! /*#__PURE__*/React.isValidElement(child) || child.type.displayName !== AnchorNavigationItem.displayName;
     });
     return !incorrectChild;
   }, [stickyNavigation]);
-  invariant(hasCorrectItemStructure, `\`stickyNavigation\` prop in \`AnchorNavigation\` should be a React Fragment that only contains children of type \`${AnchorNavigationItem.displayName}\``);
+  !hasCorrectItemStructure ? process.env.NODE_ENV !== "production" ? invariant(false, `\`stickyNavigation\` prop in \`AnchorNavigation\` should be a React Fragment that only contains children of type \`${AnchorNavigationItem.displayName}\``) : invariant(false) : void 0;
   const [selectedIndex, setSelectedIndex] = useState(0);
   const sectionRefs = useRef(React.Children.map(stickyNavigation.props.children, child => child.props.target));
   const anchorRefs = useRef(Array.from({

package/esm/components/badge/badge.style.d.ts

@@ -1,9 +1,6 @@
 /// <reference types="react" />
 declare const StyledBadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const StyledButton: import("styled-components").StyledComponent<{
-    ({ size, subtext, children, forwardRef, "aria-label": ariaLabel, disabled, destructive, buttonType: buttonTypeProp, iconType, iconPosition, href, m, px, noWrap, target, rel, iconTooltipMessage, iconTooltipPosition, fullWidth, ...rest }: import("../button").ButtonProps): JSX.Element;
-    displayName: string;
-}, any, {}, never>;
+declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 declare const StyledCrossIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 export { StyledBadgeWrapper, StyledButton, StyledCrossIcon, StyledCounter };

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

@@ -58,10 +58,7 @@ export interface ButtonProps extends SpaceProps {
     /** HTML rel attribute */
     rel?: string;
 }
-declare const Button: {
-    ({ size, subtext, children, forwardRef, "aria-label": ariaLabel, disabled, destructive, buttonType: buttonTypeProp, iconType, iconPosition, href, m, px, noWrap, target, rel, iconTooltipMessage, iconTooltipPosition, fullWidth, ...rest }: ButtonProps): JSX.Element;
-    displayName: string;
-};
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 declare const ButtonWithForwardRef: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { ButtonWithForwardRef };
 export default Button;

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 */
@@ -73,8 +74,8 @@ renderChildren.propTypes = {
     }
   }
 };
-
-const Button = ({
+let deprecatedForwardRefWarnTriggered = false;
+const Button = /*#__PURE__*/React.forwardRef(({
   size = "medium",
   subtext = "",
   children,
@@ -95,11 +96,16 @@ const Button = ({
   iconTooltipPosition,
   fullWidth = false,
   ...rest
-}) => {
-  invariant(!!(children || iconType), "Either prop `iconType` must be defined or this node must have children.");
+}, ref) => {
+  !!!(children || iconType) ? process.env.NODE_ENV !== "production" ? invariant(false, "Either prop `iconType` must be defined or this node must have children.") : invariant(false) : void 0;
 
   if (subtext) {
-    invariant(size === "large", "subtext prop has no effect unless the button is large.");
+    !(size === "large") ? process.env.NODE_ENV !== "production" ? invariant(false, "subtext prop has no effect unless the button is large.") : invariant(false) : void 0;
+  }
+
+  if (!deprecatedForwardRefWarnTriggered && forwardRef) {
+    deprecatedForwardRefWarnTriggered = true;
+    Logger.deprecate("The `forwardRef` prop in `Button` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
 
   const [internalRef, setInternalRef] = useState();
@@ -129,10 +135,11 @@ const Button = ({
 
   const setRefs = useCallback(reference => {
     setInternalRef(reference);
-    if (!forwardRef) return;
-    if (typeof forwardRef === "object") forwardRef.current = reference;
-    if (typeof forwardRef === "function") forwardRef(reference);
-  }, [forwardRef]);
+    const activeRef = ref || forwardRef;
+    if (!activeRef) return;
+    if (typeof activeRef === "object") activeRef.current = reference;
+    if (typeof activeRef === "function") activeRef(reference);
+  }, [ref, forwardRef]);
   return /*#__PURE__*/React.createElement(StyledButton, _extends({
     "aria-label": !children && iconType ? ariaLabel || iconType : undefined,
     as: !disabled && href ? "a" : "button",
@@ -169,8 +176,7 @@ const Button = ({
     iconTooltipPosition,
     tooltipTarget: internalRef
   }));
-};
-
+});
 Button.propTypes = {
   "aria-label": PropTypes.string,
   "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
@@ -507,9 +513,17 @@ Button.propTypes = {
   "target": PropTypes.string,
   "type": PropTypes.string
 };
-const ButtonWithForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Button, _extends({
-  forwardRef: ref
-}, props)));
+let deprecatedButtonForwardRefWarnTriggered = false;
+const ButtonWithForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => {
+  if (!deprecatedButtonForwardRefWarnTriggered) {
+    deprecatedButtonForwardRefWarnTriggered = true;
+    Logger.deprecate("The `ButtonWithForwardRef` component is deprecated and will soon be removed. Please use a basic `Button` component with `ref` instead.");
+  }
+
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    ref: ref
+  }, props));
+});
 ButtonWithForwardRef.propTypes = {
   "aria-label": PropTypes.string,
   "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),

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

@@ -24,7 +24,7 @@ const ButtonBar = ({
     });
     return !incorrectChild;
   }, [children]);
-  invariant(hasProperChildren, "ButtonBar accepts only `Button` or `IconButton` elements.");
+  !hasProperChildren ? process.env.NODE_ENV !== "production" ? invariant(false, "ButtonBar accepts only `Button` or `IconButton` elements.") : invariant(false) : void 0;
 
   const getBtnProps = child => {
     var _child$props, _child$props2, _child$props2$childre, _child$props2$childre2;

package/esm/components/decimal/decimal.component.js

@@ -31,10 +31,10 @@ const Decimal = ({
   const emptyValue = allowEmptyValue ? "" : "0.00";
   const getSafeValueProp = useCallback(initialValue => {
     // We're intentionally preventing the use of number values to help prevent any unintentional rounding issues
-    invariant(typeof initialValue === "string", "Decimal `value` prop must be a string");
+    !(typeof initialValue === "string") ? process.env.NODE_ENV !== "production" ? invariant(false, "Decimal `value` prop must be a string") : invariant(false) : void 0;
 
     if (initialValue && !allowEmptyValue) {
-      invariant(initialValue !== "", "Decimal `value` must not be an empty string. Please use `allowEmptyValue` or `0.00`");
+      !(initialValue !== "") ? process.env.NODE_ENV !== "production" ? invariant(false, "Decimal `value` must not be an empty string. Please use `allowEmptyValue` or `0.00`") : invariant(false) : void 0;
     }
 
     return initialValue;
@@ -164,7 +164,7 @@ const Decimal = ({
   const prevControlledRef = useRef();
   useEffect(() => {
     const message = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
-    invariant(prevControlledRef.current !== isControlled, message);
+    !(prevControlledRef.current !== isControlled) ? process.env.NODE_ENV !== "production" ? invariant(false, message) : invariant(false) : void 0;
     prevControlledRef.current = isControlled;
   }, [isControlled]);
   const prevValue = usePrevious(value);

package/esm/components/drawer/drawer.component.js

@@ -69,7 +69,7 @@ const Drawer = ({
   const previousValue = usePrevious(expanded);
   useEffect(() => {
     const message = "Drawer should not switch from uncontrolled to controlled" + " (or vice versa). Decide between using a controlled or uncontrolled Drawer element" + " for the lifetime of the component";
-    invariant(isControlled.current === (expanded !== undefined), message);
+    !(isControlled.current === (expanded !== undefined)) ? process.env.NODE_ENV !== "production" ? invariant(false, message) : invariant(false) : void 0;
 
     if (isControlled.current && previousValue !== expanded) {
       setIsExpanded(expanded);

package/esm/components/duelling-picklist/picklist-group/picklist-group.style.js

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { ButtonWithForwardRef } from "../../button";
+import Button from "../../button";
 import { StyledButton } from "../picklist-item/picklist-item.style";
 const StyledGroupWrapper = styled.li`
   ${({
@@ -25,7 +25,7 @@ const StyledPicklistGroup = styled.li`
   width: 100%;
   margin-bottom: 4px;
 `;
-const StyledGroupButton = styled(ButtonWithForwardRef)`
+const StyledGroupButton = styled(Button)`
   ${({
   iconType
 }) => css`

package/esm/components/duelling-picklist/picklist-item/picklist-item.style.js

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { ButtonWithForwardRef } from "../../button";
+import Button from "../../button";
 import Icon from "../../icon";
 import StyledIcon from "../../icon/icon.style";
 const StyledPicklistItem = styled.li`
@@ -30,7 +30,7 @@ const StyledPicklistItem = styled.li`
     }
   `}
 `;
-const StyledButton = styled(ButtonWithForwardRef)`
+const StyledButton = styled(Button)`
   ${({
   iconType
 }) => css`

package/esm/components/icon/icon.component.js

@@ -36,7 +36,7 @@ const Icon = /*#__PURE__*/React.forwardRef(({
   const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => ICON_TOOLTIP_POSITIONS.includes(override));
 
   if (tooltipFlipOverrides) {
-    invariant(flipBehaviourCheck, `The tooltipFlipOverrides prop supplied to \`Icon\` must be an array containing some or all of ["top", "bottom", "left", "right"].`);
+    !flipBehaviourCheck ? process.env.NODE_ENV !== "production" ? invariant(false, `The tooltipFlipOverrides prop supplied to \`Icon\` must be an array containing some or all of ["top", "bottom", "left", "right"].`) : invariant(false) : void 0;
   }
 
   const isInteractive = !!tooltipMessage && !disabled;

package/esm/components/menu/__internal__/submenu/submenu.component.js

@@ -215,6 +215,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       menuType: menuContext.menuType,
       asPassiveItem: asPassiveItem
     }, /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({}, rest, {
+      onClick: onClick,
       className: className,
       menuType: menuContext.menuType,
       ref: ref,

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

@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useState, useRef, useMemo } from "react"
 import PropTypes from "prop-types";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import { StyledMultiActionButton, StyledButtonChildrenContainer } from "./multi-action-button.style";
-import Button, { ButtonWithForwardRef } from "../button";
+import Button from "../button";
 import Events from "../../__internal__/utils/helpers/events";
 import Popover from "../../__internal__/popover";
 import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from "../../style/utils";
@@ -67,11 +67,6 @@ const MultiActionButton = ({
           (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
         }
       };
-
-      if (child.type === Button) {
-        return /*#__PURE__*/React.createElement(ButtonWithForwardRef, _extends({}, child.props, props));
-      }
-
       return /*#__PURE__*/React.cloneElement(child, props);
     });
   };

package/esm/components/note/note.component.js

@@ -25,12 +25,12 @@ const Note = ({
   onLinkAdded,
   ...rest
 }) => {
-  invariant(width > 0, "<Note> width must be greater than 0");
-  invariant(createdDate, "<Note> createdDate is required");
-  invariant(noteContent, "<Note> noteContent is required");
-  invariant(!status || status.text, "<Note> status.text is required");
-  invariant(!status || status.timeStamp, "<Note> status.timeStamp is required");
-  invariant(!inlineControl || inlineControl.type === ActionPopover, "<Note> inlineControl must be an instance of <ActionPopover>");
+  !(width > 0) ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> width must be greater than 0") : invariant(false) : void 0;
+  !createdDate ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> createdDate is required") : invariant(false) : void 0;
+  !noteContent ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> noteContent is required") : invariant(false) : void 0;
+  !(!status || status.text) ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> status.text is required") : invariant(false) : void 0;
+  !(!status || status.timeStamp) ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> status.timeStamp is required") : invariant(false) : void 0;
+  !(!inlineControl || inlineControl.type === ActionPopover) ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> inlineControl must be an instance of <ActionPopover>") : invariant(false) : void 0;
 
   const renderStatus = () => {
     if (!status) {

package/esm/components/numeral-date/numeral-date.component.js

@@ -78,7 +78,7 @@ const NumeralDate = ({
   const [internalMessages, setInternalMessages] = useState({});
   useEffect(() => {
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
-    invariant(isControlled.current === (value !== undefined), modeSwitchedMessage);
+    !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? invariant(false, modeSwitchedMessage) : invariant(false) : void 0;
   }, [value]);
   const validationMessages = {
     dd: l.numeralDate.validation.day(),

package/esm/components/search/search.component.js

@@ -34,7 +34,7 @@ const Search = ({
 }) => {
   const isControlled = value !== undefined;
   const initialValue = isControlled ? value : defaultValue;
-  invariant(typeof initialValue === "string", "This component has no initial value");
+  !(typeof initialValue === "string") ? process.env.NODE_ENV !== "production" ? invariant(false, "This component has no initial value") : invariant(false) : void 0;
   const [searchValue, setSearchValue] = useState(initialValue);
   const [isFocused, setIsFocused] = useState(false);
   const [searchIsActive, setSearchIsActive] = useState(initialValue.length >= threshold);

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

@@ -168,8 +168,8 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   useEffect(() => {
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
-    invariant(isControlled.current === (value !== undefined), modeSwitchedMessage);
-    invariant(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
+    !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? invariant(false, modeSwitchedMessage) : invariant(false) : void 0;
+    !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? invariant(false, onChangeMissingMessage) : invariant(false) : void 0;
 
     if (isControlled.current) {
       setSelectedValue(prevValue => {
@@ -203,7 +203,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   useEffect(() => {
     const hasListActionButton = listActionButton !== undefined;
     const onListActionMissingMessage = "onListAction prop required when using listActionButton prop";
-    invariant(!hasListActionButton || hasListActionButton && onListAction, onListActionMissingMessage);
+    !(!hasListActionButton || hasListActionButton && onListAction) ? process.env.NODE_ENV !== "production" ? invariant(false, onListActionMissingMessage) : invariant(false) : void 0;
   }, [listActionButton, onListAction]);
   useEffect(() => {
     if (isControlled.current) {

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

@@ -201,8 +201,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   useEffect(() => {
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
-    invariant(isControlled.current === (value !== undefined), modeSwitchedMessage);
-    invariant(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
+    !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? invariant(false, modeSwitchedMessage) : invariant(false) : void 0;
+    !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? invariant(false, onChangeMissingMessage) : invariant(false) : void 0;
 
     if (isControlled.current) {
       setSelectedValue(value);

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

@@ -149,8 +149,8 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   useEffect(() => {
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
-    invariant(isControlled.current === (value !== undefined), modeSwitchedMessage);
-    invariant(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
+    !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? invariant(false, modeSwitchedMessage) : invariant(false) : void 0;
+    !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? invariant(false, onChangeMissingMessage) : invariant(false) : void 0;
 
     if (isControlled.current) {
       setSelectedValue(value);

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

@@ -6,7 +6,7 @@ import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import Icon from "../icon";
-import Button, { ButtonWithForwardRef } from "../button";
+import Button from "../button";
 import StyledSplitButton from "./split-button.style";
 import StyledSplitButtonToggle from "./split-button-toggle.style";
 import StyledSplitButtonChildrenContainer from "./split-button-children.style";
@@ -217,11 +217,6 @@ const SplitButton = ({
           (_toggleButton$current = toggleButton.current) === null || _toggleButton$current === void 0 ? void 0 : _toggleButton$current.focus();
         }
       };
-
-      if (child.type === Button) {
-        return /*#__PURE__*/React.createElement(ButtonWithForwardRef, _extends({}, child.props, childProps));
-      }
-
       return /*#__PURE__*/React.cloneElement(child, childProps);
     });
   }

package/esm/components/tooltip/tooltip.component.js

@@ -29,7 +29,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
   ...rest
 }, ref) => {
   const isFlipOverridesValid = !flipOverrides || Array.isArray(flipOverrides) && flipOverrides.every(placement => TOOLTIP_POSITIONS.includes(placement));
-  invariant(isFlipOverridesValid, `The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].`);
+  !isFlipOverridesValid ? process.env.NODE_ENV !== "production" ? invariant(false, `The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].`) : invariant(false) : void 0;
 
   const tooltip = (attrs, content) => {
     const currentPosition = attrs["data-placement"] || position;

package/esm/hooks/__internal__/useScrollBlock/useScrollBlock.js

@@ -1,55 +1,57 @@
-import { useRef, useCallback, useMemo } from "react";
+import { useRef, useCallback } from "react";
 import guid from "../../../__internal__/utils/helpers/guid";
 import ScrollBlockManager from "./scroll-block-manager"; // TODO: This component can be refactored to remove redundant code after
 // we can confirm that all Sage products use version 105.0.0^
 
 const scrollBlockManager = new ScrollBlockManager();
 
+const getRules = () => {
+  /* istanbul ignore next */
+  const {
+    documentElement,
+    body
+  } = document || {};
+  const scrollBarWidth = window.innerWidth - documentElement.clientWidth;
+  const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
+  return [// TODO: First two entries of this array with the documentElement can be removed
+  {
+    element: documentElement,
+    property: "position",
+    blockingValue: "relative"
+  }, {
+    element: documentElement,
+    property: "overflow",
+    blockingValue: "hidden"
+  }, {
+    element: body,
+    property: "position",
+    blockingValue: "relative"
+  }, {
+    element: body,
+    property: "overflow",
+    blockingValue: "hidden"
+  }, {
+    element: body,
+    property: "paddingRight",
+    blockingValue: `${bodyPaddingRight + scrollBarWidth}px`
+  }];
+};
+
 const useScrollBlock = () => {
   const {
     current: containerGuid
   } = useRef(guid());
   const originalValuesRef = useRef([]);
-  const rules = useMemo(() => {
-    /* istanbul ignore next */
-    const {
-      documentElement,
-      body
-    } = document || {};
-    const scrollBarWidth = window.innerWidth - documentElement.clientWidth;
-    const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
-    return [// TODO: First two entries of this array with the documentElement can be removed
-    {
-      element: documentElement,
-      property: "position",
-      blockingValue: "relative"
-    }, {
-      element: documentElement,
-      property: "overflow",
-      blockingValue: "hidden"
-    }, {
-      element: body,
-      property: "position",
-      blockingValue: "relative"
-    }, {
-      element: body,
-      property: "overflow",
-      blockingValue: "hidden"
-    }, {
-      element: body,
-      property: "paddingRight",
-      blockingValue: `${bodyPaddingRight + scrollBarWidth}px`
-    }];
-  }, []);
   const restoreValues = useCallback(() => {
-    rules.forEach(({
+    getRules().forEach(({
       element,
       property
     }, index) => {
       element.style[property] = originalValuesRef.current[index];
     });
-  }, [rules]);
+  }, []);
   const blockScroll = useCallback(() => {
+    const rules = getRules();
     const isBlocked = scrollBlockManager.isBlocked();
     scrollBlockManager.registerComponent(containerGuid);
 
@@ -73,7 +75,7 @@ const useScrollBlock = () => {
     }) => {
       element.style[property] = blockingValue;
     });
-  }, [restoreValues, containerGuid, rules]);
+  }, [restoreValues, containerGuid]);
   const allowScroll = useCallback(() => {
     scrollBlockManager.unregisterComponent(containerGuid);
     const isBlocked = scrollBlockManager.isBlocked();
@@ -88,14 +90,14 @@ const useScrollBlock = () => {
 
 
     const originalValues = scrollBlockManager.getOriginalValues();
-    rules.forEach(({
+    getRules().forEach(({
       element,
       property
     }, index) => {
       element.style[property] = originalValues[index];
     });
     scrollBlockManager.saveOriginalValues([]);
-  }, [containerGuid, rules]);
+  }, [containerGuid]);
   return {
     blockScroll,
     allowScroll

package/lib/__internal__/validations/validation-icon.component.js

@@ -57,7 +57,7 @@ const ValidationIcon = ({
   const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => ["bottom", "left", "right", "top"].includes(override));
 
   if (tooltipFlipOverrides) {
-    (0, _invariant.default)(flipBehaviourCheck, `The tooltipFlipOverrides prop supplied to ValidationIcon must be an array containing some or all of ["top", "bottom", "left", "right"].`);
+    !flipBehaviourCheck ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `The tooltipFlipOverrides prop supplied to ValidationIcon must be an array containing some or all of ["top", "bottom", "left", "right"].`) : (0, _invariant.default)(false) : void 0;
   }
 
   const {

package/lib/components/accordion/accordion-group/accordion-group.component.js

@@ -38,7 +38,7 @@ const AccordionGroup = ({
 
     return hasAccordionChildren;
   }, [children]);
-  (0, _invariant.default)(hasProperChildren, `AccordionGroup accepts only children of type \`${_accordion.default.displayName}\`.`);
+  !hasProperChildren ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `AccordionGroup accepts only children of type \`${_accordion.default.displayName}\`.`) : (0, _invariant.default)(false) : void 0;
   const filteredChildren = (0, _react.useMemo)(() => _react.default.Children.toArray(children).filter(child => {
     return /*#__PURE__*/_react.default.isValidElement(child);
   }), [children]);

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

@@ -82,8 +82,8 @@ const ActionPopoverItem = ({
 }) => {
   const l = (0, _useLocale.default)();
   const context = (0, _react.useContext)(_actionPopoverContext.default);
-  (0, _invariant.default)(context, "ActionPopoverItem must be used within an ActionPopover component");
-  (0, _invariant.default)( /*#__PURE__*/_react.default.isValidElement(submenu) ? submenu.type === _actionPopoverMenu.default : true, "ActionPopoverItem only accepts submenu of type `ActionPopoverMenu`");
+  !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;
   const {
     setOpenPopover,
     isOpenPopover,

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

@@ -42,11 +42,11 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
   ...rest
 }, ref) => {
   const context = (0, _react.useContext)(_actionPopoverContext.default);
-  (0, _invariant.default)(context, "ActionPopoverMenu must be used within an ActionPopover component");
+  !context ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ActionPopoverMenu must be used within an ActionPopover component") : (0, _invariant.default)(false) : void 0;
   const {
     focusButton
   } = context;
-  (0, _invariant.default)(setOpen && setFocusIndex && typeof focusIndex !== "undefined", "ActionPopoverMenu must be used within an ActionPopover or ActionPopoverItem component");
+  !(setOpen && setFocusIndex && typeof focusIndex !== "undefined") ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ActionPopoverMenu must be used within an ActionPopover or ActionPopoverItem component") : (0, _invariant.default)(false) : void 0;
   const hasProperChildren = (0, _react.useMemo)(() => {
     const incorrectChild = _react.default.Children.toArray(children).find(child => {
       if (! /*#__PURE__*/_react.default.isValidElement(child)) {
@@ -58,7 +58,7 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
 
     return !incorrectChild;
   }, [children]);
-  (0, _invariant.default)(hasProperChildren, `ActionPopoverMenu only accepts children of type \`${_actionPopoverItem.default.displayName}\`` + ` and \`${_actionPopoverDivider.default.displayName}\`.`);
+  !hasProperChildren ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `ActionPopoverMenu only accepts children of type \`${_actionPopoverItem.default.displayName}\`` + ` and \`${_actionPopoverDivider.default.displayName}\`.`) : (0, _invariant.default)(false) : void 0;
   const items = (0, _react.useMemo)(() => {
     return _react.default.Children.toArray(children).filter(child => {
       return /*#__PURE__*/_react.default.isValidElement(child) && child.type === _actionPopoverItem.default;

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

@@ -74,7 +74,7 @@ const ActionPopover = ({
 
     return !incorrectChild;
   }, [children]);
-  (0, _invariant.default)(hasProperChildren, `ActionPopover only accepts children of type \`${_actionPopoverItem.default.displayName}\`` + ` and \`${_actionPopoverDivider.default.displayName}\`.`);
+  !hasProperChildren ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `ActionPopover only accepts children of type \`${_actionPopoverItem.default.displayName}\`` + ` and \`${_actionPopoverDivider.default.displayName}\`.`) : (0, _invariant.default)(false) : void 0;
   const mappedPlacement = (0, _react.useMemo)(() => {
     if (placement === "top" && !rightAlignMenu) {
       return "top-end";