carbon-react 125.0.2 → 125.2.0

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

@@ -12,6 +12,7 @@ export interface PopoverProps {
     reference: CustomRefObject<HTMLElement>;
     isOpen?: boolean;
     animationFrame?: boolean;
+    popoverStrategy?: "absolute" | "fixed";
 }
-declare const Popover: ({ children, placement, disablePortal, reference, middleware, disableBackgroundUI, isOpen, animationFrame, }: PopoverProps) => React.JSX.Element;
+declare const Popover: ({ children, placement, disablePortal, reference, middleware, disableBackgroundUI, isOpen, animationFrame, popoverStrategy, }: PopoverProps) => React.JSX.Element;
 export default Popover;

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

@@ -17,7 +17,8 @@ const Popover = ({
   middleware = defaultMiddleware,
   disableBackgroundUI,
   isOpen = true,
-  animationFrame
+  animationFrame,
+  popoverStrategy = "absolute"
 }) => {
   const elementDOM = useRef(null);
   const {
@@ -46,7 +47,8 @@ const Popover = ({
     floating: floatingReference,
     placement,
     middleware,
-    animationFrame
+    animationFrame,
+    strategy: popoverStrategy
   });
   useEffect(() => {
     return () => {

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

@@ -55,6 +55,8 @@ export interface PopoverContainerProps extends PaddingProps {
     closeButtonAriaLabel?: string;
     /** Container aria label */
     containerAriaLabel?: string;
+    /** Disables the animation for the component */
+    disableAnimation?: boolean;
 }
-export declare const PopoverContainer: ({ children, title, position, open, onOpen, onClose, renderOpenComponent, renderCloseComponent, shouldCoverButton, ariaDescribedBy, openButtonAriaLabel, closeButtonAriaLabel, containerAriaLabel, ...rest }: PopoverContainerProps) => React.JSX.Element;
+export declare const PopoverContainer: ({ children, title, position, open, onOpen, onClose, renderOpenComponent, renderCloseComponent, shouldCoverButton, ariaDescribedBy, openButtonAriaLabel, closeButtonAriaLabel, containerAriaLabel, disableAnimation, ...rest }: PopoverContainerProps) => React.JSX.Element;
 export default PopoverContainer;

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

@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { Transition } from "react-transition-group";
 import { flip, offset } from "@floating-ui/dom";
+import useMediaQuery from "../../hooks/useMediaQuery";
 import { PopoverContainerWrapperStyle, PopoverContainerHeaderStyle, PopoverContainerContentStyle, PopoverContainerCloseIcon, PopoverContainerTitleStyle, PopoverContainerOpenIcon } from "./popover-container.style";
 import Icon from "../icon";
 import Popover from "../../__internal__/popover";
@@ -10,6 +11,8 @@ import createGuid from "../../__internal__/utils/helpers/guid";
 import { filterStyledSystemPaddingProps } from "../../style/utils";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import Events from "../../__internal__/utils/helpers/events";
+import FocusTrap from "../../__internal__/focus-trap";
+import { ModalContext } from "../modal";
 export const renderOpen = ({
   tabIndex,
   onClick,
@@ -67,6 +70,7 @@ export const PopoverContainer = ({
   openButtonAriaLabel,
   closeButtonAriaLabel = "close",
   containerAriaLabel,
+  disableAnimation = false,
   ...rest
 }) => {
   const isControlled = open !== undefined;
@@ -78,19 +82,21 @@ export const PopoverContainer = ({
   const popoverContentNodeRef = useRef(null);
   const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
   const isOpen = isControlled ? open : isOpenInternal;
-  useEffect(() => {
-    if (isOpen && closeButtonRef.current) setTimeout(() => closeButtonRef.current?.focus(), 0);
-  }, [isOpen]);
+  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
   const closePopover = useCallback(ev => {
-    if (!isControlled) setIsOpenInternal(!isOpen);
+    if (!isControlled) setIsOpenInternal(false);
     if (onClose) onClose(ev);
-    if (isOpen && openButtonRef.current) openButtonRef.current.focus();
+    if (isOpen && openButtonRef.current) {
+      openButtonRef.current.focus();
+    }
   }, [isControlled, isOpen, onClose]);
   const handleEscKey = useCallback(ev => {
     const eventIsFromSelectInput = Events.composedPath(ev).find(element => {
       return element instanceof HTMLElement && element.getAttribute("data-element") === "input" && element.getAttribute("aria-expanded") === "true";
     });
-    if (!eventIsFromSelectInput && Events.isEscKey(ev)) closePopover(ev);
+    if (!eventIsFromSelectInput && Events.isEscKey(ev)) {
+      closePopover(ev);
+    }
   }, [closePopover]);
   useEffect(() => {
     document.addEventListener("keydown", handleEscKey);
@@ -110,7 +116,7 @@ export const PopoverContainer = ({
     closePopover(e);
   };
   const renderOpenComponentProps = {
-    tabIndex: isOpen ? -1 : 0,
+    tabIndex: 0,
     "aria-expanded": isOpen,
     "aria-haspopup": "dialog",
     isOpen,
@@ -132,12 +138,8 @@ export const PopoverContainer = ({
     if (onClose && isOpen) onClose(e);
   };
   const handleClick = useClickAwayListener(handleClickAway, "mousedown");
-  return /*#__PURE__*/React.createElement(PopoverContainerWrapperStyle, {
-    "data-component": "popover-container",
-    onMouseDown: handleClick
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: popoverReference
-  }, renderOpenComponent(renderOpenComponentProps)), /*#__PURE__*/React.createElement(Transition, {
+  const [isAnimationComplete, setIsAnimationComplete] = useState(false);
+  const popover = /*#__PURE__*/React.createElement(Transition, {
     in: isOpen,
     timeout: {
       exit: 300
@@ -145,10 +147,14 @@ export const PopoverContainer = ({
     appear: true,
     mountOnEnter: true,
     unmountOnExit: true,
-    nodeRef: popoverContentNodeRef
+    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"
+    placement: position === "right" ? "bottom-start" : "bottom-end",
+    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute"
   }, shouldCoverButton && {
     middleware: popoverMiddleware
   }), /*#__PURE__*/React.createElement(PopoverContainerContentStyle, _extends({
@@ -159,10 +165,25 @@ export const PopoverContainer = ({
     "aria-label": containerAriaLabel,
     "aria-describedby": ariaDescribedBy,
     p: "16px 24px",
-    ref: popoverContentNodeRef
+    ref: popoverContentNodeRef,
+    tabIndex: shouldCoverButton ? -1 : undefined,
+    disableAnimation: disableAnimation || reduceMotion
   }, filterStyledSystemPaddingProps(rest)), /*#__PURE__*/React.createElement(PopoverContainerHeaderStyle, null, /*#__PURE__*/React.createElement(PopoverContainerTitleStyle, {
     id: popoverContainerId,
     "data-element": "popover-container-title"
-  }, title), renderCloseComponent(renderCloseComponentProps)), children))));
+  }, 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, {
+    value: {
+      isAnimationComplete
+    }
+  }, /*#__PURE__*/React.createElement(FocusTrap, {
+    wrapperRef: popoverContentNodeRef,
+    isOpen: isOpen
+  }, popover)) : popover);
 };
 export default PopoverContainer;

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

@@ -4,6 +4,7 @@ declare const PopoverContainerWrapperStyle: import("styled-components").StyledCo
 declare const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type PopoverContainerContentStyleProps = {
     animationState?: TransitionStatus;
+    disableAnimation?: boolean;
 };
 declare const PopoverContainerContentStyle: import("styled-components").StyledComponent<"div", any, PopoverContainerContentStyleProps, never>;
 declare type AdditionalIconButtonProps = {

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

@@ -3,6 +3,33 @@ import { padding } from "styled-system";
 import { baseTheme } from "../../style/themes";
 import IconButton from "../icon-button";
 import StyledIcon from "../icon/icon.style";
+function animationToRender({
+  animationState,
+  disableAnimation
+}) {
+  if (disableAnimation) return "opacity: 1;";
+  switch (animationState) {
+    case "entering":
+      return `
+        opacity: 0;
+        transform: translateY(-8px);
+      `;
+    case "entered":
+      return `
+        opacity: 1; 
+        transform: translateY(0);
+        transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5);
+      `;
+    case "exiting":
+      return `
+        opacity: 0; 
+        transform: translateY(-8px);
+        transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5);
+      `;
+    default:
+      return "opacity: 0;";
+  }
+}
 const PopoverContainerWrapperStyle = styled.div`
   position: relative;
   display: inline-block;
@@ -25,31 +52,11 @@ const PopoverContainerContentStyle = styled.div`
   theme
 }) => theme.zIndex.popover};
 
-  ${({
-  animationState
-}) => {
-  switch (animationState) {
-    case "entering":
-      return `
-        opacity: 0;
-        transform: translateY(-8px);
-      `;
-    case "entered":
-      return `
-        opacity: 1; 
-        transform: translateY(0);
-        transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5);
-          `;
-    case "exiting":
-      return `
-        opacity: 0; 
-        transform: translateY(-8px);
-        transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5);
-          `;
-    default:
-      return "opacity: 0";
+  ${animationToRender}
+
+  :focus {
+    outline: none;
   }
-}}
 `;
 const PopoverContainerOpenIcon = styled(IconButton)`
   ${StyledIcon} {

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

@@ -12,6 +12,7 @@ export interface PopoverProps {
     reference: CustomRefObject<HTMLElement>;
     isOpen?: boolean;
     animationFrame?: boolean;
+    popoverStrategy?: "absolute" | "fixed";
 }
-declare const Popover: ({ children, placement, disablePortal, reference, middleware, disableBackgroundUI, isOpen, animationFrame, }: PopoverProps) => React.JSX.Element;
+declare const Popover: ({ children, placement, disablePortal, reference, middleware, disableBackgroundUI, isOpen, animationFrame, popoverStrategy, }: PopoverProps) => React.JSX.Element;
 export default Popover;

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

@@ -26,7 +26,8 @@ const Popover = ({
   middleware = defaultMiddleware,
   disableBackgroundUI,
   isOpen = true,
-  animationFrame
+  animationFrame,
+  popoverStrategy = "absolute"
 }) => {
   const elementDOM = (0, _react.useRef)(null);
   const {
@@ -55,7 +56,8 @@ const Popover = ({
     floating: floatingReference,
     placement,
     middleware,
-    animationFrame
+    animationFrame,
+    strategy: popoverStrategy
   });
   (0, _react.useEffect)(() => {
     return () => {

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

@@ -55,6 +55,8 @@ export interface PopoverContainerProps extends PaddingProps {
     closeButtonAriaLabel?: string;
     /** Container aria label */
     containerAriaLabel?: string;
+    /** Disables the animation for the component */
+    disableAnimation?: boolean;
 }
-export declare const PopoverContainer: ({ children, title, position, open, onOpen, onClose, renderOpenComponent, renderCloseComponent, shouldCoverButton, ariaDescribedBy, openButtonAriaLabel, closeButtonAriaLabel, containerAriaLabel, ...rest }: PopoverContainerProps) => React.JSX.Element;
+export declare const PopoverContainer: ({ children, title, position, open, onOpen, onClose, renderOpenComponent, renderCloseComponent, shouldCoverButton, ariaDescribedBy, openButtonAriaLabel, closeButtonAriaLabel, containerAriaLabel, disableAnimation, ...rest }: PopoverContainerProps) => React.JSX.Element;
 export default PopoverContainer;

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

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
 var _dom = require("@floating-ui/dom");
+var _useMediaQuery = _interopRequireDefault(require("../../hooks/useMediaQuery"));
 var _popoverContainer = require("./popover-container.style");
 var _icon = _interopRequireDefault(require("../icon"));
 var _popover = _interopRequireDefault(require("../../__internal__/popover"));
@@ -15,6 +16,8 @@ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/gui
 var _utils = require("../../style/utils");
 var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
+var _focusTrap = _interopRequireDefault(require("../../__internal__/focus-trap"));
+var _modal = require("../modal");
 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; }
@@ -78,6 +81,7 @@ const PopoverContainer = ({
   openButtonAriaLabel,
   closeButtonAriaLabel = "close",
   containerAriaLabel,
+  disableAnimation = false,
   ...rest
 }) => {
   const isControlled = open !== undefined;
@@ -89,19 +93,21 @@ const PopoverContainer = ({
   const popoverContentNodeRef = (0, _react.useRef)(null);
   const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
   const isOpen = isControlled ? open : isOpenInternal;
-  (0, _react.useEffect)(() => {
-    if (isOpen && closeButtonRef.current) setTimeout(() => closeButtonRef.current?.focus(), 0);
-  }, [isOpen]);
+  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
   const closePopover = (0, _react.useCallback)(ev => {
-    if (!isControlled) setIsOpenInternal(!isOpen);
+    if (!isControlled) setIsOpenInternal(false);
     if (onClose) onClose(ev);
-    if (isOpen && openButtonRef.current) openButtonRef.current.focus();
+    if (isOpen && openButtonRef.current) {
+      openButtonRef.current.focus();
+    }
   }, [isControlled, isOpen, onClose]);
   const handleEscKey = (0, _react.useCallback)(ev => {
     const eventIsFromSelectInput = _events.default.composedPath(ev).find(element => {
       return element instanceof HTMLElement && element.getAttribute("data-element") === "input" && element.getAttribute("aria-expanded") === "true";
     });
-    if (!eventIsFromSelectInput && _events.default.isEscKey(ev)) closePopover(ev);
+    if (!eventIsFromSelectInput && _events.default.isEscKey(ev)) {
+      closePopover(ev);
+    }
   }, [closePopover]);
   (0, _react.useEffect)(() => {
     document.addEventListener("keydown", handleEscKey);
@@ -121,7 +127,7 @@ const PopoverContainer = ({
     closePopover(e);
   };
   const renderOpenComponentProps = {
-    tabIndex: isOpen ? -1 : 0,
+    tabIndex: 0,
     "aria-expanded": isOpen,
     "aria-haspopup": "dialog",
     isOpen,
@@ -143,12 +149,8 @@ const PopoverContainer = ({
     if (onClose && isOpen) onClose(e);
   };
   const handleClick = (0, _useClickAwayListener.default)(handleClickAway, "mousedown");
-  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, {
+  const [isAnimationComplete, setIsAnimationComplete] = (0, _react.useState)(false);
+  const popover = /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
     in: isOpen,
     timeout: {
       exit: 300
@@ -156,10 +158,14 @@ const PopoverContainer = ({
     appear: true,
     mountOnEnter: true,
     unmountOnExit: true,
-    nodeRef: popoverContentNodeRef
+    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"
+    placement: position === "right" ? "bottom-start" : "bottom-end",
+    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute"
   }, shouldCoverButton && {
     middleware: popoverMiddleware
   }), /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerContentStyle, _extends({
@@ -170,11 +176,26 @@ const PopoverContainer = ({
     "aria-label": containerAriaLabel,
     "aria-describedby": ariaDescribedBy,
     p: "16px 24px",
-    ref: popoverContentNodeRef
+    ref: popoverContentNodeRef,
+    tabIndex: shouldCoverButton ? -1 : undefined,
+    disableAnimation: disableAnimation || reduceMotion
   }, (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))));
+  }, 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, {
+    value: {
+      isAnimationComplete
+    }
+  }, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
+    wrapperRef: popoverContentNodeRef,
+    isOpen: isOpen
+  }, popover)) : popover);
 };
 exports.PopoverContainer = PopoverContainer;
 var _default = exports.default = PopoverContainer;

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

@@ -4,6 +4,7 @@ declare const PopoverContainerWrapperStyle: import("styled-components").StyledCo
 declare const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type PopoverContainerContentStyleProps = {
     animationState?: TransitionStatus;
+    disableAnimation?: boolean;
 };
 declare const PopoverContainerContentStyle: import("styled-components").StyledComponent<"div", any, PopoverContainerContentStyleProps, never>;
 declare type AdditionalIconButtonProps = {

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

@@ -10,6 +10,33 @@ var _themes = require("../../style/themes");
 var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function animationToRender({
+  animationState,
+  disableAnimation
+}) {
+  if (disableAnimation) return "opacity: 1;";
+  switch (animationState) {
+    case "entering":
+      return `
+        opacity: 0;
+        transform: translateY(-8px);
+      `;
+    case "entered":
+      return `
+        opacity: 1; 
+        transform: translateY(0);
+        transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5);
+      `;
+    case "exiting":
+      return `
+        opacity: 0; 
+        transform: translateY(-8px);
+        transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5);
+      `;
+    default:
+      return "opacity: 0;";
+  }
+}
 const PopoverContainerWrapperStyle = exports.PopoverContainerWrapperStyle = _styledComponents.default.div`
   position: relative;
   display: inline-block;
@@ -32,31 +59,11 @@ const PopoverContainerContentStyle = exports.PopoverContainerContentStyle = _sty
   theme
 }) => theme.zIndex.popover};
 
-  ${({
-  animationState
-}) => {
-  switch (animationState) {
-    case "entering":
-      return `
-        opacity: 0;
-        transform: translateY(-8px);
-      `;
-    case "entered":
-      return `
-        opacity: 1; 
-        transform: translateY(0);
-        transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5);
-          `;
-    case "exiting":
-      return `
-        opacity: 0; 
-        transform: translateY(-8px);
-        transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5);
-          `;
-    default:
-      return "opacity: 0";
+  ${animationToRender}
+
+  :focus {
+    outline: none;
   }
-}}
 `;
 const PopoverContainerOpenIcon = exports.PopoverContainerOpenIcon = (0, _styledComponents.default)(_iconButton.default)`
   ${_icon.default} {

package/package.json

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