@m4l/components 9.4.6-BE20260108-beta.3 → 9.4.6-BE20260109-beta.2

package/components/DynamicFilter/subcomponents/PopoverFilter/PopoverFilter.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { useModuleDictionary } from "@m4l/core";
 import { useFormContext } from "react-hook-form";
 import { D as DataTypeComponent } from "../FieldTypes/DataTypeComponent.js";
 import { u as usePopoverFilter } from "./usePopoverFilter.js";
-import { P as POPOVER_CONTAINER_ID } from "../../../../hooks/usePopoverContainer/constants.js";
 import { u as usePopoverContainer } from "../../../../hooks/usePopoverContainer/usePopoverContainer.js";
 import { P as PopoverStyled, h as PopoverContainerFieldsStyled, i as PopoverHeaderActionsStyled } from "../../slots/dynamicFilterSlots.js";
 import { R as RHFormProvider } from "../../../hook-form/RHFormProvider/RHFormProvider.js";
@@ -43,7 +43,8 @@ function PopoverFilter() {
     statusLoad,
     canRender
   } = usePopoverFilter();
-  const popoverContainerRef = usePopoverContainer(POPOVER_CONTAINER_ID, !!canRender);
+  const containerId = useId();
+  const popoverContainerRef = usePopoverContainer(containerId, !!canRender);
   if (!canRender) {
     return null;
   }

package/components/DynamicFilter/subcomponents/PopoverMenuFields/PopoverMenuFields.d.ts

@@ -6,5 +6,5 @@ export type PopoverMenuFieldsProps = {
 /**
  * PopoverMenuFields: Componente encargado de mostrar el menú de campos para filtrar
  */
-declare function PopoverMenuFields(props: PopoverMenuFieldsProps): import("react/jsx-runtime").JSX.Element;
+declare function PopoverMenuFields(props: PopoverMenuFieldsProps): import("react/jsx-runtime").JSX.Element | null;
 export default PopoverMenuFields;

package/components/DynamicFilter/subcomponents/PopoverMenuFields/PopoverMenuFields.js

@@ -1,19 +1,23 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { useId } from "react";
 import { M as MenuItem } from "../../../mui_extended/MenuItem/MenuItem.js";
 import { u as usePopoverMenuFields } from "./usePopoverMenuFields.js";
 import { u as useDynamicFilterBase } from "../DynamicFilterBase/useDynamicFilterBase.js";
 import { useModuleDictionary } from "@m4l/core";
 import { a as DICCTIONARY } from "../../dictionary.js";
 import { u as usePopoverContainer } from "../../../../hooks/usePopoverContainer/usePopoverContainer.js";
-import { P as POPOVER_CONTAINER_ID } from "../../../../hooks/usePopoverContainer/constants.js";
 import { j as PopoverMenuStyled } from "../../slots/dynamicFilterSlots.js";
 function PopoverMenuFields(props) {
   const { fields, selectFieldIndex } = props;
   const { elementRef, handleOpenPopUpClickItem, handleClosePopover, getItemLabel, isOpenPopoverMenuFields } = usePopoverMenuFields();
   const anchorEl = elementRef?.current;
   const { getLabel } = useModuleDictionary();
-  const popoverContainerRef = usePopoverContainer(POPOVER_CONTAINER_ID, !!isOpenPopoverMenuFields);
+  const containerId = useId();
+  const popoverContainerRef = usePopoverContainer(containerId, !!isOpenPopoverMenuFields);
   const { size } = useDynamicFilterBase();
+  if (!isOpenPopoverMenuFields) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs(
     PopoverMenuStyled,
     {

package/components/DynamicSort/subcomponents/PopoverMenuFields/PopoverMenuFields.d.ts

@@ -6,5 +6,5 @@ export type PopoverMenuFieldsProps = {
 /**
  * PopoverMenuFields es un componente que permite mostrar un menú desplegable con los campos disponibles para ordenar.
  */
-declare function PopoverMenuFields(props: PopoverMenuFieldsProps): import("react/jsx-runtime").JSX.Element;
+declare function PopoverMenuFields(props: PopoverMenuFieldsProps): import("react/jsx-runtime").JSX.Element | null;
 export default PopoverMenuFields;

package/components/DynamicSort/subcomponents/PopoverMenuFields/PopoverMenuFields.js

@@ -5,8 +5,8 @@ import { M as MenuItem } from "../../../mui_extended/MenuItem/MenuItem.js";
 import { I as Icon } from "../../../Icon/Icon.js";
 import { D as DICCTIONARY } from "../../dictionary.js";
 import { useModuleDictionary } from "@m4l/core";
+import { useId } from "react";
 import { u as usePopoverContainer } from "../../../../hooks/usePopoverContainer/usePopoverContainer.js";
-import { P as POPOVER_CONTAINER_ID } from "../../../../hooks/usePopoverContainer/constants.js";
 import { P as PopoverMenuStyled } from "../../slots/DynamicSortSlots.js";
 function PopoverMenuFields(props) {
   const { fields, selectFieldIndex } = props;
@@ -14,7 +14,11 @@ function PopoverMenuFields(props) {
   const { size } = useDynamicSortBase();
   const anchorEl = elementRef?.current;
   const { getLabel } = useModuleDictionary();
-  const popoverContainerRef = usePopoverContainer(POPOVER_CONTAINER_ID, !!isOpenPopoverMenuFields);
+  const containerId = useId();
+  const popoverContainerRef = usePopoverContainer(containerId, !!isOpenPopoverMenuFields);
+  if (!isOpenPopoverMenuFields) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs(
     PopoverMenuStyled,
     {

package/components/DynamicSort/subcomponents/PopoverSort/PopoverSort.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { useModuleDictionary } from "@m4l/core";
 import { useFormContext } from "react-hook-form";
 import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
 import { D as DataTypeComponent } from "../FieldTypes/DataTypeComponent.js";
 import { u as usePopoverSort } from "./usePopoverSort.js";
 import { u as usePopoverContainer } from "../../../../hooks/usePopoverContainer/usePopoverContainer.js";
-import { P as POPOVER_CONTAINER_ID } from "../../../../hooks/usePopoverContainer/constants.js";
 import { e as PopoverStyled, f as PopoverContainerFieldsStyled, g as PopoverHeaderActionsStyled } from "../../slots/DynamicSortSlots.js";
 import { R as RHFormProvider } from "../../../hook-form/RHFormProvider/RHFormProvider.js";
 import { W as WindowBase } from "../../../WindowBase/WindowBase.js";
@@ -49,7 +49,8 @@ function PopoverSort() {
     canRender
   } = usePopoverSort();
   const { size } = useDynamicSortBase();
-  const popoverContainerRef = usePopoverContainer(POPOVER_CONTAINER_ID, !!canRender);
+  const containerId = useId();
+  const popoverContainerRef = usePopoverContainer(containerId, !!canRender);
   if (!canRender) {
     return null;
   }

package/hooks/usePopoverContainer/usePopoverContainer.d.ts

@@ -1,11 +1,37 @@
 /**
- * Hook para manejar un contenedor global para popovers. cuando se requiere que siga teniendo foco el anchorElement
- * Este hook garantiza que solo exista un contenedor con el ID especificado,
- * incluso si el hook se usa en múltiples componentes.
- * Utiliza un sistema de contador de referencias para evitar eliminar el contenedor
- * cuando hay múltiples popovers que lo necesitan simultáneamente.
- * @param containerId ID único para el contenedor
- * @param shouldMount Si es true, el contenedor se mantiene en el DOM. Si es false, se retira del DOM.
- * @returns Referencia al contenedor del popover
+ * Hook para manejar un contenedor global para popovers cuando se requiere que el anchorElement
+ * mantenga el foco mientras el popover está abierto.
+ *
+ * PROPÓSITO:
+ * Este hook crea y gestiona un contenedor DOM personalizado para popovers. Es especialmente útil
+ * cuando necesitas que el elemento ancla (anchorElement) mantenga el foco mientras el popover
+ * está visible, evitando que el foco se mueva automáticamente al popover.
+ *
+ * FUNCIONAMIENTO:
+ * 1. Busca un contenedor existente en el DOM con el ID especificado
+ * 2. Si no existe y `createContainer` es `true`, crea un nuevo contenedor y lo añade al body
+ * 3. Retorna una referencia al contenedor que debe pasarse a la prop `container` del Popover
+ *
+ * IMPORTANTE - TIMING Y RE-RENDERS:
+ * Este hook utiliza un re-render forzado para garantizar que el Popover se renderice con la
+ * referencia correcta del contenedor. Ver la documentación dentro del código para más detalles
+ * sobre por qué esto es necesario y qué ocurre si no se realiza.
+ * @param containerId ID único para el contenedor. Si no se proporciona, usa POPOVER_CONTAINER_ID por defecto
+ * @param createContainer Si es `true`, crea el contenedor si no existe. Si es `false`, solo busca uno existente
+ * @returns Referencia (ref) al contenedor del popover que debe pasarse a la prop `container` del Popover
+ * @example
+ * ```tsx
+ * const containerId = useId();
+ * const popoverContainerRef = usePopoverContainer(containerId, !!isOpen);
+ *
+ * return (
+ *   <Popover
+ *     open={isOpen}
+ *     container={popoverContainerRef.current} // Pasa la referencia aquí
+ *   >
+ *     {/* contenido del popover *\/}
+ *   </Popover>
+ * );
+ * ```
  */
-export declare function usePopoverContainer(containerId?: string, shouldMount?: boolean): import('react').MutableRefObject<HTMLDivElement | null>;
+export declare function usePopoverContainer(containerId: string | undefined, createContainer: boolean): import('react').MutableRefObject<HTMLDivElement | null>;

package/hooks/usePopoverContainer/usePopoverContainer.js

@@ -1,87 +1,29 @@
-import { useRef, useEffect } from "react";
+import { useRef, useState, useLayoutEffect } from "react";
 import { P as POPOVER_CONTAINER_ID } from "./constants.js";
-const containerRefCounts = /* @__PURE__ */ new Map();
-const containerCleanupTimeouts = /* @__PURE__ */ new Map();
-function usePopoverContainer(containerId = POPOVER_CONTAINER_ID, shouldMount = true) {
+function usePopoverContainer(containerId = POPOVER_CONTAINER_ID, createContainer) {
   const containerRef = useRef(null);
-  const hasRegisteredRef = useRef(false);
-  if (shouldMount && typeof document !== "undefined") {
+  const [, forceUpdate] = useState({});
+  useLayoutEffect(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
     let container = document.getElementById(containerId);
-    if (!container) {
+    if (!container && createContainer) {
       container = document.createElement("div");
       container.id = containerId;
       document.body.appendChild(container);
-      containerRef.current = container;
-    } else if (containerRef.current !== container) {
-      containerRef.current = container;
     }
-  }
-  useEffect(() => {
-    if (shouldMount) {
-      const existingTimeout = containerCleanupTimeouts.get(containerId);
-      if (existingTimeout) {
-        clearTimeout(existingTimeout);
-        containerCleanupTimeouts.delete(containerId);
-      }
-      const currentCount = containerRefCounts.get(containerId) || 0;
-      const newCount = currentCount + 1;
-      containerRefCounts.set(containerId, newCount);
-      hasRegisteredRef.current = true;
-      let container = document.getElementById(containerId);
-      if (!container) {
-        container = document.createElement("div");
-        container.id = containerId;
-        document.body.appendChild(container);
-      }
+    if (containerRef.current !== container) {
       containerRef.current = container;
-    } else {
-      if (hasRegisteredRef.current) {
-        const currentCount = containerRefCounts.get(containerId) || 0;
-        const newCount = Math.max(0, currentCount - 1);
-        if (newCount === 0) {
-          containerRefCounts.delete(containerId);
-          const timeout = setTimeout(() => {
-            const finalCount = containerRefCounts.get(containerId) || 0;
-            if (finalCount === 0) {
-              const container = document.getElementById(containerId);
-              if (container && container.parentNode) {
-                container.parentNode.removeChild(container);
-              }
-            }
-            containerCleanupTimeouts.delete(containerId);
-          }, 100);
-          containerCleanupTimeouts.set(containerId, timeout);
-        } else {
-          containerRefCounts.set(containerId, newCount);
-        }
-        hasRegisteredRef.current = false;
-      }
-      containerRef.current = null;
+      forceUpdate({});
     }
     return () => {
-      if (hasRegisteredRef.current) {
-        const currentCount = containerRefCounts.get(containerId) || 0;
-        const newCount = Math.max(0, currentCount - 1);
-        if (newCount === 0) {
-          containerRefCounts.delete(containerId);
-          const timeout = setTimeout(() => {
-            const finalCount = containerRefCounts.get(containerId) || 0;
-            if (finalCount === 0) {
-              const container = document.getElementById(containerId);
-              if (container && container.parentNode) {
-                container.parentNode.removeChild(container);
-              }
-            }
-            containerCleanupTimeouts.delete(containerId);
-          }, 100);
-          containerCleanupTimeouts.set(containerId, timeout);
-        } else {
-          containerRefCounts.set(containerId, newCount);
-        }
-        hasRegisteredRef.current = false;
+      if (containerRef.current && containerRef.current.parentNode) {
+        containerRef.current.remove();
+        containerRef.current = null;
       }
     };
-  }, [containerId, shouldMount]);
+  }, [containerId, createContainer]);
   return containerRef;
 }
 export {

package/package.json

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