@simplybusiness/mobius 4.5.0 → 4.5.1

package/src/components/Drawer/Drawer.tsx

@@ -1,26 +1,17 @@
 "use client";
 
 import classNames from "classnames/dedupe";
-import {
-  Ref,
-  SyntheticEvent,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-} from "react";
-import { useBodyScrollLock } from "../../hooks/useBodyScrollLock";
-import { supportsDialog } from "../../utils/polyfill-tests";
+import { Ref, forwardRef, useMemo, useRef } from "react";
 import { VisuallyHidden } from "../VisuallyHidden";
 import { DrawerProps } from "./types";
-import { mergeRefs } from "../../utils";
+import { mergeRefs, supportsDialog } from "../../utils";
 import { DrawerContext } from "./DrawerContext";
+import { useDialog } from "../../hooks";
 
 export type DialogElementType = HTMLDialogElement;
 export type DialogRef = Ref<DialogElementType>;
 
-const TRANSITION_CLASS_NAME = "--transition";
+const TRANSITION_CSS_VARIABLE = "--drawer-transition-duration";
 
 const Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {
   const {
@@ -33,111 +24,42 @@ const Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {
     onClose,
     children,
   } = props;
-  const hasOpened = useRef<boolean>(false);
-  const modalRef = useRef<HTMLDialogElement | null>(null);
-  const hasDialogSupport = supportsDialog();
-
-  // Fire onOpen once
-  if (onOpen && !hasOpened.current) {
-    onOpen();
-    hasOpened.current = true;
-  }
-
-  useBodyScrollLock({ enabled: isOpen });
-
-  // Add close handler, to enable closing transitions
-  const handleClose = useCallback(
-    (event?: SyntheticEvent<HTMLElement, Event>) => {
-      if (event) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-
-      // Name the callback function, so we can add and remove event listener
-      const transitionCallback = (e: Event) => {
-        // Close drawer only if the transition is on the dialog element
-        // As it can be on a child element (ie `<Button>` inside the drawer)
-        if (e.target === modalRef.current) {
-          // eslint-disable-next-line @typescript-eslint/no-use-before-define
-          doClose();
-        }
-      };
-
-      const doClose = () => {
-        modalRef.current?.close();
-        onClose?.();
-        modalRef.current?.removeEventListener(
-          "transitionend",
-          transitionCallback,
-        );
-      };
-
-      // Delay close to allow backdrop exit transition
-      if (hasDialogSupport) {
-        modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);
-        modalRef.current?.addEventListener("transitionend", transitionCallback);
-      } else {
-        doClose();
-      }
+  const shouldTransition = supportsDialog();
+  const dialogRef = useRef<HTMLDialogElement | null>(null);
+  const { close } = useDialog({
+    ref: dialogRef,
+    isOpen,
+    onOpen,
+    onClose,
+    transition: {
+      isEnabled: true,
+      CSSVariable: TRANSITION_CSS_VARIABLE,
     },
-    [onClose, hasDialogSupport],
-  );
+  });
 
-  const modalClasses = classNames(
+  const dialogClasses = classNames(
     "mobius",
     "mobius/Drawer",
     `--${direction}`,
     className,
     {
-      "--should-transition": hasDialogSupport,
+      "--should-transition": shouldTransition,
     },
   );
 
-  // Add polyfill for HTML Dialog in old browsers
-  useEffect(() => {
-    async function toggleModal() {
-      if (
-        !hasDialogSupport &&
-        typeof window !== "undefined" &&
-        modalRef.current !== null
-      ) {
-        // eslint-disable-next-line import/no-extraneous-dependencies
-        const { default: dialogPolyfill } = await import("dialog-polyfill");
-        try {
-          dialogPolyfill.registerDialog(modalRef.current);
-        } catch (error) {
-          // In iOS 15 <= 15.2 this intermittently fails with
-          // TypeError: null is not an object (evaluating 'element.showModal')
-          // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️
-          console.error("Failed to load dialog-polyfill", error);
-        }
-      }
-
-      if (isOpen && !modalRef.current?.open) {
-        modalRef.current?.showModal();
-        modalRef.current?.classList.add(TRANSITION_CLASS_NAME);
-        onOpen?.();
-      } else if (!isOpen && modalRef.current?.open) {
-        handleClose();
-      }
-    }
-
-    toggleModal();
-  }, [isOpen, onOpen, handleClose, hasDialogSupport]);
-
   const contextValue = useMemo(
     () => ({
-      onClose: handleClose,
+      onClose: close,
       closeLabel,
     }),
-    [handleClose, closeLabel],
+    [close, closeLabel],
   );
 
   return (
     <dialog
-      ref={mergeRefs([modalRef, ref])}
-      onCancel={handleClose}
-      className={modalClasses}
+      ref={mergeRefs([dialogRef, ref])}
+      onCancel={close}
+      className={dialogClasses}
       aria-describedby="screen-reader-announce"
     >
       <VisuallyHidden>

package/src/components/Modal/Modal.tsx

@@ -1,25 +1,17 @@
 "use client";
 
 import classNames from "classnames/dedupe";
-import {
-  Ref,
-  SyntheticEvent,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-} from "react";
-import { useBodyScrollLock } from "../../hooks/useBodyScrollLock";
+import { Ref, forwardRef, useMemo, useRef } from "react";
 import { supportsDialog } from "../../utils/polyfill-tests";
 import { ModalProps } from "./types";
 import { mergeRefs } from "../../utils";
 import { ModalContext } from "./ModalContext";
+import { useDialog } from "../../hooks";
 
 export type ModalElementType = HTMLDialogElement;
 export type ModalRef = Ref<ModalElementType>;
 
-const TRANSITION_CLASS_NAME = "--transition";
+const TRANSITION_CSS_VARIABLE = "--modal-transition-duration";
 
 const Modal = forwardRef((props: ModalProps, ref: ModalRef) => {
   const {
@@ -55,62 +47,25 @@ const Modal = forwardRef((props: ModalProps, ref: ModalRef) => {
     }
   }
 
-  const hasOpened = useRef<boolean>(false);
-  const modalRef = useRef<HTMLDialogElement | null>(null);
-  const hasDialogSupport = supportsDialog();
-
-  // Fire onOpen once
-  if (onOpen && !hasOpened.current) {
-    onOpen();
-    hasOpened.current = true;
-  }
-
-  useBodyScrollLock({ enabled: isOpen });
-
-  // Add close handler, to enable closing animations
-  const handleClose = useCallback(
-    (event?: SyntheticEvent<HTMLElement, Event>) => {
-      if (event) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-
-      // Name the callback function, so we can add and remove event listener
-      const transitionCallback = (e: Event) => {
-        // Close modal only if the transition is on the dialog element
-        // As it can be on a child element (ie `<Button>` inside the drawer)
-        if (e.target === modalRef.current) {
-          // eslint-disable-next-line @typescript-eslint/no-use-before-define
-          doClose();
-        }
-      };
-
-      const doClose = () => {
-        modalRef.current?.close();
-        onClose?.();
-        modalRef.current?.removeEventListener(
-          "transitionend",
-          transitionCallback,
-        );
-      };
-
-      // Delay close to allow backdrop exit transition
-      if (hasDialogSupport && animation) {
-        modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);
-        modalRef.current?.addEventListener("transitionend", transitionCallback);
-      } else {
-        doClose();
-      }
+  const shouldTransition = supportsDialog();
+  const dialogRef = useRef<HTMLDialogElement | null>(null);
+  const { close } = useDialog({
+    ref: dialogRef,
+    isOpen,
+    onOpen,
+    onClose,
+    transition: {
+      isEnabled: !!animation,
+      CSSVariable: TRANSITION_CSS_VARIABLE,
     },
-    [onClose, hasDialogSupport, animation],
-  );
+  });
 
   const modalClasses = classNames(
     "mobius",
     "mobius/Modal",
     {
-      "--no-dialog-support": !hasDialogSupport, // This class is used to correctly position modal in x/y middle on iOS <= 15.2
-      "--should-transition": hasDialogSupport && animation,
+      "--no-dialog-support": !shouldTransition, // This class is used to correctly position modal in x/y middle on iOS <= 15.2
+      "--should-transition": shouldTransition && animation,
       "--slide-up": animation === "slideUp",
       "--fade": animation === "fade",
       "--is-fullscreen": isFullScreen,
@@ -118,51 +73,18 @@ const Modal = forwardRef((props: ModalProps, ref: ModalRef) => {
     className,
   );
 
-  // Add polyfill for HTML Dialog in old browsers
-  useEffect(() => {
-    async function toggleModal() {
-      if (
-        !hasDialogSupport &&
-        typeof window !== "undefined" &&
-        modalRef.current !== null
-      ) {
-        // eslint-disable-next-line import/no-extraneous-dependencies
-        const { default: dialogPolyfill } = await import("dialog-polyfill");
-
-        try {
-          dialogPolyfill.registerDialog(modalRef.current);
-        } catch (error) {
-          // In iOS 15 <= 15.2 this intermittently fails with
-          // TypeError: null is not an object (evaluating 'element.showModal')
-          // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️
-          console.error("Failed to load dialog-polyfill", error);
-        }
-      }
-
-      if (isOpen && !modalRef.current?.open) {
-        modalRef.current?.showModal();
-        modalRef.current?.classList.add(TRANSITION_CLASS_NAME);
-        onOpen?.();
-      } else if (!isOpen && modalRef.current?.open) {
-        handleClose();
-      }
-    }
-
-    toggleModal();
-  }, [isOpen, onOpen, handleClose, hasDialogSupport]);
-
   const contextValue = useMemo(
     () => ({
-      onClose: handleClose,
+      onClose: close,
       closeLabel,
     }),
-    [handleClose, closeLabel],
+    [close, closeLabel],
   );
 
   return (
     <dialog
-      ref={mergeRefs([modalRef, ref])}
-      onCancel={handleClose}
+      ref={mergeRefs([dialogRef, ref])}
+      onCancel={close}
       className={modalClasses}
     >
       <ModalContext.Provider value={contextValue}>

package/src/hooks/index.tsx

@@ -1,6 +1,7 @@
 export * from "./useBodyScrollLock";
 export * from "./useBreakpoint";
 export * from "./useButton";
+export * from "./useDialog";
 export * from "./useLabel";
 export * from "./useOnClickOutside";
 export * from "./useTextField";

package/src/hooks/useDialog/index.ts

@@ -0,0 +1 @@
+export * from "./useDialog";

package/src/hooks/useDialog/useDialog.ts

@@ -0,0 +1,98 @@
+import {
+  MutableRefObject,
+  SyntheticEvent,
+  useCallback,
+  useEffect,
+} from "react";
+import { useDialogPolyfill } from "../useDialogPolyfill";
+import { useBodyScrollLock } from "../useBodyScrollLock";
+import { supportsDialog } from "../../utils";
+
+export type TransitionProps = {
+  isEnabled: boolean;
+  CSSVariable: string;
+};
+
+export type useDialogProps = {
+  ref: MutableRefObject<HTMLDialogElement | null>;
+  transition: TransitionProps;
+  isOpen: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+};
+
+const TRANSITION_CLASS_NAME = "--transition";
+const FALLBACK_TRANSITION_DURATION = 0;
+
+export const useDialog = (props: useDialogProps) => {
+  const { ref, isOpen, transition, onOpen, onClose } = props;
+  const shouldTransition = supportsDialog() && transition.isEnabled;
+
+  // Read CSS variable value as number
+  const TRANSITION_DURATION_IN_MS =
+    (ref.current &&
+      Number(
+        getComputedStyle(ref.current)
+          .getPropertyValue(transition.CSSVariable)
+          .replace("ms", ""),
+      )) ||
+    FALLBACK_TRANSITION_DURATION;
+
+  useDialogPolyfill(ref);
+  useBodyScrollLock({ enabled: isOpen });
+
+  const open = useCallback(() => {
+    ref.current?.showModal();
+    onOpen?.();
+  }, [onOpen, ref]);
+
+  const close = useCallback(() => {
+    ref.current?.close();
+    onClose?.();
+  }, [onClose, ref]);
+
+  // Add close handler, to enable closing transitions
+  const handleClose = useCallback(
+    (event?: SyntheticEvent<HTMLElement, Event>) => {
+      if (event) {
+        // Prevent default event coming from onCancel,
+        // which is triggered by pressing ESC key
+        event.preventDefault();
+        // Ensure that nested `<dialog>` elements
+        // don't close the parent
+        event.stopPropagation();
+      }
+
+      if (shouldTransition) {
+        ref.current?.classList.remove(TRANSITION_CLASS_NAME);
+        // Delay close to allow exit transition
+        setTimeout(() => close(), TRANSITION_DURATION_IN_MS);
+      } else {
+        close();
+      }
+    },
+    [TRANSITION_DURATION_IN_MS, close, ref, shouldTransition],
+  );
+
+  useEffect(() => {
+    async function toggleDialog() {
+      if (isOpen && !ref.current?.open) {
+        open();
+        // Fix opening transition in Safari being skipped
+        // by wrapping with setTimeout
+        setTimeout(() => {
+          ref.current?.classList.add(TRANSITION_CLASS_NAME);
+        }, 0);
+      } else if (!isOpen && ref.current?.open) {
+        handleClose();
+      }
+    }
+
+    toggleDialog();
+  }, [handleClose, isOpen, open, ref]);
+
+  return {
+    open,
+    close: handleClose,
+  };
+};

package/src/hooks/useDialogPolyfill/index.ts

@@ -0,0 +1 @@
+export * from "./useDialogPolyfill";

package/src/hooks/useDialogPolyfill/useDialogPolyfill.ts

@@ -0,0 +1,32 @@
+import { MutableRefObject, useEffect } from "react";
+import { supportsDialog } from "../../utils";
+
+// Add polyfill for HTML Dialog in old browsers
+export const useDialogPolyfill = (
+  ref: MutableRefObject<HTMLDialogElement | null>,
+) => {
+  const hasDialogSupport = supportsDialog();
+
+  useEffect(() => {
+    async function polyfillDialog() {
+      if (
+        !hasDialogSupport &&
+        typeof window !== "undefined" &&
+        ref.current !== null
+      ) {
+        const { default: dialogPolyfill } = await import("dialog-polyfill");
+
+        try {
+          dialogPolyfill.registerDialog(ref.current);
+        } catch (error) {
+          // In iOS 15 <= 15.2 this intermittently fails with
+          // TypeError: null is not an object (evaluating 'element.showModal')
+          // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️
+          console.error("Failed to load dialog-polyfill", error);
+        }
+      }
+    }
+
+    polyfillDialog();
+  }, [ref, hasDialogSupport]);
+};