@chris-c-brine/form-dialog 1.0.6 → 1.1.1

package/README.md

@@ -6,8 +6,6 @@ A React component library that seamlessly integrates Material UI dialogs with Re
 
 ## Installation
 
-This package is currently private and intended for restricted access use.
-
 ```bash 
 npm install @chris-c-brine/form-dialog
 ```
@@ -42,91 +40,55 @@ This package has the following peer dependencies that need to be installed in yo
 
 ```tsx
 // LoginPage.tsx
-import { useCallback, type FC, type PropsWithChildren } from "react";
+import { type FC } from "react";
 import { Container, IconButton } from "@mui/material";
-import { globalErrorAtom, useUser } from "@features";
 import { useDialog } from "@chris-c-brine/form-dialog";
-import { useForm, type SubmitHandler } from "react-hook-form-mui";
+import LoginForm from "./components/forms/LoginForm";
+import { Lock as LockIcon } from "@mui/icons-material";
 import { LoginDialog } from "./LoginDialog";
-import LoginForm from ".//LoginForm";
-import { Lock as LockIcon, Person as PersonIcon } from "@mui/icons-material";
-import { useSetAtom } from "jotai";
 
-const defaultLoginFormValues = { username: "", password: "" };
-type SubmitLogin = SubmitHandler<typeof defaultLoginFormValues>;
 const LoginPage: FC = () => {
-  const { dialogProps, closeDialog, openDialog } = useDialog();
-  const { setUser } = useUser();
-  const setError = useSetAtom(globalErrorAtom);
-
-  const formContext = useForm({ defaultValues: defaultLoginFormValues });
-
-  const onSuccess: SubmitLogin = useCallback(
-    (data, event) => {
-      event?.preventDefault(); // Stop default html form submit
-      formContext.reset(); // Reset form
-      setUser({ name: data.username, isActive: true }); // Update User (and/or other business logic)
-      closeDialog(); // Close Dialog
-      setError({
-        message: <>Hello {data.username}!</>,
-        title: 'Successful Login!',
-        severity: "success",
-        icon: <PersonIcon sx={{fontSize: 35}} />
-      });
-    },
-    [formContext, setUser, closeDialog, setError],
-  );
+  const { dialogProps, openDialog } = useDialog();
 
   return (
-    <LoginFormContainer>
-      <LoginForm onSuccess={onSuccess}>
+    <Container
+      component="main"
+      maxWidth={"xs"}
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "85vh",
+        overflow: "hidden",
+        animation: "fadeIn 1s ease-in-out",
+        "@keyframes fadeIn": {
+          from: { opacity: 0 },
+          to: { opacity: 1 },
+        },
+      }}
+    >
+      <LoginForm>
         <IconButton color="primary" onClick={openDialog} sx={{ py: 1 }}>
           <LockIcon sx={{ fontSize: 50 }} />
         </IconButton>
       </LoginForm>
-      <LoginDialog
-        dialogProps={{ ...dialogProps }}
-        handleSubmit={onSuccess}
-        onClose={closeDialog}
-      />
-    </LoginFormContainer>
+      <LoginDialog dialogProps={dialogProps} />
+    </Container>
   );
 };
 
 export default LoginPage;
-
-const LoginFormContainer: FC<PropsWithChildren> = ({ children }) => (
-  <Container
-    component="main"
-    maxWidth={"xs"}
-    sx={{
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      height: "85vh",
-      overflow: "hidden",
-      animation: "fadeIn 1s ease-in-out",
-      "@keyframes fadeIn": {
-        from: { opacity: 0 },
-        to: { opacity: 1 },
-      },
-    }}
-  >
-    {children}
-  </Container>
-);
 ```
 ```tsx
 // LoginPageConstants.ts
 import type { SubmitHandler } from "react-hook-form";
 
 export const defaultLoginFormValues = { username: "", password: "" };
-export type LoginForm = typeof defaultLoginFormValues;
-export type SubmitLogin = SubmitHandler<LoginForm>;
+export type LoginFormValues = typeof defaultLoginFormValues;
 ```
 ```tsx
 // LoginFormBase.tsx
-import {TextFieldElement, PasswordElement, type PasswordElementProps, useFormContext} from "react-hook-form-mui";
+import { TextFieldElement, PasswordElement, type PasswordElementProps, useFormContext} from "react-hook-form-mui";
 import { memo, useEffect } from "react";
 import { useFormDialog, AutoGrid, type AutoGridProps } from "@chris-c-brine/form-dialog";
 
@@ -177,6 +139,7 @@ const UserName = ({ disabled }: Pick<PasswordElementProps, "disabled">) => (
     }}
   />
 );
+UserName.displayName = "UserName";
 
 const Password = ({ disabled }: Pick<PasswordElementProps, "disabled">) => {
   const { setValue, getValues } = useFormContext();
@@ -184,7 +147,7 @@ const Password = ({ disabled }: Pick<PasswordElementProps, "disabled">) => {
 
   useEffect(() => {
     if (disabled && password !== "") {
-      setValue("passwordDisabled", "");
+      setValue("disabledPassword", "");
     }
   }, [disabled, setValue, password]);
 
@@ -205,26 +168,29 @@ const Password = ({ disabled }: Pick<PasswordElementProps, "disabled">) => {
     />
   );
 };
+
+Password.displayName = "Password";
 ```
 ```tsx
 // LoginForm.tsx
 import { Lock as LockIcon } from "@mui/icons-material";
 import { Box, Typography, type TypographyProps } from "@mui/material";
-import { type SubmitLogin, defaultLoginFormValues } from "./LoginPageConstants";
-import LoginFormBase from "./LoginFormBase";
 import { merge } from "lodash";
-import type { FC, PropsWithChildren } from "react";
+import { FC, PropsWithChildren, useCallback, useMemo } from "react";
 import { FormDialogActions, FormDialogProvider, PaperForm } from "@chris-c-brine/form-dialog";
+import { SubmitHandler, useForm } from "react-hook-form-mui";
+import { defaultLoginFormValues, LoginFormValues } from "./LoginPageConstants";
+import LoginFormBase from "./LoginFormBase";
+import { globalErrorAtom, useUser } from "@features";
+import { useSetAtom } from "jotai/index";
+import {  Person as PersonIcon } from "@mui/icons-material";
 
 const AltIcon = () => <LockIcon sx={{ mr: 1, fontSize: 20 }} />;
 
-interface LoginFormProps extends PropsWithChildren {
-  onSuccess: SubmitLogin;
-}
+export const LoginForm: FC<PropsWithChildren> = ({ children }) => {
 
-const LoginForm: FC<LoginFormProps> = ({ onSuccess, children }) => {
   return (
-    <LoginPaperForm onSuccess={onSuccess}>
+    <LoginPaperForm>
       <Box px={2}>
         {children}
         <SecureLoginText />
@@ -243,8 +209,6 @@ const LoginForm: FC<LoginFormProps> = ({ onSuccess, children }) => {
   );
 };
 
-export default LoginForm;
-
 const SecureLoginText: FC<TypographyProps> = (props) => {
   const typographyProps = merge(
     {
@@ -257,18 +221,38 @@ const SecureLoginText: FC<TypographyProps> = (props) => {
   return <Typography {...typographyProps}>Secure Login</Typography>;
 };
 
-type LoginPaperFormProps = PropsWithChildren & {
-  onSuccess?: SubmitLogin;
-};
+const LoginPaperForm: FC<PropsWithChildren> = ({ children }) => {
+  const formContext = useForm({defaultValues: defaultLoginFormValues});
+  const { setUser } = useUser();
+  const setError = useSetAtom(globalErrorAtom);
+  const reset = useMemo(() => formContext.reset, [formContext?.reset]);
+
+  const onSuccess: SubmitHandler<LoginFormValues> = useCallback(
+    (data, event) => {
+      event?.preventDefault(); // Stop default html form submit
+      event?.stopPropagation(); // STOP!!!!!
+
+      setUser({ name: data.username, isActive: true }); // Update User (and/or other business logic)
+      reset(); // reset form
+      setError({ // Signal Success!
+        message: <>Hello {data.username}!</>,
+        title: "Successful Login!",
+        severity: "success",
+        icon: <PersonIcon sx={{ fontSize: 35 }} />,
+      });
+    }, [setUser, setError, reset]);
 
-const LoginPaperForm: FC<LoginPaperFormProps> = ({ children, onSuccess }) => {
   return (
     <FormDialogProvider>
       <PaperForm
+        persistKey={'login-page-form'}
         formProps={{
-          defaultValues: defaultLoginFormValues,
+          formContext,
           onSuccess,
-          onError: (e) => console.log(e),
+          onError: (errors, event) => {
+            event?.preventDefault();
+            console.log(errors)
+          },
         }}
         elevation={3}
         sx={{
@@ -285,39 +269,63 @@ const LoginPaperForm: FC<LoginPaperFormProps> = ({ children, onSuccess }) => {
 ```
 ```tsx
 // LoginDialog.tsx
-import {useDialog, FormDialog, FormDialogActions, type FormDialogProps,  PersistForm } from "@chris-c-brine/form-dialog";
-import {  type FC } from "react";
-import { useForm } from "react-hook-form-mui";
+import { useDialog, FormDialog, FormDialogActions } from "@chris-c-brine/form-dialog";
+import { memo, useCallback, useMemo } from "react";
 import LoginFormBase from "./LoginFormBase";
-import {
-  defaultLoginFormValues,
-  type LoginForm,
-  type SubmitLogin,
-} from "./LoginPageConstants";
+import { defaultLoginFormValues, LoginFormValues } from "./LoginPageConstants";
+import { SubmitHandler, useForm } from "react-hook-form-mui";
+import { globalErrorAtom, useUser } from "@features";
+import { useSetAtom } from "jotai/index";
+import { Person as PersonIcon } from "@mui/icons-material";
 
 const formKey = "dialog-login-form";
 
-/* Basic Form Dialog Test */
-type LoginDialogProps = Pick<ReturnType<typeof useDialog>, "dialogProps"> &
-  Pick<FormDialogProps<LoginForm>, "onClose"> & {
-    handleSubmit: SubmitLogin;
-  };
+export type LoginDialogProps = {
+  dialogProps: ReturnType<typeof useDialog>["dialogProps"];
+};
 
-export const LoginDialog: FC<LoginDialogProps> = ({ dialogProps, handleSubmit }) => {
+export const LoginDialog = memo(function ({ dialogProps }: LoginDialogProps) {
+  const setError = useSetAtom(globalErrorAtom);
+  const { setUser } = useUser();
   const formContext = useForm({ defaultValues: defaultLoginFormValues });
 
+  const reset = useMemo(() => formContext.reset, [formContext?.reset]);
+
+  const onSuccess: SubmitHandler<LoginFormValues> = useCallback(
+    (data, event) => {
+      event?.preventDefault();
+      event?.stopPropagation();
+
+      console.log(event);
+      setUser({ name: data.username, isActive: true }); // Update User (and/or other business logic)
+      reset(); // reset form
+      setError({
+        // Signal Success!
+        message: <>Hello {data.username}!</>,
+        title: "Successful Login!",
+        severity: "success",
+        icon: <PersonIcon sx={{ fontSize: 35 }} />,
+      });
+      dialogProps?.onClose();
+    },
+    [setUser, setError, dialogProps, reset],
+  );
+
   return (
     <FormDialog
       {...dialogProps}
-      formProps={{ onSuccess: handleSubmit, formContext, onError: (e) => console.log(e) }}
+      persistKey={formKey}
+      formProps={{ onSuccess, formContext }}
       title={"Basic Persist Form Dialog Test"}
       titleProps={{ variant: "h5", textAlign: "center" }}
       actions={<FormDialogActions resetProps={{ formKey }} submitProps={{ maxAttempts: 3 }} />}
     >
-      <PersistForm formName={formKey}>
-        <LoginFormBase name={formKey} columnCount={2} />
-      </PersistForm>
+      <LoginFormBase columnCount={2} />
     </FormDialog>
   );
-};
+});
+
+LoginDialog.displayName = "LoginDialog";
+
+
 ```

package/dist/components/AutoGrid.d.ts

@@ -1,19 +1,5 @@
-import { type GridProps } from "@mui/material";
-import { type FC, type ReactNode } from "react";
-/**
- * Props for the AutoGrid component
- */
-export type AutoGridProps = Omit<GridProps, "container" | "children"> & {
-    /**
-     * Array of React components to be arranged in the grid
-     */
-    components?: ReactNode[];
-    /**
-     * Number of columns to display (maximum 12 due to MUI Grid system)
-     * @default 1
-     */
-    columnCount?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-};
+import { type FC } from "react";
+import { AutoGridProps } from "../types";
 /**
  * A responsive grid component that automatically arranges children in equal columns
  *

package/dist/components/buttons/FormCancelButton.d.ts

@@ -1,8 +1,3 @@
-import { type ButtonProps } from "@mui/material";
-export type FormCancelButtonProps = Omit<ButtonProps, "onClick"> & {
-    /** Whether to maintain any attempt counters when canceling */
-    keepCount?: boolean;
-};
 /**
  * A cancel button component that integrates with FormDialogContext.
  * Automatically closes the parent dialog when clicked.

package/dist/components/buttons/FormResetButton.d.ts

@@ -1,19 +1,3 @@
-import { type ButtonProps } from "@mui/material";
-/**
- * Props for the FormResetButton component
- */
-export type FormResetButtonProps = Omit<ButtonProps, "onClick"> & {
-    /**
-     * Whether to preserve the submission count when resetting the form
-     * When true, the form's submitCount will be maintained after reset
-     */
-    keepCount?: boolean;
-    /**
-     * A unique identifier for the form associated with this reset button
-     * When provided, also clears persisted form data from storage
-     */
-    formKey?: string;
-};
 /**
  * A reset button for forms with context awareness and persistence integration
  *

package/dist/components/buttons/FormSubmitButton.d.ts

@@ -1,20 +1,6 @@
-import { type LoadingButtonProps } from "./LoadingButton";
+import type { FormSubmitButtonProps } from "../../types";
 /**
- * Props for the FormSubmitButton component
- */
-export type FormSubmitButtonProps = Omit<LoadingButtonProps, "onClick"> & {
-    /**
-     * Whether to show the submission attempt count badge
-     */
-    showAttempts?: boolean;
-    /**
-     * Maximum number of submission attempts allowed
-     * When reached, the button displays a visual indicator
-     */
-    maxAttempts?: number;
-};
-/**
- * A submit button for forms with loading state, attempt tracking and form context awareness
+ * A "submit button" for forms with loading state, attempt tracking and form context awareness
  *
  * This component extends the LoadingButton with form-specific features:
  * - Automatically displays loading state during form submission

package/dist/components/buttons/LoadingButton.d.ts

@@ -1,20 +1,4 @@
-import { type ButtonProps } from "@mui/material";
-import type { ReactNode } from "react";
-/**
- * Props for the LoadingButton component
- */
-export type LoadingButtonProps = ButtonProps & {
-    /**
-     * Controls the loading state of the button
-     * When false, displays a loading spinner; when true or undefined, displays normal content
-     */
-    loading?: boolean;
-    /**
-     * Optional icon to display when the button is not in loading state
-     * Can be used to provide a visual indicator of the button's action
-     */
-    altIcon?: ReactNode;
-};
+import { LoadingButtonProps } from "../../types";
 /**
  * A button component with built-in loading state visualization
  *

package/dist/components/dialogs/BaseDialog.d.ts

@@ -1,38 +1,5 @@
-import type { FC, ReactNode } from "react";
-import { type BlackoutDialogProps } from "./BlackoutDialog";
-import type { DialogContentProps, DialogTitleProps, DialogActionsProps } from "@mui/material";
-export type BaseDialogProps = BlackoutDialogProps & {
-    /**
-     * Title content for the dialog
-     * When provided, renders a DialogTitle component
-     */
-    title?: ReactNode;
-    /**
-     * Props passed to the DialogTitle component
-     * Only applied when title is provided
-     */
-    titleProps?: DialogTitleProps;
-    /**
-     * Props passed to the DialogContent component
-     * Only applied when children is provided
-     */
-    contentProps?: DialogContentProps;
-    /**
-     * Action buttons for the dialog footer
-     * When provided, renders a DialogActions component
-     */
-    actions?: ReactNode;
-    /**
-     * Props passed to the DialogActions component
-     * Only applied when actions is provided
-     */
-    actionsProps?: DialogActionsProps;
-    /**
-     * Optional close button that appears in the header
-     * Positioned adjacent to the title
-     */
-    closeButton?: ReactNode;
-};
+import type { FC } from "react";
+import { BaseDialogProps } from "../../types";
 /**
  * A flexible dialog component with standardized structure and styling
  *

package/dist/components/dialogs/BlackoutDialog.d.ts

@@ -1,22 +1,5 @@
-import { type DialogProps } from "@mui/material";
 import { type FC } from "react";
-export type BlackoutDialogProps = Omit<DialogProps, "title"> & {
-    /**
-     * An optional unique string identifier
-     * @default 'blackout-dialog'
-     */
-    id?: string;
-    /**
-     * Whether the dialog is currently visible.
-     * @default false
-     */
-    open: boolean;
-    /**
-     * Whether to apply a black overlay behind the dialog.
-     * @default false
-     */
-    blackout?: boolean;
-};
+import { BlackoutDialogProps } from "../../types";
 /**
  * A component for rendering a modal dialog with an optional blackout effect.
  */

package/dist/components/dialogs/FormDialog.d.ts

@@ -1,15 +1,5 @@
-import { type BaseDialogProps } from "./BaseDialog";
-import { type FieldValues, type FormContainerProps } from "react-hook-form-mui";
-/**
- * Props for the FormDialog component
- */
-export type FormDialogProps<T extends FieldValues> = Omit<BaseDialogProps, "PaperComponent"> & {
-    /**
-     * Form methods from useForm hook
-     * Establish the form context for child components
-     */
-    formProps: FormContainerProps<T>;
-};
+import { type FieldValues } from "react-hook-form-mui";
+import { FormDialogProps } from "../../types";
 /**
  * A dialog component specialized for forms with integrated context providers
  *
@@ -31,4 +21,7 @@ export type FormDialogProps<T extends FieldValues> = Omit<BaseDialogProps, "Pape
  * - useFormDialog() - Access dialog controls and state
  *
  */
-export declare const FormDialog: <T extends FieldValues>({ formProps, children, open, onClose, ...dialogProps }: FormDialogProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormDialog: {
+    <T extends FieldValues>({ formProps, children, open, onClose, persistKey, ...dialogProps }: FormDialogProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/dialogs/FormDialogActions.d.ts

@@ -1,46 +1,5 @@
-import { GridProps } from "@mui/material";
-import type { FC, PropsWithChildren } from "react";
-import { type FormCancelButtonProps } from "../buttons/FormCancelButton";
-import { type FormResetButtonProps } from "../buttons/FormResetButton";
-import { FormSubmitButtonProps } from "../buttons/FormSubmitButton";
-/**
- * Props for the FormDialogActions component
- */
-export type FormDialogActionsProps = Partial<PropsWithChildren> & {
-    /**
-     * Props to customize the cancel button
-     */
-    cancelProps?: FormCancelButtonProps;
-    /**
-     * Props to customize the reset button
-     */
-    resetProps?: FormResetButtonProps;
-    /**
-     * Props to customize the submit button
-     */
-    submitProps?: FormSubmitButtonProps;
-    /**
-     * Display variant for the buttons
-     * - "icon": Shows only icons
-     * - "text": Shows only text
-     * - "iconText": Shows both icons and text
-     */
-    variant?: "icon" | "text" | "iconText";
-    /**
-     * Whether to hide the cancel button completely
-     * @default false
-     */
-    removeCancelButton?: boolean;
-    /**
-     * Whether to hide the reset button completely
-     * @default false
-     */
-    removeResetButton?: boolean;
-    /**
-     * Props to customize the containing Grid
-     */
-    gridProps?: GridProps;
-};
+import type { FC } from "react";
+import { FormDialogActionsProps } from "../../types";
 /**
  * Standard set of form dialog action buttons with consistent styling and behavior
  *

package/dist/components/forms/PaperForm.d.ts

@@ -1,15 +1,5 @@
-import { type PaperProps } from "@mui/material";
-import { type FieldValues, type FormContainerProps } from "react-hook-form-mui";
-/**
- * Props for the PaperForm component
- */
-export type PaperFormProps<T extends FieldValues> = PaperProps & {
-    /**
-     * Props to configure the form container
-     * Includes settings for form state, validation, and submission handling
-     */
-    formProps: FormContainerProps<T>;
-};
+import { type FieldValues } from "react-hook-form-mui";
+import { PaperFormProps } from "../../types";
 /**
  * A component that combines a Material UI Paper with a form container
  *
@@ -56,4 +46,4 @@ export type PaperFormProps<T extends FieldValues> = PaperProps & {
  *
  * @template T - The type of form values being handled
  */
-export declare const PaperForm: <T extends FieldValues>({ children, formProps, ...paperProps }: PaperFormProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const PaperForm: <T extends FieldValues>({ children, persistKey, formProps, ...paperProps }: PaperFormProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/PersistForm.d.ts

@@ -1,14 +1,4 @@
-import type { FC, PropsWithChildren } from "react";
-/**
- * Props for the PersistForm component
- */
-export interface PersistFormProps extends PropsWithChildren {
-    /**
-     * A unique identifier for the form
-     * This key is used to store and retrieve form data in the persistence layer
-     */
-    formName: string;
-}
+import { PersistFormProps } from "../../types";
 /**
  * A component that enables form state persistence across sessions
  *
@@ -50,4 +40,4 @@ export interface PersistFormProps extends PropsWithChildren {
  *   </PersistForm>
  * </FormDialog>
  */
-export declare const PersistForm: FC<PersistFormProps>;
+export declare const PersistForm: import("react").NamedExoticComponent<PersistFormProps>;

package/dist/hooks/index.d.ts

@@ -1,5 +1,5 @@
 export * from "./useFormDialog";
 export * from "./useMaxAttempts";
-export * from "./usePersistedForm";
+export * from "./usePersistForm";
 export * from "./useOnMount";
 export * from "./useDialog";

package/dist/hooks/useDialog.d.ts

@@ -1,21 +1,4 @@
-import { DialogProps } from "@mui/material";
-export interface UseDialogProps {
-    /** Initial open state of the dialog */
-    open?: boolean;
-    /** Additional props to spread onto the dialog component */
-    dialogProps?: Omit<DialogProps, "open" | "onClose">;
-}
-export interface UseDialogReturn extends Omit<DialogProps, "open" | "onClose"> {
-    /** Function to close the dialog */
-    closeDialog: () => void;
-    /** Function to open the dialog */
-    openDialog: () => void;
-    /** Props to spread onto the dialog component */
-    dialogProps: DialogProps & {
-        open: boolean;
-        onClose: () => void;
-    };
-}
+import { UseDialogProps, UseDialogReturn } from "../types";
 /**
  * Hook for managing dialog state and providing dialog control functions
  *
@@ -23,6 +6,8 @@ export interface UseDialogReturn extends Omit<DialogProps, "open" | "onClose"> {
  * functions to open and close the dialog, along with props that can be
  * spread onto a Material-UI Dialog component.
  *
+ * Restores focus to the opening element, but only after the dialog has fully closed.
+ *
  * @example
  * // Basic usage
  * const { openDialog, closeDialog, dialogProps } = useDialog();
@@ -35,7 +20,6 @@ export interface UseDialogReturn extends Omit<DialogProps, "open" | "onClose"> {
  * // With initial configuration
  * const { dialogProps } = useDialog({ keepMounted: true});
  *
- *
  * @param props - Optional configuration options
  */
 export declare const useDialog: (props?: UseDialogProps) => UseDialogReturn;

package/dist/hooks/useFormDialog.d.ts

@@ -2,7 +2,7 @@
  * Hook for accessing the FormDialog context values and functions
  *
  * This hook provides access to the form dialog state and controls managed by
- * the FormDialogProvider. It allows components to interact with dialog state,
+ * the FormDialogProvider. It allows components to interact with the dialog state,
  * including open/close status and form-wide disabled state.
  *
  * The context provides:
@@ -26,4 +26,4 @@
  *
  * @returns FormDialogContextType object containing dialog state and controls
  */
-export declare const useFormDialog: () => import("../state/FormDialogContext").FormDialogContextType;
+export declare const useFormDialog: () => import("..").FormDialogContextType;