anteriority-ui 1.18.0 → 1.18.1

package/AnteriorityUI.md

@@ -3299,7 +3299,7 @@ Empieza con una hoja `Hoja1` de 100 × 20 celdas. Botón «+» de la barra infer
 - **Dependencia:** las fórmulas usan `fast-formula-parser`, un peer **opcional** (`pnpm add fast-formula-parser`) cargado con `import()` solo cuando `xlsxEditable` es `true`; sin él, las celdas que empiezan con `=` se guardan como texto. Recalcular todo en cada edición es lineal en la cantidad de fórmulas: libros con decenas de miles de fórmulas pueden notarse lentos.
 - **Límites:** no se pueden insertar ni eliminar filas o columnas (sí escribir debajo de la última fila, por ejemplo con Autosuma); no se editan estilos de celda; borrados y pegados masivos están limitados a 200.000 celdas.
 
-**Notas (hojas de cálculo):** SheetJS (`xlsx`) es un peer **opcional**, cargado con `import()` dinámico solo cuando se muestra una planilla. La versión de npm (0.18.x) está desactualizada y con vulnerabilidades conocidas; instalar la oficial desde el CDN de SheetJS: `pnpm add https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz`. El archivo se descarga con `fetch` (requiere CORS) y se parsea completo en el hilo principal: con archivos de varios MB puede haber una pausa breve al abrir; solo las filas visibles se pintan. No muestra estilos de celda de Excel (colores, bordes, celdas combinadas), imágenes ni gráficos.
+**Notas (hojas de cálculo):** SheetJS (`xlsx`) es un peer **opcional** que el consumidor debe instalar en su proyecto: la librería no lo incluye como dependencia. Se carga con `import()` dinámico solo cuando se muestra una planilla. Instalar la versión oficial desde el CDN de SheetJS: `pnpm add https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz`. La versión de npm (0.18.x) está desactualizada y con vulnerabilidades conocidas; la 0.20.3 no se publica en npm, por eso `pnpm add xlsx` falla con `No matching version found for xlsx@^0.20.3`. Con `anteriority-ui` 1.18.0 hay que usar el tarball del CDN; desde la versión que acepta `^0.18.5 || ^0.20.3` también sirve `xlsx@0.18.5`. El archivo se descarga con `fetch` (requiere CORS) y se parsea completo en el hilo principal: con archivos de varios MB puede haber una pausa breve al abrir; solo las filas visibles se pintan. No muestra estilos de celda de Excel (colores, bordes, celdas combinadas), imágenes ni gráficos.
 
 ---
 
@@ -4118,7 +4118,7 @@ Contenedor con scrollbars personalizados (vertical y/u horizontal) que se oculta
 
 **Import:**
 ```jsx
-import ScrollBar from 'screens/components/ScrollBar';
+import { ScrollBar } from 'anteriority-ui';
 ```
 
 **Uso básico:**

package/README.md

@@ -79,13 +79,15 @@ pnpm add react react-dom @mui/material @emotion/react @emotion/styled
    pnpm add pdfjs-dist
    ```
 
-6. (Opcional) Si vas a mostrar planillas (`.xlsx`, `.xls`, `.csv`) con `MediaViewer`, agregá `xlsx`. Instalá la versión oficial desde el CDN de SheetJS: la de npm (0.18.x) está desactualizada y tiene vulnerabilidades conocidas. Para poder **editarlas** con fórmulas (`xlsxEditable`), sumá también `fast-formula-parser`:
+6. (Opcional) Si vas a mostrar planillas (`.xlsx`, `.xls`, `.csv`) con `MediaViewer`, agregá `xlsx`. La librería **no** lo instala sola: es un peer dependency opcional, así que tenés que agregarlo a tu proyecto. Recomendamos la versión oficial de SheetJS desde su CDN (0.20.3), porque la de npm (0.18.x) está desactualizada y tiene vulnerabilidades conocidas. Para poder **editarlas** con fórmulas (`xlsxEditable`), sumá también `fast-formula-parser`:
 
    ```bash
    pnpm add https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz
    pnpm add fast-formula-parser   # solo si usás xlsxEditable
    ```
 
+   Si `pnpm add xlsx` falla con `No matching version found for xlsx@^0.20.3`, es porque la 0.20.3 no está en npm: usá el tarball de arriba. Con `anteriority-ui` 1.18.0 hay que usar el tarball del CDN; desde la versión que incluye la corrección del rango (`^0.18.5 || ^0.20.3`) también sirve `pnpm add xlsx@0.18.5`, aunque con las vulnerabilidades mencionadas.
+
 ## Importar componentes
 
 Todos los componentes están indexados en el entry point principal — no hace falta conocer el subpath de cada uno:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anteriority-ui",
-  "version": "1.18.0",
+  "version": "1.18.1",
   "description": "Librería interna de componentes React (UI) construida sobre MUI, lucide-react y CSS Modules.",
   "main": "index.js",
   "bin": {
@@ -47,7 +47,7 @@
     "pdfjs-dist": "^6.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "xlsx": "^0.20.3"
+    "xlsx": "^0.18.5 || ^0.20.3"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/skill/anteriority-ui/SKILL.md

@@ -40,7 +40,7 @@ Dependencias opcionales según el componente:
 |---|---|
 | `SchemaForm` | `@rjsf/core` y `@rjsf/validator-ajv8` |
 | `MediaViewer` (PDFs) | `pdfjs-dist` |
-| `MediaViewer` (planillas `.xlsx`/`.xls`/`.csv`) | `xlsx` desde `https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz` (no la de npm); con `xlsxEditable` y fórmulas, también `fast-formula-parser` |
+| `MediaViewer` (planillas `.xlsx`/`.xls`/`.csv`) | `xlsx` (peer opcional que el consumidor instala; no viene con la librería) desde `https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz` (preferido sobre la de npm, que es 0.18.x y tiene vulnerabilidades); con `xlsxEditable` y fórmulas, también `fast-formula-parser` |
 | `PasswordResetPanel`, `UserEditPopover` | configurar el cliente HTTP (ver §5) |
 
 Todo lo demás (Chart, Recharts, Nivo, lucide, react-icons, markdown, mermaid)
@@ -168,7 +168,8 @@ Nombres exactos del barrel.
 - `lucide` — `anteriority-ui/lucide` re-exporta lucide-react completo.
 
 **Otros**
-- `DesplegablePanel` — fila expandible tipo acordeón. `ScrollBar` — scroll personalizado que se oculta solo.
+- `DesplegablePanel` — fila expandible tipo acordeón.
+- `ScrollBar` — contenedor con scroll personalizado que se oculta solo. Úsalo para cualquier área con scroll en vez de la barra nativa (ver sección 7).
 - `QRCode` — genera un código QR (SVG) desde un texto/URL; logo, estilos y descarga.
 - `Footer` — barra inferior con zonas izquierda/centro/derecha y botones de acción (`actions`), opcionalmente sticky.
 - `FileDropZone` — zona para recibir un archivo por arrastre, pegado o click (filtro `accept`).
@@ -215,6 +216,17 @@ variant; las props de color son un override por encima de esa paleta.
 - **No mezcles MUI directo con componentes de la librería** para lo mismo. Si necesitás un componente MUI que la librería ya envuelve (`Button`, `TextField`, `Autocomplete`, etc.), usá el de la librería.
 - **Respetá los props de cada componente tal como están documentados.** No pases props que no aparecen en la doc; si una falla en silencio, revisá el nombre exacto en `AnteriorityUI.md`.
 - **Componentes con portal** (`DrawPanel`, `AlertModal`, `ModalTooltip`, `Frame` como modal, `EmojiPickerModal`) se renderizan sobre `document.body`. No los envuelvas en contenedores con `overflow: hidden` esperando que queden contenidos.
+- **Scroll siempre con `ScrollBar`:** cualquier área con scroll visible (listas, menús, paneles, diálogos) usa `ScrollBar` de la librería, no `overflow: auto` ni la barra nativa del navegador. Las páginas quedan con un scroll más prolijo y consistente. Ejemplo: `import { ScrollBar } from 'anteriority-ui';` y luego `<ScrollBar vertical maxHeight={300}>…</ScrollBar>`. Varios componentes ya traen su propio scroll: **no lo envuelvas en `ScrollBar` otra vez** (duplicaría el scroll). Los que scrollean por dentro y cómo activarlo:
+  - `Frame` con `scrollable` (y `maxHeight`); `NotificationsPanel` ya viene así.
+  - `TableA` / `TableB` con `maxHeight` (y `stickyHeader` para fijar el encabezado).
+  - `CommandPalette`: la lista de resultados, con `maxHeight`.
+  - `AppShell`: el área de `children`. `Container` y `Footer` también se comportan así con `sticky`/`stickyHeader`.
+  - `Selector`: la lista desplegable, con `hideScrollbar` (por defecto oculta la barra; `scrollbarColor` la colorea cuando se muestra).
+  - `EmojiPickerModal` / `EmojiPicker`: las grillas de emojis e íconos.
+  - `MarkdownEditor`: el textarea y la vista previa (`scrollbarColor`).
+  - `MediaViewer` (planillas, PDF, Word, Markdown) y `Resizable`: scroll interno del contenido.
+  - `ChatWindow`: la lista de mensajes, con scroll propio.
+  Si el componente que usás ya está en esta lista, usá su prop de scroll. Solo envolvé con `ScrollBar` contenido que no tenga scroll propio. Para el detalle de props, ver `AnteriorityUI.md`.
 - **Estado controlado:** la mayoría de los componentes de entrada son controlados (`value` + `onChange`, `open` + `onClose`). Mantené el estado en tu componente.
 - **Storybook de la librería** (si está disponible en el proyecto) muestra cada componente en variantes reales; úsalo como referencia visual.