twico-ui 1.32.1 → 1.33.1

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.33.1](https://github.com/EncryptionL/twico-ui/compare/v1.33.0...v1.33.1) (2026-08-11)
+
+
+### Bug Fixes
+
+* **tooltip:** make the bubble non-interactive so it never blocks neighbours ([b4b197a](https://github.com/EncryptionL/twico-ui/commit/b4b197a60f1df64eb357939f7e5098d3022c56cd)), closes [#348](https://github.com/EncryptionL/twico-ui/issues/348)
+
+# [1.33.0](https://github.com/EncryptionL/twico-ui/compare/v1.32.1...v1.33.0) (2026-08-11)
+
+
+### Features
+
+* **datatable:** per-cell cellClassName/cellStyle hooks on DatatableColumn ([ac58410](https://github.com/EncryptionL/twico-ui/commit/ac58410109b9a67ed7cb78717a3a98a8b8639cb1)), closes [#242](https://github.com/EncryptionL/twico-ui/issues/242) [#345](https://github.com/EncryptionL/twico-ui/issues/345)
+
 ## [1.32.1](https://github.com/EncryptionL/twico-ui/compare/v1.32.0...v1.32.1) (2026-08-11)
 
 

package/dist/index.cjs

@@ -7963,6 +7963,9 @@ var TOOLTIP_CSS = `
 .twc-tooltip-wrap { display: inline-flex; }
 .twc-tooltip {
   position: fixed; z-index: var(--z-tooltip);
+  /* #348: purely presentational \u2014 the bubble must NEVER intercept the pointer, so neither a hidden
+     (opacity:0) nor a shown bubble can block neighbouring cells/buttons (matches MUI/Radix tooltips). */
+  pointer-events: none;
   padding: 6px 10px; border-radius: var(--radius-md);
   background: var(--color-text); color: var(--color-surface);
   font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-medium);
@@ -7974,7 +7977,6 @@ var TOOLTIP_CSS = `
   width: max-content; max-width: var(--_tw-maxw, 320px); box-shadow: var(--shadow-md);
   opacity: 0; transform: scale(0.9); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring);
 }
-.twc-tooltip[data-show="true"] { pointer-events: auto; }
 .twc-tooltip[data-show="true"] { opacity: 1; transform: scale(1); }
 .twc-tooltip[data-place="top"]    { transform-origin: bottom center; translate: -50% 0; }
 .twc-tooltip[data-place="bottom"] { transform-origin: top center; translate: -50% 0; }
@@ -8021,9 +8023,6 @@ function Tooltip({
     clearTimeout(closeTimer.current);
     closeTimer.current = setTimeout(() => setShowU(false), 120);
   };
-  const cancelClose = () => {
-    clearTimeout(closeTimer.current);
-  };
   React51__namespace.default.useEffect(() => () => {
     clearTimeout(timer.current);
     clearTimeout(closeTimer.current);
@@ -8099,8 +8098,6 @@ function Tooltip({
         "data-show": show || void 0,
         role: "tooltip",
         "aria-hidden": show ? void 0 : "true",
-        onMouseEnter: anchored ? void 0 : cancelClose,
-        onMouseLeave: anchored ? void 0 : close,
         style: {
           position: "fixed",
           left: coords.left,
@@ -11519,11 +11516,13 @@ function Datatable({
             const cellId = selectionMode === "cell" ? `${gridId}-${ri}-${ci}` : void 0;
             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;
+            const cellClass = c.cellClassName ? c.cellClassName(val, row) : void 0;
+            const cellSty = c.cellStyle ? c.cellStyle(val, row) : void 0;
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "td",
               {
                 id: cellId,
-                className: "twc-dt__td",
+                className: cellClass ? `twc-dt__td ${cellClass}` : "twc-dt__td",
                 role: "gridcell",
                 "data-r": ri,
                 "data-c": ci,
@@ -11540,7 +11539,7 @@ function Datatable({
                 "data-wrap": effectiveWrapped.has(c.field) || void 0,
                 "data-pin": st.pin,
                 "data-pin-edge": st.edge,
-                style: { width: widthOf(c), ...st.style },
+                style: { width: widthOf(c), ...cellSty, ...st.style, ...st.pin ? { position: "sticky", zIndex: 2 } : null },
                 "data-ovtext": 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 }),