@iyulab/flex-table 0.41.2 → 0.43.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## [0.43.0] - 2026-10-04
+
+### Changed
+
+- **Breaking: `useODataSource`'s `onUnauthorized` is called on `401` only.** It was also called on
+  `403`, so an app that sends the user to sign in from this hook (its documented use) bounced a
+  signed-in user without permission back to the sign-in page — and, after signing in, to the same
+  list and the same `403`. A `403` now surfaces only as `error`, like any other failed request.
+  Migration: if you handled `403` in `onUnauthorized`, read it from `error` instead.
+
+## [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.
@@ -712,7 +725,7 @@ const source = useODataSource('/api/orders', {
 | `fixedFilter` | — | Filter always applied in addition to search. Changing it resets the page to 0 — see below |
 | `baseUrl` | `window.location.origin` | Override the request origin (proxy/BFF setups) |
 | `fetcher` | global `fetch` | Custom transport — pass a wrapper that injects auth headers |
-| `onUnauthorized` | — | Called on `401`/`403` responses, before the generic error is set |
+| `onUnauthorized` | — | Called on `401` responses, before the generic error is set. A `403` (signed in, not permitted) does not call it — it surfaces as `error` |
 | `enabled` | `true` | While `false`, no request is made and `loading` stays `true` — see below |
 
 `fetcher`/`onUnauthorized` should be stable references (e.g. wrap in `useCallback`) — they are intentionally excluded from the hook's internal effect dependencies to avoid refetch loops on every render.

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/odata/types.d.ts

@@ -23,7 +23,10 @@ export interface UseODataSourceOptions {
     baseUrl?: string;
     /** 커스텀 fetch transport(예: 인증 헤더를 주입하는 `HttpClient` 래퍼). 기본값: 전역 `fetch`. */
     fetcher?: (input: string, init: RequestInit) => Promise<Response>;
-    /** 응답이 401/403일 때 호출(세션 만료 리다이렉트 등). 호출 후에도 기존 에러 처리는 계속 진행된다. */
+    /**
+     * 응답이 401 일 때 호출(세션 만료 리다이렉트 등). 호출 후에도 기존 에러 처리는 계속 진행된다.
+     * 403(인증됐지만 권한 없음)에는 부르지 않는다 — 그 실패는 `error` 로 드러난다.
+     */
     onUnauthorized?: (response: Response) => void;
     /**
      * `false` 인 동안 요청하지 않는다. 기본값 `true`.

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";
@@ -34,7 +34,7 @@ function d(e, r = {}) {
 		}), a = `${m ?? window.location.origin}${e}${r}`, o = async (e) => {
 			let n = await h(e, { signal: t.signal });
 			if (!n.ok) {
-				(n.status === 401 || n.status === 403) && g && g(n);
+				n.status === 401 && g && g(n);
 				let e = await n.text().catch(() => ""), t = `Request failed (${n.status})`;
 				try {
 					let n = JSON.parse(e);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/flex-table",
-  "version": "0.41.2",
+  "version": "0.43.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' }`.
 

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

@@ -102,7 +102,7 @@ function Orders() {
 | `fixedFilter` | — | odata-query filter object, always applied; value change resets to page 0 (compared by value) |
 | `baseUrl` | `window.location.origin` | For proxy/BFF setups |
 | `fetcher` | global `fetch` | `(input, init) => Promise<Response>`; keep stable |
-| `onUnauthorized` | — | `(response) => void` on 401/403; keep stable |
+| `onUnauthorized` | — | `(response) => void` on 401 only (403 surfaces as `error`); keep stable |
 | `enabled` | `true` | While `false`: no request, `loading` stays `true`, `refresh()` is a no-op, in-flight request is cancelled |
 
 ### Result