bonsaif-ui 0.1.118 → 0.1.119

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.1.119 - 2026-08-14
+
+- `DataTable`: las celdas del cuerpo (y el checkbox de selección) centran el contenido en vertical por defecto (`flex items-center`), para alinear badges, botones y texto cuando la fila crece.
+
 ## 0.1.118 - 2026-08-14
 
 - `ImageLightbox`: mueve `openImageLightboxFromEvent` a archivo aparte para corregir el warning `react-refresh/only-export-components`.

package/README.md

@@ -449,7 +449,7 @@ When pagination is enabled with `pageSize`, the pagination footer is hidden auto
 
 Header controls for column reordering, resizing, and visibility are floating controls. The drag handle and column visibility menu animate in on hover/focus and do not consume label width, so narrow headers keep as much readable text as possible.
 
-DataTable renders its rows with CSS Grid instead of the browser's native table layout. Column resizing uses the saved column widths as the base grid tracks, fills any spare container width across visible columns, and switches to horizontal scrolling when the resized columns exceed the available space. This keeps resize behavior predictable without leaving a blank gutter on the right side.
+DataTable renders its rows with CSS Grid instead of the browser's native table layout. Body cells vertically center their content by default (`flex items-center`) so mixed-height content (badges, actions, text) stays aligned when a row grows. Column resizing uses the saved column widths as the base grid tracks, fills any spare container width across visible columns, and switches to horizontal scrolling when the resized columns exceed the available space. This keeps resize behavior predictable without leaving a blank gutter on the right side.
 
 DataTable can also expose a table query state for server-backed screens. Enable `enableBql` to show a compact BQL input in the toolbar, listen to `onQueryChange` to receive the current BQL text, column filters, sort, page, page size, and hidden columns, and use `persistState` with `storageKey` when a screen should reopen with saved filters or BQL. The component only emits and stores query state; each app should validate and translate BQL on the server for its own allowed fields.
 

package/dist/bonsaif-ui.js

@@ -2599,6 +2599,7 @@ function Ni({
         textOverflow: "ellipsis",
         whiteSpace: "nowrap",
         width: "100%",
+        minWidth: 0,
         ...n
       },
       children: e
@@ -3382,7 +3383,7 @@ ${k}`;
     ze,
     Ie
   ]);
-  const ti = (f) => f === "center" ? "text-center" : f === "right" ? "text-right" : "text-left", zl = "color-mix(in srgb, var(--primary) 6%, var(--bg-card))", Ia = "linear-gradient(180deg, color-mix(in srgb, var(--bg-input) 90%, var(--bg-card)) 0%, color-mix(in srgb, var(--bg-input) 70%, var(--bg-card)) 100%)", Oe = "color-mix(in srgb, var(--border) 62%, var(--bg-card))", nr = "color-mix(in srgb, var(--primary) 24%, var(--border))", Dn = `inset 0 0 0 1px ${Oe}`, ri = ct.reduce(
+  const ti = (f) => f === "center" ? "justify-center text-center" : f === "right" ? "justify-end text-right" : "justify-start text-left", zl = "color-mix(in srgb, var(--primary) 6%, var(--bg-card))", Ia = "linear-gradient(180deg, color-mix(in srgb, var(--bg-input) 90%, var(--bg-card)) 0%, color-mix(in srgb, var(--bg-input) 70%, var(--bg-card)) 100%)", Oe = "color-mix(in srgb, var(--border) 62%, var(--bg-card))", nr = "color-mix(in srgb, var(--primary) 24%, var(--border))", Dn = `inset 0 0 0 1px ${Oe}`, ri = ct.reduce(
     (f, k) => f + (Zt[k.key] ?? Rt(k.width)),
     (xr ? 40 : 0) + (ht ? 40 : 0)
   ), ni = typeof R == "number" ? R : typeof R == "string" ? Number(((li = R.match(/^(\d+(?:\.\d+)?)px$/)) == null ? void 0 : li[1]) ?? NaN) : NaN, Vr = Number.isFinite(ni) ? Math.max(ri, ni, Po) : Math.max(ri, Po), In = R ?? Vr, yr = `${xr ? "40px " : ""}${ht ? "40px " : ""}${ct.map((f) => `${Zt[f.key] ?? Rt(f.width)}px`).join(" ")}`;
@@ -3418,7 +3419,7 @@ ${k}`;
           "div",
           {
             role: "columnheader",
-            className: `${D ? "px-2 py-1.5" : "px-3 py-2.5"} w-10`,
+            className: `${D ? "px-2 py-1.5" : "px-3 py-2.5"} flex w-10 items-center justify-center`,
             style: Ma ? {
               position: "sticky",
               left: 0,
@@ -4952,7 +4953,7 @@ ${Y}`, te = new Blob(["\uFEFF" + L], {
                               "div",
                               {
                                 role: "cell",
-                                className: `${D ? "px-2 py-1.5" : "px-3 py-2"} w-10`,
+                                className: `${D ? "px-2 py-1.5" : "px-3 py-2"} flex w-10 items-center justify-center`,
                                 style: Ma ? {
                                   position: "sticky",
                                   left: 0,
@@ -4991,7 +4992,7 @@ ${Y}`, te = new Blob(["\uFEFF" + L], {
                                   role: "cell",
                                   "data-dt-column-key": xe.key,
                                   "data-dt-disable-row-click": xe.disableRowClick || Ne ? "true" : void 0,
-                                  className: `${Ne ? "px-2 py-1.5 text-center" : `${D ? "px-2 py-1.5" : "px-3 py-2"} ${ti(xe.align)}`} ${Md} ${xe.className ?? ""}`,
+                                  className: `${Ne ? "px-2 py-1.5 justify-center text-center" : `${D ? "px-2 py-1.5" : "px-3 py-2"} ${ti(xe.align)}`} flex min-w-0 items-center ${Md} ${xe.className ?? ""}`,
                                   style: {
                                     overflow: "hidden",
                                     whiteSpace: "nowrap",