@lumeweb/portal-framework-ui 0.0.1 → 0.1.1

package/dist/esm/components/form/FormRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormRenderer.js","names":["useFormContext","useRHFContext"],"sources":["../../../../src/components/form/FormRenderer.tsx"],"sourcesContent":["import {\n  cn,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n  Spinner,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport { get } from \"lodash/get\";\nimport React, { useEffect, useMemo, useState } from \"react\";\nimport {\n  FieldValues,\n  Path as ReactHookFormPath,\n  useFormContext as useRHFContext,\n} from \"react-hook-form\";\n\nimport { adapters } from \"./adapters\";\nimport { getAutocompleteValue } from \"./autocomplete\";\nimport { useFormContext } from \"./context\";\nimport { FormFieldType, getFormComponent } from \"./fields\";\nimport { FormGroup } from \"./FormGroup\";\nimport { useOptionalStepControlContext } from \"./StepControlContext\";\nimport { type FormFieldConfig, type FormGroupType, GroupOrder } from \"./types\";\n\ninterface FieldRendererProps<TFieldValues extends FieldValues> {\n  field: FormFieldConfig<TFieldValues>;\n}\n\nexport function FormRenderer<TRequest extends FieldValues = FieldValues>({\n  fields = [],\n  groups = [],\n}: {\n  fields?: FormFieldConfig<TRequest>[];\n  groups?: FormGroupType[];\n}) {\n  // Group fields by their group ID\n  const { groupedFields, ungroupedFields } = React.useMemo(() => {\n    const grouped: Record<string, FormFieldConfig<TRequest>[]> = {};\n    const ungrouped: FormFieldConfig<TRequest>[] = [];\n\n    // Initialize groups\n    groups?.forEach((group) => {\n      grouped[group.id] = [];\n    });\n\n    // Distribute fields\n    fields.forEach((field) => {\n      if (field.group && grouped[field.group]) {\n        grouped[field.group].push(field);\n      } else {\n        ungrouped.push(field);\n      }\n    });\n\n    return { groupedFields: grouped, ungroupedFields: ungrouped };\n  }, [fields, groups]);\n  const { adapter: adapterName, config } = useFormContext();\n  const adapter = adapters[adapterName];\n\n  if (!adapter) {\n    throw new Error(`Form adapter \"${String(adapterName)}\" is not registered`);\n  }\n\n  const groupOrder = config.groupOrder ?? GroupOrder.UNGROUPED_FIRST;\n\n  const renderGroups = () => (\n    <>\n      {groups?.map((group) => {\n        const groupFields = groupedFields[group.id];\n        if (!groupFields?.length) return null;\n\n        return (\n          <FormGroup\n            className={group.className}\n            description={group.description}\n            key={group.id}\n            title={group.title}>\n            {groupFields.map((field) => (\n              <FieldRenderer field={field} key={field.name as string} />\n            ))}\n          </FormGroup>\n        );\n      })}\n    </>\n  );\n\n  const renderUngrouped = () => (\n    <>\n      {ungroupedFields.map((field) => (\n        <FieldRenderer field={field} key={field.name as string} />\n      ))}\n    </>\n  );\n\n  return (\n    <>\n      {groupOrder === GroupOrder.GROUPS_FIRST ? (\n        <>\n          {renderGroups()}\n          {renderUngrouped()}\n        </>\n      ) : (\n        <>\n          {renderUngrouped()}\n          {renderGroups()}\n        </>\n      )}\n    </>\n  );\n}\n\nfunction FieldRenderer<TFieldValues extends FieldValues = FieldValues>({\n  field,\n}: FieldRendererProps<TFieldValues>) {\n  const rhfMethods = useRHFContext<TFieldValues>();\n  const { control, getValues, watch } = rhfMethods;\n  const [isVisible, setIsVisible] = useState(true);\n  const [isLoading, setIsLoading] = useState(false);\n  const { config: formConfig } = useFormContext();\n\n  const dependencies = useMemo(\n    () => field.dependencies || [],\n    [field.dependencies],\n  );\n\n  const autoCompleteValue = useMemo(\n    () => getFieldAutocompleteValue(field, formConfig?.action),\n    [field, formConfig?.action],\n  );\n\n  useEffect(() => {\n    // Subscribe to form changes and check visibility when relevant fields change\n    const subscription = watch((values, { name }) => {\n      // Only check visibility if dependencies are empty (watch all) or changed field is in dependencies\n      if (!dependencies.length || (name && dependencies.includes(name))) {\n        checkVisibility();\n      }\n    });\n\n    const checkVisibility = async () => {\n      if (!getValues) return;\n\n      const currentValues = getValues();\n      let shouldShow = true;\n\n      if (field.requires) {\n        for (const requiredFieldPath in field.requires) {\n          if (\n            Object.prototype.hasOwnProperty.call(\n              field.requires,\n              requiredFieldPath,\n            )\n          ) {\n            const requirement = field.requires[requiredFieldPath];\n            const actualValue = get(currentValues as object, requiredFieldPath);\n\n            let requirementMet = false;\n            if (typeof requirement === \"function\") {\n              requirementMet = requirement(actualValue);\n            } else {\n              requirementMet = actualValue === requirement;\n            }\n\n            if (!requirementMet) {\n              shouldShow = false;\n              break;\n            }\n          }\n        }\n      }\n\n      if (shouldShow && field.show) {\n        try {\n          const showPromiseOrValue = field.show(currentValues);\n          if (showPromiseOrValue instanceof Promise) {\n            setIsLoading(true);\n            shouldShow = await showPromiseOrValue;\n            if (isLoading) setIsLoading(false);\n          } else {\n            shouldShow = showPromiseOrValue;\n            if (isLoading) setIsLoading(false);\n          }\n        } catch (error) {\n          console.error(\n            `Error checking show status for field ${String(field.name)}:`,\n            error,\n          );\n          shouldShow = false;\n          if (isLoading) setIsLoading(false);\n        }\n      } else if (!field.show) {\n        if (isLoading) setIsLoading(false);\n      } else {\n        if (isLoading) setIsLoading(false);\n      }\n\n      setIsVisible((prev) => {\n        if (prev !== shouldShow) return shouldShow;\n        return prev;\n      });\n    };\n\n    checkVisibility(); // Initial check\n\n    return () => subscription.unsubscribe();\n  }, [dependencies, field, getValues, isLoading, watch]);\n\n  if (isLoading) {\n    return (\n      <FormItem className={cn(field.className, field.itemClassName)}>\n        {field.label && <FormLabel>{field.label}</FormLabel>}\n        <FormControl>\n          <div className=\"flex h-14 items-center justify-center\">\n            <Spinner size=\"small\" />\n          </div>\n        </FormControl>\n        {field.description && (\n          <FormDescription>{field.description}</FormDescription>\n        )}\n      </FormItem>\n    );\n  }\n\n  if (!isVisible) {\n    return null;\n  }\n\n  const componentEntry = getFormComponent(field.type);\n  const RegisteredComponent = componentEntry?.component;\n  if (!componentEntry && field.type !== FormFieldType.CUSTOM) {\n    console.warn(`No component registered for form field type: ${field.type}`);\n    return null;\n  }\n\n  return (\n    <FormField<TFieldValues>\n      control={control}\n      key={field.name as string}\n      name={field.name as ReactHookFormPath<TFieldValues>}\n      render={({ field: formFieldRenderProps }) => (\n        <FormItem className={cn(field.className, field.itemClassName)}>\n          {field.label && !componentEntry?.handlesLabel && (\n            <FormLabel className={field.labelClassName}>\n              {field.label}\n              {field.required && isVisible && (\n                <span className=\"text-destructive\">*</span>\n              )}\n            </FormLabel>\n          )}\n          <FormControl>\n            {RegisteredComponent ? (\n              <RegisteredComponent\n                {...formFieldRenderProps}\n                {...field.inputProps}\n                // Derive and include autocomplete\n                autocomplete={autoCompleteValue}\n                inputClassName={field.inputClassName}\n                label={componentEntry?.handlesLabel ? field.label : undefined}\n                options={field.options}\n                placeholder={field.placeholder}\n                required={field.required}\n                type={field.type}\n              />\n            ) : field.component ? (\n              <field.component\n                {...formFieldRenderProps}\n                formMethods={rhfMethods}\n                stepEnvironment={\n                  useOptionalStepControlContext()\n                    ? {\n                        current:\n                          useOptionalStepControlContext()?.currentStep || 0,\n                        isFirst:\n                          useOptionalStepControlContext()?.isFirstStep || false,\n                        isLast:\n                          useOptionalStepControlContext()?.isLastStep || false,\n                        jumpTo: useOptionalStepControlContext()?.jumpTo,\n                        onNext: useOptionalStepControlContext()?.handleNext,\n                        onPrevious:\n                          useOptionalStepControlContext()?.handlePrevious,\n                        onRetry: useOptionalStepControlContext()?.handleRetry,\n                        retryCount:\n                          useOptionalStepControlContext()?.retryCount || 0,\n                        total: useOptionalStepControlContext()?.totalSteps || 0,\n                      }\n                    : undefined\n                }\n              />\n            ) : null}\n          </FormControl>\n          {field.description && (\n            <FormDescription>{field.description}</FormDescription>\n          )}\n          <FormMessage />\n        </FormItem>\n      )}\n    />\n  );\n}\n\nfunction getFieldAutocompleteValue(\n  field: FormFieldConfig<any>,\n  formPurpose?: string,\n) {\n  return (\n    field.autocomplete ?? // Explicit field config wins\n    getAutocompleteValue(field, { formPurpose }) ?? // Then try derivation\n    field.inputProps?.autocomplete // Finally, any inputProps value\n  );\n}\n"],"mappings":"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"}

package/dist/esm/components/form/SchemaForm.d.ts

@@ -0,0 +1,18 @@
+import { FormConfig } from "./types.js";
+import { BaseRecord } from "@refinedev/core";
+import { FieldValues } from "react-hook-form";
+
+//#region src/components/form/SchemaForm.d.ts
+interface SchemaFormProps<TRequest extends FieldValues = FieldValues, TResponse extends BaseRecord = any> {
+  active?: boolean;
+  closeDialog?: () => void;
+  config: FormConfig<TRequest, TResponse>;
+}
+declare function SchemaForm<T extends FieldValues = FieldValues>({
+  active,
+  closeDialog,
+  config
+}: SchemaFormProps<T>): any;
+//#endregion
+export { SchemaForm, SchemaFormProps };
+//# sourceMappingURL=SchemaForm.d.ts.map

package/dist/esm/components/form/SchemaForm.js

@@ -0,0 +1,172 @@
+import { useDialog } from "../dialog/Dialog.context.js";
+import { useIsFormDialog } from "../dialog/utils/dialogDetection.js";
+import { adapters } from "./adapters.js";
+import { FormProvider } from "./context.js";
+import { AdapterType, isStepFormConfig } from "./types.js";
+import { FormRenderer } from "./FormRenderer.js";
+import { handleFormSubmission } from "./handlers/core.js";
+import { computeAutoSaveConfig } from "./utils/autoSave.js";
+import { Environment } from "../shared/environment/builders.js";
+import { UnifiedFooter } from "../shared/UnifiedFooter.js";
+import { renderHeader } from "../shared/utils/renderHeader.js";
+import { useForceRerender } from "../shared/hooks/useForceRerender.js";
+import "../index.js";
+import { Form, cn } from "@lumeweb/portal-framework-ui-core";
+import { AutoSaveIndicator, useNotification } from "@refinedev/core";
+import React, { useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isElement, isValidElementType } from "react-is";
+
+//#region src/components/form/SchemaForm.tsx
+const defaultFooterCss = "pt-4 mt-4 border-t";
+function SchemaForm({ active = true, closeDialog = () => void 0, config }) {
+	if (!active) return null;
+	const { currentDialog, setFormMethods: setFormInstance, formMethods } = useDialog();
+	const { open: openNotification } = useNotification();
+	const isInDialog = useIsFormDialog();
+	if (!config) throw new Error("SchemaForm requires a form config");
+	const shouldUseRefine = config.adapter === "refine" || config.refine || Boolean(config.refineCoreProps?.resource);
+	const adapterName = shouldUseRefine ? "refine" : config.adapter ?? "rhf";
+	const adapter = adapters[adapterName];
+	const autoSaveConfig = computeAutoSaveConfig(config.autoSave);
+	const formInstance = adapter.useForm({
+		defaultValues: config.defaultValues,
+		refineCoreProps: {
+			...config.refineCoreProps,
+			action: config.action,
+			autoSave: autoSaveConfig,
+			errorNotification: config.errorNotification,
+			id: ["edit", "clone"].includes(config.action) ? config.id : void 0,
+			redirectOnSuccess: false,
+			resource: config.resource,
+			successNotification: config.successNotification
+		},
+		validationSchema: config.validationSchema
+	});
+	const autoSaveProps = shouldUseRefine ? "refineCore" in formInstance ? formInstance.refineCore.autoSaveProps : void 0 : void 0;
+	const isActiveDialog = !!(currentDialog?.formConfig && currentDialog.formConfig.formId === config.formId) && isInDialog;
+	useForceRerender(config.forceRerender);
+	useEffect(() => {
+		if (!setFormInstance) return;
+		if (isActiveDialog) setFormInstance(formInstance);
+		return () => {
+			try {
+				setFormInstance(void 0);
+			} catch {}
+		};
+	}, [
+		formInstance,
+		setFormInstance,
+		isActiveDialog
+	]);
+	const cConfig = { ...config };
+	if (cConfig.footerClassName === void 0) cConfig.footerClassName = defaultFooterCss;
+	if (cConfig.footerClassName === false) cConfig.footerClassName = void 0;
+	const finalConfig = useMemo(() => isActiveDialog ? {
+		...currentDialog,
+		formConfig: cConfig
+	} : cConfig, [
+		isActiveDialog,
+		currentDialog,
+		cConfig
+	]);
+	useForceRerender(config.forceRerender);
+	const isRefineWithAutosave = shouldUseRefine && autoSaveConfig?.enabled;
+	return /* @__PURE__ */ jsx(FormProvider, {
+		adapter: adapterName,
+		autoSave: autoSaveProps,
+		config: cConfig,
+		formInstance,
+		children: /* @__PURE__ */ jsx(Form, {
+			...formInstance,
+			children: /* @__PURE__ */ jsxs("form", {
+				className: cn(cConfig.formClassName, {
+					"flex flex-col space-y-4": cConfig.layout === "vertical" || !cConfig.layout,
+					"flex flex-row items-end gap-4": cConfig.layout === "horizontal",
+					"grid gap-4": cConfig.layout === "grid",
+					"space-y-4": cConfig.layout !== "grid"
+				}),
+				onSubmit: formInstance.handleSubmit(async () => {
+					await handleFormSubmission({
+						closeDialog,
+						config: cConfig,
+						currentDialog,
+						formMethods: formInstance,
+						isStep: isStepFormConfig(cConfig),
+						onError: async (error) => {
+							if (adapterName !== "refine" && cConfig.errorNotification) {
+								const notification = typeof cConfig.errorNotification === "function" ? cConfig.errorNotification(error) : cConfig.errorNotification;
+								openNotification?.(notification);
+							}
+						},
+						onSubmit: async (data) => adapter.submitHandler(cConfig, formInstance)
+					});
+				}),
+				children: [
+					renderHeader({
+						actions: cConfig.actions,
+						className: "form-header",
+						description: cConfig.description,
+						header: cConfig.header,
+						isDialog: isActiveDialog,
+						title: cConfig.title,
+						unifiedHeaderConfig: cConfig
+					}),
+					/* @__PURE__ */ jsx(FormRenderer, {
+						fields: cConfig.fields,
+						groups: cConfig.groups
+					}),
+					renderFooter(cConfig.footer, {
+						className: cConfig.footerClassName,
+						closeDialog,
+						config: finalConfig,
+						formMethods: formInstance
+					}, isActiveDialog, currentDialog),
+					isRefineWithAutosave && /* @__PURE__ */ jsx(AutoSaveIndicator, {
+						...autoSaveProps,
+						elements: cConfig.autoSaveStates
+					})
+				]
+			})
+		})
+	});
+}
+function renderFooter(footerConfig, footerProps, isInDialog, currentDialog) {
+	if (footerConfig === void 0) {
+		const { config, formMethods, closeDialog } = footerProps;
+		const isSubmitting = formMethods?.formState?.isSubmitting || false;
+		const footerEnvironment = Environment.footer();
+		if (isInDialog) footerEnvironment.dialog({
+			dialogConfig: currentDialog,
+			onClose: config.onCancel || closeDialog
+		});
+		else footerEnvironment.standalone();
+		footerEnvironment.simpleForm({
+			isSubmitting,
+			methods: formMethods
+		});
+		return /* @__PURE__ */ jsx(UnifiedFooter, {
+			className: footerProps.className,
+			config: { ...config },
+			environment: footerEnvironment.build()
+		});
+	}
+	if (footerConfig === false) return null;
+	if (isElement(footerConfig) || isValidElementType(footerConfig)) {
+		if (isElement(footerConfig)) return footerConfig;
+		if (isValidElementType(footerConfig)) return /* @__PURE__ */ jsx(footerConfig, { ...footerProps });
+	}
+	const footerEnvironment = Environment.footer().standalone().simpleForm({
+		isSubmitting: footerProps.formMethods?.formState?.isSubmitting || false,
+		methods: footerProps.formMethods
+	}).build();
+	return /* @__PURE__ */ jsx(UnifiedFooter, {
+		className: footerProps.className,
+		config: footerProps.config,
+		environment: footerEnvironment
+	});
+}
+
+//#endregion
+export { SchemaForm };
+//# sourceMappingURL=SchemaForm.js.map

package/dist/esm/components/form/SchemaForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SchemaForm.js","names":["AdapterFormProvider","FooterComponent"],"sources":["../../../../src/components/form/SchemaForm.tsx"],"sourcesContent":["import type { DefaultValues, FieldValues } from \"react-hook-form\";\n\nimport {\n  Form as AdapterFormProvider,\n  cn,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport {\n  AutoSaveIndicator,\n  BaseRecord,\n  type FormAction,\n  useNotification,\n} from \"@refinedev/core\";\nimport React, { useEffect, useMemo } from \"react\";\nimport { isElement, isValidElementType } from \"react-is\";\n\nimport { createFormActions } from \"@/components\";\nimport { DialogConfig, FormDialogConfig, useDialog } from \"@/components\";\nimport { useIsFormDialog } from \"@/components\";\nimport { Environment, renderHeader, UnifiedFooter } from \"@/components\";\nimport { adapters, FormAdapter, UnifiedFormReturnType } from \"./adapters\";\nimport { FormProvider } from \"./context\";\nimport { FormRenderer } from \"./FormRenderer\";\nimport { handleFormSubmission } from \"./handlers/core\";\nimport { AdapterType, type FormConfig, isStepFormConfig } from \"./types\";\nimport { computeAutoSaveConfig } from \"./utils/autoSave\";\nimport { useForceRerender as useSharedForceRerender } from \"@/components\";\n\nconst defaultFooterCss = \"pt-4 mt-4 border-t\";\n\nexport interface SchemaFormProps<\n  TRequest extends FieldValues = FieldValues,\n  TResponse extends BaseRecord = any,\n> {\n  active?: boolean;\n  closeDialog?: () => void;\n  config: FormConfig<TRequest, TResponse>;\n}\n\nexport function SchemaForm<T extends FieldValues = FieldValues>({\n  active = true,\n  closeDialog = () => void 0,\n  config,\n}: SchemaFormProps<T>) {\n  if (!active) {\n    return null;\n  }\n\n  const { currentDialog, setFormMethods: setFormInstance, formMethods } = useDialog();\n  const { open: openNotification } = useNotification();\n  const isInDialog = useIsFormDialog();\n\n  if (!config) throw new Error(\"SchemaForm requires a form config\");\n\n  // Determine adapter - prioritize explicit config, then refine resource presence\n  const shouldUseRefine =\n    config.adapter === AdapterType.REFINE ||\n    config.refine ||\n    Boolean(config.refineCoreProps?.resource);\n  const adapterName = shouldUseRefine\n    ? AdapterType.REFINE\n    : (config.adapter ?? AdapterType.RHF);\n  const adapter = adapters[adapterName] as FormAdapter<T>;\n\n  const autoSaveConfig = computeAutoSaveConfig(config.autoSave);\n\n  const formInstance = adapter.useForm({\n    defaultValues: config.defaultValues as DefaultValues<T>,\n    refineCoreProps: {\n      ...config.refineCoreProps,\n      action: config.action,\n      autoSave: autoSaveConfig,\n      errorNotification: config.errorNotification,\n      id: ([\"edit\", \"clone\"] as FormAction[]).includes(config.action!)\n        ? config.id\n        : undefined,\n      redirectOnSuccess: false,\n      resource: config.resource,\n      successNotification: config.successNotification,\n    },\n    validationSchema: config.validationSchema,\n  });\n\n  const autoSaveProps = shouldUseRefine\n    ? \"refineCore\" in formInstance\n      ? formInstance.refineCore.autoSaveProps\n      : undefined\n    : undefined;\n\n  const isActiveDialog =\n    !!(\n      currentDialog?.formConfig &&\n      currentDialog.formConfig.formId === config.formId\n    ) && isInDialog;\n\n  // Implement forceRerender mechanism\n  useSharedForceRerender(config.forceRerender);\n\n  useEffect(() => {\n    if (!setFormInstance) return;\n    if (isActiveDialog) {\n      setFormInstance(formInstance);\n    }\n    return () => {\n      // clear on unmount or when dialog closes\n      try {\n        setFormInstance(undefined as any);\n      } catch {}\n    };\n  }, [formInstance, setFormInstance, isActiveDialog]);\n\n  const cConfig = { ...config };\n\n  if (cConfig.footerClassName === undefined) {\n    cConfig.footerClassName = defaultFooterCss;\n  }\n\n  if (cConfig.footerClassName === false) {\n    cConfig.footerClassName = undefined;\n  }\n\n  const finalConfig: FormConfig<T> | FormDialogConfig<T> = useMemo(\n    () =>\n      isActiveDialog ? { ...currentDialog!, formConfig: cConfig } : cConfig,\n    [isActiveDialog, currentDialog, cConfig],\n  );\n\n  // Implement forceRerender mechanism\n  useSharedForceRerender(config.forceRerender);\n\n  const isRefineWithAutosave = shouldUseRefine && autoSaveConfig?.enabled;\n\n  return (\n    <FormProvider<T>\n      adapter={adapterName}\n      autoSave={autoSaveProps}\n      config={cConfig}\n      formInstance={formInstance}>\n      <AdapterFormProvider\n        {...(formInstance as unknown as UnifiedFormReturnType<FieldValues>)}>\n        <form\n          className={cn(cConfig.formClassName, {\n            \"flex flex-col space-y-4\":\n              cConfig.layout === \"vertical\" || !cConfig.layout,\n            \"flex flex-row items-end gap-4\": cConfig.layout === \"horizontal\",\n            \"grid gap-4\": cConfig.layout === \"grid\",\n            \"space-y-4\": cConfig.layout !== \"grid\",\n          })}\n          onSubmit={formInstance.handleSubmit(async () => {\n            await handleFormSubmission({\n              closeDialog,\n              config: cConfig,\n              currentDialog,\n              formMethods: formInstance,\n              isStep: isStepFormConfig(cConfig),\n              onError: async (error) => {\n                if (adapterName !== \"refine\" && cConfig.errorNotification) {\n                  const notification =\n                    typeof cConfig.errorNotification === \"function\"\n                      ? cConfig.errorNotification(error)\n                      : cConfig.errorNotification;\n                  openNotification?.(notification);\n                }\n              },\n              onSubmit: async (data) =>\n                adapter.submitHandler(cConfig, formInstance),\n            });\n          })}>\n          {renderHeader({\n            actions: cConfig.actions,\n            className: \"form-header\",\n            description: cConfig.description,\n            header: cConfig.header,\n            isDialog: isActiveDialog,\n            title: cConfig.title,\n            unifiedHeaderConfig: cConfig,\n          })}\n          <FormRenderer fields={cConfig.fields} groups={cConfig.groups} />\n          {renderFooter(\n            cConfig.footer,\n            {\n              className: cConfig.footerClassName,\n              closeDialog,\n              config: finalConfig,\n              formMethods: formInstance,\n            },\n            isActiveDialog,\n            currentDialog,\n          )}\n          {isRefineWithAutosave && (\n            <AutoSaveIndicator\n              {...autoSaveProps!}\n              elements={cConfig.autoSaveStates}\n            />\n          )}\n        </form>\n      </AdapterFormProvider>\n    </FormProvider>\n  );\n}\n\n// Helper function to render footer based on configuration\nfunction renderFooter(\n  footerConfig: any,\n  footerProps: any,\n  isInDialog: boolean,\n  currentDialog?: DialogConfig,\n): React.ReactNode {\n  // If footer is undefined, check if we're in a dialog context\n  if (footerConfig === undefined) {\n    const { config, formMethods, closeDialog } = footerProps;\n    const isSubmitting = formMethods?.formState?.isSubmitting || false;\n\n    const footerEnvironment = Environment.footer();\n\n    if (isInDialog) {\n      footerEnvironment.dialog({\n        dialogConfig: currentDialog,\n        onClose: config.onCancel || closeDialog,\n      });\n    } else {\n      footerEnvironment.standalone();\n    }\n    footerEnvironment.simpleForm({\n      isSubmitting,\n      methods: formMethods,\n    });\n\n    return (\n      <UnifiedFooter\n        className={footerProps.className}\n        config={{ ...config }}\n        environment={footerEnvironment.build()}\n      />\n    );\n  }\n\n  // If footer is false, render nothing\n  if (footerConfig === false) {\n    return null;\n  }\n\n  // If footer is a React element or functional component, render it\n  if (isElement(footerConfig) || isValidElementType(footerConfig)) {\n    // If it's a valid element, render it directly\n    if (isElement(footerConfig)) {\n      return footerConfig;\n    }\n    // If it's a valid component type, instantiate it with footerProps\n    if (isValidElementType(footerConfig)) {\n      const FooterComponent = footerConfig as React.ComponentType<any>;\n      return <FooterComponent {...footerProps} />;\n    }\n  }\n\n  // For any other case, render default unified footer\n  const footerEnvironment = Environment.footer()\n    .standalone()\n    .simpleForm({\n      isSubmitting: footerProps.formMethods?.formState?.isSubmitting || false,\n      methods: footerProps.formMethods,\n    })\n    .build();\n  return (\n    <UnifiedFooter\n      className={footerProps.className}\n      config={footerProps.config}\n      environment={footerEnvironment}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/esm/components/form/StepControlContext.d.ts

@@ -0,0 +1,199 @@
+import { NavigationType } from "../shared/types/header.js";
+import React from "react";
+
+//#region src/components/form/StepControlContext.d.ts
+/**
+ * Interface for step control context values
+ */
+interface StepControlContextType {
+  /**
+   * Current active step index
+   */
+  currentStep: number;
+  /**
+   * Navigate to a specific step
+   * @param step - The step index to navigate to
+   */
+  goToStep: (step: number) => void;
+  /**
+   * Jump to a specific step without transition animation
+   * @param step - The step index to jump to
+   */
+  jumpTo: (step: number) => void;
+  /**
+   * Navigate to the next step
+   */
+  handleNext: () => Promise<void>;
+  /**
+   * Navigate to the previous step
+   */
+  handlePrevious: () => Promise<void>;
+  /**
+   * Retry the current step
+   */
+  handleRetry: () => Promise<void>;
+  /**
+   * Number of times the current step has been retried
+   */
+  retryCount: number;
+  /**
+   * Whether the current step is the first step
+   */
+  isFirstStep: boolean;
+  /**
+   * Whether the current step is the last step
+   */
+  isLastStep: boolean;
+  /**
+   * Total number of steps
+   */
+  totalSteps: number;
+  /**
+   * Transition state with navigation direction
+   */
+  transitionState: {
+    direction: "backward" | "forward" | null;
+    enteringStep: null | number;
+    exitingStep: null | number;
+  };
+}
+interface StepControlProviderProps {
+  children: React.ReactNode;
+  /**
+   * Default step to start on
+   */
+  defaultStep?: number;
+  /**
+   * Function to handle step submission
+   */
+  handleStepSubmit?: () => Promise<void>;
+  /**
+   * Whether to validate when going back steps
+   */
+  isBackValidate?: boolean;
+  /**
+   * Callback when step changes
+   */
+  onStepChange?: (step: number) => void;
+  /**
+   * Callback when step is retried
+   */
+  onStepRetry?: (step: number) => void;
+  /**
+   * Callback when navigation starts
+   */
+  onNavigationStart?: (fromStep: number, toStep: number, type: NavigationType) => void;
+  /**
+   * Callback when navigation ends successfully
+   */
+  onNavigationEnd?: (fromStep: number, toStep: number, type: NavigationType) => void;
+  /**
+   * Callback when navigation fails
+   */
+  onNavigationError?: (fromStep: number, toStep: number, type: NavigationType, error: any) => void;
+  /**
+   * Total number of steps
+   */
+  totalSteps?: number;
+  /**
+   * Function to trigger validation for the current step
+   */
+  triggerValidation?: () => Promise<boolean>;
+}
+/**
+ * Hook to create step control state independently
+ * This hook can be used outside of StepControlProvider
+ */
+interface UseCreateStepControlOptions {
+  /**
+   * Default step to start on
+   * @default 1
+   */
+  defaultStep?: number;
+  /**
+   * Function to handle step submission
+   */
+  handleStepSubmit?: () => Promise<void>;
+  /**
+   * Whether to validate when going back steps
+   * @default false
+   */
+  isBackValidate?: boolean;
+  /**
+   * Callback when step changes
+   */
+  onStepChange?: (step: number) => void;
+  /**
+   * Callback when step is retried
+   */
+  onStepRetry?: (step: number) => void;
+  /**
+   * Callback when navigation starts
+   */
+  onNavigationStart?: (fromStep: number, toStep: number, type: NavigationType) => void;
+  /**
+   * Callback when navigation ends successfully
+   */
+  onNavigationEnd?: (fromStep: number, toStep: number, type: NavigationType) => void;
+  /**
+   * Callback when navigation fails
+   */
+  onNavigationError?: (fromStep: number, toStep: number, type: NavigationType, error: any) => void;
+  /**
+   * Total number of steps
+   */
+  totalSteps: number;
+  /**
+   * Function to trigger validation for the current step
+   */
+  triggerValidation?: () => Promise<boolean>;
+}
+/**
+ * Provider component for step control functionality
+ * Handles step navigation logic and state management
+ */
+declare function StepControlProvider({
+  children,
+  defaultStep,
+  handleStepSubmit,
+  isBackValidate,
+  onStepChange,
+  onStepRetry,
+  onNavigationStart,
+  onNavigationEnd,
+  onNavigationError,
+  totalSteps,
+  triggerValidation
+}: StepControlProviderProps): any;
+declare function useCreateStepControl({
+  defaultStep,
+  handleStepSubmit,
+  isBackValidate,
+  onStepChange,
+  onStepRetry,
+  onNavigationStart,
+  onNavigationEnd,
+  onNavigationError,
+  totalSteps: totalStepsProp,
+  triggerValidation
+}: UseCreateStepControlOptions): StepControlContextType;
+/**
+ * Hook to optionally consume the step control context
+ * @returns StepControlContextType | undefined - Step control methods and state, or undefined if not in context
+ */
+declare function useOptionalStepControlContext(): any;
+/**
+ * Backward compatibility hook
+ * This maintains the original API where useStepControl could be used as both
+ * a context consumer and a creator depending on whether options were passed
+ */
+declare function useStepControl(options?: UseCreateStepControlOptions): StepControlContextType;
+/**
+ * Hook to consume the step control context
+ * @returns StepControlContextType - Step control methods and state
+ * @throws Error if used outside StepControlProvider
+ */
+declare function useStepControlContext(): any;
+//#endregion
+export { StepControlContextType, StepControlProvider, StepControlProviderProps, UseCreateStepControlOptions, useCreateStepControl, useOptionalStepControlContext, useStepControl, useStepControlContext };
+//# sourceMappingURL=StepControlContext.d.ts.map