@simplybusiness/mobius 4.3.0 → 4.3.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",

package/src/components/Drawer/Drawer.tsx

@@ -21,6 +21,8 @@ import { mergeRefs } from "../../utils";
 export type DialogElementType = HTMLDialogElement;
 export type DialogRef = Ref<DialogElementType>;
 
+const TRANSITION_CLASS_NAME = "--transition";
+
 const Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {
   const {
     isOpen,
@@ -33,8 +35,8 @@ const Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {
     children,
   } = props;
   const hasOpened = useRef<boolean>(false);
-  const modalRef = useRef<HTMLDialogElement>(null);
-  const dialog = modalRef.current as HTMLDialogElement;
+  const modalRef = useRef<HTMLDialogElement | null>(null);
+  const hasDialogSupport = supportsDialog();
 
   // Fire onOpen once
   if (onOpen && !hasOpened.current) {
@@ -44,7 +46,7 @@ const Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {
 
   useBodyScrollLock({ enabled: isOpen });
 
-  // Add close handler, to enable closing animations
+  // Add close handler, to enable closing transitions
   const handleClose = useCallback(
     (event?: SyntheticEvent<HTMLElement, Event>) => {
       if (event) {
@@ -53,22 +55,25 @@ const Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {
       }
 
       const doClose = () => {
-        dialog?.close();
+        modalRef.current?.close();
         onClose?.();
       };
 
-      // Delay close to allow exit animation
-      dialog?.classList.add("close");
-      dialog?.addEventListener(
-        "animationend",
-        () => {
-          dialog.classList.remove("close");
-          doClose();
-        },
-        { once: true },
-      );
+      // Delay close to allow backdrop exit transition
+      if (hasDialogSupport) {
+        modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);
+        modalRef.current?.addEventListener(
+          "transitionend",
+          () => {
+            doClose();
+          },
+          { once: true },
+        );
+      } else {
+        doClose();
+      }
     },
-    [onClose, dialog],
+    [onClose, hasDialogSupport],
   );
 
   const modalClasses = classNames(
@@ -76,27 +81,35 @@ const Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {
     "mobius/Drawer",
     `--${direction}`,
     className,
+    {
+      "--should-transition": hasDialogSupport,
+    },
   );
 
   // Add polyfill for HTML Dialog in old browsers
   useEffect(() => {
     async function toggleModal() {
-      if (!supportsDialog() && typeof window !== "undefined") {
+      if (
+        !hasDialogSupport &&
+        typeof window !== "undefined" &&
+        modalRef.current !== null
+      ) {
         // eslint-disable-next-line import/no-extraneous-dependencies
         const { default: dialogPolyfill } = await import("dialog-polyfill");
-        dialogPolyfill.registerDialog(modalRef.current as HTMLDialogElement);
+        dialogPolyfill.registerDialog(modalRef.current);
       }
 
-      if (isOpen) {
+      if (isOpen && !modalRef.current?.open) {
         modalRef.current?.showModal();
+        modalRef.current?.classList.add(TRANSITION_CLASS_NAME);
         onOpen?.();
-      } else if (modalRef.current?.open) {
+      } else if (!isOpen && modalRef.current?.open) {
         handleClose();
       }
     }
 
     toggleModal();
-  }, [isOpen, onOpen, handleClose]);
+  }, [isOpen, onOpen, handleClose, hasDialogSupport]);
 
   return (
     <dialog

package/src/components/Modal/Modal.mdx

@@ -266,7 +266,6 @@ The following HTML is rendered for a simple Modal:
 Class names are augmented with the following flags if true (affected classes shown above):
 
 - \--slide-up
-- \--has-reduced-motion
 - \--is-fullscreen
 
 ---

package/src/components/Modal/Modal.stories.tsx

@@ -89,8 +89,8 @@ const WithAnimationDemo = (props: ModalProps) => {
         Show Modal With Animation 🧙‍♂️
       </Button>
       <Modal
-        {...props}
         animation="slideUp"
+        {...props}
         onClose={() => setOpen(false)}
         isOpen={open}
       >

package/src/components/Modal/Modal.test.tsx

@@ -72,19 +72,6 @@ describe("Modal", () => {
     });
   });
 
-  describe("given the user has reduced motion preference enabled", () => {
-    beforeEach(() => {
-      jestMockMatchMedia(false);
-    });
-
-    it("renders with appropriate class name", () => {
-      render(<Modal isOpen />);
-
-      const dialog = screen.getByRole("dialog");
-      expect(dialog).toHaveClass("--has-reduced-motion");
-    });
-  });
-
   describe("pressing close button", () => {
     it("should close the modal", async () => {
       const App = () => {

package/src/components/Modal/Modal.tsx

@@ -20,6 +20,8 @@ import { mergeRefs } from "../../utils";
 export type ModalElementType = HTMLDialogElement;
 export type ModalRef = Ref<ModalElementType>;
 
+const TRANSITION_CLASS_NAME = "--transition";
+
 const Modal = forwardRef((props: ModalProps, ref: ModalRef) => {
   const {
     isOpen,
@@ -55,11 +57,8 @@ const Modal = forwardRef((props: ModalProps, ref: ModalRef) => {
   }
 
   const hasOpened = useRef<boolean>(false);
-  const modalRef = useRef<HTMLDialogElement>(null);
-  const dialog = modalRef.current as HTMLDialogElement;
-  const noPreference = window?.matchMedia(
-    "(prefers-reduced-motion: no-preference)",
-  );
+  const modalRef = useRef<HTMLDialogElement | null>(null);
+  const hasDialogSupport = supportsDialog();
 
   // Fire onOpen once
   if (onOpen && !hasOpened.current) {
@@ -78,16 +77,16 @@ const Modal = forwardRef((props: ModalProps, ref: ModalRef) => {
       }
 
       const doClose = () => {
-        dialog?.close();
+        modalRef.current?.close();
         onClose?.();
       };
 
-      if (animation) {
-        dialog?.classList.add("close");
-        dialog?.addEventListener(
-          "animationend",
+      // Delay close to allow backdrop exit transition
+      if (hasDialogSupport && animation) {
+        modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);
+        modalRef.current?.addEventListener(
+          "transitionend",
           () => {
-            dialog.classList.remove("close");
             doClose();
           },
           { once: true },
@@ -96,17 +95,17 @@ const Modal = forwardRef((props: ModalProps, ref: ModalRef) => {
         doClose();
       }
     },
-    [animation, dialog, onClose],
+    [onClose, hasDialogSupport, animation],
   );
 
   const modalClasses = classNames(
     "mobius",
     "mobius/Modal",
     {
-      animation,
+      "--no-dialog-support": !hasDialogSupport, // This class is used to correctly position modal in x/y middle on iOS <= 15.2
+      "--should-transition": hasDialogSupport && animation,
       "--slide-up": animation === "slideUp",
       "--fade": animation === "fade",
-      "--has-reduced-motion": !noPreference.matches,
       "--is-fullscreen": isFullScreen,
     },
     className,
@@ -115,22 +114,27 @@ const Modal = forwardRef((props: ModalProps, ref: ModalRef) => {
   // Add polyfill for HTML Dialog in old browsers
   useEffect(() => {
     async function toggleModal() {
-      if (!supportsDialog() && typeof window !== "undefined") {
+      if (
+        !hasDialogSupport &&
+        typeof window !== "undefined" &&
+        modalRef.current !== null
+      ) {
         // eslint-disable-next-line import/no-extraneous-dependencies
         const { default: dialogPolyfill } = await import("dialog-polyfill");
-        dialogPolyfill.registerDialog(modalRef.current as HTMLDialogElement);
+        dialogPolyfill.registerDialog(modalRef.current);
       }
 
-      if (isOpen) {
+      if (isOpen && !modalRef.current?.open) {
         modalRef.current?.showModal();
+        modalRef.current?.classList.add(TRANSITION_CLASS_NAME);
         onOpen?.();
-      } else if (modalRef.current?.open) {
+      } else if (!isOpen && modalRef.current?.open) {
         handleClose();
       }
     }
 
     toggleModal();
-  }, [isOpen, onOpen, handleClose]);
+  }, [isOpen, onOpen, handleClose, hasDialogSupport]);
 
   return (
     <dialog