@m4l/components 9.4.22-JT03012026.beta.2 → 9.4.23

package/components/Stepper/Stepper.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, Children, isValidElement } from "react";
 import clsx from "clsx";
 import { useFlagsPresent, CommonFlags } from "@m4l/core";
-import { m as StepperRootStyled, n as ContentSectionStyled } from "./slots/StepperSlot.js";
+import { l as StepperRootStyled, m as ContentSectionStyled } from "./slots/StepperSlot.js";
 import { g as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { a as STEPPER_PREFIX_NAME } from "./constants.js";
 import { S as StepArea } from "./subcomponents/StepArea/index.js";

package/components/Stepper/Stepper.styles.js

@@ -111,47 +111,35 @@ const stepperStyles = {
    * Estilos para el nombre del paso dentro del Stepper.
    */
   stepName: ({ theme, ownerState }) => ({
-    ...ownerState?.orientation === "horizontal" && !theme.generalSettings.isMobile && {
-      minHeight: theme.vars.size.desktop.medium.action,
-      maxWidth: "120px",
-      width: "100%"
+    ...ownerState?.orientation === "horizontal" && {
+      height: theme.generalSettings.isMobile ? theme.vars.size.mobile.medium.action : theme.vars.size.desktop.medium.action
     },
     ...(ownerState?.orientation === "vertical" || theme.generalSettings.isMobile) && {
       maxWidth: "120px",
       width: "100%",
+      lineHeight: "1.2",
       marginTop: theme.vars.size.baseSpacings.sp1
     },
     alignContent: "center",
     cursor: "pointer",
+    overflow: "hidden",
     ...theme.generalSettings.isMobile ? {
       display: "none"
     } : {
-      display: ownerState?.visibleTitle ? "block" : "none"
+      display: ownerState?.visibleTitle ? "-webkit-box" : "none"
     },
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: 2,
+    textOverflow: "ellipsis",
     flex: 1,
     minWidth: 0,
+    whiteSpace: "normal",
     order: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? 1 : 0,
     "&.M4LTypography-root": {
       color: ownerState?.originalStepIndex !== void 0 && typeof ownerState.originalStepIndex === "number" ? (ownerState.currentStep ?? 0) > ownerState.originalStepIndex ? theme.vars.palette.primary.semanticText : (ownerState.currentStep ?? 0) === ownerState.originalStepIndex ? theme.vars.palette.text.primary : theme.vars.palette.text.secondary : theme.vars.palette.text.secondary,
       textAlign: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "center" : "right"
     }
   }),
-  /**
-   * Estilos para el texto del nombre del paso con truncado (line-clamp).
-   */
-  stepNameText: ({ theme, ownerState }) => ({
-    display: "-webkit-box",
-    "-webkit-box-orient": "vertical",
-    "-webkit-line-clamp": "2",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    wordBreak: "break-word",
-    whiteSpace: "normal",
-    width: "100%",
-    direction: "ltr",
-    lineHeight: 1.2,
-    textAlign: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "center" : "left"
-  }),
   /**
    * Estilos para el indicador numérico de cada paso del Stepper.
    */
@@ -240,7 +228,6 @@ const stepperStyles = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    flexShrink: 0,
     background: theme.vars.palette.primary.enabledOpacity,
     borderRadius: theme.vars.size.borderRadius["r1-5"],
     ...getSizeStyles(theme, ownerState?.size || "medium", "box", (size) => ({

package/components/Stepper/helpers/delay/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Espera un tiempo determinado antes de continuar.
+ * Útil para esperar actualizaciones de estado de React o coordinar animaciones.
+ * @param ms - Tiempo en milisegundos a esperar
+ * @returns Promise que se resuelve después del tiempo especificado
+ */
+export declare const delay: (ms: number) => Promise<void>;

package/components/Stepper/helpers/delay/index.js

@@ -0,0 +1,4 @@
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+export {
+  delay as d
+};

package/components/Stepper/helpers/focusFirstErrorField/index.d.ts

@@ -0,0 +1,10 @@
+import { FieldValues, UseFormSetFocus, UseFormGetFieldState } from 'react-hook-form';
+/**
+ * Enfoca el primer campo con error y hace scroll suave hacia él.
+ * Usa setFocus de react-hook-form que internamente tiene los refs registrados
+ * por los componentes Controller.
+ * @param fieldsToValidate - Array de nombres de campos a verificar (en orden de prioridad)
+ * @param getFieldState - Función getFieldState de useFormContext() para obtener estado actualizado
+ * @param setFocus - Función setFocus de useFormContext()
+ */
+export declare function focusFirstErrorField(fieldsToValidate: string[], getFieldState: UseFormGetFieldState<FieldValues>, setFocus: UseFormSetFocus<FieldValues>): Promise<void>;

package/components/Stepper/helpers/focusFirstErrorField/index.js

@@ -0,0 +1,24 @@
+import { d as delay } from "../delay/index.js";
+import { i as isElementInViewport } from "../isElementInViewport/index.js";
+const DELAY_FOR_ERROR_STATE_UPDATE = 0;
+const DELAY_FOR_SCROLL_AFTER_FOCUS = 50;
+async function focusFirstErrorField(fieldsToValidate, getFieldState, setFocus) {
+  await delay(DELAY_FOR_ERROR_STATE_UPDATE);
+  for (const fieldName of fieldsToValidate) {
+    const fieldState = getFieldState(fieldName);
+    if (fieldState.error) {
+      setFocus(fieldName, { shouldSelect: true });
+      await delay(DELAY_FOR_SCROLL_AFTER_FOCUS);
+      if (!isElementInViewport(document.activeElement)) {
+        document.activeElement?.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+      }
+      return;
+    }
+  }
+}
+export {
+  focusFirstErrorField as f
+};

package/components/Stepper/helpers/index.d.ts

@@ -1,8 +1,8 @@
 export { evaluateVisibilityStepCondition } from './evaluateVisibilityStepCondition';
 export { findNextVisibleValidStep } from './findNextVisibleValidStep';
 export { findPrevVisibleValidStep } from './findPrevVisibleValidStep';
+export { focusFirstErrorField } from './focusFirstErrorField';
+export { isElementInViewport } from './isElementInViewport';
 export { isLastVisibleValidStep } from './isLastVisibleValidStep';
 export { parseWatchedValues } from './parseWatchedValues';
 export { getInitialFieldValues } from './getInitialFieldValues';
-export { findStepIndexByKey } from './findStepIndexByKey';
-export { findAllVisibleStepsBefore } from './findAllVisibleStepsBefore';

package/components/Stepper/helpers/isElementInViewport/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Verifica si un elemento se ve completo en la pantalla del usuario.
+ * @param element - Elemento a verificar
+ * @returns true si el elemento está completamente visible
+ */
+export declare function isElementInViewport(element: Element | null): boolean;

package/components/Stepper/helpers/isElementInViewport/index.js

@@ -0,0 +1,14 @@
+function isElementInViewport(element) {
+  if (!element) {
+    return false;
+  }
+  const rect = element.getBoundingClientRect();
+  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+  const windowWidth = window.innerWidth || document.documentElement.clientWidth;
+  const isInsideVertically = rect.top >= 0 && rect.bottom <= windowHeight;
+  const isInsideHorizontally = rect.left >= 0 && rect.right <= windowWidth;
+  return isInsideVertically && isInsideHorizontally;
+}
+export {
+  isElementInViewport as i
+};

package/components/Stepper/hooks/useStepperActions/index.js

@@ -3,8 +3,9 @@ import { u as useStepper } from "../useStepper/index.js";
 import { useFormContext } from "react-hook-form";
 import { shallow } from "zustand/shallow";
 import { u as useDynamicValidation } from "../useDynamicValidation/index.js";
+import { f as focusFirstErrorField } from "../../helpers/focusFirstErrorField/index.js";
 function useStepperActions() {
-  const { trigger, clearErrors, getValues, reset } = useFormContext();
+  const { trigger, clearErrors, getValues, reset, setFocus, getFieldState } = useFormContext();
   const { activateFieldsValidation, clearAllValidation } = useDynamicValidation();
   const {
     nextStep,
@@ -46,6 +47,7 @@ function useStepperActions() {
       const result = await trigger(fieldsToValidate);
       if (!result) {
         activateFieldsValidation(fieldsToValidate);
+        focusFirstErrorField(fieldsToValidate, getFieldState, setFocus);
       }
       return result;
     };
@@ -77,7 +79,9 @@ function useStepperActions() {
     trigger,
     getValues,
     activateFieldsValidation,
-    clearAllValidation
+    clearAllValidation,
+    setFocus,
+    getFieldState
   ]);
   const cancelAction = useCallback(() => {
     reset();

package/components/Stepper/slots/StepperEnum.d.ts

@@ -6,7 +6,6 @@ export declare enum ContentSlots {
     stepArea = "stepArea",
     step = "step",
     stepName = "stepName",
-    stepNameText = "stepNameText",
     indicator = "indicator",
     textNumber = "textNumber"
 }

package/components/Stepper/slots/StepperEnum.js

@@ -7,7 +7,6 @@ var ContentSlots = /* @__PURE__ */ ((ContentSlots2) => {
   ContentSlots2["stepArea"] = "stepArea";
   ContentSlots2["step"] = "step";
   ContentSlots2["stepName"] = "stepName";
-  ContentSlots2["stepNameText"] = "stepNameText";
   ContentSlots2["indicator"] = "indicator";
   ContentSlots2["textNumber"] = "textNumber";
   return ContentSlots2;

package/components/Stepper/slots/StepperSlot.d.ts

@@ -22,9 +22,6 @@ export declare const StepStyled: import('@emotion/styled').StyledComponent<impor
 export declare const StepNameStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/Typography/types').TypographyProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>, "size" | "children" | "title" | "component" | "zIndex" | "id" | "disabled" | "paragraph" | "border" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontSize" | "textTransform" | "fontFamily" | "typography" | "flex" | "variant" | "color" | "dataTestid" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "className" | "style" | "classes" | "sx" | "p" | "slot" | "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" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "htmlFor" | "gutterBottom" | "noWrap" | "variantMapping" | "skeletonWidth" | "skeletonRows" | "ellipsis" | keyof import('react').RefAttributes<HTMLSpanElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-export declare const StepNameTextStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
-}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const IndicatorStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').StepperOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/Stepper/slots/StepperSlot.js

@@ -32,10 +32,6 @@ const StepNameStyled = styled(Typography, {
   name: STEPPER_PREFIX_NAME,
   slot: ContentSlots.stepName
 })(stepperStyles.stepName);
-const StepNameTextStyled = styled("div", {
-  name: STEPPER_PREFIX_NAME,
-  slot: ContentSlots.stepNameText
-})(stepperStyles.stepNameText);
 const IndicatorStyled = styled("div", {
   name: STEPPER_PREFIX_NAME,
   slot: ContentSlots.indicator
@@ -97,16 +93,15 @@ export {
   WrapperIconStyled as W,
   StepStyled as a,
   StepNameStyled as b,
-  StepNameTextStyled as c,
-  IconStyled as d,
-  WrapperTitleStyled as e,
-  TitleStyled as f,
-  ContentAreaHeaderStyled as g,
-  ContentAreaBodyStyled as h,
-  StepperFooterLeftActionsStyled as i,
-  StepperFooterRightActionsStyled as j,
-  StepperFooterSectionStyled as k,
-  StepContentStyled as l,
-  StepperRootStyled as m,
-  ContentSectionStyled as n
+  IconStyled as c,
+  WrapperTitleStyled as d,
+  TitleStyled as e,
+  ContentAreaHeaderStyled as f,
+  ContentAreaBodyStyled as g,
+  StepperFooterLeftActionsStyled as h,
+  StepperFooterRightActionsStyled as i,
+  StepperFooterSectionStyled as j,
+  StepContentStyled as k,
+  StepperRootStyled as l,
+  ContentSectionStyled as m
 };

package/components/Stepper/store/StepperContext/index.js

@@ -12,7 +12,6 @@ const StepperProvider = (props) => {
     indicatorType = "number",
     orientation = "horizontal",
     visibilityData,
-    initialStepKey,
     children
   } = props;
   const stepperStoreRef = useRef();
@@ -26,8 +25,7 @@ const StepperProvider = (props) => {
         ownerState: {},
         indicatorType,
         orientation,
-        visibilityData,
-        initialStepKey
+        visibilityData
       },
       storeDevtoolsEnabled
     );

package/components/Stepper/store/StepperStore/index.js

@@ -2,9 +2,6 @@ import { createStore } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 import { S as STEPPER_STORE_ID } from "../../constants.js";
-import { f as findStepIndexByKey } from "../../helpers/findStepIndexByKey/index.js";
-import { e as evaluateVisibilityStepCondition } from "../../helpers/evaluateVisibilityStepCondition/index.js";
-import { f as findAllVisibleStepsBefore } from "../../helpers/findAllVisibleStepsBefore/index.js";
 import { f as findNextVisibleValidStep } from "../../helpers/findNextVisibleValidStep/index.js";
 import { f as findPrevVisibleValidStep } from "../../helpers/findPrevVisibleValidStep/index.js";
 const createDevtools = (immerMiddlewere, config) => {
@@ -19,7 +16,6 @@ const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
     currentStep: 0,
     stepValidationStatus: {},
     isValidating: false,
-    initialStepKeyApplied: false,
     ...initProps
   };
   return createStore(
@@ -132,7 +128,6 @@ const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
             set((state) => {
               state.stepValidationStatus = {};
               state.isValidating = false;
-              state.initialStepKeyApplied = false;
               const firstVisibleStepIndex = findNextVisibleValidStep(
                 -1,
                 // Comenzar desde -1 para encontrar el primer step visible
@@ -142,71 +137,6 @@ const createStepperStore = (initProps, storeDevtoolsEnabled = false) => {
               );
               state.currentStep = firstVisibleStepIndex < state.steps.length ? firstVisibleStepIndex : 0;
             });
-          },
-          /**
-           * applyInitialStepKey - Valida los steps anteriores y navega al step indicado por initialStepKey.
-           * Si algún step anterior tiene errores, navega al primer step con errores.
-           */
-          applyInitialStepKey: async (validateFieldsFn, formData) => {
-            const state = get();
-            const { initialStepKey, steps, visibilityData, initialStepKeyApplied } = state;
-            if (!initialStepKey || initialStepKey.trim() === "" || initialStepKeyApplied) {
-              return;
-            }
-            const initialStepIndex = findStepIndexByKey(initialStepKey, steps);
-            if (initialStepIndex === -1) {
-              const availableKeys = steps.map((s) => s.key).join(", ");
-              throw new Error(
-                `Stepper: initialStepKey "${initialStepKey}" no corresponde a ningún step. Keys disponibles: [${availableKeys}]`
-              );
-            }
-            const initialStep = steps[initialStepIndex];
-            if (!evaluateVisibilityStepCondition(initialStep, formData, visibilityData)) {
-              console.warn(
-                `Stepper: initialStepKey "${initialStepKey}" apunta a un step oculto. Iniciando en step 0.`
-              );
-              set((draft) => {
-                draft.initialStepKeyApplied = true;
-              });
-              return;
-            }
-            if (initialStepIndex === 0) {
-              set((draft) => {
-                draft.initialStepKeyApplied = true;
-              });
-              return;
-            }
-            const previousVisibleSteps = findAllVisibleStepsBefore(
-              initialStepIndex,
-              steps,
-              formData,
-              visibilityData
-            );
-            for (const { step, originalIndex } of previousVisibleSteps) {
-              const fieldsToValidate = step.validationFields || [];
-              if (fieldsToValidate.length === 0) {
-                set((draft) => {
-                  draft.stepValidationStatus[originalIndex] = true;
-                });
-                continue;
-              }
-              const isValid = await validateFieldsFn(fieldsToValidate);
-              if (!isValid) {
-                set((draft) => {
-                  draft.currentStep = originalIndex;
-                  draft.stepValidationStatus[originalIndex] = false;
-                  draft.initialStepKeyApplied = true;
-                });
-                return;
-              }
-              set((draft) => {
-                draft.stepValidationStatus[originalIndex] = true;
-              });
-            }
-            set((draft) => {
-              draft.currentStep = initialStepIndex;
-              draft.initialStepKeyApplied = true;
-            });
           }
         }
       })),

package/components/Stepper/store/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Step, StepperOwnerState, StepperProps } from '../types';
-export interface StepperState extends Pick<StepperProps, 'storeId' | 'visibleTitle' | 'steps' | 'indicatorType' | 'orientation' | 'size' | 'visibilityData' | 'initialStepKey'> {
+export interface StepperState extends Pick<StepperProps, 'storeId' | 'visibleTitle' | 'steps' | 'indicatorType' | 'orientation' | 'size' | 'visibilityData'> {
     /**
      *  "ownerState" estado a nivel de clases del componente
      */
@@ -18,10 +18,6 @@ export interface StepperState extends Pick<StepperProps, 'storeId' | 'visibleTit
      * "isValidating" indica si el stepper está en proceso de validación
      */
     isValidating: boolean;
-    /**
-     * Indica si initialStepKey ya fue aplicado. Previene re-aplicación después de navegación.
-     */
-    initialStepKeyApplied: boolean;
 }
 export interface StepperStateWithActions extends StepperState {
     actions: {
@@ -59,15 +55,9 @@ export interface StepperStateWithActions extends StepperState {
          * resetStepper - Resetea el Stepper a su estado inicial
          */
         resetStepper: () => void;
-        /**
-         * Aplica initialStepKey validando los steps anteriores.
-         * @param validateFieldsFn - Función que valida campos específicos usando RHF trigger()
-         * @param formData - Valores actuales del formulario
-         */
-        applyInitialStepKey: (validateFieldsFn: (fields: string[]) => Promise<boolean>, formData: Record<string, any>) => Promise<void>;
     };
 }
 export interface StepperContextProps extends StepperProps {
     children: ReactNode;
 }
-export type InitialStoreProps = Pick<StepperState, 'ownerState' | 'storeId' | 'steps' | 'visibleTitle' | 'indicatorType' | 'orientation' | 'visibilityData' | 'initialStepKey'>;
+export type InitialStoreProps = Pick<StepperState, 'ownerState' | 'storeId' | 'steps' | 'visibleTitle' | 'indicatorType' | 'orientation' | 'visibilityData'>;

package/components/Stepper/subcomponents/ContentArea/index.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { u as useStepper } from "../../hooks/useStepper/index.js";
-import { u as useInitialStepKey } from "../../hooks/useInitialStepKey/index.js";
-import { C as ContentAreaStyled, g as ContentAreaHeaderStyled, h as ContentAreaBodyStyled } from "../../slots/StepperSlot.js";
+import { C as ContentAreaStyled, f as ContentAreaHeaderStyled, g as ContentAreaBodyStyled } from "../../slots/StepperSlot.js";
 import { W as WrapperIcon } from "./subcomponents/WrapperIcon/index.js";
 import { W as WrapperTitle } from "./subcomponents/WrapperTitle/index.js";
 function ContentArea(props) {
@@ -9,7 +8,6 @@ function ContentArea(props) {
   const { orientation } = useStepper((state) => ({
     orientation: state.orientation
   }));
-  useInitialStepKey();
   const ownerState = {
     orientation
   };

package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperIcon/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { W as WrapperIconStyled, d as IconStyled } from "../../../../slots/StepperSlot.js";
+import { W as WrapperIconStyled, c as IconStyled } from "../../../../slots/StepperSlot.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { u as useStepper } from "../../../../hooks/useStepper/index.js";
 import { useEnvironment } from "@m4l/core";

package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperTitle/index.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { u as useStepper } from "../../../../hooks/useStepper/index.js";
-import { e as WrapperTitleStyled, f as TitleStyled, D as DescriptionStyled } from "../../../../slots/StepperSlot.js";
+import { d as WrapperTitleStyled, e as TitleStyled, D as DescriptionStyled } from "../../../../slots/StepperSlot.js";
 function WrapperTitle() {
   const { steps, currentStep } = useStepper((state) => ({
     steps: state.steps,

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

@@ -2,10 +2,11 @@ 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 { f as focusFirstErrorField } from "../../../helpers/focusFirstErrorField/index.js";
 import { d as deepShallow } from "../../../../../utils/deepShallow.js";
 function useStepArea(props) {
   const { visibleSteps } = props;
-  const { trigger, clearErrors } = useFormContext();
+  const { trigger, clearErrors, setFocus, getFieldState } = useFormContext();
   const {
     activateFieldsValidation,
     startExternalValidation,
@@ -59,6 +60,7 @@ function useStepArea(props) {
           setCurrentStep(stepOriginalIndex);
           setStepValidationStatus(stepOriginalIndex, false);
           activateFieldsValidation(step.validationFields || []);
+          focusFirstErrorField(step.validationFields || [], getFieldState, setFocus);
           return;
         }
         setStepValidationStatus(stepOriginalIndex, true);
@@ -74,6 +76,7 @@ function useStepArea(props) {
       if (!isCurrentValid) {
         setStepValidationStatus(currentStepOriginalIndex, false);
         activateFieldsValidation(currentStepData.validationFields || []);
+        focusFirstErrorField(currentStepData.validationFields || [], getFieldState, setFocus);
         return;
       }
       setStepValidationStatus(currentStepOriginalIndex, true);
@@ -97,7 +100,7 @@ function useStepArea(props) {
         }
       }
     }
-  }, [visibleSteps, steps, setCurrentStep, currentStep, startExternalValidation, trigger, endExternalValidation, setStepValidationStatus, activateFieldsValidation, stepValidationStatus, clearErrors]);
+  }, [visibleSteps, steps, setCurrentStep, currentStep, startExternalValidation, trigger, endExternalValidation, setStepValidationStatus, activateFieldsValidation, stepValidationStatus, clearErrors, getFieldState, setFocus]);
   return useMemo(() => ({
     visibleTitle,
     orientation,

package/components/Stepper/subcomponents/StepArea/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { S as StepAreaStyled, a as StepStyled, b as StepNameStyled, c as StepNameTextStyled } from "../../slots/StepperSlot.js";
+import { S as StepAreaStyled, a as StepStyled, b 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";
@@ -39,7 +39,7 @@ function StepArea() {
                 originalStepIndex: originalIndex,
                 isStepVisible
               },
-              children: /* @__PURE__ */ jsx(StepNameTextStyled, { ownerState: { orientation }, children: step.title })
+              children: step.title
             }
           ),
           /* @__PURE__ */ jsx(

package/components/Stepper/subcomponents/StepperContent/subcomponents/Step/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { l as StepContentStyled } from "../../../../slots/StepperSlot.js";
+import { k as StepContentStyled } from "../../../../slots/StepperSlot.js";
 import { u as useIsStepVisible } from "./hooks/useIsStepVisible.js";
 function Step(props) {
   const { stepKey, children } = props;

package/components/Stepper/subcomponents/StepperFooter/index.js

@@ -1,6 +1,6 @@
 import { jsxs } from "react/jsx-runtime";
 import { useMemo, Children, isValidElement } from "react";
-import { k as StepperFooterSectionStyled } from "../../slots/StepperSlot.js";
+import { j as StepperFooterSectionStyled } from "../../slots/StepperSlot.js";
 import { S as StepperFooterLeftActions } from "./subcomponents/StepperFooterLeftActions/index.js";
 import { S as StepperFooterRightActions } from "./subcomponents/StepperFooterRightActions/index.js";
 function StepperFooter(props) {

package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterLeftActions/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { i as StepperFooterLeftActionsStyled } from "../../../../slots/StepperSlot.js";
+import { h as StepperFooterLeftActionsStyled } from "../../../../slots/StepperSlot.js";
 function StepperFooterLeftActions(props) {
   const { children } = props;
   return /* @__PURE__ */ jsx(StepperFooterLeftActionsStyled, { children });

package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterRightActions/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect, useMemo } from "react";
 import { u as useIsLastVisibleValidStep } from "../../../../hooks/useIsLastVisibleValidStep/index.js";
-import { j as StepperFooterRightActionsStyled } from "../../../../slots/StepperSlot.js";
+import { i as StepperFooterRightActionsStyled } from "../../../../slots/StepperSlot.js";
 import { S as StepperSubmitButton } from "../../../StepperButtons/StepperSubmitButton/index.js";
 import { S as StepperNextButton } from "../../../StepperButtons/StepperNextButton/index.js";
 function StepperFooterRightActions(props) {

package/components/Stepper/types.d.ts

@@ -83,13 +83,6 @@ export interface StepperProps {
      * Clase personalizada para el Stepper.
      */
     className?: string;
-    /**
-     * Key del step en el que se desea iniciar el Stepper.
-     * Si se proporciona, valida los steps anteriores antes de navegar al step indicado.
-     * Si algún step anterior tiene errores, inicia en el primer step con errores.
-     * Lanza Error si la key no corresponde a ningún step.
-     */
-    initialStepKey?: string;
 }
 /**
  * Props del StepperContent
@@ -179,20 +172,5 @@ export interface StepperOwnerState extends Pick<StepperProps, 'visibleTitle'>, R
     stepValidationStatus?: Record<number, boolean>;
     isStepVisible?: boolean;
 }
-/**
- * Representa un step junto con su posición original en el array de steps.
- * Se usa para mantener la referencia al índice original después de filtrar steps ocultos.
- */
-export interface StepWithIndex {
-    /**
-     * El objeto Step con toda su configuración (key, title, validationFields, etc.)
-     */
-    step: Step;
-    /**
-     * El índice del step en el array original de steps.
-     * Es necesario para actualizar correctamente el stepValidationStatus del store.
-     */
-    originalIndex: number;
-}
 export type StepperSlotsType = StepperSlots | ContentSlots | ContentAreaSlots | StepperFooterSlots;
 export type StepperStyles = M4LOverridesStyleRules<StepperSlotsType, typeof STEPPER_PREFIX_NAME, Theme>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.4.22-JT03012026.beta.2",
+  "version": "9.4.23",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

package/components/Stepper/helpers/findAllVisibleStepsBefore/index.d.ts

@@ -1,19 +0,0 @@
-import { FormData, Step, StepWithIndex, VisibilityData } from '../../types';
-/**
- * Obtiene todos los steps visibles que están antes de un step específico.
- *
- * Esta función es utilizada por la feature `initialStepKey` para determinar
- * qué steps deben ser validados antes de poder navegar al step inicial deseado.
- * @example
- * // Si tenemos steps: [A, B (oculto), C, D] y queremos iniciar en D (índice 3)
- * // Esta función retornará: [{ step: A, originalIndex: 0 }, { step: C, originalIndex: 2 }]
- * // El step B se omite porque está oculto por su visibilityCondition
- * @param initialStepIndex - El índice del step donde se desea iniciar.
- *                           Los steps en este índice y posteriores NO se incluyen en el resultado.
- * @param steps - Array completo de steps configurados en el Stepper.
- * @param formData - Valores actuales del formulario para evaluar las condiciones de visibilidad.
- * @param visibilityData - Datos adicionales para evaluar visibilidad (ej: objectId, accountId).
- * @returns Array de steps visibles con su índice original, ordenados de menor a mayor índice.
- *          Retorna array vacío si initialStepIndex es 0 o no hay steps visibles antes.
- */
-export declare const findAllVisibleStepsBefore: (initialStepIndex: number, steps: Step[], formData?: FormData, visibilityData?: VisibilityData) => StepWithIndex[];

package/components/Stepper/helpers/findAllVisibleStepsBefore/index.js

@@ -1,22 +0,0 @@
-import { e as evaluateVisibilityStepCondition } from "../evaluateVisibilityStepCondition/index.js";
-const findAllVisibleStepsBefore = (initialStepIndex, steps, formData, visibilityData) => {
-  const visibleStepsBefore = [];
-  for (let currentIndex = 0; currentIndex < initialStepIndex && currentIndex < steps.length; currentIndex++) {
-    const currentStep = steps[currentIndex];
-    const isStepVisible = evaluateVisibilityStepCondition(
-      currentStep,
-      formData || {},
-      visibilityData
-    );
-    if (isStepVisible) {
-      visibleStepsBefore.push({
-        step: currentStep,
-        originalIndex: currentIndex
-      });
-    }
-  }
-  return visibleStepsBefore;
-};
-export {
-  findAllVisibleStepsBefore as f
-};

package/components/Stepper/helpers/findStepIndexByKey/index.d.ts

@@ -1,8 +0,0 @@
-import { Step } from '../../types';
-/**
- * findStepIndexByKey - Encuentra el índice de un step por su key
- * @param stepKey - La key del step a buscar
- * @param steps - Array de steps
- * @returns El índice del step, o -1 si no se encuentra
- */
-export declare const findStepIndexByKey: (stepKey: string, steps: Step[]) => number;

package/components/Stepper/helpers/findStepIndexByKey/index.js

@@ -1,6 +0,0 @@
-const findStepIndexByKey = (stepKey, steps) => {
-  return steps.findIndex((step) => step.key === stepKey);
-};
-export {
-  findStepIndexByKey as f
-};

package/components/Stepper/hooks/useInitialStepKey/index.d.ts

@@ -1,5 +0,0 @@
-/**
- * Hook que aplica initialStepKey cuando el formulario está en estado 'ready'.
- * Valida los steps anteriores y navega al step inicial o al primer step con errores.
- */
-export declare function useInitialStepKey(): void;

package/components/Stepper/hooks/useInitialStepKey/index.js

@@ -1,44 +0,0 @@
-import { useRef, useEffect } from "react";
-import { useFormContext, useWatch } from "react-hook-form";
-import { shallow } from "zustand/shallow";
-import { u as useStepper } from "../useStepper/index.js";
-function useInitialStepKey() {
-  const { trigger, getValues } = useFormContext();
-  const hasAttemptedRef = useRef(false);
-  const statusLoad = useWatch({ name: "statusLoad" });
-  const { initialStepKey, initialStepKeyApplied, applyInitialStepKey } = useStepper(
-    (state) => ({
-      initialStepKey: state.initialStepKey,
-      initialStepKeyApplied: state.initialStepKeyApplied,
-      applyInitialStepKey: state.actions.applyInitialStepKey
-    }),
-    shallow
-  );
-  useEffect(() => {
-    if (statusLoad !== "ready" || !initialStepKey || initialStepKeyApplied || hasAttemptedRef.current) {
-      return;
-    }
-    hasAttemptedRef.current = true;
-    const executeInitialStepKey = async () => {
-      const validateFieldsFn = async (fields) => {
-        if (fields.length === 0) {
-          return true;
-        }
-        return trigger(fields);
-      };
-      const formData = getValues();
-      await applyInitialStepKey(validateFieldsFn, formData);
-    };
-    executeInitialStepKey();
-  }, [
-    statusLoad,
-    initialStepKey,
-    initialStepKeyApplied,
-    applyInitialStepKey,
-    trigger,
-    getValues
-  ]);
-}
-export {
-  useInitialStepKey as u
-};