@m4l/components 9.3.24-JT04112025.beta.1 → 9.3.24-JT04112025.beta.3

package/components/DataGrid/subcomponents/Table/index.js

@@ -8,7 +8,7 @@ import { a as filterHeight } from "./subcomponents/SelectColumn.js";
 import { u as useSortColumnsRows } from "./hooks/useSortColumnsRows.js";
 import { u as useFilters } from "../../hooks/useFilters.js";
 import { u as useDataGrid } from "../../hooks/useDataGrid.js";
-import { y as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
+import { z as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
 import { u as useHeaderMenuActions } from "./hooks/useHeaderMenuActions.js";
 import { H as HeaderRenderClick } from "./subcomponents/HeaderRenderClick/HeaderRenderClick.js";
 function Table(props) {
@@ -20,6 +20,7 @@ function Table(props) {
     selectedRows,
     onSelectedRowsChange,
     defaultColumnOptions: defaultColumnOptionsProp,
+    focusOnRowKey,
     ...restProps
   } = props;
   const renderCheckbox = (formatterProps) => {
@@ -57,6 +58,7 @@ function Table(props) {
     setRowsCount,
     currentRowHeight,
     currentRowHeaderHeight,
+    currentRowHeightVariant,
     size,
     sortColumns,
     setSortColumns
@@ -109,6 +111,17 @@ function Table(props) {
   useEffect(() => {
     setRowsCount(finalRows.length);
   }, [finalRows]);
+  useEffect(() => {
+    if (!focusOnRowKey) {
+      return;
+    }
+    const rowIndex = finalRows.findIndex(
+      (row) => rowKeyGetter(row) === focusOnRowKey
+    );
+    if (rowIndex !== -1) {
+      ref_data_grid.current?.scrollToCell({ rowIdx: rowIndex });
+    }
+  }, [focusOnRowKey, finalRows, rowKeyGetter]);
   const onColumnResize = (idx, width) => {
     onChangeColumnWidth(finalColumns[idx].key, width);
   };
@@ -123,47 +136,53 @@ function Table(props) {
     Boolean(defaultColumnOptions.sortable),
     handleSortFromPopover
   );
-  return /* @__PURE__ */ jsx(TableContainerStyled, { id: "WrapperTable", children: /* @__PURE__ */ jsxs(TableWrapperDataGridStyled, { ownerState: { size }, children: [
-    /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
-      DataGrid,
-      {
-        className: "rdg-light",
-        ref: ref_data_grid,
-        headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
-        columns: finalColumns,
-        sortColumns,
-        onSortColumnsChange: handleSortColumnsChange,
-        onColumnResize,
-        rows: finalRows,
-        onRowsChange,
-        selectedRows,
-        onSelectedRowsChange,
-        onCellClick,
-        rowHeight: currentRowHeight,
-        rowKeyGetter,
-        renderers: {
-          renderCheckbox
-        },
-        defaultColumnOptions,
-        ...restProps
-      }
-    ) }),
-    popoverState.columnKey && popoverState.anchorEl instanceof HTMLDivElement && /* @__PURE__ */ jsx(
-      HeaderRenderClick,
-      {
-        externalOpen: popoverState.anchorEl,
-        onOpen: (open) => {
-          if (!open) {
-            setPopoverState({
-              anchorEl: null,
-              columnKey: null
-            });
+  return /* @__PURE__ */ jsx(TableContainerStyled, { id: "WrapperTable", children: /* @__PURE__ */ jsxs(
+    TableWrapperDataGridStyled,
+    {
+      ownerState: { size, currentRowHeightVariant, currentRowHeight },
+      children: [
+        /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
+          DataGrid,
+          {
+            className: "rdg-light",
+            ref: ref_data_grid,
+            headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
+            columns: finalColumns,
+            sortColumns,
+            onSortColumnsChange: handleSortColumnsChange,
+            onColumnResize,
+            rows: finalRows,
+            onRowsChange,
+            selectedRows,
+            onSelectedRowsChange,
+            onCellClick,
+            rowHeight: currentRowHeight,
+            rowKeyGetter,
+            renderers: {
+              renderCheckbox
+            },
+            defaultColumnOptions,
+            ...restProps
           }
-        },
-        menuActions
-      }
-    )
-  ] }) });
+        ) }),
+        popoverState.columnKey && popoverState.anchorEl instanceof HTMLDivElement && /* @__PURE__ */ jsx(
+          HeaderRenderClick,
+          {
+            externalOpen: popoverState.anchorEl,
+            onOpen: (open) => {
+              if (!open) {
+                setPopoverState({
+                  anchorEl: null,
+                  columnKey: null
+                });
+              }
+            },
+            menuActions
+          }
+        )
+      ]
+    }
+  ) });
 }
 export {
   Table as T

package/components/DataGrid/subcomponents/Table/subcomponents/CheckboxFormatter.js

@@ -2,25 +2,23 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { C as CheckboxIndeterminateIcon, a as CheckboxCheckedIcon, b as CheckboxIcon } from "./CustomIcons.js";
 import { Checkbox } from "@mui/material";
-const CheckboxFormatter = forwardRef(
-  function CheckboxFormatter2({ onChange, checked, ...props }, _ref) {
-    function handleChange(e) {
-      onChange(e.target.checked, e.nativeEvent.shiftKey);
-    }
-    return /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        checked,
-        size: "small",
-        icon: /* @__PURE__ */ jsx(CheckboxIcon, {}),
-        checkedIcon: /* @__PURE__ */ jsx(CheckboxCheckedIcon, {}),
-        indeterminateIcon: /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {}),
-        onChange: handleChange,
-        ...props
-      }
-    );
+const CheckboxFormatter = forwardRef(function CheckboxFormatter2({ onChange, checked, ...props }, _ref) {
+  function handleChange(e) {
+    onChange(e.target.checked, e.nativeEvent.shiftKey);
   }
-);
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      checked,
+      size: "small",
+      icon: /* @__PURE__ */ jsx(CheckboxIcon, {}),
+      checkedIcon: /* @__PURE__ */ jsx(CheckboxCheckedIcon, {}),
+      indeterminateIcon: /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {}),
+      onChange: handleChange,
+      ...props
+    }
+  );
+});
 export {
   CheckboxFormatter as C
 };

package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.js

@@ -5,7 +5,7 @@ import { useDrag, useDrop } from "react-dnd";
 import { renderHeaderCell } from "react-data-grid";
 import { u as useFocusRef } from "../hooks/useFocusRef.js";
 import { u as useFilters } from "../../../hooks/useFilters.js";
-import { N as NameColumnIconStyled, z as NameColumnStyled, I as IconColumnStyled, B as DraggableHeaderRootStyled, F as ButtonHeaderActionsStyled, G as DraggableWrapperInputBaseStyled, H as IconSearchStyled, J as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
+import { N as NameColumnIconStyled, B as NameColumnStyled, I as IconColumnStyled, F as DraggableHeaderRootStyled, G as ButtonHeaderActionsStyled, H as DraggableWrapperInputBaseStyled, J as IconSearchStyled, K as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
 import { p as pathIcons } from "../../../icons.js";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { I as Icon } from "../../../../Icon/Icon.js";
@@ -21,7 +21,7 @@ function DraggableHeaderRenderer(props) {
     headerTabIndex !== void 0 && headerTabIndex >= 0
   );
   const { getLabel } = useModuleDictionary();
-  const { size, classes, externalSortSettings, externalFilterSettings } = useDataGrid();
+  const { size, classes, externalSortSettings, externalFilterSettings, currentRowHeightVariant } = useDataGrid();
   const { host_static_assets, environment_assets } = useEnvironment();
   const { activeFilters, filters, onChangeFilter } = useFilters();
   const [filter, setFilter] = useState(filters?.get(column.key) || "");
@@ -117,7 +117,7 @@ function DraggableHeaderRenderer(props) {
         }
       };
       newColumn.name = /* @__PURE__ */ jsxs(NameColumnIconStyled, { style: { justifyContent: getJustifyContent() }, children: [
-        /* @__PURE__ */ jsx(NameColumnStyled, { children: newColumn.name }),
+        /* @__PURE__ */ jsx(NameColumnStyled, { ownerState: { size, currentRowHeightVariant }, children: newColumn.name }),
         /* @__PURE__ */ jsx(IconColumnStyled, { children: columnIcons })
       ] });
     }

package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/HeaderRenderClick.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useMemo, useEffect, useCallback } from "react";
 import { useModuleDictionary } from "@m4l/core";
 import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
-import { M as MenuListStyled, K as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
+import { M as MenuListStyled, O as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
 import { M as MenuDivider } from "../../../../../mui_extended/MenuDivider/MenuDivider.js";
 import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";

package/components/DataGrid/subcomponents/editors/TextEditor/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { O as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
+import { P as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
 function autoFocusAndSelect(input) {
   input?.focus();
   input?.select();

package/components/DataGrid/tests/helpers/types.d.ts

@@ -2,6 +2,7 @@ import { RenderHeaderCellProps } from 'react-data-grid';
 import { ChipStatusFormatterProps } from '../../../formatters/ChipStatusFormatter/types';
 import { DeepKeyOf } from '../../../../utils/types';
 import { ColumnAlign } from '../../types';
+import { TagConfig } from '../../../formatters/TagsFormatter/types';
 export interface SeedProps {
     quantity: number;
     withBoolean?: boolean;
@@ -17,6 +18,7 @@ export interface SeedProps {
     withSetCheck?: boolean;
     withCesar?: boolean;
     withChipStatus?: boolean;
+    withTags?: boolean;
     withActions?: boolean;
     withActionsUser?: boolean;
     withBooleanStatus?: boolean;
@@ -52,6 +54,7 @@ export interface RowType {
         symbol: string;
         unit: string;
     };
+    tags?: TagConfig[];
     setCheck?: boolean;
     cesar?: string;
     status?: {

package/components/DataGrid/types.d.ts

@@ -112,8 +112,6 @@ 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;
@@ -161,6 +159,11 @@ export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> exte
      * Incluye habilitación, configuración de columnas y renderizado personalizado
      */
     cardsViewConfig?: CardsViewConfig<TRow>;
+    /**
+     * Key de la fila a la que se debe hacer scroll y highlight automáticamente.
+     * Útil cuando se agrega un nuevo elemento y se quiere enfocar en él.
+     */
+    focusOnRowKey?: TKey;
 }
 export declare const DATAGRID_TEST_ID = "m4ldatagrid";
 export declare const PREFIX_TEST_ATTRIBUTE = "data-testid";
@@ -185,7 +188,6 @@ export interface ActionsProps {
  * Props para el hook useModalDetail
  */
 export interface UseModalDetailProps<TRow> {
-    row: TRow;
     columns: readonly Column<TRow, any>[];
     viewMode: ViewMode;
     onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
@@ -249,7 +251,18 @@ export interface CardContentProps<TRow> {
     originalColumns: readonly Column<TRow, any>[];
     onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
 }
-export type DataGridOwnerState<TRow, TSummaryRow, TKey extends RowKey = RowKey> = Pick<DataGridProps<TRow, TSummaryRow, TKey>, 'visibleCustomHeader'> & {
+/**
+ * Configuración de densidad para el DataGrid.
+ * Define las alturas de filas, headers y la variante inicial.
+ */
+export interface DataGridDensityConfig {
+    rowHeights: RowHeights;
+    rowHeaderHeights: RowHeights;
+    initialRowHeightVariant: RowHeightVariants;
+}
+export type DataGridOwnerState<TRow, TSummaryRow, TKey extends RowKey = RowKey> = Pick<DataGridProps<TRow, TSummaryRow, TKey>, 'visibleCustomHeader' | 'size'> & {
+    currentRowHeightVariant?: RowHeightVariants;
+    currentRowHeight?: number;
     viewMode?: ViewMode;
     isActive?: boolean;
     hasActions?: boolean;

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" && helperMessage.length > 0 ? true : false;
+  const hasHelperIcon = typeof helperMessage === "string" ? true : false;
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const ownerState = {
     disabled,

package/components/ObjectLogs/slots/ObjectLogsSlots.js

@@ -41,11 +41,11 @@ styled(IconButton, {
   name: OBJECT_LOGS_KEY_COMPONENT,
   slot: ObjectLogsSlots.iconButtonStyled
 })(objectLogsStyles?.iconButtonStyled);
-const IconStyled = styled(Icon, {
+styled(Icon, {
   name: OBJECT_LOGS_KEY_COMPONENT,
   slot: ObjectLogsSlots.iconStyled
 })(objectLogsStyles?.iconStyled);
-const IconClickeableStyled = styled(Icon, {
+styled(Icon, {
   name: OBJECT_LOGS_KEY_COMPONENT,
   slot: ObjectLogsSlots.iconClickeableStyled
 })(objectLogsStyles?.iconClickeableStyled);
@@ -57,8 +57,6 @@ export {
   ContainerWrapperStyled as C,
   DetailDialogComponent as D,
   GridWrapperStyled as G,
-  IconClickeableStyled as I,
   StackStyled as S,
-  WindowBaseStyled as W,
-  IconStyled as a
+  WindowBaseStyled as W
 };

package/components/PaperForm/PaperForm.js

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

package/components/PaperForm/components/Header.js

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

package/components/PaperForm/styles.js

@@ -8,14 +8,11 @@ const paperFormStyles = {
    */
   paperFormRoot: ({ theme, ownerState }) => ({
     background: theme.vars.palette.background.default,
-    ...ownerState?.paperFormVariant === "standard" && {
+    ...ownerState?.paperFormVariant !== "text" && {
       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" && {
@@ -44,10 +41,8 @@ const paperFormStyles = {
     gap: theme.vars.size.baseSpacings.sp1,
     overflow: "hidden",
     padding: `${theme.vars.size.baseSpacings.sp1} ${theme.vars.size.baseSpacings.sp2}`,
-    ...ownerState?.paperFormVariant === "standard" && {
-      borderRadius: `${theme.vars.size.borderRadius.r1} ${theme.vars.size.borderRadius.r1} 0 0`,
-      background: theme.vars.palette[ownerState?.color ?? "default"].hoverOpacity
-    },
+    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,
@@ -95,7 +90,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 === "onlyContainer" ? "0px" : theme.vars.size.baseSpacings.sp3,
+    padding: ownerState?.paperFormVariant === "text" ? "0px" : theme.vars.size.baseSpacings.sp3,
     background: theme.vars.palette.background.default,
     flex: 1,
     overflow: "auto"

package/components/PaperForm/types.d.ts

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

package/components/Stepper/Stepper.styles.js

@@ -56,7 +56,6 @@ 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
@@ -153,7 +152,6 @@ const stepperStyles = {
       alignItems: "center",
       justifyContent: "center",
       flexShrink: 0,
-      zIndex: 1,
       order: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? 0 : 1,
       background: !isValidStep && ownerState?.hasBeenValidated ? theme.vars.palette.error.enabled : isCompleted && isValidStep ? ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : theme.vars.palette.primary.toneOpacity : isCurrent ? ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : theme.vars.palette.primary.enabled : ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : theme.vars.palette.default.enabled,
       borderRadius: theme.vars.size.borderRadius.r2,

package/components/Stepper/dictionary.js

@@ -5,6 +5,7 @@ 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/index.js

@@ -1,19 +1,127 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+import { u as useStepper } from "../../hooks/useStepper/index.js";
 import { e as StepAreaStyled, f as StepStyled, g as StepNameStyled } from "../../slots/StepperSlot.js";
 import { I as Indicator } from "./subcomponents/Inidicator/index.js";
-import { u as useStepArea } from "./hooks/useStepArea.js";
-import { u as useVisibileSteps } from "./hooks/useVisibileSteps.js";
+import { shallow } from "zustand/shallow";
+import { u as useDynamicValidation } from "../../hooks/useDynamicValidation/index.js";
+import { e as evaluateVisibilityStepCondition } from "../../helpers/evaluateVisibilityStepCondition/index.js";
 function StepArea() {
-  const { visibleSteps } = useVisibileSteps();
-  const { handleStepClick, visibleTitle, orientation, steps, currentStep } = useStepArea({ visibleSteps });
+  const { trigger, clearErrors } = useFormContext();
+  const formValues = useWatch();
+  const {
+    activateFieldsValidation,
+    startExternalValidation,
+    endExternalValidation
+  } = useDynamicValidation();
+  const {
+    currentStep,
+    steps,
+    visibleTitle,
+    setCurrentStep,
+    orientation,
+    setStepValidationStatus,
+    stepValidationStatus,
+    visibilityData
+  } = 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,
+      visibilityData: state.visibilityData
+    }),
+    shallow
+  );
+  const allSteps = steps;
+  const visibleSteps = useMemo(() => {
+    return steps.filter(
+      (step) => evaluateVisibilityStepCondition(step, formValues || {}, visibilityData)
+    );
+  }, [steps, formValues, visibilityData]);
   const ownerState = {
     visibleTitle,
     orientation,
     totalSteps: visibleSteps.length
   };
-  return /* @__PURE__ */ jsx(StepAreaStyled, { ownerState, children: steps.map((step, originalIndex) => {
-    const visibleStepIndex = visibleSteps.findIndex((visibleStep) => visibleStep.key === step.key);
-    const isStepVisible = visibleStepIndex !== -1;
+  const handleStepClick = 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);
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(StepAreaStyled, { ownerState, children: allSteps.map((step, originalIndex) => {
+    const isStepVisible = evaluateVisibilityStepCondition(
+      step,
+      formValues || {},
+      visibilityData
+    );
+    const visibleStepIndex = isStepVisible ? visibleSteps.findIndex((visStep) => visStep.key === step.key) : -1;
     return /* @__PURE__ */ jsxs(
       StepStyled,
       {

package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.d.ts

@@ -1,5 +1,5 @@
-import { ActionFormCancelProps } from '../../../../CommonActions/components/ActionFormCancel/types';
+import { StepperButtonProps } from '../../../types';
 /**
  * Botón modular para cancelar el proceso del Stepper
  */
-export declare function StepperCancelButton(props: ActionFormCancelProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepperCancelButton(props: StepperButtonProps): import("react/jsx-runtime").JSX.Element;