@simplybusiness/mobius 4.1.0 → 4.1.2

package/src/components/Popover/Popover.mdx

@@ -8,9 +8,9 @@ import { Popover } from "./Popover";
 
 The `Popover` component is used to display popup tooltips with additional information for users. Children of the Popover become tooltip contents and `trigger` is a render prop for the element that will present the Popover when clicked.
 
-When presented, the Popover will align (vertically) with the trigger element. By default it will appear below.
+When presented, the Popover will align horizontally with the centre of the trigger element, and by default it will appear below.
 
-You can dismiss a Popover by clicking the close icon or by pressing `Enter` or `Escape` keys.
+You can dismiss a Popover by clicking the close icon, clicking outside, or by pressing `Enter` or `Escape` keys.
 
 Focus always remains on the element that triggers the Popover; its content should not accept focus.
 
@@ -38,40 +38,32 @@ return (
 
 <Story of={PopoverStories.Normal} />
 
-## QCP Covers
+## Custom Trigger
 
-This is a customised trigger as used in the Quote Comparison Page, which has a large, clickable trigger (text and icon), but a small target for aligning the Popover arrow (just the icon).
-
-To achieve this, you need to control `isOpen` state with the clickable element and only use Popover to wrap the element you want to align with.
+This is a customised trigger as used in the Quote Comparison Page, which has a large, clickable link (text and icon).
 
 ```jsx
 import { Popover, Button, Flex } from "@simplybusiness/mobius";
 
-const [isOpen, setIsOpen] = useState<boolean>(false);
-const handleClick = () => setIsOpen(!isOpen);
-
-// Component passed to trigger prop must be wrapped with forwardRef()
-const Icon = forwardRef(
-  (props: IconProps, ref: Ref<SVGSVGElement>) => (
-    <svg ref={ref} {...props}>...</svg>
-  ),
-);
-
 return (
-  <Button variant="ghost" onClick={handleClick}>
-    <Flex>
-      <span>Occurrence Limit</span>
-      <Popover isOpen={isOpen} trigger={<Icon />}>
-        This is the maximum amount of money you&apos;ll get to cover a single
-        incident that occurs during the policy period, regardless of when
-        it&apos;s reported.
-      </Popover>
-    </Flex>
-  </Button>
+  <Popover
+    trigger={
+      <Button variant="ghost">
+        <Flex>
+          <span>Occurrence Limit</span>
+          <QuestionIcon />
+        </Flex>
+      </Button>
+    }
+  >
+    This is the maximum amount of money you&apos;ll get to cover a single
+    incident that occurs during the policy period, regardless of when it&apos;s
+    reported.
+  </Popover>
 );
 ```
 
-<Canvas of={PopoverStories.QCP} />
+<Canvas of={PopoverStories.CustomTrigger} />
 
 ## Props
 

package/src/components/Popover/Popover.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta } from "@storybook/react";
-import { Ref, forwardRef, useState } from "react";
+import { Ref, forwardRef } from "react";
 import { Button, Flex, Popover, PopoverProps } from "..";
 import { excludeControls } from "../../utils/excludeControls";
 
@@ -7,9 +7,6 @@ export default {
   title: "Components/Popover",
   component: Popover,
   argTypes: {
-    isOpen: {
-      control: { type: "boolean" },
-    },
     ...excludeControls(
       "className",
       "children",
@@ -17,6 +14,7 @@ export default {
       "id",
       "onOpen",
       "onClose",
+      "anchor",
     ),
   },
   decorators: [
@@ -70,36 +68,28 @@ const QuestionIcon = forwardRef(
 export const Normal: Meta<typeof Popover> = {
   render: (args: PopoverProps) => <Popover {...args} />,
   args: {
-    isOpen: undefined,
     children: <>No way! Now I know everything I need to 🚀.</>,
     trigger: <Button variant="primary">If only I had more information</Button>,
   },
 };
 
-export const QCP: Meta<typeof Popover> = {
-  render: (args: PopoverProps) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [isOpen, setIsOpen] = useState<boolean>(false);
-    const handleClick = () => setIsOpen(!isOpen);
-    return (
-      <div className="popover-example">
-        <Button variant="ghost" onClick={handleClick}>
-          <Flex>
-            <span>Occurrence Limit</span>
-            <Popover {...args} isOpen={isOpen} />
-          </Flex>
-        </Button>
-      </div>
-    );
-  },
-  args: {
-    trigger: <QuestionIcon />,
-    children: (
-      <>
+export const CustomTrigger: Meta<typeof Popover> = {
+  render: () => (
+    <div className="popover-example">
+      <Popover
+        trigger={
+          <Button variant="ghost">
+            <Flex>
+              <span>Occurrence Limit</span>
+              <QuestionIcon />
+            </Flex>
+          </Button>
+        }
+      >
         This is the maximum amount of money you&apos;ll get to cover a single
         incident that occurs during the policy period, regardless of when
         it&apos;s reported.
-      </>
-    ),
-  },
+      </Popover>
+    </div>
+  ),
 };

package/src/components/Popover/Popover.story.styles.css

@@ -1,9 +1,10 @@
 .popover-example {
   max-width: 500px;
+  min-height: 220px;
   margin: 0 auto;
 }
 
-.popover-example .mobius\/Button {
+.popover-example > .mobius\/Button {
   border: none;
   padding: 0;
   font-weight: var(--font-weight-normal);
@@ -19,7 +20,7 @@
   margin-bottom: 6px;
 }
 
-.popover-example .mobius\/PopoverToggle {
+.popover-example .mobius\/PopoverToggle svg {
   width: 16px;
   margin-left: 4px;
 }

package/src/components/Popover/Popover.test.tsx

@@ -1,7 +1,6 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { Popover } from ".";
 
-const CONTAINER_ID = "react-tiny-popover-container";
 const CONTAINER_CLASS_NAME = "mobius/PopoverContainer";
 const TOGGLE_CLASS_NAME = "mobius/PopoverToggle";
 const POPOVER_CLASS_NAME = "mobius/Popover";
@@ -63,8 +62,7 @@ describe("Popover", () => {
 
       fireEvent.click(button);
 
-      const popoverContainer = document.querySelector(`#${CONTAINER_ID}`)
-        ?.firstChild;
+      const popoverContainer = button.nextSibling;
 
       await waitFor(() => {
         expect(popoverContainer).toHaveClass("mobius");
@@ -99,39 +97,38 @@ describe("Popover", () => {
 
       fireEvent.click(button);
 
-      const popoverContainer = document.querySelector(`#${CONTAINER_ID}`);
+      const popoverContainer = button.nextSibling;
 
       await waitFor(() => {
-        expect(popoverContainer?.firstChild).toHaveClass(customClassName);
+        expect(popoverContainer).toHaveClass(customClassName);
       });
     });
-  });
 
-  describe("events", () => {
-    describe("given isOpen prop is set", () => {
-      it("should not call onOpen or onClose when first rendered", () => {
-        const sampleText = "Sample Text";
-        const triggerText = "Click me";
-        const onOpen = jest.fn();
-        const onClose = jest.fn();
-
-        render(
-          <Popover
-            isOpen={false}
-            trigger={<button type="button">{triggerText}</button>}
-            onOpen={onOpen}
-            onClose={onClose}
-          >
-            {sampleText}
-          </Popover>,
-        );
-
-        expect(onOpen).not.toHaveBeenCalled();
-        expect(onClose).not.toHaveBeenCalled();
-      });
+    it("passes trigger class names", () => {
+      const sampleText = "Sample Text";
+      const triggerText = "Click me";
+      const customClassName = "custom-trigger-class-name";
+
+      render(
+        <Popover
+          trigger={
+            <button type="button" className={customClassName}>
+              {triggerText}
+            </button>
+          }
+        >
+          {sampleText}
+        </Popover>,
+      );
+
+      const button = screen.getByText(triggerText);
+
+      expect(button).toHaveClass(customClassName);
     });
+  });
 
-    it("calls onOpen when Popover is opened", () => {
+  describe("events", () => {
+    it("calls onOpen when Popover is opened", async () => {
       const sampleText = "Sample Text";
       const triggerText = "Click me";
       const onOpen = jest.fn();
@@ -147,15 +144,17 @@ describe("Popover", () => {
         </Popover>,
       );
 
-      const button = screen.getByText(triggerText);
+      const toggle = screen.getByText(triggerText);
 
-      fireEvent.click(button);
+      fireEvent.click(toggle);
 
-      expect(onOpen).toHaveBeenCalled();
-      expect(onClose).not.toHaveBeenCalled();
+      await waitFor(() => {
+        expect(onOpen).toHaveBeenCalled();
+        expect(onClose).not.toHaveBeenCalled();
+      });
     });
 
-    it("calls onClose when Popover is closed", () => {
+    it("calls onClose when Popover is closed", async () => {
       const sampleText = "Sample Text";
       const triggerText = "Click me";
       const onOpen = jest.fn();
@@ -171,16 +170,18 @@ describe("Popover", () => {
         </Popover>,
       );
 
-      const button = screen.getByText(triggerText);
+      const toggle = screen.getByText(triggerText);
 
-      fireEvent.click(button);
+      fireEvent.click(toggle);
 
       const closeButton = screen.getByLabelText("Close");
 
       fireEvent.click(closeButton);
 
-      expect(onClose).toHaveBeenCalled();
-      expect(onOpen).toHaveBeenCalledTimes(1);
+      await waitFor(() => {
+        expect(onClose).toHaveBeenCalled();
+        expect(onOpen).toHaveBeenCalledTimes(1);
+      });
     });
   });
 });

package/src/components/Popover/Popover.tsx

@@ -1,19 +1,25 @@
+import {
+  FloatingArrow,
+  arrow,
+  autoUpdate,
+  offset,
+  useDismiss,
+  useFloating,
+  useInteractions,
+} from "@floating-ui/react";
 import { cross } from "@simplybusiness/icons";
+import classNames from "classnames";
 import {
   ReactElement,
   ReactNode,
   Ref,
   RefAttributes,
   cloneElement,
-  useCallback,
-  useEffect,
   useRef,
   useState,
 } from "react";
-import classNames from "classnames";
-import { Popover as TinyPopover } from "react-tiny-popover";
 import { useWindowEvent } from "../../hooks";
-import { DOMProps } from "../../types/dom";
+import { DOMProps } from "../../types";
 import { Button } from "../Button";
 import { Icon } from "../Icon";
 
@@ -24,7 +30,6 @@ export interface PopoverProps
     RefAttributes<PopoverElementType> {
   children?: ReactNode;
   trigger: ReactElement;
-  isOpen?: boolean;
   /** Callback that fires each time the accordion is opened */
   onOpen?: () => void;
   /** Callback that fires each time the accordion is closed */
@@ -35,87 +40,83 @@ export interface PopoverProps
 
 export type PopoverRef = Ref<PopoverElementType>;
 
+const OFFSET_FROM_CONTENT_DEFAULT = 10;
+
 export const Popover = (props: PopoverProps) => {
-  const popoverRef = useRef(null);
-  const triggerRef = useRef(null);
-  const { trigger, children, isOpen, onOpen, onClose, className } = props;
-  const previousIsOpen = useRef<boolean | undefined>(isOpen);
-  const hasExternalState = typeof isOpen !== "undefined";
-  const [open, setOpen] = useState(isOpen);
+  const { trigger, children, onOpen, onClose, className } = props;
+  const arrowRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      arrow({
+        element: arrowRef,
+      }),
+      offset(OFFSET_FROM_CONTENT_DEFAULT),
+    ],
+  });
+  const dismiss = useDismiss(context, {
+    bubbles: true,
+    outsidePress: (event: MouseEvent) => {
+      // Prevent 'onClose' from firing when clicking the toggle to close
+      const toggle = refs.reference.current as HTMLElement;
+      const isToggleClick = !toggle?.contains(event.target as HTMLElement);
+      if (isToggleClick) {
+        onClose?.();
+      }
+      return true;
+    },
+  });
+  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
+
   const containerClasses = classNames(
     "mobius",
     "mobius/PopoverContainer",
     className,
   );
-  const noop = () => {};
-
-  const openPopover = useCallback(() => {
-    setOpen(true);
-
-    if (onOpen) {
-      onOpen();
-    }
-  }, [onOpen]);
-
-  const closePopover = useCallback(() => {
-    setOpen(false);
-
-    if (onClose) {
-      onClose();
-    }
-  }, [onClose]);
 
-  const handleClick = () => {
-    if (open) {
-      closePopover();
+  const toggleVisibility = () => {
+    if (isOpen) {
+      setIsOpen(false);
+      onClose?.();
       return;
     }
 
-    openPopover();
+    setIsOpen(true);
+    onOpen?.();
   };
 
   const triggerComponent = cloneElement(trigger, {
-    className: "mobius/PopoverToggle",
-    onClick: hasExternalState ? noop : handleClick,
+    ref: refs.setReference,
+    className: classNames(trigger.props.className, "mobius/PopoverToggle"),
+    onClick: toggleVisibility,
+    ...getReferenceProps(),
   });
 
   useWindowEvent("keydown", e => {
-    if (open && e.key === "Escape") {
-      closePopover();
+    if (e.key === "Escape") {
+      onClose?.();
     }
   });
 
-  useEffect(() => {
-    if (isOpen) {
-      openPopover();
-      return;
-    }
-
-    // Prevent 'onClose' being called when
-    // 'isOpen === false' on initial render
-    if (previousIsOpen.current === isOpen) {
-      previousIsOpen.current = undefined;
-      return;
-    }
-
-    if (!isOpen) {
-      closePopover();
-    }
-  }, [isOpen, closePopover, openPopover]);
-
   return (
-    <TinyPopover
-      isOpen={!!open}
-      positions={["bottom"]}
-      ref={triggerRef}
-      content={
-        <div className={containerClasses} ref={popoverRef}>
+    <>
+      {triggerComponent}
+      {isOpen && (
+        <div
+          className={containerClasses}
+          ref={refs.setFloating}
+          style={floatingStyles}
+          {...getFloatingProps()}
+        >
           <div className="mobius/Popover">
             <header className="mobius/PopoverHeader">
               <Button
                 type="button"
                 className="mobius/PopoverCloseButton"
-                onClick={handleClick}
+                onClick={toggleVisibility}
                 aria-label="Close"
                 variant="ghost"
               >
@@ -128,10 +129,9 @@ export const Popover = (props: PopoverProps) => {
             </header>
             <div className="mobius/PopoverBody">{children}</div>
           </div>
+          <FloatingArrow ref={arrowRef} context={context} width={20} />
         </div>
-      }
-    >
-      {triggerComponent}
-    </TinyPopover>
+      )}
+    </>
   );
 };