Basic Modal Management

/**
 * Opens a modal with custom content
 * @param props - Modal configuration and content
 * @returns Modal ID for future reference
 */
function openModal(props: ModalSettings): string;

import { openModal } from "@mantine/modals";
import { Text, Button } from "@mantine/core";

// Simple text modal
const modalId = openModal({
  title: "Information",
  children: <Text>This is important information.</Text>,
});

// Modal with custom content
openModal({
  title: "User Details",
  size: "lg",
  children: (
    <div>
      <Text mb="md">User profile information:</Text>
      <Text>Name: John Doe</Text>
      <Text>Email: john@example.com</Text>
    </div>
  ),
  onClose: () => console.log("Modal closed"),
});

// Modal with specific ID
openModal({
  modalId: "welcome-modal",
  title: "Welcome!",
  centered: true,
  children: <Text>Welcome to our application!</Text>,
});

/**
 * Closes a specific modal by ID
 * @param id - Modal ID to close
 */
function closeModal(id: string): void;

import { openModal, closeModal } from "@mantine/modals";

// Open modal and store ID
const modalId = openModal({
  title: "Temporary Modal",
  children: <Text>This modal will close automatically</Text>,
});

// Close after 3 seconds
setTimeout(() => {
  closeModal(modalId);
}, 3000);

// Close specific modal by known ID
closeModal("welcome-modal");

/**
 * Closes all currently open modals
 */
function closeAllModals(): void;

import { closeAllModals } from "@mantine/modals";

// Emergency close all modals
function handleEscapePress() {
  closeAllModals();
}

// Reset modal state
function resetApp() {
  closeAllModals();
  // ... other reset logic
}

/**
 * Updates properties of an existing modal
 * @param payload - Modal ID and updated properties
 */
function updateModal(payload: { modalId: string } & Partial<ModalSettings>): void;

import { openModal, updateModal } from "@mantine/modals";

// Open initial modal
const modalId = openModal({
  title: "Loading...",
  children: <Text>Please wait...</Text>,
});

// Update modal content after data loads
setTimeout(() => {
  updateModal({
    modalId,
    title: "Data Loaded",
    children: (
      <div>
        <Text>Data has been successfully loaded!</Text>
        <Text c="green">✓ Process completed</Text>
      </div>
    ),
  });
}, 2000);

// Update modal size
updateModal({
  modalId: "user-details",
  size: "xl",
  centered: false,
});

/**
 * Namespace object with all modal management functions
 */
const modals: {
  open: (props: ModalSettings) => string;
  close: (id: string) => void;
  closeAll: () => void;
  openConfirmModal: (props: OpenConfirmModal) => string;
  openContextModal: <TKey extends MantineModal>(
    payload: OpenContextModal<Parameters<MantineModals[TKey]>[0]['innerProps']> & { modal: TKey }
  ) => string;
  updateModal: (payload: { modalId: string } & Partial<ModalSettings>) => void;
  updateContextModal: (payload: { modalId: string } & Partial<OpenContextModal<any>>) => void;
};

import { modals } from "@mantine/modals";

// Use namespace object instead of individual functions
const modalId = modals.open({
  title: "Namespace Example",
  children: <Text>Using modals namespace</Text>,
});

// Close using namespace
modals.close(modalId);

// Close all using namespace
modals.closeAll();

/**
 * Base modal configuration extending Mantine Modal props
 */
interface ModalSettings extends Partial<Omit<ModalProps, 'opened'>> {
  /** Unique identifier for the modal */
  modalId?: string;
  /** Modal content */
  children?: React.ReactNode;
  /** Modal title */
  title?: React.ReactNode;
  /** Callback when modal is closed */
  onClose?: () => void;
  /** Modal size: xs, sm, md, lg, xl, or number */
  size?: string | number;
  /** Whether modal is centered vertically */
  centered?: boolean;
  /** Whether modal can be closed by clicking overlay */
  closeOnClickOutside?: boolean;
  /** Whether modal can be closed by pressing Escape */
  closeOnEscape?: boolean;
  /** Modal content padding */
  padding?: string | number;
  /** Modal border radius */
  radius?: string | number;
  /** Modal shadow */
  shadow?: string;
  /** Modal z-index */
  zIndex?: number;
  /** Overlay properties */
  overlayProps?: {
    backgroundOpacity?: number;
    blur?: number;
    color?: string;
  };
  /** Transition properties */
  transitionProps?: {
    duration?: number;
    transition?: string;
  };
  /** Whether to render modal inside Portal */
  withinPortal?: boolean;
  /** Custom styles */
  styles?: any;
  /** Class names */
  classNames?: any;
}