@zauru-sdk/components 6.5.3 → 6.5.5

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.5.5](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.5.4...@zauru-sdk/components@6.5.5) (2026-09-16)
+
+
+### Bug Fixes
+
+* estirar filas de ZauruTable al ancho del contenido al hacer scroll ([de57d25](https://github.com/intuitiva/zauru-typescript-sdk/commit/de57d25243d907a889aba0a5e05328646b50b5cb))
+
+
+
+
+
+## [6.5.4](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.5.3...@zauru-sdk/components@6.5.4) (2026-09-16)
+
+
+### Bug Fixes
+
+* envolver celdas de ZauruTable por palabra sin recortar números ([02d734b](https://github.com/intuitiva/zauru-typescript-sdk/commit/02d734b66d3089c8002b0d5bd04db82c90691722))
+
+
+
+
+
 ## [6.5.3](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.5.1...@zauru-sdk/components@6.5.3) (2026-09-16)
 
 

package/dist/esm/Table/ZauruTable.js

@@ -10,13 +10,18 @@ const headerTextWrapStyle = {
     overflow: "visible",
     textOverflow: "clip",
     overflowWrap: "break-word",
-    wordBreak: "break-word",
+    wordBreak: "normal",
     lineHeight: "1.25",
 };
+const fullContentWidthStyle = {
+    width: "max-content",
+    minWidth: "100%",
+    maxWidth: "none",
+};
 const customStyles = {
     table: {
         style: {
-            minWidth: 0,
+            ...fullContentWidthStyle,
         },
     },
     tableWrapper: {
@@ -36,11 +41,17 @@ const customStyles = {
             overflowX: "auto",
         },
     },
+    head: {
+        style: {
+            ...fullContentWidthStyle,
+        },
+    },
     headRow: {
         style: {
             minHeight: "40px",
             height: "auto",
             alignItems: "stretch",
+            ...fullContentWidthStyle,
         },
         denseStyle: {
             minHeight: "36px",
@@ -68,8 +79,11 @@ const customStyles = {
     },
     cells: {
         style: {
-            whiteSpace: "normal", // Allow wrapping for cell content
-            wordBreak: "break-word",
+            whiteSpace: "normal",
+            overflow: "visible",
+            textOverflow: "clip",
+            overflowWrap: "break-word",
+            wordBreak: "normal",
         },
     },
     expanderRow: {
@@ -83,6 +97,9 @@ const customStyles = {
         },
     },
     rows: {
+        style: {
+            ...fullContentWidthStyle,
+        },
         highlightOnHoverStyle: {
             backgroundColor: "rgb(230, 244, 244)",
             borderBottomColor: "#FFFFFF",
@@ -211,7 +228,15 @@ export const ZauruTable = (props) => {
     };
     const loadSubHeader = !!(search || offlineSearch.length > 0);
     const subHeaderComponent = loadSubHeader ? subHeaderComponentMemo : undefined;
-    return (_jsx("div", { className: "w-full min-w-0 max-w-full overflow-x-auto", children: _jsx(DataTable, { className: className, subHeaderWrap: true, theme: theme ?? "solarized", columns: columns, conditionalRowStyles: conditionalRowStyles, data: filteredData, customStyles: customStyles, progressPending: loading, highlightOnHover: true, pointerOnHover: true, dense: true, striped: true, pagination: !whitOutPagination, persistTableHead: true, responsive: true, noHeader: true, expandableRows: !!expandable, expandOnRowClicked: !!expandable, expandableRowExpanded: expandable ? expandable.expandableRowExpanded : undefined, expandableRowsComponent: expandable ? expandable.expandableRowsComponent : undefined, subHeader: loadSubHeader, subHeaderComponent: subHeaderComponent, paginationServer: !!pagination, paginationTotalRows: pagination?.totalRows ?? undefined, onChangeRowsPerPage: pagination ? handlePerRowsChange : undefined, onChangePage: pagination ? handlePageChange : undefined, paginationComponentOptions: paginationComponentOptions, paginationRowsPerPageOptions: pagination?.rowsPerPageOptions
+    const normalizedColumns = Array.isArray(columns)
+        ? columns.map((column) => {
+            if (!column || typeof column !== "object") {
+                return column;
+            }
+            return { wrap: true, ...column };
+        })
+        : columns;
+    return (_jsx("div", { className: "w-full min-w-0 max-w-full overflow-x-auto", children: _jsx(DataTable, { className: className, subHeaderWrap: true, theme: theme ?? "solarized", columns: normalizedColumns, conditionalRowStyles: conditionalRowStyles, data: filteredData, customStyles: customStyles, progressPending: loading, highlightOnHover: true, pointerOnHover: true, dense: true, striped: true, pagination: !whitOutPagination, persistTableHead: true, responsive: true, noHeader: true, expandableRows: !!expandable, expandOnRowClicked: !!expandable, expandableRowExpanded: expandable ? expandable.expandableRowExpanded : undefined, expandableRowsComponent: expandable ? expandable.expandableRowsComponent : undefined, subHeader: loadSubHeader, subHeaderComponent: subHeaderComponent, paginationServer: !!pagination, paginationTotalRows: pagination?.totalRows ?? undefined, onChangeRowsPerPage: pagination ? handlePerRowsChange : undefined, onChangePage: pagination ? handlePageChange : undefined, paginationComponentOptions: paginationComponentOptions, paginationRowsPerPageOptions: pagination?.rowsPerPageOptions
                 ? pagination.rowsPerPageOptions
                 : [10, 50, 100], ...others }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "6.5.3",
+  "version": "6.5.5",
   "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": "7fd754da02ac48ceb661b39ac86f64a64fe4f749"
+  "gitHead": "c157999c77c4d4a5cbb926466b8f3947b00f12f4"
 }

package/src/Table/ZauruTable.tsx

@@ -16,14 +16,20 @@ const headerTextWrapStyle = {
   overflow: "visible",
   textOverflow: "clip",
   overflowWrap: "break-word",
-  wordBreak: "break-word",
+  wordBreak: "normal",
   lineHeight: "1.25",
 } as const;
 
+const fullContentWidthStyle = {
+  width: "max-content",
+  minWidth: "100%",
+  maxWidth: "none",
+} as const;
+
 const customStyles: TableStyles = {
   table: {
     style: {
-      minWidth: 0,
+      ...fullContentWidthStyle,
     },
   },
   tableWrapper: {
@@ -43,11 +49,17 @@ const customStyles: TableStyles = {
       overflowX: "auto",
     },
   },
+  head: {
+    style: {
+      ...fullContentWidthStyle,
+    },
+  },
   headRow: {
     style: {
       minHeight: "40px",
       height: "auto",
       alignItems: "stretch",
+      ...fullContentWidthStyle,
     },
     denseStyle: {
       minHeight: "36px",
@@ -75,8 +87,11 @@ const customStyles: TableStyles = {
   },
   cells: {
     style: {
-      whiteSpace: "normal", // Allow wrapping for cell content
-      wordBreak: "break-word",
+      whiteSpace: "normal",
+      overflow: "visible",
+      textOverflow: "clip",
+      overflowWrap: "break-word",
+      wordBreak: "normal",
     },
   },
   expanderRow: {
@@ -90,6 +105,9 @@ const customStyles: TableStyles = {
     },
   },
   rows: {
+    style: {
+      ...fullContentWidthStyle,
+    },
     highlightOnHoverStyle: {
       backgroundColor: "rgb(230, 244, 244)",
       borderBottomColor: "#FFFFFF",
@@ -289,6 +307,14 @@ export const ZauruTable = (props: Props) => {
 
   const loadSubHeader = !!(search || offlineSearch.length > 0);
   const subHeaderComponent = loadSubHeader ? subHeaderComponentMemo : undefined;
+  const normalizedColumns = Array.isArray(columns)
+    ? columns.map((column: any) => {
+        if (!column || typeof column !== "object") {
+          return column;
+        }
+        return { wrap: true, ...column };
+      })
+    : columns;
 
   return (
     <div className="w-full min-w-0 max-w-full overflow-x-auto">
@@ -296,7 +322,7 @@ export const ZauruTable = (props: Props) => {
       className={className}
       subHeaderWrap
       theme={theme ?? "solarized"}
-      columns={columns}
+      columns={normalizedColumns}
       conditionalRowStyles={conditionalRowStyles}
       data={filteredData}
       customStyles={customStyles}