@m4l/components 9.4.6-BE20260105-beta.1 → 9.4.6-BE20260108-beta.2
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.
- package/components/DynamicFilter/slots/dynamicFilterSlots.js +1 -1
- package/components/DynamicFilter/subcomponents/PopoverFilter/PopoverFilter.js +2 -1
- package/components/DynamicFilter/subcomponents/PopoverMenuFields/PopoverMenuFields.js +2 -1
- package/components/DynamicSort/subcomponents/PopoverMenuFields/PopoverMenuFields.js +2 -1
- package/components/DynamicSort/subcomponents/PopoverSort/PopoverSort.js +3 -2
- package/components/areas/components/AreasAdmin/subcomponents/AreaChip/AreaChip.js +2 -2
- package/components/hook-form/RHFCheckableList/constants.d.ts +1 -1
- package/components/mui_extended/Autocomplete/subcomponents/PopperComponent/PopperComponent.js +1 -4
- package/components/mui_extended/Popover/Popover.styles.js +0 -21
- package/components/mui_extended/Popper/PopperStyles.js +237 -240
- package/components/mui_extended/Select/Select.styles.js +0 -2
- package/hooks/usePopoverContainer/index.d.ts +1 -0
- package/hooks/usePopoverContainer/usePopoverContainer.d.ts +2 -26
- package/hooks/usePopoverContainer/usePopoverContainer.js +16 -29
- package/index.js +2 -0
- package/package.json +1 -1
|
@@ -4,8 +4,8 @@ import { D as DYNAMIC_FILTER_KEY_COMPONENT } from "../constants.js";
|
|
|
4
4
|
import { d as dynamicFilterStyles } from "../DynamicFilter.styles.js";
|
|
5
5
|
import { D as DynamicFilterSlots } from "./SlotsEnum.js";
|
|
6
6
|
import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
|
|
7
|
-
import { P as Popover } from "../../mui_extended/Popover/Popover.js";
|
|
8
7
|
import { A as ActionsContainer } from "../../CommonActions/components/ActionsContainer/ActionsContainer.js";
|
|
8
|
+
import { P as Popover } from "../../mui_extended/Popover/Popover.js";
|
|
9
9
|
const RootStyled = styled("div", {
|
|
10
10
|
name: DYNAMIC_FILTER_KEY_COMPONENT,
|
|
11
11
|
slot: DynamicFilterSlots.root
|
|
@@ -3,6 +3,7 @@ import { useModuleDictionary } from "@m4l/core";
|
|
|
3
3
|
import { useFormContext } from "react-hook-form";
|
|
4
4
|
import { D as DataTypeComponent } from "../FieldTypes/DataTypeComponent.js";
|
|
5
5
|
import { u as usePopoverFilter } from "./usePopoverFilter.js";
|
|
6
|
+
import { P as POPOVER_CONTAINER_ID } from "../../../../hooks/usePopoverContainer/constants.js";
|
|
6
7
|
import { u as usePopoverContainer } from "../../../../hooks/usePopoverContainer/usePopoverContainer.js";
|
|
7
8
|
import { P as PopoverStyled, h as PopoverContainerFieldsStyled, i as PopoverHeaderActionsStyled } from "../../slots/dynamicFilterSlots.js";
|
|
8
9
|
import { R as RHFormProvider } from "../../../hook-form/RHFormProvider/RHFormProvider.js";
|
|
@@ -42,7 +43,7 @@ function PopoverFilter() {
|
|
|
42
43
|
statusLoad,
|
|
43
44
|
canRender
|
|
44
45
|
} = usePopoverFilter();
|
|
45
|
-
const popoverContainerRef = usePopoverContainer();
|
|
46
|
+
const popoverContainerRef = usePopoverContainer(POPOVER_CONTAINER_ID, !!canRender);
|
|
46
47
|
if (!canRender) {
|
|
47
48
|
return null;
|
|
48
49
|
}
|
|
@@ -5,13 +5,14 @@ import { u as useDynamicFilterBase } from "../DynamicFilterBase/useDynamicFilter
|
|
|
5
5
|
import { useModuleDictionary } from "@m4l/core";
|
|
6
6
|
import { a as DICCTIONARY } from "../../dictionary.js";
|
|
7
7
|
import { u as usePopoverContainer } from "../../../../hooks/usePopoverContainer/usePopoverContainer.js";
|
|
8
|
+
import { P as POPOVER_CONTAINER_ID } from "../../../../hooks/usePopoverContainer/constants.js";
|
|
8
9
|
import { j as PopoverMenuStyled } from "../../slots/dynamicFilterSlots.js";
|
|
9
10
|
function PopoverMenuFields(props) {
|
|
10
11
|
const { fields, selectFieldIndex } = props;
|
|
11
12
|
const { elementRef, handleOpenPopUpClickItem, handleClosePopover, getItemLabel, isOpenPopoverMenuFields } = usePopoverMenuFields();
|
|
12
13
|
const anchorEl = elementRef?.current;
|
|
13
14
|
const { getLabel } = useModuleDictionary();
|
|
14
|
-
const popoverContainerRef = usePopoverContainer();
|
|
15
|
+
const popoverContainerRef = usePopoverContainer(POPOVER_CONTAINER_ID, !!isOpenPopoverMenuFields);
|
|
15
16
|
const { size } = useDynamicFilterBase();
|
|
16
17
|
return /* @__PURE__ */ jsxs(
|
|
17
18
|
PopoverMenuStyled,
|
|
@@ -6,6 +6,7 @@ import { I as Icon } from "../../../Icon/Icon.js";
|
|
|
6
6
|
import { D as DICCTIONARY } from "../../dictionary.js";
|
|
7
7
|
import { useModuleDictionary } from "@m4l/core";
|
|
8
8
|
import { u as usePopoverContainer } from "../../../../hooks/usePopoverContainer/usePopoverContainer.js";
|
|
9
|
+
import { P as POPOVER_CONTAINER_ID } from "../../../../hooks/usePopoverContainer/constants.js";
|
|
9
10
|
import { P as PopoverMenuStyled } from "../../slots/DynamicSortSlots.js";
|
|
10
11
|
function PopoverMenuFields(props) {
|
|
11
12
|
const { fields, selectFieldIndex } = props;
|
|
@@ -13,7 +14,7 @@ function PopoverMenuFields(props) {
|
|
|
13
14
|
const { size } = useDynamicSortBase();
|
|
14
15
|
const anchorEl = elementRef?.current;
|
|
15
16
|
const { getLabel } = useModuleDictionary();
|
|
16
|
-
const popoverContainerRef = usePopoverContainer();
|
|
17
|
+
const popoverContainerRef = usePopoverContainer(POPOVER_CONTAINER_ID, !!isOpenPopoverMenuFields);
|
|
17
18
|
return /* @__PURE__ */ jsxs(
|
|
18
19
|
PopoverMenuStyled,
|
|
19
20
|
{
|
|
@@ -4,9 +4,10 @@ import { useFormContext } from "react-hook-form";
|
|
|
4
4
|
import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
|
|
5
5
|
import { D as DataTypeComponent } from "../FieldTypes/DataTypeComponent.js";
|
|
6
6
|
import { u as usePopoverSort } from "./usePopoverSort.js";
|
|
7
|
+
import { u as usePopoverContainer } from "../../../../hooks/usePopoverContainer/usePopoverContainer.js";
|
|
8
|
+
import { P as POPOVER_CONTAINER_ID } from "../../../../hooks/usePopoverContainer/constants.js";
|
|
7
9
|
import { e as PopoverStyled, f as PopoverContainerFieldsStyled, g as PopoverHeaderActionsStyled } from "../../slots/DynamicSortSlots.js";
|
|
8
10
|
import { R as RHFormProvider } from "../../../hook-form/RHFormProvider/RHFormProvider.js";
|
|
9
|
-
import { u as usePopoverContainer } from "../../../../hooks/usePopoverContainer/usePopoverContainer.js";
|
|
10
11
|
import { W as WindowBase } from "../../../WindowBase/WindowBase.js";
|
|
11
12
|
import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/ActionCancel.js";
|
|
12
13
|
import { B as Button } from "../../../mui_extended/Button/Button.js";
|
|
@@ -48,7 +49,7 @@ function PopoverSort() {
|
|
|
48
49
|
canRender
|
|
49
50
|
} = usePopoverSort();
|
|
50
51
|
const { size } = useDynamicSortBase();
|
|
51
|
-
const popoverContainerRef = usePopoverContainer();
|
|
52
|
+
const popoverContainerRef = usePopoverContainer(POPOVER_CONTAINER_ID, !!canRender);
|
|
52
53
|
if (!canRender) {
|
|
53
54
|
return null;
|
|
54
55
|
}
|
|
@@ -12,13 +12,13 @@ import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../../../dic
|
|
|
12
12
|
import { A as AREAS_ADMIN_KEY_COMPONENT } from "../../constants.js";
|
|
13
13
|
import { g as getComponentClasses } from "../../../../../../utils/getComponentSlotRoot.js";
|
|
14
14
|
import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
|
|
15
|
+
import { c as createValidationSchema, a as createValidationFullObject, b as createValidationPartialObject } from "../../../../../hook-form/RHFormProvider/schema.js";
|
|
15
16
|
import { A as AreasAdminSlots } from "../../slots/AreasAdminEnum.js";
|
|
16
17
|
import { R as RHFormProvider } from "../../../../../hook-form/RHFormProvider/RHFormProvider.js";
|
|
17
18
|
import { T as Typography } from "../../../../../mui_extended/Typography/Typography.js";
|
|
19
|
+
import { R as RHFTextField } from "../../../../../hook-form/RHFTextField/RHFTextField.js";
|
|
18
20
|
import { A as ActionsContainer } from "../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
|
|
19
|
-
import { c as createValidationSchema, a as createValidationFullObject, b as createValidationPartialObject } from "../../../../../hook-form/RHFormProvider/schema.js";
|
|
20
21
|
import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
|
|
21
|
-
import { R as RHFTextField } from "../../../../../hook-form/RHFTextField/RHFTextField.js";
|
|
22
22
|
import { A as ActionCancel } from "../../../../../CommonActions/components/ActionCancel/ActionCancel.js";
|
|
23
23
|
import { A as ActionIntro } from "../../../../../CommonActions/components/ActionIntro/ActionIntro.js";
|
|
24
24
|
const AreaChip = (props) => {
|
|
@@ -5,4 +5,4 @@ export declare const RHF_CHECKABLE_LIST_COMPONENT_KEY = "RHFCheckableList";
|
|
|
5
5
|
/**
|
|
6
6
|
* Clases CSS generadas dinámicamente para el componente RHFCheckableList.
|
|
7
7
|
*/
|
|
8
|
-
export declare const RHF_CHECKABLE_LIST_CLASSES: Record<"label" | "root" | "
|
|
8
|
+
export declare const RHF_CHECKABLE_LIST_CLASSES: Record<"label" | "root" | "checkableList" | "helperError", string>;
|
package/components/mui_extended/Autocomplete/subcomponents/PopperComponent/PopperComponent.js
CHANGED
|
@@ -1,22 +1,19 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { P as PopperComponentStyled } from "../../slots/AutocompleteSlots.js";
|
|
4
|
-
import { u as usePopoverContainer } from "../../../../../hooks/usePopoverContainer/usePopoverContainer.js";
|
|
5
4
|
const PopperComponent = ({
|
|
6
5
|
currentSize = "medium",
|
|
7
6
|
ownerState,
|
|
8
7
|
...popperProps
|
|
9
8
|
}) => {
|
|
10
9
|
const { color: popperColor, ...otherPopperProps } = popperProps;
|
|
11
|
-
const popoverContainerRef = usePopoverContainer();
|
|
12
10
|
return /* @__PURE__ */ jsx(
|
|
13
11
|
PopperComponentStyled,
|
|
14
12
|
{
|
|
15
13
|
...otherPopperProps,
|
|
16
14
|
size: currentSize,
|
|
17
15
|
placement: "bottom-start",
|
|
18
|
-
ownerState: ownerState ? { ...ownerState } : void 0
|
|
19
|
-
container: popoverContainerRef.current
|
|
16
|
+
ownerState: ownerState ? { ...ownerState } : void 0
|
|
20
17
|
}
|
|
21
18
|
);
|
|
22
19
|
};
|
|
@@ -4,27 +4,6 @@ const popoverStyles = {
|
|
|
4
4
|
*/
|
|
5
5
|
root: ({ theme }) => ({
|
|
6
6
|
"&.M4lclassCssSpecificity": {
|
|
7
|
-
/**
|
|
8
|
-
* z-index: calc(modal + 1) = 1301
|
|
9
|
-
*
|
|
10
|
-
* Solución: Cuando el Popover usa 'container' (usePopoverContainer) para evitar warnings de accesibilidad
|
|
11
|
-
* (aria-hidden) con Dialogs abiertos, se renderiza fuera del árbol del Dialog. Para que sea visible,
|
|
12
|
-
* necesita un z-index mayor que el Dialog (modal: 1300).
|
|
13
|
-
*
|
|
14
|
-
* Jerarquía de z-index y razones:
|
|
15
|
-
* - Modal (1300): Dialogs y modales principales de la aplicación
|
|
16
|
-
* - Popover (1301): Debe estar por encima del modal para ser visible cuando se usa container,
|
|
17
|
-
* pero por debajo de notificaciones y tooltips que son elementos de mayor prioridad visual
|
|
18
|
-
* - Snackbar (1400): Notificaciones temporales que deben aparecer sobre todo, incluyendo Popovers
|
|
19
|
-
* - Tooltip (1500): Ayudas contextuales que deben estar en la capa más alta para ser siempre visibles
|
|
20
|
-
*
|
|
21
|
-
* El Popover queda entre 1300 y 1400 porque:
|
|
22
|
-
* 1. Debe superar al Dialog (1300) para evitar quedar oculto cuando se renderiza fuera de su árbol
|
|
23
|
-
* 2. Debe estar por debajo de Snackbar (1400) para que las notificaciones importantes sean visibles
|
|
24
|
-
* 3. Debe estar por debajo de Tooltip (1500) para que las ayudas contextuales tengan prioridad
|
|
25
|
-
*/
|
|
26
|
-
zIndex: `calc(${theme.vars.zIndex.modal} + 1)`,
|
|
27
|
-
// Asegura que el Popover esté por encima del Dialog (modal: 1300) cuando se usa container para evitar warnings de aria-hidden
|
|
28
7
|
"& .MuiPaper-root": {
|
|
29
8
|
backgroundColor: theme.vars.palette.background.default,
|
|
30
9
|
boxShadow: theme.vars.customShadows.z4,
|
|
@@ -3,257 +3,254 @@ const popperStyles = {
|
|
|
3
3
|
* Styles for the root element of the popper component.
|
|
4
4
|
*/
|
|
5
5
|
popperRoot: ({ theme, ownerState }) => ({
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
"&.M4LPopperClass-root": {
|
|
17
|
-
marginBottom: theme.vars.size.baseSpacings.sp2 + "!important"
|
|
18
|
-
},
|
|
19
|
-
"&::before": {
|
|
20
|
-
content: '""',
|
|
21
|
-
position: "absolute",
|
|
22
|
-
bottom: -12,
|
|
23
|
-
left: "50%",
|
|
24
|
-
transform: "translateX(-50%)",
|
|
25
|
-
borderRadius: theme.vars.size.baseSpacings.sp1,
|
|
26
|
-
zIndex: -1,
|
|
27
|
-
width: theme.vars.size.baseSpacings.sp4,
|
|
28
|
-
height: theme.vars.size.baseSpacings.sp4,
|
|
29
|
-
rotate: "45deg",
|
|
30
|
-
boxShadow: theme.vars.shadows[4],
|
|
31
|
-
backgroundColor: theme.vars.palette.background.default,
|
|
32
|
-
clipPath: "polygon(100% 100%, 100% 0, 0 100%)"
|
|
33
|
-
}
|
|
6
|
+
position: "relative",
|
|
7
|
+
display: "flex",
|
|
8
|
+
backgroundColor: theme.vars.palette.background.default,
|
|
9
|
+
borderRadius: theme.vars.size.borderRadius.r1,
|
|
10
|
+
boxShadow: theme.vars.shadows[3],
|
|
11
|
+
...ownerState?.arrow && {
|
|
12
|
+
// Top-Center
|
|
13
|
+
'&[data-popper-placement="top"]': {
|
|
14
|
+
"&.M4LPopperClass-root": {
|
|
15
|
+
marginBottom: theme.vars.size.baseSpacings.sp2 + "!important"
|
|
34
16
|
},
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
"
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
"
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
17
|
+
"&::before": {
|
|
18
|
+
content: '""',
|
|
19
|
+
position: "absolute",
|
|
20
|
+
bottom: -12,
|
|
21
|
+
left: "50%",
|
|
22
|
+
transform: "translateX(-50%)",
|
|
23
|
+
borderRadius: theme.vars.size.baseSpacings.sp1,
|
|
24
|
+
zIndex: -1,
|
|
25
|
+
width: theme.vars.size.baseSpacings.sp4,
|
|
26
|
+
height: theme.vars.size.baseSpacings.sp4,
|
|
27
|
+
rotate: "45deg",
|
|
28
|
+
boxShadow: theme.vars.shadows[4],
|
|
29
|
+
backgroundColor: theme.vars.palette.background.default,
|
|
30
|
+
clipPath: "polygon(100% 100%, 100% 0, 0 100%)"
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
// Top-Start
|
|
34
|
+
'&[data-popper-placement="top-start"]': {
|
|
35
|
+
"&.M4LPopperClass-root": {
|
|
36
|
+
marginBottom: theme.vars.size.baseSpacings.sp2 + "!important"
|
|
37
|
+
},
|
|
38
|
+
"&::before": {
|
|
39
|
+
content: '""',
|
|
40
|
+
position: "absolute",
|
|
41
|
+
bottom: -6,
|
|
42
|
+
left: 10,
|
|
43
|
+
borderRadius: theme.vars.size.baseSpacings.sp1,
|
|
44
|
+
zIndex: -1,
|
|
45
|
+
width: theme.vars.size.baseSpacings.sp4,
|
|
46
|
+
height: theme.vars.size.baseSpacings.sp4,
|
|
47
|
+
rotate: "45deg",
|
|
48
|
+
boxShadow: theme.vars.shadows[4],
|
|
49
|
+
backgroundColor: theme.vars.palette.background.default,
|
|
50
|
+
clipPath: "polygon(100% 100%, 100% 0, 0 100%)"
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
// Top-End
|
|
54
|
+
'&[data-popper-placement="top-end"]': {
|
|
55
|
+
"&.M4LPopperClass-root": {
|
|
56
|
+
marginBottom: theme.vars.size.baseSpacings.sp2 + "!important"
|
|
54
57
|
},
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
"
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
58
|
+
"&::before": {
|
|
59
|
+
content: '""',
|
|
60
|
+
position: "absolute",
|
|
61
|
+
bottom: -6,
|
|
62
|
+
right: 10,
|
|
63
|
+
borderRadius: theme.vars.size.baseSpacings.sp1,
|
|
64
|
+
zIndex: -1,
|
|
65
|
+
width: theme.vars.size.baseSpacings.sp4,
|
|
66
|
+
height: theme.vars.size.baseSpacings.sp4,
|
|
67
|
+
rotate: "45deg",
|
|
68
|
+
boxShadow: theme.vars.shadows[4],
|
|
69
|
+
backgroundColor: theme.vars.palette.background.default,
|
|
70
|
+
clipPath: "polygon(100% 100%, 100% 0, 0 100%)"
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
// Bottom-Center
|
|
74
|
+
'&[data-popper-placement="bottom"]': {
|
|
75
|
+
"&.M4LPopperClass-root": {
|
|
76
|
+
marginTop: theme.vars.size.baseSpacings.sp2 + "!important"
|
|
74
77
|
},
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
"
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
"
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
78
|
+
"&::before": {
|
|
79
|
+
content: '""',
|
|
80
|
+
position: "absolute",
|
|
81
|
+
top: 0,
|
|
82
|
+
left: "50%",
|
|
83
|
+
transform: "translateX(-50%)",
|
|
84
|
+
borderRadius: theme.vars.size.baseSpacings.sp1,
|
|
85
|
+
zIndex: -1,
|
|
86
|
+
width: theme.vars.size.baseSpacings.sp4,
|
|
87
|
+
height: theme.vars.size.baseSpacings.sp4,
|
|
88
|
+
rotate: "45deg",
|
|
89
|
+
boxShadow: theme.vars.shadows[4],
|
|
90
|
+
backgroundColor: theme.vars.palette.background.default,
|
|
91
|
+
clipPath: "polygon(0 0, 100% 0, 0 100%)"
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
// Bottom-Start
|
|
95
|
+
'&[data-popper-placement="bottom-start"]': {
|
|
96
|
+
"&.M4LPopperClass-root": {
|
|
97
|
+
marginTop: theme.vars.size.baseSpacings.sp2 + "!important"
|
|
95
98
|
},
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
"
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
99
|
+
"&::before": {
|
|
100
|
+
content: '""',
|
|
101
|
+
position: "absolute",
|
|
102
|
+
top: -5,
|
|
103
|
+
left: 10,
|
|
104
|
+
borderRadius: theme.vars.size.baseSpacings.sp1,
|
|
105
|
+
zIndex: -1,
|
|
106
|
+
width: theme.vars.size.baseSpacings.sp4,
|
|
107
|
+
height: theme.vars.size.baseSpacings.sp4,
|
|
108
|
+
rotate: "45deg",
|
|
109
|
+
boxShadow: theme.vars.shadows[4],
|
|
110
|
+
backgroundColor: theme.vars.palette.background.default,
|
|
111
|
+
clipPath: "polygon(0 0, 100% 0, 0 100%)"
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
// Bottom-End
|
|
115
|
+
'&[data-popper-placement="bottom-end"]': {
|
|
116
|
+
"&.M4LPopperClass-root": {
|
|
117
|
+
marginTop: theme.vars.size.baseSpacings.sp2 + "!important"
|
|
115
118
|
},
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
"
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
119
|
+
"&::before": {
|
|
120
|
+
content: '""',
|
|
121
|
+
position: "absolute",
|
|
122
|
+
top: -5,
|
|
123
|
+
right: 10,
|
|
124
|
+
borderRadius: theme.vars.size.baseSpacings.sp1,
|
|
125
|
+
zIndex: -1,
|
|
126
|
+
width: theme.vars.size.baseSpacings.sp4,
|
|
127
|
+
height: theme.vars.size.baseSpacings.sp4,
|
|
128
|
+
rotate: "45deg",
|
|
129
|
+
boxShadow: theme.vars.shadows[4],
|
|
130
|
+
backgroundColor: theme.vars.palette.background.default,
|
|
131
|
+
clipPath: "polygon(0 0, 100% 0, 0 100%)"
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
// Left-Center
|
|
135
|
+
'&[data-popper-placement="left"]': {
|
|
136
|
+
"&.M4LPopperClass-root": {
|
|
137
|
+
marginRight: theme.vars.size.baseSpacings.sp2 + "!important"
|
|
135
138
|
},
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
"
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
"
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
139
|
+
"&::before": {
|
|
140
|
+
content: '""',
|
|
141
|
+
position: "absolute",
|
|
142
|
+
right: -0,
|
|
143
|
+
top: "50%",
|
|
144
|
+
transform: "translateY(-50%)",
|
|
145
|
+
borderRadius: theme.vars.size.baseSpacings.sp1,
|
|
146
|
+
zIndex: -1,
|
|
147
|
+
width: theme.vars.size.baseSpacings.sp4,
|
|
148
|
+
height: theme.vars.size.baseSpacings.sp4,
|
|
149
|
+
rotate: "45deg",
|
|
150
|
+
boxShadow: theme.vars.shadows[4],
|
|
151
|
+
backgroundColor: theme.vars.palette.background.default,
|
|
152
|
+
clipPath: "polygon(0 0, 100% 100%, 100% 0)"
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
// Left-Start
|
|
156
|
+
'&[data-popper-placement="left-start"]': {
|
|
157
|
+
"&.M4LPopperClass-root": {
|
|
158
|
+
marginRight: theme.vars.size.baseSpacings.sp2 + "!important"
|
|
156
159
|
},
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
"
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
160
|
+
"&::before": {
|
|
161
|
+
content: '""',
|
|
162
|
+
position: "absolute",
|
|
163
|
+
right: -5,
|
|
164
|
+
top: 10,
|
|
165
|
+
borderRadius: theme.vars.size.baseSpacings.sp1,
|
|
166
|
+
zIndex: -1,
|
|
167
|
+
width: theme.vars.size.baseSpacings.sp4,
|
|
168
|
+
height: theme.vars.size.baseSpacings.sp4,
|
|
169
|
+
rotate: "45deg",
|
|
170
|
+
boxShadow: theme.vars.shadows[4],
|
|
171
|
+
backgroundColor: theme.vars.palette.background.default,
|
|
172
|
+
clipPath: "polygon(0 0, 100% 100%, 100% 0)"
|
|
173
|
+
}
|
|
174
|
+
},
|
|
175
|
+
// Left-end
|
|
176
|
+
'&[data-popper-placement="left-end"]': {
|
|
177
|
+
"&.M4LPopperClass-root": {
|
|
178
|
+
marginRight: theme.vars.size.baseSpacings.sp2 + "!important"
|
|
176
179
|
},
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
"
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
180
|
+
"&::before": {
|
|
181
|
+
content: '""',
|
|
182
|
+
position: "absolute",
|
|
183
|
+
right: -5,
|
|
184
|
+
bottom: 10,
|
|
185
|
+
borderRadius: theme.vars.size.baseSpacings.sp1,
|
|
186
|
+
zIndex: -1,
|
|
187
|
+
width: theme.vars.size.baseSpacings.sp4,
|
|
188
|
+
height: theme.vars.size.baseSpacings.sp4,
|
|
189
|
+
rotate: "45deg",
|
|
190
|
+
boxShadow: theme.vars.shadows[4],
|
|
191
|
+
backgroundColor: theme.vars.palette.background.default,
|
|
192
|
+
clipPath: "polygon(0 0, 100% 100%, 100% 0)"
|
|
193
|
+
}
|
|
194
|
+
},
|
|
195
|
+
// Right-Center
|
|
196
|
+
'&[data-popper-placement="right"]': {
|
|
197
|
+
"&.M4LPopperClass-root": {
|
|
198
|
+
marginLeft: theme.vars.size.baseSpacings.sp2 + "!important"
|
|
196
199
|
},
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
"
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
"
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
200
|
+
"&::before": {
|
|
201
|
+
content: '""',
|
|
202
|
+
position: "absolute",
|
|
203
|
+
left: -1,
|
|
204
|
+
top: "50%",
|
|
205
|
+
transform: "translateY(-50%)",
|
|
206
|
+
borderRadius: theme.vars.size.baseSpacings.sp1,
|
|
207
|
+
zIndex: -1,
|
|
208
|
+
width: theme.vars.size.baseSpacings.sp4,
|
|
209
|
+
height: theme.vars.size.baseSpacings.sp4,
|
|
210
|
+
rotate: "315deg",
|
|
211
|
+
boxShadow: theme.vars.shadows[4],
|
|
212
|
+
backgroundColor: theme.vars.palette.background.default,
|
|
213
|
+
clipPath: "polygon(0 0, 100% 0, 0 100%)"
|
|
214
|
+
}
|
|
215
|
+
},
|
|
216
|
+
// Right-Start
|
|
217
|
+
'&[data-popper-placement="right-start"]': {
|
|
218
|
+
"&.M4LPopperClass-root": {
|
|
219
|
+
marginLeft: theme.vars.size.baseSpacings.sp2 + "!important"
|
|
217
220
|
},
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
"
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
221
|
+
"&::before": {
|
|
222
|
+
content: '""',
|
|
223
|
+
position: "absolute",
|
|
224
|
+
left: -6,
|
|
225
|
+
top: 10,
|
|
226
|
+
borderRadius: theme.vars.size.baseSpacings.sp1,
|
|
227
|
+
zIndex: -1,
|
|
228
|
+
width: theme.vars.size.baseSpacings.sp4,
|
|
229
|
+
height: theme.vars.size.baseSpacings.sp4,
|
|
230
|
+
rotate: "315deg",
|
|
231
|
+
boxShadow: theme.vars.shadows[4],
|
|
232
|
+
backgroundColor: theme.vars.palette.background.default,
|
|
233
|
+
clipPath: "polygon(0 0, 100% 0, 0 100%)"
|
|
234
|
+
}
|
|
235
|
+
},
|
|
236
|
+
// Right-End
|
|
237
|
+
'&[data-popper-placement="right-end"]': {
|
|
238
|
+
"&.M4LPopperClass-root": {
|
|
239
|
+
marginLeft: theme.vars.size.baseSpacings.sp2 + "!important"
|
|
237
240
|
},
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
"
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
height: theme.vars.size.baseSpacings.sp4,
|
|
252
|
-
rotate: "315deg",
|
|
253
|
-
boxShadow: theme.vars.shadows[4],
|
|
254
|
-
backgroundColor: theme.vars.palette.background.default,
|
|
255
|
-
clipPath: "polygon(0 0, 100% 0, 0 100%)"
|
|
256
|
-
}
|
|
241
|
+
"&::before": {
|
|
242
|
+
content: '""',
|
|
243
|
+
position: "absolute",
|
|
244
|
+
left: -6,
|
|
245
|
+
bottom: 10,
|
|
246
|
+
borderRadius: theme.vars.size.baseSpacings.sp1,
|
|
247
|
+
zIndex: -1,
|
|
248
|
+
width: theme.vars.size.baseSpacings.sp4,
|
|
249
|
+
height: theme.vars.size.baseSpacings.sp4,
|
|
250
|
+
rotate: "315deg",
|
|
251
|
+
boxShadow: theme.vars.shadows[4],
|
|
252
|
+
backgroundColor: theme.vars.palette.background.default,
|
|
253
|
+
clipPath: "polygon(0 0, 100% 0, 0 100%)"
|
|
257
254
|
}
|
|
258
255
|
}
|
|
259
256
|
}
|
|
@@ -173,8 +173,6 @@ const selectStyles = {
|
|
|
173
173
|
*/
|
|
174
174
|
menuPaper: ({ theme, selectRef }) => ({
|
|
175
175
|
"&": {
|
|
176
|
-
zIndex: `calc(${theme.vars.zIndex.modal} + 1)`,
|
|
177
|
-
// Asegura que el menú del Select esté por encima del Dialog (modal: 1300) cuando se usa dentro de un Dialog
|
|
178
176
|
"& .MuiPaper-root": {
|
|
179
177
|
backgroundColor: theme.vars.palette.background.default,
|
|
180
178
|
marginTop: theme.vars.size.baseSpacings.sp1,
|
|
@@ -2,32 +2,8 @@
|
|
|
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
|
-
*
|
|
6
|
-
* IMPORTANTE: Material-UI aplica aria-hidden="true" a elementos fuera del Dialog cuando está abierto.
|
|
7
|
-
* Este hook usa un MutationObserver para remover automáticamente aria-hidden del contenedor,
|
|
8
|
-
* evitando warnings de accesibilidad cuando hay elementos con foco dentro del Popover.
|
|
9
|
-
*
|
|
10
|
-
* COMPORTAMIENTO DE MATERIAL-UI CON ARIA-HIDDEN:
|
|
11
|
-
* Cuando un Dialog se abre, Material-UI recorre los hijos directos del contenedor (normalmente document.body)
|
|
12
|
-
* y aplica aria-hidden="true" a todos los elementos hermanos del Dialog que:
|
|
13
|
-
* - No estén en la blacklist (mountElement, currentElement, elementsToExclude)
|
|
14
|
-
* - No sean elementos prohibidos por ARIA (TEMPLATE, SCRIPT, STYLE, etc.)
|
|
15
|
-
*
|
|
16
|
-
* PROBLEMA: Material-UI NO tiene forma de saber que:
|
|
17
|
-
* - M4LPopoverContainer contiene popovers relacionados con el Dialog
|
|
18
|
-
* - Los popovers son parte de la interacción del Dialog (se abren desde elementos dentro del Dialog)
|
|
19
|
-
* - El contenedor debe ser accesible para que los popovers funcionen correctamente
|
|
20
|
-
*
|
|
21
|
-
* Para Material-UI, el M4LPopoverContainer es simplemente otro hermano del Dialog en el DOM,
|
|
22
|
-
* por lo que lo marca con aria-hidden="true" siguiendo su lógica de accesibilidad estándar.
|
|
23
|
-
*
|
|
24
|
-
* SOLUCIÓN - MutationObserver:
|
|
25
|
-
* El MutationObserver detecta cuando Material-UI aplica aria-hidden="true" al contenedor
|
|
26
|
-
* y lo remueve inmediatamente. Esto permite que:
|
|
27
|
-
* - Los popovers dentro del contenedor sean accesibles
|
|
28
|
-
* - No se generen warnings de accesibilidad cuando elementos dentro del Popover reciben foco
|
|
29
|
-
* - El contenedor funcione correctamente sin interferir con la lógica de Material-UI
|
|
30
5
|
* @param containerId ID único para el contenedor
|
|
6
|
+
* @param shouldMount Si es true, el contenedor se mantiene en el DOM. Si es false, se retira del DOM.
|
|
31
7
|
* @returns Referencia al contenedor del popover
|
|
32
8
|
*/
|
|
33
|
-
export declare function usePopoverContainer(containerId?: string): import('react').MutableRefObject<HTMLDivElement | null>;
|
|
9
|
+
export declare function usePopoverContainer(containerId?: string, shouldMount?: boolean): import('react').MutableRefObject<HTMLDivElement | null>;
|
|
@@ -1,37 +1,24 @@
|
|
|
1
1
|
import { useRef, useEffect } from "react";
|
|
2
2
|
import { P as POPOVER_CONTAINER_ID } from "./constants.js";
|
|
3
|
-
function usePopoverContainer(containerId = POPOVER_CONTAINER_ID) {
|
|
3
|
+
function usePopoverContainer(containerId = POPOVER_CONTAINER_ID, shouldMount = true) {
|
|
4
4
|
const containerRef = useRef(null);
|
|
5
|
-
const observerRef = useRef(null);
|
|
6
5
|
useEffect(() => {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
target.removeAttribute("aria-hidden");
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
});
|
|
23
|
-
});
|
|
24
|
-
observerRef.current.observe(container, {
|
|
25
|
-
attributes: true,
|
|
26
|
-
attributeFilter: ["aria-hidden"]
|
|
27
|
-
});
|
|
28
|
-
return () => {
|
|
29
|
-
if (observerRef.current) {
|
|
30
|
-
observerRef.current.disconnect();
|
|
31
|
-
observerRef.current = null;
|
|
6
|
+
if (shouldMount) {
|
|
7
|
+
let container = document.getElementById(containerId);
|
|
8
|
+
if (!container) {
|
|
9
|
+
container = document.createElement("div");
|
|
10
|
+
container.id = containerId;
|
|
11
|
+
document.body.appendChild(container);
|
|
12
|
+
}
|
|
13
|
+
containerRef.current = container;
|
|
14
|
+
} else {
|
|
15
|
+
const container = document.getElementById(containerId);
|
|
16
|
+
if (container && container.parentNode) {
|
|
17
|
+
container.parentNode.removeChild(container);
|
|
32
18
|
}
|
|
33
|
-
|
|
34
|
-
|
|
19
|
+
containerRef.current = null;
|
|
20
|
+
}
|
|
21
|
+
}, [containerId, shouldMount]);
|
|
35
22
|
return containerRef;
|
|
36
23
|
}
|
|
37
24
|
export {
|
package/index.js
CHANGED
|
@@ -253,6 +253,7 @@ import { u as u32 } from "./hooks/useSvgColor/useSvgColor.js";
|
|
|
253
253
|
import { u as u33 } from "./hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
|
|
254
254
|
import { u as u34 } from "./hooks/useDataGridPersistence/useDataGridPersistence.js";
|
|
255
255
|
import { u as u35 } from "./hooks/usePopoverContainer/usePopoverContainer.js";
|
|
256
|
+
import { P as P14 } from "./hooks/usePopoverContainer/constants.js";
|
|
256
257
|
import { u as u36 } from "./hooks/useIsVisible/useIsVisible.js";
|
|
257
258
|
import { u as u37 } from "./hooks/useSizeContainer/index.js";
|
|
258
259
|
import { u as u38 } from "./hooks/useWatchTyped/useTypedWatch.js";
|
|
@@ -377,6 +378,7 @@ export {
|
|
|
377
378
|
O as ObjectLogs,
|
|
378
379
|
O2 as ObjectQueue,
|
|
379
380
|
P8 as PDFViewer,
|
|
381
|
+
P14 as POPOVER_CONTAINER_ID,
|
|
380
382
|
P13 as Pager,
|
|
381
383
|
P7 as PaperForm,
|
|
382
384
|
P4 as PeriodFormatter,
|