@zauru-sdk/components 6.13.3 → 6.14.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.14.1](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.14.0...@zauru-sdk/components@6.14.1) (2026-10-26)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
+# [6.14.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.13.3...@zauru-sdk/components@6.14.0) (2026-10-26)
+
+
+### Features
+
+* fijar cabecera y primera columna de PermissionMatrix al hacer scroll ([5b628a9](https://github.com/intuitiva/zauru-typescript-sdk/commit/5b628a9c0bc80169757cbe9ad96106cfe3732458))
+
+
+
+
+
 ## [6.13.3](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.13.2...@zauru-sdk/components@6.13.3) (2026-10-23)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/esm/Tab/PermissionMatrix.js

@@ -3,27 +3,31 @@ export function permissionMatrixCellKey(roleId, key) {
     return `${roleId}:${key}`;
 }
 const checkboxClass = "form-checkbox h-4 w-4 cursor-pointer rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:cursor-not-allowed disabled:opacity-50";
+const FIRST_COL_SHADOW = "shadow-[2px_0_4px_-2px_rgba(0,0,0,0.12)]";
 export const PermissionMatrix = ({ groups, roles, disabled = false, pendingCells, onToggle, onBulkRole, onBulkSection, emptyText = "Crea un rol para editar la matriz de permisos.", markAllLabel = "Marcar todo", unmarkAllLabel = "Desmarcar todo", }) => {
     const allKeys = groups.flatMap((group) => group.actions.map((action) => action.key));
     if (roles.length === 0) {
         return (_jsx("p", { className: "text-sm text-gray-600", role: "status", children: emptyText }));
     }
     const roleHasKeys = (role, keys) => keys.length > 0 && keys.every((key) => role.permissionKeys.includes(key));
-    return (_jsx("div", { className: "overflow-x-auto rounded-md border border-gray-200", children: _jsxs("table", { className: "min-w-full border-collapse text-sm", children: [_jsx("caption", { className: "sr-only", children: "Matriz de permisos por rol. Filas son acciones, columnas son roles." }), _jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { scope: "col", className: "sticky left-0 z-10 min-w-[16rem] border-b border-gray-200 bg-gray-50 px-3 py-2 text-left font-semibold text-gray-800", children: "Permiso" }), roles.map((role) => {
+    return (_jsx("div", { className: "relative isolate max-h-[70vh] overflow-auto rounded-md border border-gray-200", children: _jsxs("table", { className: "min-w-full border-separate border-spacing-0 text-sm", children: [_jsx("caption", { className: "sr-only", children: "Matriz de permisos por rol. Filas son acciones, columnas son roles." }), _jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { scope: "col", className: `sticky left-0 top-0 z-40 min-w-[16rem] border-b border-gray-200 bg-gray-50 px-3 py-2 text-left font-semibold text-gray-800 ${FIRST_COL_SHADOW}`, children: "Permiso" }), roles.map((role) => {
                                 const allGranted = roleHasKeys(role, allKeys);
-                                return (_jsx("th", { scope: "col", className: "min-w-[9rem] border-b border-l border-gray-200 px-3 py-2 text-center font-semibold text-gray-800", children: _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("span", { className: "break-words", children: role.name }), onBulkRole ? (_jsx("button", { type: "button", className: "cursor-pointer text-xs font-medium text-indigo-700 hover:text-indigo-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded", disabled: disabled, onClick: () => onBulkRole(role.id, allGranted ? "none" : "all"), children: allGranted ? unmarkAllLabel : markAllLabel })) : null] }) }, role.id));
+                                return (_jsx("th", { scope: "col", className: "sticky top-0 z-30 min-w-[9rem] border-b border-l border-gray-200 bg-gray-50 px-3 py-2 text-center font-semibold text-gray-800", children: _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("span", { className: "break-words", children: role.name }), onBulkRole ? (_jsx("button", { type: "button", className: "cursor-pointer text-xs font-medium text-indigo-700 hover:text-indigo-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded", disabled: disabled, onClick: () => onBulkRole(role.id, allGranted ? "none" : "all"), children: allGranted ? unmarkAllLabel : markAllLabel })) : null] }) }, role.id));
                             })] }) }), _jsx("tbody", { children: groups.map((group) => {
                         const sectionKeys = group.actions.map((action) => action.key);
-                        return (_jsx(GroupRows, { group: group, roles: roles, sectionKeys: sectionKeys, disabled: disabled, pendingCells: pendingCells, onToggle: onToggle, onBulkSection: onBulkSection, checkboxClass: checkboxClass }, group.id));
+                        return (_jsx(GroupRows, { group: group, roles: roles, sectionKeys: sectionKeys, disabled: disabled, pendingCells: pendingCells, onToggle: onToggle, onBulkSection: onBulkSection, checkboxClass: checkboxClass, firstColShadow: FIRST_COL_SHADOW }, group.id));
                     }) })] }) }));
 };
-function GroupRows({ group, roles, sectionKeys, disabled, pendingCells, onToggle, onBulkSection, checkboxClass, }) {
-    return (_jsxs(_Fragment, { children: [_jsx("tr", { className: "bg-slate-100", children: _jsx("th", { scope: "colgroup", colSpan: roles.length + 1, className: "sticky left-0 border-b border-gray-200 px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-slate-700", children: group.label }) }), group.actions.map((action) => (_jsxs("tr", { className: "odd:bg-white even:bg-slate-50", children: [_jsx("th", { scope: "row", className: "sticky left-0 z-10 border-b border-gray-100 bg-inherit px-3 py-2 text-left font-normal text-gray-800", children: _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { children: action.label }), _jsx("code", { className: "text-xs text-gray-500", children: action.key })] }) }), roles.map((role) => {
-                        const granted = role.permissionKeys.includes(action.key);
-                        const cellKey = permissionMatrixCellKey(role.id, action.key);
-                        const pending = pendingCells?.has(cellKey) ?? false;
-                        return (_jsx("td", { className: "border-b border-l border-gray-100 px-3 py-2 text-center", children: _jsx("input", { type: "checkbox", id: `permission-${role.id}-${action.key}`, name: `permission-${role.id}-${action.key}`, className: checkboxClass, checked: granted, disabled: disabled || pending, "aria-label": `${role.name}: ${action.label}`, onChange: () => onToggle(role.id, action.key, !granted) }) }, role.id));
-                    })] }, action.key))), onBulkSection ? (_jsxs("tr", { children: [_jsx("td", { className: "sticky left-0 z-10 border-b border-gray-200 bg-white px-3 py-1 text-xs text-gray-500", children: "Secci\u00F3n" }), roles.map((role) => {
+function GroupRows({ group, roles, sectionKeys, disabled, pendingCells, onToggle, onBulkSection, checkboxClass, firstColShadow, }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("tr", { className: "bg-slate-100", children: [_jsx("th", { scope: "colgroup", className: `sticky left-0 z-20 border-b border-gray-200 bg-slate-100 px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-slate-700 ${firstColShadow}`, children: group.label }), roles.map((role) => (_jsx("td", { className: "border-b border-l border-gray-200 bg-slate-100" }, role.id)))] }), group.actions.map((action, actionIndex) => {
+                const rowBg = actionIndex % 2 === 0 ? "bg-white" : "bg-slate-50";
+                return (_jsxs("tr", { className: rowBg, children: [_jsx("th", { scope: "row", className: `sticky left-0 z-10 border-b border-gray-100 px-3 py-2 text-left font-normal text-gray-800 ${rowBg} ${firstColShadow}`, children: _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { children: action.label }), _jsx("code", { className: "text-xs text-gray-500", children: action.key })] }) }), roles.map((role) => {
+                            const granted = role.permissionKeys.includes(action.key);
+                            const cellKey = permissionMatrixCellKey(role.id, action.key);
+                            const pending = pendingCells?.has(cellKey) ?? false;
+                            return (_jsx("td", { className: "border-b border-l border-gray-100 px-3 py-2 text-center", children: _jsx("input", { type: "checkbox", id: `permission-${role.id}-${action.key}`, name: `permission-${role.id}-${action.key}`, className: checkboxClass, checked: granted, disabled: disabled || pending, "aria-label": `${role.name}: ${action.label}`, onChange: () => onToggle(role.id, action.key, !granted) }) }, role.id));
+                        })] }, action.key));
+            }), onBulkSection ? (_jsxs("tr", { children: [_jsx("td", { className: `sticky left-0 z-10 border-b border-gray-200 bg-white px-3 py-1 text-xs text-gray-500 ${firstColShadow}`, children: "Secci\u00F3n" }), roles.map((role) => {
                         const sectionGranted = sectionKeys.every((key) => role.permissionKeys.includes(key));
                         return (_jsx("td", { className: "border-b border-l border-gray-200 px-3 py-1 text-center", children: _jsx("button", { type: "button", className: "cursor-pointer text-xs font-medium text-indigo-700 hover:text-indigo-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded disabled:cursor-not-allowed disabled:opacity-50", disabled: disabled, onClick: () => onBulkSection(role.id, group.id, sectionGranted ? "remove" : "add"), children: sectionGranted ? "Quitar sección" : "Marcar sección" }) }, role.id));
                     })] })) : null] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "6.13.3",
+  "version": "6.14.1",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -44,12 +44,12 @@
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/node": "^2.8.1",
     "@remix-run/react": "^2.8.1",
-    "@zauru-sdk/common": "^6.10.1",
-    "@zauru-sdk/hooks": "^6.3.22",
+    "@zauru-sdk/common": "^6.12.0",
+    "@zauru-sdk/hooks": "^6.3.23",
     "@zauru-sdk/icons": "^6.1.0",
-    "@zauru-sdk/redux": "^6.7.1",
-    "@zauru-sdk/types": "^6.26.0",
-    "@zauru-sdk/utils": "^6.24.2",
+    "@zauru-sdk/redux": "^6.7.2",
+    "@zauru-sdk/types": "^6.28.0",
+    "@zauru-sdk/utils": "^6.26.0",
     "browser-image-compression": "^2.0.2",
     "framer-motion": "^12.0.0",
     "jsonwebtoken": "^9.0.2",
@@ -62,5 +62,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "868c8fc18ec36bd771fbd2b3886d15b6d68fb7bb"
+  "gitHead": "2fda4a18e3f62d22c38fbb91052869db9ebc16f4"
 }

package/src/Tab/PermissionMatrix.tsx

@@ -30,6 +30,8 @@ export function permissionMatrixCellKey(roleId: number, key: string): string {
 const checkboxClass =
   "form-checkbox h-4 w-4 cursor-pointer rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:cursor-not-allowed disabled:opacity-50";
 
+const FIRST_COL_SHADOW = "shadow-[2px_0_4px_-2px_rgba(0,0,0,0.12)]";
+
 export const PermissionMatrix = ({
   groups,
   roles,
@@ -58,8 +60,8 @@ export const PermissionMatrix = ({
     keys.length > 0 && keys.every((key) => role.permissionKeys.includes(key));
 
   return (
-    <div className="overflow-x-auto rounded-md border border-gray-200">
-      <table className="min-w-full border-collapse text-sm">
+    <div className="relative isolate max-h-[70vh] overflow-auto rounded-md border border-gray-200">
+      <table className="min-w-full border-separate border-spacing-0 text-sm">
         <caption className="sr-only">
           Matriz de permisos por rol. Filas son acciones, columnas son roles.
         </caption>
@@ -67,7 +69,7 @@ export const PermissionMatrix = ({
           <tr className="bg-gray-50">
             <th
               scope="col"
-              className="sticky left-0 z-10 min-w-[16rem] border-b border-gray-200 bg-gray-50 px-3 py-2 text-left font-semibold text-gray-800"
+              className={`sticky left-0 top-0 z-40 min-w-[16rem] border-b border-gray-200 bg-gray-50 px-3 py-2 text-left font-semibold text-gray-800 ${FIRST_COL_SHADOW}`}
             >
               Permiso
             </th>
@@ -77,7 +79,7 @@ export const PermissionMatrix = ({
                 <th
                   key={role.id}
                   scope="col"
-                  className="min-w-[9rem] border-b border-l border-gray-200 px-3 py-2 text-center font-semibold text-gray-800"
+                  className="sticky top-0 z-30 min-w-[9rem] border-b border-l border-gray-200 bg-gray-50 px-3 py-2 text-center font-semibold text-gray-800"
                 >
                   <div className="flex flex-col items-center gap-1">
                     <span className="break-words">{role.name}</span>
@@ -113,6 +115,7 @@ export const PermissionMatrix = ({
                 onToggle={onToggle}
                 onBulkSection={onBulkSection}
                 checkboxClass={checkboxClass}
+                firstColShadow={FIRST_COL_SHADOW}
               />
             );
           })}
@@ -131,6 +134,7 @@ function GroupRows({
   onToggle,
   onBulkSection,
   checkboxClass,
+  firstColShadow,
 }: {
   group: PermissionGroup;
   roles: PermissionMatrixRole[];
@@ -140,56 +144,67 @@ function GroupRows({
   onToggle: Props["onToggle"];
   onBulkSection: Props["onBulkSection"];
   checkboxClass: string;
+  firstColShadow: string;
 }) {
   return (
     <>
       <tr className="bg-slate-100">
         <th
           scope="colgroup"
-          colSpan={roles.length + 1}
-          className="sticky left-0 border-b border-gray-200 px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-slate-700"
+          className={`sticky left-0 z-20 border-b border-gray-200 bg-slate-100 px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-slate-700 ${firstColShadow}`}
         >
           {group.label}
         </th>
+        {roles.map((role) => (
+          <td
+            key={role.id}
+            className="border-b border-l border-gray-200 bg-slate-100"
+          />
+        ))}
       </tr>
-      {group.actions.map((action) => (
-        <tr key={action.key} className="odd:bg-white even:bg-slate-50">
-          <th
-            scope="row"
-            className="sticky left-0 z-10 border-b border-gray-100 bg-inherit px-3 py-2 text-left font-normal text-gray-800"
-          >
-            <div className="flex flex-col gap-0.5">
-              <span>{action.label}</span>
-              <code className="text-xs text-gray-500">{action.key}</code>
-            </div>
-          </th>
-          {roles.map((role) => {
-            const granted = role.permissionKeys.includes(action.key);
-            const cellKey = permissionMatrixCellKey(role.id, action.key);
-            const pending = pendingCells?.has(cellKey) ?? false;
-            return (
-              <td
-                key={role.id}
-                className="border-b border-l border-gray-100 px-3 py-2 text-center"
-              >
-                <input
-                  type="checkbox"
-                  id={`permission-${role.id}-${action.key}`}
-                  name={`permission-${role.id}-${action.key}`}
-                  className={checkboxClass}
-                  checked={granted}
-                  disabled={disabled || pending}
-                  aria-label={`${role.name}: ${action.label}`}
-                  onChange={() => onToggle(role.id, action.key, !granted)}
-                />
-              </td>
-            );
-          })}
-        </tr>
-      ))}
+      {group.actions.map((action, actionIndex) => {
+        const rowBg = actionIndex % 2 === 0 ? "bg-white" : "bg-slate-50";
+        return (
+          <tr key={action.key} className={rowBg}>
+            <th
+              scope="row"
+              className={`sticky left-0 z-10 border-b border-gray-100 px-3 py-2 text-left font-normal text-gray-800 ${rowBg} ${firstColShadow}`}
+            >
+              <div className="flex flex-col gap-0.5">
+                <span>{action.label}</span>
+                <code className="text-xs text-gray-500">{action.key}</code>
+              </div>
+            </th>
+            {roles.map((role) => {
+              const granted = role.permissionKeys.includes(action.key);
+              const cellKey = permissionMatrixCellKey(role.id, action.key);
+              const pending = pendingCells?.has(cellKey) ?? false;
+              return (
+                <td
+                  key={role.id}
+                  className="border-b border-l border-gray-100 px-3 py-2 text-center"
+                >
+                  <input
+                    type="checkbox"
+                    id={`permission-${role.id}-${action.key}`}
+                    name={`permission-${role.id}-${action.key}`}
+                    className={checkboxClass}
+                    checked={granted}
+                    disabled={disabled || pending}
+                    aria-label={`${role.name}: ${action.label}`}
+                    onChange={() => onToggle(role.id, action.key, !granted)}
+                  />
+                </td>
+              );
+            })}
+          </tr>
+        );
+      })}
       {onBulkSection ? (
         <tr>
-          <td className="sticky left-0 z-10 border-b border-gray-200 bg-white px-3 py-1 text-xs text-gray-500">
+          <td
+            className={`sticky left-0 z-10 border-b border-gray-200 bg-white px-3 py-1 text-xs text-gray-500 ${firstColShadow}`}
+          >
             Sección
           </td>
           {roles.map((role) => {