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

package/components/popups/components/PopupsViewer/subcomponents/Popup/Popup.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useEffect, useMemo } from "react";
+import { forwardRef, useRef, useEffect } from "react";
 import { shallow } from "zustand/shallow";
 import { u as usePopupsStore } from "../../../PopupsProvider/hooks/usePopupsStore.js";
 import { P as PopupDragWindowRootStyled } from "../../slots/popupsViewerSlots.js";
@@ -9,11 +9,10 @@ import { a as POPUPS_VIEWER_CLASS_NAME } from "../../constants.js";
 import { a as getNameDataTestId } from "../../../../../../test/getNameDataTestId.js";
 import { M as MemonizedWindowBaseMicroFrontend } from "../../../../../WindowBase/subcomponents/MicroFrontend/MicroFrontend.js";
 import { W as WindowBaseComponent } from "../../../../../WindowBase/subcomponents/Component/index.js";
-import { d as deepShallow } from "../../../../../../utils/deepShallow.js";
 import { W as WindowBase } from "../../../../../WindowBase/WindowBase.js";
 const Popup = forwardRef((props, ref) => {
   const { popupId, containerElement, containerSize, style, onResizeStart, onResizeStop, onDragStart, onDragStop, loggedUser } = props;
-  const popup = usePopupsStore((state) => state.hashPopups[popupId], deepShallow);
+  const popup = usePopupsStore((state) => state.hashPopups[popupId], shallow);
   const { bringPopupOnFront } = usePopupsStore((state) => state.popupsActions, shallow);
   const { close } = usePopupsStore((state) => state.popupActions, shallow);
   const refHandler = useRef(null);
@@ -33,7 +32,6 @@ const Popup = forwardRef((props, ref) => {
     windowTools,
     mfProps,
     component,
-    componentProps,
     //onTouch,
     memoizedActions,
     loading,
@@ -77,33 +75,6 @@ const Popup = forwardRef((props, ref) => {
       refHandler.current?.ensureVisible();
     }
   }, [popup.enforceVisibleCount, popupId]);
-  const memoComponent = useMemo(() => {
-    if (winType === "microfrontend") {
-      return /* @__PURE__ */ jsx(
-        MemonizedWindowBaseMicroFrontend,
-        {
-          emergeType: "popup",
-          moduleId,
-          dynamicMFStore,
-          windowTools,
-          loggedUser,
-          ...mfProps ?? { debugPort: 0, prefix: "" }
-        }
-      );
-    } else {
-      return /* @__PURE__ */ jsx(
-        WindowBaseComponent,
-        {
-          id: popupId,
-          emergeType: "popup",
-          dynamicMFStore,
-          windowTools,
-          component,
-          componentProps
-        }
-      );
-    }
-  }, [winType, component, componentProps, moduleId, dynamicMFStore, windowTools, loggedUser, mfProps, popupId]);
   if (!popup) {
     return null;
   }
@@ -155,7 +126,25 @@ const Popup = forwardRef((props, ref) => {
               "root"
             )
           } : {},
-          children: memoComponent
+          children: winType === "microfrontend" ? /* @__PURE__ */ jsx(
+            MemonizedWindowBaseMicroFrontend,
+            {
+              emergeType: "popup",
+              moduleId,
+              dynamicMFStore,
+              windowTools,
+              loggedUser,
+              ...mfProps ?? { debugPort: 0, prefix: "" }
+            }
+          ) : /* @__PURE__ */ jsx(
+            WindowBaseComponent,
+            {
+              emergeType: "popup",
+              dynamicMFStore,
+              windowTools,
+              component
+            }
+          )
         }
       )
     }

package/contexts/ModalContext/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { createContext, useState } from "react";
+import { createContext, useState, useCallback } from "react";
 import { M as ModalDialog } from "../../components/ModalDialog/ModalDialog.js";
 const ModalContext = createContext(null);
 function ModalProvider({ children }) {
@@ -7,7 +7,7 @@ function ModalProvider({ children }) {
     open: false,
     fullScreen: false
   });
-  const openModal = (modalOpenProps) => {
+  const openModal = useCallback((modalOpenProps) => {
     setModalOptions({
       open: true,
       initialWidth: 300,
@@ -15,10 +15,10 @@ function ModalProvider({ children }) {
       ...modalOpenProps,
       isCloseable: modalOpenProps.isCloseable
     });
-  };
-  const closeModal = () => {
+  }, []);
+  const closeModal = useCallback(() => {
     setModalOptions((last) => ({ ...last, open: false }));
-  };
+  }, []);
   return /* @__PURE__ */ jsxs(
     ModalContext.Provider,
     {

package/index.js

@@ -43,21 +43,22 @@ import { u as u3 } from "./components/DataGrid/formatters/ColumnConcatenatedValu
 import { C as C6 } from "./components/DataGrid/formatters/ColumnDateFormatter/formatter.js";
 import { u as u4 } from "./components/DataGrid/formatters/ColumnDateFormatter/useColumnDate.js";
 import { C as C7 } from "./components/DataGrid/formatters/ColumnIconFormatter/formatter.js";
-import { u as u5 } from "./components/DataGrid/formatters/ColumnIconFormatter/useColumnIcon.js";
 import { C as C8 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/formatter.js";
-import { u as u6 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/useColumnInteractiveCheck.js";
+import { u as u5 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/useColumnInteractiveCheck.js";
 import { C as C9 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js";
-import { u as u7 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.js";
+import { u as u6 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.js";
 import { C as C10 } from "./components/DataGrid/formatters/ColumnPointsFormatter/formatter.js";
-import { u as u8 } from "./components/DataGrid/formatters/ColumnPointsFormatter/useColumnPoints.js";
+import { u as u7 } from "./components/DataGrid/formatters/ColumnPointsFormatter/useColumnPoints.js";
 import { C as C11 } from "./components/DataGrid/formatters/ColumnPriceFormatter/formatter.js";
-import { u as u9 } from "./components/DataGrid/formatters/ColumnPriceFormatter/useColumnPrice.js";
+import { u as u8 } from "./components/DataGrid/formatters/ColumnPriceFormatter/useColumnPrice.js";
 import { C as C12 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js";
-import { u as u10 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.js";
+import { u as u9 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.js";
 import { C as C13 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js";
-import { u as u11 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.js";
+import { u as u10 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.js";
 import { C as C14 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js";
-import { u as u12 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/useColumnChipStatus.js";
+import { u as u11 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/useColumnChipStatus.js";
+import { C as C15 } from "./components/DataGrid/formatters/ColumnTagsFormatter/formatter.js";
+import { u as u12 } from "./components/DataGrid/formatters/ColumnTagsFormatter/useColumnTags.js";
 import { D as D3 } from "./components/DragResizeWindowRND/DragResizeWindowRND.js";
 import { d as d2 } from "./components/DragResizeWindowRND/classes/index.js";
 import { W } from "./components/DragResizeWindowRND/constants.js";
@@ -79,7 +80,7 @@ import { R as R3 } from "./components/extended/React-Json-Viewer/ReactJsonViewer
 import { A as A14 } from "./components/mui_extended/Avatar/Avatar.js";
 import { B as B2 } from "./components/mui_extended/BoxIcon/index.js";
 import { B as B3 } from "./components/mui_extended/Breadcrumbs/index.js";
-import { C as C15 } from "./components/mui_extended/CircularProgress/CircularProgress.js";
+import { C as C16 } from "./components/mui_extended/CircularProgress/CircularProgress.js";
 import { B as B4 } from "./components/mui_extended/Badge/Badge.js";
 import { L as L3 } from "./components/mui_extended/LinearProgress/index.js";
 import { L as L4 } from "./components/mui_extended/LinkWithRoute/index.js";
@@ -89,7 +90,7 @@ import { A as A15 } from "./components/mui_extended/Accordion/Accordion.js";
 import { T as T3 } from "./components/mui_extended/Tooltip/Tooltip.js";
 import { I as I2 } from "./components/mui_extended/IconButton/IconButton.js";
 import { B as B5 } from "./components/mui_extended/Button/Button.js";
-import { C as C16 } from "./components/mui_extended/CheckBox/CheckBox.js";
+import { C as C17 } from "./components/mui_extended/CheckBox/CheckBox.js";
 import { I as I3 } from "./components/mui_extended/ImageButton/ImageButton.js";
 import { P as P2 } from "./components/mui_extended/Popover/Popover.js";
 import { S as S4 } from "./components/mui_extended/Select/Select.js";
@@ -117,10 +118,11 @@ import { B as B6 } from "./components/formatters/BooleanFormatter/BooleanFormatt
 import { D as D8, g as g12 } from "./components/formatters/DateFormatter/DateFormatter.js";
 import { U, g as g13 } from "./components/formatters/UncertaintyFormatter/UncertaintyFormatter.js";
 import { P as P3, g as g14 } from "./components/formatters/PointsFormatter/PointsFormatter.js";
-import { C as C17, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
+import { C as C18, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
 import { P as P4, u as u13 } from "./components/formatters/PeriodFormatter/PeriodFormatter.js";
 import { P as P5, g as g16 } from "./components/formatters/PriceFormatter/PriceFormatter.js";
-import { C as C18 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
+import { T as T17 } from "./components/formatters/TagsFormatter/TagsFormatter.js";
+import { C as C19 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
 import { g as g17 } from "./components/formatters/DistanceToNowFormatter/dictionary.js";
 import { D as D9 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
 import { u as u14 } from "./components/formatters/DistanceToNowFormatter/hooks/useDistanceToNowFormatter.js";
@@ -184,8 +186,8 @@ import { P as P11 } from "./components/PrintingSystem/PrintingSystem.js";
 import { P as P12 } from "./components/PropertyValue/PropertyValue.js";
 import { S as S8 } from "./components/ScrollBar/ScrollBar.js";
 import { S as S9 } from "./components/SideBar/SideBar.js";
-import { T as T17 } from "./components/ToastContainer/ToastContainer.js";
-import { T as T18 } from "./components/ToastContainer/subcomponents/ToastMessage/ToastMessage.js";
+import { T as T18 } from "./components/ToastContainer/ToastContainer.js";
+import { T as T19 } from "./components/ToastContainer/subcomponents/ToastMessage/ToastMessage.js";
 import { W as W2 } from "./components/WindowBase/WindowBase.js";
 import { u as u16 } from "./components/WindowBase/hooks/useWindowToolsMF/index.js";
 import { u as u17, a as a11 } from "./components/WindowBase/hooks/useDynamicMFParameters/index.js";
@@ -271,10 +273,10 @@ export {
   B3 as Breadcrumbs,
   B5 as Button,
   C as Card,
-  C16 as CheckBox,
+  C17 as CheckBox,
   C2 as Chip,
-  C18 as ChipStatusFormatter,
-  C15 as CircularProgress,
+  C19 as ChipStatusFormatter,
+  C16 as CircularProgress,
   C4 as ColumnBooleanFormatter,
   C14 as ColumnChipStatusFormatter,
   C5 as ColumnConcatenatedValueFormatter,
@@ -285,8 +287,9 @@ export {
   C10 as ColumnPointsFormatter,
   C11 as ColumnPriceFormatter,
   C12 as ColumnSetCheckFormatter,
+  C15 as ColumnTagsFormatter,
   C13 as ColumnUncertaintyFormatter,
-  C17 as ConcatenatedFormatter,
+  C18 as ConcatenatedFormatter,
   C3 as ContainerFlow,
   b3 as DATAGRID_ROW_HEADER_HEIGHTS,
   a4 as DATAGRID_ROW_HEIGHTS,
@@ -409,9 +412,10 @@ export {
   T7 as TabContext,
   a7 as TabProvider,
   T5 as Tabs,
+  T17 as TagsFormatter,
   T2 as TextEditor,
-  T17 as ToastContainer,
-  T18 as ToastMessage,
+  T18 as ToastContainer,
+  T19 as ToastMessage,
   T9 as ToggleButton,
   T12 as ToggleButtonRootStyled,
   T11 as ToggleButtonSlots,
@@ -495,16 +499,16 @@ export {
   u20 as useAppearanceComponentStore,
   u as useAreasStore,
   u2 as useColumnBoolean,
-  u12 as useColumnChipStatus,
+  u11 as useColumnChipStatus,
   u3 as useColumnConcatenatedValue,
   u4 as useColumnDate,
-  u5 as useColumnIcon,
-  u6 as useColumnInteractiveCheck,
-  u7 as useColumnNestedValue,
-  u8 as useColumnPoints,
-  u9 as useColumnPrice,
-  u10 as useColumnSetCheck,
-  u11 as useColumnUncertanity,
+  u5 as useColumnInteractiveCheck,
+  u6 as useColumnNestedValue,
+  u7 as useColumnPoints,
+  u8 as useColumnPrice,
+  u9 as useColumnSetCheck,
+  u12 as useColumnTags,
+  u10 as useColumnUncertanity,
   u26 as useComponentSize,
   u19 as useCustomForm,
   u31 as useDataGridPersistence,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.24-JT04112025.beta.1",
+  "version": "9.3.24-JT04112025.beta.3",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

package/components/DataGrid/formatters/ColumnIconFormatter/constants.js

@@ -1,4 +0,0 @@
-const COLUMN_ICON_KEY_COMPONENT = "M4LColumnIconFormatter";
-export {
-  COLUMN_ICON_KEY_COMPONENT as C
-};

package/components/DataGrid/formatters/ColumnIconFormatter/helpers/renderIcon.js

@@ -1,58 +0,0 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import React from "react";
-import { C as COLUMN_ICON_KEY_COMPONENT } from "../constants.js";
-import { g as getPropDataTestId } from "../../../../../test/getNameDataTestId.js";
-import { I as IconClickeableStyled, a as IconStyled } from "../../../../ObjectLogs/slots/ObjectLogsSlots.js";
-function renderIcon(iconConfig, key) {
-  const {
-    iconUrl,
-    onClick,
-    tooltip,
-    dataTestId,
-    Component,
-    componentProps,
-    color,
-    visible,
-    size
-  } = iconConfig;
-  if (visible === false) {
-    return /* @__PURE__ */ jsx(Fragment, { children: "-" });
-  }
-  const IconComponent = onClick ? IconClickeableStyled : IconStyled;
-  if (Component && Component !== React.Fragment) {
-    return /* @__PURE__ */ jsx(
-      Component,
-      {
-        ...componentProps,
-        ...getPropDataTestId(COLUMN_ICON_KEY_COMPONENT, "container", dataTestId),
-        children: /* @__PURE__ */ jsx(
-          IconComponent,
-          {
-            src: iconUrl,
-            ...onClick && { onClick },
-            tooltipContent: tooltip,
-            instaceDataTestId: dataTestId,
-            color,
-            size
-          }
-        )
-      },
-      key
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    IconComponent,
-    {
-      src: iconUrl,
-      ...onClick && { onClick },
-      tooltipContent: tooltip,
-      instaceDataTestId: dataTestId,
-      color,
-      size
-    },
-    key
-  );
-}
-export {
-  renderIcon as r
-};

package/components/DataGrid/formatters/ColumnIconFormatter/helpers/renderMultipleIcons.d.ts

@@ -1,7 +0,0 @@
-import { ColumnIconResponse } from '../types';
-/**
- * Helper que renderiza múltiples iconos
- * @param iconsConfig - Array de configuraciones de iconos
- * @returns Componente contenedor con múltiples iconos
- */
-export declare function renderMultipleIcons(iconsConfig: ColumnIconResponse[]): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnIconFormatter/helpers/renderMultipleIcons.js

@@ -1,19 +0,0 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { a as ColumnIconFormatterStyled } from "../../../slots/DataGridSlot.js";
-import { r as renderIcon } from "./renderIcon.js";
-function renderMultipleIcons(iconsConfig) {
-  if (!iconsConfig || iconsConfig.length === 0) {
-    return /* @__PURE__ */ jsx(Fragment, { children: "-" });
-  }
-  const visibleIcons = iconsConfig.filter((icon) => icon.visible !== false);
-  if (visibleIcons.length === 0) {
-    return /* @__PURE__ */ jsx(Fragment, { children: "-" });
-  }
-  if (visibleIcons.length === 1) {
-    return renderIcon(visibleIcons[0]);
-  }
-  return /* @__PURE__ */ jsx(ColumnIconFormatterStyled, { children: visibleIcons.map((iconConfig, index) => renderIcon(iconConfig, index)) });
-}
-export {
-  renderMultipleIcons as r
-};

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

@@ -1,13 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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[];
-};

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

@@ -1,79 +0,0 @@
-import { useRef, useCallback, useSyncExternalStore, useMemo } from "react";
-import { useFormContext } from "react-hook-form";
-import { u as useStepper } from "../../../hooks/useStepper/index.js";
-import { e as evaluateVisibilityStepCondition } from "../../../helpers/evaluateVisibilityStepCondition/index.js";
-import { d as deepShallow } from "../../../../../utils/deepShallow.js";
-function calculateVisibleSteps(steps, formValues, visibilityData) {
-  return steps.filter(
-    (step) => evaluateVisibilityStepCondition(step, formValues || {}, visibilityData || {})
-  );
-}
-function generateStepsKey(steps) {
-  return steps.map((step) => step.key).join(",");
-}
-function useVisibileSteps() {
-  const formContext = useFormContext();
-  const {
-    steps,
-    visibilityData
-  } = useStepper(
-    (state) => ({
-      steps: state.steps,
-      visibilityData: state.visibilityData
-    }),
-    deepShallow
-  );
-  const previousStepsKeyRef = useRef(null);
-  const cachedVisibleStepsRef = useRef([]);
-  const listenersRef = useRef(/* @__PURE__ */ new Set());
-  const subscribe = useCallback((callback) => {
-    listenersRef.current.add(callback);
-    const { unsubscribe } = formContext.watch((formValues) => {
-      const newVisibleSteps = calculateVisibleSteps(
-        steps,
-        formValues,
-        visibilityData
-      );
-      const newStepsKey = generateStepsKey(newVisibleSteps);
-      if (newStepsKey !== previousStepsKeyRef.current) {
-        previousStepsKeyRef.current = newStepsKey;
-        cachedVisibleStepsRef.current = newVisibleSteps;
-        listenersRef.current.forEach((listener) => listener());
-      }
-    });
-    return () => {
-      listenersRef.current.delete(callback);
-      unsubscribe();
-    };
-  }, [formContext, steps, visibilityData]);
-  const getSnapshot = useCallback(() => {
-    const formValues = formContext.getValues();
-    const currentVisibleSteps = calculateVisibleSteps(
-      steps,
-      formValues,
-      visibilityData
-    );
-    const stepsKey = generateStepsKey(currentVisibleSteps);
-    if (previousStepsKeyRef.current === null) {
-      previousStepsKeyRef.current = stepsKey;
-      cachedVisibleStepsRef.current = currentVisibleSteps;
-    }
-    if (stepsKey === previousStepsKeyRef.current) {
-      return cachedVisibleStepsRef.current;
-    }
-    previousStepsKeyRef.current = stepsKey;
-    cachedVisibleStepsRef.current = currentVisibleSteps;
-    return currentVisibleSteps;
-  }, [formContext, steps, visibilityData]);
-  const visibleSteps = useSyncExternalStore(
-    subscribe,
-    getSnapshot,
-    getSnapshot
-  );
-  return useMemo(() => ({
-    visibleSteps
-  }), [visibleSteps]);
-}
-export {
-  useVisibileSteps as u
-};

package/components/Stepper/subcomponents/StepperContent/subcomponents/Step/hooks/useIsStepVisible.d.ts

@@ -1,8 +0,0 @@
-import { StepProps } from '../../../../../types';
-/**
- * Hook que determina si un step debe ser visible
- * Usa useSyncExternalStore para optimizar re-renders:
- * - Solo re-renderiza el componente si el valor booleano cambia realmente
- * - Aunque el formulario cambie, si la visibilidad sigue siendo la misma, no re-renderiza
- */
-export declare function useIsStepVisible(props: Pick<StepProps, 'stepKey'>): boolean;