@navikt/ds-react 7.35.3 → 7.37.0

package/src/dialog/header/DialogHeader.tsx

@@ -0,0 +1,62 @@
+import React, { forwardRef } from "react";
+import { XMarkIcon } from "@navikt/aksel-icons";
+import { Button } from "../../button";
+import { useRenameCSS } from "../../theme/Theme";
+import { useI18n } from "../../util/i18n/i18n.hooks";
+import { DialogCloseTrigger } from "../close-trigger/DialogCloseTrigger";
+
+interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Whether to show a close button in the header.
+   * Will trigger `onOpenChange` when clicked.
+   * @default true
+   */
+  withClosebutton?: boolean;
+}
+
+/**
+ * @see 🏷️ {@link DialogHeaderProps}
+ * @example
+ * ```jsx
+ *  <Dialog>
+ *    <Dialog.Popup>
+ *      <Dialog.Header>
+ *        <Dialog.Title>Dialog title</Dialog.Title>
+ *      </Dialog.Header>
+ *    </Dialog.Popup>
+ *  </Dialog>
+ * ```
+ */
+const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
+  (
+    { className, children, withClosebutton = true, ...restProps },
+    forwardedRef,
+  ) => {
+    const { cn } = useRenameCSS();
+    const translate = useI18n("global");
+
+    return (
+      <div
+        {...restProps}
+        ref={forwardedRef}
+        className={cn("navds-dialog__header", className)}
+      >
+        {withClosebutton && (
+          <DialogCloseTrigger>
+            <Button
+              type="button"
+              className={cn("navds-dialog__close-button")}
+              size="small"
+              variant="tertiary-neutral"
+              icon={<XMarkIcon title={translate("close")} />}
+            />
+          </DialogCloseTrigger>
+        )}
+        {children}
+      </div>
+    );
+  },
+);
+
+export { DialogHeader };
+export type { DialogHeaderProps };

package/src/dialog/index.ts

@@ -0,0 +1,19 @@
+"use client";
+export { Dialog } from "./root/DialogRoot";
+export type { DialogProps } from "./root/DialogRoot";
+export { DialogTrigger } from "./trigger/DialogTrigger";
+export type { DialogTriggerProps } from "./trigger/DialogTrigger";
+export { DialogPopup } from "./popup/DialogPopup";
+export type { DialogPopupProps } from "./popup/DialogPopup";
+export { DialogCloseTrigger } from "./close-trigger/DialogCloseTrigger";
+export type { DialogCloseTriggerProps } from "./close-trigger/DialogCloseTrigger";
+export { DialogHeader } from "./header/DialogHeader";
+export type { DialogHeaderProps } from "./header/DialogHeader";
+export { DialogFooter } from "./footer/DialogFooter";
+export type { DialogFooterProps } from "./footer/DialogFooter";
+export { DialogTitle } from "./title/DialogTitle";
+export type { DialogTitleProps } from "./title/DialogTitle";
+export { DialogDescription } from "./description/DialogDescription";
+export type { DialogDescriptionProps } from "./description/DialogDescription";
+export { DialogBody } from "./body/DialogBody";
+export type { DialogBodyProps } from "./body/DialogBody";

package/src/dialog/popup/DialogPopup.tsx

@@ -0,0 +1,61 @@
+import React, { forwardRef } from "react";
+import { Portal, type PortalProps } from "../../portal";
+import { DialogBackdropInternal } from "../backdrop/DialogBackdropInternal";
+import { useDialogContext } from "../root/DialogRoot.context";
+import {
+  DialogPopupInternal,
+  type DialogPopupInternalProps,
+} from "./DialogPopupInternal";
+
+type DialogPopupProps = DialogPopupInternalProps &
+  Pick<PortalProps, "rootElement"> & {
+    children: React.ReactNode;
+  };
+
+/**
+ * @see 🏷️ {@link DialogPopupProps}
+ * @example
+ * ```jsx
+ *  <Dialog>
+ *    <Dialog.Popup>
+ *      ...
+ *    </Dialog.Popup>
+ *  </Dialog>
+ * ```
+ */
+const DialogPopup = forwardRef<HTMLDivElement, DialogPopupProps>(
+  (
+    {
+      modal = true,
+      withBackdrop = modal === true,
+      rootElement,
+      position,
+      ...restProps
+    },
+    forwardedRef,
+  ) => {
+    const { mounted, nested } = useDialogContext();
+
+    if (!mounted) {
+      return null;
+    }
+
+    return (
+      <Portal rootElement={rootElement}>
+        {withBackdrop && position !== "fullscreen" && !nested && (
+          <DialogBackdropInternal />
+        )}
+        <DialogPopupInternal
+          ref={forwardedRef}
+          {...restProps}
+          position={position}
+          withBackdrop={withBackdrop && position !== "fullscreen"}
+          modal={modal}
+        />
+      </Portal>
+    );
+  },
+);
+
+export { DialogPopup };
+export type { DialogPopupProps };

package/src/dialog/popup/DialogPopupInternal.tsx

@@ -0,0 +1,285 @@
+import React, { forwardRef } from "react";
+import { BoxNew, type BoxNewProps } from "../../layout/box";
+import { DismissableLayer } from "../../overlays/dismissablelayer/DismissableLayer";
+import { useRenameCSS } from "../../theme/Theme";
+import { FocusBoundary } from "../../util/focus-boundary/FocusBoundary";
+import { FocusGuards } from "../../util/focus-guards/FocusGuards";
+import { useMergeRefs } from "../../util/hooks";
+import { useOpenChangeAnimationComplete } from "../../util/hooks/useOpenChangeAnimationComplete";
+import { useScrollLock } from "../../util/hooks/useScrollLock";
+import { createTransitionStatusAttribute } from "../../util/hooks/useTransitionStatus";
+import { useDialogContext } from "../root/DialogRoot.context";
+
+type DialogPosition = "center" | "bottom" | "left" | "right" | "fullscreen";
+
+interface DialogPopupInternalProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Determines if the dialog enters a modal state when open.
+   * - `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.
+   * - `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.
+   * @default true
+   */
+  modal?: true | "trap-focus";
+  /**
+   * Determines if the dialog should close on outside clicks.
+   * @default true
+   */
+  closeOnOutsideClick?: boolean;
+  /**
+   * Will try to focus the given element on mount.
+   *
+   * If not provided, Dialog will focus the popup itself.
+   */
+  initialFocusTo?:
+    | React.RefObject<HTMLElement | null>
+    | (() => HTMLElement | null | undefined);
+  /**
+   * Will try to focus the given element on unmount.
+   *
+   * If not provided, Dialog will try to focus the `Dialog.Trigger` element
+   * or the last focused element before the dialog opened.
+   */
+  returnFocusTo?:
+    | React.RefObject<HTMLElement | null>
+    | (() => HTMLElement | null | undefined);
+
+  /**
+   * The position of the dialog relative to the viewport.
+   * @default "center"
+   */
+  position?: "center" | "bottom" | "left" | "right" | "fullscreen";
+  /**
+   * CSS `width`
+   *
+   * Has no effect when `position` is set to `fullscreen`.
+   *
+   * @default "medium"
+   */
+  width?: (string & {}) | "small" | "medium" | "large";
+  /**
+   * CSS `height`
+   *
+   * Has no effect when `position` is set to `fullscreen`, `left` or `right`.
+   */
+  height?: (string & {}) | "small" | "medium" | "large";
+  /**
+   * Adds a backdrop behind the dialog popup.
+   * @default true if `modal={true}`, else `false`
+   */
+  withBackdrop?: boolean;
+  /**
+   * ARIA role for the dialog popup.
+   * @default "dialog"
+   */
+  role?: "dialog" | "alertdialog";
+}
+
+const DialogPopupInternal = forwardRef<
+  HTMLDivElement,
+  DialogPopupInternalProps
+>(
+  (
+    {
+      className,
+      modal,
+      closeOnOutsideClick = true,
+      initialFocusTo,
+      returnFocusTo,
+      position = "center",
+      width = "medium",
+      height,
+      id,
+      style,
+      "aria-labelledby": ariaLabelledbyProp,
+      withBackdrop,
+      role = "dialog",
+      ...restProps
+    },
+    forwardedRef,
+  ) => {
+    const { cn } = useRenameCSS();
+    const {
+      mounted,
+      popupRef,
+      setPopupElement,
+      triggerElement,
+      setOpen,
+      open,
+      transitionStatus,
+      popupElement,
+      nestedOpenDialogCount: nestedOpenDialogCountProp,
+      nested,
+      size,
+      titleId,
+      popupId,
+      onOpenChangeComplete,
+      setMounted,
+    } = useDialogContext();
+
+    const mergedRefs = useMergeRefs(forwardedRef, popupRef, setPopupElement);
+
+    useScrollLock({
+      enabled: open && modal === true,
+      mounted,
+      open,
+      referenceElement: popupElement,
+    });
+
+    useOpenChangeAnimationComplete({
+      open,
+      ref: popupRef,
+      onComplete() {
+        if (open) {
+          onOpenChangeComplete?.(true);
+        } else {
+          setMounted(false);
+          onOpenChangeComplete?.(false);
+        }
+      },
+    });
+
+    const resolvedInitialFocus = initialFocusTo ?? popupRef;
+
+    const resolvedReturnFocus = () => {
+      if (returnFocusTo) {
+        return typeof returnFocusTo === "function"
+          ? returnFocusTo()
+          : returnFocusTo.current;
+      }
+
+      if (isFocusable(triggerElement)) {
+        return triggerElement;
+      }
+
+      return true;
+    };
+
+    return (
+      <FocusGuards>
+        <FocusBoundary
+          loop
+          trapped={open}
+          initialFocus={resolvedInitialFocus}
+          returnFocus={resolvedReturnFocus}
+          modal
+        >
+          <DismissableLayer
+            asChild
+            safeZone={{
+              anchor: triggerElement,
+            }}
+            onDismiss={(event) => {
+              open && setOpen(false, event);
+            }}
+            disableOutsidePointerEvents={modal === true || withBackdrop}
+            onInteractOutside={(event) => {
+              /**
+               * Since trigger might be set up to close the dialog on click,
+               * we need to prevent dismissing when clicking the trigger to avoid double close events (potentially re-triggering open)
+               */
+              const target = event.target as HTMLElement;
+              const targetIsTrigger = triggerElement?.contains(target);
+              if (targetIsTrigger) {
+                event.preventDefault();
+              }
+            }}
+            /**
+             * Only close dialog on pointerUp pointerEvents
+             */
+            onPointerDownOutside={(event) => {
+              event.preventDefault();
+            }}
+            onFocusOutside={(event) => {
+              /**
+               * Focus-events are tricky when dealing with portals and nested dialogs.
+               * If multiple dialogs are open, initial auto-focus might cause
+               * onFocusOutside to trigger on the parent dialog when focusing the child dialog.
+               */
+              event.preventDefault();
+            }}
+            enablePointerUpOutside
+            onPointerUpOutside={(event) => {
+              !closeOnOutsideClick && event.preventDefault();
+            }}
+          >
+            <BoxNew
+              aria-labelledby={ariaLabelledbyProp ?? titleId}
+              id={id ?? popupId}
+              {...restProps}
+              ref={mergedRefs}
+              className={cn("navds-dialog__popup", className)}
+              role={role}
+              aria-modal="true"
+              {...createTransitionStatusAttribute(transitionStatus)}
+              data-position={position}
+              data-size={size}
+              width={translateWidth(width, position)}
+              height={translateHeight(height, position)}
+              style={{
+                ...style,
+                "--__axc-nested-level": nestedOpenDialogCountProp,
+              }}
+              data-nested-dialog-open={!!nestedOpenDialogCountProp}
+              data-nested={!!nested}
+            />
+          </DismissableLayer>
+        </FocusBoundary>
+      </FocusGuards>
+    );
+  },
+);
+
+function translateWidth(
+  width: DialogPopupInternalProps["width"],
+  position: DialogPosition,
+): BoxNewProps["width"] {
+  if (position === "fullscreen") {
+    return undefined;
+  }
+
+  switch (width) {
+    case "small":
+      return "480px";
+    case "medium":
+      return "640px";
+    case "large":
+      return "800px";
+    default:
+      return width;
+  }
+}
+
+function translateHeight(
+  height: DialogPopupInternalProps["height"],
+  position: DialogPosition,
+): BoxNewProps["height"] {
+  if (
+    position === "fullscreen" ||
+    position === "left" ||
+    position === "right"
+  ) {
+    return undefined;
+  }
+
+  return height;
+}
+
+function isFocusable(element: Element | null) {
+  if (!element || !element.isConnected) {
+    return false;
+  }
+
+  /**
+   * Baselined in 2024
+   * @see https://caniuse.com/?search=checkvisibility
+   */
+  if (typeof element.checkVisibility === "function") {
+    return element.checkVisibility();
+  }
+
+  return getComputedStyle(element).display !== "none";
+}
+
+export { DialogPopupInternal };
+export type { DialogPopupInternalProps };

package/src/dialog/root/DialogRoot.context.ts

@@ -0,0 +1,89 @@
+import { createStrictContext } from "../../util/create-strict-context";
+import type { TransitionStatus } from "../../util/hooks/useTransitionStatus";
+
+interface DialogContextProps {
+  /**
+   * Whether the dialog is currently open.
+   */
+  open: boolean;
+  /**
+   * Event handler called when the dialog is opened or closed.
+   */
+  setOpen: (open: boolean, originalEvent: Event) => void;
+  /**
+   * Setter for whether the dialog is mounted.
+   */
+  setMounted: React.Dispatch<React.SetStateAction<boolean>>;
+  /**
+   * Event handler called after any animations complete when the dialog is opened or closed.
+   */
+  onOpenChangeComplete?: (open: boolean) => void;
+  /**
+   * The transition status of the dialog
+   */
+  transitionStatus: TransitionStatus;
+  /**
+   * Whether the dialog should be mounted (opened)
+   */
+  mounted: boolean;
+  /**
+   * The ref to the Popup element.
+   */
+  popupRef: React.RefObject<HTMLElement | null>;
+  /**
+   * Callback to register the Popup element DOM node.
+   */
+  setPopupElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+  /**
+   * The Popup element DOM node.
+   */
+  popupElement: HTMLElement | null;
+  /**
+   * ID of the popup element
+   */
+  popupId: string;
+  /**
+   * Callback to register the Trigger element DOM node.
+   */
+  setTriggerElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+  /**
+   * The Trigger element DOM node.
+   */
+  triggerElement: HTMLElement | null;
+  /**
+   * Declares if this dialog is nested inside another dialog.
+   */
+  nested: boolean;
+  /**
+   * Handles nested dialog opened event.
+   */
+  nestedDialogOpened: (nestedCount: number) => void;
+  /**
+   * Handles nested dialog closing event.
+   */
+  nestedDialogClosed: () => void;
+  /**
+   * Number of currently opened nested dialogs.
+   */
+  nestedOpenDialogCount: number | undefined;
+  /**
+   * Dialog size
+   */
+  size: "small" | "medium";
+  /**
+   * ID of the dialog title element.
+   */
+  titleId?: string;
+  /**
+   * Setter for the dialog title ID.
+   */
+  setTitleId: React.Dispatch<React.SetStateAction<string | undefined>>;
+}
+
+const { Provider: DialogContextProvider, useContext: useDialogContext } =
+  createStrictContext<DialogContextProps>({
+    name: "DialogContext",
+    errorMessage: "useDialogContext must be used within Dialog",
+  });
+
+export { DialogContextProvider, useDialogContext };