@m4l/components 9.67.2 → 9.68.0

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

@@ -7,6 +7,9 @@ export declare function useStepArea(props: {
 }): {
     visibleTitle: boolean | undefined;
     orientation: import('../../../types').Orientation | undefined;
+    indicatorType: import('../../../types').IndicatorType | undefined;
+    size: import('@m4l/styles').Sizes | undefined;
+    stepValidationStatus: Record<number, boolean>;
     handleStepClick: (targetIndex: number) => Promise<void>;
     steps: Step[];
     currentStep: number;

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

@@ -1 +1 @@
-{"version":3,"file":"useStepArea.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/components/src/components/Stepper/subcomponents/StepArea/hooks/useStepArea.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,IAAI,EAAG,MAAM,gBAAgB,CAAC;AAEvC;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE;IAAE,YAAY,EAAE,IAAI,EAAE,CAAA;CAAE;;;mCAuCA,MAAM;;;EA6HhE"}
+{"version":3,"file":"useStepArea.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/components/src/components/Stepper/subcomponents/StepArea/hooks/useStepArea.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,IAAI,EAAG,MAAM,gBAAgB,CAAC;AAEvC;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE;IAAE,YAAY,EAAE,IAAI,EAAE,CAAA;CAAE;;;;;;mCA0CA,MAAM;;;EA8HhE"}

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

@@ -1,90 +1,95 @@
-import { useCallback as w, useMemo as E } from "react";
-import { useFormContext as O } from "react-hook-form";
-import { useStepper as h } from "../../../hooks/useStepper/index.js";
-import { useDynamicValidation as D } from "../../../hooks/useDynamicValidation/index.js";
+import { useCallback as z, useMemo as D } from "react";
+import { useFormContext as A } from "react-hook-form";
+import { useStepper as M } from "../../../hooks/useStepper/index.js";
+import { useDynamicValidation as N } from "../../../hooks/useDynamicValidation/index.js";
 import { focusFirstErrorField as b } from "../../../helpers/focusFirstErrorField/index.js";
-import { deepShallow as A } from "../../../../../utils/deepShallow.js";
-function H(I) {
-  const { visibleSteps: r } = I, { trigger: u, clearErrors: S, setFocus: f, getFieldState: m } = O(), {
-    activateFieldsValidation: F,
-    startExternalValidation: k,
-    endExternalValidation: y
-  } = D(), {
-    currentStep: p,
+import { deepShallow as j } from "../../../../../utils/deepShallow.js";
+function Q(I) {
+  const { visibleSteps: r } = I, { trigger: c, clearErrors: u, setFocus: S, getFieldState: f } = A(), {
+    activateFieldsValidation: m,
+    startExternalValidation: y,
+    endExternalValidation: F
+  } = N(), {
+    currentStep: l,
     steps: n,
     visibleTitle: v,
-    setCurrentStep: c,
-    orientation: g,
+    setCurrentStep: d,
+    indicatorType: g,
+    size: x,
+    orientation: C,
     setStepValidationStatus: s,
-    stepValidationStatus: x
-  } = h(
+    stepValidationStatus: p
+  } = M(
     (t) => ({
       currentStep: t.currentStep,
       steps: t.steps,
       visibleTitle: t.visibleTitle,
       setCurrentStep: t.actions.setCurrentStep,
       indicatorType: t.indicatorType,
+      size: t.size,
       orientation: t.orientation,
       setStepValidationStatus: t.actions.setStepValidationStatus,
       stepValidationStatus: t.stepValidationStatus
     }),
-    A
-  ), C = w(async (t) => {
+    j
+  ), T = z(async (t) => {
     const a = r.findIndex(
-      (e) => e.key === n[p].key
+      (i) => i.key === n[l].key
     );
     if (t === a)
       return;
-    const T = t > a, V = n.findIndex(
-      (e) => e.key === r[t].key
+    const w = t > a, k = n.findIndex(
+      (i) => i.key === r[t].key
     );
-    if (!T) {
-      c(V);
+    if (!w) {
+      d(k);
       return;
     }
     if (t > a + 1)
-      for (let e = a; e < t; e++) {
-        const i = r[e], o = n.findIndex((d) => d.key === i.key);
-        k();
-        const l = await u(i.validationFields);
-        if (y(), !l) {
-          c(o), s(o, !1), F(i.validationFields || []), b(i.validationFields || [], m, f);
+      for (let i = a; i < t; i++) {
+        const e = r[i], o = n.findIndex((h) => h.key === e.key);
+        y();
+        const V = await c(e.validationFields);
+        if (F(), !V) {
+          d(o), s(o, !1), m(e.validationFields || []), b(e.validationFields || [], f, S);
           return;
         }
         s(o, !0);
       }
     else {
-      const e = r[a], i = n.findIndex(
-        (l) => l.key === e.key
+      const i = r[a], e = n.findIndex(
+        (V) => V.key === i.key
       );
-      k();
-      const o = await u(e.validationFields);
-      if (y(), !o) {
-        s(i, !1), F(e.validationFields || []), b(e.validationFields || [], m, f);
+      y();
+      const o = await c(i.validationFields);
+      if (F(), !o) {
+        s(e, !1), m(i.validationFields || []), b(i.validationFields || [], f, S);
         return;
       }
-      s(i, !0);
+      s(e, !0);
     }
-    if (c(V), T) {
-      const e = r[a], i = n.findIndex(
-        (l) => l.key === e.key
-      );
-      if (x[i] !== !1) {
-        const d = r[t].validationFields || [];
-        d.length > 0 && (S(d), setTimeout(() => {
-          S(d), s(V, !0);
-        }, 100));
-      }
+    d(k);
+    const E = r[a], O = n.findIndex(
+      (i) => i.key === E.key
+    );
+    if (p[O] !== !1) {
+      const e = r[t].validationFields || [];
+      e.length > 0 && (u(e), setTimeout(() => {
+        u(e), s(k, !0);
+      }, 100));
     }
-  }, [r, n, c, p, k, u, y, s, F, x, S, m, f]);
-  return E(() => ({
+  }, [r, n, d, l, y, c, F, s, m, p, u, f, S]);
+  return D(() => ({
     visibleTitle: v,
-    orientation: g,
-    handleStepClick: C,
+    orientation: C,
+    indicatorType: g,
+    size: x,
+    stepValidationStatus: p,
+    handleStepClick: T,
     steps: n,
-    currentStep: p
-  }), [v, g, C, n, p]);
+    currentStep: l
+  }), [v, C, g, x, p, T, n, l]);
 }
 export {
-  H as useStepArea
+  Q as useStepArea
 };

package/components/Stepper/subcomponents/StepArea/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/Stepper/subcomponents/StepArea/index.tsx"],"names":[],"mappings":"AAYA;;;;GAIG;AACH,wBAAgB,QAAQ,qDA8DvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/Stepper/subcomponents/StepArea/index.tsx"],"names":[],"mappings":"AAcA;;;;GAIG;AACH,wBAAgB,QAAQ,qDAgFvB"}

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

@@ -1,59 +1,66 @@
-import { jsx as r, jsxs as m } from "@emotion/react/jsx-runtime";
-import { StepAreaStyled as y, StepStyled as b, StepNameStyled as f, StepNameTextStyled as h } from "../../slots/StepperSlot.js";
-import { Indicator as u } from "./subcomponents/Inidicator/index.js";
-import { useStepArea as x } from "./hooks/useStepArea.js";
-import { useVisibileSteps as k } from "./hooks/useVisibileSteps.js";
-function j() {
-  const { visibleSteps: t } = k(), { handleStepClick: a, visibleTitle: s, orientation: S, steps: d, currentStep: n } = x({ visibleSteps: t }), o = {
-    visibleTitle: s,
-    orientation: S,
-    totalSteps: t.length
+import { jsx as n, jsxs as x } from "@emotion/react/jsx-runtime";
+import { StepAreaStyled as w, StepStyled as z, StepNameStyled as T, StepNameTextStyled as V } from "../../slots/StepperSlot.js";
+import { Indicator as A } from "./subcomponents/Inidicator/index.js";
+import { useIsMobile as I } from "@m4l/graphics";
+import { useStepArea as N } from "./hooks/useStepArea.js";
+import { useVisibileSteps as j } from "./hooks/useVisibileSteps.js";
+import { useComponentSize as D } from "../../../../hooks/useComponentSize/index.js";
+function G() {
+  const p = I(), { visibleSteps: o } = j(), { handleStepClick: c, visibleTitle: l, orientation: r, steps: d, currentStep: t, indicatorType: m, size: u, stepValidationStatus: y } = N({ visibleSteps: o }), { currentSize: b } = D(u), f = r === "vertical" && !p, k = r !== "vertical" && !p, a = {
+    visibleTitle: l,
+    orientation: r,
+    totalSteps: o.length,
+    // Let the step styles know the real indicator size (it changes with the marker type and the error state).
+    indicatorType: m,
+    size: b,
+    stepValidationStatus: y
   };
-  return /* @__PURE__ */ r(y, { ownerState: o, children: d.map((i, l) => {
-    const e = t.findIndex((c) => c.key === i.key), p = e !== -1;
-    return /* @__PURE__ */ m(
-      b,
+  return /* @__PURE__ */ n(w, { ownerState: a, children: d.map((s, e) => {
+    const i = o.findIndex((C) => C.key === s.key), S = i !== -1, h = t > e, v = p ? "bodyStandard" : f && t === e || k && h ? "microStandard" : "microSlim";
+    return /* @__PURE__ */ x(
+      z,
       {
         role: "button",
-        onClick: () => p ? a(e) : void 0,
+        onClick: () => S ? c(i) : void 0,
         ownerState: {
-          ...o,
-          currentStep: n,
-          step: e,
+          ...a,
+          currentStep: t,
+          step: i,
           // Usa el índice en la secuencia visible
-          isStepVisible: p
+          originalStepIndex: e,
+          isStepVisible: S
         },
-        "data-testid": `stepper-step-${i.key}`,
+        "data-testid": `stepper-step-${s.key}`,
         children: [
-          s && /* @__PURE__ */ r(
-            f,
+          l && /* @__PURE__ */ n(
+            T,
             {
-              variant: "bodyStandard",
+              variant: v,
               ownerState: {
-                ...o,
-                currentStep: n,
-                step: e,
-                originalStepIndex: l,
-                isStepVisible: p
+                ...a,
+                currentStep: t,
+                step: i,
+                originalStepIndex: e,
+                isStepVisible: S
               },
-              children: /* @__PURE__ */ r(h, { ownerState: { orientation: S }, children: i.title })
+              children: /* @__PURE__ */ n(V, { ownerState: { orientation: r }, children: s.title })
             }
           ),
-          /* @__PURE__ */ r(
-            u,
+          /* @__PURE__ */ n(
+            A,
             {
-              currentStep: n,
-              step: e,
-              totalSteps: t.length,
-              originalStepIndex: l
+              currentStep: t,
+              step: i,
+              totalSteps: o.length,
+              originalStepIndex: e
             }
           )
         ]
       },
-      i.key
+      s.key
     );
   }) });
 }
 export {
-  j as StepArea
+  G as StepArea
 };

package/components/Stepper/subcomponents/StepArea/subcomponents/Inidicator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/Stepper/subcomponents/StepArea/subcomponents/Inidicator/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AASnD;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,oDAwG9C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/Stepper/subcomponents/StepArea/subcomponents/Inidicator/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AASnD;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,oDAuI9C"}

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

@@ -1,77 +1,94 @@
-import { jsx as i } from "@emotion/react/jsx-runtime";
-import { useMemo as y } from "react";
-import { IndicatorStyled as h, TextNumberStyled as I } from "../../../../slots/StepperSlot.js";
-import { useStepper as V } from "../../../../hooks/useStepper/index.js";
-import { Icon as d } from "@m4l/base";
+import { jsx as o } from "@emotion/react/jsx-runtime";
+import { useMemo as h } from "react";
+import { IndicatorStyled as w, TextNumberStyled as M } from "../../../../slots/StepperSlot.js";
+import { useStepper as B } from "../../../../hooks/useStepper/index.js";
+import { Icon as u, Tooltip as O } from "@m4l/base";
 import { pathIcons as r } from "../../../../icons.js";
-import { useIsMobile as C } from "@m4l/graphics";
-import { shallow as M } from "zustand/shallow";
-import { useComponentSize as w } from "../../../../../../hooks/useComponentSize/index.js";
-function G(z) {
-  const { step: n, currentStep: e, totalSteps: v, originalStepIndex: t } = z, { orientation: x, size: T, indicatorType: a, stepValidationStatus: s } = V(
-    (o) => ({
-      orientation: o.orientation,
-      size: o.size,
-      indicatorType: o.indicatorType,
-      stepValidationStatus: o.stepValidationStatus
+import { useIsMobile as j } from "@m4l/graphics";
+import { shallow as k } from "zustand/shallow";
+import { useComponentSize as E } from "../../../../../../hooks/useComponentSize/index.js";
+function Q(v) {
+  const { step: l, currentStep: i, totalSteps: x, originalStepIndex: t } = v, {
+    orientation: z,
+    size: I,
+    indicatorType: n,
+    stepValidationStatus: a,
+    steps: V,
+    visibleTitle: S
+  } = B(
+    (e) => ({
+      orientation: e.orientation,
+      size: e.size,
+      indicatorType: e.indicatorType,
+      stepValidationStatus: e.stepValidationStatus,
+      steps: e.steps,
+      visibleTitle: e.visibleTitle
     }),
-    M
-  ), { currentSize: b } = w(T), l = C(), m = y(() => l ? "dot" : a, [l, a]), { isCompleted: p, isValidStep: c, hasBeenValidated: u } = y(() => {
-    const o = e > t, f = s[t];
+    k
+  ), { currentSize: C } = E(I), s = j(), c = h(() => s ? "dot" : n, [s, n]), { isCompleted: T, isValidStep: d, hasBeenValidated: f } = h(() => {
+    const e = i > t, y = a[t];
     return {
-      isCompleted: o,
-      isValidStep: f === !0,
-      hasBeenValidated: f !== void 0
+      isCompleted: e,
+      isValidStep: y === !0,
+      hasBeenValidated: y !== void 0
     };
-  }, [e, t, s]), S = {
-    size: b,
-    currentStep: e,
-    step: n,
-    totalSteps: v,
-    orientation: x,
-    indicatorType: a,
-    stepValidationStatus: s,
+  }, [i, t, a]), p = {
+    size: C,
+    currentStep: i,
+    step: l,
+    totalSteps: x,
+    orientation: z,
+    indicatorType: n,
+    visibleTitle: S,
+    stepValidationStatus: a,
     originalStepIndex: t,
-    isCompleted: p,
-    isCurrent: e === t,
-    isValidStep: c,
-    hasBeenValidated: u
-  };
-  return /* @__PURE__ */ i(h, { ownerState: S, children: u && !c ? (
+    isCompleted: T,
+    isCurrent: i === t,
+    isValidStep: d,
+    hasBeenValidated: f
+  }, m = V[t]?.title, g = !S && !s && typeof m == "string" && m.length > 0, b = /* @__PURE__ */ o(w, { ownerState: p, children: f && !d ? (
     // Mostrar error solo si ha sido validado y es inválido
-    /* @__PURE__ */ i(
-      d,
+    /* @__PURE__ */ o(
+      u,
       {
         src: r.circleError,
         size: "small",
         color: "error.contrastText"
       }
     )
-  ) : p && c ? (
+  ) : T && d ? (
     // Mostrar completado solo si está completado Y es válido
-    /* @__PURE__ */ i(
-      d,
+    /* @__PURE__ */ o(
+      u,
       {
-        src: m === "number" ? r.circleCheck : r.dotOutline,
+        src: c === "number" ? r.circleCheck : r.dotOutline,
         size: "small",
         color: "primary.semanticText"
       }
     )
   ) : (
     // Mostrar estado normal (número o dot) para pasos no validados o actuales
-    /* @__PURE__ */ i(I, { variant: "bodyStandard", ownerState: S, children: m === "number" ? (
-      // Solo mostrar número si el step es visible (step >= 0)
-      n >= 0 ? n + 1 : ""
-    ) : /* @__PURE__ */ i(
-      d,
+    /* @__PURE__ */ o(
+      M,
       {
-        src: e === t ? r.dotSelected : r.dotOutline,
-        size: "small",
-        color: e === t ? "primary.semanticText" : "text.disabled"
+        variant: c === "number" ? p.isCurrent ? "microStandard" : "microSlim" : "bodyStandard",
+        ownerState: p,
+        children: c === "number" ? (
+          // Solo mostrar número si el step es visible (step >= 0)
+          l >= 0 ? l + 1 : ""
+        ) : /* @__PURE__ */ o(
+          u,
+          {
+            src: i === t ? r.dotSelected : r.dotOutline,
+            size: "small",
+            color: n === "dot" && !s ? i === t ? "primary.enabled" : "text.secondary" : i === t ? "primary.semanticText" : "text.disabled"
+          }
+        )
       }
-    ) })
+    )
   ) });
+  return g ? /* @__PURE__ */ o(O, { title: m, children: b }) : b;
 }
 export {
-  G as Indicator
+  Q as Indicator
 };

package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "@emotion/react/jsx-runtime";
-import { DICTIONARY as p } from "../../../dictionary.js";
-import { useModuleDictionary as c } from "@m4l/core";
+import { DICTIONARY as c } from "../../../dictionary.js";
+import { useModuleDictionary as p } from "@m4l/core";
 import { useIsMobile as u } from "@m4l/graphics";
 import { pathIcons as l } from "../../../icons.js";
 import { useFormContext as b } from "react-hook-form";
@@ -8,13 +8,13 @@ import { IconButton as f } from "../../../../extended/mui/IconButton/IconButton.
 import { CircularProgress as d } from "../../../../extended/mui/CircularProgress/CircularProgress.js";
 import { LoadingButton as I } from "../../../../extended/mui/LoadingButton/LoadingButton.js";
 function x(i) {
-  const { label: e, forceIsMobile: o, ...m } = i, { getLabel: n } = c(), s = u(), a = o !== void 0 ? o : s, { formState: { isSubmitting: r } } = b();
+  const { label: e, forceIsMobile: o, ...m } = i, { getLabel: n } = p(), s = u(), a = o !== void 0 ? o : s, { formState: { isSubmitting: r } } = b();
   return a ? /* @__PURE__ */ t(
     f,
     {
       type: "submit",
       icon: r ? /* @__PURE__ */ t(d, { color: "default" }) : l.circleCheck,
-      "data-testid": "stepper-prev-button",
+      "data-testid": "stepper-submit-button",
       variant: "contained",
       color: "primary"
     }
@@ -22,7 +22,7 @@ function x(i) {
     I,
     {
       type: "submit",
-      label: e || n(p.LABEL_SUBMIT_BUTTON),
+      label: e || n(c.LABEL_SUBMIT_BUTTON),
       variant: "contained",
       color: "primary",
       "data-testid": "stepper-submit-button",

package/components/WindowBase/WindowBase.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WindowBase.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/WindowBase/WindowBase.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAU3C;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,gBA+kB9B,CAAC"}
+{"version":3,"file":"WindowBase.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/WindowBase/WindowBase.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAU3C;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,gBAolB9B,CAAC"}