@navikt/ds-react 4.12.1 → 5.0.0

package/src/modal/Modal.tsx

@@ -1,76 +1,91 @@
-import React, { forwardRef, useEffect, useMemo, useRef } from "react";
+import React, {
+  forwardRef,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
 import cl from "clsx";
-import ReactModal from "react-modal";
+import dialogPolyfill from "./dialog-polyfill";
+import { Detail, Heading, mergeRefs, useId } from "..";
+import ModalBody from "./ModalBody";
+import ModalHeader from "./ModalHeader";
+import ModalFooter from "./ModalFooter";
+import { getCloseHandler, useBodyScrollLock } from "./ModalUtils";
+import { ModalContext } from "./ModalContext";
 
-import { Button, mergeRefs, useProvider } from "..";
-import ModalContent, { ModalContentType } from "./ModalContent";
-import { XMarkIcon } from "@navikt/aksel-icons";
+const needPolyfill =
+  typeof window !== "undefined" && window.HTMLDialogElement === undefined;
 
-export interface ModalProps {
+export interface ModalProps
+  extends React.DialogHTMLAttributes<HTMLDialogElement> {
   /**
-   * Modal content
-   */
-  children: React.ReactNode;
-  /**
-   * Open state for modal
+   * Content for the header. Alteratively you can use <Modal.Header> instead for more control,
+   * but then you have to set `aria-label` or `aria-labelledby` on the modal manually.
    */
-  open: boolean;
+  header?: {
+    label?: string;
+    icon?: React.ReactNode;
+    heading: string;
+    /**
+     * Heading size
+     * @default "medium"
+     * */
+    size?: "medium" | "small";
+    /**
+     * Removes close-button (X) when false
+     * @default true
+     */
+    closeButton?: boolean;
+  };
   /**
-   * Callback for modal wanting to close
+   * Modal content
    */
-  onClose: () => void;
+  children: React.ReactNode;
   /**
-   * If modal should close on overlay click (click outside Modal)
-   * @default true
+   * Whether the modal should be visible or not.
+   * Remember to use the `onClose` callback to keep your local state in sync.
+   * You can also use `ref.current.openModal()` and `ref.current.close()`.
    */
-  shouldCloseOnOverlayClick?: boolean;
+  open?: boolean;
   /**
-   * User defined classname for modal
+   * Called when the modal has been closed
    */
-  className?: string;
+  onClose?: React.ReactEventHandler<HTMLDialogElement>;
   /**
-   * User defined classname for modal
+   * Called when the user wants to close the modal (clicked the close button or pressed Esc).
+   * @returns Whether to close the modal
    */
-  overlayClassName?: string;
+  onBeforeClose?: () => boolean | void;
   /**
-   * Removes close-button(X) when false
-   * @default true
+   * Called when the user presses the Esc key, unless `onBeforeClose()` returns `false`.
    */
-  closeButton?: boolean;
+  onCancel?: React.ReactEventHandler<HTMLDialogElement>;
   /**
-   *
-   */
-  shouldCloseOnEsc?: boolean;
+   * @default fit-content (up to 700px)
+   * */
+  width?: "medium" | "small" | number | string;
   /**
-   * Allows custom styling of ReactModal, in accordance with their typing
+   * User defined classname for modal
    */
-  style?: ReactModal.Styles;
+  className?: string;
   /**
-   * Callback for setting parent element modal will attach to
+   * Sets aria-labelledby on modal.
+   * No need to set this manually if the `header` prop is used. A reference to `header.heading` will be created automatically.
+   * @warning If not using `header`, you should set either `aria-labelledby` or `aria-label`.
    */
-  parentSelector?(): HTMLElement;
   "aria-labelledby"?: string;
-  "aria-describedby"?: string;
-  "aria-modal"?: boolean;
-  /**
-   * Sets aria-label on modal
-   * @warning This should be set if not using 'aria-labelledby' or 'aria-describedby'
-   */
-  "aria-label"?: string;
 }
 
 interface ModalComponent
-  extends ModalLifecycle,
-    React.ForwardRefExoticComponent<
-      ModalProps & React.RefAttributes<ReactModal>
-    > {
-  Content: ModalContentType;
+  extends React.ForwardRefExoticComponent<
+    ModalProps & React.RefAttributes<HTMLDialogElement>
+  > {
+  Header: typeof ModalHeader;
+  Body: typeof ModalBody;
+  Footer: typeof ModalFooter;
 }
 
-type ModalLifecycle = {
-  setAppElement: (element: any) => void;
-};
-
 /**
  * A component that displays a modal dialog.
  *
@@ -78,112 +93,147 @@ type ModalLifecycle = {
  * @see 🏷️ {@link ModalProps}
  *
  * @example
+ * State change with `useRef`
+ * ```jsx
+ * const ref = useRef<HTMLDialogElement>(null);
+ * <Button onClick={() => ref.current?.showModal()}>Open modal</Button>
+ * <Modal
+ *   ref={ref}
+ *   header={{
+ *     label: "Optional label",
+ *     icon: <FileIcon aria-hidden />,
+ *     heading: "My heading",
+ *   }}
+ * >
+ *   <Modal.Body>
+ *     <BodyLong>Hello world</BodyLong>
+ *   </Modal.Body>
+ *   <Modal.Footer>
+ *     <Button>Save</Button>
+ *     <Button type="button" variant="tertiary" onClick={() => ref.current?.close()}>Close</Button>
+ *   </Modal.Footer>
+ * </Modal>
+ * ```
+ * @example
+ * State change with `useState`
  * ```jsx
  * const [open, setOpen] = useState(false);
- *
  * <Modal
  *   open={open}
- *   aria-label="Modal demo"
- *   onClose={() => setOpen((x) => !x)}
+ *   onClose={() => setOpen(false)}
  *   aria-labelledby="modal-heading"
  * >
- *   <Modal.Content>
- *     <Heading spacing level="1" size="large" id="modal-heading">
- *       Viktig info
- *     </Heading>
- *     <BodyLong spacing>
- *       Hallo!
- *     </BodyLong>
- *   </Modal.Content>
+ *   <Modal.Header>
+ *     <Heading level="1" size="large" id="modal-heading">My heading</Heading>
+ *   </Modal.Header>
+ *   <Modal.Body>
+ *     <BodyLong>Hello world</BodyLong>
+ *   </Modal.Body>
  * </Modal>
  * ```
  */
-export const Modal = forwardRef<ReactModal, ModalProps>(
+export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
   (
     {
+      header,
       children,
       open,
-      onClose,
+      onBeforeClose,
+      onCancel,
+      width,
       className,
-      overlayClassName,
-      shouldCloseOnOverlayClick = true,
-      shouldCloseOnEsc = true,
-      closeButton = true,
-      "aria-describedby": ariaDescribedBy,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-modal": ariaModal,
-      "aria-label": contentLabel,
+      "aria-labelledby": ariaLabelledby,
       style,
-      parentSelector,
       ...rest
-    },
+    }: ModalProps,
     ref
   ) => {
-    const modalRef = useRef<ReactModal | null>(null);
+    const modalRef = useRef<HTMLDialogElement>(null);
     const mergedRef = useMemo(() => mergeRefs([modalRef, ref]), [ref]);
-    const buttonRef = useRef<HTMLButtonElement>(null);
-    const rootElement = useProvider()?.rootElement;
-    const appElement = useProvider()?.appElement;
+    const ariaLabelId = useId();
 
-    useEffect(() => {
-      appElement && Modal.setAppElement(appElement);
-    }, [appElement]);
+    if (useContext(ModalContext)) {
+      console.error("Modals should not be nested");
+    }
 
-    const onModalCloseRequest = (e) => {
-      if (shouldCloseOnOverlayClick || e.type === "keydown") {
-        onClose();
-      } else if (buttonRef.current) {
-        buttonRef.current.focus();
+    useEffect(() => {
+      if (needPolyfill && modalRef.current) {
+        dialogPolyfill.registerDialog(modalRef.current);
       }
-    };
+    }, [modalRef]);
 
-    const getParentSelector = () => {
-      if (parentSelector) {
-        return parentSelector;
+    useEffect(() => {
+      // We need to have this in a useEffect so that the content renders before the modal is displayed,
+      // and in case `open` is true initially.
+      if (modalRef.current && open !== undefined) {
+        if (open && !modalRef.current.open) {
+          modalRef.current.showModal();
+        } else if (!open && modalRef.current.open) {
+          modalRef.current.close();
+        }
       }
-      return rootElement !== undefined
-        ? () => rootElement as HTMLElement
-        : undefined;
-    };
+    }, [modalRef, open]);
+
+    useBodyScrollLock(modalRef, "navds-modal__document-body");
+
+    const isWidthPreset =
+      typeof width === "string" && ["small", "medium"].includes(width);
 
     return (
-      <ReactModal
-        {...rest}
-        parentSelector={getParentSelector()}
-        style={style}
-        isOpen={open}
+      <dialog
         ref={mergedRef}
-        className={cl("navds-modal", className)}
-        overlayClassName={cl("navds-modal__overlay", overlayClassName)}
-        shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
-        shouldCloseOnEsc={shouldCloseOnEsc}
-        onRequestClose={(e) => onModalCloseRequest(e)}
-        aria={{
-          describedby: ariaDescribedBy,
-          labelledby: ariaLabelledBy,
-          modal: ariaModal,
+        className={cl("navds-modal", className, {
+          "navds-modal--polyfilled": needPolyfill,
+          "navds-modal--autowidth": !width,
+          [`navds-modal--${width}`]: isWidthPreset,
+        })}
+        style={{
+          ...style,
+          ...(!isWidthPreset ? { width } : {}),
         }}
-        contentLabel={contentLabel}
+        onCancel={(event) => {
+          // FYI: onCancel fires when you press Esc
+          if (onBeforeClose && onBeforeClose() === false) {
+            event.preventDefault();
+          } else if (onCancel) onCancel(event);
+        }}
+        aria-labelledby={
+          !ariaLabelledby && !rest["aria-label"] && header
+            ? ariaLabelId
+            : ariaLabelledby
+        }
+        {...rest}
       >
-        {children}
-        {closeButton && (
-          <Button
-            className={cl("navds-modal__button", {
-              "navds-modal__button--shake": shouldCloseOnOverlayClick,
-            })}
-            size="small"
-            variant="tertiary-neutral"
-            ref={buttonRef}
-            onClick={onClose}
-            icon={<XMarkIcon title="Lukk modalvindu" />}
-          />
-        )}
-      </ReactModal>
+        <ModalContext.Provider
+          value={{
+            closeHandler: getCloseHandler(modalRef, header, onBeforeClose),
+          }}
+        >
+          {header && (
+            <ModalHeader>
+              {header.label && (
+                <Detail className="navds-modal__label">{header.label}</Detail>
+              )}
+              <Heading
+                size={header.size ?? "medium"}
+                level="1"
+                id={ariaLabelId}
+              >
+                <span className="navds-modal__header-icon">{header.icon}</span>
+                {header.heading}
+              </Heading>
+            </ModalHeader>
+          )}
+
+          {children}
+        </ModalContext.Provider>
+      </dialog>
     );
   }
 ) as ModalComponent;
 
-Modal.setAppElement = (element) => ReactModal.setAppElement(element);
-Modal.Content = ModalContent;
+Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
 
 export default Modal;

package/src/modal/ModalBody.tsx

@@ -0,0 +1,14 @@
+import React, { forwardRef } from "react";
+import cl from "clsx";
+
+export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(
+  ({ className, ...rest }, ref) => (
+    <div {...rest} ref={ref} className={cl("navds-modal__body", className)} />
+  )
+);
+
+export default ModalBody;

package/src/modal/ModalContext.ts

@@ -0,0 +1,6 @@
+import React from "react";
+
+interface ModalContextProps {
+  closeHandler?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export const ModalContext = React.createContext<ModalContextProps | null>(null);

package/src/modal/ModalFooter.tsx

@@ -0,0 +1,14 @@
+import React, { forwardRef } from "react";
+import cl from "clsx";
+
+export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(
+  ({ className, ...rest }, ref) => (
+    <div {...rest} ref={ref} className={cl("navds-modal__footer", className)} />
+  )
+);
+
+export default ModalFooter;

package/src/modal/ModalHeader.tsx

@@ -0,0 +1,42 @@
+import React, { forwardRef, useContext } from "react";
+import cl from "clsx";
+import { XMarkIcon } from "@navikt/aksel-icons";
+import { Button } from "../button";
+import { ModalContext } from "./ModalContext";
+
+export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  /**
+   * Removes close-button (X) when false
+   * @default true
+   */
+  closeButton?: boolean;
+}
+
+const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
+  ({ children, className, closeButton = true, ...rest }, ref) => {
+    const context = useContext(ModalContext);
+    if (context === null) {
+      console.error("<Modal.Header> has to be used within a <Modal>");
+      return null;
+    }
+
+    return (
+      <div {...rest} ref={ref} className={cl("navds-modal__header", className)}>
+        {context.closeHandler && closeButton && (
+          <Button
+            type="button"
+            className="navds-modal__button"
+            size="small"
+            variant="tertiary-neutral"
+            onClick={context.closeHandler}
+            icon={<XMarkIcon title="Lukk modalvindu" />}
+          />
+        )}
+        {children}
+      </div>
+    );
+  }
+);
+
+export default ModalHeader;

package/src/modal/ModalUtils.ts

@@ -0,0 +1,37 @@
+import React from "react";
+import type { ModalProps } from "./Modal";
+
+export function getCloseHandler(
+  modalRef: React.RefObject<HTMLDialogElement>,
+  header: ModalProps["header"],
+  onBeforeClose: ModalProps["onBeforeClose"]
+) {
+  if (header && header.closeButton === false) return undefined;
+  if (onBeforeClose) {
+    return () => onBeforeClose() !== false && modalRef.current?.close();
+  }
+  return () => modalRef.current?.close();
+}
+
+export function useBodyScrollLock(
+  modalRef: React.RefObject<HTMLDialogElement>,
+  bodyClass: string
+) {
+  React.useEffect(() => {
+    if (!modalRef.current) return;
+    if (modalRef.current.open) document.body.classList.add(bodyClass); // In case `open` is true initially
+
+    const observer = new MutationObserver(() => {
+      if (modalRef.current?.open) document.body.classList.add(bodyClass);
+      else document.body.classList.remove(bodyClass);
+    });
+    observer.observe(modalRef.current, {
+      attributes: true,
+      attributeFilter: ["open"],
+    });
+    return () => {
+      observer.disconnect();
+      document.body.classList.remove(bodyClass); // In case modal is unmounted before it's closed
+    };
+  }, [modalRef, bodyClass]);
+}