@noraent/nora-datagrid 0.0.1

package/lib/cjs/components/ime/IMEComponent.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback } from "react";
+import { useSelector, useStore } from "../../provider/GridStoreContent";
+import useGridApiContext from "../../hooks/useGridApiContext";
+import { EditStatus } from "../../types/dataGridCoreEnum";
+import { classes } from "../../types/classes";
+const IMEComponent = React.forwardRef((props, ref) => {
+    const [imeValue, setImeValue] = React.useState(props.defaultValue);
+    React.useEffect(() => {
+        setImeValue(props.defaultValue);
+    }, [props.defaultValue]);
+    const gridRef = useGridApiContext();
+    const store = useStore();
+    const { cellFocus } = useSelector((store) => ({
+        cellFocus: store.state.cellFocus,
+    }));
+    // React.useEffect(() => {
+    //   const currentRef = ref as React.MutableRefObject<HTMLTextAreaElement | null>;
+    //   if (currentRef.current) {
+    //     currentRef.current.addEventListener("keydown", handleTextAreaInput);
+    //   }
+    //   return () => {
+    //     if (currentRef.current) {
+    //       currentRef.current.removeEventListener("keydown", handleTextAreaInput);
+    //     }
+    //   };
+    // }, []);
+    const handleValueChange = useCallback((e) => {
+        setImeValue(e.target.value);
+    }, []);
+    const handleTextAreaInput = React.useCallback((e) => {
+        var _a, _b;
+        const cellFocus = gridRef.current.store.state.cellFocus;
+        const rowIndex = cellFocus[0];
+        const colIndex = cellFocus[1];
+        const event = e.target;
+        const currentRef = ref;
+        // 셀위치 가져오기
+        const containerElement = gridRef.current.store.gridContainer.current;
+        if (containerElement) {
+            const rowElement = containerElement.querySelector(`.${classes.TableClasses.body.row.root}[aria-rowindex="${rowIndex}"]`);
+            if (rowElement) {
+                const cellElement = rowElement.querySelector(`.${classes.TableClasses.body.row.cell.root}[aria-colindex="${colIndex}"]`);
+                if (cellElement) {
+                    const top = (_a = cellElement.getBoundingClientRect().top) !== null && _a !== void 0 ? _a : 0;
+                    const left = (_b = cellElement.getBoundingClientRect().left) !== null && _b !== void 0 ? _b : 0;
+                    if (!currentRef.current)
+                        return;
+                    currentRef.current.style.top = `${top}px`;
+                    currentRef.current.style.left = `${left}px`;
+                }
+            }
+        }
+        if (currentRef.current)
+            currentRef.current.value = event.value;
+    }, [cellFocus]);
+    const handleKeyDown = React.useCallback((e) => {
+        var _a, _b, _c;
+        if (e.nativeEvent.isComposing)
+            return;
+        if (e.key === "Enter") {
+            e.preventDefault();
+            e.stopPropagation();
+            const row = cellFocus[0];
+            const cell = cellFocus[1];
+            const rowIndex = row ? row - 1 : undefined;
+            const colIndex = cell ? cell - 1 : undefined;
+            const fieldId = (_a = gridRef.current.store.state.columns.find((column) => column.__dataColindex === colIndex)) === null || _a === void 0 ? void 0 : _a.fieldId;
+            if (fieldId && rowIndex) {
+                gridRef.current.cellByRowIndex(rowIndex, fieldId, imeValue).then((dataSource) => {
+                    store.setState(["state", "dataSource"], dataSource, false);
+                });
+                gridRef.current.setEditStatus(EditStatus.NON_EDITABLE).then((editState) => {
+                    store.setState(["state", "editStatus"], editState);
+                });
+                gridRef.current.setCellFocus(undefined, undefined).then((res) => {
+                    store.setState(["state", "cellFocus"], res);
+                    gridRef.current.setCellFocus(cellFocus[0], cellFocus[1]).then((res) => {
+                        store.setState(["state", "cellFocus"], res);
+                    });
+                });
+                const currentRef = ref;
+                if (!currentRef.current)
+                    return;
+                currentRef.current.style.top = `-${32000}px`;
+                currentRef.current.style.left = `-${32000}px`;
+                setImeValue("");
+            }
+        }
+        else {
+            const cellFocus = gridRef.current.store.state.cellFocus;
+            let rowIndex = cellFocus[0];
+            let colIndex = cellFocus[1];
+            if (!rowIndex)
+                return;
+            if (!colIndex)
+                return;
+            // if (e.key === "ArrowLeft") {
+            //   colIndex = colIndex - 1;
+            //   setImeValue("");
+            // }
+            // if (e.key === "ArrowRight") {
+            //   colIndex = colIndex + 1;
+            //   setImeValue("");
+            // }
+            // if (e.key === "ArrowDown") {
+            //   rowIndex = rowIndex + 1;
+            //   setImeValue("");
+            // }
+            // if (e.key === "ArrowUp") {
+            //   rowIndex = rowIndex - 1;
+            //   setImeValue("");
+            // }
+            const event = e.target;
+            const currentRef = ref;
+            // 셀위치 가져오기
+            const containerElement = gridRef.current.store.gridContainer.current;
+            if (containerElement) {
+                const rowElement = containerElement.querySelector(`.${classes.TableClasses.body.row.root}[aria-rowindex="${rowIndex}"]`);
+                if (rowElement) {
+                    const cellElement = rowElement.querySelector(`.${classes.TableClasses.body.row.cell.root}[aria-colindex="${colIndex}"]`);
+                    if (cellElement) {
+                        const top = (_b = cellElement.getBoundingClientRect().top) !== null && _b !== void 0 ? _b : 0;
+                        const left = (_c = cellElement.getBoundingClientRect().left) !== null && _c !== void 0 ? _c : 0;
+                        if (!currentRef.current)
+                            return;
+                        currentRef.current.style.top = `${top}px`;
+                        currentRef.current.style.left = `${left}px`;
+                        currentRef.current.style.width = `${cellElement.clientWidth}px`;
+                        if (e.key === "Escape") {
+                            currentRef.current.style.top = `-${32000}px`;
+                            currentRef.current.style.left = `-${32000}px`;
+                            setImeValue("");
+                        }
+                        if (e.key === "ArrowUp" || e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowLeft") {
+                            currentRef.current.style.top = `-${32000}px`;
+                            currentRef.current.style.left = `-${32000}px`;
+                            setImeValue("");
+                        }
+                    }
+                }
+            }
+            if (currentRef.current)
+                currentRef.current.value = event.value;
+        }
+    }, [cellFocus, imeValue]);
+    return (_jsx("textarea", { className: "ime-input", ref: ref, style: { position: "absolute", resize: "none", overflow: "hidden", background: "red" }, value: imeValue, onChange: handleValueChange, onKeyDown: handleKeyDown }));
+});
+export default React.memo(IMEComponent);

package/lib/cjs/components/virtualized/_components/VirtualHeader.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { VirtualHeaderProps } from "../_constants/virtualHeaderConstants";
+declare const VirtualHeader: React.FC<VirtualHeaderProps>;
+export default VirtualHeader;

package/lib/cjs/components/virtualized/_components/VirtualHeader.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo, useCallback } from "react";
+import { unstable_batchedUpdates } from "react-dom";
+import { cx } from "@emotion/css";
+import useGridApiContext from "../../../hooks/useGridApiContext";
+import { ResizeBox, TableCell } from "../_styled";
+import { classes } from "../../../types/classes";
+const VirtualHeader = React.memo(({ startColumnIndex, cumulativeWidths, windowSize, columnEndIndex }) => {
+    const gridRef = useGridApiContext();
+    const columns = gridRef.current.store.state.columns;
+    const getItemRange = useCallback(() => {
+        const start = startColumnIndex;
+        let end = columnEndIndex;
+        return { start, end };
+    }, [startColumnIndex, cumulativeWidths, windowSize, columnEndIndex]);
+    const { start, end } = getItemRange();
+    const visibleColumns = useMemo(() => {
+        return unstable_batchedUpdates(() => columns.slice(start, end + 1));
+    }, [start, end, columns]);
+    return visibleColumns.map((column) => (_jsxs(TableCell, { "aria-colindex": column.__ariaColindex, "data-width": column.width, tabIndex: -1, style: {
+            width: `${column.width}px`,
+            overflow: "initial",
+        }, className: cx(classes.TableClasses.title.header.row.cell.root, classes.TableClasses.title.header.row.cell.classes), children: [_jsx("div", { className: cx(classes.TableClasses.title.header.row.cell.con.root, classes.TableClasses.title.header.row.cell.con.classes), children: column.fieldName }), _jsx(ResizeBox, { className: cx(classes.TableClasses.title.header.resize.root, classes.TableClasses.title.header.resize.classes) })] }, column.__uuid)));
+});
+export default VirtualHeader;

package/lib/cjs/components/virtualized/_constants/virtualHeaderConstants.d.ts

@@ -0,0 +1,9 @@
+export interface VirtualHeaderProps {
+    startColumnIndex: number;
+    cumulativeWidths: number[];
+    columnEndIndex: number;
+    windowSize: {
+        width: number;
+        height: number;
+    };
+}

package/lib/cjs/components/virtualized/_constants/virtualHeaderConstants.js

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

package/lib/cjs/components/virtualized/_styled/index.d.ts

@@ -0,0 +1,34 @@
+export declare const TableRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TableBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    lineHeight?: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TableCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Input: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const TableHeaderRoot: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ResizeBox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const RightScrollBar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BottomScrollBar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/cjs/components/virtualized/_styled/index.js

@@ -0,0 +1,108 @@
+import styled from "@emotion/styled";
+import { foundation } from "../../../common/foundation";
+import { TableClasses } from "../../../types/classes/styled";
+import { defaultProps } from "../../../common/constants";
+export const TableRow = styled("div")(() => ({
+    display: "flex",
+    borderBottom: `1px solid ${foundation.$scale.color.gray95}`,
+}));
+export const TableBody = styled("div")(({ lineHeight = defaultProps.height }) => ({
+    [`& .${TableClasses.body.row.cell.root}`]: {
+        lineHeight: `${lineHeight}px`,
+        fontSize: "14px",
+        borderRight: `1px solid transparent`,
+    },
+}));
+export const TableCell = styled("div")(() => ({
+    padding: "0px 10px",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    position: "relative",
+    pointerEvents: "unset",
+    "&[tabindex='0']": {
+        outline: `${foundation.$scale.color.primary45} solid 1px`,
+        outlineOffset: "-1px",
+    },
+}));
+export const Input = styled("input")(() => ({
+    width: "100%",
+    font: "inherit",
+    padding: "0",
+    fontSize: "14px",
+    outline: "none",
+}));
+export const TableHeaderRoot = styled("div")(() => ({
+    [`&.${TableClasses.title.header.root}`]: {
+        background: foundation.$scale.color.gray100,
+        borderBottom: `1px solid ${foundation.$scale.color.gray90}`,
+        backdropFilter: "blur(6px)",
+        width: "fit-content",
+        position: "sticky",
+        top: "0",
+        zIndex: "1",
+        display: "flex",
+        alignItems: "center",
+        cursor: "pointer",
+        "&:hover": {
+            [`& .${TableClasses.title.header.resize.root}`]: {
+                "::before": {
+                    background: foundation.$scale.color.gray85,
+                },
+            },
+        },
+        [`& .${TableClasses.title.header.row.cell.root}`]: {
+            display: "flex",
+            height: "38px",
+            alignItems: "center",
+            [`& .${TableClasses.title.header.row.cell.con.root}`]: {
+                fontSize: "14px",
+                color: foundation.$scale.color.gray60,
+            },
+        },
+    },
+}));
+export const ResizeBox = styled("div")(() => ({
+    cursor: "col-resize",
+    height: "100%",
+    position: "absolute",
+    top: "0px",
+    padding: "10px 8px",
+    right: "-8px",
+    display: "flex",
+    flexDirection: "column",
+    "::before": {
+        content: "''",
+        display: "block",
+        width: "1px",
+        height: "100%",
+        background: "transparent",
+    },
+    "&:hover": {
+        "::before": {
+            width: "2px",
+            background: foundation.$scale.color.gray30,
+        },
+    },
+    zIndex: 5,
+}));
+export const RightScrollBar = styled("div")(() => ({
+    position: "absolute",
+    display: "inline-block",
+    zIndex: 12,
+    width: "14px",
+    overflow: "hidden auto",
+    outline: "0px",
+    top: "40px",
+    right: "0px",
+}));
+export const BottomScrollBar = styled("div")(() => ({
+    position: "absolute",
+    display: "inline-block",
+    zIndex: 12,
+    height: "14px",
+    overflow: "auto hidden",
+    outline: "0px",
+    bottom: "0px",
+    left: "0px",
+}));

package/lib/cjs/hooks/external/usePublicTest.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { DataGridPrivateApi, GirdApiCommon } from "../../types/dataGridProps";
+export default function usePublicTest(apiRef: React.MutableRefObject<GirdApiCommon<DataGridPrivateApi>>): void;

package/lib/cjs/hooks/external/usePublicTest.js

@@ -0,0 +1,20 @@
+import React from "react";
+// import {
+//   DataGridPrivateApi,
+//   DataGridPublicApi,
+//   GirdApiCommon,
+// } from "@/core/types/dataGridProps";
+import { useGridApiMethod } from "../useGridApiMethod";
+export default function usePublicTest(apiRef) {
+    const setTextPublic = React.useCallback((_data) => {
+        alert("dd");
+        console.log("!!!! public");
+    }, []);
+    const addCellRange = React.useCallback((cellRange) => {
+        const updatedCellRange = structuredClone(apiRef.current.store.__cellRange);
+        updatedCellRange.push(cellRange);
+        apiRef.current = Object.assign(Object.assign({}, apiRef.current), { store: Object.assign(Object.assign({}, apiRef.current.store), { __cellRange: updatedCellRange }) });
+    }, []);
+    const apiMethods = { setTextPublic, addCellRange };
+    useGridApiMethod(apiRef, apiMethods, "public");
+}

package/lib/cjs/hooks/internal/useCellRange.d.ts

@@ -0,0 +1,8 @@
+import { CellRangeDef } from "../../types/dataGridCoreProps";
+declare const useCellRange: () => {
+    cellRange: CellRangeDef[];
+    handleMouseDown: (event: MouseEvent) => void;
+    handleMouseUp: (event: MouseEvent) => void;
+    handleMouseMove: (event: MouseEvent) => false | undefined;
+};
+export default useCellRange;

package/lib/cjs/hooks/internal/useCellRange.js

@@ -0,0 +1,275 @@
+import React, { useRef } from "react";
+import { classes } from "../../types/classes";
+import useGridApiContext from "../useGridApiContext";
+const useCellRange = () => {
+    const gridRef = useGridApiContext();
+    const [cellRange, setCellRange] = React.useState([]);
+    // useEffect(() => {
+    //   const localCellRange = gridRef.current.store.__cellRange;
+    //   const elementsWithClass =
+    //     gridRef.current.store.gridContainer.current?.querySelectorAll(
+    //       ".range-1 "
+    //     );
+    //   console.log("!!!!", elementsWithClass);
+    //   elementsWithClass?.forEach((element) => {
+    //     element.classList.remove("range-1");
+    //     element.classList.remove("range-2");
+    //     element.classList.remove("range-3");
+    //   });
+    //   localCellRange.forEach((range) => {
+    //     console.log("????", range);
+    //     for (
+    //       let start = range.startRowIndex;
+    //       start <= range.endRowIndex;
+    //       start++
+    //     ) {
+    //       const element =
+    //         gridRef.current.store.gridContainer.current?.querySelector(
+    //           `[aria-rowindex="${start}"]`
+    //         );
+    //       const columnsIndex = gridRef.current.store.state.columns.reduce(
+    //         (acc: number[], column, index) => {
+    //           if (range.columns.includes(column.fieldId)) {
+    //             acc.push(index);
+    //           }
+    //           return acc;
+    //         },
+    //         []
+    //       );
+    //       if (element) {
+    //         const elements = element?.querySelectorAll(
+    //           columnsIndex
+    //             .map((columnIndex) => `[aria-colindex="${columnIndex}"]`)
+    //             .join(", ")
+    //         );
+    //         elements?.forEach((element) => {
+    //           if (!element.classList.contains("range-1")) {
+    //             (element as HTMLDivElement).classList.add("range-1"); // 원하는 스타일 추가
+    //           } else if (
+    //             element.classList.contains("range-1") &&
+    //             !element.classList.contains("range-2")
+    //           ) {
+    //             (element as HTMLDivElement).classList.add("range-2"); // 원하는 스타일 추가
+    //           } else if (
+    //             element.classList.contains("range-2") &&
+    //             !element.classList.contains("range-3")
+    //           ) {
+    //             (element as HTMLDivElement).classList.add("range-3"); // 원하는 스타일 추가
+    //           }
+    //         });
+    //         console.log(">>>>??", elements, columnsIndex);
+    //       }
+    //     }
+    //   });
+    // }, [cellRange]);
+    const isMouseDown = useRef(false);
+    const prevlastCellIndex = useRef(-1);
+    const prevlastRowIndex = useRef(-1);
+    const handleMouseMove = React.useCallback((event) => {
+        var _a, _b;
+        if (!isMouseDown.current)
+            return false;
+        const targetElement = event.target;
+        if (targetElement) {
+            const rowElement = targetElement.closest(`.${classes.TableClasses.body.row.root}`);
+            const cellElement = targetElement.closest(`.${classes.TableClasses.body.row.cell.root}`);
+            if (rowElement && cellElement) {
+                const lastCellIndex = Number(cellElement.getAttribute("aria-colindex"));
+                const currentRowIndex = Number(rowElement.getAttribute("aria-rowindex"));
+                if (prevlastCellIndex.current === lastCellIndex &&
+                    prevlastRowIndex.current === currentRowIndex)
+                    return false;
+                prevlastCellIndex.current = lastCellIndex;
+                prevlastRowIndex.current = currentRowIndex;
+                const firstCellIndex = gridRef.current.store.state.columns.findIndex((column) => {
+                    var _a;
+                    return (_a = gridRef.current.store.__cellRangeTemp.columns) === null || _a === void 0 ? void 0 : _a.includes(column.fieldId);
+                });
+                const fieldObjects = gridRef.current.store.state.columns.slice(Math.min(firstCellIndex, lastCellIndex), Math.max(firstCellIndex, lastCellIndex) + 1);
+                gridRef.current.addCellRangeTemp({
+                    endRowIndex: currentRowIndex,
+                    columns: fieldObjects.flatMap((field) => field.fieldId),
+                });
+                const __cellRangeTemp = gridRef.current.store.__cellRangeTemp;
+                const startRowIndex = __cellRangeTemp.startRowIndex;
+                const endRowIndex = __cellRangeTemp.endRowIndex;
+                const rangeColumns = __cellRangeTemp.columns;
+                if (!startRowIndex || !endRowIndex || !rangeColumns)
+                    return false;
+                const elementsWithClass = (_a = gridRef.current.store.gridContainer.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".range-1 ");
+                elementsWithClass === null || elementsWithClass === void 0 ? void 0 : elementsWithClass.forEach((element) => {
+                    element.classList.remove("range-1");
+                    element.classList.remove("range-2");
+                    element.classList.remove("range-3");
+                });
+                for (let start = startRowIndex; start <= endRowIndex; start++) {
+                    const element = (_b = gridRef.current.store.gridContainer.current) === null || _b === void 0 ? void 0 : _b.querySelector(`[aria-rowindex="${start}"]`);
+                    if (element) {
+                        const columnsIndex = gridRef.current.store.state.columns.reduce((acc, column, index) => {
+                            if (rangeColumns.includes(column.fieldId)) {
+                                acc.push(index);
+                            }
+                            return acc;
+                        }, []);
+                        const elements = element === null || element === void 0 ? void 0 : element.querySelectorAll(columnsIndex
+                            .map((columnIndex) => `[aria-colindex="${columnIndex}"]`)
+                            .join(", "));
+                        elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
+                            if (!element.classList.contains("range-1")) {
+                                element.classList.add("range-1"); // 원하는 스타일 추가
+                            }
+                            //  else if (
+                            //   element.classList.contains("range-1") &&
+                            //   !element.classList.contains("range-2")
+                            // ) {
+                            //   (element as HTMLDivElement).classList.add("range-2"); // 원하는 스타일 추가
+                            // } else if (
+                            //   element.classList.contains("range-2") &&
+                            //   !element.classList.contains("range-3")
+                            // ) {
+                            //   (element as HTMLDivElement).classList.add("range-3"); // 원하는 스타일 추가
+                            // }
+                        });
+                    }
+                }
+            }
+        }
+        // const targetElement = event.target as HTMLElement | null;
+        // if (!targetElement) {
+        //   return false;
+        // }
+        // const localCellRange = gridRef.current.store.__cellRangeTemp;
+        // const elementsWithClass =
+        //   gridRef.current.store.gridContainer.current?.querySelectorAll(
+        //     ".range-1 "
+        //   );
+        // console.log("!!!!", elementsWithClass);
+        // elementsWithClass?.forEach((element) => {
+        //   element.classList.remove("range-1");
+        //   element.classList.remove("range-2");
+        //   element.classList.remove("range-3");
+        // });
+        // const range = localCellRange;
+        // const startRowIndex = range.startRowIndex ?? 0;
+        // const rowElement = targetElement.closest(
+        //   `.${classes.TableClasses.body.row.root}`
+        // );
+        // const cellElement = targetElement.closest(
+        //   `.${classes.TableClasses.body.row.cell.root}`
+        // );
+        // const endRowIndex =
+        //   range.endRowIndex ??
+        //   Number(rowElement?.getAttribute("aria-rowindex")) ??
+        //   0;
+        // const endCellIndex =
+        //   Number(cellElement?.getAttribute("aria-colindex")) ?? 0;
+        // const rangeColumns = range.columns ?? [];
+        // console.log("????", range);
+        // const firstCellIndex = gridRef.current.store.state.columns.findIndex(
+        //   (column) =>
+        //     gridRef.current.store.__cellRangeTemp.columns?.includes(column.fieldId)
+        // );
+        // const lastCellIndex = endCellIndex;
+        // const fieldObjects = gridRef.current.store.state.columns.slice(
+        //   Math.min(firstCellIndex, lastCellIndex),
+        //   Math.max(firstCellIndex, lastCellIndex) + 1
+        // );
+        // const columnsIndex = fieldObjects.flatMap((v, index) => {
+        //   return index;
+        // }, []);
+        // // const columnsIndex = fieldObjects.reduce((acc: number[], column, index) => {
+        // //   if (rangeColumns.includes(column.fieldId)) {
+        // //     acc.push(index);
+        // //   }
+        // //   return acc;
+        // // }, []);
+        // console.log("하...", rangeColumns, columnsIndex);
+        // for (let start = startRowIndex; start <= endRowIndex; start++) {
+        //   const element =
+        //     gridRef.current.store.gridContainer.current?.querySelector(
+        //       `[aria-rowindex="${start}"]`
+        //     );
+        //   // const columnsIndex = gridRef.current.store.state.columns.reduce(
+        //   //   (acc: number[], column, index) => {
+        //   //     if (rangeColumns.includes(column.fieldId)) {
+        //   //       acc.push(index);
+        //   //     }
+        //   //     return acc;
+        //   //   },
+        //   //   []
+        //   // );
+        //   if (element) {
+        //     const elements = element?.querySelectorAll(
+        //       columnsIndex
+        //         .map((columnIndex) => `[aria-colindex="${columnIndex}"]`)
+        //         .join(", ")
+        //     );
+        //     elements?.forEach((element) => {
+        //       if (!element.classList.contains("range-1")) {
+        //         (element as HTMLDivElement).classList.add("range-1"); // 원하는 스타일 추가
+        //       } else if (
+        //         element.classList.contains("range-1") &&
+        //         !element.classList.contains("range-2")
+        //       ) {
+        //         (element as HTMLDivElement).classList.add("range-2"); // 원하는 스타일 추가
+        //       } else if (
+        //         element.classList.contains("range-2") &&
+        //         !element.classList.contains("range-3")
+        //       ) {
+        //         (element as HTMLDivElement).classList.add("range-3"); // 원하는 스타일 추가
+        //       }
+        //     });
+        //     console.log(">>>>??", elements, columnsIndex);
+        //   }
+        // }
+    }, []);
+    const handleMouseDown = React.useCallback((event) => {
+        isMouseDown.current = true;
+        const targetElement = event.target;
+        if (targetElement) {
+            const rowElement = targetElement.closest(`.${classes.TableClasses.body.row.root}`);
+            const cellElement = targetElement.closest(`.${classes.TableClasses.body.row.cell.root}`);
+            if (rowElement && cellElement) {
+                const fieldObjects = gridRef.current.store.state.columns.slice(Number(cellElement.getAttribute("aria-colindex")), Math.min(Number(cellElement.getAttribute("aria-colindex")) + 1, gridRef.current.store.state.columns.length));
+                gridRef.current.addCellRangeTemp({
+                    startRowIndex: Number(rowElement.getAttribute("aria-rowindex")),
+                    columns: fieldObjects.flatMap((field) => field.fieldId),
+                });
+            }
+        }
+    }, []);
+    const handleMouseUp = React.useCallback((event) => {
+        isMouseDown.current = false;
+        prevlastCellIndex.current = -1;
+        prevlastRowIndex.current = -1;
+        const targetElement = event.target;
+        if (targetElement) {
+            const rowElement = targetElement.closest(`.${classes.TableClasses.body.row.root}`);
+            const cellElement = targetElement.closest(`.${classes.TableClasses.body.row.cell.root}`);
+            if (rowElement && cellElement) {
+                const firstCellIndex = gridRef.current.store.state.columns.findIndex((column) => {
+                    var _a;
+                    return (_a = gridRef.current.store.__cellRangeTemp.columns) === null || _a === void 0 ? void 0 : _a.includes(column.fieldId);
+                });
+                const lastCellIndex = Number(cellElement.getAttribute("aria-colindex"));
+                const fieldObjects = gridRef.current.store.state.columns.slice(Math.min(firstCellIndex, lastCellIndex), Math.max(firstCellIndex, lastCellIndex) + 1);
+                gridRef.current.addCellRangeTemp({
+                    endRowIndex: Number(rowElement.getAttribute("aria-rowindex")),
+                    columns: fieldObjects.flatMap((field) => field.fieldId),
+                });
+                gridRef.current
+                    .getPublicApi()
+                    .addCellRange(gridRef.current.store.__cellRangeTemp);
+                gridRef.current.store.__cellRangeTemp = {};
+                setCellRange(gridRef.current.store.__cellRange);
+            }
+        }
+    }, []);
+    return {
+        cellRange,
+        handleMouseDown,
+        handleMouseUp,
+        handleMouseMove,
+    };
+};
+export default useCellRange;

package/lib/cjs/hooks/internal/useInternalPrivateApi.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { DataGridPrivateApi, GirdApiCommon } from "../../types/dataGridProps";
+export default function useInternalPrivateApi(apiRef: React.MutableRefObject<GirdApiCommon<DataGridPrivateApi>>): {};