frontend-plus-react 0.8.0 → 0.8.1

package/CLAUDE.md

@@ -70,6 +70,7 @@ Son las de `dmencu` (que aplican a todo proyecto compartido de esta carpeta), es
 - F4 con la tecla apretada: las pulsaciones que caen en la celda antes de que el editor nuevo tenga el foco se le pasan por `registrarEditor`, o quedan en cola hasta que haya uno. F4 usa el valor que acaba de copiar si la fila de arriba todavía no se redibujó.
 
 ### Detalles desplegados (como `backend-plus`)
+- **El botón del detalle**: Ctrl+clic o la ruedita lo abren en otra pestaña. La ruedita llega como `auxclick`, y en Windows el navegador empieza el desplazamiento automático al apretarla y no lo manda: el botón cancela el `mousedown` del botón del medio. El botón se centra sobre toda la celda (`position: absolute; inset: 0`): la columna mide 30 px y la grilla le deja 8 px de margen a cada lado, así que centrarlo dentro del margen lo corría a la derecha de su sigla.
 - Un detalle es una fila especial (`FilaDetalle`, marcada con un `Symbol`) que se intercala debajo de su fila y ocupa todas las columnas; adentro hay otra `GenericDataGrid` (recursiva). Ctrl+click o botón del medio lo abre en otra pestaña.
 - Alturas: **de arriba hacia abajo**. La grilla principal toma lo que queda de la ventana; cada detalle recibe `altoDisponible` y no puede pasar de ahí, así su pie queda visible. No calcular el tope con el alto medido de la grilla padre: una grilla de pocas filas es baja y aplasta a su detalle.
 - Un detalle con muchas filas muestra `firstDisplayCount` (20) cuando supera `firstDisplayOverLimit` (30), los mismos umbrales de `backend-plus`, y **virtualiza** sus filas; los chicos crecen según su contenido. La grilla principal siempre virtualiza.
@@ -118,7 +119,7 @@ Son las de `dmencu` (que aplican a todo proyecto compartido de esta carpeta), es
 - Íconos grises; el ítem seleccionado y el grupo abierto toman el color de su tipo. Una wScreen se considera implementada si está en `myWScreens` **o** si el puente está encendido (se pide a backend-plus); el triángulo de advertencia es solo para «no implementada». Las pantallas del puente viven en `/bp/menu#w=<pantalla>`: así se detecta cuál está seleccionada.
 
 ### Estilo alineado con el skin `modern` de backend-skins
-- Para que lo que entra por el puente se parezca: bordes `#e0e0e0`, encabezado `#eceff1` con letra de peso 500, hover y selección con el color primario translúcido (variables `--rdg-*` de `.rdg-light` en `GenericDataGrid.css`; usan `--primary-rgb` del skin si está cargado). Los íconos de acciones de la grilla son grises sin borde (toman su color al pasar el mouse), como `.table-button`. Sigue distinto: la barra azul del título de cada grilla y los íconos (acá son los de MUI).
+- Para que lo que entra por el puente se parezca: bordes `#e0e0e0`, encabezado `#eceff1` con letra de peso 500, hover y selección con el color primario translúcido (variables `--rdg-*` de `.rdg-light` en `GenericDataGrid.css`; usan `--primary-rgb` del skin si está cargado). Los íconos de acciones de la grilla son grises sin borde (toman su color al pasar el mouse), como `.table-button`. Al scrollear, detrás de las filas hay un patrón de filas vacías (`background-image` de `.rdg-light`, 30 px) para que no se vea blanco mientras React dibuja las filas virtualizadas, y `content-visibility: visible` (react-data-grid lo pone en `auto`). Por eso los colores de hover y selección tienen que ser **opacos** (`color-mix` con blanco): uno translúcido deja ver el patrón como una raya en la fila. Sigue distinto: la barra azul del título de cada grilla y los íconos (acá son los de MUI).
 
 ### Cambiar contraseña y recuperar clave
 - **Cambiar contraseña** (`/chpass`, `CambiarClavePage`; ícono de llave junto a «Salir»): `POST /chpass` con `oldPassword`, `newPassword` y `repPassword`, como el formulario de backend-plus. El servidor contesta con una redirección: al login si cambió (y **cierra la sesión**) o de vuelta a `/chpass` con el motivo en la página (`.error-message`, `resultadoDeCambioDeClave`; depende del HTML de `chpass.jade`).

package/dist/index.cjs

@@ -1441,8 +1441,12 @@ function BotonDetalle({ row, rowId, detailTable, deshabilitado }) {
     import_material3.IconButton,
     {
       size: "small",
+      sx: { width: 24, height: 24, p: 0 },
       disabled: deshabilitado,
       onClick: (e) => alternarDetalle(row, rowId, detailTable, e.ctrlKey || e.metaKey),
+      onMouseDown: (e) => {
+        if (e.button === 1) e.preventDefault();
+      },
       onAuxClick: (e) => {
         if (e.button === 1) alternarDetalle(row, rowId, detailTable, true);
       },
@@ -2122,7 +2126,7 @@ var ActionsColumnHeaderCell = ({
     )
   ] });
 };
-var detailColumnCellHeaderRenderer = (props, detailTable) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material4.Tooltip, { title: detailTable.label, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material4.Typography, { variant: "caption", sx: { fontSize: "0.75rem", fontWeight: "bold" }, children: detailTable.abr.toUpperCase() }) });
+var detailColumnCellHeaderRenderer = (props, detailTable) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material4.Tooltip, { title: detailTable.label, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material4.Box, { sx: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material4.Typography, { variant: "caption", sx: { fontSize: "0.75rem", fontWeight: "bold" }, children: detailTable.abr.toUpperCase() }) }) });
 
 // src/components/grid/FilterInputRender.tsx
 var import_material9 = require("@mui/material");