carbon-react 118.1.1 → 118.2.1

package/esm/components/menu/menu-full-screen/menu-full-screen.component.js

@@ -33,6 +33,24 @@ const MenuFullscreen = ({
     if (Events.isEscKey(ev)) {
       onClose(ev);
     }
+
+    if (Events.isTabKey(ev) && !Events.isShiftKey(ev)) {
+      var _menuWrapperRef$curre;
+
+      const search = (_menuWrapperRef$curre = menuWrapperRef.current) === null || _menuWrapperRef$curre === void 0 ? void 0 : _menuWrapperRef$curre.querySelector('[data-component="search"');
+      const searchInput = search === null || search === void 0 ? void 0 : search.querySelector("input");
+      const searchButton = search === null || search === void 0 ? void 0 : search.querySelector("button"); // if there is no value in the search input the button disappears when the input blurs
+      // this means we need to programatically set focus to the next menu item
+
+      if (searchButton && searchInput && !searchInput.value && searchInput === document.activeElement) {
+        var _menuWrapperRef$curre2, _elements;
+
+        ev.preventDefault();
+        const elements = Array.from((_menuWrapperRef$curre2 = menuWrapperRef.current) === null || _menuWrapperRef$curre2 === void 0 ? void 0 : _menuWrapperRef$curre2.querySelectorAll("a, input, button"));
+        const index = elements.indexOf(searchInput);
+        (_elements = elements[index + 2]) === null || _elements === void 0 ? void 0 : _elements.focus();
+      }
+    }
   };
 
   return /*#__PURE__*/React.createElement("li", {

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

@@ -111,7 +111,7 @@ const MenuItem = ({
       (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     }
 
-    const shouldFocusIcon = ((_inputIcon$current2 = inputIcon.current) === null || _inputIcon$current2 === void 0 ? void 0 : _inputIcon$current2.getAttribute("tabindex")) === "0" && document.activeElement === inputRef.current && ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value); // let natural tab order move focus if input icon is tabbable
+    const shouldFocusIcon = ((_inputIcon$current2 = inputIcon.current) === null || _inputIcon$current2 === void 0 ? void 0 : _inputIcon$current2.getAttribute("tabindex")) === "0" && document.activeElement === inputRef.current && ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value); // let natural tab order move focus if input icon is tabbable or input with button exists
 
     if (Events.isTabKey(event) && (!Events.isShiftKey(event) && shouldFocusIcon || Events.isShiftKey(event) && document.activeElement === inputIcon.current)) {
       return;

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

@@ -300,18 +300,20 @@ const StyledMenuItemWrapper = styled.a.attrs({
         position: relative;
       }
 
-      a:focus,
-      a:hover,
-      button:focus,
-      button:hover {
-        background-color: var(--colorsComponentsMenuAutumnStandard600);
-        color: var(--colorsComponentsMenuYang100);
+      && {
+        a:focus,
+        a:hover,
+        button:focus,
+        button:hover {
+          background-color: var(--colorsComponentsMenuAutumnStandard600);
+          color: var(--colorsComponentsMenuYang100);
 
-          ${!hasInput && `
-            [data-component="icon"] {
-              color: var(--colorsComponentsMenuYang100);
-            }
-          `}
+            ${!hasInput && `
+              [data-component="icon"] {
+                color: var(--colorsComponentsMenuYang100);
+              }
+            `}
+          }
         }
       }
     `}

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

@@ -20,12 +20,16 @@ const StyledMenuWrapper = styled.ul`
         display: inline-block;
         vertical-align: bottom;
         background-color: ${menuConfigVariants[menuType].background};
-
         ${menuType === "dark" && css`
-          color: ${menuConfigVariants[menuType].color};
+          display: inline-block;
+          vertical-align: bottom;
+          background-color: ${menuConfigVariants[menuType].background};
+
+          ${menuType === "dark" && css`
+            color: ${menuConfigVariants[menuType].color};
+          `}
         `}
       `}
-
     ${StyledDivider} {
       position: relative;
       top: -1px;
@@ -35,7 +39,11 @@ const StyledMenuWrapper = styled.ul`
 const StyledMenuItem = styled.li`
   ${layout}
   ${flexbox}
-  
+
+  ${StyledLink} a:focus, ${StyledLink} button:focus {
+    border-radius: var(--borderRadius000);
+  }
+
   ${({
   inSubmenu
 }) => css`
@@ -43,8 +51,7 @@ const StyledMenuItem = styled.li`
       display: list-item;
     `}
   `}
-
-    ${({
+  ${({
   inFullscreenView
 }) => inFullscreenView && css`
       padding-top: 16px;

package/esm/components/menu/scrollable-block/scrollable-block.style.js

@@ -1,6 +1,9 @@
 import styled, { css } from "styled-components";
 import StyledMenuItemWrapper from "../menu-item/menu-item.style";
 import menuConfigVariants from "../menu.config";
+import Box from "../../box/box.component";
+import { StyledMenuItem } from "../menu.style";
+import { StyledLink } from "../../link/link.style";
 const StyledScrollableBlock = styled.li`
   ${({
   menuType,
@@ -9,6 +12,18 @@ const StyledScrollableBlock = styled.li`
     && ${StyledMenuItemWrapper} {
       background-color: ${variant === "default" ? menuConfigVariants[menuType].submenuItemBackground : menuConfigVariants[menuType].alternate};
     }
+
+    ${Box} {
+      border-radius: var(--borderRadius000);
+      border-bottom-left-radius: var(--borderRadius100);
+
+      ${StyledMenuItem}:last-child ${StyledLink},
+      ${StyledMenuItem}:last-child a,
+      ${StyledMenuItem}:last-child button {
+        border-bottom-left-radius: var(--borderRadius100);
+        border-bottom-right-radius: var(--borderRadius000);
+      }
+    }
   `}
 `;
 export default StyledScrollableBlock;

package/esm/components/message/message.style.js

@@ -13,6 +13,8 @@ const MessageStyle = styled.div`
   display: flex;
   justify-content: flex-start;
   align-content: center;
+  border-radius: var(--borderRadius100);
+  overflow: hidden;
   border: 1px solid ${({
   variant
 }) => variant && messageVariants[variant]};

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

@@ -4,6 +4,7 @@ import StyledButton from "../button/button.style";
 import baseTheme from "../../style/themes/base";
 import StyledIcon from "../icon/icon.style";
 import computeWidth from "../../style/utils/width";
+import { borderRadiusStyling } from "../split-button/split-button-children.style";
 const StyledMultiActionButton = styled.div`
   ${margin}
 
@@ -71,12 +72,15 @@ const StyledButtonChildrenContainer = styled.div`
     white-space: nowrap;
     z-index: ${theme.zIndex.popover};
     box-shadow: var(--boxShadow100);
+    border-radius: var(--borderRadius100);
 
     ${StyledIcon} {
       margin-left: 0;
       left: 8px;
     }
 
+    ${borderRadiusStyling}
+
     ${StyledButton} {
       border: 1px solid var(--colorsActionMajorTransparent);
       display: flex;

package/esm/components/note/note.style.js

@@ -110,6 +110,7 @@ const StyledNote = styled.div`
 }) => css`
     background-color: var(--colorsUtilityYang100);
     border: 1px solid var(--colorsUtilityMajor100);
+    border-radius: var(--borderRadius100);
     display: flex;
     flex-direction: column;
     padding: 24px;

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

@@ -194,6 +194,7 @@ const NumeralDate = ({
     onKeyPress: onKeyPress,
     "data-component": "numeral-date"
   }, dateFormat.map((datePart, index) => {
+    const isStart = index === 0;
     const isEnd = index === dateFormat.length - 1;
     const isMiddle = index === 1;
     const validation = error || warning || info;
@@ -228,6 +229,7 @@ const NumeralDate = ({
     }, /*#__PURE__*/React.createElement(StyledDateField, {
       key: datePart,
       isYearInput: datePart.length === 4,
+      isStart: isStart,
       isMiddle: isMiddle,
       isEnd: isEnd,
       hasValidationIcon: hasValidationIcon

package/esm/components/numeral-date/numeral-date.style.d.ts

@@ -1,4 +1,5 @@
 interface StyledDateFieldProps {
+    isStart?: boolean;
     isEnd?: boolean;
     isMiddle?: boolean;
     isYearInput?: boolean;

package/esm/components/numeral-date/numeral-date.style.js

@@ -18,6 +18,7 @@ export const StyledNumeralDate = styled.div`
 `;
 export const StyledDateField = styled.div`
   ${({
+  isStart,
   isYearInput,
   isEnd,
   hasValidationIcon,
@@ -29,6 +30,17 @@ export const StyledDateField = styled.div`
         position: relative;
         width: ${yearInputOrError ? "78px;" : "58px;"};
         text-align: center;
+        border-radius: var(--borderRadius000);
+
+        ${isStart && css`
+            border-top-left-radius: var(--borderRadius050);
+            border-bottom-left-radius: var(--borderRadius050);
+          `}
+
+        ${isEnd && css`
+            border-top-right-radius: var(--borderRadius050);
+            border-bottom-right-radius: var(--borderRadius050);
+          `}
 
         ${(isMiddle || isEnd) && css`
             margin-left: -1px;

package/esm/components/pager/pager.style.js

@@ -30,6 +30,8 @@ const StyledPagerContainer = styled.div`
 }) => css`
       border-width: 1px 1px 1px 1px;
       border-style: none solid solid solid;
+      border-bottom-left-radius: var(--borderRadius100);
+      border-bottom-right-radius: var(--borderRadius100);
       border-color: var(--colorsUtilityMajor100);
       background-color: ${variant === "alternate" ? "var(--colorsUtilityMajor040)" : "var(--colorsUtilityMajor010)"};
     `}

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

@@ -60,7 +60,6 @@ const StyledPill = styled.span`
   }
 
   return css`
-      border-radius: 12px;
       font-size: 10px;
       letter-spacing: 0.7px;
       font-weight: 600;
@@ -70,6 +69,7 @@ const StyledPill = styled.span`
       align-items: center;
       justify-content: center;
       border: 2px solid ${pillColor};
+      border-radius: var(--borderRadius025);
       height: auto;
       ${!wrapText && css`
         white-space: nowrap;
@@ -115,7 +115,7 @@ const StyledPill = styled.span`
       ${isDeletable && css`
         button {
           -webkit-appearance: none;
-          border-radius: 0 6px 6px 0;
+          border-radius: var(--borderRadius000);
           border: none;
           bottom: 0;
           font-size: 100%;
@@ -130,6 +130,9 @@ const StyledPill = styled.span`
             outline: none;
             box-shadow: 0 0 0 3px var(--colorsSemanticFocus500);
             background-color: ${buttonFocusColor};
+            border-radius: var(--borderRadius000) var(--borderRadius025)
+              var(--borderRadius025) var(--borderRadius000);
+
             & {
               color: ${contentColor};
             }
@@ -175,7 +178,6 @@ const StyledPill = styled.span`
 
           button {
             padding: 0;
-            border-radius: 0 8px 8px 0;
             line-height: 14px;
 
             ${addStyleToPillIcon("7px")}
@@ -184,12 +186,10 @@ const StyledPill = styled.span`
 
         ${size === "M" && css`
           padding: 0 32px 0 11px;
-          border-radius: 12px;
 
           button {
             width: 24px;
             padding: 0;
-            border-radius: 0 10px 10px 0;
             line-height: 15px;
 
             ${addStyleToPillIcon("10px")}
@@ -198,12 +198,10 @@ const StyledPill = styled.span`
 
         ${size === "L" && css`
           padding: 0 36px 0 15px;
-          border-radius: 13px;
 
           button {
             width: 28px;
             padding: 0;
-            border-radius: 0 11px 11px 0;
             line-height: 16px;
 
             ${addStyleToPillIcon("12px")}
@@ -212,12 +210,10 @@ const StyledPill = styled.span`
 
         ${size === "XL" && css`
           padding: 0 41px 0 19px;
-          border-radius: 15px;
 
           button {
             width: 32px;
             padding: 0;
-            border-radius: 0 12px 12px 0;
             line-height: 18px;
 
             ${addStyleToPillIcon("13px")}
@@ -236,34 +232,28 @@ const StyledPill = styled.span`
 
         ${size === "M" && css`
           padding: 0 11px;
-          border-radius: 12px;
 
           button {
             width: 24px;
             padding: 0;
-            border-radius: 0 8px 8px 0;
           }
         `}
 
         ${size === "L" && css`
           padding: 0 15px;
-          border-radius: 13px;
 
           button {
             width: 28px;
             padding: 0;
-            border-radius: 0 10px 10px 0;
           }
         `}
 
         ${size === "XL" && css`
           padding: 0 19px;
-          border-radius: 15px;
 
           button {
             width: 32px;
             padding: 0;
-            border-radius: 0 12px 12px 0;
           }
         `}
       `}

package/esm/components/pod/pod.style.js

@@ -40,6 +40,7 @@ const StyledBlock = styled.div`
   isFocused
 }) => css`
       box-sizing: border-box;
+      border-radius: var(--borderRadius100);
       display: flex;
       flex-direction: column;
       background-color: ${blockBackgrounds[variant]};
@@ -113,6 +114,8 @@ const StyledFooter = styled.div`
   softDelete
 }) => css`
     background-color: var(--colorsUtilityMajor025);
+    border-bottom-left-radius: var(--borderRadius100);
+    border-bottom-right-radius: var(--borderRadius100);
     box-shadow: inset 0px 1px 1px 0 rgba(0, 0, 0, 0.1);
     color: var(--colorsUtilityYin090);
     padding: ${footerPaddings[size]};
@@ -171,6 +174,7 @@ const StyledEditAction = styled.a`
       display: flex;
       align-items: center;
       justify-content: center;
+      border-radius: var(--borderRadius100);
 
       ${StyledIcon} {
         top: -2px;
@@ -227,6 +231,7 @@ const StyledDeleteButton = styled(IconButton)`
       box-sizing: border-box;
       height: ${`${actionButtonSizes[size]}px`};
       width: ${`${actionButtonSizes[size]}px`};
+      border-radius: var(--borderRadius100);
 
       ${StyledIcon} {
         top: -2px;
@@ -274,6 +279,7 @@ const StyledUndoButton = styled(IconButton)`
       box-sizing: border-box;
       height: ${`${actionButtonSizes[size]}px`};
       width: ${`${actionButtonSizes[size]}px`};
+      border-radius: var(--borderRadius100);
 
       ${StyledIcon} {
         top: -2px;

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

@@ -17,6 +17,7 @@ const PopoverContainerContentStyle = styled.div`
   ${padding}
 
   background: var(--colorsUtilityYang100);
+  border-radius: var(--borderRadius100);
   box-shadow: var(--boxShadow100);
   min-width: 300px;
   position: absolute;

package/esm/components/portrait/portrait-gravatar.component.js

@@ -8,7 +8,7 @@ const PortraitGravatar = ({
   gravatarEmail,
   size,
   alt,
-  shape = "square",
+  shape = "circle",
   errorCallback
 }) => {
   const gravatarSrc = () => {

package/esm/components/portrait/portrait-initials.component.js

@@ -7,7 +7,7 @@ import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
 const PortraitInitials = ({
   initials,
   size,
-  shape = "square",
+  shape = "circle",
   darkBackground,
   alt
 }) => {

package/esm/components/portrait/portrait.component.js

@@ -15,7 +15,7 @@ const Portrait = ({
   gravatar,
   iconType = "individual",
   initials,
-  shape = "square",
+  shape = "circle",
   size = "M",
   src,
   onClick,

package/esm/components/portrait/portrait.style.js

@@ -29,7 +29,7 @@ function stylingForShape({
 }) {
   let cssString = "overflow: hidden;";
   if (shape === "square") cssString += "border-radius: 0px;";
-  if (shape === "circle") cssString += "border-radius: 50%;";
+  if (shape === "circle") cssString += "border-radius: var(--borderRadiusCircle);";
   return css`
     ${cssString}
   `;
@@ -51,7 +51,6 @@ function stylingForIcon({
   return css`
     background-color: ${backgroundColor};
     color: ${color};
-
     ::before {
       font-size: ${params === null || params === void 0 ? void 0 : params.iconDimensions}px;
     }
@@ -71,7 +70,6 @@ export const StyledPortraitInitials = styled.div`
   ${stylingForSize}
   ${stylingForShape}
   outline: 1px solid var(--colorsUtilityMajor200);
-
   /* Styling for safari. This ensures that there is no outline on the component but that a border is still present 
      to achieve the same styling as Chrome and Firefox */
   @media not all and (min-resolution: 0.001dpcm) {

package/esm/components/profile/profile.component.js

@@ -34,7 +34,7 @@ const Profile = ({
         alt: getInitials(),
         initials: getInitials(),
         size: size,
-        shape: "square",
+        shape: "circle",
         "data-element": "user-image"
       });
     }

package/esm/components/progress-tracker/progress-tracker.style.js

@@ -57,7 +57,7 @@ const StyledProgressBar = styled.span`
   progress,
   error
 })};
-    border-radius: 25px;
+    border-radius: var(--borderRadius400);
     overflow-x: hidden;
     height: ${getHeight(size)};
     width: 100%;
@@ -104,7 +104,7 @@ const InnerBar = styled.span`
   progress,
   error
 })};
-    border-radius: 25px;
+    border-radius: var(--borderRadius400);
     width: calc(${length} * ${progress && progress / 100});
     min-width: 2px;
     height: ${getHeight(size)};

package/esm/components/radio-button/radio-button.style.js

@@ -31,7 +31,7 @@ const RadioButtonStyle = styled(CheckboxStyle)`
     }
 
     ${StyledCheckableInputSvgWrapper}, svg {
-      border-radius: 50%;
+      border-radius: var(--borderRadiusCircle);
     }
 
     ${StyledCheckableInput},

package/esm/components/search/search-button.style.js

@@ -15,6 +15,11 @@ const StyledSearchButton = styled.div`
   & ${StyledButton} {
     background-color: var(--colorsActionMajor500);
     border-color: var(--colorsActionMajorTransparent);
+    border-bottom-left-radius: var(--borderRadius000);
+    border-top-left-radius: var(--borderRadius000);
+    border-bottom-right-radius: var(--borderRadius050);
+    border-top-right-radius: var(--borderRadius050);
+
     :hover {
       background: var(--colorsActionMajor600);
       border-color: var(--colorsActionMajorTransparent);

package/esm/components/search/search.style.js

@@ -52,6 +52,7 @@ const StyledSearch = styled.div`
         }
       `}
 
+
       ${StyledInput} {
         ::-moz-placeholder {
           color: var(--colorsUtilityYin055);
@@ -78,6 +79,12 @@ const StyledSearch = styled.div`
 
       ${StyledInputPresentation} {
         background-color: ${searchHasValue || isFocused ? "var(--colorsUtilityYang100)" : "transparent"};
+
+        ${showSearchButton && css`
+          border-top-right-radius: var(--borderRadius000);
+          border-bottom-right-radius: var(--borderRadius000);
+        `}
+
         flex: 1;
         font-size: 14px;
         font-weight: 700;

package/esm/components/select/select-list/select-list-container.style.js

@@ -15,6 +15,7 @@ const StyledSelectListContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
+  border-radius: var(--borderRadius050);
 
   ${({
   isLoading

package/esm/components/split-button/split-button-children.style.d.ts

@@ -1,4 +1,5 @@
 import { ThemeObject } from "../../style/themes/base";
+export declare const borderRadiusStyling = "\n  > {\n    &:first-child:last-child {\n      border-radius: var(--borderRadius100);\n    }\n\n    &:first-child:not(:last-child) {\n      border-top-left-radius: var(--borderRadius100);\n      border-top-right-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius000);\n    }\n\n    &:not(:first-child):not(:last-child) {\n      border-radius: var(--borderRadius000);\n    }\n\n    &:last-child:not(:first-child) {\n      border-top-right-radius: var(--borderRadius000);\n      border-top-left-radius: var(--borderRadius000);\n      border-bottom-left-radius: var(--borderRadius100);\n      border-bottom-right-radius: var(--borderRadius100);\n    }\n  }\n";
 declare type StyledSplitButtonChildrenContainerProps = {
     theme: ThemeObject;
     align: "left" | "right";

package/esm/components/split-button/split-button-children.style.js

@@ -1,7 +1,33 @@
 import styled, { css } from "styled-components";
 import BaseTheme from "../../style/themes/base";
 import StyledButton from "../button/button.style";
+export const borderRadiusStyling = `
+  > {
+    &:first-child:last-child {
+      border-radius: var(--borderRadius100);
+    }
+
+    &:first-child:not(:last-child) {
+      border-top-left-radius: var(--borderRadius100);
+      border-top-right-radius: var(--borderRadius100);
+      border-bottom-right-radius: var(--borderRadius000);
+      border-bottom-left-radius: var(--borderRadius000);
+    }
+
+    &:not(:first-child):not(:last-child) {
+      border-radius: var(--borderRadius000);
+    }
+
+    &:last-child:not(:first-child) {
+      border-top-right-radius: var(--borderRadius000);
+      border-top-left-radius: var(--borderRadius000);
+      border-bottom-left-radius: var(--borderRadius100);
+      border-bottom-right-radius: var(--borderRadius100);
+    }
+  }
+`;
 const StyledSplitButtonChildrenContainer = styled.div`
+  border-radius: var(--borderRadius100);
   ${({
   theme,
   align,
@@ -13,6 +39,8 @@ const StyledSplitButtonChildrenContainer = styled.div`
     z-index: ${theme.zIndex.popover};
     box-shadow: var(--boxShadow100);
 
+    ${borderRadiusStyling}
+
     ${StyledButton} {
       border: 1px solid var(--colorsActionMajorTransparent);
       display: block;

package/esm/components/split-button/split-button-toggle.style.js

@@ -13,6 +13,9 @@ const StyledSplitButtonToggle = styled(StyledButton)`
   displayed,
   size
 }) => css`
+    border-top-left-radius: var(--borderRadius000);
+    border-bottom-left-radius: var(--borderRadius000);
+
     ${!disabled && displayed ? css`
           background-color: var(--colorsActionMajor500);
           border-color: var(--colorsActionMajor500);
@@ -26,7 +29,8 @@ const StyledSplitButtonToggle = styled(StyledButton)`
             border-left-color: var(--colorsSemanticFocus500);
           }
         ` : ""}
-    ${!disabled && buttonType === "primary" && `position: relative;
+    ${!disabled && buttonType === "primary" && `
+      position: relative;
       &::before {
         content: '';
         width: 2px;
@@ -37,6 +41,7 @@ const StyledSplitButtonToggle = styled(StyledButton)`
         z-index: 2;
       }  
     `}
+
     ${buttonType === "secondary" && "border-left-width: 0;"}
     padding: 0 ${horizontalPaddingSizes[size]}px;
 

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

@@ -4,13 +4,16 @@ import StyledButton from "../button/button.style";
 import baseTheme from "../../style/themes/base";
 const StyledSplitButton = styled.div`
   ${margin}
-
   display: inline-block;
   position: relative;
 
+  ${StyledButton}:first-of-type {
+    border-top-right-radius: var(--borderRadius000);
+    border-bottom-right-radius: var(--borderRadius000);
+  }
+
   & > ${StyledButton} {
     margin: 0;
-
     &:focus {
       border: 3px solid var(--colorsSemanticFocus500);
       outline: none;

package/esm/components/switch/__internal__/switch-slider.style.js

@@ -22,7 +22,7 @@ const StyledSwitchSlider = styled.span`
     width: 64px;
     min-width: fit-content;
     z-index: 2;
-    border-radius: 90px;
+    border-radius: var(--borderRadius400);
     border-style: solid;
     border-color: var(--colorsActionMinor400);
     border-width: var(--borderWidth200);
@@ -76,7 +76,6 @@ const StyledSwitchSlider = styled.span`
     `}
 
     ${size === "large" && css`
-      border-radius: 30px;
       &::before {
         height: 32px;
         width: 32px;