@iyulab/flex-table 0.44.0 → 0.45.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [0.45.0] - 2026-10-05
+
+### Added
+
+- **Press targets follow `--u-target-size`** (the host's minimum target size from `@iyulab/components`).
+  When it is set, rows (and so the header row) are at least that tall — it wins over `row-height` and
+  `--ft-row-height`, because it is a floor — and the row-selection column is at least that wide. Column
+  menu buttons, menu items, filter fields and the find panel's fields and buttons follow too. Unset,
+  nothing changes. The column resize handle and the hidden-column marker keep their size: the column menu
+  does the same jobs (Wider · Narrower · Fit to content · Show …) with full-size targets.
+
+### Changed
+
+- **The whole row-selection cell toggles the checkbox**, not just the 16px box (it is now a label). The box
+  itself looks the same.
+
+### Fixed
+
+- **The column filter dropdown is no longer cut off by the table.** It was positioned inside the table's
+  scroll area, so in a short table its lower controls were hidden and could not be pressed. It now floats
+  like the column menu does, below the header (or above it when there is no room).
+
 ## [0.44.0] - 2026-10-05
 
 ### Added

package/dist/{flex-table-MnSI0Ogl.js → flex-table-Bv41ls8b.js}

@@ -467,8 +467,9 @@ var y = r`
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    inline-size: 24px;
-    block-size: 24px;
+    /* 호스트 하한(--u-target-size)이 있으면 그 값 — 미설정이면 24px. */
+    inline-size: max(24px, var(--u-target-size, 0px));
+    block-size: max(24px, var(--u-target-size, 0px));
     margin-left: auto;
     flex-shrink: 0;
     border-radius: 4px;
@@ -496,22 +497,23 @@ var y = r`
     opacity: 1;
   }
 
+  /* 표 밖에 띄운다 — 자리는 머리 칸에 맞춰 스크립트가 정한다(_adjustFilterDropdown). 표의 스크롤 영역에 잘리지 않는다. */
   .ft-filter-dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
+    position: fixed;
     min-width: 200px;
     background: var(--ft-bg);
     border: 1px solid var(--ft-border-color);
     border-radius: 4px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     padding: 8px;
-    z-index: 10;
+    z-index: var(--u-layer-floating, 1000);
     box-sizing: border-box;
   }
 
   .ft-filter-input {
     width: 100%;
+    /* 호스트 하한(--u-target-size, 미설정 = 0) — 아래 필터·찾기 패널의 입력·버튼도 같다. */
+    min-height: var(--u-target-size, 0px);
     padding: 4px 8px;
     font: inherit;
     font-size: 13px;
@@ -547,6 +549,12 @@ var y = r`
     color: var(--ft-sort-indicator-color);
     padding: 2px 8px;
     border-radius: 3px;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--u-target-size, 0px);
+    min-width: var(--u-target-size, 0px);
   }
 
   .ft-filter-clear:hover {
@@ -562,6 +570,9 @@ var y = r`
 
   .ft-filter-mode-select {
     flex: 1;
+    box-sizing: border-box;
+    min-height: var(--u-target-size, 0px);
+    min-width: var(--u-target-size, 0px);
     padding: 3px 6px;
     font: inherit;
     font-size: 12px;
@@ -616,7 +627,7 @@ var y = r`
   .ft-checkbox-header {
     background: var(--ft-header-bg);
     border-bottom: 2px solid var(--ft-border-color);
-  }
+  }\n  .ft-checkbox-header .ft-checkbox-hit {\n    margin-block-end: -2px;\n  }
 
   .ft-checkbox-cell {
     border-bottom: 1px solid var(--ft-border-color);
@@ -630,6 +641,19 @@ var y = r`
   .ft-row-selected .ft-cell { background: var(--ft-selection-bg) !important; }
   .ft-row-selected .ft-row-num { background: var(--ft-selection-bg); }
 
+  /* 누르는 자리는 칸 전체다(라벨이 입력을 토글한다) — 체크 상자는 16px 그대로. 칸의 좌우 여백(4px)까지 덮는다. */
+  .ft-checkbox-hit {
+    flex: 1;
+    align-self: stretch;
+    margin-inline: -4px;
+    /* 칸 아래 경계선(본문 1px · 머리 2px)까지 — 행 높이가 곧 누르는 높이가 되게. */
+    margin-block-end: -1px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+
   .ft-checkbox-header input[type="checkbox"],
   .ft-checkbox-cell input[type="checkbox"] {
     width: 16px;
@@ -679,7 +703,7 @@ var y = r`
     all: unset;
     box-sizing: border-box;
     display: block;
-    min-block-size: 28px;
+    min-block-size: max(28px, var(--u-target-size, 0px));
     padding: 6px 12px;
     cursor: pointer;
     font-size: var(--ft-font-size, 14px);
@@ -743,7 +767,7 @@ var y = r`
     box-sizing: border-box;
     display: block;
     inline-size: 100%;
-    min-block-size: 28px;
+    min-block-size: max(28px, var(--u-target-size, 0px));
     padding: 6px 14px;
     cursor: pointer;
     font-size: var(--ft-font-size, 14px);
@@ -859,6 +883,8 @@ var y = r`
   .ft-find-input, .ft-find-replace-input {
     flex: 1;
     min-width: 120px;
+    /* content-box 다(최소 폭 120px 의 뜻을 바꾸지 않으려고) — 여백 3px ×2 와 테두리 1px ×2 를 뺀다. */
+    min-height: max(0px, calc(var(--u-target-size, 0px) - 8px));
     padding: 3px 6px;
     border: 1px solid var(--ft-border-color);
     border-radius: 3px;
@@ -881,6 +907,9 @@ var y = r`
   }
 
   .ft-find-panel button {
+    box-sizing: border-box;
+    min-height: var(--u-target-size, 0px);
+    min-width: var(--u-target-size, 0px);
     padding: 2px 8px;
     border: 1px solid var(--ft-border-color);
     border-radius: 3px;
@@ -902,6 +931,8 @@ var y = r`
   .ft-find-panel label {
     display: flex;
     align-items: center;
+    min-height: var(--u-target-size, 0px);
+    min-width: var(--u-target-size, 0px);
     gap: 2px;
     font-size: 12px;
     cursor: pointer;
@@ -1790,7 +1821,7 @@ var q = {
 	lte: "≤"
 }, J = 120, Y = 40, X = 20, Z = 32, Q = 5, Je = 200, $ = class extends n {
 	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.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 re(), this._editing = new ie(), this._rowSelection = new j(), this._undo = new M(), 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._wasHeaderDrag = !1, this._wasRowDrag = !1, 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._warnedUnconstrained = !1, this._onCommentPopupOutsideClick = () => {
+		super(...e), this.columns = [], this._data = [], this._inUndoRedo = !1, this.clearUndoOnDataChange = !1, this.clearSelectionOnDataChange = !1, this._rowHeightFromCss = Z, this._targetFloor = 0, 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 re(), this._editing = new ie(), this._rowSelection = new j(), this._undo = new M(), 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._wasHeaderDrag = !1, this._wasRowDrag = !1, 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._warnedUnconstrained = !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();
 	}
@@ -1805,7 +1836,8 @@ var q = {
 		this._data = e, n && !this._inUndoRedo && (this.clearUndoOnDataChange && this._undo.clear(), this.clearSelectionOnDataChange && this._rowSelection.selectedCount > 0 && (this._rowSelection.deselectAll(), this._rowSelectionVersion++, this._dispatchRowSelectionEvent())), this.requestUpdate("data", t);
 	}
 	get rowHeight() {
-		return this._rowHeightExplicit ?? this._rowHeightFromCss ?? Z;
+		let e = this._rowHeightExplicit ?? this._rowHeightFromCss ?? Z;
+		return Math.max(e, this._targetFloor);
 	}
 	set rowHeight(e) {
 		let t = this.rowHeight;
@@ -1826,9 +1858,12 @@ var q = {
 	get visibleColumns() {
 		return this.columns.filter((e) => !e.hidden);
 	}
+	get _checkboxColWidth() {
+		return Math.max(36, this._targetFloor);
+	}
 	get _prefixWidth() {
 		let e = 0;
-		return this.selectable && (e += 36), this.showRowNumbers && (e += 48), e;
+		return this.selectable && (e += this._checkboxColWidth), this.showRowNumbers && (e += 48), e;
 	}
 	get canUndo() {
 		return this._undo.canUndo;
@@ -2372,12 +2407,11 @@ var q = {
 		this.shadowRoot && Array.isArray(this.shadowRoot.adoptedStyleSheets) && (this.shadowRoot.adoptedStyleSheets = [...this._baseStyleSheets, ...this.stylesheets]);
 	}
 	_readDensityTokens() {
-		let e = getComputedStyle(this).getPropertyValue("--ft-row-height").trim();
-		if (!e) return;
-		let t = parseFloat(e);
-		if (!Number.isFinite(t) || t <= 0 || !/px\s*$/.test(e) || t === this._rowHeightFromCss) return;
-		let n = this.rowHeight;
-		this._rowHeightFromCss = t, this._rowHeightExplicit === void 0 && this.requestUpdate("rowHeight", n);
+		let e = getComputedStyle(this), t = (t) => {
+			let n = e.getPropertyValue(t).trim(), r = parseFloat(n);
+			return n && Number.isFinite(r) && r > 0 && /px\s*$/.test(n) ? r : void 0;
+		}, n = this.rowHeight, r = t("--ft-row-height");
+		r !== void 0 && (this._rowHeightFromCss = r), this._targetFloor = t("--u-target-size") ?? 0, this.rowHeight !== n && this.requestUpdate("rowHeight", n);
 	}
 	_updateColOffsets() {
 		let e = this.visibleColumns, t = [], n = this._prefixWidth;
@@ -3102,7 +3136,7 @@ var q = {
 	}
 	_getPinnedLeft(e) {
 		let t = this.visibleColumns, n = 0;
-		this.selectable && (n += 36), this.showRowNumbers && (n += 48);
+		this.selectable && (n += this._checkboxColWidth), this.showRowNumbers && (n += 48);
 		for (let r = 0; r < e; r++) t[r].pinned === "left" && (n += this._getColWidth(t[r]));
 		return n;
 	}
@@ -3389,11 +3423,12 @@ var q = {
 	}
 	_adjustFilterDropdown() {
 		if (!this._openFilterKey) return;
-		let e = this.shadowRoot?.querySelector(".ft-filter-dropdown");
-		if (!e) return;
-		e.style.top = "", e.style.bottom = "";
-		let t = e.getBoundingClientRect(), n = window.innerHeight;
-		t.bottom > n && (e.style.top = "auto", e.style.bottom = "100%");
+		let e = this.shadowRoot?.querySelector(".ft-filter-dropdown"), t = e?.previousElementSibling;
+		if (!e || !t) return;
+		let n = t.getBoundingClientRect(), r = e.getBoundingClientRect(), i = document.documentElement.clientWidth, a = document.documentElement.clientHeight, o = n.bottom;
+		o + r.height > a - 4 && (o = n.top - r.height >= 4 ? n.top - r.height : Math.max(4, a - r.height - 4));
+		let s = Math.max(4, Math.min(n.left, i - r.width - 4));
+		e.style.left = `${s}px`, e.style.top = `${o}px`;
 	}
 	_renderFilterDropdown(e) {
 		let t = e.type ?? "text";
@@ -4132,15 +4167,16 @@ var q = {
 		let r = this.headerHeight, o = this._totalRowWidth, { start: s, end: c } = this.visibleColRange, l = [];
 		for (let t = 0; t < e.length; t++) (e[t].pinned === "left" || e[t].pinned === "right") && (t < s || t >= c) && l.push(t);
 		let u = 0, d = this._scrollLeft, f = this.selectable ? i`<div class="ft-checkbox-header"
-            style="position: absolute; top: 0; left: ${d + u}px; width: 36px; height: ${r}px; z-index: 4;">
+            style="position: absolute; top: 0; left: ${d + u}px; width: ${this._checkboxColWidth}px; height: ${r}px; z-index: 4;">
           ${this._rowSelection.mode === "multi" ? i`
-            <input type="checkbox"
+            <!-- 칸 전체가 누르는 자리다(라벨) — 체크 상자는 16px 그대로. -->
+            <label class="ft-checkbox-hit"><input type="checkbox"
               .checked=${this._rowSelection.isAllSelected}
               .indeterminate=${this._rowSelection.isSomeSelected}
-              @change=${this._onSelectAllChange}>
+              @change=${this._onSelectAllChange}></label>
           ` : ""}
         </div>` : "";
-		this.selectable && (u += 36);
+		this.selectable && (u += this._checkboxColWidth);
 		let p = this.showRowNumbers ? i`<div class="ft-row-num-header"
             style="position: absolute; top: 0; left: ${d + u}px; width: 48px; height: ${r}px; z-index: 4;">#</div>` : "", m = [];
 		for (let t of l) m.push(this._renderHeaderCell(e[t], t));
@@ -4205,8 +4241,8 @@ var q = {
 	_renderFooter(e, t, n) {
 		if (!this.footerData) return "";
 		let r = this.visibleColumns, a = this.rowHeight, o = this._totalRowWidth, s = this._scrollLeft, c = 0, l = this.selectable ? i`<div class="ft-footer-cell ft-checkbox-cell"
-            style="position: absolute; top: 0; left: ${s + c}px; width: 36px; height: ${a}px; z-index: 2;"></div>` : "";
-		this.selectable && (c += 36);
+            style="position: absolute; top: 0; left: ${s + c}px; width: ${this._checkboxColWidth}px; height: ${a}px; z-index: 2;"></div>` : "";
+		this.selectable && (c += this._checkboxColWidth);
 		let u = this.showRowNumbers ? i`<div class="ft-footer-cell ft-row-num"
             style="position: absolute; top: 0; left: ${s + c}px; width: 48px; height: ${a}px; z-index: 2;"></div>` : "", d = [];
 		for (let e of n) {
@@ -4233,14 +4269,14 @@ var q = {
 	_renderRow(e, t, n, r, a) {
 		let o = this.visibleColumns, s = this._toDataIndex(e), c = this.data[s], l = a ?? e * this.rowHeight, u = this.rowHeight, d = this._totalRowWidth, f = e % 2 == 0 ? "ft-row-even" : "ft-row-odd", p = this.selectable && this._rowSelection.isSelected(e), m = this._scrollLeft, h = 0, g = this.selectable ? i`
       <div class="ft-checkbox-cell"
-        style="position: absolute; top: 0; left: ${m + h}px; width: 36px; height: ${u}px; z-index: 2;">
-        <input type="checkbox"
+        style="position: absolute; top: 0; left: ${m + h}px; width: ${this._checkboxColWidth}px; height: ${u}px; z-index: 2;">
+        <label class="ft-checkbox-hit"><input type="checkbox"
           .checked=${p}
           @click=${(e) => this._onRowCheckboxClick(e)}
-          @change=${(t) => this._onRowCheckboxChange(t, e)}>
+          @change=${(t) => this._onRowCheckboxChange(t, e)}></label>
       </div>
     ` : "";
-		this.selectable && (h += 36);
+		this.selectable && (h += this._checkboxColWidth);
 		let _ = this._rowDrag?.active && this._rowDrag.rowIndex === e, v = this.showRowNumbers ? i`
       <div class="ft-row-num ${_ ? "ft-col-dragging" : ""}"
         style="position: absolute; top: 0; left: ${m + h}px; width: 48px; height: ${u}px; z-index: 2; cursor: grab;"

package/dist/flex-table.d.ts

@@ -52,6 +52,8 @@ export declare class FlexTable extends LitElement {
     private _rowHeightExplicit?;
     /** `--ft-row-height` 판독 결과. 판독 전·판독 실패 시 기본값. */
     private _rowHeightFromCss;
+    /** 호스트 하한 `--u-target-size`(px) 판독 결과 — 행(그러므로 머리행)과 선택 열 폭의 하한. 미설정이면 0. */
+    private _targetFloor;
     showRowNumbers: boolean;
     theme: 'light' | 'dark' | undefined;
     maxRows: number;
@@ -147,6 +149,8 @@ export declare class FlexTable extends LitElement {
     private _comments;
     private _isDragOver;
     get visibleColumns(): ColumnDefinition[];
+    /** 행 선택 열의 폭 — 36px, 호스트 하한(`--u-target-size`)이 더 크면 그 값. */
+    private get _checkboxColWidth();
     private get _prefixWidth();
     /** Whether an undo operation is available. */
     get canUndo(): boolean;

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-MnSI0Ogl.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./flex-table-Bv41ls8b.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/react.js

@@ -1,4 +1,4 @@
-import { t as e } from "./flex-table-MnSI0Ogl.js";
+import { t as e } from "./flex-table-Bv41ls8b.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.44.0",
+  "version": "0.45.0",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",