@iyulab/data-components 0.3.1 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## [0.5.0] - 2026-06-10
+
+### Added
+- React 일급 래퍼 서브패스 `@iyulab/data-components/react` (`@lit/react` createComponent 기반)
+  - `USimpleSheetReact` / `UDataViewReact` / `URichTableReact`
+  - rich property를 JSX props로 직접 전달, 커스텀 이벤트는 타입드 `onXxx` props로 노출
+    (USimpleSheet `onChange`, URichTable은 `RichTableEventMap` 9종 전부)
+  - `@lit/react`, `react`는 optional peerDependency — React 미사용 소비자에 영향 없음
+- README에 React 사용법 및 TypeScript 직접 사용(HTMLElementTagNameMap) 안내 추가
+
+### Fixed
+- `sideEffects`가 dist 경로만 나열해 빌드 시 `shadowDomProtection` 자동 초기화 import가
+  번들에서 제거되던 문제 수정 (src 경로 추가) — 0.4.x 배포본에서 Shadow DOM 스타일 보호가
+  실제로 동작하지 않던 잠재 결함
+
+## [0.4.1] - 2026-05-07
+
+### Fixed
+- eslint.config.js에서 제거된 React 플러그인 참조 삭제 (eslint-plugin-react-hooks, eslint-plugin-react-refresh)
+
+## [0.4.0] - 2026-05-07
+
+### BREAKING CHANGES
+- `UDataGrid` 컴포넌트 제거 — DevExtreme 상용 라이선스 의존성 해소
+  - `src/components/data-grid/UDataGrid.tsx`, `UDataGrid.types.ts` 삭제
+  - `src/utilities/devExtremeCssInjection.ts`, `src/styles/devextreme-overrides.css` 삭제
+  - `exports['./data-grid']` 제거
+  - `dependencies`에서 `devextreme`, `devextreme-react`, `react`, `react-dom` 제거
+
+### Migration
+UDataGrid 대체: `@iyulab/flex-table` + `@iyulab/flex-table/odata` 조합 사용
+→ [마이그레이션 가이드](./docs/migrating-from-datagrid.md)
+
+## [0.3.2] - 2026-05-07
+
+### Added
+- `docs/migrating-from-datagrid.md`: UDataGrid(DevExtreme)에서 `@iyulab/flex-table`로 전환하는 마이그레이션 가이드 추가 (yesung-oms 9개 페이지 실증 기반)
+- README에 UDataGrid 대안 섹션 및 마이그레이션 가이드 링크 추가
+- `docs/UDataGrid.md` 상단에 마이그레이션 가이드 링크 추가
+
 ## [0.3.1] - 2026-04-01
 ### Changed
 - 컴포넌트 파일 구조 리팩토링: `.component.ts` 파일을 기존 `.ts`로 병합 (UDataView, USimpleSheet, URichTable)

package/README.md

@@ -6,7 +6,11 @@
 
 - **USimpleSheet** — 엑셀 호환 스프레드시트 입력 컴포넌트 (Lit, compute 자동 계산 지원)
 - **UDataView** — Grid / List / Table 뷰 전환 컴포넌트 (Lit)
-- **UDataGrid** — OData 기반 서버 사이드 데이터 그리드 (React + DevExtreme)
+- **URichTable** — 정렬/필터/편집/페이지네이션 지원 테이블 (Lit)
+
+> **UDataGrid (DevExtreme)는 v0.4.0에서 제거되었습니다.**
+> OData 서버 사이드 그리드가 필요하면 `@iyulab/flex-table`을 사용하세요.
+> → [마이그레이션 가이드](./docs/migrating-from-datagrid.md)
 
 ## Installation
 
@@ -73,26 +77,55 @@ npm install @iyulab/data-components
 ></u-data-view>
 ```
 
-### UDataGrid (React)
+## React
+
+`@lit/react` 기반 일급 래퍼를 `/react` 서브패스로 제공합니다. rich property(`data`, `columns` 등)를
+JSX props로 직접 전달할 수 있고, 커스텀 이벤트는 `onXxx` props로 받습니다 — ref + `useEffect`
+브리지가 필요 없습니다.
+
+```bash
+npm install @iyulab/data-components @lit/react react
+```
 
 ```tsx
-import { UDataGrid } from '@iyulab/data-components';
-
-<UDataGrid
-  dataSourceUrl="https://api.example.com/odata/products"
-  keyField="id"
-  columns={[
-    { dataField: 'name',  caption: '상품명' },
-    { dataField: 'price', caption: '가격', dataType: 'number' },
-  ]}
-/>
+import { USimpleSheetReact, type SheetColumn } from '@iyulab/data-components/react';
+
+const columns: SheetColumn[] = [
+  { key: 'name',  label: '이름',   width: 150 },
+  { key: 'email', label: '이메일', width: 220 },
+];
+
+export function MySheet() {
+  return (
+    <USimpleSheetReact
+      style={{ height: 400 }}
+      columns={columns}
+      data={[['홍길동', 'hong@example.com']]}
+      rows={25}
+      onChange={(e) => console.log(e.detail.data)}
+    />
+  );
+}
+```
+
+`URichTableReact`는 `RichTableEventMap`의 모든 이벤트(`onRowUpdate`, `onSortChange`,
+`onSelectionChange` 등)를 타입드 props로 노출합니다. `UDataViewReact`도 동일하게 제공됩니다.
+
+타입스크립트만 필요하다면 래퍼 없이도 엘리먼트 클래스와 `HTMLElementTagNameMap` 증강이
+메인 엔트리에서 제공됩니다:
+
+```typescript
+import type { USimpleSheet } from '@iyulab/data-components';
+
+const sheet = document.querySelector('u-simple-sheet'); // USimpleSheet | null 로 추론
 ```
 
 ## Documentation
 
 - [USimpleSheet](./docs/USimpleSheet.md)
 - [UDataView](./docs/UDataView.md)
-- [UDataGrid](./docs/UDataGrid.md)
+- [URichTable](./docs/URichTable.md)
+- [UDataGrid 마이그레이션 가이드](./docs/migrating-from-datagrid.md)
 
 ## Theming
 

package/dist/_virtual/{_@oxc-project_runtime@0.122.0/helpers → _@oxc-project_runtime@0.133.0/helpers/esm}/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.122.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/dist/_virtual/{_@oxc-project_runtime@0.122.0/helpers → _@oxc-project_runtime@0.133.0/helpers/esm}/decorateMetadata.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.122.0/helpers/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateMetadata.js
 function __decorateMetadata(k, v) {
 	if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 }

package/dist/components/data-view/UDataView.js

@@ -1,6 +1,6 @@
 import { styles } from "./UDataView.styles.js";
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";

package/dist/components/simple-sheet/USimpleSheet.js

@@ -1,5 +1,5 @@
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
 import { styles } from "./USimpleSheet.styles.js";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";

package/dist/components/u-rich-table/URichTable.js

@@ -1,5 +1,5 @@
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
 import { richTableStyles } from "./styles.js";
 import { parseTSV, toTSV } from "./utils/clipboard.js";
 import { LitElement, html } from "lit";
@@ -578,8 +578,9 @@ var URichTable = class URichTable extends LitElement {
 	_moveFocus(dx, dy) {
 		if (!this.focusedCell) return;
 		const newCol = Math.max(0, Math.min(this.columns.length - 1, this.focusedCell.colIndex + dx));
+		const newRow = Math.max(0, Math.min(this.data.length - 1, this.focusedCell.rowIndex + dy));
 		this.focusedCell = {
-			rowIndex: Math.max(0, Math.min(this.data.length - 1, this.focusedCell.rowIndex + dy)),
+			rowIndex: newRow,
 			colIndex: newCol
 		};
 	}

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-export { UDataGrid } from './components/data-grid/UDataGrid';
-export type { UDataGridColumn, UDataGridProps } from './components/data-grid/UDataGrid.types';
 export * from './components/data-view/UDataView';
 export * from './components/simple-sheet/USimpleSheet';
 export * from './components/u-rich-table/URichTable';

package/dist/index.js

@@ -1,5 +1,5 @@
-import { UDataGrid } from "./components/data-grid/UDataGrid.js";
+import "./utilities/shadowDomProtection.js";
 import { UDataView } from "./components/data-view/UDataView.js";
 import { USimpleSheet } from "./components/simple-sheet/USimpleSheet.js";
 import { URichTable } from "./components/u-rich-table/URichTable.js";
-export { UDataGrid, UDataView, URichTable, USimpleSheet };
+export { UDataView, URichTable, USimpleSheet };

package/dist/react.d.ts

@@ -0,0 +1,29 @@
+import { EventName } from '@lit/react';
+import { USimpleSheet } from './components/simple-sheet/USimpleSheet';
+import { UDataView } from './components/data-view/UDataView';
+import { URichTable } from './components/u-rich-table/URichTable';
+import { RichTableEventMap } from './components/u-rich-table/types';
+/** USimpleSheet React 래퍼 — `change` 이벤트는 `onChange`로 노출 */
+export declare const USimpleSheetReact: import('@lit/react').ReactWebComponent<USimpleSheet, {
+    onChange: EventName<CustomEvent<{
+        data: string[][];
+    }>>;
+}>;
+/** UDataView React 래퍼 */
+export declare const UDataViewReact: import('@lit/react').ReactWebComponent<UDataView, {}>;
+/** URichTable React 래퍼 — RichTableEventMap의 모든 이벤트를 onXxx로 노출 */
+export declare const URichTableReact: import('@lit/react').ReactWebComponent<URichTable, {
+    onSelectionChange: EventName<RichTableEventMap["selection-change"]>;
+    onRowCreate: EventName<RichTableEventMap["row-create"]>;
+    onRowUpdate: EventName<RichTableEventMap["row-update"]>;
+    onRowDelete: EventName<RichTableEventMap["row-delete"]>;
+    onRowExpand: EventName<RichTableEventMap["row-expand"]>;
+    onSortChange: EventName<RichTableEventMap["sort-change"]>;
+    onFilterChange: EventName<RichTableEventMap["filter-change"]>;
+    onPageChange: EventName<RichTableEventMap["page-change"]>;
+    onPaste: EventName<RichTableEventMap["paste"]>;
+}>;
+export { USimpleSheet, UDataView, URichTable };
+export type { SheetColumn } from './components/simple-sheet/USimpleSheet';
+export type { DataColumn, ViewMode } from './components/data-view/UDataView';
+export type { ColumnDef, CellPosition, SortState, FilterState, RichTableEventMap, } from './components/u-rich-table/types';

package/dist/react.js

@@ -0,0 +1,48 @@
+import "./utilities/shadowDomProtection.js";
+import { UDataView } from "./components/data-view/UDataView.js";
+import { USimpleSheet } from "./components/simple-sheet/USimpleSheet.js";
+import { URichTable } from "./components/u-rich-table/URichTable.js";
+import React from "react";
+import { createComponent } from "@lit/react";
+//#region src/react.ts
+/**
+* React 래퍼 엔트리 (`@iyulab/data-components/react`)
+*
+* `@lit/react` createComponent 기반 — rich property(`data`, `columns` 등)를
+* JSX props로 직접 전달할 수 있고, 커스텀 이벤트는 `onXxx` props로 노출됩니다.
+*
+* react / @lit/react 는 optional peerDependency — 이 서브패스를 import하는
+* React 소비자에게만 필요합니다.
+*/
+/** USimpleSheet React 래퍼 — `change` 이벤트는 `onChange`로 노출 */
+var USimpleSheetReact = createComponent({
+	tagName: "u-simple-sheet",
+	elementClass: USimpleSheet,
+	react: React,
+	events: { onChange: "change" }
+});
+/** UDataView React 래퍼 */
+var UDataViewReact = createComponent({
+	tagName: "u-data-view",
+	elementClass: UDataView,
+	react: React
+});
+/** URichTable React 래퍼 — RichTableEventMap의 모든 이벤트를 onXxx로 노출 */
+var URichTableReact = createComponent({
+	tagName: "u-rich-table",
+	elementClass: URichTable,
+	react: React,
+	events: {
+		onSelectionChange: "selection-change",
+		onRowCreate: "row-create",
+		onRowUpdate: "row-update",
+		onRowDelete: "row-delete",
+		onRowExpand: "row-expand",
+		onSortChange: "sort-change",
+		onFilterChange: "filter-change",
+		onPageChange: "page-change",
+		onPaste: "paste"
+	}
+});
+//#endregion
+export { UDataView, UDataViewReact, URichTable, URichTableReact, USimpleSheet, USimpleSheetReact };

package/dist/utilities/shadowDomProtection.js

@@ -0,0 +1,99 @@
+//#region src/utilities/shadowDomProtection.ts
+/**
+* Shadow DOM Style Protection
+*
+* Protects Lit component styles from being overwritten by Vite HMR.
+* When DevExtreme or other libraries load CSS, Vite HMR may clear/replace
+* Shadow DOM's adoptedStyleSheets, causing Lit component styles to be lost.
+*
+* This module intercepts adoptedStyleSheets setter to:
+* 1. Detect and save Lit styles (identified by :host selector)
+* 2. Block HMR reset attempts that would clear Lit styles
+* 3. Merge Lit styles with other styles (like DevExtreme)
+* 4. Protect registered custom stylesheets from being lost during re-renders
+*/
+var isInitialized = false;
+var protectedCustomStylesheets = /* @__PURE__ */ new Set();
+/**
+* Check if a stylesheet is a protected custom stylesheet
+*/
+function isProtectedCustomStylesheet(sheet) {
+	return protectedCustomStylesheets.has(sheet);
+}
+/**
+* Check if a stylesheet is a Lit component stylesheet
+* Lit styles typically start with :host selector
+*/
+function isLitStyleSheet(sheet) {
+	try {
+		if (!sheet.cssRules || sheet.cssRules.length === 0) return false;
+		return sheet.cssRules[0].cssText.startsWith(":host");
+	} catch {
+		return false;
+	}
+}
+/**
+* Check if the sheets array is empty or an HMR reset attempt
+* Vite HMR may set adoptedStyleSheets to empty array or sheets without rules
+*/
+function isEmptyOrHMRReset(sheets) {
+	if (!sheets || sheets.length === 0) return true;
+	return sheets.every((sheet) => {
+		try {
+			return !sheet.cssRules || sheet.cssRules.length === 0;
+		} catch {
+			return true;
+		}
+	});
+}
+/**
+* Initialize Shadow DOM style protection
+* Should be called before any Lit components are loaded
+*/
+function initShadowDomProtection() {
+	if (isInitialized) return;
+	if (typeof window === "undefined") return;
+	const originalDescriptor = Object.getOwnPropertyDescriptor(ShadowRoot.prototype, "adoptedStyleSheets");
+	if (!originalDescriptor) {
+		console.warn("[data-components] adoptedStyleSheets descriptor not found");
+		return;
+	}
+	const protectedLitStylesMap = /* @__PURE__ */ new WeakMap();
+	Object.defineProperty(ShadowRoot.prototype, "adoptedStyleSheets", {
+		get() {
+			return originalDescriptor.get?.call(this) ?? [];
+		},
+		set(sheets) {
+			const savedLitStyles = protectedLitStylesMap.get(this) || [];
+			const newLitStyles = sheets?.filter(isLitStyleSheet) || [];
+			const newNonLitStyles = sheets?.filter((s) => !isLitStyleSheet(s)) || [];
+			if (newLitStyles.length > 0) protectedLitStylesMap.set(this, [...newLitStyles]);
+			const protectedSheets = Array.from(protectedCustomStylesheets);
+			if (isEmptyOrHMRReset(sheets) && (savedLitStyles.length > 0 || protectedSheets.length > 0)) {
+				const preserved = [...savedLitStyles, ...protectedSheets.filter((s) => !savedLitStyles.includes(s))];
+				originalDescriptor.set?.call(this, preserved);
+				return;
+			}
+			if (savedLitStyles.length > 0 && newLitStyles.length === 0 && newNonLitStyles.length > 0) {
+				const nonProtectedNewStyles = newNonLitStyles.filter((s) => !isProtectedCustomStylesheet(s));
+				const mergedSheets = [
+					...savedLitStyles,
+					...protectedSheets.filter((s) => !savedLitStyles.includes(s)),
+					...nonProtectedNewStyles.filter((s) => !protectedSheets.includes(s))
+				];
+				originalDescriptor.set?.call(this, mergedSheets);
+				return;
+			}
+			const finalSheets = sheets ? [...sheets] : [];
+			protectedSheets.forEach((ps) => {
+				if (!finalSheets.includes(ps)) finalSheets.push(ps);
+			});
+			originalDescriptor.set?.call(this, finalSheets);
+		},
+		configurable: true,
+		enumerable: true
+	});
+	isInitialized = true;
+}
+initShadowDomProtection();
+//#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/data-components",
   "description": "iyulab data visualization components",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "keywords": [
     "iyulab",
     "web-components",
@@ -29,15 +29,21 @@
     },
     "./dist/*": "./dist/*",
     "./init": "./dist/init.js",
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js"
+    },
     "./simple-sheet": "./dist/components/simple-sheet/USimpleSheet.js",
     "./data-view": "./dist/components/data-view/UDataView.js",
-    "./data-grid": "./dist/components/data-grid/UDataGrid.js",
     "./u-rich-table": "./dist/components/u-rich-table/URichTable.js"
   },
   "sideEffects": [
+    "./src/utilities/shadowDomProtection.ts",
+    "./src/components/data-view/UDataView.ts",
+    "./src/components/simple-sheet/USimpleSheet.ts",
+    "./src/components/u-rich-table/URichTable.ts",
+    "./src/init.ts",
     "./dist/utilities/shadowDomProtection.js",
-    "./dist/utilities/devExtremeCssInjection.js",
-    "./dist/components/data-grid/UDataGrid.js",
     "./dist/components/data-view/UDataView.js",
     "./dist/components/simple-sheet/USimpleSheet.js",
     "./dist/components/u-rich-table/URichTable.js",
@@ -48,27 +54,33 @@
     "build": "eslint && vite build"
   },
   "dependencies": {
-    "@iyulab/components": "^1.0.0",
-    "devextreme": "^25.2.5",
-    "devextreme-react": "^25.2.5",
-    "lit": "^3.3.2",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
+    "@iyulab/components": "^1.0.6",
+    "lit": "^3.3.3"
+  },
+  "peerDependencies": {
+    "@lit/react": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@lit/react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
-    "@types/node": "^25.5.0",
+    "@lit/react": "^1.0.8",
     "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
+    "@types/node": "^25.8.0",
     "eslint": "^9.39.4",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
     "glob": "^13.0.6",
-    "globals": "^17.4.0",
+    "globals": "^17.6.0",
+    "react": "^19.2.6",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.57.2",
-    "vite": "^8.0.3",
-    "vite-plugin-dts": "^4.5.4"
+    "typescript-eslint": "^8.59.3",
+    "vite": "^8.0.13",
+    "vite-plugin-dts": "^5.0.0"
   }
 }

package/dist/components/data-grid/UDataGrid.d.ts

@@ -1,2 +0,0 @@
-import { UDataGridProps } from './UDataGrid.types.js';
-export declare function UDataGrid({ dataSourceUrl, keyField, selectFields, columns, pageSize, showBorders, allowColumnReordering, allowColumnResizing, showGroupPanel, showSearchPanel, showFilterRow, showHeaderFilter, allowExport, exportFileName, isDevelopment, onDataLoaded, onDataLoadError, onExporting, onRowClick, beforeSend }: UDataGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-grid/UDataGrid.js

@@ -1,146 +0,0 @@
-import { useMemo } from "react";
-import "devextreme/data/odata/store";
-import DataGrid, { Column, ColumnChooser, Export, FilterRow, GroupPanel, Grouping, HeaderFilter, Item, LoadPanel, Paging, SearchPanel, Selection, Toolbar } from "devextreme-react/data-grid";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/data-grid/UDataGrid.tsx
-function UDataGrid({ dataSourceUrl, keyField, selectFields, columns, pageSize = 25, showBorders = true, allowColumnReordering = true, allowColumnResizing = true, showGroupPanel = true, showSearchPanel = true, showFilterRow = true, showHeaderFilter = true, allowExport = true, exportFileName, isDevelopment = false, onDataLoaded, onDataLoadError, onExporting, onRowClick, beforeSend }) {
-	const defaultBeforeSend = (operation, ajaxOptions) => {
-		try {
-			if (!ajaxOptions) {
-				console.warn("ajaxOptions가 undefined입니다");
-				return;
-			}
-			if (!ajaxOptions.headers || typeof ajaxOptions.headers !== "object") ajaxOptions.headers = {};
-			ajaxOptions.headers["Accept"] = "application/json";
-			ajaxOptions.headers["Content-Type"] = "application/json";
-			if (isDevelopment) {
-				ajaxOptions.crossDomain = true;
-				ajaxOptions.headers["Access-Control-Allow-Origin"] = "*";
-			}
-			console.log(`U-DataGrid ${operation} 요청:`, {
-				url: ajaxOptions.url,
-				headers: ajaxOptions.headers,
-				method: ajaxOptions.type || "GET"
-			});
-		} catch (error) {
-			console.error("beforeSend 처리 중 오류:", error);
-		}
-	};
-	const defaultOnLoadError = (error) => {
-		console.error("U-DataGrid 데이터 로딩 오류:", error);
-		let errorMessage = "데이터를 불러오는 중 오류가 발생했습니다.";
-		try {
-			if (error && typeof error === "object") {
-				if (error.status === 404) errorMessage = "API 엔드포인트를 찾을 수 없습니다. 서버가 실행중인지 확인해주세요.";
-				else if (error.status === 0) errorMessage = "CORS 오류 또는 네트워크 연결 문제입니다. 서버 설정을 확인해주세요.";
-				else if (error.status >= 500) errorMessage = "서버 내부 오류입니다. 서버 로그를 확인해주세요.";
-				else if (error.message) errorMessage = error.message;
-				else if (typeof error === "string") errorMessage = error;
-			}
-		} catch (parseError) {
-			console.error("오류 메시지 파싱 중 문제:", parseError);
-		}
-		alert(`${errorMessage}\n\n요청 URL: ${dataSourceUrl}`);
-	};
-	const dataSource = useMemo(() => {
-		return {
-			store: {
-				type: "odata",
-				version: 4,
-				url: dataSourceUrl,
-				key: keyField,
-				beforeSend: beforeSend || defaultBeforeSend,
-				onLoading: () => {
-					console.log("U-DataGrid 데이터 로딩 시작...");
-				},
-				onLoaded: (data) => {
-					console.log("U-DataGrid 데이터 로딩 완료:", data);
-					onDataLoaded?.(data);
-				},
-				onLoadError: onDataLoadError || defaultOnLoadError
-			},
-			select: selectFields
-		};
-	}, [
-		dataSourceUrl,
-		keyField,
-		selectFields,
-		beforeSend,
-		onDataLoaded,
-		onDataLoadError
-	]);
-	const handleExporting = (e) => {
-		if (exportFileName) e.fileName = exportFileName;
-		else e.fileName = `DataGrid_Export_${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}`;
-		onExporting?.(e);
-	};
-	return /* @__PURE__ */ jsx("div", {
-		style: {
-			width: "100%",
-			height: "100%",
-			position: "relative",
-			contain: "layout style",
-			isolation: "isolate",
-			overflow: "hidden"
-		},
-		children: /* @__PURE__ */ jsxs(DataGrid, {
-			dataSource,
-			showBorders,
-			allowColumnReordering,
-			allowColumnResizing,
-			columnAutoWidth: false,
-			showColumnLines: true,
-			showRowLines: true,
-			rowAlternationEnabled: true,
-			hoverStateEnabled: true,
-			height: "100%",
-			width: "100%",
-			wordWrapEnabled: true,
-			columnResizingMode: "widget",
-			remoteOperations: true,
-			onExporting: handleExporting,
-			onRowClick,
-			children: [
-				/* @__PURE__ */ jsx(LoadPanel, { enabled: true }),
-				/* @__PURE__ */ jsx(Selection, { mode: "multiple" }),
-				showFilterRow && /* @__PURE__ */ jsx(FilterRow, { visible: true }),
-				showHeaderFilter && /* @__PURE__ */ jsx(HeaderFilter, { visible: true }),
-				showSearchPanel && /* @__PURE__ */ jsx(SearchPanel, {
-					visible: true,
-					placeholder: "검색..."
-				}),
-				/* @__PURE__ */ jsx(Grouping, { autoExpandAll: false }),
-				showGroupPanel && /* @__PURE__ */ jsx(GroupPanel, { visible: true }),
-				/* @__PURE__ */ jsx(ColumnChooser, { enabled: true }),
-				/* @__PURE__ */ jsx(Paging, { defaultPageSize: pageSize }),
-				allowExport && /* @__PURE__ */ jsx(Export, { enabled: true }),
-				/* @__PURE__ */ jsxs(Toolbar, { children: [
-					showGroupPanel && /* @__PURE__ */ jsx(Item, { name: "groupPanel" }),
-					allowExport && /* @__PURE__ */ jsx(Item, { name: "exportButton" }),
-					/* @__PURE__ */ jsx(Item, { name: "columnChooserButton" }),
-					showSearchPanel && /* @__PURE__ */ jsx(Item, { name: "searchPanel" })
-				] }),
-				columns.map((col, index) => /* @__PURE__ */ jsx(Column, {
-					dataField: col.dataField,
-					caption: col.caption,
-					width: col.width,
-					minWidth: col.minWidth,
-					dataType: col.dataType,
-					format: col.format,
-					alignment: col.alignment,
-					fixed: col.fixed,
-					fixedPosition: col.fixedPosition,
-					allowHiding: col.allowHiding,
-					allowSorting: col.allowSorting,
-					allowFiltering: col.allowFiltering,
-					allowGrouping: col.allowGrouping,
-					sortOrder: col.sortOrder,
-					cellRender: col.cellRender,
-					visible: col.visible
-				}, col.dataField || `column-${index}`))
-			]
-		})
-	});
-}
-//#endregion
-export { UDataGrid };

package/dist/components/data-grid/UDataGrid.types.d.ts

@@ -1,42 +0,0 @@
-export interface UDataGridColumn {
-    dataField?: string;
-    caption: string;
-    width?: number;
-    minWidth?: number;
-    dataType?: 'string' | 'number' | 'date' | 'datetime' | 'boolean';
-    format?: string;
-    alignment?: 'left' | 'center' | 'right';
-    fixed?: boolean;
-    fixedPosition?: 'left' | 'right';
-    allowHiding?: boolean;
-    allowSorting?: boolean;
-    allowFiltering?: boolean;
-    allowGrouping?: boolean;
-    sortOrder?: 'asc' | 'desc';
-    cellRender?: (cellData: any) => React.ReactNode;
-    visible?: boolean;
-}
-export interface UDataGridProps {
-    dataSourceUrl: string;
-    keyField: string;
-    selectFields?: string[];
-    columns: UDataGridColumn[];
-    pageSize?: number;
-    showBorders?: boolean;
-    allowColumnReordering?: boolean;
-    allowColumnResizing?: boolean;
-    showGroupPanel?: boolean;
-    showSearchPanel?: boolean;
-    showFilterRow?: boolean;
-    showHeaderFilter?: boolean;
-    allowExport?: boolean;
-    exportFileName?: string;
-    isDevelopment?: boolean;
-    onDataLoaded?: (data: any) => void;
-    onDataLoadError?: (error: any) => void;
-    onExporting?: (e: any) => void;
-    onRowClick?: (e: {
-        data: Record<string, unknown>;
-    }) => void;
-    beforeSend?: (operation: string, ajaxOptions: any) => void;
-}

package/dist/utilities/devExtremeCssInjection.d.ts

@@ -1,23 +0,0 @@
-/**
- * DevExtreme CSS Shadow DOM Injection
- *
- * DevExtreme components render inside Shadow DOM but their CSS is loaded
- * in the Light DOM. Due to Shadow DOM encapsulation, Light DOM CSS doesn't
- * apply to Shadow DOM content.
- *
- * This module:
- * 1. Imports DevExtreme CSS as text (using Vite ?inline query)
- * 2. Creates a CSSStyleSheet from the CSS text
- * 3. Injects the stylesheet into all Shadow DOMs
- * 4. Uses MutationObserver to detect and inject into new Shadow DOMs
- */
-/**
- * Initialize DevExtreme CSS injection
- * Sets up MutationObserver to detect new Shadow DOMs
- */
-export declare function initDevExtremeCssInjection(): void;
-/**
- * Register and inject custom CSS into all Shadow DOMs (existing and future)
- * Sets up automatic injection for new Shadow DOMs via MutationObserver
- */
-export declare function injectCssToShadowDoms(cssText: string): CSSStyleSheet | null;