carbon-react 119.6.2 → 119.6.4

package/esm/__internal__/sticky-footer/sticky-footer.component.js

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 import throttle from "lodash/throttle";
 import StyledStickyFooter from "./sticky-footer.style";
@@ -26,7 +26,7 @@ const StickyFooter = _ref => {
       fullyScrolled = content.scrollHeight - content.scrollTop - stickyOffset <= content.clientHeight;
     }
     setIsSticky(!fullyScrolled);
-  }, SCROLL_THROTTLE), []);
+  }, SCROLL_THROTTLE), [containerRef]);
   useEffect(() => {
     const content = containerRef.current;
     content?.addEventListener("scroll", checkFooterPosition, false);

package/esm/__internal__/utils/helpers/events/events.js

@@ -108,7 +108,7 @@ const Events = {
    * @see https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath
    */
   composedPath: ev => {
-    return ev.detail && ev.detail.enzymeTestingTarget && composedPath(ev) || ev.composedPath && ev.composedPath() || composedPath(ev);
+    return ev.detail?.enzymeTestingTarget && composedPath(ev) || ev.composedPath && ev.composedPath() || composedPath(ev);
   }
 };
 export default Events;

package/esm/__spec_helper__/test-utils.js

@@ -48,6 +48,7 @@ const keydown = keys.reduce((acc, key) => {
     });
   };
   return acc;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 }, {});
 const simulate = {
   keydown

package/esm/components/badge/badge.style.js

@@ -74,7 +74,7 @@ const StyledBadge = styled.span.attrs(_ref => {
           margin-right: 0;
 
           :before {
-            font-size: 16px;
+            font-size: 20px;
             color: var(--colorsActionMajorYang100);
           }
         }

package/esm/components/form/form.style.js

@@ -82,29 +82,22 @@ export const StyledForm = styled.form`
       height: ${height};
     `;
 }}
-
-  ${_ref5 => {
-  let {
-    fieldSpacing
-  } = _ref5;
-  return css`
-      ${StyledTextarea}
+    
+    ${StyledTextarea}
       ${StyledFormField} {
-        margin-bottom: 4px;
-      }
-    `;
-}}
+    margin-bottom: 4px;
+  }
 
   ${StyledSearch} ${StyledFormField} {
     margin-bottom: 0px;
   }
 
-  ${_ref6 => {
+  ${_ref5 => {
   let {
     stickyFooter,
     isInModal,
     isInSidebar
-  } = _ref6;
+  } = _ref5;
   return stickyFooter && css`
       display: flex;
       flex-direction: column;
@@ -122,16 +115,16 @@ export const StyledForm = styled.form`
 `;
 export const StyledRightButtons = styled.div`
   display: flex;
-  ${_ref7 => {
+  ${_ref6 => {
   let {
     fullWidthButtons
-  } = _ref7;
+  } = _ref6;
   return fullWidthButtons ? `margin-left: 0px;` : `margin-left: 16px;`;
 }}
-  ${_ref8 => {
+  ${_ref7 => {
   let {
     buttonAlignment
-  } = _ref8;
+  } = _ref7;
   return buttonAlignment === "left" && "flex-grow: 1";
 }};
 
@@ -146,16 +139,16 @@ export const StyledFullWidthButtons = styled.div`
 export const StyledLeftButtons = styled.div`
   display: flex;
   justify-content: flex-end;
-  ${_ref9 => {
+  ${_ref8 => {
   let {
     fullWidthButtons
-  } = _ref9;
+  } = _ref8;
   return fullWidthButtons ? `margin-right: 0px;` : `margin-right: 16px;`;
 }}
-  ${_ref10 => {
+  ${_ref9 => {
   let {
     buttonAlignment
-  } = _ref10;
+  } = _ref9;
   return buttonAlignment === "right" && "flex-grow: 1";
 }};
 

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

@@ -176,14 +176,17 @@ const Submenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       } else {
         setCharacterString("");
       }
-      if (Events.isEnterKey(event)) {
-        /* timeout enforces that the "closeSubmenu" method will be run after 
-          the browser navigates to the specified href of the menu-item. */
-        setTimeout(() => closeSubmenu());
-      }
-      if (href && Events.isEnterKey(event)) {
-        closeSubmenu();
-        return;
+      const eventIsFromInput = Events.composedPath(event).find(p => p.getAttribute("data-element") === "input" || p.getAttribute("data-element") === "input-icon-toggle");
+      if (!eventIsFromInput) {
+        if (Events.isEnterKey(event)) {
+          /* timeout enforces that the "closeSubmenu" method will be run after 
+            the browser navigates to the specified href of the menu-item. */
+          setTimeout(() => closeSubmenu(), 0);
+        }
+        if (href && Events.isEnterKey(event)) {
+          closeSubmenu();
+          return;
+        }
       }
       if (nextIndex !== index) {
         setSubmenuFocusId(submenuItemIds[nextIndex]);

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

@@ -138,7 +138,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
       }
 
       ${StyledIcon} {
-        bottom: 1px;
+        bottom: 3px;
       }
     }
 

package/esm/components/pill/pill.style.js

@@ -57,9 +57,9 @@ const StyledPill = styled.span`
     console.error(e);
   }
   return css`
-      font-size: 10px;
+      font-size: 12px;
       letter-spacing: 0.7px;
-      font-weight: 600;
+      font-weight: 700;
       position: relative;
       display: inline-flex;
       text-align: center;
@@ -90,7 +90,7 @@ const StyledPill = styled.span`
       ${size === "S" && css`
         min-height: 16px;
         line-height: 16px;
-        font-size: 10px;
+        font-size: 12px;
 
         ${theme.roundedCornersOptOut && css`
           border-radius: 12px;
@@ -104,7 +104,7 @@ const StyledPill = styled.span`
       ${size === "M" && css`
         min-height: 20px;
         line-height: 20px;
-        font-size: 12px;
+        font-size: 14px;
 
         ${theme.roundedCornersOptOut && css`
           border-radius: 12px;
@@ -130,8 +130,8 @@ const StyledPill = styled.span`
       `}
 
       ${size === "XL" && css`
-        min-height: 26px;
-        line-height: 26px;
+        min-height: 28px;
+        line-height: 28px;
         font-size: 16px;
 
         ${theme.roundedCornersOptOut && css`
@@ -189,8 +189,6 @@ const StyledPill = styled.span`
           }
 
           ${StyledIcon} {
-            font-size: 12px;
-            padding: 0 4px;
             height: unset;
             width: unset;
             color: ${contentColor};
@@ -209,52 +207,50 @@ const StyledPill = styled.span`
         }
 
         ${size === "S" && css`
-          padding: 0 24px 0 7px;
+          padding: 0 22px 0 8px;
 
           button {
             padding: 0;
-            line-height: 14px;
-            ${addStyleToPillIcon("7px")}
+            line-height: 16px;
+            top: -2px;
+            ${addStyleToPillIcon("16px")}
           }
         `}
 
         ${size === "M" && css`
-          padding: 0 32px 0 11px;
+          padding: 0 28px 0 8px;
 
           button {
             width: 24px;
             padding: 0;
             line-height: 15px;
-            ${addStyleToPillIcon("10px")}
           }
         `}
 
         ${size === "L" && css`
-          padding: 0 36px 0 15px;
+          padding: 0 32px 0 8px;
 
           button {
             width: 28px;
             padding: 0;
             line-height: 16px;
-            ${addStyleToPillIcon("12px")}
           }
         `}
 
         ${size === "XL" && css`
-          padding: 0 41px 0 19px;
+          padding: 0 36px 0 12px;
 
           button {
             width: 32px;
             padding: 0;
             line-height: 18px;
-            ${addStyleToPillIcon("13px")}
           }
         `}
       `}
 
       ${!isDeletable && css`
         ${size === "S" && css`
-          padding: 0 7px;
+          padding: 0 8px;
 
           button {
             padding: 0;
@@ -262,7 +258,7 @@ const StyledPill = styled.span`
         `}
 
         ${size === "M" && css`
-          padding: 0 11px;
+          padding: 0 8px;
 
           button {
             width: 24px;
@@ -271,7 +267,7 @@ const StyledPill = styled.span`
         `}
 
         ${size === "L" && css`
-          padding: 0 15px;
+          padding: 0 8px;
 
           button {
             width: 28px;
@@ -280,7 +276,7 @@ const StyledPill = styled.span`
         `}
 
         ${size === "XL" && css`
-          padding: 0 19px;
+          padding: 0 12px;
 
           button {
             width: 32px;

package/esm/components/portrait/portrait.config.js

@@ -7,7 +7,7 @@ export const PORTRAIT_SIZE_PARAMS = {
   },
   S: {
     dimensions: 32,
-    iconDimensions: 16
+    iconDimensions: 20
   },
   M: {
     dimensions: 40,

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

@@ -76,13 +76,13 @@ const getIconColor = color => {
   return "var(--colorsUtilityYin090)";
 };
 export const StyledTickIcon = styled(Icon)`
-  height: 22px;
-  width: 22px;
+  height: 20px;
+  width: 20px;
   pointer-events: none;
   display: block;
 
   &::before {
-    font-size: 22px;
+    font-size: 20px;
     color: ${_ref3 => {
   let {
     color

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

@@ -141,7 +141,9 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const handleTargetRef = useCallback(node => {
     reference(target || node);
     targetInternalRef.current = node;
-    preserveRef(children.ref, node);
+    preserveRef(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    children.ref, node);
   }, [reference, children, target]);
   const handleFloatingRef = useCallback(node => {
     floating(node);

package/esm/style/themes/medium/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { aegeanTheme } from "..";
 export default (() => {
   console.warn(`"Medium Theme" has been renamed to "Aegean".

package/esm/style/themes/small/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { mintTheme } from "..";
 export default (() => {
   console.warn(`"Small Theme" has been renamed to "Mint".

package/lib/__internal__/sticky-footer/sticky-footer.component.js

@@ -35,7 +35,7 @@ const StickyFooter = _ref => {
       fullyScrolled = content.scrollHeight - content.scrollTop - stickyOffset <= content.clientHeight;
     }
     setIsSticky(!fullyScrolled);
-  }, SCROLL_THROTTLE), []);
+  }, SCROLL_THROTTLE), [containerRef]);
   (0, _react.useEffect)(() => {
     const content = containerRef.current;
     content?.addEventListener("scroll", checkFooterPosition, false);

package/lib/__internal__/utils/helpers/events/events.js

@@ -114,7 +114,7 @@ const Events = {
    * @see https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath
    */
   composedPath: ev => {
-    return ev.detail && ev.detail.enzymeTestingTarget && (0, _composedPath.default)(ev) || ev.composedPath && ev.composedPath() || (0, _composedPath.default)(ev);
+    return ev.detail?.enzymeTestingTarget && (0, _composedPath.default)(ev) || ev.composedPath && ev.composedPath() || (0, _composedPath.default)(ev);
   }
 };
 var _default = Events;

package/lib/__spec_helper__/test-utils.js

@@ -66,6 +66,7 @@ const keydown = keys.reduce((acc, key) => {
     });
   };
   return acc;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 }, {});
 const simulate = {
   keydown

package/lib/components/badge/badge.style.js

@@ -85,7 +85,7 @@ const StyledBadge = _styledComponents.default.span.attrs(_ref => {
           margin-right: 0;
 
           :before {
-            font-size: 16px;
+            font-size: 20px;
             color: var(--colorsActionMajorYang100);
           }
         }

package/lib/components/form/form.style.js

@@ -93,29 +93,22 @@ const StyledForm = _styledComponents.default.form`
       height: ${height};
     `;
 }}
-
-  ${_ref5 => {
-  let {
-    fieldSpacing
-  } = _ref5;
-  return (0, _styledComponents.css)`
-      ${_textarea.default}
+    
+    ${_textarea.default}
       ${_formField.default} {
-        margin-bottom: 4px;
-      }
-    `;
-}}
+    margin-bottom: 4px;
+  }
 
   ${_search.default} ${_formField.default} {
     margin-bottom: 0px;
   }
 
-  ${_ref6 => {
+  ${_ref5 => {
   let {
     stickyFooter,
     isInModal,
     isInSidebar
-  } = _ref6;
+  } = _ref5;
   return stickyFooter && (0, _styledComponents.css)`
       display: flex;
       flex-direction: column;
@@ -134,16 +127,16 @@ const StyledForm = _styledComponents.default.form`
 exports.StyledForm = StyledForm;
 const StyledRightButtons = _styledComponents.default.div`
   display: flex;
-  ${_ref7 => {
+  ${_ref6 => {
   let {
     fullWidthButtons
-  } = _ref7;
+  } = _ref6;
   return fullWidthButtons ? `margin-left: 0px;` : `margin-left: 16px;`;
 }}
-  ${_ref8 => {
+  ${_ref7 => {
   let {
     buttonAlignment
-  } = _ref8;
+  } = _ref7;
   return buttonAlignment === "left" && "flex-grow: 1";
 }};
 
@@ -160,16 +153,16 @@ exports.StyledFullWidthButtons = StyledFullWidthButtons;
 const StyledLeftButtons = _styledComponents.default.div`
   display: flex;
   justify-content: flex-end;
-  ${_ref9 => {
+  ${_ref8 => {
   let {
     fullWidthButtons
-  } = _ref9;
+  } = _ref8;
   return fullWidthButtons ? `margin-right: 0px;` : `margin-right: 16px;`;
 }}
-  ${_ref10 => {
+  ${_ref9 => {
   let {
     buttonAlignment
-  } = _ref10;
+  } = _ref9;
   return buttonAlignment === "right" && "flex-grow: 1";
 }};
 

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

@@ -185,14 +185,17 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       } else {
         setCharacterString("");
       }
-      if (_events.default.isEnterKey(event)) {
-        /* timeout enforces that the "closeSubmenu" method will be run after 
-          the browser navigates to the specified href of the menu-item. */
-        setTimeout(() => closeSubmenu());
-      }
-      if (href && _events.default.isEnterKey(event)) {
-        closeSubmenu();
-        return;
+      const eventIsFromInput = _events.default.composedPath(event).find(p => p.getAttribute("data-element") === "input" || p.getAttribute("data-element") === "input-icon-toggle");
+      if (!eventIsFromInput) {
+        if (_events.default.isEnterKey(event)) {
+          /* timeout enforces that the "closeSubmenu" method will be run after 
+            the browser navigates to the specified href of the menu-item. */
+          setTimeout(() => closeSubmenu(), 0);
+        }
+        if (href && _events.default.isEnterKey(event)) {
+          closeSubmenu();
+          return;
+        }
       }
       if (nextIndex !== index) {
         setSubmenuFocusId(submenuItemIds[nextIndex]);

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

@@ -147,7 +147,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
       }
 
       ${_icon.default} {
-        bottom: 1px;
+        bottom: 3px;
       }
     }
 

package/lib/components/pill/pill.style.js

@@ -66,9 +66,9 @@ const StyledPill = _styledComponents.default.span`
     console.error(e);
   }
   return (0, _styledComponents.css)`
-      font-size: 10px;
+      font-size: 12px;
       letter-spacing: 0.7px;
-      font-weight: 600;
+      font-weight: 700;
       position: relative;
       display: inline-flex;
       text-align: center;
@@ -99,7 +99,7 @@ const StyledPill = _styledComponents.default.span`
       ${size === "S" && (0, _styledComponents.css)`
         min-height: 16px;
         line-height: 16px;
-        font-size: 10px;
+        font-size: 12px;
 
         ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
           border-radius: 12px;
@@ -113,7 +113,7 @@ const StyledPill = _styledComponents.default.span`
       ${size === "M" && (0, _styledComponents.css)`
         min-height: 20px;
         line-height: 20px;
-        font-size: 12px;
+        font-size: 14px;
 
         ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
           border-radius: 12px;
@@ -139,8 +139,8 @@ const StyledPill = _styledComponents.default.span`
       `}
 
       ${size === "XL" && (0, _styledComponents.css)`
-        min-height: 26px;
-        line-height: 26px;
+        min-height: 28px;
+        line-height: 28px;
         font-size: 16px;
 
         ${theme.roundedCornersOptOut && (0, _styledComponents.css)`
@@ -198,8 +198,6 @@ const StyledPill = _styledComponents.default.span`
           }
 
           ${_icon.default} {
-            font-size: 12px;
-            padding: 0 4px;
             height: unset;
             width: unset;
             color: ${contentColor};
@@ -218,52 +216,50 @@ const StyledPill = _styledComponents.default.span`
         }
 
         ${size === "S" && (0, _styledComponents.css)`
-          padding: 0 24px 0 7px;
+          padding: 0 22px 0 8px;
 
           button {
             padding: 0;
-            line-height: 14px;
-            ${addStyleToPillIcon("7px")}
+            line-height: 16px;
+            top: -2px;
+            ${addStyleToPillIcon("16px")}
           }
         `}
 
         ${size === "M" && (0, _styledComponents.css)`
-          padding: 0 32px 0 11px;
+          padding: 0 28px 0 8px;
 
           button {
             width: 24px;
             padding: 0;
             line-height: 15px;
-            ${addStyleToPillIcon("10px")}
           }
         `}
 
         ${size === "L" && (0, _styledComponents.css)`
-          padding: 0 36px 0 15px;
+          padding: 0 32px 0 8px;
 
           button {
             width: 28px;
             padding: 0;
             line-height: 16px;
-            ${addStyleToPillIcon("12px")}
           }
         `}
 
         ${size === "XL" && (0, _styledComponents.css)`
-          padding: 0 41px 0 19px;
+          padding: 0 36px 0 12px;
 
           button {
             width: 32px;
             padding: 0;
             line-height: 18px;
-            ${addStyleToPillIcon("13px")}
           }
         `}
       `}
 
       ${!isDeletable && (0, _styledComponents.css)`
         ${size === "S" && (0, _styledComponents.css)`
-          padding: 0 7px;
+          padding: 0 8px;
 
           button {
             padding: 0;
@@ -271,7 +267,7 @@ const StyledPill = _styledComponents.default.span`
         `}
 
         ${size === "M" && (0, _styledComponents.css)`
-          padding: 0 11px;
+          padding: 0 8px;
 
           button {
             width: 24px;
@@ -280,7 +276,7 @@ const StyledPill = _styledComponents.default.span`
         `}
 
         ${size === "L" && (0, _styledComponents.css)`
-          padding: 0 15px;
+          padding: 0 8px;
 
           button {
             width: 28px;
@@ -289,7 +285,7 @@ const StyledPill = _styledComponents.default.span`
         `}
 
         ${size === "XL" && (0, _styledComponents.css)`
-          padding: 0 19px;
+          padding: 0 12px;
 
           button {
             width: 32px;

package/lib/components/portrait/portrait.config.js

@@ -15,7 +15,7 @@ const PORTRAIT_SIZE_PARAMS = {
   },
   S: {
     dimensions: 32,
-    iconDimensions: 16
+    iconDimensions: 20
   },
   M: {
     dimensions: 40,

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

@@ -88,13 +88,13 @@ const getIconColor = color => {
   return "var(--colorsUtilityYin090)";
 };
 const StyledTickIcon = (0, _styledComponents.default)(_icon.default)`
-  height: 22px;
-  width: 22px;
+  height: 20px;
+  width: 20px;
   pointer-events: none;
   display: block;
 
   &::before {
-    font-size: 22px;
+    font-size: 20px;
     color: ${_ref3 => {
   let {
     color

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

@@ -150,7 +150,9 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const handleTargetRef = (0, _react.useCallback)(node => {
     reference(target || node);
     targetInternalRef.current = node;
-    preserveRef(children.ref, node);
+    preserveRef(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    children.ref, node);
   }, [reference, children, target]);
   const handleFloatingRef = (0, _react.useCallback)(node => {
     floating(node);

package/lib/style/themes/medium/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _ = require("..");
+/* eslint-disable no-console */
 var _default = (() => {
   console.warn(`"Medium Theme" has been renamed to "Aegean".
 All references to that theme should be updated to:

package/lib/style/themes/small/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _ = require("..");
+/* eslint-disable no-console */
 var _default = (() => {
   console.warn(`"Small Theme" has been renamed to "Mint".
 All references to that theme should be updated to:

package/package.json

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