@iyulab/flex-table 0.41.2 → 0.42.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.42.0] - 2026-10-04
+
+### Added
+
+- **`reveal: 'hover'` column option** — the column's content shows only while its row is hovered,
+  holds focus or is selected; for a row-actions column, so a list does not repeat the same buttons
+  on every row. The content stays focusable (Tab reveals it), touch screens always show it, and it
+  is not printed.
+
+### Changed
+
+- **The virtual scroll renders only the rows it needs above the view.** The first row in view was
+  computed as if the header and the frozen rows scrolled away with the body, so up to
+  (header + frozen rows) ÷ row height extra rows were rendered above the view — ten with eight frozen
+  rows. What is visible does not change.
+
 ## [0.41.2] - 2026-10-03
 
 ### Fixed

package/README.md

@@ -151,6 +151,7 @@ interface ColumnDefinition {
   validator?: CellValidator; // Validate before commit: (value, row, col) => string | null
   conditionalRules?: ConditionalRule[]; // Per-cell style rules, see below
   mergeRepeated?: boolean | ((row, previousRow, col) => boolean); // Merge runs of repeated values, see below
+  reveal?: 'always' | 'hover';   // 'hover': show only while the row is hovered, focused or selected (row actions)
 }
 ```
 
@@ -198,6 +199,18 @@ const columns: ColumnDefinition<Order>[] = [
 
 Rules are evaluated in order and combined; later matching rules override earlier ones for overlapping style properties.
 
+### Row actions that appear on hover
+
+A column of row actions (edit, a "more" menu) repeated on every row turns a list into a wall of
+buttons. `reveal: 'hover'` shows that column's content only while its row is hovered, holds focus or
+is selected. The controls stay in the DOM and focusable — Tab reveals them — touch screens (no
+hover) always show them, and they are not printed.
+
+```ts
+{ key: 'actions', label: '', width: 72, editable: false, reveal: 'hover',
+  render: (_, row) => html`<u-button size="sm" variant="ghost" aria-label="Edit">…</u-button>` }
+```
+
 ### Merging Repeated Values
 
 A list of child rows under a parent — order lines under an order, boxes under a shipment — repeats the parent's columns on every line. `mergeRepeated` draws each run of repeated values as one merged cell: the value shows once, on the run's first row, and the lines between the run's rows are dropped.

package/dist/{flex-table-CZPubYVD.js → flex-table-BdnkC234.js}

@@ -918,6 +918,28 @@ var y = r`
     outline: 2px solid var(--ft-find-color);
     outline-offset: -2px;
   }
+
+  /* reveal: 'hover' — a row-actions column shows while the row is hovered, focused or selected.
+     opacity (not display/visibility) keeps the controls focusable, so Tab reveals them. */
+  .ft-cell.ft-reveal-hover > * {
+    opacity: 0;
+    transition: opacity var(--u-duration-fast, 140ms) ease-out;
+  }
+  .ft-row:hover .ft-cell.ft-reveal-hover > *,
+  .ft-row:focus-within .ft-cell.ft-reveal-hover > *,
+  .ft-row-selected .ft-cell.ft-reveal-hover > *,
+  .ft-cell.ft-reveal-hover.ft-active > * {
+    opacity: 1;
+  }
+  @media (hover: none) {
+    .ft-cell.ft-reveal-hover > * { opacity: 1; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ft-cell.ft-reveal-hover > * { transition: none; }
+  }
+  @media print {
+    .ft-cell.ft-reveal-hover > * { visibility: hidden; }
+  }
 `;
 //#endregion
 //#region src/renderers/format.ts
@@ -2270,10 +2292,10 @@ var q = {
 		return Math.max(0, this._visibleRowCount - this._frozenRowCount) * this.rowHeight;
 	}
 	get visibleRange() {
-		let e = this._frozenRowCount, t = Math.max(0, this._scrollTop - this.headerHeight - this.frozenRowsHeight), n = e + Math.floor(t / this.rowHeight), r = Math.max(e, n - Q), i = Math.ceil(this._viewportHeight / this.rowHeight);
+		let e = this._frozenRowCount, t = e + Math.floor(Math.max(0, this._scrollTop) / this.rowHeight), n = Math.max(e, t - Q), r = Math.max(0, this._viewportHeight - this.headerHeight - this.frozenRowsHeight), i = Math.ceil(r / this.rowHeight) + 1;
 		return {
-			start: r,
-			end: Math.min(this._visibleRowCount, n + i + Q)
+			start: n,
+			end: Math.min(this._visibleRowCount, t + i + Q)
 		};
 	}
 	connectedCallback() {
@@ -4232,7 +4254,8 @@ var q = {
 			S ? "ft-find-current" : x ? "ft-find-match" : "",
 			o ? `ft-merge-${o.headParity}` : "",
 			o?.continues ? "ft-merge-continued" : "",
-			o?.opensDown ? "ft-merge-open" : ""
+			o?.opensDown ? "ft-merge-open" : "",
+			t.reveal === "hover" ? "ft-reveal-hover" : ""
 		].filter(Boolean).join(" "), T = this._toDataIndex(n), E = this._comments.get(T)?.get(t.key) ?? null, D = E !== null, O = D ? i`<div class="ft-comment-indicator" title=${E}></div>` : a;
 		return i`
       <div class=${D ? C + " ft-has-comment" : C}

package/dist/flex-table.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./flex-table-CZPubYVD.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./flex-table-BdnkC234.js";
 export { o as FlexTable, e as RowSelectionState, t as UndoStack, n as effectiveAlign, i as exportData, r as flexTableLocale, a as renderCell };

package/dist/models/types.d.ts

@@ -115,6 +115,15 @@ export interface ColumnDefinition<T = DataRow> {
      * the top of the scrolled view and below frozen rows, so it never scrolls out of sight.
      */
     mergeRepeated?: boolean | ((row: T, previousRow: T, col: ColumnDefinition<T>) => boolean);
+    /**
+     * When the column's content shows.
+     * - `'always'` (default)
+     * - `'hover'`: only while the row is hovered, holds focus, or is selected — for a row-actions
+     *   column (edit, a "more" menu), so a list does not repeat the same buttons on every row. The
+     *   content stays in the DOM and keyboard focus reveals it; on touch screens (no hover) it is
+     *   always shown, and it is not printed.
+     */
+    reveal?: 'always' | 'hover';
 }
 /** Style applied to a cell by a conditional formatting rule */
 export interface CellStyle {

package/dist/react.js

@@ -1,4 +1,4 @@
-import { t as e } from "./flex-table-CZPubYVD.js";
+import { t as e } from "./flex-table-BdnkC234.js";
 import { i as t, t as n } from "./query-Dw4iO0ir.js";
 import { t as r } from "./view-DiLr-TdY.js";
 import i, { useCallback as a, useEffect as o, useMemo as s, useRef as c, useState as l } from "react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/flex-table",
-  "version": "0.41.2",
+  "version": "0.42.0",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",

package/skills/iyulab-flex-table/SKILL.md

@@ -4,7 +4,6 @@ description: Spreadsheet-grade data grid web component (`<flex-table>`, built wi
 license: MIT
 metadata:
   author: iyulab
-  version: "0.40.1"
 ---
 
 # @iyulab/flex-table

package/skills/iyulab-flex-table/references/api.md

@@ -66,6 +66,7 @@ Replacing `data` with the same array reference does not trigger the clear-on-cha
 | `validator` | `CellValidator<T>` | `(value, row, col) => string \| null \| undefined` |
 | `conditionalRules` | `ConditionalRule<T>[]` | `{ when(value, row, col): boolean, style: CellStyle }` |
 | `mergeRepeated` | `boolean \| (row, previousRow, col) => boolean` | Draw a run of repeated values as one merged cell; values, sort, filter and export are unchanged |
+| `reveal` | `'always' \| 'hover'` | `'hover'`: content shows only while the row is hovered, focused or selected — for a row-actions column; stays focusable, always shown without hover, not printed |
 
 `CellStyle` = `{ background?, color?, fontWeight?: 'bold' | 'normal', fontStyle?: 'italic' | 'normal' }`.