anteriority-ui 1.13.0 → 1.14.0

package/.verify-bundle.js

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/.verify-bundle.js
-size: 59203832 bytes
-sha256: 093b38d58005defe6b5be7a4b3a7f2351cbbafd7650e46728f51ef53d0b626cb
+size: 59204256 bytes
+sha256: 576e135ced8df47f9bb7c7db632d718d659e668e6ee7a70f7402f8098c3d6ddc

package/AnteriorityUI.md

@@ -626,6 +626,7 @@ import CalendarPicker from '../CalendarPicker/index'; // export default
 | `borderColor` | string | — | Solo `variant="inline"`. Color de las líneas divisorias del grid (`--cp-agenda-border`). |
 | `hoverColor` | string | — | Solo `variant="inline"`. Fondo al pasar el mouse sobre una celda (`--cp-agenda-hover`). |
 | `holidayColor` | string | — | Solo `variant="inline"`. Color del nombre del feriado/efeméride en la celda (`--cp-agenda-holiday`) — el popover no tiene este, el nombre nunca se muestra como texto ahí (ver nota). |
+| `selectorsPopperZIndex` | number | `100000` (default interno de `Selector`) | Solo `variant="popover"`. `z-index` del `Popper` de los `Selector` (Material-UI) de "Mes"/"Año" que se abren al clickear el título del calendario — ese `Popper` se renderiza vía portal al final de `<body>`, fuera del popover del calendario (`z-index: 20`). Ajustar si un modal/drawer propio del proyecto consumidor tiene un `z-index` mayor y "tapa" los clics del listado de años (ver nota). |
 
 **Ejemplos:**
 ```jsx
@@ -695,6 +696,7 @@ import CalendarPicker from '../CalendarPicker/index'; // export default
 - `bgColor`/`textColor`/`mutedColor`/`mutedBgColor`/`borderColor`/`hoverColor` (paleta general del calendario grande) solo existen en `variant="inline"` — el popover usa su propia paleta fija (ver `selectedColor`/`accentColor`).
 - El cálculo de feriados usa `date-holidays` (datos reales por país, no hardcodeados en la librería); el de fase lunar es un cálculo astronómico aproximado por ciclo sinódico (sin dependencia de red), con ±1 día de margen de error — no reemplaza una efeméride astronómica oficial.
 - El popover (`variant="popover"`) se reposiciona automáticamente para no desbordar el viewport: si el input está cerca del borde derecho (o dentro de un contenedor angosto), se desplaza hacia la izquierda lo necesario para quedar completo en pantalla, clampeando también por la izquierda si el contenedor es más angosto que el popover (320px). Se recalcula al abrir y en cada `resize` de la ventana — no requiere ninguna prop.
+- Si al abrir el selector de "Año"/"Mes" dentro de un modal/drawer propio (ej. un panel lateral) la lista se ve pero los clics no registran, es un conflicto de capas: el `Popper` de MUI vive en un portal a `<body>`, fuera de ese modal, y si el modal tiene su propio overlay con `z-index` mayor al default del `Popper` (`100000`), ese overlay intercepta los clics aunque visualmente el listado quede encima. Subir `selectorsPopperZIndex` por encima del `z-index` de ese overlay soluciona el bloqueo.
 
 ---
 
@@ -2772,6 +2774,7 @@ import Selector from '../Material-UI/Components/Selector/index'; // export defau
 | chipBgColor | string | — | Fondo de los chips de selección (modo `multiSelect`). |
 | chipTextColor | string | — | Color de texto de los chips. |
 | chipIconColor | string | — | Color del ícono "X" de cada chip. |
+| popperZIndex | number | `100000` | `z-index` del `Popper` del listado desplegable (se renderiza en un portal al final de `<body>`, fuera del árbol del componente). Ajustar si un overlay/modal propio del proyecto consumidor tiene un `z-index` mayor y tapa los clics del listado. |
 
 **Ejemplos:**
 ```jsx
@@ -2797,7 +2800,7 @@ import Selector from '../Material-UI/Components/Selector/index'; // export defau
 />
 ```
 
-**Notas:** El matching de `value` contra `options` ignora mayúsculas, espacios, guiones y guiones bajos si no hay coincidencia exacta por `value`. `fullWidth` default es `true` — si solo se pasa `className` para controlar el ancho sin `fullWidth={false}`, el `sx.width: '100%'` default sigue ganando; para un ancho custom, combinar `fullWidth={false}` con `style={{ width }}`. En `multiSelect`, `disableCloseOnSelect` se activa automáticamente (el dropdown no se cierra después de cada click).
+**Notas:** El matching de `value` contra `options` ignora mayúsculas, espacios, guiones y guiones bajos si no hay coincidencia exacta por `value`. `fullWidth` default es `true` — si solo se pasa `className` para controlar el ancho sin `fullWidth={false}`, el `sx.width: '100%'` default sigue ganando; para un ancho custom, combinar `fullWidth={false}` con `style={{ width }}`. En `multiSelect`, `disableCloseOnSelect` se activa automáticamente (el dropdown no se cierra después de cada click). `popperZIndex`: el `Popper` de MUI se monta vía portal al final de `<body>`, fuera de cualquier contenedor con overflow/scroll o `z-index` local del componente padre (ej. el popover de `CalendarPicker`, con `z-index: 20`) — si el proyecto consumidor tiene un modal/drawer propio con `z-index` superior al default (`100000`), esa capa puede interceptar los clics sobre el listado aunque se vea visualmente encima; subir `popperZIndex` por encima de esa capa resuelve el bloqueo de clics.
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anteriority-ui",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "Librería interna de componentes React (UI) construida sobre MUI, lucide-react y CSS Modules.",
   "main": "index.js",
   "license": "ISC",

package/screens/components/CalendarPicker/components/CalendarGrid/index.js

@@ -45,6 +45,7 @@ const CalendarGrid = ({
   moonPhaseColor,
   tooltipBgColor,
   tooltipTextColor,
+  selectorsPopperZIndex,
   className = ""
 }) => {
   const currentYear = currentDate.getFullYear();
@@ -94,7 +95,8 @@ const CalendarGrid = ({
           label: "Mes",
           value: currentDate.getMonth(),
           onChange: onMonthChange,
-          options: MONTHS.map((m, index) => ({ value: index, label: m }))
+          options: MONTHS.map((m, index) => ({ value: index, label: m })),
+          ...selectorsPopperZIndex !== void 0 ? { popperZIndex: selectorsPopperZIndex } : {}
         }
       ) }),
       /* @__PURE__ */ jsx("div", { className: styles.selectorGroup, children: /* @__PURE__ */ jsx(
@@ -103,7 +105,8 @@ const CalendarGrid = ({
           label: "A\xF1o",
           value: currentDate.getFullYear(),
           onChange: onYearChange,
-          options: years.map((y) => ({ value: y, label: String(y) }))
+          options: years.map((y) => ({ value: y, label: String(y) })),
+          ...selectorsPopperZIndex !== void 0 ? { popperZIndex: selectorsPopperZIndex } : {}
         }
       ) }),
       /* @__PURE__ */ jsx(

package/screens/components/CalendarPicker/index.js

@@ -29,6 +29,7 @@ const CalendarPicker = ({
   tooltipBgColor,
   tooltipTextColor,
   moonPhaseColor,
+  selectorsPopperZIndex,
   variant = "popover",
   showFooter = true,
   renderDay,
@@ -266,7 +267,8 @@ const CalendarPicker = ({
       tooltipBgColor,
       tooltipTextColor,
       showMoonPhases,
-      moonPhaseColor
+      moonPhaseColor,
+      selectorsPopperZIndex
     }
   );
   return /* @__PURE__ */ jsxs(

package/screens/components/Material-UI/Components/Selector/constants.js

@@ -0,0 +1,4 @@
+const DEFAULT_POPPER_Z_INDEX = 1e5;
+export {
+  DEFAULT_POPPER_Z_INDEX
+};

package/screens/components/Material-UI/Components/Selector/index.js

@@ -5,6 +5,7 @@ import TextField from "@mui/material/TextField";
 import Autocomplete from "@mui/material/Autocomplete";
 import Checks from "../../../Checks/index";
 import styles from "./index.module.css";
+import { DEFAULT_POPPER_Z_INDEX } from "./constants.js";
 function Selector({
   label,
   value,
@@ -25,7 +26,8 @@ function Selector({
   scrollbarColor,
   chipBgColor,
   chipTextColor,
-  chipIconColor
+  chipIconColor,
+  popperZIndex = DEFAULT_POPPER_Z_INDEX
 }) {
   const normalizeVal = (val) => String(val || "").toLowerCase().replace(/[_\s\/-]+/g, "");
   const findOption = (val) => val !== "" && val !== void 0 && val !== null ? options.find(
@@ -62,7 +64,7 @@ function Selector({
       isOptionEqualToValue: (option, val) => String(option.value) === String(val?.value) || normalizeVal(option.value) === normalizeVal(val?.value) || normalizeVal(option.label) === normalizeVal(val?.label),
       slotProps: {
         popper: {
-          sx: { zIndex: 1e5 }
+          sx: { zIndex: popperZIndex }
         },
         chip: chipBgColor || chipTextColor || chipIconColor ? {
           sx: {