carbon-react 126.3.0 → 126.4.0

package/esm/__internal__/popover/popover.component.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MutableRefObject } from "react";
 import { Placement, Middleware } from "@floating-ui/dom";
 declare type CustomRefObject<T> = {
     current?: T | null;
@@ -13,6 +13,7 @@ export interface PopoverProps {
     isOpen?: boolean;
     animationFrame?: boolean;
     popoverStrategy?: "absolute" | "fixed";
+    childRefOverride?: MutableRefObject<HTMLDivElement | null>;
 }
-declare const Popover: ({ children, placement, disablePortal, reference, middleware, disableBackgroundUI, isOpen, animationFrame, popoverStrategy, }: PopoverProps) => React.JSX.Element;
+declare const Popover: ({ children, placement, disablePortal, reference, middleware, disableBackgroundUI, isOpen, animationFrame, popoverStrategy, childRefOverride, }: PopoverProps) => React.JSX.Element;
 export default Popover;

package/esm/__internal__/popover/popover.component.js

@@ -18,7 +18,8 @@ const Popover = ({
   disableBackgroundUI,
   isOpen = true,
   animationFrame,
-  popoverStrategy = "absolute"
+  popoverStrategy = "absolute",
+  childRefOverride
 }) => {
   const elementDOM = useRef(null);
   const {
@@ -30,7 +31,7 @@ const Popover = ({
     elementDOM.current = document.createElement("div");
     mountNode.appendChild(elementDOM.current);
   }
-  const childRef = React.Children.only(children).ref;
+  const childRef = childRefOverride || React.Children.only(children).ref;
   const innerRef = useRef(null);
   const floatingReference = childRef || innerRef;
   let content;

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

@@ -13,6 +13,7 @@ import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener"
 import Events from "../../__internal__/utils/helpers/events";
 import FocusTrap from "../../__internal__/focus-trap";
 import { ModalContext } from "../modal";
+import useFocusPortalContent from "../../hooks/__internal__/useFocusPortalContent";
 export const renderOpen = ({
   tabIndex,
   onClick,
@@ -22,18 +23,20 @@ export const renderOpen = ({
   id,
   "aria-expanded": ariaExpanded,
   "aria-haspopup": ariaHasPopup
-}) => /*#__PURE__*/React.createElement(PopoverContainerOpenIcon, {
-  tabIndex: tabIndex,
-  onClick: onClick,
-  "data-element": dataElement,
-  ref: ref,
-  "aria-label": ariaLabel,
-  "aria-haspopup": ariaHasPopup,
-  "aria-expanded": ariaExpanded,
-  id: id
-}, /*#__PURE__*/React.createElement(Icon, {
-  type: "settings"
-}));
+}) => {
+  return /*#__PURE__*/React.createElement(PopoverContainerOpenIcon, {
+    tabIndex: tabIndex,
+    onClick: onClick,
+    "data-element": dataElement,
+    ref: ref,
+    "aria-label": ariaLabel,
+    "aria-haspopup": ariaHasPopup,
+    "aria-expanded": ariaExpanded,
+    id: id
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "settings"
+  }));
+};
 export const renderClose = ({
   "data-element": dataElement,
   tabIndex,
@@ -84,8 +87,12 @@ export const PopoverContainer = ({
   const isOpen = isControlled ? open : isOpenInternal;
   const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
   const closePopover = useCallback(ev => {
-    if (!isControlled) setIsOpenInternal(false);
-    if (onClose) onClose(ev);
+    if (!isControlled) {
+      setIsOpenInternal(false);
+    }
+    if (onClose) {
+      onClose(ev);
+    }
     if (isOpen && openButtonRef.current) {
       openButtonRef.current.focus();
     }
@@ -115,6 +122,7 @@ export const PopoverContainer = ({
   const handleCloseButtonClick = e => {
     closePopover(e);
   };
+  useFocusPortalContent(shouldCoverButton ? undefined : popoverContentNodeRef, shouldCoverButton ? undefined : openButtonRef, closePopover);
   const renderOpenComponentProps = {
     tabIndex: 0,
     "aria-expanded": isOpen,
@@ -139,25 +147,7 @@ export const PopoverContainer = ({
   };
   const handleClick = useClickAwayListener(handleClickAway, "mousedown");
   const [isAnimationComplete, setIsAnimationComplete] = useState(false);
-  const popover = /*#__PURE__*/React.createElement(Transition, {
-    in: isOpen,
-    timeout: {
-      exit: 300
-    },
-    appear: true,
-    mountOnEnter: true,
-    unmountOnExit: true,
-    nodeRef: popoverContentNodeRef,
-    onEntered: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(true) : undefined,
-    onExiting: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(false) : undefined
-  }, state => isOpen && /*#__PURE__*/React.createElement(Popover, _extends({
-    disablePortal: true,
-    reference: popoverReference,
-    placement: position === "right" ? "bottom-start" : "bottom-end",
-    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute"
-  }, shouldCoverButton && {
-    middleware: popoverMiddleware
-  }), /*#__PURE__*/React.createElement(PopoverContainerContentStyle, _extends({
+  const popover = state => /*#__PURE__*/React.createElement(PopoverContainerContentStyle, _extends({
     "data-element": "popover-container-content",
     role: "dialog",
     animationState: state,
@@ -171,19 +161,39 @@ export const PopoverContainer = ({
   }, filterStyledSystemPaddingProps(rest)), /*#__PURE__*/React.createElement(PopoverContainerHeaderStyle, null, /*#__PURE__*/React.createElement(PopoverContainerTitleStyle, {
     id: popoverContainerId,
     "data-element": "popover-container-title"
-  }, title), renderCloseComponent(renderCloseComponentProps)), children)));
-  return /*#__PURE__*/React.createElement(PopoverContainerWrapperStyle, {
-    "data-component": "popover-container",
-    onMouseDown: handleClick
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: popoverReference
-  }, renderOpenComponent(renderOpenComponentProps)), shouldCoverButton ? /*#__PURE__*/React.createElement(ModalContext.Provider, {
+  }, title), renderCloseComponent(renderCloseComponentProps)), children);
+  const childrenToRender = state => shouldCoverButton ? /*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: {
       isAnimationComplete
     }
   }, /*#__PURE__*/React.createElement(FocusTrap, {
     wrapperRef: popoverContentNodeRef,
     isOpen: isOpen
-  }, popover)) : popover);
+  }, popover(state))) : popover(state);
+  return /*#__PURE__*/React.createElement(PopoverContainerWrapperStyle, {
+    "data-component": "popover-container",
+    onMouseDown: handleClick
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: popoverReference
+  }, renderOpenComponent(renderOpenComponentProps)), /*#__PURE__*/React.createElement(Transition, {
+    in: isOpen,
+    timeout: {
+      exit: 300
+    },
+    appear: true,
+    mountOnEnter: true,
+    unmountOnExit: true,
+    nodeRef: popoverContentNodeRef,
+    onEntered: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(true) : undefined,
+    onExiting: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(false) : undefined
+  }, state => isOpen && /*#__PURE__*/React.createElement(Popover, _extends({
+    reference: popoverReference,
+    placement: position === "right" ? "bottom-start" : "bottom-end",
+    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute"
+  }, shouldCoverButton && {
+    middleware: popoverMiddleware
+  }, {
+    childRefOverride: popoverContentNodeRef
+  }), childrenToRender(state))));
 };
 export default PopoverContainer;

package/esm/components/step-sequence/step-sequence.component.js

@@ -1,15 +1,21 @@
 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 from "react";
 import PropTypes from "prop-types";
+import Logger from "../../__internal__/utils/logger";
 import StyledStepSequence from "./step-sequence.style";
 export const StepSequenceContext = /*#__PURE__*/React.createContext({
   orientation: "horizontal"
 });
+let deprecateWarnTriggered = false;
 export const StepSequence = ({
   children,
   orientation = "horizontal",
   ...props
 }) => {
+  if (!deprecateWarnTriggered) {
+    deprecateWarnTriggered = true;
+    Logger.deprecate("The `StepSequence` component is deprecated and will soon be removed," + " please use the `StepFlow` component instead.");
+  }
   return /*#__PURE__*/React.createElement(StyledStepSequence, _extends({
     "data-component": "step-sequence",
     orientation: orientation,

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

@@ -4,6 +4,8 @@ export { default as TileContent } from "./tile-content";
 export type { TileContentProps } from "./tile-content";
 export { default as TileFooter } from "./tile-footer";
 export type { TileFooterProps } from "./tile-footer";
+export { default as TileHeader } from "./tile-header";
+export type { TileHeaderProps } from "./tile-header";
 export { default as FlexTileContainer } from "./flex-tile-container";
 export type { FlexTileContainerProps } from "./flex-tile-container";
 export { default as FlexTileCell } from "./flex-tile-cell";

package/esm/components/tile/index.js

@@ -1,6 +1,7 @@
 export { default as Tile } from "./tile.component";
 export { default as TileContent } from "./tile-content";
 export { default as TileFooter } from "./tile-footer";
+export { default as TileHeader } from "./tile-header";
 export { default as FlexTileContainer } from "./flex-tile-container";
 export { default as FlexTileCell } from "./flex-tile-cell";
 export { default as FlexTileDivider } from "./flex-tile-divider";

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

@@ -4,7 +4,7 @@ import { TagProps } from "../../../__internal__/utils/helpers/tags";
 export interface TileFooterProps extends PaddingProps, TagProps {
     children?: React.ReactNode;
     /** set which background color variant should be used */
-    variant?: "default" | "black" | "transparent";
+    variant?: "default" | "black" | "transparent" | "grey";
 }
 export declare const TileFooter: ({ variant, children, ...rest }: TileFooterProps) => React.JSX.Element;
 export default TileFooter;

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

@@ -7,18 +7,23 @@ const getBackgroundColor = variant => {
       return "transparent";
     case "black":
       return "var(--colorsUtilityYin100)";
+    case "grey":
+      return "var(--colorsUtilityMajor025)";
     default:
       return "var(--colorsUtilityMajor100)";
   }
 };
 const StyledTileFooter = styled.div`
   ${padding}
+  border-bottom-left-radius: calc(var(--tileBorderRadius) - 1px);
+  border-bottom-right-radius: calc(var(--tileBorderRadius) - 1px);
 
   ${({
   variant
 }) => css`
     background: ${getBackgroundColor(variant)};
-    border-top: 1px solid var(--colorsUtilityMajor100);
+    border-top: 1px solid
+      ${variant === "grey" ? "var(--colorsUtilityMajor200)" : "var(--colorsUtilityMajor100)"};
   `}
 `;
 StyledTileFooter.defaultProps = {

package/esm/components/tile/tile-header/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./tile-header.component";
+export type { TileHeaderProps } from "./tile-header.component";

package/esm/components/tile/tile-header/index.js

@@ -0,0 +1 @@
+export { default } from "./tile-header.component";

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface TileHeaderProps extends PaddingProps, TagProps {
+    children?: React.ReactNode;
+    /** set which background color variant should be used */
+    variant?: "default" | "black" | "transparent" | "grey";
+}
+export declare const TileHeader: ({ variant, children, ...rest }: TileHeaderProps) => React.JSX.Element;
+export default TileHeader;

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

@@ -0,0 +1,14 @@
+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 from "react";
+import PropTypes from "prop-types";
+import StyledTileHeader from "./tile-header.style";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
+import filterStyledSystemPaddingProps from "../../../style/utils/filter-styled-system-padding-props";
+export const TileHeader = ({
+  variant,
+  children,
+  ...rest
+}) => /*#__PURE__*/React.createElement(StyledTileHeader, _extends({
+  variant: variant
+}, filterStyledSystemPaddingProps(rest), tagComponent("tile-header", rest)), children);
+export default TileHeader;

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

@@ -0,0 +1,5 @@
+import { TileHeaderProps } from "./tile-header.component";
+declare const StyledTileHeader: import("styled-components").StyledComponent<"div", any, {
+    variant: TileHeaderProps["variant"];
+}, never>;
+export default StyledTileHeader;

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

@@ -0,0 +1,32 @@
+import styled, { css } from "styled-components";
+import { padding } from "styled-system";
+import { baseTheme } from "../../../style/themes";
+const getBackgroundColor = variant => {
+  switch (variant) {
+    case "transparent":
+      return "transparent";
+    case "black":
+      return "var(--colorsUtilityYin100)";
+    case "grey":
+      return "var(--colorsUtilityMajor025)";
+    default:
+      return "var(--colorsUtilityMajor100)";
+  }
+};
+const StyledTileHeader = styled.div`
+  ${padding}
+  border-top-left-radius: calc(var(--tileBorderRadius) - 1px);
+  border-top-right-radius: calc(var(--tileBorderRadius) - 1px);
+
+  ${({
+  variant
+}) => css`
+    background: ${getBackgroundColor(variant)};
+    border-bottom: 1px solid
+      ${variant === "grey" ? "var(--colorsUtilityMajor200)" : "var(--colorsUtilityMajor100)"};
+  `}
+`;
+StyledTileHeader.defaultProps = {
+  theme: baseTheme
+};
+export default StyledTileHeader;

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

@@ -4,8 +4,8 @@ import { SpaceProps, WidthProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 declare type DesignTokensType = keyof typeof DesignTokens;
 export interface TileProps extends SpaceProps, WidthProps, TagProps {
-    /** Sets the theme of the tile - either 'tile', 'transparent' or 'active' */
-    variant?: "tile" | "transparent" | "active";
+    /** Sets the theme of the tile */
+    variant?: "tile" | "transparent" | "active" | "grey";
     /**
      * The content to render within the tile. Each child will be wrapped with
      * a TileContent wrapper, which allows any individual child component to take a
@@ -25,8 +25,8 @@ export interface TileProps extends SpaceProps, WidthProps, TagProps {
     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";
+    /** Sets the level of roundness of the corners, "default" is 8px, "large" is 16px and "small" is 4px */
+    roundness?: "default" | "large" | "small";
     /**
      * Set a percentage-based height for the whole Tile component, relative to its parent.
      */

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

@@ -18,6 +18,16 @@ const getBorderColor = borderVariant => {
       return "var(--colorsUtilityMajor100)";
   }
 };
+const getBorderRadius = roundness => {
+  switch (roundness) {
+    case "large":
+      return "var(--borderRadius200)";
+    case "small":
+      return "var(--borderRadius050)";
+    default:
+      return "var(--borderRadius100)";
+  }
+};
 const StyledTile = styled.div`
   ${({
   borderVariant,
@@ -32,8 +42,18 @@ const StyledTile = styled.div`
 
     box-sizing: border-box;
     border: var(--${borderWidth}) solid ${getBorderColor(borderVariant)};
-    border-radius: ${roundness === "default" ? "var(--borderRadius100)" : "var(--borderRadius200)"};
-    overflow: hidden;
+    border-radius: ${getBorderRadius(roundness)};
+    --tileBorderRadius: ${getBorderRadius(roundness)};
+
+    > *:first-child {
+      border-top-left-radius: calc(${getBorderRadius(roundness)} - 1px);
+      border-top-right-radius: calc(${getBorderRadius(roundness)} - 1px);
+    }
+
+    > *:last-child {
+      border-bottom-left-radius: calc(${getBorderRadius(roundness)} - 1px);
+      border-bottom-right-radius: calc(${getBorderRadius(roundness)} - 1px);
+    }
 
     ${variant === "tile" && css`
       background-color: var(--colorsUtilityYang100);
@@ -48,6 +68,11 @@ const StyledTile = styled.div`
       border-color: var(--colorsActionMajor500);
     `}
 
+    ${variant === "grey" && css`
+      background-color: var(--colorsUtilityMajor025);
+      border-color: var(--colorsUtilityMajor200);
+    `}
+
     display: flex;
     flex-direction: ${isHorizontal ? "row" : "column"};
     position: relative;

package/esm/hooks/__internal__/useFocusPortalContent/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useFocusPortalContent";

package/esm/hooks/__internal__/useFocusPortalContent/index.js

@@ -0,0 +1 @@
+export { default } from "./useFocusPortalContent";

package/esm/hooks/__internal__/useFocusPortalContent/useFocusPortalContent.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from "react";
+declare const _default: (container?: RefObject<HTMLElement>, target?: RefObject<HTMLElement>, focusCallback?: ((ev: KeyboardEvent) => void) | undefined) => void;
+export default _default;

package/esm/hooks/__internal__/useFocusPortalContent/useFocusPortalContent.js

@@ -0,0 +1,52 @@
+import { useEffect } from "react";
+import Events from "../../../__internal__/utils/helpers/events";
+import { defaultFocusableSelectors } from "../../../__internal__/focus-trap/focus-trap-utils";
+export default ((container, target, focusCallback) => {
+  useEffect(() => {
+    const handleFocusPortalContent = ev => {
+      if (container?.current && target?.current) {
+        const focusableElementsInContainer = Array.from(container.current?.querySelectorAll(defaultFocusableSelectors) || /* istanbul ignore next */[]);
+        if (target?.current === document.activeElement) {
+          if (Events.isTabKey(ev) && !Events.isShiftKey(ev) && focusableElementsInContainer[0]) {
+            ev.preventDefault();
+            focusableElementsInContainer[0]?.focus();
+          }
+          return;
+        }
+
+        /* istanbul ignore if */
+        if (!focusableElementsInContainer.length) {
+          return;
+        }
+        const lastElementFocused = focusableElementsInContainer[focusableElementsInContainer.length - 1] === document.activeElement;
+        const firstElementFocused = focusableElementsInContainer[0] === document.activeElement;
+        if (Events.isTabKey(ev)) {
+          // last element focused inside portal navigate to next element in DOM after the target/ trigger element
+          if (lastElementFocused && !Events.isShiftKey(ev)) {
+            ev.preventDefault();
+            const allFocusableElements = Array.from(document.querySelectorAll(defaultFocusableSelectors) || /* istanbul ignore next */[]);
+            const filteredElements = allFocusableElements.filter(el => el === target.current || Number(el.tabIndex) !== -1);
+            const nextIndex = filteredElements.indexOf(target.current) + 1;
+            focusCallback?.(ev);
+            filteredElements[nextIndex]?.focus();
+            return;
+          }
+          // first element focused inside portal navigate back to the target/ trigger element
+          if (firstElementFocused && Events.isShiftKey(ev)) {
+            ev.preventDefault();
+            focusCallback?.(ev);
+
+            /* istanbul ignore else */
+            if (target.current !== document.activeElement) {
+              target.current?.focus();
+            }
+          }
+        }
+      }
+    };
+    document.addEventListener("keydown", handleFocusPortalContent);
+    return () => {
+      document.removeEventListener("keydown", handleFocusPortalContent);
+    };
+  }, [target, container, focusCallback]);
+});

package/lib/__internal__/popover/popover.component.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MutableRefObject } from "react";
 import { Placement, Middleware } from "@floating-ui/dom";
 declare type CustomRefObject<T> = {
     current?: T | null;
@@ -13,6 +13,7 @@ export interface PopoverProps {
     isOpen?: boolean;
     animationFrame?: boolean;
     popoverStrategy?: "absolute" | "fixed";
+    childRefOverride?: MutableRefObject<HTMLDivElement | null>;
 }
-declare const Popover: ({ children, placement, disablePortal, reference, middleware, disableBackgroundUI, isOpen, animationFrame, popoverStrategy, }: PopoverProps) => React.JSX.Element;
+declare const Popover: ({ children, placement, disablePortal, reference, middleware, disableBackgroundUI, isOpen, animationFrame, popoverStrategy, childRefOverride, }: PopoverProps) => React.JSX.Element;
 export default Popover;

package/lib/__internal__/popover/popover.component.js

@@ -27,7 +27,8 @@ const Popover = ({
   disableBackgroundUI,
   isOpen = true,
   animationFrame,
-  popoverStrategy = "absolute"
+  popoverStrategy = "absolute",
+  childRefOverride
 }) => {
   const elementDOM = (0, _react.useRef)(null);
   const {
@@ -39,7 +40,7 @@ const Popover = ({
     elementDOM.current = document.createElement("div");
     mountNode.appendChild(elementDOM.current);
   }
-  const childRef = _react.default.Children.only(children).ref;
+  const childRef = childRefOverride || _react.default.Children.only(children).ref;
   const innerRef = (0, _react.useRef)(null);
   const floatingReference = childRef || innerRef;
   let content;

package/lib/components/popover-container/popover-container.component.js

@@ -18,6 +18,7 @@ var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__intern
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 var _focusTrap = _interopRequireDefault(require("../../__internal__/focus-trap"));
 var _modal = require("../modal");
+var _useFocusPortalContent = _interopRequireDefault(require("../../hooks/__internal__/useFocusPortalContent"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -31,18 +32,20 @@ const renderOpen = ({
   id,
   "aria-expanded": ariaExpanded,
   "aria-haspopup": ariaHasPopup
-}) => /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerOpenIcon, {
-  tabIndex: tabIndex,
-  onClick: onClick,
-  "data-element": dataElement,
-  ref: ref,
-  "aria-label": ariaLabel,
-  "aria-haspopup": ariaHasPopup,
-  "aria-expanded": ariaExpanded,
-  id: id
-}, /*#__PURE__*/_react.default.createElement(_icon.default, {
-  type: "settings"
-}));
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerOpenIcon, {
+    tabIndex: tabIndex,
+    onClick: onClick,
+    "data-element": dataElement,
+    ref: ref,
+    "aria-label": ariaLabel,
+    "aria-haspopup": ariaHasPopup,
+    "aria-expanded": ariaExpanded,
+    id: id
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "settings"
+  }));
+};
 exports.renderOpen = renderOpen;
 const renderClose = ({
   "data-element": dataElement,
@@ -95,8 +98,12 @@ const PopoverContainer = ({
   const isOpen = isControlled ? open : isOpenInternal;
   const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
   const closePopover = (0, _react.useCallback)(ev => {
-    if (!isControlled) setIsOpenInternal(false);
-    if (onClose) onClose(ev);
+    if (!isControlled) {
+      setIsOpenInternal(false);
+    }
+    if (onClose) {
+      onClose(ev);
+    }
     if (isOpen && openButtonRef.current) {
       openButtonRef.current.focus();
     }
@@ -126,6 +133,7 @@ const PopoverContainer = ({
   const handleCloseButtonClick = e => {
     closePopover(e);
   };
+  (0, _useFocusPortalContent.default)(shouldCoverButton ? undefined : popoverContentNodeRef, shouldCoverButton ? undefined : openButtonRef, closePopover);
   const renderOpenComponentProps = {
     tabIndex: 0,
     "aria-expanded": isOpen,
@@ -150,25 +158,7 @@ const PopoverContainer = ({
   };
   const handleClick = (0, _useClickAwayListener.default)(handleClickAway, "mousedown");
   const [isAnimationComplete, setIsAnimationComplete] = (0, _react.useState)(false);
-  const popover = /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
-    in: isOpen,
-    timeout: {
-      exit: 300
-    },
-    appear: true,
-    mountOnEnter: true,
-    unmountOnExit: true,
-    nodeRef: popoverContentNodeRef,
-    onEntered: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(true) : undefined,
-    onExiting: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(false) : undefined
-  }, state => isOpen && /*#__PURE__*/_react.default.createElement(_popover.default, _extends({
-    disablePortal: true,
-    reference: popoverReference,
-    placement: position === "right" ? "bottom-start" : "bottom-end",
-    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute"
-  }, shouldCoverButton && {
-    middleware: popoverMiddleware
-  }), /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerContentStyle, _extends({
+  const popover = state => /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerContentStyle, _extends({
     "data-element": "popover-container-content",
     role: "dialog",
     animationState: state,
@@ -182,20 +172,40 @@ const PopoverContainer = ({
   }, (0, _utils.filterStyledSystemPaddingProps)(rest)), /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerHeaderStyle, null, /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerTitleStyle, {
     id: popoverContainerId,
     "data-element": "popover-container-title"
-  }, title), renderCloseComponent(renderCloseComponentProps)), children)));
-  return /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerWrapperStyle, {
-    "data-component": "popover-container",
-    onMouseDown: handleClick
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: popoverReference
-  }, renderOpenComponent(renderOpenComponentProps)), shouldCoverButton ? /*#__PURE__*/_react.default.createElement(_modal.ModalContext.Provider, {
+  }, title), renderCloseComponent(renderCloseComponentProps)), children);
+  const childrenToRender = state => shouldCoverButton ? /*#__PURE__*/_react.default.createElement(_modal.ModalContext.Provider, {
     value: {
       isAnimationComplete
     }
   }, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     wrapperRef: popoverContentNodeRef,
     isOpen: isOpen
-  }, popover)) : popover);
+  }, popover(state))) : popover(state);
+  return /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerWrapperStyle, {
+    "data-component": "popover-container",
+    onMouseDown: handleClick
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: popoverReference
+  }, renderOpenComponent(renderOpenComponentProps)), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
+    in: isOpen,
+    timeout: {
+      exit: 300
+    },
+    appear: true,
+    mountOnEnter: true,
+    unmountOnExit: true,
+    nodeRef: popoverContentNodeRef,
+    onEntered: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(true) : undefined,
+    onExiting: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(false) : undefined
+  }, state => isOpen && /*#__PURE__*/_react.default.createElement(_popover.default, _extends({
+    reference: popoverReference,
+    placement: position === "right" ? "bottom-start" : "bottom-end",
+    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute"
+  }, shouldCoverButton && {
+    middleware: popoverMiddleware
+  }, {
+    childRefOverride: popoverContentNodeRef
+  }), childrenToRender(state))));
 };
 exports.PopoverContainer = PopoverContainer;
 var _default = exports.default = PopoverContainer;

package/lib/components/step-sequence/step-sequence.component.js

@@ -6,17 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.StepSequenceContext = exports.StepSequence = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _stepSequence = _interopRequireDefault(require("./step-sequence.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
 const StepSequenceContext = exports.StepSequenceContext = /*#__PURE__*/_react.default.createContext({
   orientation: "horizontal"
 });
+let deprecateWarnTriggered = false;
 const StepSequence = ({
   children,
   orientation = "horizontal",
   ...props
 }) => {
+  if (!deprecateWarnTriggered) {
+    deprecateWarnTriggered = true;
+    _logger.default.deprecate("The `StepSequence` component is deprecated and will soon be removed," + " please use the `StepFlow` component instead.");
+  }
   return /*#__PURE__*/_react.default.createElement(_stepSequence.default, _extends({
     "data-component": "step-sequence",
     orientation: orientation,

package/lib/components/tile/index.d.ts

@@ -4,6 +4,8 @@ export { default as TileContent } from "./tile-content";
 export type { TileContentProps } from "./tile-content";
 export { default as TileFooter } from "./tile-footer";
 export type { TileFooterProps } from "./tile-footer";
+export { default as TileHeader } from "./tile-header";
+export type { TileHeaderProps } from "./tile-header";
 export { default as FlexTileContainer } from "./flex-tile-container";
 export type { FlexTileContainerProps } from "./flex-tile-container";
 export { default as FlexTileCell } from "./flex-tile-cell";

package/lib/components/tile/index.js

@@ -39,9 +39,16 @@ Object.defineProperty(exports, "TileFooter", {
     return _tileFooter.default;
   }
 });
+Object.defineProperty(exports, "TileHeader", {
+  enumerable: true,
+  get: function () {
+    return _tileHeader.default;
+  }
+});
 var _tile = _interopRequireDefault(require("./tile.component"));
 var _tileContent = _interopRequireDefault(require("./tile-content"));
 var _tileFooter = _interopRequireDefault(require("./tile-footer"));
+var _tileHeader = _interopRequireDefault(require("./tile-header"));
 var _flexTileContainer = _interopRequireDefault(require("./flex-tile-container"));
 var _flexTileCell = _interopRequireDefault(require("./flex-tile-cell"));
 var _flexTileDivider = _interopRequireDefault(require("./flex-tile-divider"));

package/lib/components/tile/tile-footer/tile-footer.component.d.ts

@@ -4,7 +4,7 @@ import { TagProps } from "../../../__internal__/utils/helpers/tags";
 export interface TileFooterProps extends PaddingProps, TagProps {
     children?: React.ReactNode;
     /** set which background color variant should be used */
-    variant?: "default" | "black" | "transparent";
+    variant?: "default" | "black" | "transparent" | "grey";
 }
 export declare const TileFooter: ({ variant, children, ...rest }: TileFooterProps) => React.JSX.Element;
 export default TileFooter;

package/lib/components/tile/tile-footer/tile-footer.style.js

@@ -15,18 +15,23 @@ const getBackgroundColor = variant => {
       return "transparent";
     case "black":
       return "var(--colorsUtilityYin100)";
+    case "grey":
+      return "var(--colorsUtilityMajor025)";
     default:
       return "var(--colorsUtilityMajor100)";
   }
 };
 const StyledTileFooter = _styledComponents.default.div`
   ${_styledSystem.padding}
+  border-bottom-left-radius: calc(var(--tileBorderRadius) - 1px);
+  border-bottom-right-radius: calc(var(--tileBorderRadius) - 1px);
 
   ${({
   variant
 }) => (0, _styledComponents.css)`
     background: ${getBackgroundColor(variant)};
-    border-top: 1px solid var(--colorsUtilityMajor100);
+    border-top: 1px solid
+      ${variant === "grey" ? "var(--colorsUtilityMajor200)" : "var(--colorsUtilityMajor100)"};
   `}
 `;
 StyledTileFooter.defaultProps = {

package/lib/components/tile/tile-header/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./tile-header.component";
+export type { TileHeaderProps } from "./tile-header.component";

package/lib/components/tile/tile-header/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _tileHeader.default;
+  }
+});
+var _tileHeader = _interopRequireDefault(require("./tile-header.component"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/tile/tile-header/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/components/tile/tile-header/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/tile/tile-header/tile-header.component.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface TileHeaderProps extends PaddingProps, TagProps {
+    children?: React.ReactNode;
+    /** set which background color variant should be used */
+    variant?: "default" | "black" | "transparent" | "grey";
+}
+export declare const TileHeader: ({ variant, children, ...rest }: TileHeaderProps) => React.JSX.Element;
+export default TileHeader;

package/lib/components/tile/tile-header/tile-header.component.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TileHeader = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _tileHeader = _interopRequireDefault(require("./tile-header.style"));
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
+var _filterStyledSystemPaddingProps = _interopRequireDefault(require("../../../style/utils/filter-styled-system-padding-props"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+const TileHeader = ({
+  variant,
+  children,
+  ...rest
+}) => /*#__PURE__*/_react.default.createElement(_tileHeader.default, _extends({
+  variant: variant
+}, (0, _filterStyledSystemPaddingProps.default)(rest), (0, _tags.default)("tile-header", rest)), children);
+exports.TileHeader = TileHeader;
+var _default = exports.default = TileHeader;

package/lib/components/tile/tile-header/tile-header.style.d.ts

@@ -0,0 +1,5 @@
+import { TileHeaderProps } from "./tile-header.component";
+declare const StyledTileHeader: import("styled-components").StyledComponent<"div", any, {
+    variant: TileHeaderProps["variant"];
+}, never>;
+export default StyledTileHeader;

package/lib/components/tile/tile-header/tile-header.style.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledSystem = require("styled-system");
+var _themes = require("../../../style/themes");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const getBackgroundColor = variant => {
+  switch (variant) {
+    case "transparent":
+      return "transparent";
+    case "black":
+      return "var(--colorsUtilityYin100)";
+    case "grey":
+      return "var(--colorsUtilityMajor025)";
+    default:
+      return "var(--colorsUtilityMajor100)";
+  }
+};
+const StyledTileHeader = _styledComponents.default.div`
+  ${_styledSystem.padding}
+  border-top-left-radius: calc(var(--tileBorderRadius) - 1px);
+  border-top-right-radius: calc(var(--tileBorderRadius) - 1px);
+
+  ${({
+  variant
+}) => (0, _styledComponents.css)`
+    background: ${getBackgroundColor(variant)};
+    border-bottom: 1px solid
+      ${variant === "grey" ? "var(--colorsUtilityMajor200)" : "var(--colorsUtilityMajor100)"};
+  `}
+`;
+StyledTileHeader.defaultProps = {
+  theme: _themes.baseTheme
+};
+var _default = exports.default = StyledTileHeader;

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

@@ -4,8 +4,8 @@ import { SpaceProps, WidthProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 declare type DesignTokensType = keyof typeof DesignTokens;
 export interface TileProps extends SpaceProps, WidthProps, TagProps {
-    /** Sets the theme of the tile - either 'tile', 'transparent' or 'active' */
-    variant?: "tile" | "transparent" | "active";
+    /** Sets the theme of the tile */
+    variant?: "tile" | "transparent" | "active" | "grey";
     /**
      * The content to render within the tile. Each child will be wrapped with
      * a TileContent wrapper, which allows any individual child component to take a
@@ -25,8 +25,8 @@ export interface TileProps extends SpaceProps, WidthProps, TagProps {
     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";
+    /** Sets the level of roundness of the corners, "default" is 8px, "large" is 16px and "small" is 4px */
+    roundness?: "default" | "large" | "small";
     /**
      * Set a percentage-based height for the whole Tile component, relative to its parent.
      */

package/lib/components/tile/tile.style.js

@@ -27,6 +27,16 @@ const getBorderColor = borderVariant => {
       return "var(--colorsUtilityMajor100)";
   }
 };
+const getBorderRadius = roundness => {
+  switch (roundness) {
+    case "large":
+      return "var(--borderRadius200)";
+    case "small":
+      return "var(--borderRadius050)";
+    default:
+      return "var(--borderRadius100)";
+  }
+};
 const StyledTile = _styledComponents.default.div`
   ${({
   borderVariant,
@@ -41,8 +51,18 @@ const StyledTile = _styledComponents.default.div`
 
     box-sizing: border-box;
     border: var(--${borderWidth}) solid ${getBorderColor(borderVariant)};
-    border-radius: ${roundness === "default" ? "var(--borderRadius100)" : "var(--borderRadius200)"};
-    overflow: hidden;
+    border-radius: ${getBorderRadius(roundness)};
+    --tileBorderRadius: ${getBorderRadius(roundness)};
+
+    > *:first-child {
+      border-top-left-radius: calc(${getBorderRadius(roundness)} - 1px);
+      border-top-right-radius: calc(${getBorderRadius(roundness)} - 1px);
+    }
+
+    > *:last-child {
+      border-bottom-left-radius: calc(${getBorderRadius(roundness)} - 1px);
+      border-bottom-right-radius: calc(${getBorderRadius(roundness)} - 1px);
+    }
 
     ${variant === "tile" && (0, _styledComponents.css)`
       background-color: var(--colorsUtilityYang100);
@@ -57,6 +77,11 @@ const StyledTile = _styledComponents.default.div`
       border-color: var(--colorsActionMajor500);
     `}
 
+    ${variant === "grey" && (0, _styledComponents.css)`
+      background-color: var(--colorsUtilityMajor025);
+      border-color: var(--colorsUtilityMajor200);
+    `}
+
     display: flex;
     flex-direction: ${isHorizontal ? "row" : "column"};
     position: relative;

package/lib/hooks/__internal__/useFocusPortalContent/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useFocusPortalContent";

package/lib/hooks/__internal__/useFocusPortalContent/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useFocusPortalContent.default;
+  }
+});
+var _useFocusPortalContent = _interopRequireDefault(require("./useFocusPortalContent"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/hooks/__internal__/useFocusPortalContent/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/hooks/__internal__/useFocusPortalContent/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/hooks/__internal__/useFocusPortalContent/useFocusPortalContent.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from "react";
+declare const _default: (container?: RefObject<HTMLElement>, target?: RefObject<HTMLElement>, focusCallback?: ((ev: KeyboardEvent) => void) | undefined) => void;
+export default _default;

package/lib/hooks/__internal__/useFocusPortalContent/useFocusPortalContent.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
+var _focusTrapUtils = require("../../../__internal__/focus-trap/focus-trap-utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = (container, target, focusCallback) => {
+  (0, _react.useEffect)(() => {
+    const handleFocusPortalContent = ev => {
+      if (container?.current && target?.current) {
+        const focusableElementsInContainer = Array.from(container.current?.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors) || /* istanbul ignore next */[]);
+        if (target?.current === document.activeElement) {
+          if (_events.default.isTabKey(ev) && !_events.default.isShiftKey(ev) && focusableElementsInContainer[0]) {
+            ev.preventDefault();
+            focusableElementsInContainer[0]?.focus();
+          }
+          return;
+        }
+
+        /* istanbul ignore if */
+        if (!focusableElementsInContainer.length) {
+          return;
+        }
+        const lastElementFocused = focusableElementsInContainer[focusableElementsInContainer.length - 1] === document.activeElement;
+        const firstElementFocused = focusableElementsInContainer[0] === document.activeElement;
+        if (_events.default.isTabKey(ev)) {
+          // last element focused inside portal navigate to next element in DOM after the target/ trigger element
+          if (lastElementFocused && !_events.default.isShiftKey(ev)) {
+            ev.preventDefault();
+            const allFocusableElements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors) || /* istanbul ignore next */[]);
+            const filteredElements = allFocusableElements.filter(el => el === target.current || Number(el.tabIndex) !== -1);
+            const nextIndex = filteredElements.indexOf(target.current) + 1;
+            focusCallback?.(ev);
+            filteredElements[nextIndex]?.focus();
+            return;
+          }
+          // first element focused inside portal navigate back to the target/ trigger element
+          if (firstElementFocused && _events.default.isShiftKey(ev)) {
+            ev.preventDefault();
+            focusCallback?.(ev);
+
+            /* istanbul ignore else */
+            if (target.current !== document.activeElement) {
+              target.current?.focus();
+            }
+          }
+        }
+      }
+    };
+    document.addEventListener("keydown", handleFocusPortalContent);
+    return () => {
+      document.removeEventListener("keydown", handleFocusPortalContent);
+    };
+  }, [target, container, focusCallback]);
+};
+exports.default = _default;

package/package.json

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