twico-ui 1.17.0 → 1.17.2

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to Twico UI are documented here (newest first). This file is generated automatically on each release by [semantic-release](https://semantic-release.gitbook.io/) from [Conventional Commits](https://www.conventionalcommits.org/) — do not edit it by hand. The same notes appear on each [GitHub Release](https://github.com/EncryptionL/twico-ui/releases).
 
+## [1.17.2](https://github.com/EncryptionL/twico-ui/compare/v1.17.1...v1.17.2) (2026-07-17)
+
+
+### Bug Fixes
+
+* **datatable:** clamp footer range + title on truncated cells/headers ([#252](https://github.com/EncryptionL/twico-ui/issues/252), [#253](https://github.com/EncryptionL/twico-ui/issues/253)) ([21a023e](https://github.com/EncryptionL/twico-ui/commit/21a023eb20aa8d05b5413ea752c18e32e15a03dc))
+
+## [1.17.1](https://github.com/EncryptionL/twico-ui/compare/v1.17.0...v1.17.1) (2026-07-15)
+
+
+### Bug Fixes
+
+* **datatable:** batch editor survives portaled dropdowns + stands alone ([#249](https://github.com/EncryptionL/twico-ui/issues/249), [#250](https://github.com/EncryptionL/twico-ui/issues/250)) ([1b5ad91](https://github.com/EncryptionL/twico-ui/commit/1b5ad916f3a61e34f339a5a51e21bff06680cf62)), closes [#244](https://github.com/EncryptionL/twico-ui/issues/244) [#247](https://github.com/EncryptionL/twico-ui/issues/247) [#244](https://github.com/EncryptionL/twico-ui/issues/244)
+
 # [1.17.0](https://github.com/EncryptionL/twico-ui/compare/v1.16.0...v1.17.0) (2026-07-15)
 
 

package/dist/index.cjs

@@ -10059,6 +10059,7 @@ function Datatable({
     [cols, editMode, batchEditKey]
     // eslint-disable-line react-hooks/exhaustive-deps
   );
+  const hasBatchEditor = showBatchEdit && batchEditableCols.length > 0;
   const [batchEdit, setBatchEdit] = React51__namespace.default.useState(null);
   const [batchEditPos, openBatchEdit, closeBatchEdit] = useFloating();
   function openBatchEditor(el) {
@@ -10072,7 +10073,7 @@ function Datatable({
       closeBatchEdit();
     };
     const onDown = (e) => {
-      if (!e.target.closest(".twc-dt__pop") && !e.target.closest(".twc-dt__batch")) close();
+      if (!e.target.closest(".twc-dt__pop") && !e.target.closest(".twc-dt__batch") && !e.target.closest(".twc-pop")) close();
     };
     const onKey = (e) => {
       if (e.key === "Escape") close();
@@ -10327,6 +10328,8 @@ function Datatable({
             const editable = isColEditable(c);
             const isEditing = editing && editing.key === k && editing.field === c.field;
             const cellActive = selectionMode === "cell" && activeCell && activeCell.key === k && activeCell.field === c.field;
+            const display = c.valueFormatter ? c.valueFormatter(val, row) : val;
+            const cellTitle = !isActions && !c.renderCell && !isEditing && (typeof display === "string" || typeof display === "number") ? String(display) : void 0;
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "td",
               {
@@ -10345,14 +10348,14 @@ function Datatable({
                 "data-pin": st.pin,
                 "data-pin-edge": st.edge,
                 style: { width: widthOf(c), ...st.style },
-                title: isActions || c.renderCell || editable ? void 0 : String(val ?? ""),
+                title: cellTitle,
                 onClick: selectionMode === "cell" ? (e) => handleCellClick(e, k, row, c) : void 0,
                 onFocus: () => setFocus((f) => f.r === ri && f.c === ci ? f : { r: ri, c: ci }),
                 onDoubleClick: editable ? () => beginEdit(k, c, row) : void 0,
                 children: [
                   !checkboxSelection && reorderable && ci === 0 && !isEditing ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 6, maxWidth: "100%" }, children: [
                     rowHandle(k, midIdx, row),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: isActions ? renderActions(c, row) : c.renderCell ? c.renderCell(val, row) : c.valueFormatter ? c.valueFormatter(val, row) : val })
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: isActions ? renderActions(c, row) : c.renderCell ? c.renderCell(val, row) : display })
                   ] }) : isEditing ? c.renderEditCell ? (
                     // #236: full escape hatch — the host drops in its own editor (searchable/creatable/
                     // async Combobox, …) and drives the lifecycle via commit/cancel. Wrapped in
@@ -10371,7 +10374,7 @@ function Datatable({
                       onCancel: cancelEdit,
                       onKeyDown: onEditKey
                     }
-                  ) : isActions ? renderActions(c, row) : c.renderCell ? c.renderCell(val, row) : c.valueFormatter ? c.valueFormatter(val, row) : val,
+                  ) : isActions ? renderActions(c, row) : c.renderCell ? c.renderCell(val, row) : display,
                   editable && !isEditing ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__edit-hint", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.pencil }) }) : null
                 ]
               },
@@ -10485,14 +10488,14 @@ function Datatable({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-dt ${className}`, ref: rootRef, "data-density": density, "data-resizing": resizing || void 0, ...rest, children: [
     __twcStyles,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__toolbar", "data-compact": compact || void 0, children: [
-      batchActions.length && selected.size > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__batch", children: [
+      (batchActions.length || hasBatchEditor) && selected.size > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__batch", children: [
         /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__batch-x", onClick: clearSelection, "aria-label": "Clear selection", children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.x }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-dt__batch-count", children: [
           selected.size,
           " selected"
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__batch-actions", children: [
-          showBatchEdit && batchEditableCols.length ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "twc-dt__batch-btn", onClick: (e) => openBatchEditor(e.currentTarget), children: [
+          hasBatchEditor ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "twc-dt__batch-btn", onClick: (e) => openBatchEditor(e.currentTarget), children: [
             /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.pencil }),
             "Edit"
           ] }) : null,
@@ -10787,6 +10790,7 @@ function Datatable({
                           className: "twc-dt__th-label",
                           role: c.sortable ? "button" : void 0,
                           tabIndex: c.sortable ? 0 : void 0,
+                          title: typeof c.headerName === "string" ? c.headerName : void 0,
                           "aria-label": c.sortable ? `${c.headerName}, sort` : void 0,
                           draggable: reorderable || void 0,
                           onDragStart: reorderable ? (e) => {
@@ -10918,8 +10922,8 @@ function Datatable({
           const nf = (n) => n.toLocaleString();
           if (totalRows === 0) return "No rows";
           const shown = paged.length;
-          const start = paginated ? pageVal * sizeVal + 1 : 1;
-          const end = paginated ? start + shown - 1 : shown;
+          const start = paginated ? Math.min(pageVal * sizeVal + 1, totalRows) : 1;
+          const end = paginated ? Math.min(start + shown - 1, totalRows) : shown;
           return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             paginated ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               "Showing ",