@chris-c-brine/form-dialog 1.1.6 → 1.1.8

package/dist/index.js

@@ -1,11 +1,9 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { createContext, useContext, Fragment, useState, useEffect, useRef, useCallback, memo, useMemo } from 'react';
-import { Dialog, DialogTitle, DialogContent, DialogActions, Paper, IconButton, Button, useTheme as useTheme$1, Box, CircularProgress, Badge, Grid } from '@mui/material';
-import { useFormContext, FormContainer, useFormState } from 'react-hook-form-mui';
+import { createContext, Fragment, useState, useEffect, useCallback, useMemo, useContext, useRef, memo } from 'react';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Paper, IconButton, Button, Box, CircularProgress, Badge, Grid } from '@mui/material';
+import { FormContainer, useFormContext, useFormState } from 'react-hook-form-mui';
 import { Refresh, Close, Save } from '@mui/icons-material';
 import { useTheme } from '@mui/material/styles';
-import { create } from 'zustand';
-import { createJSONStorage, persist } from 'zustand/middleware';
 
 /**
  * A component for rendering a modal dialog with an optional blackout effect.
@@ -63,45 +61,56 @@ const BlackoutDialog = ({ open = false, blackout = false, id = "blackout-dialog"
  */
 const BaseDialog = ({ title = null, closeButton, titleProps, children = null, contentProps, id, actions = null, actionsProps, ...props }) => (jsxs(BlackoutDialog, { id: id, ...props, children: [title && jsx(DialogTitle, { ...titleProps, children: title }), " ", closeButton, children && jsx(DialogContent, { ...contentProps, children: children }), actions && jsx(DialogActions, { ...actionsProps, children: actions })] }));
 
-const FormDialogContext = createContext(undefined);
-FormDialogContext.displayName = "FormDialogContext";
-
-// src/components/dialogs/FormDialog/hooks/useFormDialog.ts
 /**
- * Hook for accessing the FormDialog context values and functions
+ * A component that combines a Material UI Paper with a form container
  *
- * This hook provides access to the form dialog state and controls managed by
- * the FormDialogProvider. It allows components to interact with the dialog state,
- * including open/close status and form-wide disabled state.
+ * 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.
  *
- * The context provides:
- * - Dialog open state
- * - Close dialog function
- * - Form disabled state and setter function
+ * 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.
  *
- * @throws Error if used outside a FormDialogProvider
+ * @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
- * // Using in a form button component
- * const FormButton = () => {
- *   const { openDialog, disabled } = useFormDialog();
- *   return (<Button
- *       disabled={disabled}
- *       onClick={() => openDialog()}
- *     >
- *       Cancel
- *     </Button>);
- * }
+ * // 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>
  *
- * @returns FormDialogContextType object containing dialog state and controls
+ * @template T - The type of form values being handled
  */
-const useFormDialog = () => {
-    const context = useContext(FormDialogContext);
-    if (!context) {
-        throw new Error("useFormDialog must be used within a FormDialogProvider");
-    }
-    return context;
-};
+const PaperForm = ({ children, formProps, ...paperProps }) => (jsx(Paper, { ...paperProps, children: jsx(FormContainer, { ...formProps, children: children }) }));
+
+const FormDialogContext = createContext(undefined);
+FormDialogContext.displayName = "FormDialogContext";
 
 const hasMaxAttempts = (maxAttempts) => {
     return !!maxAttempts && isFinite(maxAttempts);
@@ -17321,37 +17330,6 @@ function requireLodash () {
 
 var lodashExports = requireLodash();
 
-/**
- * Compares two objects for deep equality.
- *
- * This function uses lodash's `isEqualWith` function for deep comparison,
- * with additional logic for handling numbers and empty values.
- *
- * @param a The first object to compare.
- * @param b The second object to compare.
- * @param equalEmpty (default: false) Whether to consider empty values (null, undefined, empty arrays or objects) equal.
- * @returns True if the objects are deeply equal, false otherwise.
- */
-const deepCompare = (a, b, equalEmpty = false) => {
-    return lodashExports.isEqualWith(a, b, (objA, objB) => {
-        if (lodashExports.isObject(objA) || lodashExports.isObject(objB))
-            return undefined; // Delegate to lodash for object comparison
-        if (lodashExports.isNumber(objA) || lodashExports.isNumber(objB)) {
-            /*
-              console.log(_.isEmpty(123456));
-              this returns true, should be false
-
-              Source: https://github.com/lodash/lodash/issues/496
-             */
-            return equalEmpty ? Number(objA) === Number(objB) : lodashExports.isEqual(objA, objB);
-        }
-        if (equalEmpty && lodashExports.isEmpty(objA) && lodashExports.isEmpty(objB))
-            return true;
-        return lodashExports.isEqual(objA, objB);
-    });
-};
-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;
@@ -17413,272 +17391,6 @@ const ThemeBridge = ({ children }) => {
     return (jsx(ParentThemeContext.Provider, { value: themeSnapshot, children: children }));
 };
 
-const useMaxAttempts = ({ maxAttempts }) => {
-    const { formState, resetField } = useFormContext();
-    const { setDisabled, disabled } = useFormDialog();
-    const hasRun = useRef(false);
-    // Reset & disable the form when the count exceeds the maxAttempts
-    useEffect(() => {
-        if (hasMaxAttempts(maxAttempts) && formState.submitCount >= maxAttempts && !hasRun.current) {
-            setDisabled(true);
-            hasRun.current = true;
-        }
-    }, [formState.submitCount, maxAttempts, setDisabled]);
-    // Debugging & disabled form field reset
-    useEffect(() => {
-        if (disabled) {
-            Object.keys(lodashExports.merge(formState.dirtyFields, formState.errors)).forEach((i) => {
-                resetField(i, { keepTouched: true });
-            });
-        }
-    }, [disabled, formState, maxAttempts, resetField]);
-};
-
-// src/state/createFormChangeStore.ts
-const storage = createJSONStorage(() => {
-    try {
-        return sessionStorage;
-    }
-    catch (e) {
-        return localStorage;
-    }
-});
-/**
- * Factory function to create a form store with a custom storage name.
- *
- * @param storeName - Unique name for sessionStorage/localStorage key.
- * @returns Zustand store with form data.
- */
-const createFormChangeStore = (storeName) => create()(persist((set) => ({
-    formData: {},
-    updateFormData: (key, value) => {
-        return set((state) => ({
-            formData: { ...state.formData, [key]: value },
-        }));
-    },
-    resetFormData: (key) => {
-        return set((state) => {
-            if (key) {
-                /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-                const { [key]: _, ...remaining } = state.formData;
-                return { formData: remaining };
-            }
-            return { formData: {} };
-        });
-    },
-}), {
-    storage: storage,
-    name: storeName, // Key for sessionStorage
-}));
-
-// src/hooks/useOnMount.ts
-/**
- * Runs a provided callback function once on the first component mount.
- *
- * @param callback - The function to run on first mount.
- */
-function useOnMount(callback) {
-    const hasMounted = useRef(false);
-    useEffect(() => {
-        if (!hasMounted.current) {
-            callback();
-            hasMounted.current = true;
-        }
-        // Cleanup to prevent callback logic from running on unmount
-        return () => {
-            hasMounted.current = true;
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-}
-
-// src/state/FormStoreProvider.tsx
-/**
- * Hook that enables form state persistence across sessions
- *
- * This hook connects a form to persistent storage (e.g., sessionStorage)
- * allowing form values to be preserved when navigating away and returning.
- * It works by watching form changes and syncing with a zustand store.
- *
- * Key features:
- * - Persists form values during navigation or page reloads
- * - Automatically restores saved values when form is rendered
- * - Debounced updates to avoid excessive storage operations
- * - Only saves changed fields, not the entire form state
- * - Automatically clears storage when form values match defaults
- *
- */
-const usePersistForm = ({ formName = "", formContext }) => {
-    // const { setValue, watch, formState } = formContext;
-    const { formData, updateFormData, resetFormData } = createFormChangeStore(formName)();
-    const { disabled } = useFormDialog();
-    const debouncedUpdate = lodashExports.debounce((key, values) => {
-        updateFormData(key, values);
-    }, 200);
-    useEffect(() => {
-        if (!formName || !formContext)
-            return;
-        const { watch, formState } = formContext;
-        const subscription = watch((newValues, { name }) => {
-            if (deepCompare(newValues, formState.defaultValues, true)) {
-                resetFormData();
-            }
-            else if (name) {
-                const newValue = newValues[name];
-                const currentValue = formData[name];
-                // Allow clearing fields
-                if (currentValue !== newValue) {
-                    debouncedUpdate(name, newValue);
-                }
-            }
-        });
-        return () => {
-            subscription.unsubscribe();
-            debouncedUpdate.cancel();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [formContext, debouncedUpdate]);
-    useOnMount(() => {
-        if (!lodashExports.isEmpty(formData) && !disabled && !(formContext === null || formContext === void 0 ? void 0 : formContext.formState.isLoading) && formName) {
-            setTimeout(() => {
-                Object.entries(formData).forEach(([key, value]) => {
-                    formContext === null || formContext === void 0 ? void 0 : formContext.setValue(key, value, { shouldDirty: true, shouldTouch: true });
-                });
-            }, 200);
-        }
-    });
-};
-
-/**
- * Hook for managing dialog state and providing dialog control functions
- *
- * This hook provides a simple way to manage the dialog state and returns
- * 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();
- * return (<>
- *   <Button onClick={openDialog}>Open Dialog</Button>
- *   <BaseDialog {...dialogProps}>Dialog Content</BaseDialog>
- * </>);
- *
- * @example
- * // With initial configuration
- * const { dialogProps } = useDialog({ keepMounted: true});
- *
- * @param props - Optional configuration options
- */
-const useDialog = (props) => {
-    const [open, setOpen] = useState(!!(props === null || props === void 0 ? void 0 : props.open));
-    const closeDialog = useCallback(() => setOpen(false), []);
-    const openDialog = useCallback(() => setOpen(true), []);
-    return {
-        closeDialog,
-        openDialog,
-        dialogProps: { open, onClose: closeDialog, keepMounted: !!(props === null || props === void 0 ? void 0 : props.keepMounted) }
-    };
-};
-
-/**
- * A component that enables form state persistence across sessions
- *
- * PersistForm is a lightweight wrapper that connects a form to persistent storage,
- * allowing form values to be preserved when navigating away and returning. It wraps
- * the usePersistedForm hook in a convenient component API.
- *
- * Key features:
- * - Persists form values during navigation or page reloads
- * - Automatically restores saved values when the form is rendered
- * - Only saves changed fields, not the entire form state
- * - Automatically clears storage when form values match defaults
- * - Works with any React Hook Form based forms
- *
- * Note: This component must be used inside a FormProvider from react-hook-form
- * and should be within a FormDialogProvider for full functionality.
- *
- * @example
- * // Basic usage
- * const MyForm = () => {
- *   const methods = useForm({ defaultValues: { name: '' } });
- *
- *   return (<FormProvider {...methods}>
- *     <PersistForm formName="user-profile">
- *       <TextFieldElement name="name" label="Name" />
- *       <FormSubmitButton>Save</FormSubmitButton>
- *     </PersistForm>
- *   </FormProvider>);
- * }
- *
- * @example
- * // Usage within a dialog
- * <FormDialog
- *   formProps={{ defaultValues: defaultValues }}
- *   title="Edit Profile"
- * >
- *   <PersistForm formName="edit-profile-dialog">
- *     <ProfileFormFields />
- *   </PersistForm>
- * </FormDialog>
- */
-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
  *
@@ -17740,8 +17452,8 @@ const FormDialogProvider = ({ children, ...value }) => {
  * - 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 FormDialog = function ({ formProps, children, open, onClose, ...dialogProps }) {
+    const PaperComponent = useCallback((props) => jsx(PaperForm, { formProps: formProps, ...props }), [formProps]);
     const baseDialogProps = useMemo(() => lodashExports.merge({
         actionsProps: { sx: { pt: 2.5 } },
         contentProps: {
@@ -17761,6 +17473,109 @@ const FormDialog = function ({ formProps, children, open, onClose, persistKey =
 };
 FormDialog.displayName = "FormDialog";
 
+// 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 the dialog state,
+ * including open/close status and form-wide disabled state.
+ *
+ * The context provides:
+ * - Dialog open state
+ * - Close dialog function
+ * - Form disabled state and setter function
+ *
+ * @throws Error if used outside a FormDialogProvider
+ *
+ * @example
+ * // Using in a form button component
+ * const FormButton = () => {
+ *   const { openDialog, disabled } = useFormDialog();
+ *   return (<Button
+ *       disabled={disabled}
+ *       onClick={() => openDialog()}
+ *     >
+ *       Cancel
+ *     </Button>);
+ * }
+ *
+ * @returns FormDialogContextType object containing dialog state and controls
+ */
+const useFormDialog = () => {
+    const context = useContext(FormDialogContext);
+    if (!context) {
+        throw new Error("useFormDialog must be used within a FormDialogProvider");
+    }
+    return context;
+};
+
+/**
+ * Hook that monitors form submission attempts and disables the form when a limit is reached.
+ *
+ * It performs two main functions:
+ * 1. Monitors `formState.submitCount` and calls `setDisabled(true)` from the dialog context
+ *    once it reaches or exceeds the specified `maxAttempts`.
+ * 2. When the dialog context enters a `disabled` state, it automatically resets form fields
+ *    that have errors or are dirty to ensure a clean state for the user.
+ *
+ * @param props - UseMaxAttemptProps
+ */
+const useMaxAttempts = ({ maxAttempts }) => {
+    const { formState, resetField } = useFormContext();
+    const { setDisabled, disabled } = useFormDialog();
+    const hasRun = useRef(false);
+    // Reset & disable the form when the count exceeds the maxAttempts
+    useEffect(() => {
+        if (hasMaxAttempts(maxAttempts) && formState.submitCount >= maxAttempts && !hasRun.current) {
+            setDisabled(true);
+            hasRun.current = true;
+        }
+    }, [formState.submitCount, maxAttempts, setDisabled]);
+    // Debugging & disabled form field reset
+    useEffect(() => {
+        if (disabled) {
+            Object.keys(lodashExports.merge(formState.dirtyFields, formState.errors)).forEach((i) => {
+                resetField(i, { keepTouched: true });
+            });
+        }
+    }, [disabled, formState, maxAttempts, resetField]);
+};
+
+/**
+ * Hook for managing dialog state and providing dialog control functions
+ *
+ * This hook provides a simple way to manage the dialog state and returns
+ * 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();
+ * return (<>
+ *   <Button onClick={openDialog}>Open Dialog</Button>
+ *   <BaseDialog {...dialogProps}>Dialog Content</BaseDialog>
+ * </>);
+ *
+ * @example
+ * // With initial configuration
+ * const { dialogProps } = useDialog({ keepMounted: true});
+ *
+ * @param props - Optional configuration options
+ */
+const useDialog = (props) => {
+    const [open, setOpen] = useState(!!(props === null || props === void 0 ? void 0 : props.open));
+    const closeDialog = useCallback(() => setOpen(false), []);
+    const openDialog = useCallback(() => setOpen(true), []);
+    return {
+        closeDialog,
+        openDialog,
+        dialogProps: { open, onClose: closeDialog, keepMounted: !!(props === null || props === void 0 ? void 0 : props.keepMounted) }
+    };
+};
+
 /**
  * A cancel button component that integrates with FormDialogContext.
  * Automatically closes the parent dialog when clicked.
@@ -17829,8 +17644,7 @@ FormCancelButton.displayName = "FormCancelButton";
  *   Process Payment
  * </LoadingButton>
  */
-const LoadingButton = ({ children, loading = false, altIcon, ...props }) => {
-    const theme = useTheme$1();
+const LoadingButton = ({ children, loading = false, altIcon, loadingIconProps, ...props }) => {
     return (jsxs(Button, { ...props, children: [!loading ? altIcon : (jsx(Box, { sx: {
                     display: "flex",
                     alignItems: "center",
@@ -17838,7 +17652,7 @@ const LoadingButton = ({ children, loading = false, altIcon, ...props }) => {
                     width: "100%",
                     height: "auto",
                     mr: 1,
-                }, children: jsx(CircularProgress, { color: "inherit", size: theme.typography.fontSize }) })), children] }));
+                }, children: jsx(CircularProgress, { ...loadingIconProps }) })), children] }));
 };
 
 /**
@@ -17916,16 +17730,13 @@ FormSubmitButton.displayName = "FormSubmitButton";
 const FormResetButton = memo(function (props) {
     var _a;
     const formKey = (_a = props === null || props === void 0 ? void 0 : props.formKey) !== null && _a !== void 0 ? _a : "";
-    const { resetFormData } = createFormChangeStore(formKey)();
     const { reset } = useFormContext();
     const { isSubmitting, isLoading, isDirty } = useFormState();
     const { disabled: disabledForm } = useFormDialog();
     const keepSubmitCount = !!(props === null || props === void 0 ? void 0 : props.keepCount);
     const handleOnClick = useCallback(() => {
         reset(undefined, { keepSubmitCount, keepIsSubmitted: keepSubmitCount });
-        if (formKey)
-            resetFormData();
-    }, [keepSubmitCount, formKey, reset, resetFormData]);
+    }, [keepSubmitCount, formKey, reset]);
     const isBusy = isSubmitting || isLoading;
     const isDisabled = (props === null || props === void 0 ? void 0 : props.disabled) || disabledForm;
     const isClean = !isDirty;
@@ -18028,5 +17839,5 @@ const FormDialogActions = ({ resetProps, submitProps, cancelProps, children, var
     return (jsxs(Grid, { container: true, ...gridContainerProps, children: [!removeCancelButton && jsx(Grid, { children: jsx(FormCancelButton, { ...cancelButtonProps }) }), !removeResetButton && jsx(Grid, { children: jsx(FormResetButton, { ...resetButtonProps }) }), children !== null && children !== void 0 ? children : jsx(GridSpacer, {}), jsx(Grid, { children: jsx(FormSubmitButton, { ...submitButtonProps }) })] }));
 };
 
-export { BaseDialog, BlackoutDialog, FormCancelButton, FormDialog, FormDialogActions, FormDialogProvider, FormResetButton, FormSubmitButton, GridSpacer, LoadingButton, PaperForm, PersistForm, useDialog, useFormDialog, usePersistForm };
+export { BaseDialog, BlackoutDialog, FormCancelButton, FormDialog, FormDialogActions, FormDialogProvider, FormResetButton, FormSubmitButton, GridSpacer, LoadingButton, PaperForm, useDialog, useFormDialog };
 //# sourceMappingURL=index.js.map