carbon-react 118.1.1 → 118.2.1

package/lib/components/flat-table/flat-table.component.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.FlatTableThemeContext = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -19,6 +19,10 @@ var _utils = require("../../style/utils");
 
 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; }
+
 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 FlatTableThemeContext = /*#__PURE__*/_react.default.createContext({});
@@ -43,6 +47,12 @@ const FlatTable = ({
   width,
   ...rest
 }) => {
+  const wrapperRef = (0, _react.useRef)(null);
+  const tableRef = (0, _react.useRef)(null);
+  const [hasVerticalScrollbar, setHasVerticalScrollbar] = (0, _react.useState)(false);
+  const [hasHorizontalScrollbar, setHasHorizontalScrollbar] = (0, _react.useState)(false);
+  const [firstColRowSpanIndex, setFirstColRowSpanIndex] = (0, _react.useState)(-1);
+  const [lastColRowSpanIndex, setLastColRowSpanIndex] = (0, _react.useState)(-1);
   const addDefaultHeight = !height && (hasStickyHead || hasStickyFooter);
   const tableStylingProps = {
     caption,
@@ -54,9 +64,50 @@ const FlatTable = ({
     tableStylingProps["aria-describedby"] = ariaDescribedby;
   }
 
+  (0, _react.useLayoutEffect)(() => {
+    const findRow = (rows, isFirstCol) => rows.find((row, index) => {
+      const cells = Array.from(row.querySelectorAll("td, th"));
+      const cell = isFirstCol ? cells.shift() : cells.pop();
+      const rowSpan = cell === null || cell === void 0 ? void 0 : cell.getAttribute("rowspan");
+      return rowSpan >= index + 1;
+    });
+
+    if (wrapperRef.current && tableRef.current) {
+      var _tableRef$current;
+
+      const {
+        offsetHeight,
+        offsetWidth
+      } = wrapperRef.current;
+      const {
+        top,
+        bottom,
+        right,
+        left
+      } = (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.getBoundingClientRect();
+      setHasVerticalScrollbar(bottom - top > offsetHeight);
+      setHasHorizontalScrollbar(right - left > offsetWidth);
+      const body = tableRef.current.querySelector("tbody");
+      const bodyRows = body ? Array.from(body === null || body === void 0 ? void 0 : body.querySelectorAll("tr")) : [];
+      const {
+        length
+      } = bodyRows;
+      const targetRowFirstCol = findRow(bodyRows.slice(0, length - 1).reverse(), true);
+      const targetRowLastCol = findRow(bodyRows.slice(0, length - 1).reverse());
+
+      if (targetRowFirstCol) {
+        setFirstColRowSpanIndex(bodyRows.indexOf(targetRowFirstCol));
+      }
+
+      if (targetRowLastCol) {
+        setLastColRowSpanIndex(bodyRows.indexOf(targetRowLastCol));
+      }
+    }
+  }, [footer, children, height, minHeight]);
   return /*#__PURE__*/_react.default.createElement(_drawer.DrawerSidebarContext.Consumer, null, ({
     isInSidebar
   }) => /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableWrapper, _extends({
+    ref: wrapperRef,
     "data-component": "flat-table-wrapper",
     isInSidebar: isInSidebar,
     hasStickyHead: hasStickyHead,
@@ -71,11 +122,18 @@ const FlatTable = ({
     tabIndex: "0",
     role: "region",
     overflowX: width ? "hidden" : undefined,
-    width: width
+    width: width,
+    hasStickyFooter: hasStickyFooter,
+    hasVerticalScrollbar: hasVerticalScrollbar,
+    hasHorizontalScrollbar: hasHorizontalScrollbar,
+    hasFooter: !!footer,
+    firstColRowSpanIndex: firstColRowSpanIndex,
+    lastColRowSpanIndex: lastColRowSpanIndex
   }, rest), /*#__PURE__*/_react.default.createElement(_flatTable.StyledTableContainer, {
     overflowX: overflowX,
     width: width
   }, /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTable, _extends({
+    ref: tableRef,
     "data-component": "flat-table"
   }, tableStylingProps), caption ? /*#__PURE__*/_react.default.createElement("caption", null, caption) : null, /*#__PURE__*/_react.default.createElement(FlatTableThemeContext.Provider, {
     value: {

package/lib/components/flat-table/flat-table.style.js

@@ -25,6 +25,8 @@ var _cellSizes = _interopRequireDefault(require("./cell-sizes.style"));
 
 var _box = _interopRequireDefault(require("../box"));
 
+var _pager = require("../pager/pager.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; }
@@ -50,10 +52,15 @@ const StyledTableContainer = _styledComponents.default.div`
 exports.StyledTableContainer = StyledTableContainer;
 const StyledFlatTable = _styledComponents.default.table`
   border-collapse: separate;
-  border-radius: 0px;
   border-spacing: 0;
   width: 100%;
 
+  @-moz-document url-prefix() {
+    overflow: hidden;
+    border-top-left-radius: var(--borderRadius100);
+    border-top-right-radius: var(--borderRadius100);
+  }
+
   ${({
   caption
 }) => caption && (0, _styledComponents.css)`
@@ -115,6 +122,16 @@ StyledFlatTable.defaultProps = {
   size: "medium"
 };
 const StyledFlatTableWrapper = (0, _styledComponents.default)(_box.default)`
+  border-top-left-radius: var(--borderRadius100);
+  border-top-right-radius: var(--borderRadius100);
+  ${({
+  hasStickyFooter,
+  hasHorizontalScrollbar
+}) => !hasStickyFooter && !hasHorizontalScrollbar && (0, _styledComponents.css)`
+      border-bottom-left-radius: var(--borderRadius100);
+      border-bottom-right-radius: var(--borderRadius100);
+    `}
+
   ${({
   isInSidebar
 }) => (0, _styledComponents.css)`
@@ -212,6 +229,9 @@ const StyledFlatTableWrapper = (0, _styledComponents.default)(_box.default)`
   ${({
   isInSidebar
 }) => isInSidebar && (0, _styledComponents.css)`
+      ${_flatTableHead.default} {
+        background-color: var(--colorsUtilityMajor040);
+      }
       ${_flatTableHeader.default}, ${_flatTableHead.default} ${_flatTableRowHeader.StyledFlatTableRowHeader},
       ${_flatTableHead.default} ${_flatTableCheckbox.default} {
         background-color: var(--colorsUtilityMajor040);
@@ -251,6 +271,21 @@ const StyledFlatTableWrapper = (0, _styledComponents.default)(_box.default)`
 }) => theme.zIndex.overlay + HEADER_OVERLAY_INCREMENT};
   }
 
+  thead {
+    ${_flatTableRow.default}:first-of-type {
+      th:first-of-type {
+        border-top-left-radius: var(--borderRadius100);
+      }
+      ${({
+  hasVerticalScrollbar
+}) => !hasVerticalScrollbar && (0, _styledComponents.css)`
+          th:last-of-type {
+            border-top-right-radius: var(--borderRadius100);
+          }
+        `}
+    }
+  }
+
   tbody
     ${_flatTableRowHeader.StyledFlatTableRowHeader},
     ${_flatTableCell.StyledFlatTableCell}.isSticky,
@@ -260,6 +295,67 @@ const StyledFlatTableWrapper = (0, _styledComponents.default)(_box.default)`
   theme
 }) => theme.zIndex.overlay};
   }
+
+  ${({
+  hasFooter
+}) => hasFooter && (0, _styledComponents.css)`
+    tr:last-child:focus {
+      :after {
+        border-bottom-left-radius: var(--borderRadius000);
+        border-bottom-right-radius: var(--borderRadius000);
+      }
+  `}
+
+  ${({
+  hasFooter
+}) => !hasFooter && (0, _styledComponents.css)`
+      tbody {
+        ${({
+  firstColRowSpanIndex
+}) => firstColRowSpanIndex >= 0 && (0, _styledComponents.css)`
+            ${_flatTableRow.default}:nth-of-type(${firstColRowSpanIndex + 1}) {
+              th:first-child,
+              td:first-child {
+                border-bottom-left-radius: var(--borderRadius100);
+              }
+            }
+          `}
+
+        ${({
+  lastColRowSpanIndex,
+  hasHorizontalScrollbar
+}) => lastColRowSpanIndex >= 0 && !hasHorizontalScrollbar && (0, _styledComponents.css)`
+            ${_flatTableRow.default}:nth-of-type(${lastColRowSpanIndex + 1}) {
+              th:last-child,
+              td:last-child {
+                border-bottom-right-radius: var(--borderRadius100);
+              }
+            }
+          `}
+
+        ${_flatTableRow.default}:last-of-type {
+          ${({
+  hasHorizontalScrollbar,
+  firstColRowSpanIndex
+}) => !hasHorizontalScrollbar && firstColRowSpanIndex === -1 && (0, _styledComponents.css)`
+              th:first-child,
+              td:first-child {
+                border-bottom-left-radius: var(--borderRadius100);
+              }
+            `}
+          ${({
+  hasVerticalScrollbar,
+  hasHorizontalScrollbar,
+  lastColRowSpanIndex
+}) => !hasVerticalScrollbar && !hasHorizontalScrollbar && lastColRowSpanIndex === -1 && (0, _styledComponents.css)`
+              th:last-child,
+              td:last-child {
+                border-bottom-right-radius: var(--borderRadius100);
+              }
+            `}
+        }
+      }
+    `}
 `;
 exports.StyledFlatTableWrapper = StyledFlatTableWrapper;
 StyledFlatTableWrapper.defaultProps = {
@@ -273,6 +369,11 @@ const StyledFlatTableFooter = _styledComponents.default.div`
       position: sticky;
       bottom: 0px;
       z-index: ${theme.zIndex.overlay + STICKY_FOOTER_OVERLAY_INCREMENT};
+
+      ${_pager.StyledPagerContainer} {
+        border-bottom-left-radius: var(--borderRadius000);
+        border-bottom-right-radius: var(--borderRadius000);
+      }
     `}
 `;
 exports.StyledFlatTableFooter = StyledFlatTableFooter;

package/lib/components/flat-table/sort/sort.style.js

@@ -32,6 +32,7 @@ const StyledSort = _styledComponents.default.div`
 
   :focus {
     outline: 1px solid var(--colorsSemanticFocus500);
+    border-radius: var(--borderRadius025);
   }
 `;
 exports.StyledSort = StyledSort;

package/lib/components/icon-button/icon-button.style.js

@@ -30,6 +30,7 @@ const StyledIconButton = _styledComponents.default.button.attrs({
     }
     background: transparent;
     border: none;
+    border-radius: var(--borderRadius050);
 
     &:focus {
       background-color: transparent;

package/lib/components/inline-inputs/inline-inputs.style.js

@@ -58,6 +58,24 @@ const StyledContentContainer = _styledComponents.default.div`
         ${StyledInlineInput} + ${StyledInlineInput} ${_inputPresentation.default} {
           border-left: none;
         }
+
+        ${StyledInlineInput}:not(:first-of-type):not(:last-of-type) ${_inputPresentation.default} {
+          border-radius: var(--borderRadius000);
+        }
+
+        ${StyledInlineInput}:first-of-type:not(:last-of-type) ${_inputPresentation.default} {
+          border-top-right-radius: var(--borderRadius000);
+          border-bottom-right-radius: var(--borderRadius000);
+          border-top-left-radius: var(--borderRadius050);
+          border-bottom-left-radius: var(--borderRadius050);
+        }
+
+        ${StyledInlineInput}:last-of-type:not(:first-of-type) ${_inputPresentation.default} {
+          border-top-left-radius: var(--borderRadius000);
+          border-bottom-left-radius: var(--borderRadius000);
+          border-top-right-radius: var(--borderRadius050);
+          border-bottom-right-radius: var(--borderRadius050);
+        }
       `}
     `}
 `;

package/lib/components/link/link.style.js

@@ -125,6 +125,7 @@ const StyledLink = _styledComponents.default.span`
 
             &:focus {
               background-color: var(--colorsSemanticFocus250);
+              border-radius: var(--borderRadius050);
             }
           `}
 

package/lib/components/link-preview/__internal__/placeholder.component.d.ts

@@ -1,2 +1,4 @@
+/// <reference types="react" />
+export declare const StyledPlaceHolder: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const Placeholder: () => JSX.Element;
 export default Placeholder;
-declare function Placeholder(): JSX.Element;

package/lib/components/link-preview/__internal__/placeholder.component.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.StyledPlaceHolder = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,7 +19,10 @@ const StyledPlaceHolder = _styledComponents.default.div`
   height: 152px;
   min-width: 152px;
   background-color: var(--colorsUtilityMajor025);
+  border-bottom-left-radius: var(--borderRadius100);
+  border-top-left-radius: var(--borderRadius100);
 `;
+exports.StyledPlaceHolder = StyledPlaceHolder;
 const Circle = _styledComponents.default.div`
   height: 22px;
   width: 22px;

package/lib/components/link-preview/link-preview.style.js

@@ -25,6 +25,7 @@ const StyledLinkPreview = _styledComponents.default.a`
   as
 }) => (0, _styledComponents.css)`
     border: 1px solid var(--colorsUtilityMajor050);
+    border-radius: var(--borderRadius100);
     background-color: var(--colorsUtilityMajor025);
     color: var(--colorsUtilityYin090);
 

package/lib/components/loader/loader-square.style.js

@@ -25,27 +25,32 @@ const loaderAnimation = (0, _styledComponents.keyframes)`
 const getDimentions = size => {
   let width;
   let marginRight;
+  let borderRadius;
 
   switch (size) {
     case "medium":
       width = "16px";
       marginRight = "8px";
+      borderRadius = "var(--borderRadiusCircle)";
       break;
 
     case "large":
       width = "20px";
       marginRight = "8px";
+      borderRadius = "var(--borderRadiusCircle)";
       break;
 
     default:
       width = "12px";
       marginRight = "6px";
+      borderRadius = "var(--borderRadiusCircle)";
   }
 
   return (0, _styledComponents.css)`
     width: ${width};
     height: ${width};
     margin-right: ${marginRight};
+    border-radius: ${borderRadius};
   `;
 };
 

package/lib/components/loader-bar/loader-bar.style.js

@@ -49,6 +49,7 @@ const StyledLoaderBar = _styledComponents.default.div`
   size
 }) => (0, _styledComponents.css)`
     display: inline-block;
+    border-radius: var(--borderRadius400);
     height: ${getHeight(size)};
     width: 100%;
     background-color: var(--colorsActionMajor150);

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

@@ -80,6 +80,19 @@ const StyledSubmenu = _styledComponents.default.ul`
       }
     `}
 
+    ${!inFullscreenView && (0, _styledComponents.css)`
+      border-bottom-right-radius: var(--borderRadius100);
+      border-bottom-left-radius: var(--borderRadius100);
+
+      ${_menu.StyledMenuItem}:last-child a,
+      ${_menu.StyledMenuItem}:last-child button,
+      ${_menu.StyledMenuItem}:last-child > span,
+      ${_menu.StyledMenuItem}:last-child > div {
+        border-bottom-left-radius: var(--borderRadius100);
+        border-bottom-right-radius: var(--borderRadius100);
+      }
+    `}
+
     display: block;
     list-style: none;
     margin: 0;

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

@@ -58,6 +58,24 @@ const MenuFullscreen = ({
     if (_events.default.isEscKey(ev)) {
       onClose(ev);
     }
+
+    if (_events.default.isTabKey(ev) && !_events.default.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.default.createElement("li", {

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

@@ -135,7 +135,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.default.isTabKey(event) && (!_events.default.isShiftKey(event) && shouldFocusIcon || _events.default.isShiftKey(event) && document.activeElement === inputIcon.current)) {
       return;

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

@@ -321,18 +321,20 @@ const StyledMenuItemWrapper = _styledComponents.default.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/lib/components/menu/menu.style.js

@@ -38,12 +38,16 @@ const StyledMenuWrapper = _styledComponents.default.ul`
         display: inline-block;
         vertical-align: bottom;
         background-color: ${_menu.default[menuType].background};
-
         ${menuType === "dark" && (0, _styledComponents.css)`
-          color: ${_menu.default[menuType].color};
+          display: inline-block;
+          vertical-align: bottom;
+          background-color: ${_menu.default[menuType].background};
+
+          ${menuType === "dark" && (0, _styledComponents.css)`
+            color: ${_menu.default[menuType].color};
+          `}
         `}
       `}
-
     ${_verticalDivider.StyledDivider} {
       position: relative;
       top: -1px;
@@ -54,7 +58,11 @@ exports.StyledMenuWrapper = StyledMenuWrapper;
 const StyledMenuItem = _styledComponents.default.li`
   ${_styledSystem.layout}
   ${_styledSystem.flexbox}
-  
+
+  ${_link.StyledLink} a:focus, ${_link.StyledLink} button:focus {
+    border-radius: var(--borderRadius000);
+  }
+
   ${({
   inSubmenu
 }) => (0, _styledComponents.css)`
@@ -62,8 +70,7 @@ const StyledMenuItem = _styledComponents.default.li`
       display: list-item;
     `}
   `}
-
-    ${({
+  ${({
   inFullscreenView
 }) => inFullscreenView && (0, _styledComponents.css)`
       padding-top: 16px;

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

@@ -11,6 +11,12 @@ var _menuItem = _interopRequireDefault(require("../menu-item/menu-item.style"));
 
 var _menu = _interopRequireDefault(require("../menu.config"));
 
+var _box = _interopRequireDefault(require("../../box/box.component"));
+
+var _menu2 = require("../menu.style");
+
+var _link = require("../../link/link.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; }
@@ -25,6 +31,18 @@ const StyledScrollableBlock = _styledComponents.default.li`
     && ${_menuItem.default} {
       background-color: ${variant === "default" ? _menu.default[menuType].submenuItemBackground : _menu.default[menuType].alternate};
     }
+
+    ${_box.default} {
+      border-radius: var(--borderRadius000);
+      border-bottom-left-radius: var(--borderRadius100);
+
+      ${_menu2.StyledMenuItem}:last-child ${_link.StyledLink},
+      ${_menu2.StyledMenuItem}:last-child a,
+      ${_menu2.StyledMenuItem}:last-child button {
+        border-bottom-left-radius: var(--borderRadius100);
+        border-bottom-right-radius: var(--borderRadius000);
+      }
+    }
   `}
 `;
 var _default = StyledScrollableBlock;

package/lib/components/message/message.style.js

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

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

@@ -17,6 +17,8 @@ var _icon = _interopRequireDefault(require("../icon/icon.style"));
 
 var _width = _interopRequireDefault(require("../../style/utils/width"));
 
+var _splitButtonChildren = require("../split-button/split-button-children.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; }
@@ -91,12 +93,15 @@ const StyledButtonChildrenContainer = _styledComponents.default.div`
     white-space: nowrap;
     z-index: ${theme.zIndex.popover};
     box-shadow: var(--boxShadow100);
+    border-radius: var(--borderRadius100);
 
     ${_icon.default} {
       margin-left: 0;
       left: 8px;
     }
 
+    ${_splitButtonChildren.borderRadiusStyling}
+
     ${_button.default} {
       border: 1px solid var(--colorsActionMajorTransparent);
       display: flex;

package/lib/components/note/note.style.js

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

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

@@ -227,6 +227,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;
@@ -261,6 +262,7 @@ const NumeralDate = ({
     }, /*#__PURE__*/_react.default.createElement(_numeralDate.StyledDateField, {
       key: datePart,
       isYearInput: datePart.length === 4,
+      isStart: isStart,
       isMiddle: isMiddle,
       isEnd: isEnd,
       hasValidationIcon: hasValidationIcon

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

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

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

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

package/lib/components/pager/pager.style.js

@@ -51,6 +51,8 @@ const StyledPagerContainer = _styledComponents.default.div`
 }) => (0, _styledComponents.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)"};
     `}