carbon-react 118.1.0 → 118.2.0

package/esm/components/select/utils/get-next-child-by-text.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+/**
+ * Recreates HTML Select element functionality of finding first match based on typed characters
+ * */
+export default function getNextChildByText(textToMatch: string, arrayOfChildren: React.ReactElement[], previousIndex?: number): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/esm/components/select/utils/get-next-child-by-text.js

@@ -1,17 +1,9 @@
-/**
- * Recreates HTML Select element functionality of finding first match based on typed characters
- * */
-export default function getNextChildByText(textToMatch, arrayOfChildren, previousIndex = -1) {
-  const lastCharacter = textToMatch.slice(-1);
-  const isTheSameCharacter = textToMatch.split("").every(character => character === lastCharacter);
-  let indexOfMatch = findElementStartingWithText(textToMatch, arrayOfChildren);
-  const listOfMatches = getListOfMatches(arrayOfChildren, lastCharacter);
-
-  if (isTheSameCharacter && listOfMatches.length > 1) {
-    indexOfMatch = getIndexOfNextElement(listOfMatches, previousIndex);
-  }
+function findElementStartingWithText(textToMatch, list) {
+  return list.findIndex(child => {
+    var _child$props$text;
 
-  return arrayOfChildren[indexOfMatch];
+    return (_child$props$text = child.props.text) === null || _child$props$text === void 0 ? void 0 : _child$props$text.toLowerCase().startsWith(textToMatch.toLowerCase());
+  });
 }
 
 function getListOfMatches(arrayOfChildren, lastCharacter) {
@@ -33,9 +25,20 @@ function getIndexOfNextElement(listOfMatches, previousIndex) {
 
   return listOfMatches[listOfMatches.indexOf(previousIndex) + 1];
 }
+/**
+ * Recreates HTML Select element functionality of finding first match based on typed characters
+ * */
 
-function findElementStartingWithText(textToMatch, list) {
-  return list.findIndex(child => {
-    return child.props.text && child.props.text.toLowerCase().startsWith(textToMatch.toLowerCase());
-  });
+
+export default function getNextChildByText(textToMatch, arrayOfChildren, previousIndex = -1) {
+  const lastCharacter = textToMatch.slice(-1);
+  const isTheSameCharacter = textToMatch.split("").every(character => character === lastCharacter);
+  let indexOfMatch = findElementStartingWithText(textToMatch, arrayOfChildren);
+  const listOfMatches = getListOfMatches(arrayOfChildren, lastCharacter);
+
+  if (isTheSameCharacter && listOfMatches.length > 1) {
+    indexOfMatch = getIndexOfNextElement(listOfMatches, previousIndex);
+  }
+
+  return arrayOfChildren[indexOfMatch];
 }

package/esm/components/select/utils/get-next-index-by-key.d.ts

@@ -0,0 +1,2 @@
+export declare const PAGE_SIZE = 4;
+export default function getNextIndexByKey(key: string, currentIndex: number, lastIndex: number, isLoading?: boolean): number;

package/esm/components/select/utils/highlight-part-of-text.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function highlightPartOfTextRecursive(child: React.ReactNode, partToHighlight: string): React.ReactNode;

package/esm/components/select/utils/highlight-part-of-text.js

@@ -13,10 +13,11 @@ function highlightPartOfText(text, partToHighlight) {
 
   const precedingText = text.substr(0, indexOfFirstMatch);
   const matchingText = text.substr(indexOfFirstMatch, partToHighlight.length);
-  let followingText = text.substr(indexOfFirstMatch + partToHighlight.length, text.length);
+  const followingText = text.substr(indexOfFirstMatch + partToHighlight.length, text.length);
+  let followingTextNode = followingText;
 
   if (followingText.length >= partToHighlight.length) {
-    followingText = highlightPartOfText(followingText, partToHighlight);
+    followingTextNode = highlightPartOfText(followingText, partToHighlight);
   }
 
   const newValue = [/*#__PURE__*/React.createElement("span", {
@@ -25,7 +26,7 @@ function highlightPartOfText(text, partToHighlight) {
     key: "match"
   }, matchingText), /*#__PURE__*/React.createElement("span", {
     key: "following"
-  }, followingText)];
+  }, followingTextNode)];
   return newValue;
 }
 
@@ -33,6 +34,12 @@ export default function highlightPartOfTextRecursive(child, partToHighlight) {
   if (typeof child === "string") {
     return highlightPartOfText(child, partToHighlight);
   }
+  /* istanbul ignore if */
+
+
+  if (! /*#__PURE__*/React.isValidElement(child)) {
+    return child;
+  }
 
   const highlightedChildren = React.Children.map(child.props.children, grandChild => highlightPartOfTextRecursive(grandChild, partToHighlight));
   return /*#__PURE__*/React.cloneElement(child, {

package/esm/components/select/utils/is-expected-option.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function isExpectedOption(element: React.ReactElement, expectedValue?: string | Record<string, unknown> | null): boolean;

package/esm/components/select/utils/is-expected-option.js

@@ -1,4 +1,4 @@
-import Option from "../option/option.component";
+import Option from "../option";
 import OptionRow from "../option-row/option-row.component";
 import isExpectedValue from "./is-expected-value";
 export default function isExpectedOption(element, expectedValue) {

package/esm/components/select/utils/is-expected-value.d.ts

@@ -0,0 +1 @@
+export default function isExpectedValue(currentValue: string | Record<string, unknown>, expectedValue: string | Record<string, unknown>): boolean;

package/esm/components/select/utils/is-expected-value.js

@@ -1,5 +1,5 @@
 export default function isExpectedValue(currentValue, expectedValue) {
-  if (typeof currentValue === "object" && currentValue.id !== null && currentValue.id !== undefined) {
+  if (typeof currentValue === "object" && currentValue.id !== null && currentValue.id !== undefined && typeof expectedValue === "object") {
     return currentValue.id === expectedValue.id;
   }
 

package/esm/components/select/utils/is-navigation-key.d.ts

@@ -0,0 +1 @@
+export default function isNavigationKey(key: string): boolean;

package/esm/components/select/utils/matching-text.style.d.ts

@@ -0,0 +1,2 @@
+declare const MatchingText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export default MatchingText;

package/esm/components/select/utils/with-filter.hoc.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface WrappedComponentProps {
+    filterText?: string;
+    isLoading?: boolean;
+    multiColumn?: boolean;
+    tableHeader?: React.ReactNode;
+    children?: React.ReactNode;
+}
+export interface FilteredComponentProps extends WrappedComponentProps {
+    noResultsMessage?: string;
+}
+/** Filters wrapped component children based on provided filter text and highlights matching content */
+declare const withFilter: <T extends WrappedComponentProps>(WrappedComponent: React.ComponentType<T>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<FilteredComponentProps & T> & React.RefAttributes<HTMLDivElement>>;
+export default withFilter;

package/esm/components/select/utils/with-filter.hoc.js

@@ -1,11 +1,10 @@
 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); }
 
 import React, { useCallback } from "react";
-import PropTypes from "prop-types";
 import useLocale from "../../../hooks/__internal__/useLocale";
 import StyledOptionRow from "../option-row/option-row.style";
 import StyledOption from "../option/option.style";
-import Option from "../option/option.component";
+import Option from "../option";
 import OptionRow from "../option-row/option-row.component";
 import highlightPartOfText from "./highlight-part-of-text";
 
@@ -25,6 +24,11 @@ const filterOptions = (option, filterText) => {
 const filterOptionRows = (optionRow, filterText) => {
   const cells = React.Children.toArray(optionRow.props.children);
   const hasText = cells.find(cell => {
+    /* istanbul ignore if */
+    if (! /*#__PURE__*/React.isValidElement(cell)) {
+      return false;
+    }
+
     if (typeof cell.props.children === "string") {
       const processedText = cell.props.children.toLowerCase();
       const processedValue = filterText.toLowerCase();
@@ -43,24 +47,63 @@ const filterOptionRows = (optionRow, filterText) => {
 };
 
 const filterChildren = filterText => children => {
-  // eslint-disable-next-line consistent-return
   const filteredChildren = React.Children.map(children, child => {
+    /* istanbul ignore if */
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return null;
+    }
+
     if (child.type === Option) {
       return filterOptions(child, filterText);
     }
+    /* istanbul ignore else */
+
 
     if (child.type === OptionRow) {
       return filterOptionRows(child, filterText);
     }
+    /* istanbul ignore next */
+
 
     return null;
   });
   if (React.Children.count(filteredChildren)) return filteredChildren;
   return null;
 };
-/** Filters wrapped component children based on provided filter text and highlights matching content */
 
+function addHighlightedContent(filteredElements, filterText) {
+  return React.Children.map(filteredElements, child => {
+    let highlightedContent;
+    /* istanbul ignore if */
+
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return child;
+    }
+
+    if (child.type === Option) {
+      highlightedContent = highlightPartOfText(child.props.text, filterText);
+    }
+
+    if (child.type === OptionRow) {
+      highlightedContent = React.Children.map(child.props.children, cell => {
+        /* istanbul ignore if */
+        if (! /*#__PURE__*/React.isValidElement(cell)) {
+          return cell;
+        }
+
+        return /*#__PURE__*/React.cloneElement(cell, {
+          children: highlightPartOfText(cell.props.children, filterText)
+        });
+      });
+    }
+
+    return /*#__PURE__*/React.cloneElement(child, {
+      children: highlightedContent
+    });
+  });
+}
 
+/** Filters wrapped component children based on provided filter text and highlights matching content */
 const withFilter = WrappedComponent => {
   const FilteredComponent = /*#__PURE__*/React.forwardRef(({
     children,
@@ -84,7 +127,9 @@ const withFilter = WrappedComponent => {
           if (multiColumn) {
             var _tableHeader$props;
 
-            const colSpan = React.Children.count(tableHeader === null || tableHeader === void 0 ? void 0 : (_tableHeader$props = tableHeader.props) === null || _tableHeader$props === void 0 ? void 0 : _tableHeader$props.children);
+            const colSpan = /*#__PURE__*/React.isValidElement(tableHeader) ?
+            /* istanbul ignore next */
+            React.Children.count(tableHeader === null || tableHeader === void 0 ? void 0 : (_tableHeader$props = tableHeader.props) === null || _tableHeader$props === void 0 ? void 0 : _tableHeader$props.children) : 1;
             return /*#__PURE__*/React.createElement(StyledOptionRow, null, /*#__PURE__*/React.createElement("td", {
               style: {
                 fontWeight: "normal"
@@ -101,45 +146,18 @@ const withFilter = WrappedComponent => {
 
       return children;
     }, [children, filterText, isLoading, multiColumn, noResultsMessage, tableHeader, l]);
-    return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
-      filterText: filterText,
-      isLoading: isLoading,
-      multiColumn: multiColumn,
-      tableHeader: tableHeader
-    }, props, {
+    const wrappedComponentProps = {
+      filterText,
+      isLoading,
+      multiColumn,
+      tableHeader,
+      ...props
+    };
+    return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, wrappedComponentProps, {
       ref: forwardedRef
     }), getFilteredChildren());
   });
-
-  function addHighlightedContent(filteredElements, filterText) {
-    return React.Children.map(filteredElements, child => {
-      let highlightedContent;
-
-      if (child.type === Option) {
-        highlightedContent = highlightPartOfText(child.props.text, filterText);
-      }
-
-      if (child.type === OptionRow) {
-        highlightedContent = React.Children.map(child.props.children, cell => /*#__PURE__*/React.cloneElement(cell, {
-          children: highlightPartOfText(cell.props.children, filterText)
-        }));
-      }
-
-      return /*#__PURE__*/React.cloneElement(child, {
-        children: highlightedContent
-      });
-    });
-  }
-
-  FilteredComponent.propTypes = {
-    forwardedRef: PropTypes.object,
-    children: PropTypes.node,
-    filterText: PropTypes.string,
-    noResultsMessage: PropTypes.string,
-    isLoading: PropTypes.bool,
-    multiColumn: PropTypes.bool,
-    tableHeader: PropTypes.node
-  };
+  FilteredComponent.displayName = "FilteredComponent";
   return FilteredComponent;
 };
 

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;

package/esm/components/tabs/__internal__/tab-title/tab-title.component.js

@@ -190,6 +190,7 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
     href: href,
     target: "_blank"
   }), titleChildren) : /*#__PURE__*/React.createElement(StyledTabTitleButton, _extends({}, titleWrapperProps, {
+    type: "button",
     ref: ref
   }), titleChildren);
   return /*#__PURE__*/React.createElement(TooltipProvider, {

package/esm/components/tabs/__internal__/tab-title/tab-title.style.js

@@ -29,6 +29,17 @@ const StyledTitleContent = styled.span`
       display: flex;
       width: 100%;
       justify-content: ${align === "right" ? "flex-end" : "flex-start"};
+      border-top-left-radius: var(--borderRadius100);
+      border-bottom-left-radius: var(--borderRadius100);
+      border-bottom-right-radius: var(--borderRadius000);
+      border-top-right-radius: var(--borderRadius000);
+    `}
+
+    ${position === "top" && css`
+      border-top-left-radius: var(--borderRadius100);
+      border-top-right-radius: var(--borderRadius100);
+      border-bottom-right-radius: var(--borderRadius000);
+      border-bottom-left-radius: var(--borderRadius000);
     `}
 
     ${hasHref && css`
@@ -89,8 +100,7 @@ const StyledTitleContent = styled.span`
       padding: 10px 16px;
 
       ${borders && `padding-bottom: 9px;`}
-    `}
- 
+    `} 
 
     ${(warning || info) && css`
       outline: 1px solid;
@@ -208,6 +218,8 @@ const StyledTitleContent = styled.span`
 const tabTitleStyles = css`
   background-color: transparent;
   display: inline-block;
+  border-top-left-radius: var(--borderRadius100);
+  border-top-right-radius: var(--borderRadius100);
   font-weight: bold;
   position: relative;
   border: none;
@@ -221,6 +233,14 @@ const tabTitleStyles = css`
   position
 }) => position === "top" && "white-space: nowrap"};
 
+  ${({
+  position
+}) => css`
+    ${position === "left" && css`
+      border-top-right-radius: var(--borderRadius000);
+    `}
+  `}
+
   a:visited {
     color: inherit;
   }

package/esm/components/tabs/__internal__/tabs-header/tabs-header.style.js

@@ -10,6 +10,11 @@ const StyledTabsHeaderWrapper = styled.div`
       box-sizing: border-box;
       padding: 3px;
 
+      button[data-element="select-tab"] {
+        border-top-left-radius: var(--borderRadius100);
+        border-bottom-left-radius: var(--borderRadius100);
+      }
+
       ${!isInSidebar && css`
         min-width: 20%;
       `}

package/esm/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.style.js

@@ -4,6 +4,7 @@ const StyledToolbarButton = styled.button.attrs({
   type: "button"
 })`
   background-color: inherit;
+  border-radius: var(--borderRadius050);
   border: none;
   cursor: pointer;
   width: 32px;
@@ -21,10 +22,12 @@ const StyledToolbarButton = styled.button.attrs({
     :active {
       outline: 2px solid var(--colorsSemanticFocus500);
       outline-offset: -2px;
+      border-radius: var(--borderRadius050);
     }
 
     :hover {
       background-color: var(--colorsActionMinor200);
+      border-radius: var(--borderRadius050);
     }
 
     ${isActive && css`

package/esm/components/text-editor/text-editor.style.js

@@ -10,6 +10,8 @@ StyledEditorWrapper.defaultProps = {
   theme: baseTheme
 };
 const StyledEditorContainer = styled.div`
+  border-radius: var(--borderRadius050);
+
   ${({
   hasError,
   rows,
@@ -60,6 +62,7 @@ const StyledEditorOutline = styled.div`
   isFocused,
   hasError
 }) => css`
+    border-radius: var(--borderRadius050);
     outline: none;
     min-width: 320px;
 

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

@@ -24,6 +24,8 @@ export interface TileProps extends SpaceProps, WidthProps {
     borderWidth?: Extract<DesignTokensType, `borderWidth${string}`>;
     /** Sets the border variant that should be used */
     borderVariant?: "default" | "selected" | "positive" | "negative" | "caution" | "info";
+    /** Sets the level of roundness of the corners, "default" is 8px and "large" is 16px */
+    roundness?: "default" | "large";
 }
-export declare const Tile: ({ variant, p, children, orientation, width, ...props }: TileProps) => JSX.Element;
+export declare const Tile: ({ variant, p, children, orientation, width, roundness, ...props }: TileProps) => JSX.Element;
 export default Tile;

package/esm/components/tile/tile.component.js

@@ -10,6 +10,7 @@ const Tile = ({
   children,
   orientation = "horizontal",
   width,
+  roundness = "default",
   ...props
 }) => {
   const isHorizontal = orientation === "horizontal";
@@ -47,7 +48,8 @@ const Tile = ({
     width: width,
     "data-component": "tile",
     isHorizontal: isHorizontal,
-    p: p
+    p: p,
+    roundness: roundness
   }, props), wrappedChildren);
 };
 

package/esm/components/tile/tile.style.d.ts

@@ -6,7 +6,7 @@ interface TileContentProps {
     width?: string | number;
 }
 declare const TileContent: import("styled-components").StyledComponent<"div", any, TileContentProps, never>;
-declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "variant" | "borderWidth" | "borderVariant"> & {
+declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "variant" | "roundness" | "borderWidth" | "borderVariant"> & {
     isHorizontal?: boolean | undefined;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
 export { StyledTile, TileContent };

package/esm/components/tile/tile.style.js

@@ -85,12 +85,15 @@ const StyledTile = styled.div`
   borderWidth = "borderWidth100",
   isHorizontal,
   variant,
-  width
+  width,
+  roundness
 }) => css`
     ${space}
 
     box-sizing: border-box;
     border: var(--${borderWidth}) solid ${getBorderColor(borderVariant)};
+    border-radius: ${roundness === "default" ? "var(--borderRadius100)" : "var(--borderRadius200)"};
+    overflow: hidden;
 
     ${variant === "tile" && css`
       background-color: var(--colorsUtilityYang100);

package/esm/components/tile-select/tile-select.style.d.ts

@@ -8,6 +8,7 @@ declare const StyledDescription: import("styled-components").StyledComponent<"p"
 declare const StyledTileSelect: import("styled-components").StyledComponent<"div", any, {
     checked?: boolean | undefined;
     disabled?: boolean | undefined;
+    hasAccordion?: boolean | undefined;
 }, never>;
 declare const StyledFocusWrapper: import("styled-components").StyledComponent<"div", any, {
     checked?: boolean | undefined;

package/esm/components/tile-select/tile-select.style.js

@@ -35,6 +35,7 @@ const StyledDescription = styled.p`
 const StyledTileSelect = styled.div`
   background: var(--colorsActionMinorYang100);
   padding: 24px;
+
   ${({
   checked
 }) => checked && css`
@@ -60,6 +61,9 @@ const StyledFocusWrapper = styled.div`
 }) => css`
     position: relative;
     border: 1px solid var(--colorsActionMinor250);
+    border-radius: var(--borderRadius100);
+    overflow: hidden;
+
     ${checked && css`
       border-color: var(--colorsActionMajor500);
       z-index: 10;
@@ -76,6 +80,7 @@ const StyledTileSelectContainer = styled.div`
 
   width: 100%;
   position: relative;
+
   & + & ${StyledFocusWrapper} {
     margin-top: -1px;
   }
@@ -99,6 +104,9 @@ const StyledAccordionFooterWrapper = styled.div`
   z-index: 200;
   left: -12px;
 
+  border-bottom-right-radius: var(--borderRadius100);
+  border-bottom-left-radius: var(--borderRadius100);
+
   ${({
   accordionExpanded
 }) => `

package/esm/components/tooltip/tooltip.style.js

@@ -28,6 +28,7 @@ const StyledTooltip = styled.div`
     right: auto;
     max-width: 300px;
     width: max-content;
+    border-radius: var(--borderRadius050);
     position: absolute;
     animation: ${fadeIn} 0.2s linear;
     z-index: ${theme.zIndex.popover}; // TODO (tokens): implement elevation tokens - FE-4437

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

@@ -41,6 +41,7 @@ export const StyledVerticalMenuItem = styled.div`
 }) => active && css`
       &:before {
         background: var(--colorsComponentsLeftnavWinterStandardSelected);
+        border-radius: var(--borderRadius100);
         content: "";
         height: calc(100% - 16px);
         left: 24px;

package/lib/__internal__/filter-object-properties/filter-object-properties.d.ts

@@ -1 +1 @@
-export default function filterObjectProperties(originalObject: any, keyList: any): {};
+export default function filterObjectProperties<T extends object>(originalObject: T, keyList: string[]): Partial<T>;