carbon-react 154.4.1 → 154.4.2

package/esm/components/pod/pod.style.js

@@ -1,348 +1 @@
-import styled, { css } from "styled-components";
-import { margin } from "styled-system";
-import { baseTheme } from "../../style/themes";
-import { StyledContent as StyledLinkContent } from "../link/link.style";
-import IconButton from "../icon-button";
-import StyledIcon from "../icon/icon.style";
-const StyledPod = styled.div`
-  ${margin}
-  display: flex;
-  align-items: flex-start;
-  width: 100%;
-  ${({
-  internalEditButton
-}) => internalEditButton && "position: relative"};
-  ${({
-  height
-}) => height && `height: ${height}`};
-
-  &:focus {
-    outline: none;
-  }
-`;
-const blockBackgrounds = {
-  primary: "var(--colorsUtilityYang100)",
-  secondary: "var(--colorsUtilityMajor025)",
-  tertiary: "var(--colorsUtilityMajor040)",
-  transparent: "var(--colorsUtilityMajorTransparent)",
-  tile: "var(--colorsUtilityYang100)"
-};
-const StyledBlock = styled.div`
-  ${({
-  variant,
-  softDelete,
-  noBorder,
-  hasButtons,
-  contentTriggersEdit,
-  fullWidth,
-  internalEditButton,
-  isHovered,
-  isFocused
-}) => css`
-    box-sizing: border-box;
-    border-radius: var(--borderRadius100);
-    display: flex;
-    flex-direction: column;
-    background-color: ${blockBackgrounds[variant]};
-    width: 100%;
-    height: 100%;
-
-    ${variant === "tile" && "box-shadow: 0 2px 3px 0 rgba(2, 18, 36, 0.2)"};
-
-    ${noBorder ? "border: none" : `border: 1px solid var(--colorsUtilityMajor100)`};
-
-    ${hasButtons && !(fullWidth || internalEditButton) && "width: auto;"};
-
-    ${contentTriggersEdit && "cursor: pointer"};
-
-    ${(isHovered || isFocused) && css`
-      background-color: var(--colorsUtilityMajor075);
-
-      ${internalEditButton && variant === "tile" && "background-color: var(--colorsUtilityMajorTransparent);"}
-
-      ${contentTriggersEdit && css`
-        background-color: var(--colorsActionMajor600);
-        * {
-          color: var(--colorsUtilityYang100);
-        }
-      `}
-    `}
-
-    ${(!internalEditButton || contentTriggersEdit) && (isFocused ? css`
-          outline: 3px solid var(--colorsSemanticFocus500);
-          border: none;
-          padding: ${noBorder ? 0 : 1}px;
-        ` : css`
-          outline: none;
-        `)}
-
-      ${softDelete && css`
-      border: none;
-      background-color: var(--colorsActionDisabled500);
-
-      & > * {
-        color: var(--colorsUtilityYin065);
-      }
-    `};
-  `}
-`;
-const contentPaddings = {
-  "extra-small": "8px",
-  small: "8px",
-  medium: "16px",
-  large: "32px 24px",
-  "extra-large": "40px"
-};
-const StyledContent = styled.div`
-  text-align: left;
-  padding: ${({
-  size
-}) => contentPaddings[size]};
-  flex-grow: 1;
-`;
-const footerPaddings = {
-  "extra-small": "8px",
-  small: "8px",
-  medium: "8px 16px",
-  large: "16px 24px",
-  "extra-large": "24px 40px"
-};
-const StyledFooter = styled.div`
-  ${({
-  variant,
-  size,
-  softDelete
-}) => css`
-    background-color: var(--colorsUtilityMajor025);
-    border-bottom-left-radius: var(--borderRadius100);
-    border-bottom-right-radius: var(--borderRadius100);
-    box-shadow: inset 0px 1px 1px 0 rgba(0, 0, 0, 0.1);
-    color: var(--colorsUtilityYin090);
-    padding: ${footerPaddings[size]};
-
-    ${softDelete && `color: var(--colorsUtilityYin055)`};
-
-    ${variant === "tile" && `border-top: 1px solid var(--colorsUtilityMajor100)`};
-  `}
-`;
-const StyledActionsContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  ${({
-  internalEditButton
-}) => internalEditButton && css`
-      position: absolute;
-      right: 2px;
-      top: 2px;
-      z-index: 10;
-    `}
-`;
-const actionButtonSizes = {
-  "extra-small": 34,
-  small: 34,
-  medium: 50,
-  large: 50,
-  "extra-large": 50
-};
-const actionButtonBackgrounds = {
-  primary: "var(--colorsActionMajorYang100)",
-  secondary: "var(--colorsActionMinor050)",
-  tertiary: "var(--colorsActionMinor100)",
-  transparent: "var(--colorsActionMajorTransparent)",
-  tile: "var(--colorsActionMajorYang100)"
-};
-const StyledEditAction = styled(IconButton)`
-  && {
-    ${({
-  displayOnlyOnHover,
-  isHovered,
-  isFocused,
-  variant,
-  size,
-  internalEditButton,
-  noBorder
-}) => css`
-      cursor: pointer;
-      background-color: ${actionButtonBackgrounds[variant]};
-      border: 1px solid var(--colorsActionMinor200);
-      margin-left: 8px;
-      margin-bottom: 8px;
-      box-sizing: border-box;
-      height: ${`${actionButtonSizes[size]}px`};
-      width: ${`${actionButtonSizes[size]}px`};
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: var(--borderRadius100);
-
-      ${StyledIcon} {
-        top: -2px;
-        height: 16px;
-        width: 16px;
-        color: var(--colorsActionMajor500);
-      }
-
-      ${displayOnlyOnHover && !(isHovered || isFocused) && "display: none"}
-
-      ${noBorder && "border: none;"}
-
-      ${internalEditButton && css`
-        border: none;
-        background: var(--colorsActionMajorTransparent);
-      `}
-    
-      ${(isHovered || isFocused) && !internalEditButton && css`
-        background-color: var(--colorsActionMajor600);
-        color: var(--colorsActionMajorYang100);
-
-        ${StyledIcon} {
-          color: var(--colorsActionMajorYang100);
-        }
-      `}
-      
-      ${isFocused && css`
-        outline: 3px solid var(--colorsSemanticFocus500);
-        border: none;
-      `};
-    `};
-  }
-
-  ${StyledLinkContent} {
-    clip: rect(1px, 1px, 1px, 1px);
-    position: absolute;
-  }
-`;
-const StyledDeleteButton = styled(IconButton)`
-  && {
-    ${({
-  noBorder,
-  internalEditButton,
-  isHovered,
-  isFocused,
-  variant,
-  size
-}) => css`
-      cursor: pointer;
-      background-color: ${actionButtonBackgrounds[variant]};
-      border: ${noBorder ? "none" : "1px solid var(--colorsActionMinor200)"};
-      margin-left: 8px;
-      margin-bottom: 8px;
-      box-sizing: border-box;
-      height: ${`${actionButtonSizes[size]}px`};
-      width: ${`${actionButtonSizes[size]}px`};
-      border-radius: var(--borderRadius100);
-
-      ${StyledIcon} {
-        top: -2px;
-        height: 16px;
-        width: 16px;
-        color: var(--colorsSemanticNegative500);
-      }
-
-      ${internalEditButton && css`
-        border: none;
-        background: var(--colorsActionMajorTransparent);
-      `}
-
-      ${(isHovered || isFocused) && !internalEditButton && css`
-        background-color: var(--colorsSemanticNegative600);
-        color: var(--colorsActionMajorYang100);
-
-        ${StyledIcon} {
-          color: var(--colorsActionMajorYang100);
-        }
-      `}
-  
-      ${isFocused && css`
-        outline: 3px solid var(--colorsSemanticFocus500);
-        border: none;
-      `};
-    `}
-  }
-`;
-const StyledUndoButton = styled(IconButton)`
-  && {
-    ${({
-  isHovered,
-  isFocused,
-  variant,
-  size,
-  noBorder,
-  internalEditButton
-}) => css`
-      cursor: pointer;
-      background-color: ${actionButtonBackgrounds[variant]};
-      border: 1px solid var(--colorsActionMinor200);
-      margin-left: 8px;
-      margin-bottom: 8px;
-      box-sizing: border-box;
-      height: ${`${actionButtonSizes[size]}px`};
-      width: ${`${actionButtonSizes[size]}px`};
-      border-radius: var(--borderRadius100);
-
-      ${StyledIcon} {
-        top: -2px;
-        height: 16px;
-        width: 16px;
-        color: var(--colorsActionMajor500);
-      }
-
-      ${noBorder && "border: none;"}
-
-      ${internalEditButton && css`
-        border: none;
-        background: var(--colorsActionMajorTransparent);
-      `}
-    
-    ${(isHovered || isFocused) && !internalEditButton && css`
-        background-color: var(--colorsActionMajor600);
-        color: var(--colorsActionMajorYang100);
-
-        ${StyledIcon} {
-          color: var(--colorsActionMajorYang100);
-        }
-      `}
-    
-    ${isFocused && css`
-        outline: 3px solid var(--colorsSemanticFocus500);
-        border: none;
-      `};
-    `}
-  }
-`;
-const headerRightAlignMargins = {
-  "extra-small": 20,
-  small: 25,
-  medium: 30,
-  large: 30,
-  "extra-large": 30
-};
-const StyledHeader = styled.div`
-  ${({
-  alignTitle,
-  internalEditButton,
-  size
-}) => css`
-    margin-bottom: 24px;
-    text-align: ${alignTitle};
-
-    ${alignTitle === "right" && internalEditButton && css`
-      margin-right: ${headerRightAlignMargins[size]}px;
-    `};
-  `}
-`;
-const StyledSubtitle = styled.h5`
-  margin-top: 8px;
-  font-size: 14px;
-  font-weight: normal;
-`;
-const StyledTitle = styled.h4`
-  display: inline;
-  font-size: 18px;
-  font-weight: 500;
-`;
-StyledPod.defaultProps = {
-  theme: baseTheme
-};
-export { StyledBlock, StyledContent, StyledEditAction, StyledActionsContainer, StyledDeleteButton, StyledUndoButton, StyledFooter, StyledPod, StyledHeader, StyledSubtitle, StyledTitle };
+import o,{css as r}from"styled-components";import{margin as t}from"styled-system";import"../../style/themes/sage/index.js";import e from"../../style/themes/base/index.js";import"../../style/themes/none/index.js";import{StyledContent as i}from"../link/link.style.js";import n from"../icon-button/icon-button.component.js";import a from"../icon/icon.style.js";const l=o.div.withConfig({displayName:"pod.style__StyledPod",componentId:"sc-e7e11b4b-0"})([""," display:flex;align-items:flex-start;width:100%;",";",";&:focus{outline:none;}"],t,(({internalEditButton:o})=>o&&"position: relative"),(({height:o})=>o&&`height: ${o}`)),s={primary:"var(--colorsUtilityYang100)",secondary:"var(--colorsUtilityMajor025)",tertiary:"var(--colorsUtilityMajor040)",transparent:"var(--colorsUtilityMajorTransparent)",tile:"var(--colorsUtilityYang100)"},d=o.div.withConfig({displayName:"pod.style__StyledBlock",componentId:"sc-e7e11b4b-1"})(["",""],(({variant:o,softDelete:t,noBorder:e,hasButtons:i,contentTriggersEdit:n,fullWidth:a,internalEditButton:l,isHovered:d,isFocused:c})=>r(["box-sizing:border-box;border-radius:var(--borderRadius100);display:flex;flex-direction:column;background-color:",";width:100%;height:100%;",";",";",";",";"," "," ",";"],s[o],"tile"===o&&"box-shadow: 0 2px 3px 0 rgba(2, 18, 36, 0.2)",e?"border: none":"border: 1px solid var(--colorsUtilityMajor100)",i&&!(a||l)&&"width: auto;",n&&"cursor: pointer",(d||c)&&r(["background-color:var(--colorsUtilityMajor075);"," ",""],l&&"tile"===o&&"background-color: var(--colorsUtilityMajorTransparent);",n&&r(["background-color:var(--colorsActionMajor600);*{color:var(--colorsUtilityYang100);}"])),(!l||n)&&(c?r(["outline:3px solid var(--colorsSemanticFocus500);border:none;padding:","px;"],e?0:1):r(["outline:none;"])),t&&r(["border:none;background-color:var(--colorsActionDisabled500);& > *{color:var(--colorsUtilityYin065);}"])))),c={"extra-small":"8px",small:"8px",medium:"16px",large:"32px 24px","extra-large":"40px"},p=o.div.withConfig({displayName:"pod.style__StyledContent",componentId:"sc-e7e11b4b-2"})(["text-align:left;padding:",";flex-grow:1;"],(({size:o})=>c[o])),b={"extra-small":"8px",small:"8px",medium:"8px 16px",large:"16px 24px","extra-large":"24px 40px"},x=o.div.withConfig({displayName:"pod.style__StyledFooter",componentId:"sc-e7e11b4b-3"})(["",""],(({variant:o,size:t,softDelete:e})=>r(["background-color:var(--colorsUtilityMajor025);border-bottom-left-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius100);box-shadow:inset 0px 1px 1px 0 rgba(0,0,0,0.1);color:var(--colorsUtilityYin090);padding:",";",";",";"],b[t],e&&"color: var(--colorsUtilityYin055)","tile"===o&&"border-top: 1px solid var(--colorsUtilityMajor100)"))),g=o.div.withConfig({displayName:"pod.style__StyledActionsContainer",componentId:"sc-e7e11b4b-4"})(["display:flex;flex-direction:column;",""],(({internalEditButton:o})=>o&&r(["position:absolute;right:2px;top:2px;z-index:10;"]))),m={"extra-small":34,small:34,medium:50,large:50,"extra-large":50},u={primary:"var(--colorsActionMajorYang100)",secondary:"var(--colorsActionMinor050)",tertiary:"var(--colorsActionMinor100)",transparent:"var(--colorsActionMajorTransparent)",tile:"var(--colorsActionMajorYang100)"},y=o(n).withConfig({displayName:"pod.style__StyledEditAction",componentId:"sc-e7e11b4b-5"})(["&&{",";}","{clip:rect(1px,1px,1px,1px);position:absolute;}"],(({displayOnlyOnHover:o,isHovered:t,isFocused:e,variant:i,size:n,internalEditButton:l,noBorder:s})=>r(["cursor:pointer;background-color:",";border:1px solid var(--colorsActionMinor200);margin-left:8px;margin-bottom:8px;box-sizing:border-box;height:",";width:",";display:flex;align-items:center;justify-content:center;border-radius:var(--borderRadius100);","{top:-2px;height:16px;width:16px;color:var(--colorsActionMajor500);}"," "," "," "," ",";"],u[i],`${m[n]}px`,`${m[n]}px`,a,o&&!(t||e)&&"display: none",s&&"border: none;",l&&r(["border:none;background:var(--colorsActionMajorTransparent);"]),(t||e)&&!l&&r(["background-color:var(--colorsActionMajor600);color:var(--colorsActionMajorYang100);","{color:var(--colorsActionMajorYang100);}"],a),e&&r(["outline:3px solid var(--colorsSemanticFocus500);border:none;"]))),i),v=o(n).withConfig({displayName:"pod.style__StyledDeleteButton",componentId:"sc-e7e11b4b-6"})(["&&{","}"],(({noBorder:o,internalEditButton:t,isHovered:e,isFocused:i,variant:n,size:l})=>r(["cursor:pointer;background-color:",";border:",";margin-left:8px;margin-bottom:8px;box-sizing:border-box;height:",";width:",";border-radius:var(--borderRadius100);","{top:-2px;height:16px;width:16px;color:var(--colorsSemanticNegative500);}"," "," ",";"],u[n],o?"none":"1px solid var(--colorsActionMinor200)",`${m[l]}px`,`${m[l]}px`,a,t&&r(["border:none;background:var(--colorsActionMajorTransparent);"]),(e||i)&&!t&&r(["background-color:var(--colorsSemanticNegative600);color:var(--colorsActionMajorYang100);","{color:var(--colorsActionMajorYang100);}"],a),i&&r(["outline:3px solid var(--colorsSemanticFocus500);border:none;"])))),h=o(n).withConfig({displayName:"pod.style__StyledUndoButton",componentId:"sc-e7e11b4b-7"})(["&&{","}"],(({isHovered:o,isFocused:t,variant:e,size:i,noBorder:n,internalEditButton:l})=>r(["cursor:pointer;background-color:",";border:1px solid var(--colorsActionMinor200);margin-left:8px;margin-bottom:8px;box-sizing:border-box;height:",";width:",";border-radius:var(--borderRadius100);","{top:-2px;height:16px;width:16px;color:var(--colorsActionMajor500);}"," "," "," ",";"],u[e],`${m[i]}px`,`${m[i]}px`,a,n&&"border: none;",l&&r(["border:none;background:var(--colorsActionMajorTransparent);"]),(o||t)&&!l&&r(["background-color:var(--colorsActionMajor600);color:var(--colorsActionMajorYang100);","{color:var(--colorsActionMajorYang100);}"],a),t&&r(["outline:3px solid var(--colorsSemanticFocus500);border:none;"])))),f={"extra-small":20,small:25,medium:30,large:30,"extra-large":30},j=o.div.withConfig({displayName:"pod.style__StyledHeader",componentId:"sc-e7e11b4b-8"})(["",""],(({alignTitle:o,internalEditButton:t,size:e})=>r(["margin-bottom:24px;text-align:",";",";"],o,"right"===o&&t&&r(["margin-right:","px;"],f[e])))),M=o.h5.withConfig({displayName:"pod.style__StyledSubtitle",componentId:"sc-e7e11b4b-9"})(["margin-top:8px;font-size:14px;font-weight:normal;"]),w=o.h4.withConfig({displayName:"pod.style__StyledTitle",componentId:"sc-e7e11b4b-10"})(["display:inline;font-size:18px;font-weight:500;"]);l.defaultProps={theme:e};export{g as StyledActionsContainer,d as StyledBlock,p as StyledContent,v as StyledDeleteButton,y as StyledEditAction,x as StyledFooter,j as StyledHeader,l as StyledPod,M as StyledSubtitle,w as StyledTitle,h as StyledUndoButton};

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

@@ -1 +1 @@
-export { default } from "./popover-container.component";
+export{PopoverContainer as default}from"./popover-container.component.js";

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

@@ -1,249 +1 @@
-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, useImperativeHandle, forwardRef, useContext } from "react";
-import { CSSTransition } 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";
-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/__internal__/modal.context";
-import useFocusPortalContent from "../../hooks/__internal__/useFocusPortalContent";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import { defaultFocusableSelectors } from "../../__internal__/focus-trap/focus-trap-utils";
-import FlatTableContext from "../flat-table/__internal__/flat-table.context";
-export const renderOpen = ({
-  tabIndex,
-  onClick,
-  "data-element": dataElement,
-  ref,
-  "aria-label": ariaLabel,
-  id,
-  "aria-expanded": ariaExpanded,
-  "aria-haspopup": ariaHasPopup
-}) => {
-  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,
-  onClick,
-  ref,
-  "aria-label": ariaLabel,
-  closeButtonDataProps
-}) => /*#__PURE__*/React.createElement(PopoverContainerCloseIcon, _extends({
-  tabIndex: tabIndex,
-  onClick: onClick,
-  ref: ref,
-  "aria-label": ariaLabel
-}, tagComponent("close", {
-  "data-element": dataElement,
-  ...closeButtonDataProps
-})), /*#__PURE__*/React.createElement(Icon, {
-  type: "close"
-}));
-function usePopoverMiddleware(shouldCoverButton) {
-  return useMemo(() => [offset(shouldCoverButton ? ({
-    rects
-  }) => ({
-    mainAxis: -rects.reference.height
-  }) : 6), flip({
-    fallbackStrategy: "initialPlacement"
-  })], [shouldCoverButton]);
-}
-export const PopoverContainer = /*#__PURE__*/forwardRef(({
-  children,
-  title,
-  position = "right",
-  open,
-  onOpen,
-  onClose,
-  renderOpenComponent = renderOpen,
-  renderCloseComponent = renderClose,
-  shouldCoverButton = false,
-  ariaDescribedBy,
-  openButtonAriaLabel,
-  closeButtonAriaLabel = "close",
-  containerAriaLabel,
-  closeButtonDataProps,
-  disableAnimation = false,
-  hasFullWidth = false,
-  ...rest
-}, ref) => {
-  const isControlled = open !== undefined;
-  const [isOpenInternal, setIsOpenInternal] = useState(false);
-  const closeButtonRef = useRef(null);
-  const openButtonRef = useRef(null);
-  const popoverReference = useRef(null);
-  const guid = useRef(createGuid());
-  const popoverContentNodeRef = useRef(null);
-  const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
-  const isOpen = isControlled ? open : isOpenInternal;
-  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
-  const popoverMiddleware = usePopoverMiddleware(shouldCoverButton);
-  const {
-    isInFlatTable
-  } = useContext(FlatTableContext);
-  const closePopover = useCallback(ev => {
-    /* istanbul ignore else */
-    if (!isControlled) setIsOpenInternal(false);
-    onClose?.(ev);
-
-    /* istanbul ignore else */
-    if (isOpen) 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);
-    }
-  }, [closePopover]);
-  useEffect(() => {
-    document.addEventListener("keydown", handleEscKey);
-    return () => {
-      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);
-
-    // We want the open button to close the popover if it is already open
-    if (!isOpen) onOpen?.(e);else onClose?.(e);
-  };
-  const handleCloseButtonClick = e => {
-    closePopover(e);
-  };
-  useFocusPortalContent(shouldCoverButton ? undefined : popoverContentNodeRef, shouldCoverButton ? undefined : openButtonRef, closePopover);
-  const onFocusNextElement = useCallback(ev => {
-    const allFocusableElements = Array.from(document.querySelectorAll(defaultFocusableSelectors) || /* istanbul ignore next */[]);
-    const filteredElements = allFocusableElements.filter(el => el === openButtonRef.current || Number(el.tabIndex) !== -1);
-    const openButtonRefIndex = filteredElements.indexOf(openButtonRef.current);
-    filteredElements[openButtonRefIndex + 1].focus();
-    closePopover(ev);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const handleFocusGuard = (direction, ev) => {
-    if (direction === "next" && onFocusNextElement) {
-      // Focus the next focusable element outside of the popover
-      onFocusNextElement(ev);
-      return;
-    }
-
-    // istanbul ignore else
-    if (direction === "prev") openButtonRef.current?.focus();
-  };
-  const renderOpenComponentProps = {
-    tabIndex: 0,
-    "aria-expanded": isOpen,
-    "aria-haspopup": "dialog",
-    isOpen,
-    "data-element": "popover-container-open-component",
-    onClick: handleOpenButtonClick,
-    ref: openButtonRef,
-    "aria-label": openButtonAriaLabel || title,
-    id: isOpen ? undefined : popoverContainerId
-  };
-  const renderCloseComponentProps = {
-    "data-element": "popover-container-close-component",
-    tabIndex: 0,
-    onClick: handleCloseButtonClick,
-    ref: closeButtonRef,
-    "aria-label": closeButtonAriaLabel,
-    closeButtonDataProps
-  };
-  const handleClickAway = e => {
-    if (!isControlled) setIsOpenInternal(false);
-    if (isOpen) onClose?.(e);
-  };
-  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",
-    "aria-labelledby": popoverContainerId,
-    "aria-label": containerAriaLabel,
-    "aria-describedby": ariaDescribedBy,
-    p: "16px 24px",
-    ref: popoverContentNodeRef,
-    tabIndex: -1,
-    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);
-  const childrenToRender = () => shouldCoverButton ? /*#__PURE__*/React.createElement(ModalContext.Provider, {
-    value: {
-      isAnimationComplete
-    }
-  }, /*#__PURE__*/React.createElement(FocusTrap, {
-    wrapperRef: popoverContentNodeRef,
-    isOpen: isOpen
-  }, popover())) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    "data-element": "tab-guard-top"
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    ,
-    tabIndex: 0,
-    "aria-hidden": true,
-    onFocus: ev => handleFocusGuard("prev", ev)
-  }), popover(), /*#__PURE__*/React.createElement("div", {
-    "data-element": "tab-guard-bottom"
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    ,
-    tabIndex: 0,
-    "aria-hidden": true,
-    onFocus: ev => handleFocusGuard("next", ev)
-  }));
-  return /*#__PURE__*/React.createElement(PopoverContainerWrapperStyle, _extends({
-    onMouseDown: handleClick,
-    hasFullWidth: hasFullWidth
-  }, tagComponent("popover-container", rest)), /*#__PURE__*/React.createElement("div", {
-    ref: popoverReference
-  }, renderOpenComponent(renderOpenComponentProps)), /*#__PURE__*/React.createElement(CSSTransition, {
-    nodeRef: popoverContentNodeRef,
-    timeout: {
-      exit: disableAnimation ? 0 : 300
-    },
-    in: isOpen,
-    unmountOnExit: true,
-    onEntered: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(true) : undefined,
-    onExiting: shouldCoverButton ? /* istanbul ignore next */() => setIsAnimationComplete(false) : undefined
-  }, /*#__PURE__*/React.createElement(Popover, {
-    reference: popoverReference,
-    placement: position === "right" ? "bottom-start" : "bottom-end",
-    popoverStrategy: disableAnimation || reduceMotion ? "fixed" : "absolute",
-    middleware: popoverMiddleware,
-    childRefOverride: popoverContentNodeRef,
-    disableBackgroundUI: isInFlatTable
-  }, childrenToRender())));
-});
-export default PopoverContainer;
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as r,useState as o,useRef as i,useContext as a,useCallback as l,useEffect as c,useImperativeHandle as s,useMemo as p}from"react";import{CSSTransition as d}from"react-transition-group";import{offset as u,flip as m}from"@floating-ui/dom";import f from"../../hooks/useMediaQuery/useMediaQuery.js";import{PopoverContainerOpenIcon as b,PopoverContainerCloseIcon as v,PopoverContainerWrapperStyle as y,PopoverContainerContentStyle as h,PopoverContainerHeaderStyle as _,PopoverContainerTitleStyle as O}from"./popover-container.style.js";import g from"../icon/icon.component.js";import j from"../../__internal__/popover/popover.component.js";import x from"../../__internal__/utils/helpers/guid/index.js";import P from"../../style/utils/filter-styled-system-padding-props.js";import C from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import w from"../../__internal__/utils/helpers/events/events.js";import k from"../../__internal__/focus-trap/focus-trap.component.js";import A from"../modal/__internal__/modal.context.js";import B from"../../hooks/__internal__/useFocusPortalContent/useFocusPortalContent.js";import I from"../../__internal__/utils/helpers/tags/tags.js";import{defaultFocusableSelectors as D}from"../../__internal__/focus-trap/focus-trap-utils.js";import L from"../flat-table/__internal__/flat-table.context.js";function E(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function S(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){E(e,t,n[t])}))}return e}function F(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const M=({tabIndex:t,onClick:n,"data-element":r,ref:o,"aria-label":i,id:a,"aria-expanded":l,"aria-haspopup":c})=>e(b,{tabIndex:t,onClick:n,"data-element":r,ref:o,"aria-label":i,"aria-haspopup":c,"aria-expanded":l,id:a,children:e(g,{type:"settings"})}),R=({"data-element":t,tabIndex:n,onClick:r,ref:o,"aria-label":i,closeButtonDataProps:a})=>e(v,F(S({tabIndex:n,onClick:r,ref:o,"aria-label":i},I("close",S({"data-element":t},a))),{children:e(g,{type:"close"})})),W=r(((r,b)=>{var{children:v,title:g,position:E="right",open:W,onOpen:Q,onClose:T,renderOpenComponent:q=M,renderCloseComponent:H=R,shouldCoverButton:K=!1,ariaDescribedBy:N,openButtonAriaLabel:U,closeButtonAriaLabel:$="close",containerAriaLabel:z,closeButtonDataProps:G,disableAnimation:J=!1,hasFullWidth:V=!1}=r,X=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(r,["children","title","position","open","onOpen","onClose","renderOpenComponent","renderCloseComponent","shouldCoverButton","ariaDescribedBy","openButtonAriaLabel","closeButtonAriaLabel","containerAriaLabel","closeButtonDataProps","disableAnimation","hasFullWidth"]);const Y=void 0!==W,[Z,ee]=o(!1),te=i(null),ne=i(null),re=i(null),oe=i(x()),ie=i(null),ae=g?`PopoverContainer_${oe.current}`:void 0,le=Y?W:Z,ce=!f("screen and (prefers-reduced-motion: no-preference)"),se=function(e){return p((()=>[u(e?({rects:e})=>({mainAxis:-e.reference.height}):6),m({fallbackStrategy:"initialPlacement"})]),[e])}(K),{isInFlatTable:pe}=a(L),de=l((e=>{var t;Y||ee(!1),null==T||T(e),le&&(null===(t=ne.current)||void 0===t||t.focus())}),[Y,le,T]),ue=l((e=>{!w.composedPath(e).find((e=>e instanceof HTMLElement&&"input"===e.getAttribute("data-element")&&"true"===e.getAttribute("aria-expanded")))&&w.isEscKey(e)&&de(e)}),[de]);c((()=>(document.addEventListener("keydown",ue),()=>{document.removeEventListener("keydown",ue)})),[ue]),c((()=>{var e;!K&&le&&(null===(e=ie.current)||void 0===e||e.focus({preventScroll:!0}))}),[le,K,ie]),B(K?void 0:ie,K?void 0:ne,de);const me=l((e=>{const t=Array.from(document.querySelectorAll(D)||[]).filter((e=>e===ne.current||-1!==Number(e.tabIndex))),n=t.indexOf(ne.current);t[n+1].focus(),de(e)}),[]),fe=(e,t)=>{var n;"next"===e&&me?me(t):"prev"===e&&(null===(n=ne.current)||void 0===n||n.focus())},be={tabIndex:0,"aria-expanded":le,"aria-haspopup":"dialog",isOpen:le,"data-element":"popover-container-open-component",onClick:e=>{Y||ee(!le),le?null==T||T(e):null==Q||Q(e)},ref:ne,"aria-label":U||g,id:le?void 0:ae},ve={"data-element":"popover-container-close-component",tabIndex:0,onClick:e=>{de(e)},ref:te,"aria-label":$,closeButtonDataProps:G},ye=C((e=>{Y||ee(!1),le&&(null==T||T(e))}),"mousedown"),[he,_e]=o(!1);s(b,(()=>({focusButton(){var e;null===(e=ne.current)||void 0===e||e.focus()}})),[]);const Oe=()=>t(h,F(S({"data-element":"popover-container-content",role:"dialog","aria-labelledby":ae,"aria-label":z,"aria-describedby":N,p:"16px 24px",ref:ie,tabIndex:-1,disableAnimation:J||ce},P(X)),{children:[t(_,{children:[e(O,{id:ae,"data-element":"popover-container-title",children:g}),H(ve)]}),v]}));return t(y,F(S({onMouseDown:ye,hasFullWidth:V},I("popover-container",X)),{children:[e("div",{ref:re,children:q(be)}),e(d,{nodeRef:ie,timeout:{exit:J?0:300},in:le,unmountOnExit:!0,onEntered:K?()=>_e(!0):void 0,onExiting:K?()=>_e(!1):void 0,children:e(j,{reference:re,placement:"right"===E?"bottom-start":"bottom-end",popoverStrategy:J||ce?"fixed":"absolute",middleware:se,childRefOverride:ie,disableBackgroundUI:pe,children:K?e(A.Provider,{value:{isAnimationComplete:he},children:e(k,{wrapperRef:ie,isOpen:le,children:Oe()})}):t(n,{children:[e("div",{"data-element":"tab-guard-top",tabIndex:0,"aria-hidden":!0,onFocus:e=>fe("prev",e)}),Oe(),e("div",{"data-element":"tab-guard-bottom",tabIndex:0,"aria-hidden":!0,onFocus:e=>fe("next",e)})]})})})]}))}));export{W as PopoverContainer,W as default,R as renderClose,M as renderOpen};