@zauru-sdk/components 6.19.0 → 6.19.1

package/dist/esm/Matrix/CheckMatrixCards.js

@@ -3,9 +3,10 @@ import { useEffect, useState } from "react";
 export const CheckMatrixCards = ({ rows, columns, isChecked, isPending = () => false, onToggle, disabled = false, renderRowAction, checkedLabel = "Marcado", uncheckedLabel = "Sin marcar", pendingLabel = "Guardando…", emptyText = "No hay filas para mostrar.", pageSize = 20, showMoreLabel = "Mostrar más", className = "", }) => {
     const safePageSize = Math.max(1, pageSize);
     const [visibleCount, setVisibleCount] = useState(safePageSize);
+    const rowKeys = rows.map((row) => row.key).join("\u0000");
     useEffect(() => {
         setVisibleCount(safePageSize);
-    }, [rows, safePageSize]);
+    }, [rowKeys, safePageSize]);
     if (rows.length === 0) {
         return _jsx("p", { className: `p-4 text-sm text-gray-600 ${className}`, children: emptyText });
     }

package/dist/esm/SidePanel/index.js

@@ -42,6 +42,12 @@ export const SidePanel = ({ children, closeOnClickOutside = true, widthPercentag
         document.addEventListener("keydown", handleEscape);
         return () => document.removeEventListener("keydown", handleEscape);
     }, [isOpen]);
+    useEffect(() => {
+        if (isOpen)
+            panelRef.current?.removeAttribute("inert");
+        else
+            panelRef.current?.setAttribute("inert", "");
+    }, [isOpen]);
     useEffect(() => {
         if (isOpen) {
             wasOpenRef.current = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "6.19.0",
+  "version": "6.19.1",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -62,5 +62,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "c0b80c26ce1e4788cb7683fb6514ad449b46ac59"
+  "gitHead": "08f14cc3a87fabe1b2dfe678b9fdeb32ed4aaaef"
 }

package/src/Matrix/CheckMatrixCards.tsx

@@ -46,10 +46,11 @@ export const CheckMatrixCards = ({
 }: CheckMatrixCardsProps) => {
   const safePageSize = Math.max(1, pageSize);
   const [visibleCount, setVisibleCount] = useState(safePageSize);
+  const rowKeys = rows.map((row) => row.key).join("\u0000");
 
   useEffect(() => {
     setVisibleCount(safePageSize);
-  }, [rows, safePageSize]);
+  }, [rowKeys, safePageSize]);
 
   if (rows.length === 0) {
     return <p className={`p-4 text-sm text-gray-600 ${className}`}>{emptyText}</p>;

package/src/SidePanel/index.tsx

@@ -132,6 +132,11 @@ export const SidePanel: React.FC<SidePanelProps> = ({
     return () => document.removeEventListener("keydown", handleEscape);
   }, [isOpen]);
 
+  useEffect(() => {
+    if (isOpen) panelRef.current?.removeAttribute("inert");
+    else panelRef.current?.setAttribute("inert", "");
+  }, [isOpen]);
+
   useEffect(() => {
     if (isOpen) {
       wasOpenRef.current = true;

package/build/assets/Matrix.stories-Cxd7sZW4.js

@@ -1 +0,0 @@
-import{r as u,j as e}from"./index-DxYjnckq.js";const E=({rows:n,columns:l,isChecked:d,isPending:a=()=>!1,onToggle:g,disabled:s=!1,renderRowAction:t,checkedLabel:o="Marcado",uncheckedLabel:p="Sin marcar",pendingLabel:c="Guardando…",emptyText:m="No hay filas para mostrar.",pageSize:C=20,showMoreLabel:$="Mostrar más",className:f=""})=>{const x=Math.max(1,C),[k,j]=u.useState(x);if(u.useEffect(()=>{j(x)},[n,x]),n.length===0)return e.jsx("p",{className:`p-4 text-sm text-gray-600 ${f}`,children:m});const w=n.slice(0,k);return e.jsxs("div",{className:`space-y-3 ${f}`,children:[w.map(i=>e.jsxs("fieldset",{className:"min-w-0 rounded-lg border border-gray-200 bg-white p-3 shadow-sm",children:[e.jsxs("div",{className:"mb-3 flex min-w-0 items-start justify-between gap-3",children:[e.jsxs("legend",{className:"min-w-0 flex-1 px-0 text-sm font-semibold text-gray-900",children:[e.jsx("span",{className:"block break-words",children:i.label}),i.description?e.jsx("span",{className:"mt-0.5 block break-words text-xs font-normal text-gray-600",children:i.description}):null]}),t?e.jsx("div",{className:"shrink-0",children:t(i)}):null]}),e.jsx("div",{className:"grid gap-2 sm:grid-cols-2",children:l.map(r=>{const h=d(i.key,r.key),b=a(i.key,r.key),v=`check-matrix-${encodeURIComponent(i.key)}-${encodeURIComponent(r.key)}`;return e.jsxs("label",{htmlFor:v,className:`flex min-h-11 cursor-pointer items-center gap-3 rounded-md border px-3 py-2 text-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-1 ${h?"border-indigo-200 bg-indigo-50 text-indigo-950":"border-gray-200 bg-gray-50 text-gray-800"} ${b||s?"cursor-not-allowed opacity-70":"hover:border-indigo-300"}`,children:[e.jsx("input",{id:v,type:"checkbox",checked:h,disabled:s||b,onChange:S=>g(i.key,r.key,S.target.checked),className:"h-5 w-5 shrink-0 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"}),e.jsx("span",{className:"min-w-0 flex-1 break-words font-medium",children:r.label}),e.jsx("span",{className:`shrink-0 text-xs font-medium ${h?"text-indigo-700":"text-gray-600"}`,"aria-live":b?"polite":void 0,children:b?c:h?o:p})]},r.key)})})]},i.key)),k<n.length?e.jsxs("button",{type:"button",onClick:()=>j(i=>i+x),className:"min-h-11 w-full cursor-pointer rounded-md border border-indigo-300 bg-white px-4 py-2 text-sm font-semibold text-indigo-700 hover:bg-indigo-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2",children:[$," (",n.length-k,")"]}):null]})},R={sm:{mobile:"sm:hidden",desktop:"hidden sm:block"},md:{mobile:"md:hidden",desktop:"hidden md:block"},lg:{mobile:"lg:hidden",desktop:"hidden lg:block"}},M=({desktop:n,desktopBreakpoint:l="md",...d})=>{const a=R[l];return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.mobile,children:e.jsx(E,{...d})}),e.jsx("div",{className:a.desktop,children:n})]})},N=[{key:"129",label:"129 · Cooperativa El Progreso",description:"San Juan"},{key:"302",label:"302 · Productor con un nombre largo para validar el ajuste de texto"}],y=[{key:"brocoli",label:"Brócoli certificado"},{key:"radicchio",label:"Radicchio"},{key:"elotin",label:"Elotín"}],B=()=>{const[n,l]=u.useState(new Set(["129:radicchio"])),d=(s,t)=>!n.has(`${s}:${t}`),a=(s,t,o)=>{l(p=>{const c=new Set(p),m=`${s}:${t}`;return o?c.delete(m):c.add(m),c})},g=e.jsx("div",{className:"overflow-x-auto rounded-md border border-gray-200",children:e.jsxs("table",{className:"min-w-full text-sm",children:[e.jsx("thead",{className:"bg-gray-50",children:e.jsxs("tr",{children:[e.jsx("th",{className:"px-3 py-2 text-left",children:"Proveedor"}),y.map(s=>e.jsx("th",{className:"px-3 py-2 text-center",children:s.label},s.key))]})}),e.jsx("tbody",{children:N.map(s=>e.jsxs("tr",{className:"border-t border-gray-200",children:[e.jsx("th",{className:"px-3 py-2 text-left",children:s.label}),y.map(t=>e.jsx("td",{className:"px-3 py-2 text-center",children:e.jsx("input",{type:"checkbox","aria-label":`${String(s.label)}, ${String(t.label)}`,checked:d(s.key,t.key),onChange:o=>a(s.key,t.key,o.target.checked)})},t.key))]},s.key))})]})});return e.jsx(M,{rows:N,columns:y,desktop:g,isChecked:d,onToggle:a,checkedLabel:"Permitida",uncheckedLabel:"Bloqueada"})};typeof window<"u"&&window.document&&window.document.createElement&&document.documentElement.setAttribute("data-storyloaded","");export{B as Responsive};

package/build/assets/SidePanel.stories-Atykcy9h.js

@@ -1 +0,0 @@
-import{r as s,j as e}from"./index-DxYjnckq.js";import{h as E,i as M,p as k,m as f,A as z}from"./proxy-DgkUxN7K.js";function C(){!E.current&&M();const[r]=s.useState(k.current);return r}const g=()=>e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",className:"h-6 w-6","aria-hidden":"true",focusable:"false",children:e.jsx("path",{fillRule:"evenodd",d:"M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z",clipRule:"evenodd"})}),v=()=>e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",className:"h-6 w-6","aria-hidden":"true",focusable:"false",children:e.jsx("path",{fillRule:"evenodd",d:"M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z",clipRule:"evenodd"})}),L=()=>e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",className:"h-6 w-6","aria-hidden":"true",focusable:"false",children:e.jsx("path",{fillRule:"evenodd",d:"M3 6a1 1 0 011-1h16a1 1 0 110 2H4a1 1 0 01-1-1zm0 6a1 1 0 011-1h10a1 1 0 110 2H4a1 1 0 01-1-1zm0 6a1 1 0 011-1h4a1 1 0 110 2H4a1 1 0 01-1-1z",clipRule:"evenodd"})}),I=({children:r,closeOnClickOutside:a=!0,widthPercentage:b=25,buttonIcon:l="chevron",ariaLabel:y="Panel lateral",openButtonLabel:j="Abrir panel",closeButtonLabel:m="Cerrar panel"})=>{const[t,i]=s.useState(!1),d=s.useRef(null),h=s.useRef(null),p=s.useRef(null),c=s.useRef(!1),x=s.useId(),u=C(),w=()=>{i(n=>!n)};s.useEffect(()=>{const n=o=>{t&&a&&d.current&&!d.current.contains(o.target)&&i(!1)};return document.addEventListener("mousedown",n),()=>{document.removeEventListener("mousedown",n)}},[a,t]),s.useEffect(()=>{if(!t)return;const n=o=>{o.key==="Escape"&&i(!1)};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[t]),s.useEffect(()=>{var n,o;if(t){c.current=!0,(n=h.current)==null||n.focus();const N=document.body.style.overflow;return window.matchMedia("(max-width: 767px)").matches&&(document.body.style.overflow="hidden"),()=>{document.body.style.overflow=N}}c.current&&(c.current=!1,(o=p.current)==null||o.focus())},[t]);const R=()=>{if(typeof l=="string")switch(l){case"chevron":return t?e.jsx(v,{}):e.jsx(g,{});case"filter":return e.jsx(L,{});default:return e.jsx(g,{})}else return l};return e.jsxs(e.Fragment,{children:[e.jsxs(f.div,{id:x,ref:d,role:"dialog","aria-modal":t?"true":void 0,"aria-label":y,"aria-hidden":!t,initial:{x:"100%"},animate:{x:t?0:"100%"},transition:u?{duration:0}:{type:"spring",stiffness:300,damping:30},className:"fixed right-0 top-0 z-[9999] h-full w-[calc(100%-1rem)] overflow-y-auto bg-white shadow-lg sm:w-[min(28rem,calc(100%-2rem))] md:w-[var(--side-panel-width)]",style:{"--side-panel-width":`${b}%`},children:[e.jsx("button",{ref:h,type:"button",onClick:w,"aria-label":m,className:"absolute left-4 top-4 min-h-11 min-w-11 cursor-pointer rounded-full bg-gray-200 p-2 transition-colors hover:bg-gray-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 md:min-h-0 md:min-w-0",children:e.jsx(v,{})}),e.jsx("div",{className:"mt-16 p-4 sm:p-6",children:r})]}),e.jsxs(z,{children:[t&&a?e.jsx(f.button,{type:"button","aria-label":m,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:u?0:.15},onClick:()=>i(!1),className:"fixed inset-0 z-[9998] cursor-default bg-black/30 md:hidden"}):null,!t&&e.jsx(f.button,{ref:p,type:"button","aria-label":j,"aria-expanded":t,"aria-controls":x,initial:{opacity:0,x:20},animate:{opacity:1,x:0},exit:{opacity:0,x:20},transition:{duration:u?0:.2},onClick:w,className:"fixed right-0 top-1/2 z-[10000] min-h-11 min-w-11 -translate-y-1/2 cursor-pointer rounded-l-lg bg-indigo-600 p-3 text-white shadow-md transition-colors hover:bg-indigo-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2",children:R()})]})]})},A=()=>e.jsxs("div",{className:"min-h-[36rem] bg-gray-50 p-6",children:[e.jsx("p",{className:"text-sm text-gray-700",children:"Use el botón fijo para abrir los filtros."}),e.jsxs(I,{buttonIcon:"filter",ariaLabel:"Filtros de búsqueda",children:[e.jsx("h2",{className:"text-lg font-semibold text-gray-900",children:"Filtros de búsqueda"}),e.jsxs("label",{className:"mt-4 block text-sm font-medium text-gray-700",children:["Proveedor",e.jsx("input",{className:"mt-1 block w-full rounded-md border-gray-300",placeholder:"Nombre o código"})]})]})]});typeof window<"u"&&window.document&&window.document.createElement&&document.documentElement.setAttribute("data-storyloaded","");export{A as Filters};