carbon-react 142.0.1 → 142.0.3

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

@@ -286,7 +286,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       menuType: menuType,
       ref: ref,
       href: href,
-      variant: variant,
+      menuItemVariant: variant,
       inFullscreenView: inFullscreenView,
       asDiv: asPassiveItem
     }), title), /*#__PURE__*/React.createElement(StyledSubmenu, {
@@ -319,7 +319,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     ref: ref,
     icon: icon,
     tabIndex: -1,
-    variant: variant,
+    menuItemVariant: variant,
     isOpen: submenuOpen,
     hasSubmenu: true,
     showDropdownArrow: showDropdownArrow,

package/esm/components/menu/menu-item/menu-item.component.js

@@ -118,7 +118,6 @@ export const MenuItem = ({
     icon,
     removeAriaLabelOnIcon: true,
     selected,
-    variant,
     onKeyDown: !inFullscreenView ? handleKeyDown : undefined,
     overrideColor,
     ref
@@ -151,7 +150,9 @@ export const MenuItem = ({
       ariaLabel: ariaLabel,
       onSubmenuOpen: onSubmenuOpen,
       onSubmenuClose: onSubmenuClose
-    }, elementProps, rest), children));
+    }, elementProps, {
+      variant: variant
+    }, rest), children));
   }
   const paddingProps = filterStyledSystemPaddingProps(rest);
   return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
@@ -171,6 +172,7 @@ export const MenuItem = ({
     menuType: menuType,
     "data-role": "menu-item-wrapper"
   }, elementProps, {
+    menuItemVariant: variant,
     ariaLabel: ariaLabel,
     maxWidth: maxWidth,
     inFullscreenView: inFullscreenView,

package/esm/components/menu/menu-item/menu-item.style.d.ts

@@ -2,7 +2,7 @@
 import { PaddingProps } from "styled-system";
 import { MenuType } from "../__internal__/menu.context";
 import { MenuWithChildren } from "./menu-item.component";
-interface StyledMenuItemWrapperProps extends Pick<MenuWithChildren, "href" | "variant" | "showDropdownArrow" | "overrideColor" | "clickToOpen" | "maxWidth">, PaddingProps {
+interface StyledMenuItemWrapperProps extends Pick<MenuWithChildren, "href" | "showDropdownArrow" | "overrideColor" | "clickToOpen" | "maxWidth">, PaddingProps {
     menuType: MenuType;
     selected?: boolean;
     hasSubmenu?: boolean;
@@ -14,6 +14,7 @@ interface StyledMenuItemWrapperProps extends Pick<MenuWithChildren, "href" | "va
     ariaLabel?: string;
     asDiv?: boolean;
     hasInput?: boolean;
+    menuItemVariant?: Pick<MenuWithChildren, "variant">["variant"];
 }
 declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"a", any, {
     as: import("react").ForwardRefExoticComponent<import("../../link").LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>;

package/esm/components/menu/menu-item/menu-item.style.js

@@ -18,7 +18,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
   selected,
   hasSubmenu,
   isOpen,
-  variant,
+  menuItemVariant,
   showDropdownArrow,
   href,
   clickToOpen,
@@ -64,7 +64,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
 
     ${overrideColor && css`
       &&&& {
-        background-color: ${variant === "alternate" ? menuConfigVariants[menuType].alternate : menuConfigVariants[menuType].submenuItemBackground};
+        background-color: ${menuItemVariant === "alternate" ? menuConfigVariants[menuType].alternate : menuConfigVariants[menuType].submenuItemBackground};
       }
     `}
 
@@ -182,7 +182,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
       }
     `}
 
-    ${variant === "alternate" && !inFullscreenView && css`
+    ${menuItemVariant === "alternate" && !inFullscreenView && css`
       &&& {
         background-color: ${menuConfigVariants[menuType].alternate};
       }

package/esm/components/simple-color-picker/simple-color-picker.component.js

@@ -13,6 +13,7 @@ import { InputGroupContext } from "../../__internal__/input-behaviour";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import Logger from "../../__internal__/utils/logger";
 let deprecateUncontrolledWarnTriggered = false;
+const isBlurBlockedDeprecateWarnTriggered = false;
 const SimpleColorPicker = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     children,
@@ -145,9 +146,13 @@ const SimpleColorPicker = /*#__PURE__*/React.forwardRef((props, ref) => {
   });
   const handleOnBlur = ev => {
     ev.preventDefault();
-    if (!blurBlocked && onBlur) {
-      onBlur(ev);
-    }
+    setTimeout(() => {
+      const hasBlurred = !gridItemRefs?.current?.find(colorRef => colorRef === document.activeElement);
+      /* istanbul ignore else */
+      if (onBlur && hasBlurred && !blurBlocked) {
+        onBlur(ev);
+      }
+    }, 5);
   };
   const handleOnMouseDown = ev => {
     setIsBlurBlocked(true);
@@ -177,6 +182,10 @@ const SimpleColorPicker = /*#__PURE__*/React.forwardRef((props, ref) => {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Simple Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
+  if (!isBlurBlockedDeprecateWarnTriggered && isBlurBlocked) {
+    deprecateUncontrolledWarnTriggered = true;
+    Logger.deprecate(`The 'isBlurBlocked' prop in ${SimpleColorPicker.displayName} is deprecated and support will soon be removed.`);
+  }
   return /*#__PURE__*/React.createElement(Fieldset, _extends({
     role: "radiogroup",
     legend: legend,

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

@@ -295,7 +295,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       menuType: menuType,
       ref: ref,
       href: href,
-      variant: variant,
+      menuItemVariant: variant,
       inFullscreenView: inFullscreenView,
       asDiv: asPassiveItem
     }), title), /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenu, {
@@ -328,7 +328,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     ref: ref,
     icon: icon,
     tabIndex: -1,
-    variant: variant,
+    menuItemVariant: variant,
     isOpen: submenuOpen,
     hasSubmenu: true,
     showDropdownArrow: showDropdownArrow,

package/lib/components/menu/menu-item/menu-item.component.js

@@ -127,7 +127,6 @@ const MenuItem = ({
     icon,
     removeAriaLabelOnIcon: true,
     selected,
-    variant,
     onKeyDown: !inFullscreenView ? handleKeyDown : undefined,
     overrideColor,
     ref
@@ -160,7 +159,9 @@ const MenuItem = ({
       ariaLabel: ariaLabel,
       onSubmenuOpen: onSubmenuOpen,
       onSubmenuClose: onSubmenuClose
-    }, elementProps, rest), children));
+    }, elementProps, {
+      variant: variant
+    }, rest), children));
   }
   const paddingProps = (0, _utils.filterStyledSystemPaddingProps)(rest);
   return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, _extends({
@@ -180,6 +181,7 @@ const MenuItem = ({
     menuType: menuType,
     "data-role": "menu-item-wrapper"
   }, elementProps, {
+    menuItemVariant: variant,
     ariaLabel: ariaLabel,
     maxWidth: maxWidth,
     inFullscreenView: inFullscreenView,

package/lib/components/menu/menu-item/menu-item.style.d.ts

@@ -2,7 +2,7 @@
 import { PaddingProps } from "styled-system";
 import { MenuType } from "../__internal__/menu.context";
 import { MenuWithChildren } from "./menu-item.component";
-interface StyledMenuItemWrapperProps extends Pick<MenuWithChildren, "href" | "variant" | "showDropdownArrow" | "overrideColor" | "clickToOpen" | "maxWidth">, PaddingProps {
+interface StyledMenuItemWrapperProps extends Pick<MenuWithChildren, "href" | "showDropdownArrow" | "overrideColor" | "clickToOpen" | "maxWidth">, PaddingProps {
     menuType: MenuType;
     selected?: boolean;
     hasSubmenu?: boolean;
@@ -14,6 +14,7 @@ interface StyledMenuItemWrapperProps extends Pick<MenuWithChildren, "href" | "va
     ariaLabel?: string;
     asDiv?: boolean;
     hasInput?: boolean;
+    menuItemVariant?: Pick<MenuWithChildren, "variant">["variant"];
 }
 declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"a", any, {
     as: import("react").ForwardRefExoticComponent<import("../../link").LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>;

package/lib/components/menu/menu-item/menu-item.style.js

@@ -27,7 +27,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
   selected,
   hasSubmenu,
   isOpen,
-  variant,
+  menuItemVariant,
   showDropdownArrow,
   href,
   clickToOpen,
@@ -73,7 +73,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
 
     ${overrideColor && (0, _styledComponents.css)`
       &&&& {
-        background-color: ${variant === "alternate" ? _menu.default[menuType].alternate : _menu.default[menuType].submenuItemBackground};
+        background-color: ${menuItemVariant === "alternate" ? _menu.default[menuType].alternate : _menu.default[menuType].submenuItemBackground};
       }
     `}
 
@@ -191,7 +191,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
       }
     `}
 
-    ${variant === "alternate" && !inFullscreenView && (0, _styledComponents.css)`
+    ${menuItemVariant === "alternate" && !inFullscreenView && (0, _styledComponents.css)`
       &&& {
         background-color: ${_menu.default[menuType].alternate};
       }

package/lib/components/simple-color-picker/simple-color-picker.component.js

@@ -22,6 +22,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 let deprecateUncontrolledWarnTriggered = false;
+const isBlurBlockedDeprecateWarnTriggered = false;
 const SimpleColorPicker = exports.SimpleColorPicker = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     children,
@@ -154,9 +155,13 @@ const SimpleColorPicker = exports.SimpleColorPicker = /*#__PURE__*/_react.defaul
   });
   const handleOnBlur = ev => {
     ev.preventDefault();
-    if (!blurBlocked && onBlur) {
-      onBlur(ev);
-    }
+    setTimeout(() => {
+      const hasBlurred = !gridItemRefs?.current?.find(colorRef => colorRef === document.activeElement);
+      /* istanbul ignore else */
+      if (onBlur && hasBlurred && !blurBlocked) {
+        onBlur(ev);
+      }
+    }, 5);
   };
   const handleOnMouseDown = ev => {
     setIsBlurBlocked(true);
@@ -186,6 +191,10 @@ const SimpleColorPicker = exports.SimpleColorPicker = /*#__PURE__*/_react.defaul
     deprecateUncontrolledWarnTriggered = true;
     _logger.default.deprecate("Uncontrolled behaviour in `Simple Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
+  if (!isBlurBlockedDeprecateWarnTriggered && isBlurBlocked) {
+    deprecateUncontrolledWarnTriggered = true;
+    _logger.default.deprecate(`The 'isBlurBlocked' prop in ${SimpleColorPicker.displayName} is deprecated and support will soon be removed.`);
+  }
   return /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
     role: "radiogroup",
     legend: legend,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "142.0.1",
+  "version": "142.0.3",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",