@iyulab/flex-table 0.20.1 → 0.21.1

package/README.md

@@ -524,12 +524,30 @@ const source = useODataSource('/api/orders', {
 
 `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.
 
+The hook returns:
+
+| Field | Description |
+|---|---|
+| `data` / `totalCount` | Current page rows and the server's total (`@odata.count`) |
+| `loading` | A request is in flight |
+| `error` | Message of the last failed request, or `null`. **Render this** — a failed request otherwise leaves the grid silently empty |
+| `page` / `setPage` | Zero-based page index |
+| `sortCriteria` / `onSortChange` | Bind `onSortChange` to the table's `sort-change` event |
+| `search` / `setSearch` | Current search term and its setter (resets to page 0) |
+| `refresh` | Re-run the current request |
+
+#### Search semantics
+
+`setSearch` takes **literal text, not an OData search expression**. Each whitespace-separated token is sent as a quoted `$search` phrase joined with `AND` — `red shirt` becomes `$search="red" AND "shirt"`, matching rows that contain both terms.
+
+Terms are always quoted because OData 4.0 only allows letters in an unquoted `searchWord`, so `2026` or `ZT-E2E-A` would be rejected by servers that follow it (4.01 relaxed this, but [Microsoft.OData still lexes as 4.0](https://github.com/OData/odata.net/issues/2445)). Quoting keeps any term valid regardless of server version. Since a `$search` phrase cannot contain `"` and OData defines no escape for it, double quotes are stripped from the term.
+
 ## Development
 
 ```bash
 npm install
 npm run dev      # Dev server with demo
-npm test         # Run tests (179 tests)
+npm test         # Run tests
 npm run build    # Build library
 npm run lint     # ESLint check
 ```

package/dist/{flex-table-BzvFlHmD.js → flex-table-DNUTTZ1m.js}

@@ -20,7 +20,10 @@ var s = t`
     --ft-bool-color: #2196f3;
     --ft-sort-indicator-color: #5f6368;
     --ft-editor-bg: #fff;
-    --ft-empty-color: #999;
+    /* #999 was 2.85 against --ft-bg (#fff); AA needs 4.5. The dark value (#9aa0a6 on
+       #1e1e2e = 6.31) was already fine, so this was a light-only defect. #5f6368 is the
+       same grey the sort indicator uses, which keeps the palette to one family. */
+    --ft-empty-color: #5f6368;
   }
 
   /* --- Dark Theme (auto via prefers-color-scheme) --- */
@@ -1222,7 +1225,7 @@ function k(e, t) {
 //#endregion
 //#region src/export/xlsx-writer.ts
 var te = (() => {
-	let e = new Uint32Array(256);
+	let e = /* @__PURE__ */ new Uint32Array(256);
 	for (let t = 0; t < 256; t++) {
 		let n = t;
 		for (let e = 0; e < 8; e++) n = n & 1 ? 3988292384 ^ n >>> 1 : n >>> 1;
@@ -1480,7 +1483,7 @@ async function be(e) {
 	};
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.130.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
 function J(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);

package/dist/flex-table.js

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

package/dist/odata/index.js

@@ -1,29 +1,36 @@
 import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
 import i from "odata-query";
 //#region src/odata/use-odata-source.ts
-function a(a, s = {}) {
-	let { pageSize: c = 20, defaultOrderBy: l, fixedFilter: u, baseUrl: d, fetcher: f = fetch, onUnauthorized: p } = s, m = u ? JSON.stringify(u) : "", [h, g] = r([]), [_, v] = r(0), [y, b] = r(!1), [x, S] = r(null), [C, w] = r(0), [T, E] = r(() => l ? o(l) : []), [D, O] = r(""), [k, A] = r(0), j = n(null), M = e(() => {
-		A((e) => e + 1);
-	}, []), N = e((e) => {
-		O(e), w(0);
+function a(e) {
+	let t = e.split(/\s+/).map((e) => e.replace(/"/g, "")).filter((e) => e.length > 0);
+	if (t.length !== 0) return t.map((e) => `"${e}"`).join(" AND ");
+}
+function o(o, c = {}) {
+	let { pageSize: l = 20, defaultOrderBy: u, fixedFilter: d, baseUrl: f, fetcher: p = fetch, onUnauthorized: m } = c, h = d ? JSON.stringify(d) : "", [g, _] = r([]), [v, y] = r(0), [b, x] = r(!1), [S, C] = r(null), [w, T] = r(0), [E, D] = r(() => u ? s(u) : []), [O, k] = r(""), [A, j] = r(0), M = n(null), N = e(() => {
+		j((e) => e + 1);
 	}, []), P = e((e) => {
+		k(e), T(0);
+	}, []), F = e((e) => {
 		let t = e.detail?.criteria;
-		t && (E(t), w(0));
+		t && (D(t), T(0));
 	}, []);
 	return t(() => {
-		j.current?.abort();
+		M.current?.abort();
 		let e = new AbortController();
-		j.current = e, b(!0), S(null);
-		let t = T.length > 0 ? T.map((e) => `${e.key} ${e.direction}`).join(", ") : l, n = {
-			top: c,
-			skip: C * c,
+		M.current = e, x(!0), C(null);
+		let t = E.length > 0 ? E.map((e) => `${e.key} ${e.direction}`).join(", ") : u, n = {
+			top: l,
+			skip: w * l,
 			count: !0
 		};
-		t && (n.orderBy = t), u && (n.filter = u), D && (n.search = D);
-		let r = i(n);
-		return f(`${d ?? window.location.origin}${a}${r}`, { signal: e.signal }).then(async (e) => {
+		if (t && (n.orderBy = t), d && (n.filter = d), O) {
+			let e = a(O);
+			e && (n.search = e);
+		}
+		let r = i(n), s = `${f ?? window.location.origin}${o}${r}`;
+		return p(s, { signal: e.signal }).then(async (e) => {
 			if (!e.ok) {
-				(e.status === 401 || e.status === 403) && p && p(e);
+				(e.status === 401 || e.status === 403) && m && m(e);
 				let t = await e.text().catch(() => ""), n = `요청 실패 (${e.status})`;
 				try {
 					let e = JSON.parse(t);
@@ -33,37 +40,37 @@ function a(a, s = {}) {
 			}
 			return e.json();
 		}).then((t) => {
-			e.signal.aborted || (g(t.value ?? t), v(t["@odata.count"] ?? 0), S(null));
+			e.signal.aborted || (_(t.value ?? t), y(t["@odata.count"] ?? 0), C(null));
 		}).catch((t) => {
-			e.signal.aborted || t.name !== "AbortError" && (S(t.message), g([]), v(0));
+			e.signal.aborted || t.name !== "AbortError" && (C(t.message), _([]), y(0));
 		}).finally(() => {
-			e.signal.aborted || b(!1);
+			e.signal.aborted || x(!1);
 		}), () => e.abort();
 	}, [
-		a,
-		C,
-		c,
-		T,
-		D,
-		m,
+		o,
+		w,
 		l,
-		k,
-		d
+		E,
+		O,
+		h,
+		u,
+		A,
+		f
 	]), {
-		data: h,
-		totalCount: _,
-		loading: y,
-		error: x,
-		page: C,
-		setPage: w,
-		sortCriteria: T,
-		onSortChange: P,
-		search: D,
-		setSearch: N,
-		refresh: M
+		data: g,
+		totalCount: v,
+		loading: b,
+		error: S,
+		page: w,
+		setPage: T,
+		sortCriteria: E,
+		onSortChange: F,
+		search: O,
+		setSearch: P,
+		refresh: N
 	};
 }
-function o(e) {
+function s(e) {
 	return e.split(",").map((e) => {
 		let t = e.trim().split(/\s+/);
 		return {
@@ -73,4 +80,4 @@ function o(e) {
 	});
 }
 //#endregion
-export { a as useODataSource };
+export { o as useODataSource };

package/dist/odata/use-odata-source.d.ts

@@ -1,6 +1,29 @@
+import type { SortCriteria } from '../core/sorting.js';
 import type { UseODataSourceOptions, UseODataSourceResult } from './types.js';
+/**
+ * 검색어를 OData `$search` 표현식으로 인코딩한다 (`red shirt` → `"red" AND "shirt"`).
+ *
+ * 토큰을 인용하는 이유: OData 4.0의 `searchWord`는 문자(Unicode L/Nl)만 허용해
+ * `2026`·`ZT-E2E-A` 같은 검색어가 거부된다. 4.01이 숫자·하이픈을 허용하도록 완화했으나
+ * Microsoft.OData 렉서는 아직 4.0 규칙이다(odata.net#2445). `searchPhrase`는 두 버전
+ * 모두에서 적법하므로 서버 버전과 무관하게 안전하다.
+ *
+ * 통째로가 아니라 토큰별로 감싸는 이유: 인용 없는 다중 단어는 암묵 AND로 파싱되므로
+ * (`searchAndExpr = RWS [ 'AND' RWS ] searchExpr`), 전체를 한 phrase로 감싸면 연속
+ * 문자열 매칭으로 의미가 바뀐다. 토큰별 인용은 기존 의미론을 그대로 보존한다.
+ *
+ * `"`는 phrase 안에 넣을 수 없고 이스케이프 규칙도 없어(`qchar-no-AMP-DQUOTE`) 제거한다.
+ *
+ * @returns `$search` 표현식, 또는 유효 토큰이 없으면 `undefined`
+ */
+export declare function buildSearchExpression(term: string): string | undefined;
 /**
  * OData v4 서버 사이드 데이터소스 React 훅.
  * flex-table의 dataMode="server"와 함께 사용한다.
  */
 export declare function useODataSource<T = Record<string, unknown>>(url: string, options?: UseODataSourceOptions): UseODataSourceResult<T>;
+/**
+ * `$orderby` 문자열을 정렬 기준 배열로 파싱한다 (`'a asc, b desc'`).
+ * 방향이 생략되거나 `desc`가 아니면 `asc`로 본다(OData 기본값).
+ */
+export declare function parseOrderBy(orderBy: string): SortCriteria[];

package/dist/odata/use-odata-source.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/react.js

@@ -1,4 +1,4 @@
-import { t as e } from "./flex-table-BzvFlHmD.js";
+import { t as e } from "./flex-table-DNUTTZ1m.js";
 import t from "react";
 import { createComponent as n } from "@lit/react";
 var r = n({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/flex-table",
-  "version": "0.20.1",
+  "version": "0.21.1",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",
@@ -53,7 +53,7 @@
   },
   "dependencies": {
     "lit": "^3.3.3",
-    "odata-query": "^8.0.7"
+    "odata-query": "^8.1.0"
   },
   "peerDependencies": {
     "@lit/react": "^1.0.0",
@@ -69,17 +69,17 @@
   },
   "devDependencies": {
     "@lit/react": "^1.0.8",
-    "@types/react": "^19.2.14",
-    "@typescript-eslint/eslint-plugin": "^8.59.3",
-    "@typescript-eslint/parser": "^8.59.3",
+    "@types/react": "^19.2.17",
+    "@typescript-eslint/eslint-plugin": "^8.64.0",
+    "@typescript-eslint/parser": "^8.64.0",
     "eslint": "^10.1.0",
     "eslint-plugin-lit": "^2.3.1",
     "jsdom": "^29.1.1",
     "loupe": "^3.2.1",
-    "react": "^19.2.6",
+    "react": "^19.2.7",
     "strip-literal": "^3.1.0",
     "typescript": "~5.7.0",
-    "vite": "^8.0.13",
-    "vitest": "^4.1.6"
+    "vite": "^8.1.4",
+    "vitest": "^4.1.10"
   }
 }