@simplybusiness/mobius 4.4.6 → 4.5.1

package/src/components/Drawer/Drawer.tsx

@@ -1,27 +1,17 @@
 "use client";
 
 import classNames from "classnames/dedupe";
-import {
-  Children,
-  Ref,
-  SyntheticEvent,
-  cloneElement,
-  forwardRef,
-  isValidElement,
-  useCallback,
-  useEffect,
-  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 {
@@ -34,122 +24,50 @@ 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>) => {
-      // `transitionend` may be called from another component but `event` may be undefined.
-      // This fixes an issue where closing `<Accordion>` inside `<Drawer>` will close both
-      if (!event) return;
-
-      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: close,
+      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>
         <div id="screen-reader-announce">{announce}</div>
       </VisuallyHidden>
-      {Children.map(children, child => {
-        if (isValidElement(child)) {
-          return cloneElement(child, {
-            onClose: handleClose,
-            closeLabel,
-          } as any);
-        }
-
-        return child;
-      })}
+      <DrawerContext.Provider value={contextValue}>
+        {children}
+      </DrawerContext.Provider>
     </dialog>
   );
 });

package/src/components/Drawer/DrawerContext.tsx

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+import { DrawerContextProps } from "./types";
+
+export const DrawerContext = createContext<DrawerContextProps>({
+  onClose: () => {},
+  closeLabel: undefined,
+});

package/src/components/Drawer/Header.tsx

@@ -4,6 +4,7 @@ import { cross } from "@simplybusiness/icons";
 import { DOMProps } from "../../types/dom";
 import { Button } from "../Button";
 import { Icon } from "../Icon";
+import { useDrawer } from "./useDrawer";
 
 export type HeaderElementType = HTMLDivElement;
 export type HeaderRef = Ref<HTMLElement>;
@@ -11,28 +12,26 @@ export type HeaderRef = Ref<HTMLElement>;
 export interface HeaderProps
   extends DOMProps,
     RefAttributes<HeaderElementType>,
-    PropsWithChildren {
-  onClose?: () => void;
-  closeLabel?: string;
-}
+    PropsWithChildren {}
 
 const Header = forwardRef(
-  (
-    { children, onClose, closeLabel, ...otherProps }: HeaderProps,
-    ref: HeaderRef,
-  ) => (
-    <header ref={ref} {...otherProps} className="mobius/DrawerHeader">
-      {children}
-      <Button
-        aria-label="Close"
-        variant="basic"
-        onPress={onClose}
-        className="mobius/DrawerClose"
-      >
-        <Icon icon={cross} /> {closeLabel}
-      </Button>
-    </header>
-  ),
+  ({ children, ...otherProps }: HeaderProps, ref: HeaderRef) => {
+    const { onClose, closeLabel } = useDrawer();
+
+    return (
+      <header ref={ref} {...otherProps} className="mobius/DrawerHeader">
+        {children}
+        <Button
+          aria-label="Close"
+          variant="basic"
+          onPress={onClose}
+          className="mobius/DrawerClose"
+        >
+          <Icon icon={cross} /> {closeLabel}
+        </Button>
+      </header>
+    );
+  },
 );
 
 Header.displayName = "Header";

package/src/components/Drawer/index.tsx

@@ -4,7 +4,8 @@ import {
   ContentProps as DrawerContentProps,
 } from "./Content";
 import { Drawer as DrawerComponent } from "./Drawer";
-import { DrawerProps } from "./types";
+import { DrawerProps, DrawerContextProps } from "./types";
+import { useDrawer } from "./useDrawer";
 import {
   HeaderElementType as DrawerHeaderElementType,
   HeaderProps as DrawerHeaderProps,
@@ -17,9 +18,10 @@ const Drawer = Object.assign(DrawerComponent, {
 });
 
 Drawer.displayName = "Drawer";
-export { Drawer };
+export { Drawer, useDrawer };
 
 export type {
+  DrawerContextProps,
   DrawerContentDivElementType,
   DrawerContentProps,
   DrawerHeaderElementType,

package/src/components/Drawer/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, SyntheticEvent } from "react";
 
 export interface DrawerProps {
   isOpen: boolean;
@@ -16,3 +16,8 @@ export interface DrawerProps {
   onClose?: () => void;
   children?: ReactNode;
 }
+
+export type DrawerContextProps = {
+  onClose: (event?: SyntheticEvent<HTMLElement, Event>) => void;
+  closeLabel: string | undefined;
+};

package/src/components/Drawer/useDrawer.ts

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { DrawerContext } from "./DrawerContext";
+
+export const useDrawer = () => {
+  const { onClose, closeLabel } = useContext(DrawerContext);
+
+  return { onClose, closeLabel };
+};

package/src/components/Modal/Content.tsx

@@ -1,12 +1,4 @@
-import {
-  Children,
-  PropsWithChildren,
-  Ref,
-  RefAttributes,
-  cloneElement,
-  forwardRef,
-  isValidElement,
-} from "react";
+import { PropsWithChildren, Ref, RefAttributes, forwardRef } from "react";
 import { DOMProps } from "../../types/dom";
 
 export type DivRef = Ref<HTMLDivElement>;
@@ -14,26 +6,12 @@ export type DivElementType = HTMLDivElement;
 export interface ContentProps
   extends DOMProps,
     RefAttributes<DivElementType>,
-    PropsWithChildren {
-  onClose?: () => void;
-  closeLabel?: string;
-}
+    PropsWithChildren {}
 
 const Content = forwardRef(
-  (
-    { children, onClose, closeLabel: _, ...otherProps }: ContentProps,
-    ref: DivRef,
-  ) => (
+  ({ children, ...otherProps }: ContentProps, ref: DivRef) => (
     <div ref={ref} {...otherProps} className="mobius/ModalContent">
-      {Children.map(children, child => {
-        if (isValidElement(child)) {
-          return cloneElement(child, {
-            onClose,
-          } as any);
-        }
-
-        return child;
-      })}
+      {children}
     </div>
   ),
 );

package/src/components/Modal/Header.tsx

@@ -4,6 +4,7 @@ import { cross } from "@simplybusiness/icons";
 import { DOMProps } from "../../types/dom";
 import { Button } from "../Button";
 import { Icon } from "../Icon";
+import { useModal } from "./useModal";
 
 export type HeaderElementType = HTMLDivElement;
 export type HeaderRef = Ref<HTMLElement>;
@@ -11,28 +12,26 @@ export type HeaderRef = Ref<HTMLElement>;
 export interface HeaderProps
   extends DOMProps,
     RefAttributes<HeaderElementType>,
-    PropsWithChildren {
-  onClose?: () => void;
-  closeLabel?: string;
-}
+    PropsWithChildren {}
 
 const Header = forwardRef(
-  (
-    { children, onClose, closeLabel, ...otherProps }: HeaderProps,
-    ref: HeaderRef,
-  ) => (
-    <header ref={ref} {...otherProps} className="mobius/ModalHeader">
-      {children}
-      <Button
-        aria-label="Close"
-        variant="basic"
-        onPress={onClose}
-        className="mobius/ModalClose"
-      >
-        <Icon icon={cross} /> {closeLabel}
-      </Button>
-    </header>
-  ),
+  ({ children, ...otherProps }: HeaderProps, ref: HeaderRef) => {
+    const { onClose, closeLabel } = useModal();
+
+    return (
+      <header ref={ref} {...otherProps} className="mobius/ModalHeader">
+        {children}
+        <Button
+          aria-label="Close"
+          variant="basic"
+          onPress={onClose}
+          className="mobius/ModalClose"
+        >
+          <Icon icon={cross} /> {closeLabel}
+        </Button>
+      </header>
+    );
+  },
 );
 
 Header.displayName = "Header";

package/src/components/Modal/Modal.mdx

@@ -116,6 +116,63 @@ const WithAnimationDemo = () => {
 };
 ```
 
+### Closing Modal from a child component
+
+As of `@simplybusiness/mobius` version 4.5.0 `Modal` component can be closed from a child component using the `useModal()` hook.
+
+The hook provides `onClose` method and `closeLabel` string that can be used to close the modal.
+
+`onClose` method will ensure that the modal is closed using its CSS transition, as well as `onClose` prop firing, if provided.
+
+If you previously used `onClose` and/or `closeLabel` props provided by default to all children props, you will need to replace these with `useModal()`.
+
+Parent component for both old and new implementations remains the same:
+
+```jsx
+import { Modal, Button } from "@simplybusiness/mobius";
+
+const ParentComponent = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open</Button>
+
+      <Modal isOpen={open} onClose={() => setOpen(false)} animation="slideUp">
+        <Modal.Header>Title</Modal.Header>
+        <Modal.Content>Content</Modal.Content>
+      </Modal>
+    </>
+  );
+};
+```
+
+Old implementation for child component:
+
+```jsx
+import { Button } from "@simplybusiness/mobius";
+
+const ChildComponent = ({ onClose, closeLabel }) => (
+  <Button onClick={onClose}>{closeLabel}</Button>
+);
+```
+
+New implementation for child component:
+
+```jsx
+import { useModal, Button } from "@simplybusiness/mobius";
+
+const ChildComponent = () => {
+  const { onClose, closeLabel } = useModal();
+
+  return <Button onClick={onClose}>{closeLabel}</Button>;
+};
+```
+
+The motivation behind this change is to provide a more consistent and predictable API for the `Modal` component.
+
+This particularly applies to components that already have props named `onClose` and `closeLabel`, which may lead to unexpected side effects.
+
 ### Nested Modals
 
 <Story of={ModalStories.WithNested} />

package/src/components/Modal/Modal.tsx

@@ -1,26 +1,17 @@
 "use client";
 
 import classNames from "classnames/dedupe";
-import {
-  Children,
-  Ref,
-  SyntheticEvent,
-  cloneElement,
-  forwardRef,
-  isValidElement,
-  useCallback,
-  useEffect,
-  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 {
@@ -56,66 +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>) => {
-      // `transitionend` may be called from another component but `event` may be undefined.
-      // This fixes an issue where closing `<Accordion>` inside `<Modal>` will close both
-      if (!event) return;
-
-      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,
@@ -123,55 +73,23 @@ 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: close,
+      closeLabel,
+    }),
+    [close, closeLabel],
+  );
 
   return (
     <dialog
-      ref={mergeRefs([modalRef, ref])}
-      onCancel={handleClose}
+      ref={mergeRefs([dialogRef, ref])}
+      onCancel={close}
       className={modalClasses}
     >
-      {Children.map(children, child => {
-        if (isValidElement(child)) {
-          return cloneElement(child, {
-            onClose: handleClose,
-            closeLabel,
-          } as any);
-        }
-
-        return child;
-      })}
+      <ModalContext.Provider value={contextValue}>
+        {children}
+      </ModalContext.Provider>
     </dialog>
   );
 });

package/src/components/Modal/ModalContext.tsx

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+import { ModalContextProps } from "./types";
+
+export const ModalContext = createContext<ModalContextProps>({
+  onClose: () => {},
+  closeLabel: undefined,
+});

package/src/components/Modal/index.tsx

@@ -9,7 +9,8 @@ import {
   HeaderProps as ModalHeaderProps,
 } from "./Header";
 import { Modal as ModalComponent } from "./Modal";
-import { ModalProps } from "./types";
+import { ModalProps, ModalContextProps } from "./types";
+import { useModal } from "./useModal";
 
 const Modal = Object.assign(ModalComponent, {
   Header,
@@ -17,9 +18,10 @@ const Modal = Object.assign(ModalComponent, {
 });
 
 Modal.displayName = "Modal";
-export { Modal };
+export { Modal, useModal };
 
 export type {
+  ModalContextProps,
   ModalContentDivElementType,
   ModalContentProps,
   ModalHeaderElementType,

package/src/components/Modal/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, SyntheticEvent } from "react";
 
 export interface ModalProps {
   isOpen: boolean;
@@ -30,3 +30,8 @@ export interface ModalProps {
    */
   parentSelector?: () => HTMLElement;
 }
+
+export type ModalContextProps = {
+  onClose: (event?: SyntheticEvent<HTMLElement, Event>) => void;
+  closeLabel: string | undefined;
+};