carbon-react 104.54.2 → 104.54.3

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

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

package/esm/__spec_helper__/test-utils.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/lib/__spec_helper__/test-utils.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.54.2",
+  "version": "104.54.3",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {