@youp-grid/react 0.2.1 → 0.2.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Seungyoup Baek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -10,3 +10,18 @@ npm install @youp-grid/core @youp-grid/react
 import { YoupGrid } from "@youp-grid/react";
 import "@youp-grid/react/styles.css";
 ```
+
+## What It Provides
+
+- virtualized React grid UI
+- keyboard navigation and inline editing
+- built-in text, number, checkbox, and select editors
+- clipboard paste, fill handle, delete, undo, and redo write paths
+- column menus, resizing, pinning, visibility, density, and row selection UI
+- loading, empty, error, validation, pending, warning, and read-only states
+
+The adapter emits changes through callbacks. Applications keep ownership of row data.
+
+## License
+
+MIT. See the repository license.

package/dist/YoupGrid.js

@@ -9,6 +9,9 @@ const DENSITY_ROW_HEIGHTS = {
     comfortable: 46,
 };
 const SELECTION_COLUMN_WIDTH = 44;
+const AUTOSIZE_CELL_EXTRA_WIDTH = 8;
+const AUTOSIZE_CELL_BORDER_THRESHOLD = 6;
+let autosizeMeasureCanvas;
 export function YoupGrid(props) {
     const controller = useYoupGrid(props);
     const rowModel = controller.rowModel;
@@ -31,7 +34,10 @@ export function YoupGrid(props) {
     const [editingCell, setEditingCell] = useState();
     const [columnChooserOpen, setColumnChooserOpen] = useState(false);
     const [columnMenuOpenId, setColumnMenuOpenId] = useState();
+    const [activeTooltipCellKey, setActiveTooltipCellKey] = useState();
     const showRowSelectionColumn = props.showRowSelectionColumn ?? false;
+    const pinRowSelectionColumn = props.pinRowSelectionColumn ?? false;
+    const cellTooltipMode = props.cellTooltip?.mode ?? "native";
     const gridEditable = (props.editable ?? true) && !props.readOnly;
     const displayRows = rowModel.displayRows;
     const virtualRange = useMemo(() => {
@@ -75,9 +81,9 @@ export function YoupGrid(props) {
     const someVisibleRowsSelected = selectedVisibleRowCount > 0 && !allVisibleRowsSelected;
     const columnLayouts = useMemo(() => {
         return getColumnLayouts(rowModel.visibleColumns, {
-            leftOffset: showRowSelectionColumn ? SELECTION_COLUMN_WIDTH : 0,
+            leftOffset: showRowSelectionColumn && pinRowSelectionColumn ? SELECTION_COLUMN_WIDTH : 0,
         });
-    }, [rowModel.visibleColumns, showRowSelectionColumn]);
+    }, [pinRowSelectionColumn, rowModel.visibleColumns, showRowSelectionColumn]);
     const visibleColumns = useMemo(() => columnLayouts.map((layout) => layout.column), [columnLayouts]);
     const visibleRowIndexById = useMemo(() => {
         return new Map(rowModel.visibleRows.map((row, index) => [row.id, index]));
@@ -129,7 +135,7 @@ export function YoupGrid(props) {
     };
     const getGridCellMeta = (row, rowIndex, column) => {
         return (props.getCellMeta?.(getCellEditContext(row, rowIndex, column)) ??
-            props.cellMeta?.[`${row.id}:${column.id}`]);
+            props.cellMeta?.[getCellKey(row.id, column.id)]);
     };
     const createGridCellValueChange = (cell, value) => {
         if (!cell.editable) {
@@ -163,6 +169,25 @@ export function YoupGrid(props) {
             setColumnMenuOpenId(undefined);
         }
     }, [columnMenuOpenId, visibleColumns]);
+    useEffect(() => {
+        if (cellTooltipMode !== "rich") {
+            setActiveTooltipCellKey(undefined);
+            return;
+        }
+        const cellKey = props.cellTooltip?.autoOpenCellKey;
+        if (!cellKey) {
+            return;
+        }
+        setActiveTooltipCellKey(cellKey);
+        const duration = props.cellTooltip?.autoOpenDurationMs ?? 2000;
+        if (duration <= 0) {
+            return;
+        }
+        const timeout = window.setTimeout(() => {
+            setActiveTooltipCellKey((current) => current === cellKey ? undefined : current);
+        }, duration);
+        return () => window.clearTimeout(timeout);
+    }, [cellTooltipMode, props.cellTooltip?.autoOpenCellKey, props.cellTooltip?.autoOpenDurationMs]);
     useEffect(() => {
         if (!props.infiniteScroll || !props.onRowsEndReached || !infiniteScrollTrigger.shouldLoadMore) {
             return;
@@ -313,6 +338,7 @@ export function YoupGrid(props) {
             "youp-grid",
             `youp-grid--density-${density}`,
             !gridEditable ? "youp-grid--read-only" : "",
+            pinRowSelectionColumn ? "youp-grid--selection-column-pinned" : "",
             props.className,
         ].filter(Boolean).join(" "),
         style: gridStyle,
@@ -403,6 +429,14 @@ export function YoupGrid(props) {
                 }
             },
             resizeColumn: (width) => controller.setColumnWidth(layout.column.id, width),
+            autoSizeColumn: (event) => {
+                autoSizeColumnToFit({
+                    event,
+                    column: layout.column,
+                    rows: rowModel.visibleRows,
+                    resizeColumn: (width) => controller.setColumnWidth(layout.column.id, width),
+                });
+            },
             showMenu: props.showColumnMenu ?? true,
             menuOpen: columnMenuOpenId === layout.column.id,
             toggleMenu: () => {
@@ -462,10 +496,12 @@ export function YoupGrid(props) {
                     editingCell,
                     editable: gridEditable,
                     disabledReason: props.disabledReason,
+                    treeData: props.treeData ?? false,
                     canEditCell: canEditGridCell,
                     getCellMeta: getGridCellMeta,
                     setRowSelected: (selected) => controller.setRowSelected(row.id, selected),
                     setFocusedCell,
+                    toggleTreeRowExpanded: controller.toggleTreeRowExpanded,
                     startFillHandle: (event) => {
                         if (!gridEditable) {
                             return;
@@ -496,6 +532,14 @@ export function YoupGrid(props) {
                             },
                         });
                     },
+                    autoSizeColumn: (event, column) => {
+                        autoSizeColumnToFit({
+                            event,
+                            column,
+                            rows: rowModel.visibleRows,
+                            resizeColumn: (width) => controller.setColumnWidth(column.id, width),
+                        });
+                    },
                     applyCellValue,
                     startEditing: startEditingCell,
                     updateEditingDraft: (draftValue) => {
@@ -503,6 +547,12 @@ export function YoupGrid(props) {
                     },
                     cancelEditing: cancelEditingCell,
                     commitEditing: commitEditingValue,
+                    cellTooltipMode,
+                    activeTooltipCellKey,
+                    openCellTooltip: setActiveTooltipCellKey,
+                    closeCellTooltip: (cellKey) => {
+                        setActiveTooltipCellKey((current) => current === cellKey ? undefined : current);
+                    },
                     onRowClick: props.onRowClick,
                     onRowDoubleClick: props.onRowDoubleClick,
                     onCellKeyDown: (event, cell) => {
@@ -677,6 +727,7 @@ function renderHeaderCell(context) {
         role: "columnheader",
         style: getCellStyle(context.layout),
         "aria-sort": context.sorted === "desc" ? "descending" : context.sorted === "asc" ? "ascending" : "none",
+        "data-youp-column-id": context.layout.column.id,
     }, createElement("div", { className: "youp-grid__header-main" }, createElement("button", {
         className: "youp-grid__sort-button",
         type: "button",
@@ -736,6 +787,7 @@ function renderHeaderCell(context) {
                 resizeColumn: context.resizeColumn,
             });
         },
+        onDoubleClick: context.autoSizeColumn,
     }));
 }
 function renderColumnMenu(context) {
@@ -883,15 +935,22 @@ function renderRow(context) {
             editingCell: context.editingCell,
             editable,
             disabledReason: context.disabledReason,
+            treeData: context.treeData,
             meta,
             setFocusedCell: context.setFocusedCell,
+            toggleTreeRowExpanded: context.toggleTreeRowExpanded,
             startFillHandle: context.startFillHandle,
+            autoSizeColumn: context.autoSizeColumn,
             applyCellValue: context.applyCellValue,
             startEditing: context.startEditing,
             updateEditingDraft: context.updateEditingDraft,
             cancelEditing: context.cancelEditing,
             commitEditing: context.commitEditing,
             onKeyDown: context.onCellKeyDown,
+            cellTooltipMode: context.cellTooltipMode,
+            activeTooltipCellKey: context.activeTooltipCellKey,
+            openCellTooltip: context.openCellTooltip,
+            closeCellTooltip: context.closeCellTooltip,
             renderCell: context.renderCell,
         });
     }));
@@ -935,6 +994,13 @@ function renderCell(context) {
     const column = context.layout.column;
     const value = column.accessor(context.row.original);
     const editable = context.editable;
+    const cellAlign = getColumnAlign(column);
+    const cellKey = getCellKey(context.row.id, column.id);
+    const showTreePrefix = context.treeData && context.columnIndex === 0;
+    const hasRichTooltip = context.cellTooltipMode === "rich" && hasTooltipMessage(context.meta);
+    const tooltipId = hasRichTooltip && context.activeTooltipCellKey === cellKey
+        ? getCellTooltipId(cellKey)
+        : undefined;
     const cellContext = {
         row: context.row,
         column,
@@ -943,6 +1009,9 @@ function renderCell(context) {
         focused: context.focused,
         editable,
         meta: context.meta,
+        treeDepth: context.row.depth,
+        hasChildren: context.row.hasChildren,
+        expanded: context.row.expanded,
     };
     const cellState = {
         row: context.row,
@@ -959,22 +1028,34 @@ function renderCell(context) {
             cell: cellState,
             row: context.row.original,
             disabledReason: context.disabledReason,
+            cellTooltipMode: context.cellTooltipMode,
             applyCellValue: context.applyCellValue,
         });
+    const renderedContent = showTreePrefix && !context.editing
+        ? renderTreeCellContent({
+            row: context.row,
+            content: cellContent,
+            toggleExpanded: context.toggleTreeRowExpanded,
+        })
+        : cellContent;
     return createElement("div", {
         key: column.id,
         className: getCellClassName([
             "youp-grid__cell",
+            `youp-grid__cell--align-${cellAlign}`,
             context.focused ? "youp-grid__cell--focused" : "",
             context.selected ? "youp-grid__cell--range-selected" : "",
             context.fillTargeted ? "youp-grid__cell--fill-target" : "",
             context.editing ? "youp-grid__cell--editing" : "",
             !editable ? "youp-grid__cell--disabled" : "",
+            showTreePrefix ? "youp-grid__cell--tree" : "",
+            tooltipId ? "youp-grid__cell--tooltip-open" : "",
             context.meta ? `youp-grid__cell--status-${context.meta.status}` : "",
         ].filter(Boolean).join(" "), context.layout),
         role: "gridcell",
         tabIndex: context.focused && !context.editing ? 0 : -1,
-        title: getCellTitle(context.meta, context.disabledReason, editable),
+        title: getCellTitle(context.meta, context.disabledReason, editable, context.cellTooltipMode),
+        "aria-describedby": tooltipId,
         "aria-colindex": context.columnIndex + context.ariaColumnOffset + 1,
         "aria-readonly": !editable || undefined,
         "data-youp-row-index": context.rowIndex,
@@ -985,7 +1066,11 @@ function renderCell(context) {
             event.currentTarget.focus({ preventScroll: true });
             context.setFocusedCell({ rowIndex: context.rowIndex, columnIndex: context.columnIndex }, event.shiftKey);
         },
-        onDoubleClick: () => {
+        onDoubleClick: (event) => {
+            if (isCellRightBorderDoubleClick(event)) {
+                context.autoSizeColumn(event, column);
+                return;
+            }
             if (editable) {
                 if (column.editor === "checkbox") {
                     context.applyCellValue(cellState, !Boolean(value));
@@ -996,6 +1081,31 @@ function renderCell(context) {
             }
         },
         onKeyDown: (event) => context.onKeyDown(event, cellState),
+        onMouseEnter: () => {
+            if (hasRichTooltip) {
+                context.openCellTooltip(cellKey);
+            }
+        },
+        onMouseLeave: () => {
+            if (hasRichTooltip) {
+                context.closeCellTooltip(cellKey);
+            }
+        },
+        onFocus: () => {
+            if (hasRichTooltip) {
+                context.openCellTooltip(cellKey);
+            }
+        },
+        onBlur: (event) => {
+            if (!hasRichTooltip) {
+                return;
+            }
+            const nextTarget = event.relatedTarget;
+            if (nextTarget && event.currentTarget.contains(nextTarget)) {
+                return;
+            }
+            context.closeCellTooltip(cellKey);
+        },
     }, context.editing
         ? renderCellEditor({
             cell: cellState,
@@ -1004,7 +1114,7 @@ function renderCell(context) {
             commitEditing: context.commitEditing,
             onKeyDown: context.onKeyDown,
         })
-        : cellContent, renderCellStatus(context.meta), !context.editing && context.showFillHandle
+        : renderedContent, renderCellStatus(context.meta, context.cellTooltipMode), renderCellTooltip(context.meta, tooltipId), !context.editing && context.showFillHandle
         ? createElement("span", {
             className: "youp-grid__fill-handle",
             role: "button",
@@ -1013,6 +1123,18 @@ function renderCell(context) {
         })
         : undefined);
 }
+function getColumnAlign(column) {
+    if (column.align) {
+        return column.align;
+    }
+    if (column.editor === "number") {
+        return "right";
+    }
+    if (column.editor === "checkbox") {
+        return "center";
+    }
+    return "left";
+}
 function renderDefaultCellContent(context) {
     if (context.cell.column.editor === "checkbox") {
         return createElement("input", {
@@ -1020,7 +1142,7 @@ function renderDefaultCellContent(context) {
             type: "checkbox",
             checked: Boolean(context.cell.value),
             disabled: !context.cell.editable,
-            title: getCellTitle(context.cell.meta, context.disabledReason, context.cell.editable),
+            title: getCellTitle(context.cell.meta, context.disabledReason, context.cell.editable, context.cellTooltipMode),
             "aria-label": context.cell.column.headerName,
             onChange: (event) => {
                 context.applyCellValue(context.cell, event.currentTarget.checked);
@@ -1036,7 +1158,37 @@ function renderDefaultCellContent(context) {
     const text = formatCellValue(context.cell.column, context.row, context.cell.value);
     const placeholder = context.cell.column.placeholder;
     const hasPlaceholder = text.length === 0 && Boolean(placeholder);
-    return createElement("span", { className: hasPlaceholder ? "youp-grid__cell-placeholder" : undefined }, hasPlaceholder ? placeholder : text);
+    return createElement("span", {
+        className: [
+            "youp-grid__cell-text",
+            hasPlaceholder ? "youp-grid__cell-placeholder" : "",
+        ].filter(Boolean).join(" "),
+    }, hasPlaceholder ? placeholder : text);
+}
+function renderTreeCellContent(context) {
+    const depth = Math.max(0, context.row.depth ?? 0);
+    const toggle = context.row.hasChildren
+        ? createElement("button", {
+            className: "youp-grid__tree-toggle",
+            type: "button",
+            "aria-label": context.row.expanded ? "Collapse row" : "Expand row",
+            "aria-expanded": context.row.expanded,
+            onClick: (event) => {
+                event.stopPropagation();
+                context.toggleExpanded(context.row.id);
+            },
+            onDoubleClick: (event) => {
+                event.stopPropagation();
+            },
+            onKeyDown: (event) => {
+                event.stopPropagation();
+            },
+        }, createElement("span", { className: "youp-grid__tree-caret", "aria-hidden": true }, context.row.expanded ? "v" : ">"))
+        : createElement("span", { className: "youp-grid__tree-toggle-spacer", "aria-hidden": true });
+    return createElement("span", {
+        className: "youp-grid__cell-tree-content",
+        style: { paddingLeft: depth * 18 },
+    }, toggle, createElement("span", { className: "youp-grid__cell-tree-value" }, context.content));
 }
 function renderCellEditor(context) {
     if (context.cell.column.editor === "select") {
@@ -1079,16 +1231,26 @@ function renderCellEditor(context) {
         },
     });
 }
-function renderCellStatus(meta) {
+function renderCellStatus(meta, tooltipMode) {
     if (!meta) {
         return undefined;
     }
     return createElement("span", {
         className: `youp-grid__cell-status youp-grid__cell-status--${meta.status}`,
-        title: typeof meta.message === "string" ? meta.message : undefined,
+        title: tooltipMode === "native" && typeof meta.message === "string" ? meta.message : undefined,
         "aria-hidden": true,
     });
 }
+function renderCellTooltip(meta, tooltipId) {
+    if (!tooltipId || !meta?.message) {
+        return undefined;
+    }
+    return createElement("span", {
+        id: tooltipId,
+        className: "youp-grid__cell-tooltip",
+        role: "tooltip",
+    }, meta.message);
+}
 function renderColumnToolbar(context) {
     if (!context.showColumnChooser && !context.showCsvExport && !context.showDensityControl) {
         return undefined;
@@ -1338,6 +1500,100 @@ function startColumnResize(context) {
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
 }
+function autoSizeColumnToFit(context) {
+    context.event.preventDefault();
+    context.event.stopPropagation();
+    context.resizeColumn(getAutoSizeColumnWidth({
+        anchor: context.event.currentTarget,
+        column: context.column,
+        rows: context.rows,
+    }));
+}
+function getAutoSizeColumnWidth(context) {
+    const metrics = getAutoSizeMetrics(context.anchor, context.column.id);
+    const minWidth = context.column.minWidth ?? 64;
+    const maxWidth = context.column.maxWidth ?? Number.MAX_SAFE_INTEGER;
+    let width = measureAutoSizeText(context.column.headerName, metrics.headerFont) +
+        metrics.headerHorizontalPadding +
+        metrics.headerControlWidth +
+        AUTOSIZE_CELL_EXTRA_WIDTH;
+    for (const row of context.rows) {
+        const text = getAutoSizeCellText(context.column, row.original);
+        width = Math.max(width, measureAutoSizeText(text, metrics.cellFont) + metrics.cellHorizontalPadding + AUTOSIZE_CELL_EXTRA_WIDTH);
+    }
+    return Math.ceil(clamp(width, minWidth, maxWidth));
+}
+function getAutoSizeMetrics(anchor, columnId) {
+    const anchorCell = anchor.closest(".youp-grid__cell");
+    const root = anchor.closest(".youp-grid");
+    const headerCell = anchorCell?.getAttribute("role") === "columnheader"
+        ? anchorCell
+        : findColumnElement(root, "columnheader", columnId);
+    const bodyCell = anchorCell?.getAttribute("role") === "gridcell"
+        ? anchorCell
+        : findColumnElement(root, "gridcell", columnId);
+    const headerCellStyle = headerCell ? window.getComputedStyle(headerCell) : undefined;
+    const bodyCellStyle = bodyCell ? window.getComputedStyle(bodyCell) : headerCellStyle;
+    const headerMain = headerCell?.querySelector(".youp-grid__header-main");
+    const headerMainStyle = headerMain ? window.getComputedStyle(headerMain) : undefined;
+    const menuButton = headerCell?.querySelector(".youp-grid__column-menu-button");
+    const headerHorizontalPadding = headerCellStyle
+        ? getPixelValue(headerCellStyle.paddingLeft) + getPixelValue(headerCellStyle.paddingRight)
+        : 24;
+    const cellHorizontalPadding = bodyCellStyle
+        ? getPixelValue(bodyCellStyle.paddingLeft) + getPixelValue(bodyCellStyle.paddingRight)
+        : headerHorizontalPadding;
+    const headerControlWidth = menuButton
+        ? menuButton.offsetWidth + getPixelValue(headerMainStyle?.columnGap ?? headerMainStyle?.gap ?? "0")
+        : 0;
+    return {
+        headerFont: headerCellStyle ? getFontValue(headerCellStyle) : "13px sans-serif",
+        cellFont: bodyCellStyle ? getFontValue(bodyCellStyle) : "13px sans-serif",
+        headerHorizontalPadding,
+        cellHorizontalPadding,
+        headerControlWidth,
+    };
+}
+function findColumnElement(root, role, columnId) {
+    if (!root) {
+        return undefined;
+    }
+    return Array.from(root.querySelectorAll(`[role='${role}'][data-youp-column-id]`))
+        .find((element) => element.dataset.youpColumnId === columnId);
+}
+function isCellRightBorderDoubleClick(event) {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return Math.abs(rect.right - event.clientX) <= AUTOSIZE_CELL_BORDER_THRESHOLD;
+}
+function getAutoSizeCellText(column, row) {
+    const text = formatCellValue(column, row, column.accessor(row));
+    return text.length === 0 && column.placeholder ? column.placeholder : text;
+}
+function measureAutoSizeText(text, font) {
+    if (typeof document === "undefined") {
+        return text.length * 8;
+    }
+    autosizeMeasureCanvas ?? (autosizeMeasureCanvas = document.createElement("canvas"));
+    const context = autosizeMeasureCanvas.getContext("2d");
+    if (!context) {
+        return text.length * 8;
+    }
+    context.font = font;
+    return context.measureText(text).width;
+}
+function getFontValue(style) {
+    return style.font || [
+        style.fontStyle,
+        style.fontVariant,
+        style.fontWeight,
+        `${style.fontSize}/${style.lineHeight}`,
+        style.fontFamily,
+    ].join(" ");
+}
+function getPixelValue(value) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+}
 function handleCellKeyDown(context) {
     if (context.rowCount === 0 || context.columnCount === 0) {
         return;
@@ -1884,8 +2140,8 @@ function normalizeEditorOptions(options) {
 function getEditorOptionValue(option) {
     return typeof option === "object" ? option.value : option;
 }
-function getCellTitle(meta, disabledReason, editable) {
-    if (typeof meta?.message === "string") {
+function getCellTitle(meta, disabledReason, editable, tooltipMode) {
+    if (tooltipMode === "native" && typeof meta?.message === "string") {
         return meta.message;
     }
     if (!editable && typeof disabledReason === "string") {
@@ -1893,6 +2149,15 @@ function getCellTitle(meta, disabledReason, editable) {
     }
     return undefined;
 }
+function hasTooltipMessage(meta) {
+    return Boolean(meta?.message);
+}
+function getCellKey(rowId, columnId) {
+    return `${String(rowId)}:${columnId}`;
+}
+function getCellTooltipId(cellKey) {
+    return `youp-grid-cell-tooltip-${cellKey.replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+}
 function isTextEditingKey(event) {
     if (event.metaKey || event.ctrlKey || event.altKey) {
         return false;

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export { YoupGrid } from "./YoupGrid.ts";
 export { useYoupGrid } from "./useYoupGrid.ts";
-export type { YoupGridCanEditCellContext, YoupGridCellEditCommit, YoupGridCellEditCommitReason, YoupGridCellContext, YoupGridCellMeta, YoupGridCellMetaStatus, YoupGridCellsValueChange, YoupGridCellsValueChangeSource, YoupGridController, YoupGridDensity, YoupGridHeaderContext, YoupGridOptions, YoupGridProps, YoupGridRowEvent, YoupGridRowsEndReachedEvent, YoupGridStateChange, } from "./types.ts";
+export type { YoupGridCanEditCellContext, YoupGridCellEditCommit, YoupGridCellEditCommitReason, YoupGridCellContext, YoupGridCellMeta, YoupGridCellMetaStatus, YoupGridCellTooltipMode, YoupGridCellTooltipOptions, YoupGridCellsValueChange, YoupGridCellsValueChangeSource, YoupGridController, YoupGridDensity, YoupGridHeaderContext, YoupGridOptions, YoupGridProps, YoupGridRowEvent, YoupGridRowsEndReachedEvent, YoupGridStateChange, } from "./types.ts";

package/dist/styles.css

@@ -164,11 +164,15 @@
   --youp-grid-header-scroll-left: 0px;
 }
 
-.youp-grid__header .youp-grid__cell--header:not(.youp-grid__cell--pinned-left):not(.youp-grid__cell--pinned-right):not(.youp-grid__selection-cell),
-.youp-grid__header .youp-grid__cell--header-group:not(.youp-grid__cell--pinned-left):not(.youp-grid__cell--pinned-right):not(.youp-grid__selection-cell) {
+.youp-grid__header .youp-grid__cell--header:not(.youp-grid__cell--pinned-left):not(.youp-grid__cell--pinned-right),
+.youp-grid__header .youp-grid__cell--header-group:not(.youp-grid__cell--pinned-left):not(.youp-grid__cell--pinned-right) {
   transform: translateX(calc(-1 * var(--youp-grid-header-scroll-left)));
 }
 
+.youp-grid--selection-column-pinned .youp-grid__header .youp-grid__selection-cell {
+  transform: none;
+}
+
 .youp-grid__row--header {
   background: var(--youp-grid-header);
 }
@@ -212,9 +216,6 @@
 }
 
 .youp-grid__selection-cell {
-  position: sticky;
-  left: 0;
-  z-index: 3;
   display: grid;
   place-items: center;
   min-width: 44px;
@@ -222,6 +223,12 @@
   background: #fff;
 }
 
+.youp-grid--selection-column-pinned .youp-grid__selection-cell {
+  position: sticky;
+  left: 0;
+  z-index: 3;
+}
+
 .youp-grid__cell.youp-grid__selection-cell {
   min-width: 44px;
 }
@@ -286,6 +293,18 @@
   white-space: nowrap;
 }
 
+.youp-grid__cell--align-left {
+  text-align: left;
+}
+
+.youp-grid__cell--align-center {
+  text-align: center;
+}
+
+.youp-grid__cell--align-right {
+  text-align: right;
+}
+
 .youp-grid--read-only .youp-grid__cell {
   cursor: default;
 }
@@ -336,6 +355,89 @@
   color: #94a3b8;
 }
 
+.youp-grid__cell-text {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.youp-grid__cell--tree {
+  display: flex;
+  align-items: center;
+}
+
+.youp-grid__cell-tree-content {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.youp-grid__cell-tree-value {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.youp-grid__tree-toggle,
+.youp-grid__tree-toggle-spacer {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+}
+
+.youp-grid__tree-toggle {
+  padding: 0;
+  border: 0;
+  color: var(--youp-grid-muted);
+  font: inherit;
+  cursor: pointer;
+  background: transparent;
+}
+
+.youp-grid__tree-toggle:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 1px;
+}
+
+.youp-grid__tree-caret {
+  width: 12px;
+  line-height: 1;
+  text-align: center;
+}
+
+.youp-grid__cell--tooltip-open {
+  z-index: 8;
+  overflow: visible;
+}
+
+.youp-grid__cell-tooltip {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: var(--youp-grid-cell-inline-padding);
+  z-index: 20;
+  width: max-content;
+  min-width: 120px;
+  max-width: 260px;
+  padding: 6px 8px;
+  border: 1px solid #0f172a;
+  border-radius: 6px;
+  color: #fff;
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: left;
+  white-space: normal;
+  pointer-events: none;
+  background: #0f172a;
+  box-shadow: 0 8px 24px rgb(15 23 42 / 18%);
+}
+
 .youp-grid__cell-checkbox {
   width: 16px;
   height: 16px;
@@ -408,6 +510,18 @@
   outline: none;
 }
 
+.youp-grid__cell--align-left .youp-grid__cell-editor {
+  text-align: left;
+}
+
+.youp-grid__cell--align-center .youp-grid__cell-editor {
+  text-align: center;
+}
+
+.youp-grid__cell--align-right .youp-grid__cell-editor {
+  text-align: right;
+}
+
 .youp-grid__cell-editor--select {
   padding-right: 24px;
 }

package/dist/types.d.ts

@@ -29,6 +29,12 @@ export type YoupGridCellMeta = {
     status: YoupGridCellMetaStatus;
     message?: ReactNode;
 };
+export type YoupGridCellTooltipMode = "native" | "rich" | "none";
+export type YoupGridCellTooltipOptions = {
+    mode?: YoupGridCellTooltipMode;
+    autoOpenCellKey?: string | null;
+    autoOpenDurationMs?: number;
+};
 export type YoupGridCanEditCellContext<TRow> = {
     row: TRow;
     rowNode: RowNode<TRow>;
@@ -61,6 +67,8 @@ export type YoupGridOptions<TRow> = {
     defaultState?: GridState;
     onStateChange?: (change: YoupGridStateChange<TRow>) => void;
     getRowId?: (row: TRow, index: number) => GridRowId;
+    treeData?: boolean;
+    getParentRowId?: (row: TRow, index: number) => GridRowId | null | undefined;
     rowModelType?: GridRowModelType;
     serverRowCount?: number;
     serverFilteredRowCount?: number;
@@ -101,6 +109,8 @@ export type YoupGridController<TRow> = {
     setRowSelected: (rowId: GridRowId, selected: boolean) => void;
     setSelectedRows: (rowIds: readonly GridRowId[]) => void;
     toggleRowSelected: (rowId: GridRowId) => void;
+    setTreeExpandedRows: (rowIds: readonly GridRowId[]) => void;
+    toggleTreeRowExpanded: (rowId: GridRowId) => void;
 };
 export type YoupGridProps<TRow> = YoupGridOptions<TRow> & {
     className?: string;
@@ -118,6 +128,7 @@ export type YoupGridProps<TRow> = YoupGridOptions<TRow> & {
     showAggregationFooter?: boolean;
     showPagination?: boolean;
     showRowSelectionColumn?: boolean;
+    pinRowSelectionColumn?: boolean;
     csvFileName?: string;
     density?: YoupGridDensity;
     defaultDensity?: YoupGridDensity;
@@ -128,6 +139,7 @@ export type YoupGridProps<TRow> = YoupGridOptions<TRow> & {
     errorContent?: ReactNode;
     cellMeta?: Record<string, YoupGridCellMeta | undefined>;
     getCellMeta?: (context: YoupGridCanEditCellContext<TRow>) => YoupGridCellMeta | undefined;
+    cellTooltip?: YoupGridCellTooltipOptions;
     renderCell?: (context: YoupGridCellContext<TRow>) => ReactNode;
     renderHeader?: (context: YoupGridHeaderContext<TRow>) => ReactNode;
     onCellValueChange?: (change: YoupGridCellValueChange<TRow>) => void;
@@ -146,6 +158,9 @@ export type YoupGridCellContext<TRow> = {
     focused: boolean;
     editable: boolean;
     meta?: YoupGridCellMeta;
+    treeDepth?: number;
+    hasChildren?: boolean;
+    expanded?: boolean;
 };
 export type YoupGridHeaderContext<TRow> = {
     column: ResolvedColumnDef<TRow>;

package/dist/useYoupGrid.js

@@ -1,4 +1,4 @@
-import { acknowledgeRemoteCache as acknowledgeCoreRemoteCache, buildRowModel, cancelRemoteRequest as cancelCoreRemoteRequest, clearFilter as clearCoreFilter, clearSort as clearCoreSort, createGridState, failRemoteRequest as failCoreRemoteRequest, finishRemoteRequest as finishCoreRemoteRequest, invalidateRemoteCache as invalidateCoreRemoteCache, setColumnHidden as setCoreColumnHidden, setColumnPinned as setCoreColumnPinned, setColumnWidth as setCoreColumnWidth, setCursorPage as setCoreCursorPage, setCursorPageSize as setCoreCursorPageSize, setCursorPagination as setCoreCursorPagination, setAggregation as setCoreAggregation, setFilter as setCoreFilter, setPagination, setRemoteCache as setCoreRemoteCache, setRowGrouping as setCoreRowGrouping, setRowSelected as setCoreRowSelected, setSelectedRows as setCoreSelectedRows, setSort as setCoreSort, startRemoteRequest as startCoreRemoteRequest, toggleRowGroupExpanded as toggleCoreRowGroupExpanded, toggleRowSelected as toggleCoreRowSelected, toggleSort as toggleCoreSort, } from "@youp-grid/core";
+import { acknowledgeRemoteCache as acknowledgeCoreRemoteCache, buildRowModel, cancelRemoteRequest as cancelCoreRemoteRequest, clearFilter as clearCoreFilter, clearSort as clearCoreSort, createGridState, failRemoteRequest as failCoreRemoteRequest, finishRemoteRequest as finishCoreRemoteRequest, invalidateRemoteCache as invalidateCoreRemoteCache, setColumnHidden as setCoreColumnHidden, setColumnPinned as setCoreColumnPinned, setColumnWidth as setCoreColumnWidth, setCursorPage as setCoreCursorPage, setCursorPageSize as setCoreCursorPageSize, setCursorPagination as setCoreCursorPagination, setAggregation as setCoreAggregation, setFilter as setCoreFilter, setPagination, setRemoteCache as setCoreRemoteCache, setRowGrouping as setCoreRowGrouping, setRowSelected as setCoreRowSelected, setSelectedRows as setCoreSelectedRows, setSort as setCoreSort, setTreeExpandedRows as setCoreTreeExpandedRows, startRemoteRequest as startCoreRemoteRequest, toggleRowGroupExpanded as toggleCoreRowGroupExpanded, toggleRowSelected as toggleCoreRowSelected, toggleSort as toggleCoreSort, toggleTreeRowExpanded as toggleCoreTreeRowExpanded, } from "@youp-grid/core";
 import { useCallback, useMemo, useState } from "react";
 export function useYoupGrid(options) {
     const isControlled = options.state !== undefined;
@@ -12,6 +12,8 @@ export function useYoupGrid(options) {
             columns: options.columns,
             state,
             getRowId: options.getRowId,
+            treeData: options.treeData,
+            getParentRowId: options.getParentRowId,
             rowModelType: options.rowModelType,
             serverRowCount: options.serverRowCount,
             serverFilteredRowCount: options.serverFilteredRowCount,
@@ -20,6 +22,8 @@ export function useYoupGrid(options) {
         options.rows,
         options.columns,
         options.getRowId,
+        options.treeData,
+        options.getParentRowId,
         options.rowModelType,
         options.serverRowCount,
         options.serverFilteredRowCount,
@@ -31,6 +35,8 @@ export function useYoupGrid(options) {
             columns: options.columns,
             state: nextState,
             getRowId: options.getRowId,
+            treeData: options.treeData,
+            getParentRowId: options.getParentRowId,
             rowModelType: options.rowModelType,
             serverRowCount: options.serverRowCount,
             serverFilteredRowCount: options.serverFilteredRowCount,
@@ -93,5 +99,7 @@ export function useYoupGrid(options) {
         setRowSelected: (rowId, selected) => commitState(setCoreRowSelected(state, rowId, selected)),
         setSelectedRows: (rowIds) => commitState(setCoreSelectedRows(state, rowIds)),
         toggleRowSelected: (rowId) => commitState(toggleCoreRowSelected(state, rowId)),
+        setTreeExpandedRows: (rowIds) => commitState(setCoreTreeExpandedRows(state, rowIds)),
+        toggleTreeRowExpanded: (rowId) => commitState(toggleCoreTreeRowExpanded(state, rowId)),
     };
 }

package/package.json

@@ -1,8 +1,17 @@
 {
   "name": "@youp-grid/react",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "React adapter for Youp Grid.",
+  "license": "MIT",
+  "author": "SeungyoupBaek",
   "type": "module",
+  "keywords": [
+    "data-grid",
+    "grid",
+    "react",
+    "typescript",
+    "table"
+  ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -14,13 +23,18 @@
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "LICENSE"
   ],
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/SeungyoupBaek/youp-grid.git",
     "directory": "packages/react"
   },
+  "bugs": {
+    "url": "https://github.com/SeungyoupBaek/youp-grid/issues"
+  },
+  "homepage": "https://github.com/SeungyoupBaek/youp-grid/tree/main/packages/react#readme",
   "publishConfig": {
     "access": "public"
   },
@@ -28,7 +42,7 @@
     "build": "tsc -p tsconfig.build.json && cp src/styles.css dist/styles.css"
   },
   "dependencies": {
-    "@youp-grid/core": "0.2.1"
+    "@youp-grid/core": "0.2.3"
   },
   "peerDependencies": {
     "react": ">=18.2.0"