@iyulab/flex-table 0.27.0 → 0.29.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## [0.29.0] - 2026-08-28
+
+### Added
+
+- **`row-activate` event, fired on Enter for a non-editable cell.** The internal
+  keydown handler always consumed Enter/F2 regardless of a column's editability,
+  so a host attaching its own `keydown` listener to the grid had no reliable way
+  to react to Enter in a read-only grid (registration order dependent). Enter on
+  a non-editable cell now dispatches `row-activate` (`{ row, index, col, key }`)
+  instead of attempting to start an edit — mirroring the existing `row-add`/
+  `row-delete` detail shape. F2 is unaffected (edit-only key). Mapped through to
+  the React wrapper as `onRowActivate`.
+
+## [0.28.0] - 2026-08-23
+
+### Added
+
+- **`stylesheets: CSSStyleSheet[]`** — constructable stylesheets adopted into the grid's shadow
+  root alongside its own styles. A `ColumnDefinition.renderer` returns content that's inserted
+  inside `<flex-table>`'s shadow root, so a class-based utility from the host document's CSS
+  (`.is-xs`, a design-system size variant, anything selector-based rather than a CSS custom
+  property) never reaches it — the class attaches but no rule matches, since document stylesheets
+  don't cross the shadow boundary. Passing the same `CSSStyleSheet` the host document already
+  uses (`document.adoptedStyleSheets`) into this new property closes that gap without copying
+  CSS or reaching into internals. Reassigning `stylesheets` swaps the previously-adopted sheets
+  for the new ones — it doesn't accumulate — and the grid's own styles are never affected either
+  way.
+
 ## [0.27.0] - 2026-08-23
 
 ### Added

package/README.md

@@ -76,7 +76,7 @@ npm install @iyulab/flex-table
 | `rowHeight` | `row-height` | `number` | `32` | Row height in pixels. Falls back to the `--ft-row-height` token when not set — see [Density](#density-and-header-hierarchy) |
 | `showRowNumbers` | `show-row-numbers` | `boolean` | `false` | Show row number column |
 | `theme` | `theme` | `'light' \| 'dark'` | auto | Force theme; auto-detects `prefers-color-scheme` |
-| `editable` | `editable` | `boolean` | `true` | Global read-only mode when `false` |
+| `editable` | `editable` | `boolean` | `true` | Global read-only mode when `false`. Defaults to `true` — a purely read-only grid should set this explicitly rather than relying on per-column `editable: false` alone, since it's also what makes Enter fire `row-activate` (see [Events](#events)) instead of entering edit mode |
 | `showFilters` | `show-filters` | `boolean` | `false` | Show built-in header filter dropdowns |
 | `maxRows` | `max-rows` | `number` | `0` | Max row count (0 = unlimited); blocks `addRow()` and paste expansion |
 | `maxUndoSize` | `max-undo-size` | `number` | `100` | Max undo history stack size |
@@ -84,6 +84,9 @@ npm install @iyulab/flex-table
 | `selectionMode` | `selection-mode` | `'single' \| 'multi'` | `'multi'` | Row selection mode |
 | `dataMode` | `data-mode` | `'client' \| 'server'` | `'client'` | Client-side or server-side data processing |
 | `footerData` | `footer-data` | `Record<string, string>` | `null` | Footer/summary row data (keys match column keys) |
+| `emptyMessage` | `empty-message` | `string` | `'No data'` | Shown when `data` is empty |
+| `noMatchingMessage` | `no-matching-message` | `string` | `'No matching data'` | Shown when `data` has rows but every one is hidden by an active column filter |
+| `stylesheets` | — | `CSSStyleSheet[]` | `[]` | Constructable stylesheets adopted into the shadow root alongside the grid's own styles — the escape hatch for styling content a `renderer` inserts, since document CSS doesn't cross the shadow boundary. Reassigning swaps the previous set, it doesn't accumulate |
 
 ### Read-only Properties
 
@@ -231,6 +234,7 @@ All events use `CustomEvent` with `bubbles: true, composed: true`.
 |-------|--------|-------------|
 | `row-add` | `{ row, index }` | Row added |
 | `row-delete` | `{ indices, rows }` | Rows deleted |
+| `row-activate` | `{ row, index, col, key }` | Enter pressed on a non-editable cell — the grid's own contract for "activate this row" (e.g. navigate to a detail view), guaranteed even though the internal Enter handler prevents the keystroke from reliably reaching a listener the host attaches to the same element |
 | `batch-update` | `{ changes: [{ row, key, oldValue, newValue }] }` | Batch update applied |
 
 ### Column Events
@@ -303,6 +307,7 @@ flex-table {
   --ft-row-even-bg: #fff;            /* --u-bg-color */
   --ft-row-odd-bg: #fafafa;          /* --u-bg-color-raised */
   --ft-row-hover-bg: #f0f4ff;        /* --u-bg-color-hover */
+  --ft-row-odd-hover-bg: #f0f4ff;    /* --u-bg-color-raised-hover — odd row's hover, independent of --ft-row-hover-bg */
   --ft-editor-bg: #fff;              /* --u-input-bg-color */
   --ft-sort-indicator-color: #5f6368;/* --u-txt-color-weak */
   --ft-empty-color: #5f6368;         /* --u-txt-color-weak */

package/dist/{flex-table-CeT8zkEi.js → flex-table-DuQWDNlT.js}

@@ -1546,7 +1546,7 @@ async function xe(e) {
 	};
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.146.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.147.0/helpers/esm/decorate.js
 function q(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
@@ -1564,7 +1564,7 @@ var J = {
 	lte: "≤"
 }, Y = 120, X = 40, Z = 32, Q = 5, $ = class extends e {
 	constructor(...e) {
-		super(...e), this.columns = [], this._data = [], this._inUndoRedo = !1, this.clearUndoOnDataChange = !1, this.clearSelectionOnDataChange = !1, this._rowHeightFromCss = Z, this.showRowNumbers = !1, this.theme = void 0, this.maxRows = 0, this.editable = !0, this.showFilters = !1, this.showContextMenu = !1, this.frozenRows = 0, this.emptyMessage = "No data", this.noMatchingMessage = "No matching data", this.loading = !1, this.importEnabled = !1, this.selectable = !1, this.dataMode = "client", this.footerData = null, this._scrollTop = 0, this._scrollLeft = 0, this._viewportHeight = 0, this._viewportWidth = 0, this._colLeftOffsets = [], this._totalRowWidth = 0, this._activeCell = null, this._editingCell = null, this._sortCriteria = [], this._selection = new y(), this._editing = new b(), this._rowSelection = new x(), this._undo = new D(), this._filters = [], this._filteredIndices = [], this._sortedIndices = [], this._openFilterKey = null, this._rowSelectionVersion = 0, this._lastCheckboxRowIndex = null, this._checkboxShiftPending = !1, this._autocompleteState = null, this._headerMenu = null, this._bodyContextMenu = null, this._commentPopup = null, this._viewDirty = !0, this._isDragging = !1, this._wasDrag = !1, this._resizing = null, this._resizeCleanup = null, this._colDrag = null, this._colDragIndicatorLeft = null, this._fillDrag = null, this._rowDrag = null, this._rowDragIndicatorY = null, this._findState = null, this._columnWidths = /* @__PURE__ */ new Map(), this._hostResizeObserver = null, this._comments = /* @__PURE__ */ new Map(), this._isDragOver = !1, this._onCommentPopupOutsideClick = () => {
+		super(...e), this.columns = [], this._data = [], this._inUndoRedo = !1, this.clearUndoOnDataChange = !1, this.clearSelectionOnDataChange = !1, this._rowHeightFromCss = Z, this.showRowNumbers = !1, this.theme = void 0, this.maxRows = 0, this.editable = !0, this.showFilters = !1, this.showContextMenu = !1, this.frozenRows = 0, this.emptyMessage = "No data", this.noMatchingMessage = "No matching data", this.loading = !1, this.importEnabled = !1, this.selectable = !1, this.dataMode = "client", this.footerData = null, this.stylesheets = [], this._scrollTop = 0, this._scrollLeft = 0, this._viewportHeight = 0, this._viewportWidth = 0, this._colLeftOffsets = [], this._totalRowWidth = 0, this._baseStyleSheets = [], this._activeCell = null, this._editingCell = null, this._sortCriteria = [], this._selection = new y(), this._editing = new b(), this._rowSelection = new x(), this._undo = new D(), this._filters = [], this._filteredIndices = [], this._sortedIndices = [], this._openFilterKey = null, this._rowSelectionVersion = 0, this._lastCheckboxRowIndex = null, this._checkboxShiftPending = !1, this._autocompleteState = null, this._headerMenu = null, this._bodyContextMenu = null, this._commentPopup = null, this._viewDirty = !0, this._isDragging = !1, this._wasDrag = !1, this._resizing = null, this._resizeCleanup = null, this._colDrag = null, this._colDragIndicatorLeft = null, this._fillDrag = null, this._rowDrag = null, this._rowDragIndicatorY = null, this._findState = null, this._columnWidths = /* @__PURE__ */ new Map(), this._hostResizeObserver = null, this._comments = /* @__PURE__ */ new Map(), this._isDragOver = !1, this._onCommentPopupOutsideClick = () => {
 			this._commitCommentPopup();
 		}, this._invalidCells = /* @__PURE__ */ new Map(), this._textFilterState = /* @__PURE__ */ new Map(), this._numberFilterState = /* @__PURE__ */ new Map(), this._dateFilterState = /* @__PURE__ */ new Map(), this._emptyFilterState = /* @__PURE__ */ new Map();
 	}
@@ -2115,7 +2115,10 @@ var J = {
 		super.disconnectedCallback(), this.removeEventListener("scroll", this._onScroll), this.removeEventListener("keydown", this._onKeyDown), this.removeEventListener("contextmenu", this._onContextMenu), this.removeEventListener("dragover", this._onDragover), this.removeEventListener("dragleave", this._onDragleave), this.removeEventListener("drop", this._onDrop), document.removeEventListener("click", this._onDocumentClick), document.removeEventListener("mousedown", this._onCommentPopupOutsideClick), this._isDragging = !1, this._wasDrag = !1, this._resizeCleanup &&= (this._resizeCleanup(), null), this._hostResizeObserver &&= (this._hostResizeObserver.disconnect(), null);
 	}
 	firstUpdated() {
-		this._readDensityTokens(), this._measureViewport();
+		this._readDensityTokens(), this._measureViewport(), this.shadowRoot && Array.isArray(this.shadowRoot.adoptedStyleSheets) && (this._baseStyleSheets = [...this.shadowRoot.adoptedStyleSheets]), this._syncStylesheets();
+	}
+	_syncStylesheets() {
+		!this.shadowRoot || !Array.isArray(this.shadowRoot.adoptedStyleSheets) || (this.shadowRoot.adoptedStyleSheets = [...this._baseStyleSheets, ...this.stylesheets]);
 	}
 	_readDensityTokens() {
 		let e = getComputedStyle(this).getPropertyValue("--ft-row-height").trim();
@@ -2161,7 +2164,7 @@ var J = {
 		(!(e.size <= 2 && !e.has("data") && !e.has("columns") && !e.has("_openFilterKey") && !e.has("_editingCell") && !e.has("_activeCell") && (e.has("_scrollTop") || e.has("_scrollLeft"))) || this._viewDirty) && (this._recomputeView(), this._viewDirty = !1), this._updateColOffsets(), this._selection.setDimensions(this._visibleRowCount, this.visibleColumns.length), this._rowSelection.setRowCount(this._visibleRowCount);
 	}
 	updated(e) {
-		this._focusEditor(), this._adjustFilterDropdown();
+		this._focusEditor(), this._adjustFilterDropdown(), e.has("stylesheets") && this._syncStylesheets();
 		let t = String(this._visibleRowCount), n = String(this.visibleColumns.length);
 		if (this.getAttribute("aria-rowcount") !== t && this.setAttribute("aria-rowcount", t), this.getAttribute("aria-colcount") !== n && this.setAttribute("aria-colcount", n), this.loading ? this.getAttribute("aria-busy") !== "true" && this.setAttribute("aria-busy", "true") : this.hasAttribute("aria-busy") && this.removeAttribute("aria-busy"), e.has("_commentPopup") && this._commentPopup) {
 			let e = this.shadowRoot?.querySelector(".ft-comment-popup textarea");
@@ -2278,6 +2281,20 @@ var J = {
 	_isCellEditable(e) {
 		return !(!this.editable || e.editable === !1);
 	}
+	_fireRowActivate(e) {
+		if (!this._activeCell) return;
+		let t = this._toDataIndex(this._activeCell.row), n = this.data[t];
+		n && this.dispatchEvent(new CustomEvent("row-activate", {
+			detail: {
+				row: n,
+				index: t,
+				col: this._activeCell.col,
+				key: e?.key
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
 	_startEdit() {
 		if (!this._activeCell) return;
 		let e = this.visibleColumns[this._activeCell.col];
@@ -2453,7 +2470,9 @@ var J = {
 		}
 		if (t.length !== 0 && this._visibleRowCount !== 0) {
 			if ((e.key === "Enter" || e.key === "F2") && this._activeCell) {
-				e.preventDefault(), this._startEdit();
+				e.preventDefault();
+				let n = t[this._activeCell.col];
+				n && this._isCellEditable(n) ? this._startEdit() : e.key === "Enter" && this._fireRowActivate(n);
 				return;
 			}
 			if (!this._selection.activeCell) {
@@ -4096,7 +4115,7 @@ q([a({ type: Array })], $.prototype, "columns", void 0), q([a({
 })], $.prototype, "dataMode", void 0), q([a({
 	type: Object,
 	attribute: "footer-data"
-})], $.prototype, "footerData", void 0), q([a({
+})], $.prototype, "footerData", void 0), q([a({ attribute: !1 })], $.prototype, "stylesheets", void 0), q([a({
 	type: Number,
 	attribute: "max-undo-size"
 })], $.prototype, "maxUndoSize", null), q([o()], $.prototype, "_scrollTop", void 0), q([o()], $.prototype, "_scrollLeft", void 0), q([o()], $.prototype, "_viewportHeight", void 0), q([o()], $.prototype, "_viewportWidth", void 0), q([o()], $.prototype, "_activeCell", void 0), q([o()], $.prototype, "_editingCell", void 0), q([o()], $.prototype, "_sortCriteria", void 0), q([o()], $.prototype, "_openFilterKey", void 0), q([o()], $.prototype, "_rowSelectionVersion", void 0), q([o()], $.prototype, "_autocompleteState", void 0), q([o()], $.prototype, "_headerMenu", void 0), q([o()], $.prototype, "_bodyContextMenu", void 0), q([o()], $.prototype, "_commentPopup", void 0), q([o()], $.prototype, "_isDragOver", void 0), $ = q([i("flex-table")], $);

package/dist/flex-table.d.ts

@@ -85,6 +85,14 @@ export declare class FlexTable extends LitElement {
     dataMode: DataMode;
     /** Footer/summary row data. Keys match column keys; values are display strings. */
     footerData: Record<string, string | TemplateResult> | null;
+    /**
+     * Constructable stylesheets adopted into this element's shadow root, in addition to the
+     * grid's own styles. Cell renderers run inside the shadow root, so external document
+     * stylesheets (class-based utilities, design-system CSS) don't reach elements a `renderer`
+     * returns — this is the escape hatch for that. Not an attribute (a `CSSStyleSheet` can't be
+     * serialized to one) — set it as a property.
+     */
+    stylesheets: CSSStyleSheet[];
     set maxUndoSize(value: number);
     get maxUndoSize(): number;
     private _scrollTop;
@@ -93,6 +101,8 @@ export declare class FlexTable extends LitElement {
     private _viewportWidth;
     private _colLeftOffsets;
     private _totalRowWidth;
+    /** The grid's own compiled styles, captured once so `stylesheets` merges without dropping them. */
+    private _baseStyleSheets;
     private _activeCell;
     private _editingCell;
     private _sortCriteria;
@@ -294,6 +304,7 @@ export declare class FlexTable extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;
+    private _syncStylesheets;
     /**
      * `--ft-row-height` 를 판독해 가상화 계산에 넣는다.
      *
@@ -322,6 +333,13 @@ export declare class FlexTable extends LitElement {
     private _onCellDblClick;
     /** Check if a column is editable based on global + per-column settings */
     private _isCellEditable;
+    /**
+     * Enter가 non-editable 셀에서 눌렸을 때 "이 행을 확정한다"는 신호를 호스트에
+     * 공식적으로 알린다. 그리드가 자체 `keydown` 핸들러에서 Enter를 먼저 처리하므로,
+     * 호스트가 같은 엘리먼트에 직접 붙인 리스너는 등록 순서에 의존하게 되어 안전한
+     * 공개 계약이 못 된다 — 이 이벤트가 유일한 보장된 훅이다.
+     */
+    private _fireRowActivate;
     private _startEdit;
     private _commitEdit;
     private _applyEdit;

package/dist/flex-table.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "./flex-table-CeT8zkEi.js";
+import { a as e, i as t, n, r, t as i } from "./flex-table-DuQWDNlT.js";
 export { i as FlexTable, t as RowSelectionState, r as UndoStack, n as exportData, e as renderCell };

package/dist/react.d.ts

@@ -11,6 +11,7 @@ declare const FlexTableReactBase: import("@lit/react").ReactWebComponent<FlexTab
     onFilterChange: EventName<CustomEvent>;
     onRowAdd: EventName<CustomEvent>;
     onRowDelete: EventName<CustomEvent>;
+    onRowActivate: EventName<CustomEvent>;
     onColumnResize: EventName<CustomEvent>;
     onColumnSelect: EventName<CustomEvent>;
     onColumnAdd: EventName<CustomEvent>;

package/dist/react.js

@@ -1,4 +1,4 @@
-import { t as e } from "./flex-table-CeT8zkEi.js";
+import { t as e } from "./flex-table-DuQWDNlT.js";
 import t from "react";
 import { createComponent as n } from "@lit/react";
 var r = n({
@@ -14,6 +14,7 @@ var r = n({
 		onFilterChange: "filter-change",
 		onRowAdd: "row-add",
 		onRowDelete: "row-delete",
+		onRowActivate: "row-activate",
 		onColumnResize: "column-resize",
 		onColumnSelect: "column-select",
 		onColumnAdd: "column-add",

package/package.json

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