@noraent/nora-datagrid 1.1.0-beta.1 → 1.1.0-beta.3

package/dist/App.js

@@ -0,0 +1,298 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import { DataGrid } from "./DataGrid";
+import { useGridApiRef } from "./hooks/useGridApiRef";
+import { createTheme, LicenseInfo } from "./types";
+import ThemeProvider from "./provider/ThemeProvider";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, MenuItem, Select } from "@mui/material";
+LicenseInfo.setLicenseKey("eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJsaWNlbnNlZSI6Imxlb0Bub3JhZW50LmNvbSIsInBsYW4iOiJQcm8iLCJ2ZXJzaW9uIjoiPj0wLjAuMCA8MS4yLjAiLCJkZXZlbG9wZXJzIjoxLCJkZXNjcmlwdGlvbiI6IlxuICDsgqzsmqkg67KU7JyEOiBcbiAg6riI7KeAIOyCrO2VrTog6rWs66ek7ZWY7KeAIOyViuydgCDri6Trpbgg6rCc67Cc7J6Q7JmAIOudvOydtOyEoOyKpCDtgqTrpbwg6rO17Jyg7ZWY6rGw64KYIOyerO2MkOunpO2VmOuKlCDqsoPsnYAg7JeE6rKp7Z6IIOq4iOyngOuQqeuLiOuLpC4g7J2064qUIOyVveq0gCDsnITrsJjsnbTrqbAg66y064uoIOuPhOyaqeycvOuhnCDqsITso7zrkKnri4jri6RcbiAgIiwiaWF0IjoxNzYyNDA4MTI1fQ.rgc9CcY1PeFd74dUayjsFGuaLIKtvKmpCyzZw_-MeD-1PP32HTzZ6pwg-Y7_YyZ541XTqsuGyKxwxnFG5TM4-4jwfFzSXmapub0JhwhN63ntJcYzY-VjmK9DxiKXwtd9jfruAGNktHhkmkXrHyW7nRWTpiSPDqOqLivaPs3Tb0qrSRSWDiLpeyUSiy_V0FsYLdjc1RLFbnqyJnrwb-06Q-0QnraAixjyxwEqYw1wan9Xcti538RTqF1hOt_fAg_Fm0Pr8sptweKLTOgfrXQcE6aBUP2cfkiFdqH_n_05JSSgEprIZVgXVzCfJWqNYiXduPvWomSstUlOwntlCuQmhw");
+const RenderCell = (params) => {
+    return (_jsxs("div", { style: { background: "green" }, children: [_jsx("button", { onClick: () => {
+                    params.gridRef.current.setRowHeight(1, 100);
+                }, children: "??" }), params.value] }));
+};
+const RenderEditCell = (params) => {
+    const handleChange = (e) => {
+        var _a;
+        (_a = params.gridRef) === null || _a === void 0 ? void 0 : _a.current.setEditCellValue({
+            id: params.rowRef.current.id,
+            fieldId: "currency",
+            value: e.target.value,
+        });
+    };
+    return (_jsx("div", { children: _jsx(Select
+        // {...params as any}
+        // onChange={(e) => { console.log(e); }}
+        , { 
+            // {...params as any}
+            // onChange={(e) => { console.log(e); }}
+            value: params.value, inputRef: params.ref, onChange: (e) => {
+                var _a, _b;
+                (_a = params.gridRef) === null || _a === void 0 ? void 0 : _a.current.setEditCellValue({ id: params.rowRef.current.id, fieldId: "currency", value: e.target.value });
+                (_b = params.gridRef) === null || _b === void 0 ? void 0 : _b.current.setEditCellValue({ id: params.rowRef.current.id, fieldId: "code", value: "test" });
+            }, 
+            // MenuProps={{
+            //   disablePortal: true,
+            // }}
+            autoFocus: true, fullWidth: true, size: "small", displayEmpty: true, children: _jsx(MenuItem, { value: "test", children: "test" }, "test") }) }));
+};
+function getRandomName() {
+    const firstNames = ["김", "이", "박", "최", "우", "정", "화"]; // 성
+    const lastNames = ["민준", "서연", "지훈", "하은", "지민", "태경", "유림", "라봉"]; // 이름
+    const randomFirstName = firstNames[Math.floor(Math.random() * firstNames.length)];
+    const randomLastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+    return randomFirstName + randomLastName;
+}
+const generateRandomData = () => {
+    // const length = Math.round(Math.random() * 2000 + 1);
+    const length = Math.round(1000);
+    console.log("length", length);
+    return Array.from({ length }, (_, idx) => ({
+        id: idx + 1,
+        name: getRandomName(),
+        currency: getRandomName(),
+        code: Math.floor(Math.random() * 60) + 18,
+        height: Math.floor(Math.random() * 60) + 18,
+    }));
+};
+function App() {
+    // const ref = React.useRef<GirdApi>(null);
+    const ref = useGridApiRef();
+    const [dataSource, setDataSource] = useState([]);
+    const [testColumns, setTestColumns] = React.useState([
+        {
+            fieldId: "id",
+            fieldName: "코드",
+            width: 200,
+        },
+        {
+            fieldId: "name",
+            fieldName: "이름",
+            width: 120,
+            renderCell: RenderCell,
+            renderEditCell: RenderEditCell,
+            editable: false,
+            sortable: false,
+            cellClassName: "custom-cell-border",
+        },
+        {
+            fieldId: "currency",
+            fieldName: "성명",
+            width: 120,
+            renderCell: RenderCell,
+            renderEditCell: RenderEditCell,
+            editable: true,
+            singleClickEdit: true,
+            cellClassName: (params) => {
+                console.log("!!!!", params);
+                return "super-app super-app2";
+            },
+        },
+        {
+            fieldId: "code",
+            fieldName: "국가",
+            width: "120",
+            textAlign: "right",
+            editable: true,
+            singleClickEdit: true,
+        },
+        {
+            fieldId: "currency5",
+            fieldName: "구매링크",
+            width: "120",
+        },
+        {
+            fieldId: "currency6",
+            fieldName: "카드",
+            width: "130",
+            editable: true,
+        },
+        {
+            fieldId: "currency7",
+            fieldName: "7",
+            width: "130",
+            editable: true,
+        },
+        {
+            fieldId: "currency8",
+            fieldName: "8",
+            width: "130",
+            editable: true,
+        },
+        {
+            fieldId: "currency9",
+            fieldName: "9",
+            width: "130",
+            editable: true,
+        },
+    ]);
+    const handleDataSource = () => {
+        // const data = Array.from({ length: 1000 }, (_, i) => {
+        //   return {
+        //     id: i,
+        //     code: `test-${i}`,
+        //     name: `name-${i}`,
+        //     note: `note-${i}`,
+        //     date: new Date(),
+        //     currency4: `test=${i}`,
+        //     // height: 30,
+        //     // height: 20,
+        //     // height: Math.floor(Math.random() * 20) + 20,
+        //   };
+        // }) as Array<any>;
+        setDataSource(generateRandomData());
+    };
+    useEffect(() => {
+        // handleDataSource();
+    }, []);
+    const test = React.useRef(1);
+    const [test2, setTest2] = React.useState(1);
+    const [loading, setLoading] = React.useState(false);
+    const [promiseArguments, setPromiseArguments] = useState(null);
+    // React.useEffect(() => {
+    //   if (promiseArguments) {
+    //     setTimeout(() => {
+    //       promiseArguments.resolve(promiseArguments.newRow);
+    //     }, 5000);
+    //   }
+    // }, [promiseArguments]);
+    const [mode, setMode] = React.useState("light");
+    const theme = React.useMemo(() => createTheme({
+        mode: mode,
+        palette: {
+            primary: {
+                main: "#009dffff",
+            },
+            background: {
+                paper: "#1f2837",
+            },
+        },
+        components: {
+            HeaderCell: {
+                default: {
+                    text: {
+                        main: "#FFF",
+                    },
+                    backgroundColor: "#2a3341",
+                    borderColor: "#404855",
+                },
+            },
+            Row: {
+                style: {
+                    borderColor: "#404855",
+                    "&.NoraDataGridRow-root": {
+                        "& .custom-cell-border": {
+                            border: "0px",
+                            borderWidth: "0px 3px 0px",
+                            borderStyle: "solid",
+                            borderColor: "#ffb800",
+                        },
+                        "&:first-child": {
+                            "& .custom-cell-border": {
+                                border: "0px",
+                                borderWidth: "3px 3px 0px",
+                                borderStyle: "solid",
+                                borderColor: "#ffb800",
+                            },
+                        },
+                        "&:last-child": {
+                            "& .custom-cell-border": {
+                                border: "0px",
+                                borderWidth: "0px 3px 3px",
+                                borderStyle: "solid",
+                                borderColor: "#ffb800",
+                            },
+                        },
+                    },
+                },
+                default: {
+                    text: {
+                        main: "#fff",
+                    },
+                },
+                hover: {
+                    background: "#213e5c",
+                },
+                "focus-hover": {
+                    background: "#264a71ff",
+                },
+            },
+        },
+        customVars: {
+            ":root": {
+                "--noraDataGrid-skeleton-bg-1": "#25303eff",
+                "--noraDataGrid-skeleton-bg-2": "#26384bff",
+                "--noraDataGrid-skeleton-bg-3": "#25303eff",
+            },
+        },
+    }), [mode]);
+    const [, forceUpdate] = React.useState(0);
+    console.log("@@@", theme);
+    const processRowUpdate = React.useCallback((newRow, oldRow) => {
+        return new Promise((resolve, reject) => {
+            console.log("행 업데이트 요청:", newRow, oldRow);
+            // if (newRow.currency4 !== oldRow.currency4 || newRow.currency !== oldRow.currency || newRow.currency6 !== oldRow.currency6) {
+            // resolve(newRow);
+            // } else {
+            // reject(oldRow);
+            // }
+            // forceUpdate((v) => v + 1);
+            if (newRow.currency4 !== oldRow.currency4 ||
+                newRow.currency !== oldRow.currency ||
+                newRow.currency6 !== oldRow.currency6 ||
+                newRow.code !== oldRow.code) {
+                console.log(">>>>", newRow);
+                setPromiseArguments({ resolve, reject, newRow, oldRow });
+                return;
+            }
+            resolve(newRow);
+        });
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsxs(Dialog, { open: !!promiseArguments, children: [_jsx(DialogTitle, { children: "Dialog Title" }), _jsx(DialogContent, {}), _jsxs(DialogActions, { children: [_jsx(Button, { autoFocus: true, onClick: () => {
+                                    promiseArguments.reject();
+                                    setPromiseArguments(null);
+                                }, children: "Cancel" }), _jsx(Button, { onClick: () => {
+                                    promiseArguments.resolve(promiseArguments.newRow);
+                                    setPromiseArguments(null);
+                                }, children: "OK" })] })] }), _jsx("button", { onClick: () => setMode(mode === "light" ? "dark" : "light"), children: "\uD14C\uB9C8 \uC804\uD658" }), _jsxs(ThemeProvider, { theme: theme, children: [_jsx("br", {}), _jsx("button", { onClick: () => {
+                            setDataSource(generateRandomData());
+                        }, children: "\uB370\uC774\uD130 \uC18C\uC2A4 \uBCC0\uACBD" }), _jsx("button", { onClick: () => {
+                            console.log("!!!", ref.current.getSelectedRow());
+                            console.log("!!!", ref.current.getData());
+                        }, children: "\uC120\uD0DD\uB41C \uD589 \uAC00\uC838\uC624\uAE30" }), _jsx("button", { onClick: () => {
+                            const randomData = Math.random() * 50 + 5;
+                            console.log("!!! loader 값 변경", randomData);
+                            setTest2(randomData);
+                        }, children: "loader \uAC12 \uBCC0\uACBD" }), _jsx("button", { onClick: () => { }, children: "validation check" }), _jsx("button", { onClick: () => {
+                            setTestColumns([]);
+                        }, children: "\uCEEC\uB7FC \uBCC0\uACBD" }), _jsx("button", { onClick: () => {
+                            ref.current.scrollToRowIndex(6);
+                        }, children: "414 \uC774\uB3D9" }), _jsx("button", { onClick: () => {
+                            ref.current.scrollBottomRowIndex(18);
+                        }, children: "\uC774\uB3D9" }), _jsx("button", { onClick: () => {
+                            ref.current.scrollToRowIndex(1000000);
+                        }, children: "1000000 \uC774\uB3D9" }), _jsx("button", { onClick: () => {
+                            handleDataSource();
+                        }, children: "\uB370\uC774\uD130 set" }), _jsx("button", { onClick: () => {
+                            // const data = ref.current.getData();
+                            console.log(ref.current.getSelectedRow());
+                        }, children: "\uD558" }), _jsx("button", { onClick: () => {
+                            // setLoading(!loading);
+                            forceUpdate((v) => v + 1);
+                        }, children: "\uB85C\uB529\uC2A4\uC704\uCE58" }), _jsx("div", { style: { width: "899px", height: "100%", border: "1px solid red", marginLeft: "200px" }, children: _jsx(DataGrid, { checkboxSelection: true, selectionMode: "single", gridRef: ref, columns: testColumns, dataSource: dataSource, loading: loading, imeEnabled: false, processRowUpdate: processRowUpdate }) }), _jsx("button", { onClick: () => {
+                            ref.current.setSelection([0, 1]);
+                        }, children: "dd" })] })] }));
+}
+export const initialItemsData = () => Array.from({ length: 10 }, (_, i) => {
+    return {
+        id: i,
+        // height: 36,
+        // height: Math.floor(Math.random() * 20) + 20,
+        columns: Array.from({ length: 20 }, (_, j) => ({
+            id: `${i}-${j}`,
+            width: 150,
+            content: `Cell ${i}-${j}-`,
+        })),
+    };
+});
+export default App;

package/dist/DataGrid.d.ts

@@ -1,3 +1,3 @@
-import { DataGridBasicPropsModel } from './types/dataGridProps';
 import * as React from "react";
-export declare const DataGrid: React.NamedExoticComponent<import('./types/dataGridCoreProps').DeepOmitStartsWith<Pick<DataGridBasicPropsModel, "columns" | "dataSource">, "__"> & Partial<import('./types/dataGridProps').DataGridOptionPropsModel> & React.RefAttributes<HTMLDivElement>>;
+import { DataGridBasicPropsModel } from "./types/dataGridProps";
+export declare const DataGrid: React.NamedExoticComponent<import("./types/dataGridCoreProps").DeepOmitStartsWith<Pick<DataGridBasicPropsModel, "columns" | "dataSource">, "__"> & Partial<import("./types/dataGridProps").DataGridOptionPropsModel> & React.RefAttributes<HTMLDivElement>>;

package/dist/DataGrid.js

@@ -0,0 +1,193 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useGridInitialization } from "./hooks/useGridInitialization";
+import { GridApiContext } from "./provider/GridApiContext";
+import { NoraDataGrid } from "./components/NoraDataGrid";
+import { TwoDimensionalVirtualizedList } from "./components/TwoDimensionalVirtualizedList";
+import { GridStoreContentProvider, useStore } from "./provider/GridStoreContent";
+import { Spinner, StyledNoneContent, Typography } from "./common/styled";
+import useGridApiContext from "./hooks/useGridApiContext";
+import { sorting } from "./components/virtualized/_components/VirtualHeader";
+import { generateGridTheme } from "./common/foundation/palette";
+import ThemeProvider, { useThemeContext } from "./provider/ThemeProvider";
+import { css, Global } from "@emotion/react";
+import _ from "lodash";
+import { WatermarStyled } from "./components/virtualized/_styled";
+import { LicenseInfo } from "./types/license/licenseInfo";
+import { Box } from "@mui/material";
+console.info(`%c
+███╗   ██╗ ██████╗ ██████╗  █████╗                                 
+████╗  ██║██╔═══██╗██╔══██╗██╔══██╗                                
+██╔██╗ ██║██║   ██║██████╔╝███████║                                
+██║╚██╗██║██║   ██║██╔══██╗██╔══██║                                
+██║ ╚████║╚██████╔╝██║  ██║██║  ██║                                
+╚═╝  ╚═══╝ ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝                                
+                                                                   
+██████╗  █████╗ ████████╗ █████╗        ██████╗ ██████╗ ██╗██████╗ 
+██╔══██╗██╔══██╗╚══██╔══╝██╔══██╗      ██╔════╝ ██╔══██╗██║██╔══██╗
+██║  ██║███████║   ██║   ███████║█████╗██║  ███╗██████╔╝██║██║  ██║
+██║  ██║██╔══██║   ██║   ██╔══██║╚════╝██║   ██║██╔══██╗██║██║  ██║
+██████╔╝██║  ██║   ██║   ██║  ██║      ╚██████╔╝██║  ██║██║██████╔╝
+╚═════╝ ╚═╝  ╚═╝   ╚═╝   ╚═╝  ╚═╝       ╚═════╝ ╚═╝  ╚═╝╚═╝╚═════╝   Beta3(v${import.meta.env.VITE_REACT_APP_VERSION})_${import.meta.env.VITE_RREACT_APP_ENV}
+`, "color:#22577A");
+const DataGridMain = (props) => {
+    const gridRef = useGridApiContext();
+    const [isInit, setIsInit] = React.useState(false);
+    const prevProps = React.useRef(null);
+    React.useEffect(() => {
+        prevProps.current = props;
+        gridRef.current.setInitialStore(props);
+        gridRef.current.initHeightCache();
+        setIsInit(true);
+    }, []);
+    if (!isInit) {
+        return (_jsxs(StyledNoneContent, { children: [_jsx(Spinner, {}), _jsx(Typography, { style: { marginTop: "8px", fontSize: "14px" }, children: "\uB85C\uB529\uC911" })] }));
+    }
+    return (_jsx(GridStoreContentProvider, { value: gridRef, children: _jsx(DataGridContent, { props: props, prevProps: prevProps }) }));
+};
+const DataGridContent = React.memo(({ props, prevProps }) => {
+    const gridRef = useGridApiContext();
+    const store = useStore();
+    React.useEffect(() => {
+        if (prevProps.current) {
+            Object.keys(props).forEach((key) => {
+                var _a;
+                const typedKey = key;
+                if (((_a = prevProps.current) === null || _a === void 0 ? void 0 : _a[typedKey]) !== props[typedKey]) {
+                    const basicStore = gridRef.current.setBasicStore(props);
+                    gridRef.current.setStoreState(typedKey, basicStore[typedKey]);
+                    store.setState(["state", typedKey], basicStore[typedKey]);
+                    if (key === "dataSource") {
+                        gridRef.current.store.__selectionList = [];
+                        // 다시 정렬
+                        if (gridRef.current.store.state.sortingMode === "client") {
+                            const sortedData = sorting(basicStore[typedKey], gridRef.current.store.sortModel);
+                            gridRef.current.setStoreState(typedKey, sortedData);
+                            store.setState(["state", "dataSource"], sortedData);
+                        }
+                        const heightCache = gridRef.current.initHeightCache();
+                        gridRef.current.reloadRange();
+                        store.setState(["cumulativeHeights"], heightCache);
+                        store.setState(["__reloadRangeRandomKey"], window.crypto.randomUUID());
+                        store.setState("__selectionList", []);
+                    }
+                }
+            });
+        }
+        prevProps.current = props;
+    }, [props]);
+    React.useEffect(() => {
+        // cellClassName 함수형 처리
+        const temp = new Set();
+        gridRef.current.store.state.columns.forEach((col) => {
+            if (typeof col.cellClassName === "function") {
+                const cellClassNameFunc = col.cellClassName({
+                    columns: gridRef.current.store.state.columns,
+                    column: gridRef.current.store.state.columns.find((c) => c.fieldId === col.fieldId),
+                });
+                temp.add({
+                    fieldId: col.fieldId,
+                    className: cellClassNameFunc,
+                });
+            }
+            else if (col === null || col === void 0 ? void 0 : col.cellClassName) {
+                temp.add({
+                    fieldId: col.fieldId,
+                    className: col.cellClassName,
+                });
+            }
+            store.setState("cellClassName", [
+                ...(gridRef.current.store.cellClassName = gridRef.current.store.cellClassName.filter((c) => c.fieldId !== col.fieldId)),
+                ...temp,
+            ]);
+        });
+    }, []);
+    React.useEffect(() => {
+        // 랜더링 없이 구독된 이벤트를 콜백 합니다.
+        gridRef.current.subscribeEvent("onSelectionRowClick", (row) => {
+            gridRef.current.store.state.onSelectionRowClick(row);
+        });
+        gridRef.current.subscribeEvent("onSelectionRowChange", (row) => {
+            gridRef.current.store.state.onSelectionRowChange(row);
+        });
+        gridRef.current.subscribeEvent("onSelectionRowChangeBefore", (newRows, oldRows) => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const result = yield gridRef.current.store.state.onSelectionRowChangeBefore(newRows, oldRows);
+                gridRef.current.store.__selectionList = result.flatMap((r) => r.__uuid);
+                store.setState("__selectionList", result.flatMap((r) => r.__uuid));
+                if (!_.isEqual(newRows, oldRows)) {
+                    gridRef.current.publishEvent("onSelectionRowChange", result);
+                }
+            }
+            catch (error) {
+                gridRef.current.store.__selectionList = oldRows.flatMap((r) => r.__uuid);
+                store.setState("__selectionList", oldRows.flatMap((r) => r.__uuid));
+            }
+        }));
+        gridRef.current.subscribeEvent("onSelectionRowClickBefore", (row, selected, selectionModel) => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b;
+            try {
+                const oldRows = gridRef.current.store.state.dataSource.filter((v) => gridRef.current.store.__selectionList.includes(v.__uuid));
+                const newRows = [...oldRows, row];
+                const result = yield gridRef.current.store.state.onSelectionRowClickBefore(row, selected, selectionModel);
+                const mode = gridRef.current.store.__selectionMode;
+                if (mode === "single") {
+                    if (result) {
+                        gridRef.current.store.__selectionList = [row.__uuid];
+                        store.setState("__selectionList", [row.__uuid]);
+                    }
+                    else {
+                        gridRef.current.store.__selectionList = [];
+                        store.setState("__selectionList", []);
+                    }
+                }
+                else {
+                    if (result) {
+                        gridRef.current.store.__selectionList = [...selectionModel, row.__uuid];
+                        store.setState("__selectionList", [...selectionModel, row.__uuid]);
+                    }
+                    else {
+                        gridRef.current.store.__selectionList = selectionModel.filter((uuid) => uuid !== row.__uuid);
+                        store.setState("__selectionList", selectionModel.filter((uuid) => uuid !== row.__uuid));
+                    }
+                }
+                if (typeof ((_a = gridRef.current.store.state) === null || _a === void 0 ? void 0 : _a.onSelectionRowClick) === "function") {
+                    gridRef.current.publishEvent("onSelectionRowClick", row);
+                }
+                if (typeof ((_b = gridRef.current.store.state) === null || _b === void 0 ? void 0 : _b.onSelectionRowChangeBefore) === "function") {
+                    if (!_.isEqual(newRows, oldRows)) {
+                        gridRef.current.publishEvent("onSelectionRowChangeBefore", newRows, oldRows);
+                    }
+                }
+                return result;
+            }
+            catch (error) { }
+        }));
+    }, []);
+    const imeRef = React.useRef(null);
+    return (_jsx(NoraDataGrid.Body, { imeRef: imeRef, children: _jsx(TwoDimensionalVirtualizedList, { imeRef: imeRef }) }));
+});
+const DataGridMaster = React.forwardRef((props, _ref) => {
+    const { gridRef, style } = props;
+    const apiRef = useGridInitialization(gridRef, props);
+    const containerRef = React.useRef(null);
+    const themeContext = useThemeContext();
+    const theme = themeContext ? themeContext : generateGridTheme("light");
+    React.useEffect(() => {
+        apiRef.current.setGridContainer(containerRef);
+    }, []);
+    const isValidLicense = LicenseInfo.isValid();
+    return (_jsxs(GridApiContext.Provider, { value: apiRef, children: [_jsx(Global, { styles: css `
+          ${theme.customVars}
+        ` }), _jsx(Box, { style: { position: "absolute", zIndex: "100", top: 0, background: "red" }, children: Math.random() }), _jsx(ThemeProvider, { theme: theme, children: _jsxs(NoraDataGrid, { ref: containerRef, style: style, children: [_jsx(NoraDataGrid.Title, {}), _jsx(DataGridMain, Object.assign({}, props)), !isValidLicense && _jsx(WatermarStyled, {})] }) })] }));
+});
+export const DataGrid = React.memo(DataGridMaster);

package/dist/buildPackage.json

@@ -1,88 +1,3 @@
 {
-  "name": "@noraent/nora-datagrid",
-  "version": "1.1.0-beta.1",
-  "module": "./dist/nora_datagrid.es.js",
-  "main": "./dist/nora_datagrid.cjs.js",
-  "private": false,
-  "files": [
-    "dist/"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/nora_datagrid.es.js",
-      "require": "./dist/nora_datagrid.cjs.js"
-    }
-  },
-  "type": "module",
-  "sideEffects": false,
-  "scripts": {
-    "start": "vite --mode on-local",
-    "build:local": "tsc -b && vite build --mode on-local",
-    "build:dev": "tsc -b && vite build --mode dev",
-    "build:production": "tsc -b && vite build --mode production",
-    "clean": "pnpm run clean:build && rimraf ./node_modules",
-    "clean:build": "rimraf ./dist",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "test": "jest",
-    "tsc-build": "tsc -p tsconfig-esm.json && tsc -p tsconfig-cjs.json && npm run vite-build && npm run copy-scss",
-    "vite-build": "tsc -b && vite build --mode production",
-    "publish:npm": "rm -rf dist && mkdir dist && npm run vite-build && npm run copy-package",
-    "copy-package": "cp package.json dist/buildPackage.json && cp package.json lib/cjs/buildPackage.json&& cp package.json lib/esm/buildPackage.json ",
-    "copy-scss": "cpx \"src/**/*.scss\" lib/cjs && cpx \"src/**/*.scss\" lib/esm"
-  },
-  "dependencies": {
-    "@emotion/css": "^11.13.5",
-    "@noraent/nora-datagrid": "file:",
-    "jose": "^6.1.0",
-    "lodash": "^4.17.21",
-    "rimraf": "^6.0.1",
-    "sass-embedded": "^1.87.0"
-  },
-  "peerDependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.27.2",
-    "@babel/preset-react": "^7.27.1",
-    "@eslint/js": "^9.9.0",
-    "@types/lodash": "^4.17.16",
-    "@types/node": "^22.15.14",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "cpx": "^1.5.0",
-    "eslint": "^9.9.0",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.9",
-    "globals": "^15.9.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "terser": "^5.39.0",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.24.1",
-    "vite": "^6.2.0",
-    "vite-plugin-dts": "^4.5.3",
-    "vite-plugin-svgr": "^4.3.0",
-    "vite-tsconfig-paths": "^5.1.4"
-  },
-  "peerDependenciesMeta": {
-    "@emotion/react": {
-      "optional": true
-    },
-    "@emotion/styled": {
-      "optional": true
-    }
-  },
-  "babel": {
-    "presets": [
-      "@babel/preset-env",
-      "@babel/preset-react"
-    ]
-  },
-  "packageManager": "pnpm@10.6.5+sha512.cdf928fca20832cd59ec53826492b7dc25dc524d4370b6b4adbf65803d32efaa6c1c88147c0ae4e8d579a6c9eec715757b50d4fa35eea179d868eada4ed043af"
+    "version": "배포시 버전 표시"
 }

package/dist/common/constants/defaultProps.js

@@ -0,0 +1,4 @@
+export const defaultProps = {
+    height: 32,
+    width: 20,
+};

package/dist/common/constants/index.d.ts

@@ -1,2 +1,2 @@
-export * from './defaultProps';
-export * from './useEventCallback';
+export * from "./defaultProps";
+export * from "./useEventCallback";

package/dist/common/constants/index.js

@@ -0,0 +1,2 @@
+export * from "./defaultProps";
+export * from "./useEventCallback";

package/dist/common/constants/path.js

@@ -0,0 +1,45 @@
+export const GUIDE_PATH = {
+    path: "/",
+    GUIDE: {
+        path: "guide",
+        GETTING_STARTED: {
+            pathname: "시작하기",
+            path: "getting-started",
+        },
+        VALIDATION: {
+            pathname: "유요성 검증 가이드",
+            path: "validation",
+            icon: "🚀",
+            REACT_HOOK_FORM_VALIDATION: {
+                pathname: "react-hook-form을 통한 유효성 검증",
+                path: "react-hook-form",
+            },
+            REACT_HOOK_FORM_AND_ZOD_VALIDATION: {
+                pathname: "ZOD를 통한 유효성 검증",
+                path: "zod",
+            },
+        },
+    },
+};
+export const buildGuidePath = (...paths) => `/${paths.join("/")}`;
+export const buildFullPath = (path) => {
+    const tracePath = (target, currentPath = "") => {
+        // 현재 객체에서 path가 있는 경우
+        for (const key in target) {
+            if (target[key] && typeof target[key] === "object") {
+                const newPath = currentPath ? `${currentPath}/${target[key].path}` : target[key].path;
+                // 하위 객체 탐색
+                if (target[key].path === path) {
+                    return newPath;
+                }
+                // 재귀적으로 하위 경로를 추적
+                const nestedPath = tracePath(target[key], newPath);
+                if (nestedPath)
+                    return nestedPath;
+            }
+        }
+        return "";
+    };
+    // 전체 경로를 반환
+    return "/" + tracePath(GUIDE_PATH);
+};

package/dist/common/constants/useEnhancedEffect/index.js

@@ -0,0 +1 @@
+export { default } from './useEnhancedEffect';

package/dist/common/constants/useEnhancedEffect/useEnhancedEffect.js

@@ -0,0 +1,3 @@
+import * as React from "react";
+const useEnhancedEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+export default useEnhancedEffect;