@m4l/components 9.3.23 → 9.3.25-beta.0

package/components/CommonActions/components/ActionFormCancel/ActionFormCancel.js

@@ -10,17 +10,18 @@ import { D as DICTIONARY } from "../../dictionary.js";
 import { W as WindowConfirm } from "../../../WindowConfirm/WindowConfirm.js";
 import { B as ButtonRootStyled } from "./slots/ActionFormCancelSlots.js";
 function ActionFormCancel(props) {
-  const { className } = props;
+  const { className, onClose, linkToCloseWindow } = props;
   const { getLabel } = useModuleDictionary();
   const { openModal } = useModal();
-  const { close: closeWindow, setFnQueryClose: setQueryClose } = useWindowToolsMF();
+  const { close, setFnQueryClose } = useWindowToolsMF();
   const { control } = useFormContext();
   const { isDirty } = useFormState({
     control
   });
   const onConfirmQuit = useCallback(() => {
-    closeWindow();
-  }, []);
+    close(false);
+    onClose?.();
+  }, [close, onClose]);
   const onClickCancel = useCallback(() => {
     if (isDirty) {
       openModal({
@@ -38,10 +39,12 @@ function ActionFormCancel(props) {
     } else {
       onConfirmQuit();
     }
-  }, [getLabel, isDirty, openModal]);
+  }, [isDirty, openModal, getLabel, onConfirmQuit]);
   useEffect(() => {
-    setQueryClose(onClickCancel);
-  }, []);
+    if (linkToCloseWindow) {
+      setFnQueryClose(onClickCancel);
+    }
+  }, [onClickCancel, setFnQueryClose, linkToCloseWindow]);
   return /* @__PURE__ */ jsx(
     ButtonRootStyled,
     {

package/components/CommonActions/components/ActionFormCancel/types.d.ts

@@ -10,6 +10,14 @@ export interface ActionFormCancelProps extends ButtonProps {
     size?: Extract<Sizes, 'small' | 'medium'>;
     dictionaryId?: string;
     className?: string;
+    /**
+     * Cuando efectivamente se cierrar la ventana se ejecuta esta función.
+     */
+    onClose?: () => void;
+    /**
+     * Vicular la funcion de cierre de consulta con la funcion de cierre de la ventana.
+     */
+    linkToCloseWindow: boolean;
 }
 export interface ActionFormCancelOwnerState {
     size?: Extract<Sizes, 'small' | 'medium'>;

package/components/DataGrid/formatters/ColumnIconFormatter/index.d.ts

@@ -1,2 +1,3 @@
 export { ColumnIconFormatter } from './formatter';
 export type { ColumnIconFormatterProps } from './types';
+export { useColumnIcon } from './useColumnIcon';

package/components/DataGrid/index.d.ts

@@ -1,7 +1,7 @@
 export { DataGrid } from './DataGrid';
 export * from './formatters';
 export type { Column, RenderEditCellProps, RenderCellProps } from 'react-data-grid';
-export type { RowKey, ChangeUserColumn } from './types';
+export type { RowKey, ChangeUserColumn, RowActionsGetter, RowKeyGetter } from './types';
 export { getDataGridComponentsDictionary } from './dictionary';
 export { TextEditor, NumberEditor } from './subcomponents/editors/TextEditor';
 export { getDataGridRowsFromSet } from './utils/getDataGridRowsFromSet';

package/components/DataGrid/types.d.ts

@@ -112,6 +112,8 @@ export interface FilterSettings {
     filtersApplied: FilterApplied[];
     onChange: (event: FilterChangeEvent) => void;
 }
+export type RowActionsGetter<TRow> = (row: TRow) => MenuAction[];
+export type RowKeyGetter<TRow, TKey extends RowKey = RowKey> = (row: TRow) => TKey;
 /**--------------------Termina tipado de filtros-------------------------------------------- */
 export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Omit<NativeDataGridProps<TRow, TSummaryRow>, 'rowKeyGetter' | 'rows' | 'columns' | 'onRowsChange' | 'selectedRows' | 'onSelectedRowsChange' | 'renderers'> {
     id: string;

package/components/DynamicFilter/helpers/formatToInitialFilters.js

@@ -30,9 +30,9 @@ function formatToInitialFilters(appliedFilters) {
     return {
       name: af.field.name,
       operator: af.operator,
-      ...operand1 ? { operand1 } : {},
-      ...operand2 ? { operand2 } : {},
-      ...operandArray ? { operandArray } : {}
+      ...operand1 !== void 0 ? { operand1 } : {},
+      ...operand2 !== void 0 ? { operand2 } : {},
+      ...operandArray !== void 0 ? { operandArray } : {}
     };
   });
 }

package/components/DynamicFilter/subcomponents/FieldTypes/BooleanFilter/helpers.js

@@ -11,12 +11,16 @@ class BooleanFilterHelpers {
    */
   getDefaultFilter(field, fixed) {
     const defaultOperand1 = field.defaultOperand1;
+    let isSet = false;
+    if (defaultOperand1 !== void 0 && typeof defaultOperand1 === "boolean") {
+      isSet = true;
+    }
     const defaultFilter = {
       id: 0,
       fieldType: "boolean",
       field,
       fixed,
-      isSet: true,
+      isSet,
       operator: "e",
       operand1: true
     };
@@ -45,7 +49,9 @@ class BooleanFilterHelpers {
     const operator = filterValueBoolean ? filterValueBoolean.operator : field.defaultOperator ?? "e";
     const formValueOperand1 = filterValueBoolean ? {
       value: filterValueBoolean.operand1,
-      label: getLabel(`${DYNAMIC_FILTER_DICTIONARY_ID}.operand_${filterValueBoolean.operand1}`)
+      label: getLabel(
+        `${DYNAMIC_FILTER_DICTIONARY_ID}.operand_${filterValueBoolean.operand1}`
+      )
     } : null;
     return {
       fieldType: "boolean",
@@ -63,7 +69,9 @@ class BooleanFilterHelpers {
     const labelOperands = filter.operand1 ? getLabel(DICCTIONARY.operand_true) : getLabel(DICCTIONARY.operand_false);
     return {
       labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
-      labelOperator: getLabel(`${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`),
+      labelOperator: getLabel(
+        `${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`
+      ),
       labelOperands
     };
   }

package/components/DynamicFilter/subcomponents/FieldTypes/DateTimeFilter/helpers.js

@@ -18,12 +18,16 @@ class DateTimeFilterHelpers {
     defaultEndDate.setHours(23, 59, 59, 999);
     const defaultOperand1 = field.defaultOperand1 && field.defaultOperand1 instanceof Date ? field.defaultOperand1 : defaultStartDate;
     const defaultOperand2 = field.defaultOperand2 && field.defaultOperand2 instanceof Date ? field.defaultOperand2 : defaultEndDate;
+    let isSet = false;
+    if (defaultOperand1 !== void 0) {
+      isSet = true;
+    }
     return {
       id: 0,
       fieldType: "datetime",
       field,
       fixed,
-      isSet: true,
+      isSet,
       operator: "b",
       operand1: defaultOperand1,
       operand2: defaultOperand2
@@ -83,13 +87,21 @@ class DateTimeFilterHelpers {
       labelOperands = filter.operand1 && filter.operand2 ? `${dateFormatter.formatDate(
         filter.operand1,
         dateFormatter.datetimeFormat
-      )} - ${dateFormatter.formatDate(filter.operand2, dateFormatter.datetimeFormat)}` : "";
+      )} - ${dateFormatter.formatDate(
+        filter.operand2,
+        dateFormatter.datetimeFormat
+      )}` : "";
     } else {
-      labelOperands = filter.operand1 ? dateFormatter.formatDate(filter.operand1, dateFormatter.datetimeFormat) : "";
+      labelOperands = filter.operand1 ? dateFormatter.formatDate(
+        filter.operand1,
+        dateFormatter.datetimeFormat
+      ) : "";
     }
     return {
       labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
-      labelOperator: getLabel(`${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`),
+      labelOperator: getLabel(
+        `${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`
+      ),
       labelOperands
     };
   }

package/components/DynamicFilter/subcomponents/FieldTypes/NumberFilter/helpers.js

@@ -15,12 +15,10 @@ class NumberFilterHelpers {
     const defaultOperand1 = field.defaultOperand1 ?? null;
     const defaultOperand2 = field.defaultOperand2 ?? null;
     let isSet = false;
-    if (fixed) {
-      if (["b"].includes(dOperator)) {
-        isSet = defaultOperand1 !== null && defaultOperand2 !== null ? true : false;
-      } else {
-        isSet = defaultOperand1 !== null ? true : false;
-      }
+    if (["b"].includes(dOperator)) {
+      isSet = defaultOperand1 !== null && defaultOperand2 !== null ? true : false;
+    } else {
+      isSet = defaultOperand1 !== null ? true : false;
     }
     return {
       id: 0,
@@ -85,7 +83,9 @@ class NumberFilterHelpers {
     }
     return {
       labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
-      labelOperator: getLabel(`${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`),
+      labelOperator: getLabel(
+        `${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`
+      ),
       labelOperands
     };
   }
@@ -100,7 +100,10 @@ class NumberFilterHelpers {
       ),
       formValueOperand2: Yup.mixed().when(["formValueOperator.id"], {
         is: "b",
-        then: Yup.number().typeError(getLabel(DICCTIONARY.error_operand_mustbe_number)).min(Yup.ref("formValueOperand1"), getLabel(DICCTIONARY.error_less_than_start))
+        then: Yup.number().typeError(getLabel(DICCTIONARY.error_operand_mustbe_number)).min(
+          Yup.ref("formValueOperand1"),
+          getLabel(DICCTIONARY.error_less_than_start)
+        )
       })
     });
   }

package/components/DynamicFilter/subcomponents/FieldTypes/SelectAsyncFilter/helpers.js

@@ -27,13 +27,16 @@ class SelectAsyncFilterHelpers {
     let operandsArray = [];
     if (isMultiple) {
       dOperator = field.defaultOperator ?? "in";
-      isSet = fixed ? defaultOperandsArray !== null && defaultOperandsArray.length > 0 ? true : false : false;
+      isSet = defaultOperandsArray !== null && defaultOperandsArray.length > 0;
       if (field.defaultOperandsArray !== void 0 && Array.isArray(field.defaultOperandsArray)) {
-        operandsArray = filterValidOperandsArraySelectAsync(field.defaultOperandsArray, field);
+        operandsArray = filterValidOperandsArraySelectAsync(
+          field.defaultOperandsArray,
+          field
+        );
       }
     } else {
       dOperator = field.defaultOperator ?? "e";
-      isSet = fixed ? defaultOperand1 ? true : false : false;
+      isSet = defaultOperand1 ? true : false;
     }
     const defaultCommonFilter = {
       id: 0,
@@ -122,15 +125,21 @@ class SelectAsyncFilterHelpers {
     let labelOperands = "";
     if (isMultiple) {
       labelOperands = operandsArray?.reduce?.((label, operand) => {
-        const textLabel = field.selectAsyncOptions?.getOptionLabel?.(operand) || "";
+        const textLabel = field.selectAsyncOptions?.getOptionLabel?.(
+          operand
+        ) || "";
         return label ? `${label} | ${textLabel}` : textLabel;
       }, "")?.toString() || "?";
     } else {
-      labelOperands = (field.selectAsyncOptions?.getOptionLabel?.(filter.operand1) ?? "?") + "";
+      labelOperands = (field.selectAsyncOptions?.getOptionLabel?.(
+        filter.operand1
+      ) ?? "?") + "";
     }
     return {
       labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
-      labelOperator: getLabel(`${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`),
+      labelOperator: getLabel(
+        `${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`
+      ),
       labelOperands
     };
   }
@@ -163,7 +172,9 @@ class SelectAsyncFilterHelpers {
       return false;
     }
     if (isMultiple) {
-      if (SELECT_ASYNC_OPERATORS_MULTIPLE.findIndex((f) => f === filter.operator) === -1) {
+      if (SELECT_ASYNC_OPERATORS_MULTIPLE.findIndex(
+        (f) => f === filter.operator
+      ) === -1) {
         return false;
       }
       if (!filter.operandsArray || typeof filter.operandsArray !== "object") {
@@ -180,7 +191,9 @@ class SelectAsyncFilterHelpers {
         return false;
       }
     } else {
-      if (SELECT_ASYNC_OPERATORS_SINGLE.findIndex((f) => f === filter.operator) === -1) {
+      if (SELECT_ASYNC_OPERATORS_SINGLE.findIndex(
+        (f) => f === filter.operator
+      ) === -1) {
         return false;
       }
       if (!filter.operand1 || typeof filter.operand1 !== "object") {

package/components/DynamicFilter/subcomponents/FieldTypes/SelectFilter/helpers.js

@@ -26,13 +26,15 @@ class SelectFilterHelpers {
     let operandsArray = [];
     if (isMultiple) {
       dOperator = field.defaultOperator ?? "in";
-      isSet = fixed ? defaultOperandsArray !== null && defaultOperandsArray.length > 0 ? true : false : false;
+      isSet = defaultOperandsArray !== null && defaultOperandsArray.length > 0;
       if (field.defaultOperandsArray !== void 0 && Array.isArray(field.defaultOperandsArray)) {
-        operandsArray = filterValidOperandsArraySelect(field.defaultOperandsArray);
+        operandsArray = filterValidOperandsArraySelect(
+          field.defaultOperandsArray
+        );
       }
     } else {
       dOperator = field.defaultOperator ?? "e";
-      isSet = fixed ? defaultOperand1 !== null ? true : false : false;
+      isSet = defaultOperand1 !== null;
     }
     const defaultCommonFilter = {
       id: 0,
@@ -123,7 +125,9 @@ class SelectFilterHelpers {
     let labelOperands = "";
     if (isMultiple) {
       labelOperands = operandsArray?.reduce?.((label, operand) => {
-        const textLabel = field.selectOptions?.options.find((option) => option.id === operand)?.label || "";
+        const textLabel = field.selectOptions?.options.find(
+          (option) => option.id === operand
+        )?.label || "";
         return label ? `${label} | ${textLabel}` : textLabel;
       }, "")?.toString() || "?";
     } else {
@@ -131,7 +135,9 @@ class SelectFilterHelpers {
     }
     return {
       labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
-      labelOperator: getLabel(`${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`),
+      labelOperator: getLabel(
+        `${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`
+      ),
       labelOperands
     };
   }
@@ -147,9 +153,13 @@ class SelectFilterHelpers {
       }),
       formValueOperand1: Yup.mixed().when(["multiple"], {
         is: false,
-        then: Yup.mixed().test("is-string-or-number", getLabel(DICCTIONARY.error_operand_required), (value) => {
-          return typeof value === "string" || typeof value === "number";
-        }).required(getLabel(DICCTIONARY.error_operand_required))
+        then: Yup.mixed().test(
+          "is-string-or-number",
+          getLabel(DICCTIONARY.error_operand_required),
+          (value) => {
+            return typeof value === "string" || typeof value === "number";
+          }
+        ).required(getLabel(DICCTIONARY.error_operand_required))
       })
     });
   }

package/components/DynamicFilter/subcomponents/FieldTypes/StringFilter/helpers.js

@@ -12,8 +12,8 @@ class StringFilterHelpers {
   getDefaultFilter(field, fixed) {
     const defaultOperand1 = field.defaultOperand1;
     let isSet = false;
-    if (fixed) {
-      isSet = defaultOperand1 !== null ? true : false;
+    if (defaultOperand1 !== null && typeof defaultOperand1 === "string") {
+      isSet = true;
     }
     const defaultFilter = {
       id: 0,
@@ -64,7 +64,9 @@ class StringFilterHelpers {
     const labelOperands = filter.operand1 !== void 0 ? filter.operand1 + "" : "";
     return {
       labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
-      labelOperator: getLabel(`${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`),
+      labelOperator: getLabel(
+        `${DYNAMIC_FILTER_DICTIONARY_ID}.operator_${filter.operator}`
+      ),
       labelOperands
     };
   }

package/components/Label/Label.js

@@ -9,7 +9,7 @@ const Label = (props) => {
   const { host_static_assets, environment_assets } = useEnvironment();
   const isSkeleton = useModuleSkeleton();
   const { currentSize } = useComponentSize(size);
-  const hasHelperIcon = typeof helperMessage === "string" ? true : false;
+  const hasHelperIcon = typeof helperMessage === "string" && helperMessage.length > 0 ? true : false;
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const ownerState = {
     disabled,

package/components/PaperForm/PaperForm.js

@@ -45,7 +45,7 @@ function PaperForm(props) {
       ownerState: { ...ownerState },
       ...process.env.NODE_ENV !== "production" ? { "data-testid": dataTestId } : {},
       children: [
-        variant !== "text" && /* @__PURE__ */ jsx(Header, { urlIcon, title, color, size }),
+        variant !== "onlyContainer" && /* @__PURE__ */ jsx(Header, { urlIcon, title, color, size, variant }),
         /* @__PURE__ */ jsx(ContentStyled, { ownerState: { ...ownerState }, children: renderChildren(children) })
       ]
     }

package/components/PaperForm/components/Header.js

@@ -1,17 +1,19 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { H as HeaderStyled, I as IconStyled, T as TitleStyled } from "../slots/PaperFormSlots.js";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { I as IconStyled, T as TitleStyled, H as HeaderStyled } from "../slots/PaperFormSlots.js";
+import { useMemo } from "react";
 const Header = (props) => {
-  const { urlIcon, title, size, dataTestId, color } = props;
+  const { urlIcon, title, size, dataTestId, color, variant } = props;
   const ownerState = {
-    color
+    color,
+    variant
   };
-  const renderContentHeader = () => {
+  const contentHeader = useMemo(() => {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       urlIcon ? /* @__PURE__ */ jsx(IconStyled, { src: urlIcon, size }) : null,
       /* @__PURE__ */ jsx(TitleStyled, { variant: "bodyDens", size, children: title })
     ] });
-  };
-  return /* @__PURE__ */ jsx(HeaderStyled, { role: "heading", ownerState, ...process.env.NODE_ENV !== "production" ? { "data-testid": dataTestId } : {}, children: renderContentHeader() });
+  }, [urlIcon, title, size]);
+  return /* @__PURE__ */ jsx(HeaderStyled, { role: "heading", ownerState, ...process.env.NODE_ENV !== "production" ? { "data-testid": dataTestId } : {}, children: contentHeader });
 };
 export {
   Header as H

package/components/PaperForm/styles.js

@@ -8,11 +8,14 @@ const paperFormStyles = {
    */
   paperFormRoot: ({ theme, ownerState }) => ({
     background: theme.vars.palette.background.default,
-    ...ownerState?.paperFormVariant !== "text" && {
+    ...ownerState?.paperFormVariant === "standard" && {
       borderRadius: theme.size.borderRadius.r1,
       border: `${theme.size.borderStroke.container}`,
       borderColor: theme.vars.palette.border.default
     },
+    // ...(ownerState?.paperFormVariant === 'text' && {
+    //   borderRadius: theme.size.borderRadius.r1,
+    // }),
     width: "100%",
     overflow: "auto",
     ...ownerState?.height === "full" && {
@@ -41,8 +44,10 @@ const paperFormStyles = {
     gap: theme.vars.size.baseSpacings.sp1,
     overflow: "hidden",
     padding: `${theme.vars.size.baseSpacings.sp1} ${theme.vars.size.baseSpacings.sp2}`,
-    borderRadius: `${theme.vars.size.borderRadius.r1} ${theme.vars.size.borderRadius.r1} 0 0`,
-    background: theme.vars.palette[ownerState?.color ?? "default"].hoverOpacity,
+    ...ownerState?.paperFormVariant === "standard" && {
+      borderRadius: `${theme.vars.size.borderRadius.r1} ${theme.vars.size.borderRadius.r1} 0 0`,
+      background: theme.vars.palette[ownerState?.color ?? "default"].hoverOpacity
+    },
     alignSelf: "stretch",
     ...getSizeStyles(
       theme,
@@ -90,7 +95,7 @@ const paperFormStyles = {
     justifyContent: ownerState?.isForm ? "flex-start" : "center",
     gap: ownerState?.isForm ? theme.vars.size.baseSpacings.sp3 : theme.vars.size.baseSpacings.sp0,
     flexWrap: ownerState?.isForm ? "wrap" : "nowrap",
-    padding: ownerState?.paperFormVariant === "text" ? "0px" : theme.vars.size.baseSpacings.sp3,
+    padding: ownerState?.paperFormVariant === "onlyContainer" ? "0px" : theme.vars.size.baseSpacings.sp3,
     background: theme.vars.palette.background.default,
     flex: 1,
     overflow: "auto"

package/components/PaperForm/types.d.ts

@@ -9,11 +9,12 @@ export interface PaperFormProps {
     urlIcon?: string;
     title: string;
     children?: ReactNode | PropertyValueProps[];
-    variant?: 'standard' | 'text';
+    variant?: 'standard' | 'text' | 'onlyContainer';
     color?: Extract<ComponentPalletColor, 'default'>;
     size?: Extract<Sizes, 'small' | 'medium'>;
     isForm?: boolean;
     dataTestId?: string;
+    border?: boolean;
     height?: 'auto' | 'full';
 }
 /**
@@ -25,7 +26,7 @@ export interface PaperFormProps {
 interface CommonsProps {
     paperFormVariant?: PaperFormProps['variant'];
 }
-export type HeaderProps = Omit<PaperFormProps, 'children' | 'isForm' | 'variant'> & CommonsProps;
+export type HeaderProps = Omit<PaperFormProps, 'children' | 'isForm'> & CommonsProps;
 export type PaperFormOwnerState = Pick<PaperFormProps, 'isForm' | 'color' | 'size' | 'height'> & CommonsProps;
 /**
  * ***********************************

package/components/Stepper/Stepper.styles.js

@@ -56,6 +56,7 @@ const stepperStyles = {
     display: "flex",
     flexDirection: "column",
     gap: theme.vars.size.baseSpacings.sp6,
+    overflowY: "auto",
     ...ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? {
       borderTop: "1px solid",
       paddingTop: theme.vars.size.baseSpacings.sp8

package/components/Stepper/dictionary.js

@@ -5,7 +5,6 @@ function getStepperComponentsDictionary() {
 const DICTIONARY = {
   LABEL_PREV_BUTTON: `${STEPPER_DICTIONARY_ID}.label_prev_button`,
   LABEL_NEXT_BUTTON: `${STEPPER_DICTIONARY_ID}.label_next_button`,
-  LABEL_CANCEL_BUTTON: `${STEPPER_DICTIONARY_ID}.label_cancel_button`,
   LABEL_SUBMIT_BUTTON: `${STEPPER_DICTIONARY_ID}.label_submit_button`
 };
 export {

package/components/Stepper/subcomponents/StepArea/hooks/useStepArea.d.ts

@@ -0,0 +1,13 @@
+import { Step } from '../../../types';
+/**
+ * useStepArea hook is responsible for managing the step area of the stepper
+ */
+export declare function useStepArea(props: {
+    visibleSteps: Step[];
+}): {
+    visibleTitle: boolean | undefined;
+    orientation: import('../../../types').Orientation | undefined;
+    handleStepClick: (targetIndex: number) => Promise<void>;
+    steps: Step[];
+    currentStep: number;
+};

package/components/Stepper/subcomponents/StepArea/hooks/useStepArea.js

@@ -0,0 +1,111 @@
+import { useCallback, useMemo } from "react";
+import { useFormContext } from "react-hook-form";
+import { u as useStepper } from "../../../hooks/useStepper/index.js";
+import { u as useDynamicValidation } from "../../../hooks/useDynamicValidation/index.js";
+import { d as deepShallow } from "../../../../../utils/deepShallow.js";
+function useStepArea(props) {
+  const { visibleSteps } = props;
+  const { trigger, clearErrors } = useFormContext();
+  const {
+    activateFieldsValidation,
+    startExternalValidation,
+    endExternalValidation
+  } = useDynamicValidation();
+  const {
+    currentStep,
+    steps,
+    visibleTitle,
+    setCurrentStep,
+    orientation,
+    setStepValidationStatus,
+    stepValidationStatus
+  } = useStepper(
+    (state) => ({
+      currentStep: state.currentStep,
+      steps: state.steps,
+      visibleTitle: state.visibleTitle,
+      setCurrentStep: state.actions.setCurrentStep,
+      indicatorType: state.indicatorType,
+      orientation: state.orientation,
+      setStepValidationStatus: state.actions.setStepValidationStatus,
+      stepValidationStatus: state.stepValidationStatus
+    }),
+    deepShallow
+  );
+  const handleStepClick = useCallback(async (targetIndex) => {
+    const currentIndex = visibleSteps.findIndex(
+      (step) => step.key === steps[currentStep].key
+    );
+    if (targetIndex === currentIndex) {
+      return;
+    }
+    const isNavigatingForward = targetIndex > currentIndex;
+    const targetOriginalIndex = steps.findIndex(
+      (s) => s.key === visibleSteps[targetIndex].key
+    );
+    if (!isNavigatingForward) {
+      setCurrentStep(targetOriginalIndex);
+      return;
+    }
+    const isSkippingSteps = targetIndex > currentIndex + 1;
+    if (isSkippingSteps) {
+      for (let i = currentIndex; i < targetIndex; i++) {
+        const step = visibleSteps[i];
+        const stepOriginalIndex = steps.findIndex((s) => s.key === step.key);
+        startExternalValidation();
+        const isValid = await trigger(step.validationFields);
+        endExternalValidation();
+        if (!isValid) {
+          setCurrentStep(stepOriginalIndex);
+          setStepValidationStatus(stepOriginalIndex, false);
+          activateFieldsValidation(step.validationFields || []);
+          return;
+        }
+        setStepValidationStatus(stepOriginalIndex, true);
+      }
+    } else {
+      const currentStepData = visibleSteps[currentIndex];
+      const currentStepOriginalIndex = steps.findIndex(
+        (s) => s.key === currentStepData.key
+      );
+      startExternalValidation();
+      const isCurrentValid = await trigger(currentStepData.validationFields);
+      endExternalValidation();
+      if (!isCurrentValid) {
+        setStepValidationStatus(currentStepOriginalIndex, false);
+        activateFieldsValidation(currentStepData.validationFields || []);
+        return;
+      }
+      setStepValidationStatus(currentStepOriginalIndex, true);
+    }
+    setCurrentStep(targetOriginalIndex);
+    if (isNavigatingForward) {
+      const currentStepData = visibleSteps[currentIndex];
+      const currentStepOriginalIndex = steps.findIndex(
+        (s) => s.key === currentStepData.key
+      );
+      const isCurrentStepValid = stepValidationStatus[currentStepOriginalIndex] !== false;
+      if (isCurrentStepValid) {
+        const targetStep = visibleSteps[targetIndex];
+        const targetStepFields = targetStep.validationFields || [];
+        if (targetStepFields.length > 0) {
+          clearErrors(targetStepFields);
+          setTimeout(() => {
+            clearErrors(targetStepFields);
+            setStepValidationStatus(targetOriginalIndex, true);
+          }, 100);
+        }
+      }
+    }
+  }, [visibleSteps, steps, setCurrentStep, currentStep, startExternalValidation, trigger, endExternalValidation, setStepValidationStatus, activateFieldsValidation, stepValidationStatus, clearErrors]);
+  return useMemo(() => ({
+    visibleTitle,
+    orientation,
+    handleStepClick,
+    steps,
+    currentStep
+  }), [visibleTitle, orientation, handleStepClick, steps, currentStep]);
+}
+export {
+  useStepArea as u
+};

package/components/Stepper/subcomponents/StepArea/hooks/useVisibileSteps.d.ts

@@ -0,0 +1,8 @@
+import { Step as StepType } from '../../../types';
+/**
+ * useVisibileSteps hook is responsible for calculating the visible steps based on the form values and the visibility data
+ * Optimizado con useSyncExternalStore para evitar re-renders innecesarios
+ */
+export declare function useVisibileSteps(): {
+    visibleSteps: StepType[];
+};