@chris-c-brine/form-dialog 1.0.5 → 1.1.0

package/dist/index.js

@@ -1,20 +1,34 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useEffect, useCallback, useMemo, Fragment, useRef, memo, Children } from 'react';
+import { createContext, useContext, Fragment, useState, useEffect, useRef, useCallback, memo, useMemo, Children } from 'react';
 import { Dialog, DialogTitle, DialogContent, DialogActions, Paper, IconButton, Button, useTheme as useTheme$1, Box, CircularProgress, Badge, Grid } from '@mui/material';
-import { FormContainer, useFormContext, useFormState } from 'react-hook-form-mui';
+import { useFormContext, FormContainer, useFormState } from 'react-hook-form-mui';
+import { isEqualWith, isObject, isNumber, isEqual, isEmpty, omit, merge, debounce } from 'lodash';
+import { Refresh, Close, Save } from '@mui/icons-material';
 import { useTheme } from '@mui/material/styles';
-import { merge, isEqualWith, isObject, isNumber, isEqual, isEmpty, omit, debounce } from 'lodash';
-import { Close, Refresh, Save } from '@mui/icons-material';
 import { create } from 'zustand';
 import { createJSONStorage, persist } from 'zustand/middleware';
-import { useFormContext as useFormContext$1 } from 'react-hook-form';
 
 /**
  * A component for rendering a modal dialog with an optional blackout effect.
  */
-const BlackoutDialog = ({ open = false, blackout = false, id = "blackout-dialog", children, sx, keepMounted = true, ...props }) => {
+const BlackoutDialog = ({ open = false, blackout = false, id = "blackout-dialog", children, sx, ...props }) => {
     const sxProps = blackout ? { ...sx, backgroundColor: "black" } : sx;
-    return (jsx(Dialog, { open: open, id: id, keepMounted: keepMounted, ...props, sx: sxProps, children: children }));
+    /**
+     * 1) When you open a dialog via a button, the button's ancestor gets aria-hidden, presumably so that
+     *    screen readers (SR) can't interact with it while the dialog is open.
+     * 2) When you close the dialog, the aria-hidden is removed so that SRs can interact with the button again.
+     * 3) Also, when closing, the focus is moved back on the opener button.
+     *
+     * Now comes the important part. You get Blocked aria-hidden on a <div> only when 3 happens before 2. In this case,
+     *    as the error message explains, we are trying to place focus somewhere where SRs don't have access, which is
+     *    a No No, and browsers correctly warn about it.
+     *
+     * This ordering is dependent on the closeAfterTransition prop on the MUI Dialog. When false and user triggers
+     * dialog close, aria-hidden is removed (2) and then focus is placed on the opener button (3). Meaning there is no
+     * issue. You can see it in action here. However, when it's true (the default), the order is the other way around,
+     * and you get the warning.
+     */
+    return (jsx(Dialog, { closeAfterTransition: false, open: open, id: id, ...props, sx: sxProps, children: children }));
 };
 
 /**
@@ -36,27 +50,11 @@ const BlackoutDialog = ({ open = false, blackout = false, id = "blackout-dialog"
  * consistent styling and behavior.
  *
  * @example
- * // Basic usage with all sections
- * <BaseDialog
- *   open={open}
- *   onClose={handleClose}
- *   title="Confirmation"
- *   actions={
- *     <>
- *       <Button onClick={handleCancel}>Cancel</Button>
- *       <Button onClick={handleConfirm}>Confirm</Button>
- *     </>
- *   }
- * >
- *   Are you sure you want to proceed?
- * </BaseDialog>
- *
- * @example
  * // Customized with section props
  * <BaseDialog
  *   open={isOpen}
  *   title="Advanced Settings"
- *   titleProps={{ sx: { bgcolor: 'primary.main', color: 'white' } }}
+ *   titleProps={{ sx: { backgroundColor: 'primary.main', color: 'white' } }}
  *   contentProps={{ sx: { p: 3 } }}
  *   actionsProps={{ sx: { justifyContent: 'space-between' } }}
  *   actions={<SettingsDialogActions />}
@@ -74,158 +72,15 @@ const BaseDialog = ({ title = null, closeButton, titleProps, children = null, co
         ...sx,
     }, ...props, children: [title && jsx(DialogTitle, { ...titleProps, children: title }), " ", closeButton, children && jsx(DialogContent, { ...contentProps, children: children }), actions && jsx(DialogActions, { ...actionsProps, children: actions })] }));
 
-/**
- * A component that combines a Material UI Paper with a form container
- *
- * PaperForm wraps form content in an elevated paper surface, providing
- * visual distinction and a clean container for form elements. It integrates
- * seamlessly with react-hook-form by using FormContainer internally.
- *
- * This component is useful for creating standalone form surfaces outside of dialogs,
- * such as on pages or within cards. It supports all Paper props for styling
- * while handling form state management through FormContainer.
- *
- * @example
- * // Basic usage
- * <PaperForm
- *   formProps={{
- *     defaultValues: { name: "", email: "" },
- *     onSuccess: handleSubmit
- *   }}
- *   elevation={3}
- * >
- *   <TextFieldElement name="name" label="Name" />
- *   <TextFieldElement name="email" label="Email" />
- *   <Button type="submit">Submit</Button>
- * </PaperForm>
- *
- * @example
- * // With custom styling and validation
- * <PaperForm
- *   formProps={{
- *     defaultValues: formDefaultValues,
- *     onSuccess: handleSubmit,
- *     onError: handleError,
- *   }}
- *   sx={{
- *     padding: 3,
- *     borderRadius: 2,
- *     backgroundColor: 'background.paper',
- *   }}
- *   elevation={2}
- * >
- *   <FormFields />
- *   <FormDialogActions submitProps={{ children: "Save Profile" }} />
- * </PaperForm>
- *
- * @template T - The type of form values being handled
- */
-const PaperForm = ({ children, formProps, ...paperProps }) => (jsx(Paper, { ...paperProps, children: jsx(FormContainer, { ...formProps, children: children }) }));
-
 const FormDialogContext = createContext(undefined);
 FormDialogContext.displayName = "FormDialogContext";
 
-// Create a context that will hold the parent theme
-const ParentThemeContext = createContext(null);
-const useParentTheme = () => useContext(ParentThemeContext);
-const ThemeBridge = ({ children }) => {
-    const parentTheme = useTheme();
-    const [themeSnapshot, setThemeSnapshot] = useState(parentTheme);
-    // Update the snapshot when the parent theme changes
-    useEffect(() => {
-        setThemeSnapshot(parentTheme);
-    }, [parentTheme]);
-    // Pass the parent theme to our components
-    return (jsx(ParentThemeContext.Provider, { value: themeSnapshot, children: children }));
-};
-
-/**
- * Context provider component for form dialog state management
- *
- * FormDialogProvider creates and manages shared state for form dialogs,
- * allowing child components to access dialog state and controls through
- * the useFormDialog hook.
- *
- * This provider handles:
- * - Dialog open/close state
- * - Form-wide disabled state
- * - Dialog close handler passing
- * - Theme consistency via ThemeBridge
- *
- * Use this provider to wrap form components that need to share state
- * and disabled status, such as dialogs with multiple form fields
- * and action buttons that need to be coordinated.
- *
- * @example
- * // Basic usage wrapping a form
- * <FormDialogProvider>
- *   <FormContainer onSuccess={handleSubmit}>
- *     <TextFieldElement name="name" />
- *     <FormDialogActions />
- *   </FormContainer>
- * </FormDialogProvider>
- *
- * @example
- * // With pre-configured dialog state
- * <FormDialogProvider open={isOpen} closeDialog={handleClose}>
- *   <PaperForm formProps={formProps}>
- *     <LoginFormFields />
- *     <FormDialogActions submitProps={{ maxAttempts: 3 }} />
- *   </PaperForm>
- * </FormDialogProvider>
- */
-const FormDialogProvider = ({ children, ...value }) => {
-    const [disabled, setDisabled] = useState(false);
-    return (jsx(ThemeBridge, { children: jsx(FormDialogContext.Provider, { value: { ...value, disabled, setDisabled }, children: children }) }));
-};
-
-/**
- * A dialog component specialized for forms with integrated context providers
- *
- * FormDialog combines Material UI dialog functionality with React Hook Form,
- * creating a comprehensive solution for modal forms. It provides context
- * providers for form state management, dialog controls, and accessibility.
- *
- * Key features:
- * - Integrates React Hook Form with Material UI dialogs
- * - Provides form state management through FormProvider
- * - Establishes dialog context through FormDialogProvider
- * - Handles form submission and error states
- * - Supports loading states for form operations
- * - Maintains consistent styling and behavior
- *
- * Child components can access the form and dialog context through hooks:
- * - useFormContext() - Access form methods and state
- * - useFormState() - Access form validation state
- * - useFormDialog() - Access dialog controls and state
- *
- */
-const FormDialog = ({ formProps, children, open, onClose, ...dialogProps }) => {
-    const PaperComponent = useCallback((props) => jsx(PaperForm, { formProps: formProps, ...props }), [formProps]);
-    const baseDialogProps = useMemo(() => merge({
-        actionsProps: { sx: { pt: 2.5 } },
-        contentProps: {
-            sx: {
-                display: "flex",
-                justifyContent: "center",
-                boxSizing: "border-box",
-                maxHeight: `calc(100vh - 235px)`, // 235 estimate using H4 title & default FormDialogActions
-            },
-        },
-    }, dialogProps), [dialogProps]);
-    return (jsx(FormDialogProvider, { open: open, closeDialog: onClose, children: jsx(BaseDialog, { PaperComponent: PaperComponent, open: open, onClose: onClose, closeButton: jsx(IconButton, { sx: {
-                    position: "absolute",
-                    top: 8,
-                    right: 8,
-                }, onClick: (e) => onClose === null || onClose === void 0 ? void 0 : onClose(e, 'escapeKeyDown'), children: jsx(Close, { fontSize: "small", "aria-label": "close-form-dialog" }) }), ...baseDialogProps, children: children }) }));
-};
-
 // src/components/dialogs/FormDialog/hooks/useFormDialog.ts
 /**
  * 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:
@@ -294,8 +149,20 @@ const deepCompare = (a, b, equalEmpty = false) => {
 deepCompare.displayName = "deepCompare";
 
 function applyDefaultFormDialogProps({ resetProps, submitProps, gridProps, cancelProps, variant = "iconText" }) {
+    // Max Attempts
     const maxAttempts = (submitProps === null || submitProps === void 0 ? void 0 : submitProps.maxAttempts) || Infinity;
     const hasMaxAttempts = isFinite(maxAttempts) && maxAttempts > 0;
+    // Grid Container
+    const gridContainerProps = {
+        justifyContent: "space-between",
+        minWidth: 275,
+        px: 1,
+        pb: 1.5,
+        columnGap: 1,
+        width: "100%",
+        ...gridProps,
+    };
+    // Reset Button
     let resetChildren = undefined;
     if (variant == "icon")
         resetChildren = jsx(Refresh, {});
@@ -306,15 +173,7 @@ function applyDefaultFormDialogProps({ resetProps, submitProps, gridProps, cance
         ...(resetChildren ? { children: resetChildren } : {}),
         ...omit(resetProps, "disabled"),
     };
-    const gridContainerProps = {
-        justifyContent: "space-between",
-        minWidth: 275,
-        px: 1,
-        pb: 1.5,
-        columnGap: 1,
-        width: "100%",
-        ...gridProps,
-    };
+    // Cancel Button
     let cancelChildren = undefined;
     if (variant == "icon")
         cancelChildren = jsx(Close, {});
@@ -324,6 +183,7 @@ function applyDefaultFormDialogProps({ resetProps, submitProps, gridProps, cance
         ...(cancelChildren ? { children: cancelChildren } : {}),
         ...cancelProps,
     };
+    // Submit Button
     let submitChildren = {};
     if (variant == "icon")
         submitChildren = { children: jsx(Fragment$1, {}), altIcon: jsx(Save, {}) };
@@ -333,14 +193,22 @@ function applyDefaultFormDialogProps({ resetProps, submitProps, gridProps, cance
         ...submitChildren,
         ...submitProps,
     };
-    return {
-        resetButtonProps,
-        gridContainerProps,
-        cancelButtonProps,
-        submitButtonProps,
-    };
+    return { resetButtonProps, gridContainerProps, cancelButtonProps, submitButtonProps };
 }
 
+// Create a context that will hold the parent theme
+const ParentThemeContext = createContext(null);
+const ThemeBridge = ({ children }) => {
+    const parentTheme = useTheme();
+    const [themeSnapshot, setThemeSnapshot] = useState(parentTheme);
+    // Update the snapshot when the parent theme changes
+    useEffect(() => {
+        setThemeSnapshot(parentTheme);
+    }, [parentTheme]);
+    // Pass the parent theme to our components
+    return (jsx(ParentThemeContext.Provider, { value: themeSnapshot, children: children }));
+};
+
 const useMaxAttempts = ({ maxAttempts }) => {
     const { formState, resetField } = useFormContext();
     const { setDisabled, disabled } = useFormDialog();
@@ -435,36 +303,18 @@ function useOnMount(callback) {
  * - Only saves changed fields, not the entire form state
  * - Automatically clears storage when form values match defaults
  *
- * @example
- * // In a form component:
- * const MyPersistedForm = () => {
- *   const formMethods = useForm({ defaultValues: { name: '' } });
- *   // Connect the form to persistence
- *   usePersistedForm({ formName: 'user-registration' });
- *
- *   return (<FormProvider {...formMethods}>
- *     <TextFieldElement name="name" label="Name" />
- *   </FormProvider>);
- * }
- *
- * @example
- * // For convenience, use with the PersistForm wrapper component:
- * <PersistForm formName="user-profile">
- *   <ProfileFormFields />
- * </PersistForm>
- *
- * @param props - Configuration options
  */
-const usePersistedForm = ({ formName = "" }) => {
-    const { setValue, watch, formState } = useFormContext();
+const usePersistForm = ({ formName = "", formContext }) => {
+    // const { setValue, watch, formState } = formContext;
     const { formData, updateFormData, resetFormData } = createFormChangeStore(formName)();
-    const { open, disabled } = useFormDialog();
+    const { disabled } = useFormDialog();
     const debouncedUpdate = debounce((key, values) => {
         updateFormData(key, values);
     }, 200);
     useEffect(() => {
-        if (!formName)
+        if (!formName || !formContext)
             return;
+        const { watch, formState } = formContext;
         const subscription = watch((newValues, { name }) => {
             if (deepCompare(newValues, formState.defaultValues, true)) {
                 resetFormData();
@@ -483,19 +333,18 @@ const usePersistedForm = ({ formName = "" }) => {
             debouncedUpdate.cancel();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [watch, debouncedUpdate]);
+    }, [formContext, debouncedUpdate]);
     useOnMount(() => {
-        if (!isEmpty(formData) && !disabled && !formState.isLoading && open && formName) {
+        if (!isEmpty(formData) && !disabled && !(formContext === null || formContext === void 0 ? void 0 : formContext.formState.isLoading) && formName) {
             setTimeout(() => {
                 Object.entries(formData).forEach(([key, value]) => {
-                    setValue(key, value, { shouldDirty: true, shouldTouch: true });
+                    formContext === null || formContext === void 0 ? void 0 : formContext.setValue(key, value, { shouldDirty: true, shouldTouch: true });
                 });
             }, 200);
         }
     });
 };
 
-// src/hooks/useDialog.ts
 /**
  * Hook for managing dialog state and providing dialog control functions
  *
@@ -503,6 +352,8 @@ const usePersistedForm = ({ formName = "" }) => {
  * 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();
@@ -513,20 +364,18 @@ const usePersistedForm = ({ formName = "" }) => {
  *
  * @example
  * // With initial configuration
- * const { dialogProps } = useDialog({ keepMounted: false });
- *
+ * const { dialogProps } = useDialog({ keepMounted: true});
  *
  * @param props - Optional configuration options
  */
 const useDialog = (props) => {
-    var _a;
     const [open, setOpen] = useState(!!(props === null || props === void 0 ? void 0 : props.open));
-    const onClose = useCallback(() => setOpen(false), []);
+    const closeDialog = useCallback(() => setOpen(false), []);
     const openDialog = useCallback(() => setOpen(true), []);
     return {
-        closeDialog: onClose,
+        closeDialog,
         openDialog,
-        dialogProps: { open, onClose, keepMounted: (_a = props === null || props === void 0 ? void 0 : props.keepMounted) !== null && _a !== void 0 ? _a : true }
+        dialogProps: { open, onClose: closeDialog, keepMounted: !!(props === null || props === void 0 ? void 0 : props.keepMounted) }
     };
 };
 
@@ -571,11 +420,143 @@ const useDialog = (props) => {
  *   </PersistForm>
  * </FormDialog>
  */
-const PersistForm = ({ children, formName }) => {
-    usePersistedForm({ formName });
+const PersistForm = memo(function ({ children, formName }) {
+    const formContext = useFormContext();
+    usePersistForm({ formName, formContext });
     return jsx(Fragment$1, { children: children });
+});
+PersistForm.displayName = "PersistForm";
+
+/**
+ * A component that combines a Material UI Paper with a form container
+ *
+ * PaperForm wraps form content in an elevated paper surface, providing
+ * visual distinction and a clean container for form elements. It integrates
+ * seamlessly with react-hook-form by using FormContainer internally.
+ *
+ * This component is useful for creating standalone form surfaces outside of dialogs,
+ * such as on pages or within cards. It supports all Paper props for styling
+ * while handling form state management through FormContainer.
+ *
+ * @example
+ * // Basic usage
+ * <PaperForm
+ *   formProps={{
+ *     defaultValues: { name: "", email: "" },
+ *     onSuccess: handleSubmit
+ *   }}
+ *   elevation={3}
+ * >
+ *   <TextFieldElement name="name" label="Name" />
+ *   <TextFieldElement name="email" label="Email" />
+ *   <Button type="submit">Submit</Button>
+ * </PaperForm>
+ *
+ * @example
+ * // With custom styling and validation
+ * <PaperForm
+ *   formProps={{
+ *     defaultValues: formDefaultValues,
+ *     onSuccess: handleSubmit,
+ *     onError: handleError,
+ *   }}
+ *   sx={{
+ *     padding: 3,
+ *     borderRadius: 2,
+ *     backgroundColor: 'background.paper',
+ *   }}
+ *   elevation={2}
+ * >
+ *   <FormFields />
+ *   <FormDialogActions submitProps={{ children: "Save Profile" }} />
+ * </PaperForm>
+ *
+ * @template T - The type of form values being handled
+ */
+const PaperForm = ({ children, persistKey = "", formProps, ...paperProps }) => (jsx(Paper, { ...paperProps, children: jsx(FormContainer, { ...formProps, children: jsx(PersistForm, { formName: persistKey, children: children }) }) }));
+
+/**
+ * Context provider component for form dialog state management
+ *
+ * FormDialogProvider creates and manages shared state for form dialogs,
+ * allowing child components to access dialog state and controls through
+ * the useFormDialog hook.
+ *
+ * This provider handles:
+ * - Dialog open/close state
+ * - Form-wide disabled state
+ * - Dialog close handler passing
+ * - Theme consistency via ThemeBridge
+ *
+ * Use this provider to wrap form components that need to share state
+ * and disabled status, such as dialogs with multiple form fields
+ * and action buttons that need to be coordinated.
+ *
+ * @example
+ * // Basic usage wrapping a form
+ * <FormDialogProvider>
+ *   <FormContainer onSuccess={handleSubmit}>
+ *     <TextFieldElement name="name" />
+ *     <FormDialogActions />
+ *   </FormContainer>
+ * </FormDialogProvider>
+ *
+ * @example
+ * // With pre-configured dialog state
+ * <FormDialogProvider open={isOpen} closeDialog={handleClose}>
+ *   <PaperForm formProps={formProps}>
+ *     <LoginFormFields />
+ *     <FormDialogActions submitProps={{ maxAttempts: 3 }} />
+ *   </PaperForm>
+ * </FormDialogProvider>
+ */
+const FormDialogProvider = ({ children, ...value }) => {
+    const [disabled, setDisabled] = useState(false);
+    return (jsx(ThemeBridge, { children: jsx(FormDialogContext.Provider, { value: { ...value, disabled, setDisabled }, children: children }) }));
 };
 
+/**
+ * A dialog component specialized for forms with integrated context providers
+ *
+ * FormDialog combines Material UI dialog functionality with React Hook Form,
+ * creating a comprehensive solution for modal forms. It provides context
+ * providers for form state management, dialog controls, and accessibility.
+ *
+ * Key features:
+ * - Integrates React Hook Form with Material UI dialogs
+ * - Provides form state management through FormProvider
+ * - Establishes dialog context through FormDialogProvider
+ * - Handles form submission and error states
+ * - Supports loading states for form operations
+ * - Maintains consistent styling and behavior
+ *
+ * Child components can access the form and dialog context through hooks:
+ * - useFormContext() - Access form methods and state
+ * - useFormState() - Access form validation state
+ * - useFormDialog() - Access dialog controls and state
+ *
+ */
+const FormDialog = function ({ formProps, children, open, onClose, persistKey = "", ...dialogProps }) {
+    const PaperComponent = useCallback((props) => jsx(PaperForm, { persistKey: persistKey, formProps: formProps, ...props }), [formProps, persistKey]);
+    const baseDialogProps = useMemo(() => merge({
+        actionsProps: { sx: { pt: 2.5 } },
+        contentProps: {
+            sx: {
+                display: "flex",
+                justifyContent: "center",
+                boxSizing: "border-box",
+                maxHeight: `calc(100vh - 235px)`, // 235 estimate using H4 title & default FormDialogActions
+            },
+        },
+    }, dialogProps), [dialogProps]);
+    return (jsx(FormDialogProvider, { open: open, closeDialog: onClose, children: jsx(BaseDialog, { PaperComponent: PaperComponent, open: open, onClose: onClose, closeButton: jsx(IconButton, { sx: {
+                    position: "absolute",
+                    top: 8,
+                    right: 8,
+                }, onClick: (e) => onClose === null || onClose === void 0 ? void 0 : onClose(e, 'escapeKeyDown'), children: jsx(Close, { fontSize: "small", "aria-label": "close-form-dialog" }) }), ...baseDialogProps, children: children }) }));
+};
+FormDialog.displayName = "FormDialog";
+
 /**
  * A cancel button component that integrates with FormDialogContext.
  * Automatically closes the parent dialog when clicked.
@@ -644,20 +625,20 @@ FormCancelButton.displayName = "FormCancelButton";
  *   Process Payment
  * </LoadingButton>
  */
-const LoadingButton = ({ children, loading, altIcon, ...props }) => {
+const LoadingButton = ({ children, loading = false, altIcon, ...props }) => {
     const theme = useTheme$1();
-    return (jsxs(Button, { ...props, children: [!loading ? (jsx(Box, { sx: {
+    return (jsxs(Button, { ...props, children: [!loading ? altIcon : (jsx(Box, { sx: {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
                     width: "100%",
                     height: "auto",
                     mr: 1,
-                }, children: jsx(CircularProgress, { color: "inherit", size: theme.typography.fontSize }) })) : (altIcon), children] }));
+                }, children: jsx(CircularProgress, { color: "inherit", size: theme.typography.fontSize }) })), children] }));
 };
 
 /**
- * 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
@@ -671,9 +652,6 @@ const LoadingButton = ({ children, loading, altIcon, ...props }) => {
  * - Explicit-disabled prop
  * - Form-wide disabled state from FormDialogContext
  *
- * @example
- * // Basic usage
- * <FormSubmitButton />
  *
  * @example
  * // With custom text and max attempts
@@ -692,11 +670,11 @@ const LoadingButton = ({ children, loading, altIcon, ...props }) => {
  * </FormSubmitButton>
  */
 const FormSubmitButton = memo(function ({ showAttempts, maxAttempts, children = "Save", ...props }) {
-    const { formState, getValues } = useFormContext$1();
+    const formState = useFormState();
     const { disabled: disabledForm } = useFormDialog();
     const disabled = formState.isSubmitting || formState.isLoading || props.disabled || disabledForm;
     const hasMaxAttempts = maxAttempts && isFinite(maxAttempts);
-    return (jsx(LoadingButton, { loading: !formState.isSubmitting || formState.isLoading, variant: "contained", type: "submit", size: "large", disabled: disabled, ...props, children: jsx(Badge, { badgeContent: formState.submitCount || (formState.disabled ? maxAttempts : undefined), color: disabled ? "error" : "warning", invisible: !hasMaxAttempts && !showAttempts, children: children }) }));
+    return (jsx(LoadingButton, { loading: formState.isSubmitting || formState.isLoading, variant: "contained", type: "submit", size: "large", disabled: disabled, ...props, children: jsx(Badge, { badgeContent: formState.submitCount || (formState.disabled ? maxAttempts : undefined), color: disabled ? "error" : "warning", invisible: !hasMaxAttempts && !showAttempts, children: children }) }));
 });
 FormSubmitButton.displayName = "FormSubmitButton";
 
@@ -717,10 +695,6 @@ FormSubmitButton.displayName = "FormSubmitButton";
  * - Form-wide disabled state from FormDialogContext
  *
  * @example
- * // Basic usage
- * <FormResetButton />
- *
- * @example
  * // With persistence integration
  * <FormResetButton formKey="user-profile-form" />
  *
@@ -742,7 +716,6 @@ const FormResetButton = memo(function (props) {
     const { reset } = useFormContext();
     const { isSubmitting, isLoading, isDirty } = useFormState();
     const { disabled: disabledForm } = useFormDialog();
-    useParentTheme();
     const keepSubmitCount = !!(props === null || props === void 0 ? void 0 : props.keepCount);
     const handleOnClick = useCallback(() => {
         reset(undefined, { keepSubmitCount, keepIsSubmitted: keepSubmitCount });
@@ -804,7 +777,7 @@ FormResetButton.displayName = "FormResetButton";
  *   </Grid>
  * </Grid>
  */
-const GridSpacer = () => jsx(Grid, { flex: "1 0 0" });
+const GridSpacer = () => jsx(Grid, { flex: "1 0 0", sx: { w: 0 } });
 
 /**
  * Standard set of form dialog action buttons with consistent styling and behavior
@@ -888,5 +861,5 @@ const AutoGrid = ({ components, columnCount = 1, ...props }) => (jsx(Grid, { con
             xs: 12 / columnCount,
         }, children: child }, child.key))) }));
 
-export { AutoGrid, BaseDialog, BlackoutDialog, FormCancelButton, FormDialog, FormDialogActions, FormDialogProvider, FormResetButton, FormSubmitButton, GridSpacer, PaperForm, PersistForm, applyDefaultFormDialogProps, deepCompare, hasMaxAttempts, useDialog, useFormDialog, usePersistedForm };
+export { AutoGrid, BaseDialog, BlackoutDialog, FormCancelButton, FormDialog, FormDialogActions, FormDialogProvider, FormResetButton, FormSubmitButton, GridSpacer, LoadingButton, PaperForm, PersistForm, useDialog, useFormDialog, usePersistForm };
 //# sourceMappingURL=index.js.map