diff --git a/src/components/popover-container/popover-container.component.tsx b/src/components/popover-container/popover-container.component.tsx
index f114d46958..d7f80aa19a 100644
--- a/src/components/popover-container/popover-container.component.tsx
+++ b/src/components/popover-container/popover-container.component.tsx
@@ -6,7 +6,7 @@ import React, {
   useMemo,
 } from "react";
 import { PaddingProps } from "styled-system";
-import { Transition, TransitionStatus } from "react-transition-group";
+import { CSSTransition } from "react-transition-group";
 import { flip, offset } from "@floating-ui/dom";
 
 import useMediaQuery from "../../hooks/useMediaQuery";
@@ -210,15 +210,13 @@ export const PopoverContainer = ({
         | React.KeyboardEvent<HTMLElement>
         | KeyboardEvent
     ) => {
-      if (!isControlled) {
-        setIsOpenInternal(false);
-      }
-      if (onClose) {
-        onClose(ev);
-      }
-      if (isOpen && openButtonRef.current) {
-        openButtonRef.current.focus();
-      }
+      /* istanbul ignore else */
+      if (!isControlled) setIsOpenInternal(false);
+
+      onClose?.(ev);
+
+      /* istanbul ignore else */
+      if (isOpen) openButtonRef.current?.focus();
     },
     [isControlled, isOpen, onClose]
   );
@@ -251,12 +249,12 @@ export const PopoverContainer = ({
   const handleOpenButtonClick = (
     e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
   ) => {
+    /* istanbul ignore else */
     if (!isControlled) setIsOpenInternal(!isOpen);
 
     // We want the open button to close the popover if it is already open
-    if (!isOpen) {
-      if (onOpen) onOpen(e);
-    } else if (onClose) onClose(e);
+    if (!isOpen) onOpen?.(e);
+    else onClose?.(e);
   };
 
   const handleCloseButtonClick = (
@@ -294,17 +292,16 @@ export const PopoverContainer = ({
 
   const handleClickAway = (e: Event) => {
     if (!isControlled) setIsOpenInternal(false);
-    if (onClose && isOpen) onClose(e);
+    if (isOpen) onClose?.(e);
   };
 
   const handleClick = useClickAwayListener(handleClickAway, "mousedown");
   const [isAnimationComplete, setIsAnimationComplete] = useState(false);
 
-  const popover = (state: TransitionStatus) => (
+  const popover = () => (
     <PopoverContainerContentStyle
       data-element="popover-container-content"
       role="dialog"
-      animationState={state}
       aria-labelledby={popoverContainerId}
       aria-label={containerAriaLabel}
       aria-describedby={ariaDescribedBy}
@@ -327,15 +324,15 @@ export const PopoverContainer = ({
     </PopoverContainerContentStyle>
   );
 
-  const childrenToRender = (state: TransitionStatus) =>
+  const childrenToRender = () =>
     shouldCoverButton ? (
       <ModalContext.Provider value={{ isAnimationComplete }}>
         <FocusTrap wrapperRef={popoverContentNodeRef} isOpen={isOpen}>
-          {popover(state)}
+          {popover()}
         </FocusTrap>
       </ModalContext.Provider>
     ) : (
-      popover(state)
+      popover()
     );
 
   return (
@@ -346,13 +343,11 @@ export const PopoverContainer = ({
       <div ref={popoverReference}>
         {renderOpenComponent(renderOpenComponentProps)}
       </div>
-      <Transition
+      <CSSTransition
+        nodeRef={popoverContentNodeRef}
+        timeout={{ exit: disableAnimation ? 0 : 300 }}
         in={isOpen}
-        timeout={{ exit: 300 }}
-        appear
-        mountOnEnter
         unmountOnExit
-        nodeRef={popoverContentNodeRef}
         onEntered={
           shouldCoverButton
             ? /* istanbul ignore next */ () => setIsAnimationComplete(true)
@@ -364,22 +359,18 @@ export const PopoverContainer = ({
             : undefined
         }
       >
-        {(state: TransitionStatus) =>
-          isOpen && (
-            <Popover
-              reference={popoverReference}
-              placement={position === "right" ? "bottom-start" : "bottom-end"}
-              popoverStrategy={
-                disableAnimation || reduceMotion ? "fixed" : "absolute"
-              }
-              middleware={popoverMiddleware}
-              childRefOverride={popoverContentNodeRef}
-            >
-              {childrenToRender(state)}
-            </Popover>
-          )
-        }
-      </Transition>
+        <Popover
+          reference={popoverReference}
+          placement={position === "right" ? "bottom-start" : "bottom-end"}
+          popoverStrategy={
+            disableAnimation || reduceMotion ? "fixed" : "absolute"
+          }
+          middleware={popoverMiddleware}
+          childRefOverride={popoverContentNodeRef}
+        >
+          {childrenToRender()}
+        </Popover>
+      </CSSTransition>
     </PopoverContainerWrapperStyle>
   );
 };
diff --git a/src/components/popover-container/popover-container.spec.tsx b/src/components/popover-container/popover-container.spec.tsx
deleted file mode 100644
index 68b8196e3f..0000000000
--- a/src/components/popover-container/popover-container.spec.tsx
+++ /dev/null
@@ -1,1102 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { forwardRef } from "react";
-import { mount, ReactWrapper } from "enzyme";
-import { act } from "react-dom/test-utils";
-import { Transition } from "react-transition-group";
-
-import Popover from "../../__internal__/popover";
-import {
-  PopoverContainerContentStyle,
-  PopoverContainerCloseIcon,
-  PopoverContainerOpenIcon,
-  PopoverContainerWrapperStyle,
-  PopoverContainerTitleStyle,
-} from "./popover-container.style";
-import StyledIcon from "../icon/icon.style";
-import PopoverContainer, {
-  PopoverContainerProps,
-  RenderOpenProps,
-  RenderCloseProps,
-} from "./popover-container.component";
-import {
-  assertStyleMatch,
-  testStyledSystemPadding,
-} from "../../__spec_helper__/__internal__/test-utils";
-import Icon from "../icon";
-import guid from "../../__internal__/utils/helpers/guid";
-import { Select, Option } from "../select";
-import useMediaQuery from "../../hooks/useMediaQuery";
-import rootTagTest from "../../__internal__/utils/helpers/tags/tags-specs";
-
-jest.mock("../../hooks/useMediaQuery", () => {
-  return {
-    __esModule: true,
-    default: jest.fn().mockReturnValue(false),
-  };
-});
-
-jest.mock("../../__internal__/utils/helpers/guid");
-(guid as jest.MockedFunction<typeof guid>).mockImplementation(() => "guid-123");
-
-const render = (props?: PopoverContainerProps) => {
-  return mount(
-    <PopoverContainer title="PopoverContainerSettings" {...props} />
-  );
-};
-
-const renderAttached = (props?: PopoverContainerProps) => {
-  return mount(
-    <PopoverContainer title="PopoverContainerSettings" {...props} />,
-    { attachTo: document.getElementById("enzymeContainer") }
-  );
-};
-
-describe("PopoverContainer", () => {
-  testStyledSystemPadding(
-    (props) => (
-      <PopoverContainer open title="PopoverContainerSettings" {...props}>
-        <div id="myChildren">children</div>
-      </PopoverContainer>
-    ),
-    { p: "16px 24px" },
-    (wrapper) => wrapper.find(PopoverContainerContentStyle)
-  );
-
-  let wrapper: ReactWrapper;
-  let onOpenFn: jest.Mock | undefined, onCloseFn: jest.Mock | undefined;
-
-  beforeAll(() => {
-    jest.useFakeTimers();
-  });
-
-  beforeEach(() => {
-    wrapper = render();
-  });
-
-  afterEach(() => {
-    jest.runOnlyPendingTimers();
-    onOpenFn?.mockClear();
-    onCloseFn?.mockClear();
-    wrapper.unmount();
-  });
-
-  afterAll(() => {
-    jest.useRealTimers();
-  });
-
-  it("should render correct", () => {
-    expect(wrapper.exists()).toBe(true);
-  });
-
-  it("should render correct title", () => {
-    wrapper = render({ open: true });
-    expect(wrapper.find(PopoverContainerTitleStyle).text()).toBe(
-      "PopoverContainerSettings"
-    );
-  });
-
-  it("should render correct `aria-describedby", () => {
-    wrapper = render({ open: true, ariaDescribedBy: "myAriaDescribedBy" });
-    expect(
-      wrapper.find(PopoverContainerContentStyle).prop("aria-describedby")
-    ).toBe("myAriaDescribedBy");
-  });
-
-  it("should render correct children", () => {
-    wrapper = mount(
-      <PopoverContainer title="foo" open>
-        <div id="myChildren">children</div>
-      </PopoverContainer>
-    );
-
-    expect(wrapper.find("#myChildren").exists()).toBe(true);
-  });
-
-  it("should appear and mount when the component opens", () => {
-    expect(wrapper.find(Transition).props().appear).toBe(true);
-    expect(wrapper.find(Transition).props().mountOnEnter).toBe(true);
-  });
-
-  it("should unmount after 300ms when the component closes", () => {
-    expect(wrapper.find(Transition).props().timeout).toEqual({ exit: 300 });
-    expect(wrapper.find(Transition).props().unmountOnExit).toBe(true);
-  });
-
-  it("should transition when the component opens and closes", () => {
-    expect(wrapper.find(Transition).props().in).toBe(false);
-
-    act(() => {
-      wrapper.find(PopoverContainerOpenIcon).props().onClick();
-    });
-
-    wrapper.update();
-
-    expect(wrapper.find(Transition).props().in).toBe(true);
-  });
-
-  it("should render correct `id` based on `guid()`", () => {
-    wrapper = render({ open: true });
-    expect(wrapper.find(PopoverContainerTitleStyle).props().id).toBe(
-      "PopoverContainer_guid-123"
-    );
-  });
-
-  it("should render correct `data-element` related to the component", () => {
-    wrapper = render({ open: true });
-    expect(wrapper.find(PopoverContainerTitleStyle).prop("data-element")).toBe(
-      "popover-container-title"
-    );
-  });
-
-  it("should render correct `data-component` related to the component", () => {
-    expect(
-      wrapper.find(PopoverContainerWrapperStyle).prop("data-component")
-    ).toBe("popover-container");
-  });
-
-  it("should set the id for `PopoverContainerTitleStyle` when title has a value", () => {
-    wrapper = render({ open: true });
-    expect(wrapper.find(PopoverContainerTitleStyle).props().id).toBe(
-      "PopoverContainer_guid-123"
-    );
-  });
-
-  it("should not set the id for `PopoverContainerTitleStyle` when title has no value", () => {
-    wrapper = render({
-      open: true,
-      title: undefined,
-      openButtonAriaLabel: "foo",
-      containerAriaLabel: "bar",
-    });
-    expect(wrapper.find(PopoverContainerTitleStyle).props().id).toBe(undefined);
-  });
-
-  it("should let opening button to be focusable if popover is closed", () => {
-    wrapper = render({ open: false });
-
-    expect(wrapper.find("button").props().tabIndex).toBe(0);
-  });
-
-  it("`shouldCoverButton` should be false by default", () => {
-    act(() => {
-      wrapper.find(PopoverContainerOpenIcon).props().onClick();
-    });
-
-    wrapper.update();
-
-    expect(wrapper.find(PopoverContainerContentStyle).props().modifiers).toBe(
-      undefined
-    );
-  });
-
-  it("should allow custom data props on close button to be assigned", () => {
-    wrapper = render({
-      open: true,
-      closeButtonDataProps: {
-        "data-element": "foo",
-        "data-role": "bar",
-      },
-    });
-    const closeButton = wrapper.find("[data-component='close']").first();
-
-    rootTagTest(closeButton, "close", "foo", "bar");
-  });
-
-  describe("popover", () => {
-    it("renders a DayPicker inside of a Popover", () => {
-      wrapper = render({ open: true });
-
-      expect(
-        wrapper.find(Popover).find(PopoverContainerContentStyle).exists()
-      ).toBe(true);
-    });
-
-    it("should have the correct offset when shouldCoverButton is false", () => {
-      wrapper = render({ shouldCoverButton: false, open: true });
-
-      expect(wrapper.find(Popover).props().middleware?.[0]?.options).toBe(6);
-    });
-
-    it("should have the correct offset when shouldCoverButton is set to true", () => {
-      wrapper = render({ shouldCoverButton: true, open: true });
-
-      expect(wrapper.find(Popover).props().middleware?.[0]?.options).not.toBe(
-        undefined
-      );
-
-      const rects = { reference: { height: 40, width: 0, y: 0, x: 0 } };
-
-      expect(
-        wrapper.find(Popover).props().middleware?.[0]?.options?.({
-          rects,
-        })
-      ).toEqual({ mainAxis: -40 });
-    });
-
-    it("should have the expected strategy when disabledAnimation is true", () => {
-      wrapper = render({ disableAnimation: true, open: true });
-
-      expect(wrapper.find(Popover).props().popoverStrategy)?.toBe("fixed");
-    });
-
-    it("should have the expected strategy when disabledAnimation is false and user doesn't allow motion or their preference cannot be determined", () => {
-      const mockUseMediaQuery = useMediaQuery as jest.MockedFunction<
-        typeof useMediaQuery
-      >;
-      mockUseMediaQuery.mockReturnValueOnce(false);
-
-      wrapper = render({ disableAnimation: false, open: true });
-
-      expect(wrapper.find(Popover).props().popoverStrategy)?.toBe("fixed");
-    });
-
-    it("should have the expected strategy when disabledAnimation is false and user allows motion", () => {
-      const mockUseMediaQuery = useMediaQuery as jest.MockedFunction<
-        typeof useMediaQuery
-      >;
-      mockUseMediaQuery.mockReturnValueOnce(true);
-
-      wrapper = render({ disableAnimation: false, open: true });
-
-      expect(wrapper.find(Popover).props().popoverStrategy)?.toBe("absolute");
-    });
-
-    it.each([
-      ["bottom-start", "right"] as const,
-      ["bottom-end", "left"] as const,
-    ])(
-      "should have placement equal to %s when position prop is equal %s",
-      (placement, position) => {
-        wrapper = render({ position, open: true });
-
-        expect(wrapper.find(Popover).props().placement).toEqual(placement);
-      }
-    );
-  });
-
-  describe("if is controlled", () => {
-    describe("and is opened", () => {
-      describe("and `onClose` prop do not exists", () => {
-        it("should not error when open button is clicked and no `onClose` callback is provided", () => {
-          expect(() => {
-            wrapper = render({
-              open: true,
-            });
-
-            wrapper.find(PopoverContainerOpenIcon).props().onClick();
-          }).not.toThrow();
-        });
-      });
-
-      describe("and `onClose` prop is provided", () => {
-        it("should fire `onClose` callback if open button is clicked", () => {
-          onCloseFn = jest.fn();
-          wrapper = render({
-            open: true,
-            onClose: onCloseFn,
-          });
-
-          wrapper.find(PopoverContainerOpenIcon).props().onClick();
-          expect(onCloseFn).toHaveBeenCalled();
-        });
-
-        it("should fire `onClose` callback if close button is clicked", () => {
-          onCloseFn = jest.fn();
-          wrapper = render({
-            open: true,
-            onClose: onCloseFn,
-          });
-
-          wrapper.find(PopoverContainerCloseIcon).props().onClick();
-          expect(onCloseFn).toHaveBeenCalled();
-        });
-      });
-    });
-
-    describe("and is closed", () => {
-      describe("and `onOpen` prop is provided", () => {
-        it("should fire `onOpen` callback if open button is clicked", () => {
-          onOpenFn = jest.fn();
-          wrapper = render({
-            open: false,
-            onOpen: onOpenFn,
-          });
-
-          wrapper.find(PopoverContainerOpenIcon).props().onClick();
-          expect(onOpenFn).toHaveBeenCalled();
-        });
-      });
-
-      describe("and `onOpen` prop is not provided", () => {
-        it("should not error when open button is clicked if no `onOpen` callback is provided", () => {
-          expect(() => {
-            wrapper = render({
-              open: false,
-            });
-
-            wrapper.find(PopoverContainerOpenIcon).props().onClick();
-          }).not.toThrow();
-        });
-      });
-    });
-  });
-
-  describe("if is not controlled", () => {
-    it("should render default open button with the expected prop values", () => {
-      wrapper = render();
-      const openIcon = wrapper.find(PopoverContainerOpenIcon);
-
-      expect(openIcon.exists()).toBe(true);
-      expect(openIcon.find(Icon).props()).toEqual({ type: "settings" });
-      expect(openIcon.prop("aria-haspopup")).toEqual("dialog");
-      expect(openIcon.prop("tabIndex")).toEqual(0);
-      expect(openIcon.prop("aria-label")).toEqual("PopoverContainerSettings");
-    });
-
-    it("should render default close button", () => {
-      wrapper = render();
-
-      act(() => {
-        wrapper.find(PopoverContainerOpenIcon).props().onClick();
-      });
-
-      wrapper.update();
-      expect(wrapper.find(PopoverContainerCloseIcon).exists()).toBe(true);
-    });
-
-    it("should open popover if open button is clicked", () => {
-      wrapper = render();
-
-      act(() => {
-        wrapper.find(PopoverContainerOpenIcon).props().onClick();
-      });
-
-      wrapper.update();
-      expect(wrapper.find(PopoverContainerContentStyle).exists()).toBe(true);
-    });
-
-    it("should close popover if escape key is pressed", () => {
-      wrapper = render();
-
-      act(() => {
-        wrapper.find(PopoverContainerOpenIcon).props().onClick();
-      });
-
-      wrapper.update();
-      expect(wrapper.find(PopoverContainerContentStyle).exists()).toBe(true);
-
-      act(() => {
-        document.dispatchEvent(
-          new KeyboardEvent("keydown", {
-            key: "Escape",
-            bubbles: true,
-          })
-        );
-      });
-
-      wrapper.update();
-      expect(wrapper.find(PopoverContainerContentStyle).exists()).toBe(false);
-    });
-
-    describe("and custom component is provided as an opening button", () => {
-      interface MyOpenButtonProps extends RenderOpenProps {
-        children: React.ReactNode;
-      }
-
-      const MyOpenButton = React.forwardRef<
-        HTMLButtonElement,
-        MyOpenButtonProps
-      >((props: MyOpenButtonProps, ref) => (
-        <button type="button" {...props} ref={ref} />
-      ));
-
-      MyOpenButton.displayName = "MyOpenButton";
-
-      let container: HTMLDivElement | null;
-
-      beforeEach(() => {
-        container = document.createElement("div");
-        container.id = "enzymeContainer";
-        document.body.appendChild(container);
-        wrapper = renderAttached({
-          title: "render props",
-          // eslint-disable-next-line react/display-name
-          renderOpenComponent: ({
-            tabIndex,
-            "data-element": dataElement,
-            "aria-label": ariaLabel,
-            ref,
-            onClick,
-            id,
-            "aria-expanded": ariaExpanded,
-            "aria-haspopup": ariaHasPopup,
-          }) => (
-            <MyOpenButton
-              tabIndex={tabIndex}
-              data-element={dataElement}
-              aria-label={ariaLabel}
-              ref={ref}
-              onClick={onClick}
-              id={id}
-              aria-haspopup={ariaHasPopup}
-              aria-expanded={ariaExpanded}
-            >
-              button
-            </MyOpenButton>
-          ),
-        });
-      });
-
-      afterEach(() => {
-        container?.parentNode?.removeChild(container);
-        container = null;
-      });
-
-      it("should be focused when user clicks the close icon", () => {
-        act(() => {
-          wrapper
-            .find(MyOpenButton)
-            .props()
-            .onClick({} as React.MouseEvent<HTMLElement>);
-        });
-
-        wrapper.update();
-
-        act(() => {
-          wrapper.find(PopoverContainerCloseIcon).props().onClick();
-        });
-
-        wrapper.update();
-
-        expect(wrapper.find(MyOpenButton)).toBeFocused();
-      });
-
-      it("should render correct props", () => {
-        expect(wrapper.find(MyOpenButton).props().tabIndex).toBe(0);
-        expect(wrapper.find(MyOpenButton).prop("data-element")).toBe(
-          "popover-container-open-component"
-        );
-        expect(wrapper.find(MyOpenButton).prop("aria-label")).toBe(
-          "render props"
-        );
-        expect(wrapper.find(MyOpenButton).prop("aria-haspopup")).toBe("dialog");
-        expect(wrapper.find(MyOpenButton).prop("aria-expanded")).toBe(false);
-
-        act(() => {
-          wrapper.setProps({ open: true });
-          wrapper.update();
-        });
-
-        expect(wrapper.find(MyOpenButton).prop("aria-expanded")).toBe(true);
-      });
-
-      it("should not be focused if `ref` is not provided", () => {
-        wrapper = render({
-          title: "render props",
-          // eslint-disable-next-line react/display-name
-          renderOpenComponent: ({
-            tabIndex,
-            "data-element": dataElement,
-            "aria-label": ariaLabel,
-            onClick,
-            isOpen,
-            "aria-expanded": ariaExpanded,
-            "aria-haspopup": ariaHasPopup,
-          }) => (
-            <MyOpenButton
-              tabIndex={tabIndex}
-              data-element={dataElement}
-              aria-label={ariaLabel}
-              onClick={onClick}
-              aria-haspopup={ariaHasPopup}
-              aria-expanded={ariaExpanded}
-            >
-              {isOpen ? "isOpen is true" : "isOpen is false"}
-            </MyOpenButton>
-          ),
-        });
-
-        act(() => {
-          wrapper
-            .find(MyOpenButton)
-            .props()
-            .onClick({} as React.MouseEvent<HTMLElement>);
-        });
-
-        wrapper.update();
-
-        expect(wrapper.find(MyOpenButton).text()).toBe("isOpen is true");
-
-        act(() => {
-          wrapper.find(PopoverContainerCloseIcon).props().onClick();
-        });
-
-        wrapper.update();
-
-        expect(wrapper.find(MyOpenButton).text()).toBe("isOpen is false");
-        expect(wrapper.find(MyOpenButton)).not.toBeFocused();
-      });
-
-      it("should set the id on the control when popover is closed", () => {
-        expect(wrapper.find(MyOpenButton).prop("id")).toBe(
-          "PopoverContainer_guid-123"
-        );
-      });
-
-      it("should not set the id on the control when popover is open", () => {
-        act(() => {
-          wrapper
-            .find(MyOpenButton)
-            .props()
-            .onClick({} as React.MouseEvent<HTMLElement>);
-        });
-        expect(wrapper.update().find(MyOpenButton).prop("id")).toBe(undefined);
-      });
-    });
-
-    describe("and custom component is provided as a closing button", () => {
-      interface MyCloseButtonProps extends RenderCloseProps {
-        children: React.ReactNode;
-      }
-
-      const MyCloseButton = forwardRef<HTMLButtonElement, MyCloseButtonProps>(
-        (props: MyCloseButtonProps, ref) => (
-          <button type="button" {...props} ref={ref} />
-        )
-      );
-
-      MyCloseButton.displayName = "MyCloseButton";
-
-      let container: HTMLDivElement | null;
-
-      beforeEach(() => {
-        container = document.createElement("div");
-        container.id = "enzymeContainer";
-        document.body.appendChild(container);
-        wrapper = renderAttached({
-          open: true,
-          renderCloseComponent: ({
-            tabIndex,
-            "data-element": dataElement,
-            "aria-label": ariaLabel,
-            ref,
-            onClick,
-          }) => (
-            <MyCloseButton
-              tabIndex={tabIndex}
-              ref={ref}
-              data-element={dataElement}
-              aria-label={ariaLabel}
-              onClick={onClick}
-            >
-              Close
-            </MyCloseButton>
-          ),
-        });
-      });
-
-      afterEach(() => {
-        container?.parentNode?.removeChild(container);
-        container = null;
-      });
-
-      it("should render correct props", () => {
-        expect(wrapper.find(MyCloseButton).props().tabIndex).toBe(0);
-        expect(wrapper.find(MyCloseButton).prop("data-element")).toBe(
-          "popover-container-close-component"
-        );
-        expect(wrapper.find(MyCloseButton).prop("aria-label")).toBe("close");
-      });
-    });
-  });
-
-  describe("if close button is clicked", () => {
-    describe("and `ref` of opening button exists", () => {
-      let container: HTMLDivElement | null;
-      beforeEach(() => {
-        container = document.createElement("div");
-        container.id = "enzymeContainer";
-        document.body.appendChild(container);
-      });
-
-      afterEach(() => {
-        container?.parentNode?.removeChild(container);
-        container = null;
-      });
-
-      it("should set focus to the opening button", () => {
-        wrapper = renderAttached();
-
-        act(() => {
-          wrapper.find(PopoverContainerOpenIcon).props().onClick();
-        });
-
-        wrapper.update();
-
-        act(() => {
-          wrapper.find(PopoverContainerCloseIcon).props().onClick();
-        });
-
-        wrapper.update();
-
-        expect(wrapper.find(PopoverContainerOpenIcon)).toBeFocused();
-      });
-    });
-  });
-});
-
-describe("PopoverContainerOpenIcon", () => {
-  it("should render correct style", () => {
-    const wrapper = mount(
-      <PopoverContainerOpenIcon onClick={() => {}}>
-        <Icon type="settings" />
-      </PopoverContainerOpenIcon>
-    );
-
-    assertStyleMatch(
-      {
-        color: "var(--colorsActionMinor500)",
-      },
-      wrapper,
-      {
-        modifier: `${StyledIcon}`,
-      }
-    );
-  });
-});
-
-describe("PopoverContainerContentStyle", () => {
-  it("should render correct props by default", () => {
-    const wrapper = render({ open: true });
-
-    expect(
-      wrapper.find(PopoverContainerContentStyle).prop("data-element")
-    ).toBe("popover-container-content");
-    expect(wrapper.find(PopoverContainerContentStyle).props().role).toBe(
-      "dialog"
-    );
-    expect(
-      wrapper.find(PopoverContainerContentStyle).prop("aria-labelledby")
-    ).toContain("PopoverContainer_guid-123");
-    expect(
-      wrapper.find(PopoverContainerContentStyle).props().ariaDescribedBy
-    ).toBe(undefined);
-    expect(
-      wrapper.find(PopoverContainerContentStyle).props().animationState
-    ).toBe("entering");
-  });
-
-  it("should set the correct aria attributes when no title is passed", () => {
-    const wrapper = render({
-      open: true,
-      title: undefined,
-      openButtonAriaLabel: "foo",
-      containerAriaLabel: "bar",
-    });
-
-    expect(
-      wrapper.find(PopoverContainerContentStyle).prop("aria-labelledby")
-    ).toBe(undefined);
-    expect(wrapper.find(PopoverContainerContentStyle).prop("aria-label")).toBe(
-      "bar"
-    );
-  });
-
-  describe("should render correct style of animation", () => {
-    it("if there is no animation state", () => {
-      const wrapper = mount(<PopoverContainerContentStyle />);
-
-      assertStyleMatch(
-        {
-          opacity: "0",
-        },
-        wrapper
-      );
-    });
-
-    it("if the animation has state `entered`", () => {
-      const wrapper = mount(
-        <PopoverContainerContentStyle animationState="entered" />
-      );
-
-      assertStyleMatch(
-        {
-          opacity: "1",
-          transform: "translateY(0)",
-          transition: "all 0.3s cubic-bezier(0.25,0.25,0,1.5)",
-        },
-        wrapper
-      );
-    });
-
-    it("if the animation has state `entering`", () => {
-      const wrapper = mount(
-        <PopoverContainerContentStyle animationState="entering" />
-      );
-
-      assertStyleMatch(
-        {
-          opacity: "0",
-          transform: "translateY(-8px)",
-        },
-        wrapper
-      );
-    });
-
-    it("if the animation has state `exiting`", () => {
-      const wrapper = mount(
-        <PopoverContainerContentStyle animationState="exiting" />
-      );
-
-      assertStyleMatch(
-        {
-          opacity: "0",
-          transform: "translateY(-8px)",
-          transition: "all 0.3s cubic-bezier(0.25,0.25,0,1.5)",
-        },
-        wrapper
-      );
-    });
-
-    it("if the disableAnimation prop is true", () => {
-      const wrapper = mount(<PopoverContainer open disableAnimation />);
-
-      assertStyleMatch(
-        {
-          opacity: "1",
-        },
-        wrapper.find(PopoverContainerContentStyle)
-      );
-    });
-  });
-});
-
-describe("open state when click event triggered", () => {
-  it("should close the container when uncontrolled and target is outside wrapper element", () => {
-    const wrapper = render({});
-    act(() => {
-      wrapper.find(PopoverContainerOpenIcon).props().onClick();
-    });
-    expect(wrapper.update().find(PopoverContainerOpenIcon).prop("id")).toBe(
-      undefined
-    );
-    act(() => {
-      document.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
-    });
-    expect(wrapper.update().find(PopoverContainerOpenIcon).prop("id")).toBe(
-      "PopoverContainer_guid-123"
-    );
-  });
-
-  it("should call the onClose callback when uncontrolled and target is outside wrapper element", () => {
-    const onCloseFn = jest.fn();
-    const wrapper = render({ onClose: onCloseFn });
-    act(() => {
-      wrapper.find(PopoverContainerOpenIcon).props().onClick();
-    });
-    act(() => {
-      document.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
-    });
-    expect(onCloseFn).toHaveBeenCalledTimes(1);
-  });
-
-  it("should not close the container when uncontrolled and target is inside wrapper element", () => {
-    const wrapper = render({});
-    act(() => {
-      wrapper.find(PopoverContainerOpenIcon).props().onClick();
-    });
-    expect(wrapper.update().find(PopoverContainerOpenIcon).prop("id")).toBe(
-      undefined
-    );
-    act(() => {
-      wrapper?.find(PopoverContainer).simulate("click");
-    });
-    expect(wrapper.update().find(PopoverContainerOpenIcon).prop("id")).toBe(
-      undefined
-    );
-  });
-
-  it("should close the container when controlled and target is outside wrapper element", () => {
-    const onCloseFn = jest.fn();
-    const MockWrapper = () => {
-      const [open, setOpen] = React.useState(true);
-
-      return (
-        <PopoverContainer
-          title="PopoverContainerSettings"
-          open={open}
-          onClose={(e) => {
-            setOpen(false);
-            onCloseFn(e);
-          }}
-        />
-      );
-    };
-    const wrapper = mount(<MockWrapper />);
-
-    expect(wrapper.update().find(PopoverContainer).prop("open")).toBe(true);
-    act(() => {
-      document.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
-    });
-    expect(wrapper.update().find(PopoverContainer).prop("open")).toBe(false);
-    expect(onCloseFn).toHaveBeenCalled();
-  });
-
-  it("should not call the onClose callback when target is outside wrapper element and container is currently closed", () => {
-    const onCloseFn = jest.fn();
-
-    mount(
-      <PopoverContainer
-        title="PopoverContainerSettings"
-        open={false}
-        onClose={onCloseFn}
-      />
-    );
-
-    act(() => {
-      document.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
-    });
-    expect(onCloseFn).not.toHaveBeenCalled();
-  });
-
-  it("should not close the container when controlled and target is inside wrapper element", () => {
-    const onCloseFn = jest.fn();
-    const MockWrapper = () => {
-      const [open, setOpen] = React.useState(true);
-
-      return (
-        <PopoverContainer
-          title="PopoverContainerSettings"
-          open={open}
-          onClose={(e) => {
-            setOpen(false);
-            onCloseFn(e);
-          }}
-        />
-      );
-    };
-    const wrapper = mount(<MockWrapper />);
-
-    expect(wrapper.update().find(PopoverContainer).prop("open")).toBe(true);
-    act(() => {
-      document.dispatchEvent(
-        new CustomEvent("click", {
-          detail: {
-            enzymeTestingTarget: wrapper?.find(PopoverContainer).getDOMNode(),
-          },
-        })
-      );
-    });
-    expect(wrapper.update().find(PopoverContainer).prop("open")).toBe(true);
-    expect(onCloseFn).not.toHaveBeenCalled();
-  });
-
-  it("should close the container and call onClose when controlled and escape key is pressed", () => {
-    const onCloseFn = jest.fn();
-    const MockWrapper = () => {
-      const [open, setOpen] = React.useState(true);
-
-      return (
-        <PopoverContainer
-          title="PopoverContainerSettings"
-          open={open}
-          onClose={(e) => {
-            setOpen(false);
-            onCloseFn(e);
-          }}
-        />
-      );
-    };
-    const wrapper = mount(<MockWrapper />);
-    act(() => {
-      document.dispatchEvent(
-        new KeyboardEvent("keydown", {
-          key: "Escape",
-          bubbles: true,
-        })
-      );
-    });
-    expect(wrapper.update().find(PopoverContainerContentStyle).exists()).toBe(
-      false
-    );
-    expect(onCloseFn).toHaveBeenCalled();
-  });
-
-  it("should close the container when Select input receives keydown event with escape key pressed and list is closed", () => {
-    const container = document.createElement("div");
-    container.id = "enzymeContainer";
-    document.body.appendChild(container);
-
-    const onCloseFn = jest.fn();
-    const MockWrapper = () => {
-      const [open, setOpen] = React.useState(true);
-
-      return (
-        <>
-          <PopoverContainer
-            title="PopoverContainerSettings"
-            open={open}
-            onClose={(e) => {
-              setOpen(false);
-              onCloseFn(e);
-            }}
-          >
-            <Select name="simple" id="simple" label="color" labelInline>
-              <Option text="Amber" value="1" />
-              <Option text="Black" value="2" />
-            </Select>
-          </PopoverContainer>
-        </>
-      );
-    };
-    const wrapper = mount(<MockWrapper />, {
-      attachTo: document.getElementById("enzymeContainer"),
-    });
-    expect(wrapper.update().find(PopoverContainerContentStyle).exists()).toBe(
-      true
-    );
-
-    const selectInput = document.querySelector(
-      '[data-element="input"][aria-expanded="false"]'
-    );
-
-    act(() => {
-      selectInput?.dispatchEvent(
-        new KeyboardEvent("keydown", {
-          key: "Escape",
-          bubbles: true,
-        })
-      );
-    });
-
-    expect(wrapper.update().find(PopoverContainerContentStyle).exists()).toBe(
-      false
-    );
-    expect(onCloseFn).toHaveBeenCalled();
-
-    container?.parentNode?.removeChild(container);
-  });
-
-  it("should not close the container when escape key is pressed inside of the SelectList", () => {
-    const container = document.createElement("div");
-    container.id = "enzymeContainer";
-    document.body.appendChild(container);
-    const onCloseFn = jest.fn();
-    const MockWrapper = () => {
-      const [open, setOpen] = React.useState(true);
-
-      return (
-        <>
-          <PopoverContainer
-            title="PopoverContainerSettings"
-            open={open}
-            onClose={(e) => {
-              setOpen(false);
-              onCloseFn(e);
-            }}
-          >
-            <Select name="simple" id="simple" label="color" labelInline>
-              <Option text="Amber" value="1" />
-              <Option text="Black" value="2" />
-            </Select>
-          </PopoverContainer>
-        </>
-      );
-    };
-    const wrapper = mount(<MockWrapper />, {
-      attachTo: document.getElementById("enzymeContainer"),
-    });
-    expect(wrapper.update().find(PopoverContainerContentStyle).exists()).toBe(
-      true
-    );
-
-    const selectText = wrapper.find('input[type="text"]').first();
-
-    selectText.simulate("click");
-
-    const expandedSelectInput = document.querySelector(
-      '[data-element="input"][aria-expanded="true"]'
-    );
-
-    act(() => {
-      expandedSelectInput?.dispatchEvent(
-        new KeyboardEvent("keydown", {
-          key: "Escape",
-          bubbles: true,
-        })
-      );
-    });
-
-    expect(wrapper.update().find(PopoverContainerContentStyle).exists()).toBe(
-      true
-    );
-    expect(onCloseFn).not.toHaveBeenCalled();
-
-    container?.parentNode?.removeChild(container);
-  });
-
-  it("keep focus on the open button when container is opened", () => {
-    const container = document.createElement("div");
-    container.id = "enzymeContainer";
-    document.body.appendChild(container);
-    const onCloseFn = jest.fn();
-    const MockWrapper = () => {
-      const [open, setOpen] = React.useState(true);
-
-      return (
-        <>
-          <PopoverContainer
-            title="PopoverContainerSettings"
-            open={open}
-            onClose={(e) => {
-              setOpen(false);
-              onCloseFn(e);
-            }}
-          >
-            <Select name="simple" id="simple" label="color" labelInline>
-              <Option text="Amber" value="1" />
-              <Option text="Black" value="2" />
-            </Select>
-          </PopoverContainer>
-        </>
-      );
-    };
-    const wrapper = mount(<MockWrapper />, {
-      attachTo: document.getElementById("enzymeContainer"),
-    });
-    expect(wrapper.update().find(PopoverContainerContentStyle).exists()).toBe(
-      true
-    );
-
-    const selectText = wrapper.find('input[type="text"]').first();
-
-    selectText.simulate("click");
-
-    const expandedSelectInput = document.querySelector(
-      '[data-element="input"][aria-expanded="true"]'
-    );
-
-    expandedSelectInput?.dispatchEvent(
-      new KeyboardEvent("keydown", {
-        key: "Escape",
-        bubbles: true,
-      })
-    );
-
-    expect(wrapper.update().find(PopoverContainerContentStyle).exists()).toBe(
-      true
-    );
-    expect(onCloseFn).not.toHaveBeenCalled();
-
-    container?.parentNode?.removeChild(container);
-  });
-
-  it("should render with the expected border radius styling", () => {
-    assertStyleMatch(
-      {
-        borderRadius: "var(--borderRadius100)",
-      },
-      render({ open: true }).find(PopoverContainerContentStyle)
-    );
-  });
-});
diff --git a/src/components/popover-container/popover-container.style.ts b/src/components/popover-container/popover-container.style.ts
index dd19257297..52a237ede4 100644
--- a/src/components/popover-container/popover-container.style.ts
+++ b/src/components/popover-container/popover-container.style.ts
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { padding } from "styled-system";
 import { TransitionStatus } from "react-transition-group";
 
@@ -6,38 +6,6 @@ import { baseTheme } from "../../style/themes";
 import IconButton from "../icon-button";
 import StyledIcon from "../icon/icon.style";
 
-function animationToRender({
-  animationState,
-  disableAnimation,
-}: {
-  animationState?: TransitionStatus;
-  disableAnimation?: boolean;
-}) {
-  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;
@@ -66,7 +34,39 @@ const PopoverContainerContentStyle = styled.div<PopoverContainerContentStyleProp
   position: absolute;
   z-index: ${({ theme }) => theme.zIndex.popover};
 
-  ${animationToRender}
+  ${({ disableAnimation }) =>
+    disableAnimation
+      ? css`
+          opacity: 1;
+          transform: none;
+        `
+      : css`
+          &.enter {
+            opacity: 0;
+            transform: translateY(-8px);
+          }
+
+          &.enter-done {
+            opacity: 1;
+            transform: translateY(0);
+            transition-property: opacity, transform;
+            transition-duration: 0.3s;
+            transition-timing-function: cubic-bezier(0.25, 0.25, 0, 1.5);
+          }
+
+          &.exit {
+            opacity: 0;
+            transform: translateY(-8px);
+            transition-property: opacity, transform;
+            transition-duration: 0.3s;
+            transition-timing-function: cubic-bezier(0.25, 0.25, 0, 1.5);
+          }
+
+          &.exit-done {
+            opacity: 0;
+            transform: translateY(0);
+          }
+        `}
 
   :focus {
     outline: none;
diff --git a/src/components/popover-container/popover-container.test.tsx b/src/components/popover-container/popover-container.test.tsx
new file mode 100644
index 0000000000..fc0f111cc3
--- /dev/null
+++ b/src/components/popover-container/popover-container.test.tsx
@@ -0,0 +1,542 @@
+import React from "react";
+import {
+  render,
+  screen,
+  act,
+  fireEvent,
+  waitFor,
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { testStyledSystemPadding } from "../../__spec_helper__/__internal__/test-utils";
+
+import PopoverContainer from "./popover-container.component";
+import { Select, Option } from "../select";
+import useMediaQuery from "../../hooks/useMediaQuery";
+
+jest.mock("../../hooks/useMediaQuery");
+
+beforeEach(() => {
+  jest.useFakeTimers();
+});
+
+afterEach(() => {
+  jest.runOnlyPendingTimers();
+  jest.useRealTimers();
+});
+
+describe("open button", () => {
+  it("renders open button", () => {
+    render(<PopoverContainer>Ta da!</PopoverContainer>);
+
+    expect(screen.getByRole("button")).toBeVisible();
+  });
+
+  it("open button is associated with a popup", () => {
+    render(<PopoverContainer>Ta da!</PopoverContainer>);
+
+    expect(screen.getByRole("button")).toHaveAttribute(
+      "aria-haspopup",
+      "dialog"
+    );
+  });
+
+  it("open button has aria-expanded attribute set when popup is open", async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    render(<PopoverContainer>Ta da!</PopoverContainer>);
+
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute("aria-expanded", "false");
+
+    await user.click(button);
+
+    expect(button).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("renders custom open button provided by renderOpenComponent prop", () => {
+    render(
+      <PopoverContainer
+        renderOpenComponent={({ ref }) => (
+          <button type="button" ref={ref}>
+            Custom Open Button
+          </button>
+        )}
+      >
+        Ta da!
+      </PopoverContainer>
+    );
+
+    expect(screen.getByRole("button")).toHaveTextContent("Custom Open Button");
+  });
+
+  it("consumer can associate custom open button with popup", () => {
+    render(
+      <PopoverContainer
+        renderOpenComponent={({ ref, "aria-haspopup": ariaHasPopup }) => (
+          <button type="button" ref={ref} aria-haspopup={ariaHasPopup}>
+            Custom Open Button
+          </button>
+        )}
+      >
+        Ta da!
+      </PopoverContainer>
+    );
+
+    const openButton = screen.getByRole("button");
+    expect(openButton).toHaveAttribute("aria-haspopup", "dialog");
+  });
+
+  it("consumer can set aria-expanded attribute on custom open button", () => {
+    render(
+      <PopoverContainer
+        renderOpenComponent={({ ref, "aria-expanded": ariaExpanded }) => (
+          <button type="button" ref={ref} aria-expanded={ariaExpanded}>
+            Custom Open Button
+          </button>
+        )}
+      >
+        Ta da!
+      </PopoverContainer>
+    );
+
+    const openButton = screen.getByRole("button");
+    expect(openButton).toHaveAttribute("aria-expanded", "false");
+  });
+});
+
+test("popup has a title when title prop is passed", () => {
+  render(
+    <PopoverContainer title="Custom Title" open>
+      Ta da!
+    </PopoverContainer>
+  );
+
+  expect(screen.getByRole("dialog")).toHaveTextContent("Custom Title");
+});
+
+test("popup uses title prop as its correct accessible name when passed", () => {
+  render(
+    <PopoverContainer title="Custom Title" open>
+      Ta da!
+    </PopoverContainer>
+  );
+
+  expect(screen.getByRole("dialog")).toHaveAccessibleName("Custom Title");
+});
+
+test("popup uses containerAriaLabel prop as its correct accessible name when passed", () => {
+  render(
+    <PopoverContainer containerAriaLabel="Custom Label" open>
+      Ta da!
+    </PopoverContainer>
+  );
+
+  expect(screen.getByRole("dialog")).toHaveAccessibleName("Custom Label");
+});
+
+test("popup has correct accessible description when ariaDescribedBy prop is passed", () => {
+  render(
+    <>
+      <h2 id="subtitle">Custom Subtitle</h2>
+      <PopoverContainer ariaDescribedBy="subtitle" open>
+        Ta da!
+      </PopoverContainer>
+    </>
+  );
+
+  expect(screen.getByRole("dialog")).toHaveAccessibleDescription(
+    "Custom Subtitle"
+  );
+});
+
+test("popup title has correct data tag", () => {
+  render(
+    <PopoverContainer title="Custom Title" open>
+      Ta da!
+    </PopoverContainer>
+  );
+
+  expect(screen.getByText("Custom Title")).toHaveAttribute(
+    "data-element",
+    "popover-container-title"
+  );
+});
+
+describe("close button", () => {
+  it("renders close button in popup when onClose prop is passed", () => {
+    render(
+      <PopoverContainer onClose={() => {}} open>
+        Ta da!
+      </PopoverContainer>
+    );
+
+    expect(screen.getByRole("button", { name: "close" })).toBeVisible();
+  });
+
+  it("renders custom close button provided by renderCloseComponent prop", () => {
+    render(
+      <PopoverContainer
+        open
+        renderCloseComponent={({ onClick }) => (
+          <button type="button" onClick={onClick}>
+            Custom Close Button
+          </button>
+        )}
+      >
+        Ta da!
+      </PopoverContainer>
+    );
+
+    expect(
+      screen.getByRole("button", { name: "Custom Close Button" })
+    ).toBeVisible();
+  });
+
+  it("has correct data tags, when the prop closeButtonDataProps is provided", () => {
+    render(
+      <PopoverContainer
+        open
+        closeButtonDataProps={{
+          "data-element": "foo",
+          "data-role": "bar",
+        }}
+      >
+        Content
+      </PopoverContainer>
+    );
+
+    expect(screen.getByRole("button", { name: "close" })).toHaveAttribute(
+      "data-element",
+      "foo"
+    );
+    expect(screen.getByRole("button", { name: "close" })).toHaveAttribute(
+      "data-role",
+      "bar"
+    );
+  });
+});
+
+test("does not animate in popup when disableAnimation is true", async () => {
+  const user = userEvent.setup({
+    advanceTimers: jest.advanceTimersByTime,
+  });
+  render(<PopoverContainer disableAnimation>Content</PopoverContainer>);
+
+  await user.click(screen.getByRole("button"));
+
+  expect(await screen.findByRole("dialog")).toHaveStyle({
+    position: "fixed",
+    opacity: "1",
+    transform: "none",
+  });
+});
+
+test("does not animate in popup if user consent for animations cannot be determined", async () => {
+  const mockedUseMediaQuery = jest.mocked(useMediaQuery);
+  mockedUseMediaQuery.mockReturnValue(false);
+
+  const user = userEvent.setup({
+    advanceTimers: jest.advanceTimersByTime,
+  });
+  render(<PopoverContainer>Content</PopoverContainer>);
+
+  await user.click(screen.getByRole("button"));
+
+  expect(await screen.findByRole("dialog")).toHaveStyle({
+    position: "fixed",
+    opacity: "1",
+    transform: "none",
+  });
+
+  mockedUseMediaQuery.mockReset();
+});
+
+test("popup traps focus when shouldCoverButton prop is true", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <PopoverContainer shouldCoverButton open onClose={() => {}}>
+      Content
+    </PopoverContainer>
+  );
+
+  const closeButton = screen.getByRole("button", { name: "close" });
+  fireEvent.focus(closeButton);
+
+  await user.tab();
+
+  expect(closeButton).toHaveFocus();
+});
+
+test("popup allows outside focus when shouldCoverButton prop is false", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <PopoverContainer shouldCoverButton={false} open onClose={() => {}}>
+      Content
+    </PopoverContainer>
+  );
+
+  const closeButton = screen.getByRole("button", { name: "close" });
+  fireEvent.focus(closeButton);
+
+  await user.tab();
+
+  expect(closeButton).not.toHaveFocus();
+});
+
+test.each([
+  ["left", "bottom-end"],
+  ["right", "bottom-start"],
+] as const)(
+  "computes popup positioning correctly when position prop is '%s'",
+  async (position, placement) => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    render(<PopoverContainer position={position}>Content</PopoverContainer>);
+
+    await user.click(screen.getByRole("button"));
+
+    expect(await screen.findByRole("dialog")).toHaveAttribute(
+      "data-floating-placement",
+      placement
+    );
+  }
+);
+
+test("popup visibility is controllable via open prop", async () => {
+  const ControlledPopoverContainer = () => {
+    const [open, setOpen] = React.useState(false);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen((prev) => !prev)}>
+          Toggle popup
+        </button>
+        <PopoverContainer open={open} onClose={() => {}}>
+          Content
+        </PopoverContainer>
+        å
+      </>
+    );
+  };
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(<ControlledPopoverContainer />);
+
+  const toggleButton = screen.getByRole("button", { name: "Toggle popup" });
+  await user.click(toggleButton);
+
+  expect(await screen.findByRole("dialog")).toBeVisible();
+
+  await user.click(toggleButton);
+
+  await waitFor(() => {
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+});
+
+describe("opening the popup", () => {
+  it("opens popup when open button is clicked", async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    render(<PopoverContainer>Ta da!</PopoverContainer>);
+
+    await user.click(screen.getByRole("button"));
+
+    const popup = await screen.findByRole("dialog");
+    expect(popup).toBeVisible();
+    expect(popup).toHaveTextContent("Ta da!");
+  });
+
+  it("opens popup when open button is selected via the keyboard", async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    render(<PopoverContainer>Ta da!</PopoverContainer>);
+
+    await user.tab();
+    await user.keyboard("{Enter}");
+
+    const popup = await screen.findByRole("dialog");
+    expect(popup).toBeVisible();
+    expect(popup).toHaveTextContent("Ta da!");
+  });
+
+  it("calls onOpen callback when popup is opened", async () => {
+    const onOpen = jest.fn();
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    render(<PopoverContainer onOpen={onOpen}>Content</PopoverContainer>);
+
+    await user.click(screen.getByRole("button"));
+
+    await waitFor(() => {
+      expect(onOpen).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it("open button still has focus after popup is opened", async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    render(<PopoverContainer>Ta da!</PopoverContainer>);
+
+    const button = screen.getByRole("button");
+    await user.click(button);
+    await screen.findByRole("dialog");
+
+    expect(button).toHaveFocus();
+  });
+});
+
+describe("closing the popup", () => {
+  it("closes popup when close button is clicked", async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    render(<PopoverContainer>Content</PopoverContainer>);
+
+    await user.click(screen.getByRole("button"));
+
+    await user.click(await screen.findByRole("button", { name: "close" }));
+
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  it("closes popup when close button is selected via the keyboard", async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    render(<PopoverContainer>Content</PopoverContainer>);
+
+    await user.click(screen.getByRole("button"));
+
+    const closeButton = await screen.findByRole("button", { name: "close" });
+    closeButton.focus();
+
+    await user.keyboard("{Enter}");
+
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  it("closes popup when Escape key is pressed", async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    render(<PopoverContainer>Content</PopoverContainer>);
+
+    await user.click(screen.getByRole("button"));
+    await screen.findByRole("dialog");
+
+    await user.keyboard("{Escape}");
+
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  it("closes popup when outside content is clicked", async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    render(
+      <>
+        <PopoverContainer onClose={() => {}}>Content</PopoverContainer>
+        <p>Outside popup</p>
+      </>
+    );
+
+    await user.click(screen.getByRole("button"));
+    await screen.findByRole("dialog");
+
+    await user.click(screen.getByText("Outside popup"));
+
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  it("focuses open button after popup is closed", async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    render(<PopoverContainer>Ta da!</PopoverContainer>);
+
+    const button = screen.getByRole("button");
+    await user.click(button);
+
+    await user.click(await screen.findByRole("button", { name: "close" }));
+
+    expect(button).toHaveFocus();
+  });
+
+  it("calls onClose callback when popup is closed", async () => {
+    const onClose = jest.fn();
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    render(<PopoverContainer onClose={onClose}>Content</PopoverContainer>);
+
+    await user.click(screen.getByRole("button"));
+
+    await user.click(await screen.findByRole("button", { name: "close" }));
+
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it("closes popup when open button is clicked twice", async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    render(
+      <PopoverContainer openButtonAriaLabel="open popup" onClose={() => {}}>
+        Content
+      </PopoverContainer>
+    );
+
+    const openButton = screen.getByRole("button", { name: "open popup" });
+    await user.click(openButton);
+    await user.click(openButton);
+
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  it("pressing Escape key does not close the popup, when nested popup content is open inside it", async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    render(
+      <PopoverContainer onClose={() => {}}>
+        <Select name="colour" id="colour" label="Select colour">
+          <Option text="Amber" value="1" />
+          <Option text="Black" value="2" />
+        </Select>
+      </PopoverContainer>
+    );
+
+    await user.click(screen.getByRole("button"));
+
+    // open select list
+    await user.click(await screen.findByRole("combobox"));
+    await screen.findByRole("listbox");
+
+    // should close select list only
+    await user.keyboard("{Escape}");
+
+    expect(screen.getByRole("dialog")).toBeVisible();
+  });
+
+  it("triggers closing animation sequence with correct timing when closing popup", async () => {
+    const mockedUseMediaQuery = jest.mocked(useMediaQuery);
+    mockedUseMediaQuery.mockReturnValue(true);
+
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    render(<PopoverContainer>Content</PopoverContainer>);
+
+    await user.click(screen.getByRole("button"));
+
+    const popup = await screen.findByRole("dialog");
+    await user.click(screen.getByRole("button", { name: "close" }));
+
+    expect(popup).toHaveClass("exit");
+
+    act(() => {
+      jest.advanceTimersByTime(300);
+    });
+
+    expect(popup).toHaveClass("exit-done");
+    mockedUseMediaQuery.mockReset();
+  });
+});
+
+testStyledSystemPadding(
+  (props) => (
+    <PopoverContainer open title="My popup" {...props}>
+      Ta da!
+    </PopoverContainer>
+  ),
+  { p: "16px 24px" },
+  (wrapper) => wrapper.find("[role='dialog']")
+);