carbon-react 109.2.0 → 109.2.3

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,13 +96,18 @@ const Button = ({
   iconTooltipPosition,
   fullWidth = false,
   ...rest
-}) => {
+}, ref) => {
   invariant(!!(children || iconType), "Either prop `iconType` must be defined or this node must have children.");
 
   if (subtext) {
     invariant(size === "large", "subtext prop has no effect unless the button is large.");
   }
 
+  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();
   const buttonType = buttonTypeProp;
   let paddingX;
@@ -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/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/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/search/search.style.js

@@ -97,20 +97,34 @@ const StyledSearch = styled.div`
         z-index: ${theme.zIndex.smallOverlay};
       }
       ${StyledIcon} {
-        color: ${iconColor ? "var(--colorsUtilityMajor400)" : "var(--colorsUtilityMajor200)"};
+        ${darkVariant && css`
+          ${iconColor && css`
+            color: var(--colorsUtilityMajor400);
+
+            :hover {
+              color: var(--colorsUtilityMajor500);
+            }
+          `}
+          ${!iconColor && css`
+            color: var(--colorsUtilityMajor200);
+
+            :hover {
+              color: var(--colorsUtilityMajor100);
+            }
+          `}
+        `}
+
         ${!darkVariant && css`
-          color: var(--colorsUtilityMajor400);
+          color: var(--colorsActionMinor500);
+
+          :hover {
+            color: var(--colorsActionMinor600);
+          }
         `}
 
         width: 20px;
         height: 20px;
         cursor: pointer;
-        :hover {
-          color: ${iconColor ? "var(--colorsUtilityMajor500)" : "var(--colorsUtilityMajor100)"};
-          ${!darkVariant && css`
-            color: var(--colorsUtilityMajor500);
-          `}
-        }
       }
 
       ${StyledInputIconToggle} {

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/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,13 +117,19 @@ const Button = ({
   iconTooltipPosition,
   fullWidth = false,
   ...rest
-}) => {
+}, ref) => {
   (0, _invariant.default)(!!(children || iconType), "Either prop `iconType` must be defined or this node must have children.");
 
   if (subtext) {
     (0, _invariant.default)(size === "large", "subtext prop has no effect unless the button is large.");
   }
 
+  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)();
   const buttonType = buttonTypeProp;
   let paddingX;
@@ -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/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/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/search/search.style.js

@@ -119,20 +119,34 @@ const StyledSearch = _styledComponents.default.div`
         z-index: ${theme.zIndex.smallOverlay};
       }
       ${_icon.default} {
-        color: ${iconColor ? "var(--colorsUtilityMajor400)" : "var(--colorsUtilityMajor200)"};
+        ${darkVariant && (0, _styledComponents.css)`
+          ${iconColor && (0, _styledComponents.css)`
+            color: var(--colorsUtilityMajor400);
+
+            :hover {
+              color: var(--colorsUtilityMajor500);
+            }
+          `}
+          ${!iconColor && (0, _styledComponents.css)`
+            color: var(--colorsUtilityMajor200);
+
+            :hover {
+              color: var(--colorsUtilityMajor100);
+            }
+          `}
+        `}
+
         ${!darkVariant && (0, _styledComponents.css)`
-          color: var(--colorsUtilityMajor400);
+          color: var(--colorsActionMinor500);
+
+          :hover {
+            color: var(--colorsActionMinor600);
+          }
         `}
 
         width: 20px;
         height: 20px;
         cursor: pointer;
-        :hover {
-          color: ${iconColor ? "var(--colorsUtilityMajor500)" : "var(--colorsUtilityMajor100)"};
-          ${!darkVariant && (0, _styledComponents.css)`
-            color: var(--colorsUtilityMajor500);
-          `}
-        }
       }
 
       ${_inputIconToggle.default} {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "109.2.0",
+  "version": "109.2.3",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -117,9 +117,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",
@@ -169,6 +168,8 @@
     "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",
@@ -178,6 +179,7 @@
     "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 +195,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": {