@m4l/components 9.4.6-BE20260108-beta.3 → 9.4.6-BE20260109-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,10 +2,7 @@
|
|
|
2
2
|
* Hook para manejar un contenedor global para popovers. cuando se requiere que siga teniendo foco el anchorElement
|
|
3
3
|
* Este hook garantiza que solo exista un contenedor con el ID especificado,
|
|
4
4
|
* incluso si el hook se usa en múltiples componentes.
|
|
5
|
-
* Utiliza un sistema de contador de referencias para evitar eliminar el contenedor
|
|
6
|
-
* cuando hay múltiples popovers que lo necesitan simultáneamente.
|
|
7
5
|
* @param containerId ID único para el contenedor
|
|
8
|
-
* @param shouldMount Si es true, el contenedor se mantiene en el DOM. Si es false, se retira del DOM.
|
|
9
6
|
* @returns Referencia al contenedor del popover
|
|
10
7
|
*/
|
|
11
|
-
export declare function usePopoverContainer(containerId?: string,
|
|
8
|
+
export declare function usePopoverContainer(containerId?: string, createContainer?: boolean): import('react').MutableRefObject<HTMLDivElement | null>;
|
|
@@ -1,87 +1,21 @@
|
|
|
1
1
|
import { useRef, useEffect } from "react";
|
|
2
2
|
import { P as POPOVER_CONTAINER_ID } from "./constants.js";
|
|
3
|
-
|
|
4
|
-
const containerCleanupTimeouts = /* @__PURE__ */ new Map();
|
|
5
|
-
function usePopoverContainer(containerId = POPOVER_CONTAINER_ID, shouldMount = true) {
|
|
3
|
+
function usePopoverContainer(containerId = POPOVER_CONTAINER_ID, createContainer = false) {
|
|
6
4
|
const containerRef = useRef(null);
|
|
7
|
-
|
|
8
|
-
if (shouldMount && typeof document !== "undefined") {
|
|
5
|
+
useEffect(() => {
|
|
9
6
|
let container = document.getElementById(containerId);
|
|
10
|
-
if (!container) {
|
|
7
|
+
if (!container && createContainer) {
|
|
11
8
|
container = document.createElement("div");
|
|
12
9
|
container.id = containerId;
|
|
13
10
|
document.body.appendChild(container);
|
|
14
|
-
containerRef.current = container;
|
|
15
|
-
} else if (containerRef.current !== container) {
|
|
16
|
-
containerRef.current = container;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
if (shouldMount) {
|
|
21
|
-
const existingTimeout = containerCleanupTimeouts.get(containerId);
|
|
22
|
-
if (existingTimeout) {
|
|
23
|
-
clearTimeout(existingTimeout);
|
|
24
|
-
containerCleanupTimeouts.delete(containerId);
|
|
25
|
-
}
|
|
26
|
-
const currentCount = containerRefCounts.get(containerId) || 0;
|
|
27
|
-
const newCount = currentCount + 1;
|
|
28
|
-
containerRefCounts.set(containerId, newCount);
|
|
29
|
-
hasRegisteredRef.current = true;
|
|
30
|
-
let container = document.getElementById(containerId);
|
|
31
|
-
if (!container) {
|
|
32
|
-
container = document.createElement("div");
|
|
33
|
-
container.id = containerId;
|
|
34
|
-
document.body.appendChild(container);
|
|
35
|
-
}
|
|
36
|
-
containerRef.current = container;
|
|
37
|
-
} else {
|
|
38
|
-
if (hasRegisteredRef.current) {
|
|
39
|
-
const currentCount = containerRefCounts.get(containerId) || 0;
|
|
40
|
-
const newCount = Math.max(0, currentCount - 1);
|
|
41
|
-
if (newCount === 0) {
|
|
42
|
-
containerRefCounts.delete(containerId);
|
|
43
|
-
const timeout = setTimeout(() => {
|
|
44
|
-
const finalCount = containerRefCounts.get(containerId) || 0;
|
|
45
|
-
if (finalCount === 0) {
|
|
46
|
-
const container = document.getElementById(containerId);
|
|
47
|
-
if (container && container.parentNode) {
|
|
48
|
-
container.parentNode.removeChild(container);
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
containerCleanupTimeouts.delete(containerId);
|
|
52
|
-
}, 100);
|
|
53
|
-
containerCleanupTimeouts.set(containerId, timeout);
|
|
54
|
-
} else {
|
|
55
|
-
containerRefCounts.set(containerId, newCount);
|
|
56
|
-
}
|
|
57
|
-
hasRegisteredRef.current = false;
|
|
58
|
-
}
|
|
59
|
-
containerRef.current = null;
|
|
60
11
|
}
|
|
12
|
+
containerRef.current = container;
|
|
61
13
|
return () => {
|
|
62
|
-
if (
|
|
63
|
-
|
|
64
|
-
const newCount = Math.max(0, currentCount - 1);
|
|
65
|
-
if (newCount === 0) {
|
|
66
|
-
containerRefCounts.delete(containerId);
|
|
67
|
-
const timeout = setTimeout(() => {
|
|
68
|
-
const finalCount = containerRefCounts.get(containerId) || 0;
|
|
69
|
-
if (finalCount === 0) {
|
|
70
|
-
const container = document.getElementById(containerId);
|
|
71
|
-
if (container && container.parentNode) {
|
|
72
|
-
container.parentNode.removeChild(container);
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
containerCleanupTimeouts.delete(containerId);
|
|
76
|
-
}, 100);
|
|
77
|
-
containerCleanupTimeouts.set(containerId, timeout);
|
|
78
|
-
} else {
|
|
79
|
-
containerRefCounts.set(containerId, newCount);
|
|
80
|
-
}
|
|
81
|
-
hasRegisteredRef.current = false;
|
|
14
|
+
if (!createContainer && containerRef.current) {
|
|
15
|
+
containerRef.current.remove();
|
|
82
16
|
}
|
|
83
17
|
};
|
|
84
|
-
}, [containerId
|
|
18
|
+
}, [containerId]);
|
|
85
19
|
return containerRef;
|
|
86
20
|
}
|
|
87
21
|
export {
|