@navikt/ds-react/src/dialog/root/DialogRoot.context.ts

React components from the Norwegian Labour and Welfare Administration.

import { createStrictContext } from "../../utils/helpers";
import type { TransitionStatus } from "../../utils/hooks";

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 };