@m4l/components 9.4.6-BE20260109-beta.1 → 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,8 +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.
- * @param containerId ID único para el contenedor
- * @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, createContainer?: 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,21 +1,29 @@
-import { useRef, useEffect } from "react";
+import { useRef, useState, useLayoutEffect } from "react";
 import { P as POPOVER_CONTAINER_ID } from "./constants.js";
-function usePopoverContainer(containerId = POPOVER_CONTAINER_ID, createContainer = false) {
+function usePopoverContainer(containerId = POPOVER_CONTAINER_ID, createContainer) {
   const containerRef = useRef(null);
-  useEffect(() => {
+  const [, forceUpdate] = useState({});
+  useLayoutEffect(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
     let container = document.getElementById(containerId);
     if (!container && createContainer) {
       container = document.createElement("div");
       container.id = containerId;
       document.body.appendChild(container);
     }
-    containerRef.current = container;
+    if (containerRef.current !== container) {
+      containerRef.current = container;
+      forceUpdate({});
+    }
     return () => {
-      if (!createContainer && containerRef.current) {
+      if (containerRef.current && containerRef.current.parentNode) {
         containerRef.current.remove();
+        containerRef.current = null;
       }
     };
-  }, [containerId]);
+  }, [containerId, createContainer]);
   return containerRef;
 }
 export {

package/package.json

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