@noraent/nora-datagrid 0.0.1

package/lib/esm/components/TwoDimensionalVirtualizedList.js

@@ -0,0 +1,538 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useMemo, useCallback, useEffect, useRef } from "react";
+import ReactDOM from "react-dom";
+import useGridApiContext from "../hooks/useGridApiContext";
+import { BottomScrollBar, RightScrollBar, TableBody, TableCell, TableRow } from "./virtualized/_styled";
+import { classes } from "../types/classes";
+import { cx } from "@emotion/css";
+import VirtualHorizontalHeader from "./header/VirtualHorizontalHeader";
+import { useSelector, useStore } from "../provider/GridStoreContent";
+import { EditStatus } from "../types/dataGridCoreEnum";
+import CellMode from "./cell/CellMode";
+import ImeComponent from "./ime/IMEComponent";
+const initialWindowWidth = 800;
+export const initialWindowHeight = 500;
+const initialBodyHeight = initialWindowHeight - 34;
+const overscanTopRow = 4;
+const overscanBottomRow = 10;
+const overscanColumn = 1;
+const targetFPS = 60;
+const frameInterval = 1000 / targetFPS;
+const DynamicVirtualScroll = React.memo(({ children }) => {
+    const prevScrollTop = useRef(0);
+    const prevScrollLeft = useRef(0);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [scrollLeft, setScrollLeft] = useState(0);
+    const [windowSize, setWindowSize] = useState({
+        width: initialWindowWidth,
+        height: initialWindowHeight,
+    });
+    const gridRef = useGridApiContext();
+    const rightScrollRef = useRef(null);
+    const bottomScrollRef = useRef(null);
+    useEffect(() => {
+        const handleResize = () => {
+            var _a, _b, _c, _d, _f, _g;
+            const store = gridRef.current.store;
+            const width = (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.gridContainer.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 0;
+            const height = (_g = (_f = (_d = store === null || store === void 0 ? void 0 : store.gridContainer.current) === null || _d === void 0 ? void 0 : _d.parentElement) === null || _f === void 0 ? void 0 : _f.clientHeight) !== null && _g !== void 0 ? _g : 0;
+            setWindowSize({ width, height });
+        };
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        window.addEventListener("focusout", (event) => {
+            var _a;
+            if (((_a = event.target.nextElementSibling) === null || _a === void 0 ? void 0 : _a.className) === "nora-data-grid-container") {
+                console.log("???", gridRef.current.store.gridContainer.current);
+            }
+        });
+        return () => {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, []);
+    const { columns } = useSelector((store) => ({
+        columns: store.state.columns,
+    }));
+    const { dataSource } = useSelector((store) => ({
+        dataSource: store.state.dataSource,
+    }));
+    const totalHeight = useMemo(() => dataSource.reduce((sum, item) => sum + item.height, 0), [dataSource]);
+    const totalWidth = useMemo(() => columns.reduce((sum, column) => sum + Number(column.width), 0) || 0, [columns]);
+    const binarySearchIndex = useCallback((items, target) => {
+        let low = 0;
+        let high = items.length - 1;
+        while (low <= high) {
+            const mid = Math.floor((low + high) / 2);
+            if (items[mid] > target) {
+                high = mid - 1;
+            }
+            else if (items[mid] < target) {
+                low = mid + 1;
+            }
+            else {
+                return mid;
+            }
+        }
+        return Math.max(0, low - 1);
+    }, []);
+    const cumulativeHeights = useMemo(() => {
+        const heights = [0];
+        for (let i = 0; i < dataSource.length; i++) {
+            heights.push(heights[i] + dataSource[i].height);
+        }
+        return heights;
+    }, [dataSource]);
+    const cumulativeWidths = useMemo(() => {
+        const widths = [0];
+        for (let i = 0; i < columns.length || 0; i++) {
+            widths.push(widths[i] + Number(columns[i].width));
+        }
+        return widths;
+    }, [columns]);
+    const getItemRange = useCallback(() => {
+        const start = Math.max(0, binarySearchIndex(cumulativeHeights, scrollTop) - overscanTopRow);
+        let end = Math.min(start + overscanBottomRow, dataSource.length);
+        let startAdjust = start ? start + overscanTopRow : start;
+        while (end < dataSource.length && cumulativeHeights[end] - cumulativeHeights[startAdjust] <= initialBodyHeight) {
+            end++;
+        }
+        end = Math.min(end + overscanBottomRow, dataSource.length);
+        return { start, end };
+    }, [dataSource, scrollTop, cumulativeHeights, windowSize.height, binarySearchIndex]);
+    const { start, end } = getItemRange();
+    const visibleItems = useMemo(() => {
+        const result = [];
+        const rowIndex = gridRef.current.getCellFocus()[0];
+        // 포함 안되어있으면 추가
+        if (rowIndex && rowIndex <= start) {
+            result.push(dataSource[rowIndex - 1]); // fixedIndex가 범위에 포함되지 않으면 첫 번째에 추가
+        }
+        for (let i = start; i < end; i++) {
+            result.push(dataSource[i]);
+        }
+        // 포함 안되어있으면 추가
+        if (rowIndex && rowIndex >= end) {
+            result.push(dataSource[rowIndex - 1]); // fixedIndex가 범위에 포함되지 않으면 첫 번째에 추가
+        }
+        return result;
+    }, [dataSource, start, end]);
+    const startColumnIndex = useMemo(() => Math.max(0, binarySearchIndex(cumulativeWidths, scrollLeft) - overscanColumn), [columns, cumulativeWidths, scrollLeft, binarySearchIndex, overscanColumn]);
+    const offsetTop = useMemo(() => cumulativeHeights[start] || 0, [cumulativeHeights, start]);
+    const offsetLeft = useMemo(() => cumulativeWidths[startColumnIndex] || 0, [cumulativeWidths, startColumnIndex]);
+    const domRef = React.useRef(null);
+    const updateScroll = useCallback((newScrollTop, newScrollLeft) => {
+        newScrollTop !== undefined && setScrollTop(newScrollTop);
+        newScrollLeft !== undefined && setScrollLeft(newScrollLeft);
+        if (newScrollTop !== undefined)
+            prevScrollTop.current = newScrollTop;
+        if (newScrollLeft !== undefined)
+            prevScrollLeft.current = newScrollLeft;
+    }, []);
+    const handleScroll = useCallback((e) => {
+        if (isSyncingRef.current)
+            return;
+        isSyncingRef.current = true;
+        const domScroll = domRef.current;
+        const rightScroll = rightScrollRef.current;
+        const bottomScroll = bottomScrollRef.current;
+        const { scrollTop, scrollLeft } = e.currentTarget;
+        requestAnimationFrame(() => {
+            if (domScroll && rightScroll && bottomScroll) {
+                ReactDOM.flushSync(() => {
+                    rightScroll.scrollTop = scrollTop;
+                    bottomScroll.scrollLeft = scrollLeft;
+                    scrollTop !== undefined && setScrollTop(scrollTop);
+                    scrollLeft !== undefined && setScrollLeft(scrollLeft);
+                });
+            }
+            isSyncingRef.current = false;
+        });
+    }, [updateScroll, frameInterval]);
+    const binarySearchColumnIndex = useCallback((items, start, scrollLeft) => {
+        let high = items.length - 1;
+        let target = windowSize.width;
+        let end = start;
+        for (let i = start; i <= high; i++) {
+            if (Math.max(0, items[i] - scrollLeft) > target) {
+                end = i + overscanColumn;
+                return end;
+            }
+        }
+        return items.length - 1;
+    }, [windowSize.width]);
+    const columnEndIndex = useMemo(() => binarySearchColumnIndex(cumulativeWidths, startColumnIndex, scrollLeft), [cumulativeWidths, startColumnIndex, scrollLeft, windowSize.width]);
+    const isSyncingRef = useRef(false);
+    const handleScrollController = useCallback((e) => {
+        if (isSyncingRef.current)
+            return;
+        isSyncingRef.current = true;
+        const domScroll = domRef.current;
+        const rightScroll = rightScrollRef.current;
+        const currentTarget = e.currentTarget;
+        ReactDOM.flushSync(() => {
+            if (domScroll && rightScroll) {
+                domScroll.scrollTop = currentTarget.scrollTop;
+            }
+            isSyncingRef.current = false;
+        });
+    }, []);
+    const handleScrollBottomController = useCallback((e) => {
+        if (isSyncingRef.current)
+            return;
+        isSyncingRef.current = true;
+        const domScroll = domRef.current;
+        const bottomScroll = bottomScrollRef.current;
+        const currentTarget = e.currentTarget;
+        ReactDOM.flushSync(() => {
+            if (domScroll && bottomScroll) {
+                domScroll.scrollLeft = currentTarget.scrollLeft;
+            }
+            isSyncingRef.current = false;
+        });
+    }, [updateScroll, gridRef]);
+    useEffect(() => {
+        console.log("start, end!", start, end);
+        gridRef.current.store.state.renderedRowStartEnd = [start, end];
+    }, [start, end]);
+    return (_jsxs("div", { style: { position: "relative" }, children: [_jsx("div", { style: {
+                    height: `${windowSize.height}px`,
+                    width: `${windowSize.width}px`,
+                }, children: _jsxs(TableBody, { ref: domRef, style: {
+                        height: "100%",
+                        position: "relative",
+                        display: "flex",
+                        flexDirection: "column",
+                        overflow: "scroll",
+                        scrollbarWidth: "none",
+                    }, className: classes.TableClasses.body.scroll.root, onScroll: handleScroll, children: [_jsx(VirtualHorizontalHeader, { offsetLeft: offsetLeft, startColumnIndex: startColumnIndex, cumulativeWidths: cumulativeWidths, windowSize: windowSize, columnEndIndex: columnEndIndex }), _jsx("div", { style: {
+                                flexBasis: `${totalHeight}px`,
+                                flexShrink: 0,
+                            }, children: _jsx("div", { style: {
+                                    willChange: "transform, opacity",
+                                    transform: `translate3d(${offsetLeft}px, ${offsetTop}px, 0px)`,
+                                    position: "absolute",
+                                }, children: children(React.useMemo(() => ({
+                                    visibleItems,
+                                    startColumnIndex,
+                                    cumulativeWidths,
+                                    windowSize,
+                                    columnEndIndex,
+                                }), [visibleItems, startColumnIndex, cumulativeWidths, windowSize, columnEndIndex])) }) })] }) }), _jsx(RightScrollBar, { ref: rightScrollRef, style: { height: initialBodyHeight - 20, right: "0px" }, onScroll: handleScrollController, children: _jsx("div", { style: { width: "14px", height: `${totalHeight}px` } }) }), _jsx(BottomScrollBar, { ref: bottomScrollRef, style: { width: windowSize.width }, onScroll: handleScrollBottomController, children: _jsx("div", { style: { height: "14px", width: `${totalWidth}px` } }) })] }));
+});
+const VirtualListItem = React.memo(({ item, startColumnIndex, cumulativeWidths, windowSize, columnEndIndex, isColIndex, editStatus }) => {
+    const { columns, dataSource } = useSelector((store) => ({
+        columns: store.state.columns,
+        dataSource: store.state.dataSource,
+    }));
+    const row = dataSource[item.__dataRowindex];
+    const getItemRange = useCallback(() => {
+        const start = startColumnIndex;
+        let end = columnEndIndex;
+        return { start, end };
+    }, [startColumnIndex, cumulativeWidths, windowSize, columnEndIndex]);
+    const { start, end } = getItemRange();
+    const visibleColumns = useMemo(() => columns.slice(start, end + 1), [start, end, columns]);
+    const cellStyle = useMemo(() => ({ height: `${item.height}px` }), [item.height]);
+    if (item.__dataRowindex === 0)
+        console.log("row", row);
+    return (_jsx(TableRow, { "aria-rowindex": item.__ariaRowindex, style: cellStyle, className: classes.TableClasses.body.row.root, children: visibleColumns.map((column) => (_jsx(VirtualItem, { column: column, row: row, rowIndex: item.__dataRowindex, isFocus: isColIndex === column.__ariaColindex, editStatus: isColIndex === column.__ariaColindex ? editStatus : undefined }, column.__uuid))) }, item.id));
+});
+const VirtualItem = React.memo(({ column, row, isFocus, editStatus, rowIndex, }) => {
+    const cellStyle = useMemo(() => ({ width: `${column.width}px` }), [column.width]);
+    const cellClassName = useMemo(() => cx(classes.TableClasses.body.row.cell.root, classes.TableClasses.body.row.cell.classes), [classes.TableClasses.body.row.cell.root, classes.TableClasses.body.row.cell.classes]);
+    return (_jsx(TableCell, { "aria-colindex": column.__ariaColindex, tabIndex: isFocus ? 0 : -1, style: cellStyle, className: cellClassName, children: _jsx(CellMode, { column: column, value: row[column.fieldId], editStatus: editStatus, rowIndex: rowIndex }) }, column.__uuid));
+});
+export const TwoDimensionalVirtualizedList = React.memo(() => {
+    // 마우스 다운 시작지점점
+    const gridRef = useGridApiContext();
+    const mouseDownStartPointRef = useRef(0);
+    const mouseDownStartWidthRef = useRef(0);
+    const colIndexRef = useRef(0);
+    const mouseDownRef = useRef(false);
+    // 클릭시 타임 측정
+    const clickTimer = useRef(null);
+    const [imeDefaultValue, setImeDefaultValue] = React.useState("");
+    const handleMousedown = useCallback((e) => {
+        var _a;
+        if (!mouseDownRef.current) {
+            if (e.target) {
+                const divElement = e.target;
+                if ((_a = divElement.getAttribute("class")) === null || _a === void 0 ? void 0 : _a.includes(classes.TableClasses.title.header.resize.root)) {
+                    const parentElement = divElement.parentElement;
+                    if (!parentElement)
+                        return;
+                    mouseDownRef.current = true;
+                    const width = parentElement.getAttribute("data-width");
+                    const colindex = parentElement.getAttribute("aria-colindex");
+                    mouseDownStartPointRef.current = e.clientX;
+                    mouseDownStartWidthRef.current = Number(width);
+                    colIndexRef.current = Number(colindex) - 1;
+                }
+            }
+            // 셀 포커스 지정
+            if (e.button !== 0)
+                return;
+            if (e.target) {
+                const divElement = e.target;
+                const cell = divElement.closest(`.${classes.TableClasses.body.row.cell.root}`);
+                const row = divElement.closest(`.${classes.TableClasses.body.row.root}`);
+                if (cell && row) {
+                    // e.preventDefault();
+                    const colIndex = Number(cell.getAttribute("aria-colindex"));
+                    const rowIndex = Number(row.getAttribute("aria-rowindex"));
+                    const currentColIndex = gridRef.current.store.state.cellFocus[0];
+                    const currentRowIndex = gridRef.current.store.state.cellFocus[1];
+                    // if (!(currentColIndex === rowIndex && currentRowIndex === colIndex)) {
+                    //   // IME 문제가 있어 EditStatus.EDITING으로 변경
+                    //   gridRef.current.setEditStatus(EditStatus.EDITABLE).then((editState) => {
+                    //     store.setState(["state", "editStatus"], editState);
+                    //   });
+                    // } else {
+                    //   gridRef.current.setEditStatus(EditStatus.EDITING).then((editState) => {
+                    //     store.setState(["state", "editStatus"], editState);
+                    //   });
+                    // }
+                    if (clickTimer.current) {
+                        clearTimeout(clickTimer.current); // 더블 클릭 발생 시 실행 취소
+                    }
+                    clickTimer.current = setTimeout(() => {
+                        if (gridRef.current.store.state.editStatus !== EditStatus.EDITING) {
+                            gridRef.current.setCellFocus(rowIndex, colIndex).then((res) => {
+                                store.setState(["state", "cellFocus"], res);
+                                gridRef.current.setEditStatus(EditStatus.IME_EDITING).then((editState) => {
+                                    var _a;
+                                    (_a = textAreaRef.current) === null || _a === void 0 ? void 0 : _a.focus(); // ime 활성화
+                                });
+                            });
+                        }
+                    }, 250); // 더블 클릭 판별 시간 (기본적으로 250ms 정도 사용)
+                    gridRef.current.setCellFocus(rowIndex, colIndex).then((res) => {
+                        store.setState(["state", "cellFocus"], res);
+                    });
+                }
+            }
+            // ime position init
+            if (!textAreaRef.current)
+                return;
+            textAreaRef.current.style.top = `-${32000}px`;
+            textAreaRef.current.style.left = `-${32000}px`;
+            textAreaRef.current.value = "";
+            setImeDefaultValue("");
+        }
+    }, []);
+    const store = useStore();
+    const handleMousemove = useCallback((e) => {
+        if (mouseDownRef.current) {
+            requestAnimationFrame(() => {
+                const diffX = e.clientX - mouseDownStartPointRef.current;
+                const startWidth = mouseDownStartWidthRef.current;
+                const colIndex = colIndexRef.current;
+                const updatedColumns = gridRef.current.store.state.columns.map((v, i) => {
+                    if (i === colIndex) {
+                        return Object.assign(Object.assign({}, v), { width: startWidth + diffX });
+                    }
+                    return v;
+                });
+                gridRef.current.store.state.columns = updatedColumns;
+                store.setState(["state", "columns"], updatedColumns);
+            });
+        }
+    }, []);
+    const handleMouseleave = useCallback(() => {
+        mouseDownRef.current = false;
+    }, []);
+    const handleMouseUp = useCallback((_e) => {
+        mouseDownRef.current = false;
+    }, []);
+    const handleEditEvent = React.useCallback((e) => {
+        if (e.key === "ArrowUp" ||
+            e.key === "ArrowLeft" ||
+            e.key === "ArrowRight" ||
+            e.key === "ArrowDown" ||
+            e.key === "Tab" ||
+            e.key === "Alt" ||
+            e.key === "Shift" ||
+            e.ctrlKey ||
+            (e.ctrlKey && e.key === "c")) {
+            return;
+        }
+        if (e.key === "Enter") {
+            gridRef.current.setEditStatus(EditStatus.NON_EDITABLE).then((editState) => {
+                store.setState(["state", "editStatus"], editState);
+            });
+            const divElement = e.target;
+            const cell = divElement.closest(`.${classes.TableClasses.body.row.cell.root}`);
+            const row = divElement.closest(`.${classes.TableClasses.body.row.root}`);
+            if (cell && row) {
+                const colIndex = Number(cell.getAttribute("aria-colindex"));
+                const rowIndex = Number(row.getAttribute("aria-rowindex"));
+                gridRef.current.setCellFocus(Math.min(rowIndex + 1, gridRef.current.store.state.dataSource.length), colIndex).then((res) => {
+                    store.setState(["state", "cellFocus"], res);
+                });
+            }
+            return;
+        }
+        if (e.key === "Escape") {
+            gridRef.current.setEditStatus(EditStatus.NON_EDITABLE).then((editState) => {
+                store.setState(["state", "editStatus"], editState);
+                // gridRef.current.scrollToRowIndex(
+                //   gridRef.current.store.state.cellFocus[0]
+                // );
+                //
+                // const parent = gridRef.current.store.gridContainer.current;
+                // const test = gridRef.current.store.gridContainer.current
+                //   ?.querySelector(`.${classes.TableClasses.body.scroll.root}`)
+                //   ?.querySelector(
+                //     `[aria-rowindex="${gridRef.current.store.state.cellFocus[0]}"]`
+                //   );
+                // const observer = new IntersectionObserver(
+                //   (entries) => {
+                //     const visible = entries;
+                //     entries.forEach((entry) => {
+                //       if (!entry.isIntersecting) {
+                //         // gridRef.current.scrollToRowIndex(
+                //         //   gridRef.current.store.state.cellFocus[0]
+                //         // );
+                //         e.preventDefault();
+                //       }
+                //     });
+                //   },
+                //   {
+                //     root: parent,
+                //     threshold: 0.1, // 요소가 10% 이상 보일 때 트리거
+                //   }
+                // );
+                // if (test) observer.observe(test);
+                //
+                // e.preventDefault();
+            });
+            return;
+        }
+        // if (gridRef.current.store.state.editStatus === EditStatus.EDITING) return;
+        // gridRef.current.setEditStatus(EditStatus.EDITING).then((editState) => {
+        //   store.setState(["state", "editStatus"], editState);
+        // });
+    }, []);
+    const handleArrowKey = React.useCallback((e) => {
+        var _a;
+        const { key } = e;
+        if (gridRef.current.store.state.editStatus === EditStatus.EDITING) {
+            if (!(key === "Tab" || e.ctrlKey)) {
+                return;
+            }
+        }
+        const { setCellFocus } = gridRef.current;
+        const { gridContainer } = gridRef.current.store;
+        const { cellFocus, columns, dataSource, renderedRowStartEnd } = gridRef.current.store.state;
+        if (!cellFocus || (key !== "ArrowRight" && key !== "ArrowLeft" && key !== "ArrowDown" && key !== "ArrowUp" && key !== "Tab"))
+            return;
+        e.preventDefault();
+        const direction = (key === "Tab" && !e.shiftKey) || ["ArrowRight", "ArrowDown"].includes(key) ? 1 : -1;
+        // const direction = ["ArrowRight", "ArrowDown", "Tab"].includes(key) ? 1 : -1;
+        if (!cellFocus[1])
+            return;
+        if (!cellFocus[0])
+            return;
+        let newColumnIndex = cellFocus[1] + direction;
+        let newRowIndex = cellFocus[0] + direction;
+        let isRowIndex = false;
+        let isColIndex = false;
+        const widths = new Array(columns.length + 1).fill(0); // 초기 크기 설정
+        const sumWidths = new Array(columns.length + 1).fill(0);
+        const dataSourceEnd = renderedRowStartEnd ? Math.min(renderedRowStartEnd[1] + 100, dataSource.length) : dataSource.length;
+        const heights = new Array(dataSourceEnd + 1).fill(0); // 초기 크기 설정
+        const sumHeights = new Array(dataSourceEnd + 1).fill(0);
+        for (let i = 0; i < columns.length; i++) {
+            const width = Number(columns[i].width); // 변환 1회만 수행
+            widths[i + 1] = width;
+            sumWidths[i + 1] = sumWidths[i] + width; // 이전 합계를 변수로 사용
+        }
+        for (let i = 0; i < dataSourceEnd; i++) {
+            const height = Number(dataSource[i].height); // 변환 1회만 수행
+            heights[i + 1] = height;
+            sumHeights[i + 1] = sumHeights[i] + height; // 이전 합계를 변수로 사용
+        }
+        switch (key) {
+            case "ArrowLeft":
+            case "ArrowRight":
+            case "Tab":
+                isColIndex = true;
+                break;
+            case "ArrowDown":
+            case "ArrowUp":
+                isRowIndex = true;
+        }
+        const bodyElement = (_a = gridContainer.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${classes.TableClasses.body.scroll.root}`);
+        const rowIndex = isRowIndex ? newRowIndex : newRowIndex - direction;
+        const colIndex = isColIndex ? newColumnIndex : newColumnIndex - direction;
+        setCellFocus(rowIndex, colIndex).then((res) => {
+            ReactDOM.flushSync(() => {
+                store.setState(["state", "cellFocus"], res);
+                if (bodyElement) {
+                    const scrollThreshold = Math.max(0, sumWidths[newColumnIndex - 1] - 1200);
+                    const scrollRowThreshold = Math.max(0, sumHeights[newRowIndex - 1] - 450);
+                    if (key === "ArrowRight" || (!e.shiftKey && key === "Tab" && bodyElement.scrollLeft < scrollThreshold)) {
+                        bodyElement.scrollLeft = scrollThreshold;
+                    }
+                    if (key === "ArrowLeft" || (e.shiftKey && key === "Tab" && bodyElement)) {
+                        const targetStart = sumWidths[newColumnIndex - 1];
+                        const scrollStart = bodyElement.scrollLeft;
+                        if (scrollStart >= targetStart) {
+                            bodyElement.scrollLeft = targetStart - widths[newColumnIndex - 1];
+                        }
+                    }
+                    if (key === "ArrowDown" && bodyElement.scrollTop < scrollRowThreshold) {
+                        bodyElement.scrollTop = scrollRowThreshold;
+                    }
+                    if (key === "ArrowUp" && bodyElement) {
+                        const targetStart = sumHeights[newRowIndex];
+                        const scrollStart = bodyElement.scrollTop;
+                        if (scrollStart >= targetStart) {
+                            bodyElement.scrollTop = targetStart - heights[newRowIndex];
+                        }
+                    }
+                }
+            });
+        });
+    }, []);
+    const handleKeydown = useCallback((e) => {
+        handleArrowKey(e);
+        handleEditEvent(e);
+    }, []);
+    const handleDbClick = useCallback(() => {
+        gridRef.current.setEditStatus(EditStatus.EDITING).then((editState) => {
+            store.setState(["state", "editStatus"], editState);
+        });
+        if (clickTimer.current) {
+            clearTimeout(clickTimer.current); // 더블 클릭 발생 시 mousedown 실행 방지
+        }
+    }, []);
+    useEffect(() => {
+        window.addEventListener("mousedown", handleMousedown);
+        window.addEventListener("mousemove", handleMousemove);
+        window.addEventListener("mouseleave", handleMouseleave);
+        window.addEventListener("mouseup", handleMouseUp);
+        window.addEventListener("keydown", handleKeydown);
+        window.addEventListener("dblclick", handleDbClick);
+        return () => {
+            window.removeEventListener("mousedown", handleMousedown);
+            window.removeEventListener("mousemove", handleMousemove);
+            window.removeEventListener("mouseleave", handleMouseleave);
+            window.removeEventListener("mouseup", handleMouseUp);
+            window.removeEventListener("dblclick", handleDbClick);
+        };
+    }, []);
+    const { cellFocus } = useSelector((store) => {
+        return {
+            cellFocus: store.state.cellFocus,
+        };
+    });
+    const { editStatus } = useSelector((store) => ({
+        editStatus: store.state.editStatus,
+    }));
+    const rowFocus = cellFocus && cellFocus[0];
+    const colFocus = cellFocus && cellFocus[1];
+    const textAreaRef = React.useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsx(DynamicVirtualScroll, { children: ({ visibleItems, startColumnIndex, cumulativeWidths, windowSize, columnEndIndex }) => (_jsx(_Fragment, { children: visibleItems.map((item) => (_jsx(VirtualListItem, { item: item, startColumnIndex: startColumnIndex, cumulativeWidths: cumulativeWidths, windowSize: windowSize, columnEndIndex: columnEndIndex, isColIndex: rowFocus === item.__ariaRowindex ? colFocus : undefined, editStatus: rowFocus === item.__ariaRowindex ? editStatus : undefined }, item.id))) })) }), _jsx(ImeComponent, { ref: textAreaRef, defaultValue: imeDefaultValue })] }));
+});
+export default React.memo(TwoDimensionalVirtualizedList);

package/lib/esm/components/cell/CellMode.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { EditStatus } from "../../types/dataGridCoreEnum";
+import { DataGridPrivateColumnModel, DataGridPrivateDataSourceModel } from "../../types/dataGridCoreProps";
+declare const _default: React.MemoExoticComponent<({ column, value, editStatus, rowIndex, }: {
+    column: DataGridPrivateColumnModel;
+    value: keyof DataGridPrivateDataSourceModel;
+    editStatus: EditStatus | undefined;
+    rowIndex: number;
+}) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/lib/esm/components/cell/CellMode.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { useStore } from "../../provider/GridStoreContent";
+import { EditStatus } from "../../types/dataGridCoreEnum";
+import useGridApiContext from "../../hooks/useGridApiContext";
+import { Input } from "../virtualized/_styled";
+const CellMode = ({ column, value, editStatus, rowIndex, }) => {
+    const gridRef = useGridApiContext();
+    const [inputValue, setInputValue] = React.useState(value);
+    const inputRef = React.useRef(null);
+    React.useEffect(() => {
+        if (editStatus === EditStatus.EDITING || editStatus === EditStatus.EDITABLE) {
+            const tick = setTimeout(() => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 10);
+            return () => clearTimeout(tick);
+        }
+    }, [editStatus]);
+    const store = useStore();
+    const handleInputChange = React.useCallback((e) => {
+        console.log("handleInputChange", rowIndex, e, e.target.value);
+        setInputValue(e.target.value);
+        const dataSource = gridRef.current.cellByRowIndex(rowIndex, column.fieldId, e.target.value);
+        store.setState(["state", "dataSource"], dataSource, false);
+    }, [rowIndex]);
+    if (editStatus === EditStatus.EDITING)
+        return _jsx(Input, { autoFocus: true, ref: inputRef, value: inputValue, onChange: handleInputChange }, 1);
+    if (editStatus === EditStatus.NON_EDITABLE)
+        return _jsx(React.Fragment, { children: value });
+    return _jsx(React.Fragment, { children: value });
+};
+export default React.memo(CellMode);

package/lib/esm/components/header/VirtualHorizontalHeader.d.ts

@@ -0,0 +1,5 @@
+import { VirtualHeaderProps } from "../virtualized/_constants/virtualHeaderConstants";
+declare const _default: import("react").MemoExoticComponent<(props: VirtualHeaderProps & {
+    offsetLeft: number;
+}) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/lib/esm/components/header/VirtualHorizontalHeader.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import VirtualHeader from "../virtualized/_components/VirtualHeader";
+import { TableHeaderRoot } from "../virtualized/_styled";
+import { classes } from "../../types/classes";
+const VirtualHorizontalHeader = (props) => {
+    return (_jsx(TableHeaderRoot, { className: classes.TableClasses.title.header.root, style: {
+            transform: `translate3d(${props.offsetLeft}px, 0px, 0px)`,
+            position: "sticky",
+            top: "0px",
+        }, children: _jsx(VirtualHeader, Object.assign({}, props)) }));
+};
+export default memo(VirtualHorizontalHeader);

package/lib/esm/components/ime/IMEComponent.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    defaultValue: string;
+} & React.RefAttributes<HTMLTextAreaElement>>>;
+export default _default;