carbon-react 109.2.1 → 109.2.4

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

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

package/lib/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/lib/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/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; }
@@ -92,8 +94,9 @@ renderChildren.propTypes = {
     }
   }
 };
+let deprecatedForwardRefWarnTriggered = false;
 
-const Button = ({
+const Button = /*#__PURE__*/_react.default.forwardRef(({
   size = "medium",
   subtext = "",
   children,
@@ -114,11 +117,17 @@ const Button = ({
   iconTooltipPosition,
   fullWidth = false,
   ...rest
-}) => {
-  (0, _invariant.default)(!!(children || iconType), "Either prop `iconType` must be defined or this node must have children.");
+}, ref) => {
+  !!!(children || iconType) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "Either prop `iconType` must be defined or this node must have children.") : (0, _invariant.default)(false) : void 0;
 
   if (subtext) {
-    (0, _invariant.default)(size === "large", "subtext prop has no effect unless the button is large.");
+    !(size === "large") ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "subtext prop has no effect unless the button is large.") : (0, _invariant.default)(false) : void 0;
+  }
+
+  if (!deprecatedForwardRefWarnTriggered && forwardRef) {
+    deprecatedForwardRefWarnTriggered = true;
+
+    _logger.default.deprecate("The `forwardRef` prop in `Button` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
 
   const [internalRef, setInternalRef] = (0, _react.useState)();
@@ -148,10 +157,11 @@ const Button = ({
 
   const setRefs = (0, _react.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.default.createElement(_button.default, _extends({
     "aria-label": !children && iconType ? ariaLabel || iconType : undefined,
     as: !disabled && href ? "a" : "button",
@@ -188,7 +198,7 @@ const Button = ({
     iconTooltipPosition,
     tooltipTarget: internalRef
   }));
-};
+});
 
 Button.propTypes = {
   "aria-label": _propTypes.default.string,
@@ -526,10 +536,19 @@ Button.propTypes = {
   "target": _propTypes.default.string,
   "type": _propTypes.default.string
 };
+let deprecatedButtonForwardRefWarnTriggered = false;
+
+const ButtonWithForwardRef = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  if (!deprecatedButtonForwardRefWarnTriggered) {
+    deprecatedButtonForwardRefWarnTriggered = true;
 
-const ButtonWithForwardRef = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(Button, _extends({
-  forwardRef: ref
-}, props)));
+    _logger.default.deprecate("The `ButtonWithForwardRef` component is deprecated and will soon be removed. Please use a basic `Button` component with `ref` instead.");
+  }
+
+  return /*#__PURE__*/_react.default.createElement(Button, _extends({
+    ref: ref
+  }, props));
+});
 
 exports.ButtonWithForwardRef = ButtonWithForwardRef;
 ButtonWithForwardRef.propTypes = {

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

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

package/lib/components/decimal/decimal.component.js

@@ -52,10 +52,10 @@ const Decimal = ({
   const emptyValue = allowEmptyValue ? "" : "0.00";
   const getSafeValueProp = (0, _react.useCallback)(initialValue => {
     // We're intentionally preventing the use of number values to help prevent any unintentional rounding issues
-    (0, _invariant.default)(typeof initialValue === "string", "Decimal `value` prop must be a string");
+    !(typeof initialValue === "string") ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "Decimal `value` prop must be a string") : (0, _invariant.default)(false) : void 0;
 
     if (initialValue && !allowEmptyValue) {
-      (0, _invariant.default)(initialValue !== "", "Decimal `value` must not be an empty string. Please use `allowEmptyValue` or `0.00`");
+      !(initialValue !== "") ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "Decimal `value` must not be an empty string. Please use `allowEmptyValue` or `0.00`") : (0, _invariant.default)(false) : void 0;
     }
 
     return initialValue;
@@ -185,7 +185,7 @@ const Decimal = ({
   const prevControlledRef = (0, _react.useRef)();
   (0, _react.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";
-    (0, _invariant.default)(prevControlledRef.current !== isControlled, message);
+    !(prevControlledRef.current !== isControlled) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, message) : (0, _invariant.default)(false) : void 0;
     prevControlledRef.current = isControlled;
   }, [isControlled]);
   const prevValue = (0, _usePrevious.default)(value);

package/lib/components/drawer/drawer.component.js

@@ -93,7 +93,7 @@ const Drawer = ({
   const previousValue = (0, _usePrevious.default)(expanded);
   (0, _react.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";
-    (0, _invariant.default)(isControlled.current === (expanded !== undefined), message);
+    !(isControlled.current === (expanded !== undefined)) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, message) : (0, _invariant.default)(false) : void 0;
 
     if (isControlled.current && previousValue !== expanded) {
       setIsExpanded(expanded);

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

@@ -7,10 +7,12 @@ exports.StyledGroupButton = exports.StyledPicklistGroup = exports.StyledPicklist
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _button = require("../../button");
+var _button = _interopRequireDefault(require("../../button"));
 
 var _picklistItem = require("../picklist-item/picklist-item.style");
 
+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; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -42,7 +44,7 @@ const StyledPicklistGroup = _styledComponents.default.li`
   margin-bottom: 4px;
 `;
 exports.StyledPicklistGroup = StyledPicklistGroup;
-const StyledGroupButton = (0, _styledComponents.default)(_button.ButtonWithForwardRef)`
+const StyledGroupButton = (0, _styledComponents.default)(_button.default)`
   ${({
   iconType
 }) => (0, _styledComponents.css)`

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

@@ -7,7 +7,7 @@ exports.StyledLockIcon = exports.StyledButton = exports.StyledPicklistItem = voi
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _button = require("../../button");
+var _button = _interopRequireDefault(require("../../button"));
 
 var _icon = _interopRequireDefault(require("../../icon"));
 
@@ -48,7 +48,7 @@ const StyledPicklistItem = _styledComponents.default.li`
   `}
 `;
 exports.StyledPicklistItem = StyledPicklistItem;
-const StyledButton = (0, _styledComponents.default)(_button.ButtonWithForwardRef)`
+const StyledButton = (0, _styledComponents.default)(_button.default)`
   ${({
   iconType
 }) => (0, _styledComponents.css)`

package/lib/components/icon/icon.component.js

@@ -58,7 +58,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
   const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => _iconConfig.ICON_TOOLTIP_POSITIONS.includes(override));
 
   if (tooltipFlipOverrides) {
-    (0, _invariant.default)(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" ? (0, _invariant.default)(false, `The tooltipFlipOverrides prop supplied to \`Icon\` must be an array containing some or all of ["top", "bottom", "left", "right"].`) : (0, _invariant.default)(false) : void 0;
   }
 
   const isInteractive = !!tooltipMessage && !disabled;

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

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

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

@@ -13,7 +13,7 @@ var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__intern
 
 var _multiActionButton = require("./multi-action-button.style");
 
-var _button = _interopRequireWildcard(require("../button"));
+var _button = _interopRequireDefault(require("../button"));
 
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
@@ -88,11 +88,6 @@ const MultiActionButton = ({
           (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
         }
       };
-
-      if (child.type === _button.default) {
-        return /*#__PURE__*/_react.default.createElement(_button.ButtonWithForwardRef, _extends({}, child.props, props));
-      }
-
       return /*#__PURE__*/_react.default.cloneElement(child, props);
     });
   };

package/lib/components/note/note.component.js

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

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

@@ -108,7 +108,7 @@ const NumeralDate = ({
   const [internalMessages, setInternalMessages] = (0, _react.useState)({});
   (0, _react.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";
-    (0, _invariant.default)(isControlled.current === (value !== undefined), modeSwitchedMessage);
+    !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, modeSwitchedMessage) : (0, _invariant.default)(false) : void 0;
   }, [value]);
   const validationMessages = {
     dd: l.numeralDate.validation.day(),

package/lib/components/search/search.component.js

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

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

@@ -193,8 +193,8 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   (0, _react.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";
-    (0, _invariant.default)(isControlled.current === (value !== undefined), modeSwitchedMessage);
-    (0, _invariant.default)(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
+    !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, modeSwitchedMessage) : (0, _invariant.default)(false) : void 0;
+    !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, onChangeMissingMessage) : (0, _invariant.default)(false) : void 0;
 
     if (isControlled.current) {
       setSelectedValue(prevValue => {
@@ -228,7 +228,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   (0, _react.useEffect)(() => {
     const hasListActionButton = listActionButton !== undefined;
     const onListActionMissingMessage = "onListAction prop required when using listActionButton prop";
-    (0, _invariant.default)(!hasListActionButton || hasListActionButton && onListAction, onListActionMissingMessage);
+    !(!hasListActionButton || hasListActionButton && onListAction) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, onListActionMissingMessage) : (0, _invariant.default)(false) : void 0;
   }, [listActionButton, onListAction]);
   (0, _react.useEffect)(() => {
     if (isControlled.current) {

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

@@ -229,8 +229,8 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   (0, _react.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";
-    (0, _invariant.default)(isControlled.current === (value !== undefined), modeSwitchedMessage);
-    (0, _invariant.default)(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
+    !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, modeSwitchedMessage) : (0, _invariant.default)(false) : void 0;
+    !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, onChangeMissingMessage) : (0, _invariant.default)(false) : void 0;
 
     if (isControlled.current) {
       setSelectedValue(value);

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

@@ -174,8 +174,8 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
   (0, _react.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";
-    (0, _invariant.default)(isControlled.current === (value !== undefined), modeSwitchedMessage);
-    (0, _invariant.default)(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
+    !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, modeSwitchedMessage) : (0, _invariant.default)(false) : void 0;
+    !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, onChangeMissingMessage) : (0, _invariant.default)(false) : void 0;
 
     if (isControlled.current) {
       setSelectedValue(value);

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

@@ -17,7 +17,7 @@ var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__intern
 
 var _icon = _interopRequireDefault(require("../icon"));
 
-var _button = _interopRequireWildcard(require("../button"));
+var _button = _interopRequireDefault(require("../button"));
 
 var _splitButton = _interopRequireDefault(require("./split-button.style"));
 
@@ -249,11 +249,6 @@ const SplitButton = ({
           (_toggleButton$current = toggleButton.current) === null || _toggleButton$current === void 0 ? void 0 : _toggleButton$current.focus();
         }
       };
-
-      if (child.type === _button.default) {
-        return /*#__PURE__*/_react.default.createElement(_button.ButtonWithForwardRef, _extends({}, child.props, childProps));
-      }
-
       return /*#__PURE__*/_react.default.cloneElement(child, childProps);
     });
   }

package/lib/components/tooltip/tooltip.component.js

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

package/lib/hooks/__internal__/useScrollBlock/useScrollBlock.js

@@ -17,51 +17,53 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // we can confirm that all Sage products use version 105.0.0^
 const scrollBlockManager = new _scrollBlockManager.default();
 
+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
   } = (0, _react.useRef)((0, _guid.default)());
   const originalValuesRef = (0, _react.useRef)([]);
-  const rules = (0, _react.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 = (0, _react.useCallback)(() => {
-    rules.forEach(({
+    getRules().forEach(({
       element,
       property
     }, index) => {
       element.style[property] = originalValuesRef.current[index];
     });
-  }, [rules]);
+  }, []);
   const blockScroll = (0, _react.useCallback)(() => {
+    const rules = getRules();
     const isBlocked = scrollBlockManager.isBlocked();
     scrollBlockManager.registerComponent(containerGuid);
 
@@ -85,7 +87,7 @@ const useScrollBlock = () => {
     }) => {
       element.style[property] = blockingValue;
     });
-  }, [restoreValues, containerGuid, rules]);
+  }, [restoreValues, containerGuid]);
   const allowScroll = (0, _react.useCallback)(() => {
     scrollBlockManager.unregisterComponent(containerGuid);
     const isBlocked = scrollBlockManager.isBlocked();
@@ -100,14 +102,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "109.2.1",
+  "version": "109.2.4",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -10,8 +10,8 @@
   "files": [
     "lib",
     "esm",
-    "scripts/check_carbon_version.js",
-    "scripts/check_rfcs.js"
+    "scripts/check_carbon_version/check_carbon_version.js",
+    "scripts/check_rfcs/check_rfcs.js"
   ],
   "scripts": {
     "start": "node ./scripts/check_node_version.js && start-storybook -p 9001 -c .storybook",
@@ -27,7 +27,7 @@
     "copy-files": "node ./scripts/copy-files.js",
     "precompile": "npm run type-check && npm run clean-lib && npm run build && npm run build:types && npm run copy-files",
     "prepublishOnly": "npm run precompile",
-    "postinstall": "node ./scripts/check_carbon_version.js && node ./scripts/check_rfcs.js",
+    "postinstall": "node ./scripts/check_carbon_version/check_carbon_version.js && node ./scripts/check_rfcs/check_rfcs.js",
     "watch": "npm run clean-lib && npm run copy-files -- --watch & npm run babel -- --watch",
     "build-storybook": "cross-env STORYBOOK_BUILD=true build-storybook -c .storybook",
     "start-storybook": "cross-env STORYBOOK_BUILD=true start-storybook -c .storybook",
@@ -109,6 +109,7 @@
     "axe-core": "^3.5.5",
     "babel-eslint": "10.0.3",
     "babel-jest": "^26.6.3",
+    "babel-plugin-dev-expression": "^0.2.3",
     "browserslist": "^4.16.6",
     "chalk": "^4.1.1",
     "chromatic": "^6.0.5",
@@ -117,9 +118,8 @@
     "core-js": "^3.20.3",
     "cross-env": "^5.2.0",
     "css-loader": "4.0.0",
-    "cypress": "^10.1.0",
-    "cypress-axe": "^0.14.0",
-    "cypress-cucumber-preprocessor": "^4.3.1",
+    "cypress": "^10.3.0",
+    "cypress-axe": "^1.0.0",
     "cypress-each": "^1.11.0",
     "cypress-plugin-tab": "^1.0.5",
     "cypress-real-events": "^1.7.0",
@@ -151,6 +151,7 @@
     "jest-styled-components": "^6.3.1",
     "lint-staged": "^10.5.3",
     "mockdate": "^2.0.2",
+    "nock": "^13.2.8",
     "prettier": "^2.1.2",
     "raf": "^3.4.0",
     "react": "^17.0.2",
@@ -169,15 +170,19 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
+    "@badeball/cypress-cucumber-preprocessor": "^11.4.0",
+    "@bahmutov/cypress-esbuild-preprocessor": "^2.1.3",
     "@octokit/rest": "^18.12.0",
     "@popperjs/core": "^2.11.5",
     "@styled-system/prop-types": "^5.1.5",
     "@tippyjs/react": "^4.2.5",
     "@types/styled-system": "^5.1.11",
+    "ci-info": "^3.3.2",
     "classnames": "~2.2.6",
     "crypto-js": "~3.3.0",
     "date-fns": "^2.26.0",
     "dotenv": "^10.0.0",
+    "esbuild": "^0.14.47",
     "immutable": "~3.8.2",
     "invariant": "^2.2.4",
     "lodash": "^4.17.20",
@@ -193,13 +198,11 @@
     "wait-on": "^5.2.1"
   },
   "cypress-cucumber-preprocessor": {
-    "step_definitions": "cypress/support/step-definitions/",
-    "cucumberJson": {
-      "generate": false,
-      "outputFolder": "cypress/cucumber-json",
-      "filePrefix": "",
-      "fileSuffix": ".cucumber"
-    }
+    "nonGlobalStepDefinitions": true,
+    "stepDefinitions": [
+      "cypress/support/step-definitions/*.{js,ts}",
+      "cypress/support/helper.js"
+    ]
   },
   "config": {
     "commitizen": {

package/scripts/{check_carbon_version.js → check_carbon_version/check_carbon_version.js}

@@ -2,12 +2,17 @@
 const fetch = require("node-fetch");
 const dotenv = require("dotenv");
 const chalk = require("chalk");
-const { version } = require("../package.json");
+const ci = require("ci-info");
+const { version } = require("../../package.json");
 
 dotenv.config();
 const majorVersion = version.split(".")[0];
 
 const checkCarbonVersion = () => {
+  if (ci.BITRISE) {
+    return;
+  }
+
   fetch("https://registry.npmjs.com/carbon-react")
     .then((res) => res.json())
     .then((data) => {
@@ -16,6 +21,7 @@ const checkCarbonVersion = () => {
 
       const diff = Number(latestMajor) - Number(majorVersion);
 
+      // This is ignored as coverage will fail when run in CI without it
       if (diff > 1) {
         console.log(
           `carbon-react version installed is currently ${chalk.yellow(
@@ -27,4 +33,6 @@ const checkCarbonVersion = () => {
     .catch((err) => console.log(err));
 };
 
-if (!process.env.CARBON_INSTALL) checkCarbonVersion();
+checkCarbonVersion();
+
+module.exports = checkCarbonVersion;