@m4l/components 9.4.27 → 9.4.28-BE20260210-1

package/components/DynamicForm/helpers/resolveInitialValue.js

@@ -0,0 +1,99 @@
+function resolveInitialValue(field) {
+  if (field.currentValue && field.currentValue.isVisible) {
+    const currentValue = field.currentValue;
+    const isCheckableList = field.fieldType.rhfComponent === "RHFCheckableList";
+    const isDaysOfWeekPicker = field.fieldType.rhfComponent === "RHFDaysOfWeekPicker";
+    if (isCheckableList || isDaysOfWeekPicker) {
+      if (currentValue.valueInteger !== null && currentValue.valueInteger !== void 0) {
+        return [currentValue.valueInteger];
+      }
+      if (currentValue.valueString !== null && currentValue.valueString !== void 0) {
+        try {
+          const parsed = JSON.parse(currentValue.valueString);
+          if (Array.isArray(parsed)) {
+            return parsed;
+          }
+        } catch {
+          const numValue = Number(currentValue.valueString);
+          if (!isNaN(numValue) && currentValue.valueString.trim() !== "") {
+            return [numValue];
+          }
+          return [currentValue.valueString];
+        }
+      }
+      if (currentValue.value) {
+        try {
+          const parsed = JSON.parse(currentValue.value);
+          if (Array.isArray(parsed)) {
+            return parsed;
+          }
+        } catch {
+          const numValue = Number(currentValue.value);
+          if (!isNaN(numValue) && currentValue.value.trim() !== "") {
+            return [numValue];
+          }
+          return [currentValue.value];
+        }
+      }
+      return [];
+    }
+    if (currentValue.valueString !== null && currentValue.valueString !== void 0) {
+      return currentValue.valueString;
+    }
+    if (currentValue.valueInteger !== null && currentValue.valueInteger !== void 0) {
+      return currentValue.valueInteger;
+    }
+    if (currentValue.valueDouble !== null && currentValue.valueDouble !== void 0) {
+      return currentValue.valueDouble;
+    }
+    if (currentValue.valueBoolean !== null && currentValue.valueBoolean !== void 0) {
+      return currentValue.valueBoolean;
+    }
+    if (currentValue.valueTimestamp !== null && currentValue.valueTimestamp !== void 0) {
+      return currentValue.valueTimestamp;
+    }
+    if (currentValue.value) {
+      const numValue = Number(currentValue.value);
+      if (!isNaN(numValue) && currentValue.value.trim() !== "") {
+        return numValue;
+      }
+      return currentValue.value;
+    }
+  }
+  if (field.defaultValue !== null && field.defaultValue !== void 0) {
+    if (field.fieldType.rhfComponent === "RHFCheckableList" || field.fieldType.rhfComponent === "RHFDaysOfWeekPicker") {
+      try {
+        const parsed = JSON.parse(field.defaultValue);
+        if (Array.isArray(parsed)) {
+          return parsed;
+        }
+      } catch {
+        const numValueArray = Number(field.defaultValue);
+        if (!isNaN(numValueArray) && field.defaultValue.trim() !== "") {
+          return [numValueArray];
+        }
+        return [field.defaultValue];
+      }
+    }
+    const numValue = Number(field.defaultValue);
+    if (!isNaN(numValue) && field.defaultValue.trim() !== "") {
+      return numValue;
+    }
+    return field.defaultValue;
+  }
+  const fieldType = field.fieldType.id;
+  const rhfComponent = field.fieldType.rhfComponent;
+  if (rhfComponent === "RHFCheckableList" || rhfComponent === "RHFDaysOfWeekPicker") {
+    return [];
+  }
+  if (fieldType === "fft_boolean" || fieldType === "fft_checkbox") {
+    return false;
+  }
+  if (fieldType === "fft_number" || fieldType === "fft_integer" || fieldType === "fft_double") {
+    return null;
+  }
+  return null;
+}
+export {
+  resolveInitialValue as r
+};

package/components/DynamicForm/hooks/useDynamicForm/useDynamicForm.d.ts

@@ -0,0 +1,14 @@
+import { DynamicFormApiResponse } from '../../types';
+/**
+ * Hook que gestiona la preparación de datos del formulario dinámico.
+ *
+ * Responsabilidades:
+ * - Resolver valores iniciales
+ * - Crear esquema de validación
+ *
+ * Nota: Este hook NO crea el formMethods, ya que eso lo hace RHFormProvider.
+ */
+export declare function useDynamicForm(data: DynamicFormApiResponse): {
+    initialValues: Record<string, unknown>;
+    validationSchema: import('../../..').ValidationSchema<Record<string, unknown>>;
+};

package/components/DynamicForm/hooks/useDynamicForm/useDynamicForm.js

@@ -0,0 +1,38 @@
+import { useMemo } from "react";
+import { r as resolveInitialValue } from "../../helpers/resolveInitialValue.js";
+import { c as createFieldValidationSchema } from "../../helpers/normalizeValidations.js";
+import { b as createValidationPartialObject, c as createValidationSchema, a as createValidationFullObject } from "../../../hook-form/RHFormProvider/schema.js";
+function useDynamicForm(data) {
+  const { fields } = data;
+  const initialValues = useMemo(() => {
+    const values = {};
+    fields.forEach((field) => {
+      if (field.currentValue?.isVisible !== false) {
+        values[field.name] = resolveInitialValue(field);
+      }
+    });
+    return values;
+  }, [fields]);
+  const validationSchema = useMemo(() => {
+    const validationShape = createValidationPartialObject({});
+    fields.forEach((field) => {
+      const fieldSchema = createFieldValidationSchema(field);
+      if (fieldSchema) {
+        const isVisibleInitially = field.currentValue?.isVisible !== false;
+        if (field.isConditional && !isVisibleInitially) {
+          validationShape[field.name] = fieldSchema.optional();
+        } else {
+          validationShape[field.name] = fieldSchema;
+        }
+      }
+    });
+    return createValidationSchema(createValidationFullObject(validationShape));
+  }, [fields]);
+  return {
+    initialValues,
+    validationSchema
+  };
+}
+export {
+  useDynamicForm as u
+};

package/components/DynamicForm/hooks/useDynamicFormConditionals/useDynamicFormConditionals.d.ts

@@ -0,0 +1,12 @@
+import { DynamicFormApiResponse } from '../../types';
+/**
+ * Hook que gestiona las reglas condicionales del formulario dinámico.
+ * Debe usarse dentro del contexto de RHFormProvider.
+ *
+ * Responsabilidades:
+ * - Evaluar reglas condicionales
+ * - Gestionar visibilidad de campos
+ */
+export declare function useDynamicFormConditionals(data: DynamicFormApiResponse): {
+    visibleFields: import('../../types').Field[];
+};

package/components/DynamicForm/hooks/useDynamicFormConditionals/useDynamicFormConditionals.js

@@ -0,0 +1,69 @@
+import { useState, useCallback, useEffect, useMemo } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+function useDynamicFormConditionals(data) {
+  const { fields, conditionalRules } = data;
+  const { control } = useFormContext();
+  const [visibleFields, setVisibleFields] = useState(() => {
+    const visible = /* @__PURE__ */ new Set();
+    fields.forEach((field) => {
+      if (!field.isConditional && field.currentValue?.isVisible !== false) {
+        visible.add(field.name);
+      }
+    });
+    return visible;
+  });
+  const evaluateCondition = useCallback((rule, sourceValue) => {
+    const { operator, conditionValue } = rule;
+    switch (operator.name) {
+      case "equals":
+        return String(sourceValue) === String(conditionValue);
+      case "not_equals":
+        return String(sourceValue) !== String(conditionValue);
+      case "greater_than":
+        return Number(sourceValue) > Number(conditionValue);
+      case "less_than":
+        return Number(sourceValue) < Number(conditionValue);
+      case "greater_than_or_equal":
+        return Number(sourceValue) >= Number(conditionValue);
+      case "less_than_or_equal":
+        return Number(sourceValue) <= Number(conditionValue);
+      case "contains":
+        return String(sourceValue).includes(String(conditionValue));
+      case "not_contains":
+        return !String(sourceValue).includes(String(conditionValue));
+      default:
+        console.warn(`Operador no soportado: ${operator.name}`);
+        return false;
+    }
+  }, []);
+  const watchValues = useWatch({ control });
+  useEffect(() => {
+    const newVisibleFields = /* @__PURE__ */ new Set();
+    fields.forEach((field) => {
+      if (!field.isConditional && field.currentValue?.isVisible !== false) {
+        newVisibleFields.add(field.name);
+      }
+    });
+    conditionalRules.filter((rule) => rule.isActive).forEach((rule) => {
+      const sourceValue = watchValues[rule.sourceFieldName];
+      const conditionMet = evaluateCondition(rule, sourceValue);
+      if (conditionMet && rule.actionType === "show") {
+        newVisibleFields.add(rule.targetFieldName);
+      } else if (!conditionMet && rule.actionType === "show") ;
+      else if (conditionMet && rule.actionType === "hide") ;
+      else if (!conditionMet && rule.actionType === "hide") {
+        newVisibleFields.add(rule.targetFieldName);
+      }
+    });
+    setVisibleFields(newVisibleFields);
+  }, [watchValues, conditionalRules, fields, evaluateCondition]);
+  const sortedVisibleFields = useMemo(() => {
+    return fields.filter((field) => visibleFields.has(field.name)).sort((a, b) => a.displayOrder - b.displayOrder);
+  }, [fields, visibleFields]);
+  return {
+    visibleFields: sortedVisibleFields
+  };
+}
+export {
+  useDynamicFormConditionals as u
+};

package/components/DynamicForm/hooks/useDynamicFormData/types.d.ts

@@ -0,0 +1,18 @@
+import { FormStatusLoad } from '../../../hook-form/RHFormProvider/types';
+import { DynamicFormApiResponse } from '../../types';
+export interface UseDynamicFormDataProps {
+    idForm?: number;
+    idFormInstance?: number;
+    inputEndpoint?: string;
+    outputEndpoint?: string;
+    formatInputData?: (data: Record<string, unknown>) => Record<string, unknown>;
+    formatOutputData?: (data: Record<string, unknown>) => Record<string, unknown>;
+    onSubmit?: (data: Record<string, unknown>) => void | Promise<void>;
+    initialData?: DynamicFormApiResponse | null;
+}
+export interface UseDynamicFormDataReturn {
+    formData: DynamicFormApiResponse | null;
+    statusLoad: FormStatusLoad;
+    handleSubmit: (data: Record<string, unknown>) => Promise<void>;
+    isLoading: boolean;
+}

package/components/DynamicForm/hooks/useDynamicFormData/useDynamicFormData.d.ts

@@ -0,0 +1,12 @@
+import { UseDynamicFormDataProps, UseDynamicFormDataReturn } from './types';
+/**
+ * Hook que gestiona la obtención y envío de datos del formulario dinámico.
+ *
+ * Responsabilidades:
+ * - Obtener datos del inputEndpoint mediante networkOperation
+ * - Aplicar formatInputData si existe
+ * - Manejar el estado de carga
+ * - Enviar datos al outputEndpoint cuando se hace submit
+ * - Aplicar formatOutputData antes de enviar
+ */
+export declare function useDynamicFormData(props: UseDynamicFormDataProps): UseDynamicFormDataReturn;

package/components/DynamicForm/hooks/useDynamicFormData/useDynamicFormData.js

@@ -0,0 +1,128 @@
+import { useState, useRef, useEffect } from "react";
+import { useNetwork } from "@m4l/core";
+function useDynamicFormData(props) {
+  const {
+    idForm,
+    idFormInstance,
+    inputEndpoint: InputEndpoint,
+    outputEndpoint: OutputEndpoint,
+    formatInputData,
+    formatOutputData,
+    onSubmit: onSubmitCallback,
+    initialData
+  } = props;
+  const { networkOperation } = useNetwork();
+  const [formData, setFormData] = useState(initialData || null);
+  const [statusLoad, setStatusLoad] = useState(
+    InputEndpoint ? "edit" : initialData ? "ready" : "new"
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  const abortControllerRef = useRef(null);
+  useEffect(() => {
+    let mounted = true;
+    if (statusLoad === "edit" && InputEndpoint) {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      abortControllerRef.current = new AbortController();
+      setIsLoading(true);
+      const parms = {};
+      if (idFormInstance !== void 0) {
+        parms.form_instance_id = idFormInstance;
+      }
+      networkOperation({
+        method: "GET",
+        endPoint: InputEndpoint,
+        parms,
+        timeout: 6e4,
+        isRemote: true,
+        responseToCamelCase: true,
+        signal: abortControllerRef.current.signal
+      }).then((response) => {
+        if (!mounted) {
+          return;
+        }
+        let processedData = response;
+        if (formatInputData) {
+          processedData = formatInputData(processedData);
+        }
+        setFormData(processedData);
+        setStatusLoad("reload_values_provider");
+        setIsLoading(false);
+      }).catch(() => {
+        if (!mounted) {
+          return;
+        }
+        setStatusLoad("error");
+        setIsLoading(false);
+      });
+    } else if (statusLoad === "reload_values_provider") {
+      setStatusLoad("ready");
+      setIsLoading(false);
+    } else if (statusLoad === "new" || statusLoad === "ready" && formData) {
+      setIsLoading(false);
+    }
+    return () => {
+      mounted = false;
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, [statusLoad, InputEndpoint, idForm, idFormInstance, formatInputData, networkOperation, formData]);
+  useEffect(() => {
+    if (!InputEndpoint) {
+      if (initialData) {
+        setFormData(initialData);
+        setStatusLoad("ready");
+      } else {
+        setFormData(null);
+        setStatusLoad("new");
+      }
+    }
+  }, [initialData, InputEndpoint]);
+  const handleSubmit = async (data) => {
+    if (!OutputEndpoint) {
+      if (onSubmitCallback) {
+        await onSubmitCallback(data);
+      }
+      return;
+    }
+    setIsLoading(true);
+    try {
+      let dataToSend = data;
+      if (formatOutputData) {
+        dataToSend = formatOutputData(data);
+      }
+      let endPoint = OutputEndpoint;
+      if (idFormInstance !== void 0) {
+        endPoint = `${OutputEndpoint}/${idFormInstance}`;
+      }
+      const method = idFormInstance !== void 0 ? "PUT" : "POST";
+      await networkOperation({
+        method,
+        endPoint,
+        data: dataToSend,
+        timeout: 6e4,
+        isRemote: true,
+        bodyToSnakeCase: true,
+        responseToCamelCase: true
+      });
+      if (onSubmitCallback) {
+        await onSubmitCallback(data);
+      }
+    } catch (error) {
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return {
+    formData,
+    statusLoad,
+    handleSubmit,
+    isLoading
+  };
+}
+export {
+  useDynamicFormData as u
+};

package/components/DynamicForm/index.d.ts

@@ -0,0 +1,4 @@
+export { DynamicForm } from './DynamicForm';
+export { useDynamicForm } from './hooks/useDynamicForm/useDynamicForm';
+export { EMPTY_DATA } from './constants';
+export type { DynamicFormProps, DynamicFormRef, DynamicFormApiResponse } from './types';

package/components/DynamicForm/index.js

@@ -0,0 +1 @@
+

package/components/DynamicForm/slots/DynamicFormEnum.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Enum que define todos los slots disponibles para el componente DynamicForm.
+ */
+export declare enum DynamicFormSlots {
+    root = "root",
+    formProvider = "formProvider",
+    contentRoot = "contentRoot",
+    fieldWrapper = "fieldWrapper",
+    label = "label",
+    control = "control",
+    helperText = "helperText",
+    sectionDivider = "sectionDivider",
+    checkableListWrapper = "checkableListWrapper"
+}

package/components/DynamicForm/slots/DynamicFormEnum.js

@@ -0,0 +1,15 @@
+var DynamicFormSlots = /* @__PURE__ */ ((DynamicFormSlots2) => {
+  DynamicFormSlots2["root"] = "root";
+  DynamicFormSlots2["formProvider"] = "formProvider";
+  DynamicFormSlots2["contentRoot"] = "contentRoot";
+  DynamicFormSlots2["fieldWrapper"] = "fieldWrapper";
+  DynamicFormSlots2["label"] = "label";
+  DynamicFormSlots2["control"] = "control";
+  DynamicFormSlots2["helperText"] = "helperText";
+  DynamicFormSlots2["sectionDivider"] = "sectionDivider";
+  DynamicFormSlots2["checkableListWrapper"] = "checkableListWrapper";
+  return DynamicFormSlots2;
+})(DynamicFormSlots || {});
+export {
+  DynamicFormSlots as D
+};

package/components/DynamicForm/slots/DynamicFormSlots.d.ts

@@ -0,0 +1,14 @@
+import { RHFormValues, RHFormProviderRef, RHFormProviderProps } from '../../hook-form/RHFormProvider/types';
+import { RefAttributes, ReactElement } from 'react';
+export declare const DynamicFormRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, keyof import('react').ClassAttributes<HTMLFormElement> | keyof import('react').FormHTMLAttributes<HTMLFormElement>>, {}>;
+export declare const DynamicFormFormProviderStyledBase: import('@emotion/styled').StyledComponent<Pick<RHFormProviderProps<RHFormValues> & RefAttributes<RHFormProviderRef<RHFormValues>>, keyof RHFormProviderProps<RHFormValues> | keyof RefAttributes<RHFormProviderRef<RHFormValues>>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
+export declare const DynamicFormFormProviderStyled: <T extends RHFormValues>(props: RHFormProviderProps<T> & RefAttributes<RHFormProviderRef<T>>) => ReactElement;
+export declare const DynamicFormContentRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const DynamicFormFieldWrapperStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/system').BoxOwnProps<import('@mui/material').Theme> & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
+}, keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>>, "title" | "id" | "content" | "translate" | "className" | "style" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
+export declare const DynamicFormLabelStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const DynamicFormControlStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const DynamicFormHelperTextStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const DynamicFormSectionDividerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const DynamicFormCheckableListWrapperStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/DynamicForm/slots/DynamicFormSlots.js

@@ -0,0 +1,51 @@
+import { styled } from "@mui/material/styles";
+import { Box } from "@mui/material";
+import { D as DynamicFormSlots } from "./DynamicFormEnum.js";
+import { c as componentStyles } from "../DynamicForm.styles.js";
+import { a as DYNAMIC_FORM_KEY_COMPONENT } from "../constants.js";
+import { R as RHFormProvider } from "../../hook-form/RHFormProvider/RHFormProvider.js";
+const DynamicFormRootStyled = styled("form", {
+  name: DYNAMIC_FORM_KEY_COMPONENT,
+  slot: DynamicFormSlots.root
+})(componentStyles?.root);
+const DynamicFormFormProviderStyledBase = styled(RHFormProvider, {
+  name: DYNAMIC_FORM_KEY_COMPONENT,
+  slot: DynamicFormSlots.formProvider
+})(componentStyles?.formProvider);
+const DynamicFormFormProviderStyled = DynamicFormFormProviderStyledBase;
+const DynamicFormContentRootStyled = styled("div", {
+  name: DYNAMIC_FORM_KEY_COMPONENT,
+  slot: DynamicFormSlots.contentRoot
+})(componentStyles?.contentRoot);
+const DynamicFormFieldWrapperStyled = styled(Box, {
+  name: DYNAMIC_FORM_KEY_COMPONENT,
+  slot: DynamicFormSlots.fieldWrapper
+})(componentStyles?.fieldWrapper);
+styled("div", {
+  name: DYNAMIC_FORM_KEY_COMPONENT,
+  slot: DynamicFormSlots.label
+})(componentStyles?.label);
+const DynamicFormControlStyled = styled("div", {
+  name: DYNAMIC_FORM_KEY_COMPONENT,
+  slot: DynamicFormSlots.control
+})(componentStyles?.control);
+styled("div", {
+  name: DYNAMIC_FORM_KEY_COMPONENT,
+  slot: DynamicFormSlots.helperText
+})(componentStyles?.helperText);
+styled("div", {
+  name: DYNAMIC_FORM_KEY_COMPONENT,
+  slot: DynamicFormSlots.sectionDivider
+})(componentStyles?.sectionDivider);
+const DynamicFormCheckableListWrapperStyled = styled("div", {
+  name: DYNAMIC_FORM_KEY_COMPONENT,
+  slot: DynamicFormSlots.checkableListWrapper
+})(componentStyles?.checkableListWrapper);
+export {
+  DynamicFormRootStyled as D,
+  DynamicFormFormProviderStyled as a,
+  DynamicFormCheckableListWrapperStyled as b,
+  DynamicFormContentRootStyled as c,
+  DynamicFormFieldWrapperStyled as d,
+  DynamicFormControlStyled as e
+};

package/components/DynamicForm/slots/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DynamicFormEnum';
+export * from './DynamicFormSlots';
+export { DynamicFormSlots } from './DynamicFormEnum';

package/components/DynamicForm/slots/index.js

@@ -0,0 +1 @@
+

package/components/DynamicForm/subcomponents/DynamicFormContent/DynamicFormContent.d.ts

@@ -0,0 +1,2 @@
+import { DynamicFormContentProps } from '../../types';
+export declare const DynamicFormContent: import('react').ForwardRefExoticComponent<DynamicFormContentProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/DynamicForm/subcomponents/DynamicFormContent/DynamicFormContent.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
+import { A as ActionsContainer } from "../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
+import { A as ActionFormIntro } from "../../../CommonActions/components/ActionFormIntro/ActionFormIntro.js";
+import { u as useDynamicFormConditionals } from "../../hooks/useDynamicFormConditionals/useDynamicFormConditionals.js";
+import { r as resolveFieldComponent } from "../../helpers/resolveFieldComponent.js";
+import { D as DYNAMIC_FORM_CLASSES } from "../../constants.js";
+import { c as DynamicFormContentRootStyled, d as DynamicFormFieldWrapperStyled, e as DynamicFormControlStyled } from "../../slots/DynamicFormSlots.js";
+const DynamicFormContent = forwardRef((props, ref) => {
+  const {
+    data,
+    ownerState,
+    currentSize,
+    fieldWrapperClassName,
+    dataTestId,
+    coupled = false,
+    actionFormIntroProps,
+    renderActions
+  } = props;
+  const { visibleFields } = useDynamicFormConditionals(data);
+  return /* @__PURE__ */ jsxs(
+    DynamicFormContentRootStyled,
+    {
+      ref,
+      className: clsx(DYNAMIC_FORM_CLASSES.contentRoot),
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: dataTestId } : {},
+      children: [
+        visibleFields.map((field) => {
+          const fieldComponent = resolveFieldComponent(field, {
+            name: field.name,
+            size: currentSize,
+            placeholder: field.placeholder,
+            rhfComponentProps: field.fieldType.rhfComponentProps || {}
+          });
+          if (!fieldComponent) {
+            return null;
+          }
+          return /* @__PURE__ */ jsx(
+            DynamicFormFieldWrapperStyled,
+            {
+              ownerState,
+              className: clsx(fieldWrapperClassName, DYNAMIC_FORM_CLASSES.fieldWrapper),
+              children: /* @__PURE__ */ jsx(
+                DynamicFormControlStyled,
+                {
+                  ownerState,
+                  className: DYNAMIC_FORM_CLASSES.control,
+                  children: fieldComponent
+                }
+              )
+            },
+            field.id
+          );
+        }),
+        !coupled && /* @__PURE__ */ jsx(ActionsContainer, { children: renderActions ? renderActions() : /* @__PURE__ */ jsx(
+          ActionFormIntro,
+          {
+            size: currentSize,
+            ...actionFormIntroProps
+          }
+        ) })
+      ]
+    }
+  );
+});
+DynamicFormContent.displayName = "DynamicFormContent";
+export {
+  DynamicFormContent as D
+};

package/components/DynamicForm/subcomponents/DynamicFormCoupled/DynamicFormCoupled.d.ts

@@ -0,0 +1,32 @@
+import { DynamicFormCoupledProps } from '../../types';
+/**
+ * Componente que expone el DynamicForm como un campo de React Hook Form mediante Controller.
+ * Se usa cuando coupled=true para integrar el formulario dentro de un formulario padre.
+ *
+ * **Propósito principal:**
+ * Este componente permite delegar el proceso de submit a un formulario superior (padre),
+ * lo que habilita escenarios donde se pueden ejecutar múltiples DynamicForms acoplados
+ * dentro de un único formulario padre y realizar un submit conjunto de todos ellos.
+ *
+ * **Casos de uso:**
+ * - Combinar varios DynamicForms en un solo formulario padre
+ * - Validar y enviar múltiples formularios dinámicos en una única operación
+ * - Centralizar la lógica de submit y manejo de errores en el formulario padre
+ * - Coordinar el envío de datos de múltiples formularios relacionados
+ *
+ * **Funcionamiento:**
+ * El componente usa `Controller` de React Hook Form para exponer el DynamicForm como
+ * un campo del formulario padre. Los valores y el estado de validación del DynamicForm
+ * se exponen al formulario padre a través del callback `onChange`, permitiendo que el
+ * formulario padre tenga control total sobre cuándo y cómo se realiza el submit.
+ * @example
+ * ```tsx
+ * <RHFormProvider onSubmit={handleSubmitAllForms}>
+ *   <DynamicForm coupled={true} name="form1" {...props} />
+ *   <DynamicForm coupled={true} name="form2" {...props} />
+ *   <DynamicForm coupled={true} name="form3" {...props} />
+ *   <Button type="submit">Enviar todos los formularios</Button>
+ * </RHFormProvider>
+ * ```
+ */
+export declare const DynamicFormCoupled: import('react').ForwardRefExoticComponent<DynamicFormCoupledProps & import('react').RefAttributes<HTMLDivElement>>;