carbon-react 146.4.7 → 146.5.0

package/esm/components/popover-container/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./popover-container.component";
-export type { PopoverContainerProps, RenderCloseProps, RenderOpenProps, } from "./popover-container.component";
+export type { PopoverContainerProps, RenderCloseProps, RenderOpenProps, PopoverContainerHandle, } from "./popover-container.component";

package/esm/components/popover-container/popover-container.component.d.ts

@@ -61,6 +61,11 @@ export interface PopoverContainerProps extends PaddingProps {
     containerAriaLabel?: string;
     /** Disables the animation for the component */
     disableAnimation?: boolean;
+    /** Flag to enable fullWidth Button styles */
+    hasFullWidth?: boolean;
 }
-export declare const PopoverContainer: ({ children, title, position, open, onOpen, onClose, renderOpenComponent, renderCloseComponent, shouldCoverButton, ariaDescribedBy, openButtonAriaLabel, closeButtonAriaLabel, containerAriaLabel, closeButtonDataProps, disableAnimation, ...rest }: PopoverContainerProps) => React.JSX.Element;
+export declare type PopoverContainerHandle = {
+    focusButton: () => void;
+} | null;
+export declare const PopoverContainer: React.ForwardRefExoticComponent<PopoverContainerProps & React.RefAttributes<PopoverContainerHandle>>;
 export default PopoverContainer;

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

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useRef, useState, useMemo } from "react";
+import React, { useCallback, useEffect, useRef, useState, useMemo, useImperativeHandle, forwardRef } from "react";
 import PropTypes from "prop-types";
 import { CSSTransition } from "react-transition-group";
 import { flip, offset } from "@floating-ui/dom";
@@ -66,7 +66,7 @@ function usePopoverMiddleware(shouldCoverButton) {
     fallbackStrategy: "initialPlacement"
   })], [shouldCoverButton]);
 }
-export const PopoverContainer = ({
+const PopoverContainer = /*#__PURE__*/forwardRef(({
   children,
   title,
   position = "right",
@@ -82,8 +82,9 @@ export const PopoverContainer = ({
   containerAriaLabel,
   closeButtonDataProps,
   disableAnimation = false,
+  hasFullWidth = false,
   ...rest
-}) => {
+}, ref) => {
   const isControlled = open !== undefined;
   const [isOpenInternal, setIsOpenInternal] = useState(false);
   const closeButtonRef = useRef(null);
@@ -117,6 +118,13 @@ export const PopoverContainer = ({
       document.removeEventListener("keydown", handleEscKey);
     };
   }, [handleEscKey]);
+  useEffect(() => {
+    if (!shouldCoverButton && isOpen) {
+      popoverContentNodeRef.current?.focus({
+        preventScroll: true
+      });
+    }
+  }, [isOpen, shouldCoverButton, popoverContentNodeRef]);
   const handleOpenButtonClick = e => {
     /* istanbul ignore else */
     if (!isControlled) setIsOpenInternal(!isOpen);
@@ -171,6 +179,11 @@ export const PopoverContainer = ({
   };
   const handleClick = useClickAwayListener(handleClickAway, "mousedown");
   const [isAnimationComplete, setIsAnimationComplete] = useState(false);
+  useImperativeHandle(ref, () => ({
+    focusButton() {
+      openButtonRef.current?.focus();
+    }
+  }), []);
   const popover = () => /*#__PURE__*/React.createElement(PopoverContainerContentStyle, _extends({
     "data-element": "popover-container-content",
     role: "dialog",
@@ -179,7 +192,7 @@ export const PopoverContainer = ({
     "aria-describedby": ariaDescribedBy,
     p: "16px 24px",
     ref: popoverContentNodeRef,
-    tabIndex: shouldCoverButton ? -1 : undefined,
+    tabIndex: -1,
     disableAnimation: disableAnimation || reduceMotion
   }, filterStyledSystemPaddingProps(rest)), /*#__PURE__*/React.createElement(PopoverContainerHeaderStyle, null, /*#__PURE__*/React.createElement(PopoverContainerTitleStyle, {
     id: popoverContainerId,
@@ -209,7 +222,9 @@ export const PopoverContainer = ({
   }));
   return /*#__PURE__*/React.createElement(PopoverContainerWrapperStyle, {
     "data-component": "popover-container",
-    onMouseDown: handleClick
+    "data-role": "popover-container",
+    onMouseDown: handleClick,
+    hasFullWidth: hasFullWidth
   }, /*#__PURE__*/React.createElement("div", {
     ref: popoverReference
   }, renderOpenComponent(renderOpenComponentProps)), /*#__PURE__*/React.createElement(CSSTransition, {
@@ -228,5 +243,183 @@ export const PopoverContainer = ({
     middleware: popoverMiddleware,
     childRefOverride: popoverContentNodeRef
   }, childrenToRender())));
-};
+});
+if (process.env.NODE_ENV !== "production") {
+  PopoverContainer.propTypes = {
+    "ariaDescribedBy": PropTypes.string,
+    "children": PropTypes.node,
+    "closeButtonAriaLabel": PropTypes.string,
+    "closeButtonDataProps": PropTypes.shape({
+      "data-element": PropTypes.string,
+      "data-role": PropTypes.string
+    }),
+    "containerAriaLabel": PropTypes.string,
+    "disableAnimation": PropTypes.bool,
+    "hasFullWidth": PropTypes.bool,
+    "onClose": PropTypes.func,
+    "onOpen": PropTypes.func,
+    "open": PropTypes.bool,
+    "openButtonAriaLabel": PropTypes.string,
+    "p": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "padding": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "paddingBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "paddingLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "paddingRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "paddingTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "paddingX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "paddingY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "pb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "pl": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "position": PropTypes.oneOf(["left", "right"]),
+    "pr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "pt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "px": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "py": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+      "__@toStringTag": PropTypes.string.isRequired,
+      "description": PropTypes.string,
+      "toString": PropTypes.func.isRequired,
+      "valueOf": PropTypes.func.isRequired
+    }), PropTypes.string]),
+    "renderCloseComponent": PropTypes.func,
+    "renderOpenComponent": PropTypes.func,
+    "shouldCoverButton": PropTypes.bool,
+    "title": PropTypes.string
+  };
+}
+export { PopoverContainer };
 export default PopoverContainer;

package/esm/components/popover-container/popover-container.style.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 import { TransitionStatus } from "react-transition-group";
-declare const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type PopoverContainerWrapperProps = {
+    hasFullWidth?: boolean;
+};
+declare const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, PopoverContainerWrapperProps, never>;
 declare const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type PopoverContainerContentStyleProps = {
     animationState?: TransitionStatus;

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

@@ -3,10 +3,16 @@ import { padding } from "styled-system";
 import { baseTheme } from "../../style/themes";
 import IconButton from "../icon-button";
 import StyledIcon from "../icon/icon.style";
+import { StyledForm, StyledFormContent, StyledFormFooter } from "../form/form.style";
 const PopoverContainerWrapperStyle = styled.div`
   position: relative;
   display: inline-block;
-  width: 100%;
+
+  ${({
+  hasFullWidth
+}) => hasFullWidth && css`
+      width: 100%;
+    `}
 `;
 const PopoverContainerHeaderStyle = styled.div`
   display: flex;
@@ -60,6 +66,25 @@ const PopoverContainerContentStyle = styled.div`
   :focus {
     outline: none;
   }
+
+  &:has(${StyledForm}.sticky) {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+
+    ${StyledForm}.sticky {
+      ${StyledFormContent} {
+        flex-grow: 1;
+        min-height: 0;
+        overflow-y: auto;
+      }
+
+      ${StyledFormFooter} {
+        border-bottom-right-radius: var(--borderRadius200);
+        border-bottom-left-radius: var(--borderRadius200);
+      }
+    }
+  }
 `;
 const PopoverContainerOpenIcon = styled(IconButton)`
   ${StyledIcon} {

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

@@ -6,20 +6,21 @@ export default (container, target, focusCallback) => {
     const handleFocusPortalContent = ev => {
       if (container?.current && target?.current) {
         const focusableElementsInContainer = Array.from(container.current?.querySelectorAll(defaultFocusableSelectors) || /* istanbul ignore next */[]);
+        const filteredFocusableElements = focusableElementsInContainer.filter(el => Number(el.tabIndex) !== -1);
         if (target?.current === document.activeElement) {
-          if (Events.isTabKey(ev) && !Events.isShiftKey(ev) && focusableElementsInContainer[0]) {
+          if (Events.isTabKey(ev) && !Events.isShiftKey(ev) && filteredFocusableElements[0]) {
             ev.preventDefault();
-            focusableElementsInContainer[0]?.focus();
+            filteredFocusableElements[0]?.focus();
           }
           return;
         }
 
         /* istanbul ignore if */
-        if (!focusableElementsInContainer.length) {
+        if (!filteredFocusableElements.length) {
           return;
         }
-        const lastElementFocused = focusableElementsInContainer[focusableElementsInContainer.length - 1] === document.activeElement;
-        const firstElementFocused = focusableElementsInContainer[0] === document.activeElement;
+        const lastElementFocused = filteredFocusableElements[filteredFocusableElements.length - 1] === document.activeElement;
+        const firstElementFocused = filteredFocusableElements[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)) {

package/lib/components/popover-container/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./popover-container.component";
-export type { PopoverContainerProps, RenderCloseProps, RenderOpenProps, } from "./popover-container.component";
+export type { PopoverContainerProps, RenderCloseProps, RenderOpenProps, PopoverContainerHandle, } from "./popover-container.component";

package/lib/components/popover-container/popover-container.component.d.ts

@@ -61,6 +61,11 @@ export interface PopoverContainerProps extends PaddingProps {
     containerAriaLabel?: string;
     /** Disables the animation for the component */
     disableAnimation?: boolean;
+    /** Flag to enable fullWidth Button styles */
+    hasFullWidth?: boolean;
 }
-export declare const PopoverContainer: ({ children, title, position, open, onOpen, onClose, renderOpenComponent, renderCloseComponent, shouldCoverButton, ariaDescribedBy, openButtonAriaLabel, closeButtonAriaLabel, containerAriaLabel, closeButtonDataProps, disableAnimation, ...rest }: PopoverContainerProps) => React.JSX.Element;
+export declare type PopoverContainerHandle = {
+    focusButton: () => void;
+} | null;
+export declare const PopoverContainer: React.ForwardRefExoticComponent<PopoverContainerProps & React.RefAttributes<PopoverContainerHandle>>;
 export default PopoverContainer;

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

@@ -77,7 +77,7 @@ function usePopoverMiddleware(shouldCoverButton) {
     fallbackStrategy: "initialPlacement"
   })], [shouldCoverButton]);
 }
-const PopoverContainer = ({
+const PopoverContainer = exports.PopoverContainer = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   title,
   position = "right",
@@ -93,8 +93,9 @@ const PopoverContainer = ({
   containerAriaLabel,
   closeButtonDataProps,
   disableAnimation = false,
+  hasFullWidth = false,
   ...rest
-}) => {
+}, ref) => {
   const isControlled = open !== undefined;
   const [isOpenInternal, setIsOpenInternal] = (0, _react.useState)(false);
   const closeButtonRef = (0, _react.useRef)(null);
@@ -128,6 +129,13 @@ const PopoverContainer = ({
       document.removeEventListener("keydown", handleEscKey);
     };
   }, [handleEscKey]);
+  (0, _react.useEffect)(() => {
+    if (!shouldCoverButton && isOpen) {
+      popoverContentNodeRef.current?.focus({
+        preventScroll: true
+      });
+    }
+  }, [isOpen, shouldCoverButton, popoverContentNodeRef]);
   const handleOpenButtonClick = e => {
     /* istanbul ignore else */
     if (!isControlled) setIsOpenInternal(!isOpen);
@@ -182,6 +190,11 @@ const PopoverContainer = ({
   };
   const handleClick = (0, _useClickAwayListener.default)(handleClickAway, "mousedown");
   const [isAnimationComplete, setIsAnimationComplete] = (0, _react.useState)(false);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    focusButton() {
+      openButtonRef.current?.focus();
+    }
+  }), []);
   const popover = () => /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerContentStyle, _extends({
     "data-element": "popover-container-content",
     role: "dialog",
@@ -190,7 +203,7 @@ const PopoverContainer = ({
     "aria-describedby": ariaDescribedBy,
     p: "16px 24px",
     ref: popoverContentNodeRef,
-    tabIndex: shouldCoverButton ? -1 : undefined,
+    tabIndex: -1,
     disableAnimation: disableAnimation || reduceMotion
   }, (0, _utils.filterStyledSystemPaddingProps)(rest)), /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerHeaderStyle, null, /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerTitleStyle, {
     id: popoverContainerId,
@@ -220,7 +233,9 @@ const PopoverContainer = ({
   }));
   return /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerWrapperStyle, {
     "data-component": "popover-container",
-    onMouseDown: handleClick
+    "data-role": "popover-container",
+    onMouseDown: handleClick,
+    hasFullWidth: hasFullWidth
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: popoverReference
   }, renderOpenComponent(renderOpenComponentProps)), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
@@ -239,6 +254,182 @@ const PopoverContainer = ({
     middleware: popoverMiddleware,
     childRefOverride: popoverContentNodeRef
   }, childrenToRender())));
-};
-exports.PopoverContainer = PopoverContainer;
+});
+if (process.env.NODE_ENV !== "production") {
+  PopoverContainer.propTypes = {
+    "ariaDescribedBy": _propTypes.default.string,
+    "children": _propTypes.default.node,
+    "closeButtonAriaLabel": _propTypes.default.string,
+    "closeButtonDataProps": _propTypes.default.shape({
+      "data-element": _propTypes.default.string,
+      "data-role": _propTypes.default.string
+    }),
+    "containerAriaLabel": _propTypes.default.string,
+    "disableAnimation": _propTypes.default.bool,
+    "hasFullWidth": _propTypes.default.bool,
+    "onClose": _propTypes.default.func,
+    "onOpen": _propTypes.default.func,
+    "open": _propTypes.default.bool,
+    "openButtonAriaLabel": _propTypes.default.string,
+    "p": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "padding": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "paddingBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "paddingLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "paddingRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "paddingTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "paddingX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "paddingY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "pb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "pl": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "position": _propTypes.default.oneOf(["left", "right"]),
+    "pr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "pt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "px": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "py": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+      "__@toStringTag": _propTypes.default.string.isRequired,
+      "description": _propTypes.default.string,
+      "toString": _propTypes.default.func.isRequired,
+      "valueOf": _propTypes.default.func.isRequired
+    }), _propTypes.default.string]),
+    "renderCloseComponent": _propTypes.default.func,
+    "renderOpenComponent": _propTypes.default.func,
+    "shouldCoverButton": _propTypes.default.bool,
+    "title": _propTypes.default.string
+  };
+}
 var _default = exports.default = PopoverContainer;

package/lib/components/popover-container/popover-container.style.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 import { TransitionStatus } from "react-transition-group";
-declare const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type PopoverContainerWrapperProps = {
+    hasFullWidth?: boolean;
+};
+declare const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, PopoverContainerWrapperProps, never>;
 declare const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type PopoverContainerContentStyleProps = {
     animationState?: TransitionStatus;

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

@@ -9,13 +9,19 @@ var _styledSystem = require("styled-system");
 var _themes = require("../../style/themes");
 var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
+var _form = require("../form/form.style");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 && {}.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 PopoverContainerWrapperStyle = exports.PopoverContainerWrapperStyle = _styledComponents.default.div`
   position: relative;
   display: inline-block;
-  width: 100%;
+
+  ${({
+  hasFullWidth
+}) => hasFullWidth && (0, _styledComponents.css)`
+      width: 100%;
+    `}
 `;
 const PopoverContainerHeaderStyle = exports.PopoverContainerHeaderStyle = _styledComponents.default.div`
   display: flex;
@@ -69,6 +75,25 @@ const PopoverContainerContentStyle = exports.PopoverContainerContentStyle = _sty
   :focus {
     outline: none;
   }
+
+  &:has(${_form.StyledForm}.sticky) {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+
+    ${_form.StyledForm}.sticky {
+      ${_form.StyledFormContent} {
+        flex-grow: 1;
+        min-height: 0;
+        overflow-y: auto;
+      }
+
+      ${_form.StyledFormFooter} {
+        border-bottom-right-radius: var(--borderRadius200);
+        border-bottom-left-radius: var(--borderRadius200);
+      }
+    }
+  }
 `;
 const PopoverContainerOpenIcon = exports.PopoverContainerOpenIcon = (0, _styledComponents.default)(_iconButton.default)`
   ${_icon.default} {

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

@@ -13,20 +13,21 @@ var _default = (container, target, focusCallback) => {
     const handleFocusPortalContent = ev => {
       if (container?.current && target?.current) {
         const focusableElementsInContainer = Array.from(container.current?.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors) || /* istanbul ignore next */[]);
+        const filteredFocusableElements = focusableElementsInContainer.filter(el => Number(el.tabIndex) !== -1);
         if (target?.current === document.activeElement) {
-          if (_events.default.isTabKey(ev) && !_events.default.isShiftKey(ev) && focusableElementsInContainer[0]) {
+          if (_events.default.isTabKey(ev) && !_events.default.isShiftKey(ev) && filteredFocusableElements[0]) {
             ev.preventDefault();
-            focusableElementsInContainer[0]?.focus();
+            filteredFocusableElements[0]?.focus();
           }
           return;
         }
 
         /* istanbul ignore if */
-        if (!focusableElementsInContainer.length) {
+        if (!filteredFocusableElements.length) {
           return;
         }
-        const lastElementFocused = focusableElementsInContainer[focusableElementsInContainer.length - 1] === document.activeElement;
-        const firstElementFocused = focusableElementsInContainer[0] === document.activeElement;
+        const lastElementFocused = filteredFocusableElements[filteredFocusableElements.length - 1] === document.activeElement;
+        const firstElementFocused = filteredFocusableElements[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)) {

package/package.json

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