@ioca/react 1.5.9 → 1.5.10

package/lib/index.js

@@ -1,9 +1,10 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { debounce, uid, throttle, title } from 'radash';
-import { useState, useRef, useCallback, useEffect, useMemo, Children, cloneElement, createElement, isValidElement, Fragment as Fragment$1, useTransition, forwardRef, useLayoutEffect, memo, createContext, useContext, useImperativeHandle } from 'react';
+import { useState, useRef, useEffect, useCallback, useMemo, Children, cloneElement, createElement, isValidElement, memo, Fragment as Fragment$1, useTransition, forwardRef, useLayoutEffect, createContext, useContext, useImperativeHandle } from 'react';
 import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, UndoRound, RedoRound, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, ClearAllRound, PlayArrowRound, PauseRound, StopRound, VolumeDownRound, VolumeOffRound, FullscreenRound, FullscreenExitRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, KeyboardDoubleArrowUpRound, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, InfoOutlined, KeyboardArrowDownRound, ListAltRound, DriveFolderUploadOutlined, PlusSharp } from '@ricons/material';
 import { createRoot } from 'react-dom/client';
+import { getScrollbarSize, List as List$2 } from 'react-window';
 import { createPortal } from 'react-dom';
 import xss from 'xss';
 import { renderToStaticMarkup } from 'react-dom/server';
@@ -36,12 +37,12 @@ function triggerRipple(target, e) {
     const [$box, $ripple] = createRipple();
     const rect = target.getBoundingClientRect();
     const size = Math.max(rect.width, rect.height) * 2;
-    $ripple.style.cssText = `
-        left: ${e.pageX - rect.left}px;
-        top: ${e.pageY - rect.top}px;
-        width: ${size}px;
-        height: ${size}px;
-        transition: all ${TIMEOUT / 1000}s;
+    $ripple.style.cssText = `
+        left: ${e.pageX - rect.left}px;
+        top: ${e.pageY - rect.top}px;
+        width: ${size}px;
+        height: ${size}px;
+        transition: all ${TIMEOUT / 1000}s;
     `;
     target.insertAdjacentElement("afterbegin", $box);
     target.offsetHeight;
@@ -71,6 +72,13 @@ const Loading = (props) => {
                 }, children: jsx("circle", { cx: '12', cy: '12', r: '9.5', fill: 'none', strokeWidth: '3', strokeLinecap: 'round', strokeDasharray: 40, strokeDashoffset: 0 }) })), text] }));
 };
 
+const os = window.navigator.platform;
+if (os.toLowerCase().includes("mac")) {
+    document.documentElement.classList.add("os-mac");
+}
+else if (os.toLowerCase().includes("win")) {
+    document.documentElement.classList.add("os-windows");
+}
 const MouseMoveEvents = new Set();
 const MouseUpEvents = new Set();
 const KeydownEvents = new Set();
@@ -892,7 +900,7 @@ function Checkbox(props) {
     return (jsxs("div", { className: classNames("i-checkbox i-input-label", {
             [`i-checkbox-${status}`]: status !== "normal",
             "i-input-inline": labelInline,
-        }, className), ...restProps, children: [label && (jsxs("span", { className: 'i-input-label-text', children: [required && jsx("span", { className: 'error', children: "*" }), label, message && jsx("p", { className: 'i-checkbox-message', children: message })] })), jsx("div", { className: classNames("i-checkbox-options", {
+        }, className), ...restProps, children: [label && (jsxs("span", { className: "i-input-label-text", children: [required && jsx("span", { className: "error", children: "*" }), label, message && jsx("p", { className: "i-checkbox-message", children: message })] })), jsx("div", { className: classNames("i-checkbox-options", {
                     "i-options-block": !optionInline,
                     "i-checkbox-options-button": type === "button",
                 }), children: formattedOptions.map((option) => {
@@ -988,6 +996,83 @@ function Empty(props) {
     return (jsx(InboxTwotone, { className: classNames("i-empty", className), ...restProps }));
 }
 
+const lengthRe = /^-?\d+(\.\d+)?(px|em|rem|%|vw|vh|vmin|vmax|ch|ex|cm|mm|in|pt|pc)$/;
+const isLength = (v) => {
+    if (v === "0")
+        return true;
+    if (v.startsWith("var(") || v.startsWith("calc("))
+        return true;
+    return lengthRe.test(v);
+};
+const sumLengths = (parts) => {
+    let out = null;
+    for (let i = 0; i < parts.length; i++) {
+        const v = parts[i];
+        if (!v || !isLength(v))
+            continue;
+        if (out == null)
+            out = [v];
+        else
+            out.push(v);
+    }
+    if (out == null || out.length < 1)
+        return "0";
+    if (out.length === 1)
+        return out[0];
+    return `calc(${out.join(" + ")})`;
+};
+const toCssWidth = (w) => typeof w === "number" ? `${w}px` : w;
+const buildGridTemplateColumns = (widths, overrideIndex, overrideWidth) => {
+    let out = "";
+    for (let i = 0; i < widths.length; i++) {
+        const w = i === overrideIndex && overrideWidth != null
+            ? overrideWidth
+            : widths[i];
+        out += (i ? " " : "") + toCssWidth(w);
+    }
+    return out;
+};
+const buildCssWidths = (widths, overrideIndex, overrideWidth) => {
+    const out = new Array(widths.length);
+    for (let i = 0; i < widths.length; i++) {
+        const w = i === overrideIndex && overrideWidth != null
+            ? overrideWidth
+            : widths[i];
+        out[i] = toCssWidth(w);
+    }
+    return out;
+};
+const applyFixedInsets = (setVar, columns, cssWidths) => {
+    for (let i = 0; i < columns.length; i++) {
+        const fixed = columns[i]?.fixed;
+        if (!fixed)
+            continue;
+        if (fixed === "left" && i === 0) {
+            setVar(`--datagrid-cell-inset-0`, "0");
+            continue;
+        }
+        if (fixed === "right" && i === columns.length - 1) {
+            setVar(`--datagrid-cell-inset-${columns.length - 1}`, "auto 0");
+            continue;
+        }
+        if (fixed === "left") {
+            const parts = [];
+            for (let j = 0; j < i; j++) {
+                if (columns[j]?.fixed === "left")
+                    parts.push(cssWidths[j]);
+            }
+            setVar(`--datagrid-cell-inset-${i}`, `${sumLengths(parts)} auto`);
+            continue;
+        }
+        const parts = [];
+        for (let j = i + 1; j < columns.length; j++) {
+            if (columns[j]?.fixed === "right")
+                parts.push(cssWidths[j]);
+        }
+        setVar(`--datagrid-cell-inset-${i}`, `auto ${sumLengths(parts)}`);
+    }
+};
+
 function getCellStyle({ justify, col, row, colSpan = 1, rowSpan = 1, }) {
     const style = {
         "--datagrid-justify": justify,
@@ -999,21 +1084,43 @@ function getCellStyle({ justify, col, row, colSpan = 1, rowSpan = 1, }) {
 function Cell(props) {
     const { column, row, col, data, cellEllipsis, onCellClick, onCellDoubleClick, } = props;
     const { id, fixed, justify, rowSpan, render } = column;
-    const style = getCellStyle({ justify, col, row, rowSpan });
+    const style = useMemo(() => getCellStyle({ justify, col, row, rowSpan }), [col, fixed, justify, row, rowSpan]);
+    const handleClick = useCallback((e) => onCellClick?.(data, column, row, col, e), [col, column, data, onCellClick, row]);
+    const handleDoubleClick = useCallback((e) => onCellDoubleClick?.(data, column, row, col, e), [col, column, data, onCellDoubleClick, row]);
     return (jsx("div", { className: classNames("i-datagrid-cell", {
             [`i-datagrid-cell-fixed-${fixed}`]: fixed,
-        }), "data-col": id, style: style, onClick: (e) => onCellClick?.(data, column, row, col, e), onDoubleClick: (e) => onCellDoubleClick?.(data, column, row, col, e), children: render?.(data[id], data, row, col) ?? (jsx("div", { className: classNames("i-datagrid-cell-content", {
+        }), "data-col": id, style: style, onClick: handleClick, onDoubleClick: handleDoubleClick, children: render?.(data[id], data, row, col) ?? (jsx("div", { className: classNames("i-datagrid-cell-content", {
                 "i-datagrid-cell-content-ellipsis": cellEllipsis,
             }), children: data[id] })) }));
 }
 
-function Resize(props) {
+const Resize = memo(function Resize(props) {
     const { index, onWidthChange } = props;
     const state = useReactive({
         resizing: false,
         x: 0,
         width: 0,
     });
+    const rafId = useRef(null);
+    const nextWidth = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (rafId.current != null)
+                cancelAnimationFrame(rafId.current);
+        };
+    }, []);
+    const flush = useCallback(() => {
+        rafId.current = null;
+        if (nextWidth.current == null)
+            return;
+        onWidthChange(index, nextWidth.current, "preview");
+    }, [index, onWidthChange]);
+    const schedule = useCallback((w) => {
+        nextWidth.current = w;
+        if (rafId.current != null)
+            return;
+        rafId.current = requestAnimationFrame(flush);
+    }, [flush]);
     const handleMouseDown = (e) => {
         const tar = e.target;
         const width = tar.offsetParent.offsetWidth;
@@ -1023,24 +1130,31 @@ function Resize(props) {
             width,
         });
     };
-    const handleMouseMove = (e) => {
+    const handleMouseMove = useCallback((e) => {
         if (!state.resizing)
             return;
         e.preventDefault();
         const after = state.width + e.pageX - state.x;
         if (after <= 24)
             return;
-        onWidthChange(index, after);
-    };
-    const handleMouseUp = () => {
+        schedule(after);
+    }, [index, schedule, state]);
+    const handleMouseUp = useCallback(() => {
         if (!state.resizing)
             return;
         state.resizing = false;
-    };
+        const w = nextWidth.current;
+        if (rafId.current != null)
+            cancelAnimationFrame(rafId.current);
+        rafId.current = null;
+        if (w != null)
+            onWidthChange(index, w, "commit");
+        nextWidth.current = null;
+    }, [index, onWidthChange, state]);
     useMouseMove(handleMouseMove);
     useMouseUp(handleMouseUp);
     return (jsx("i", { className: 'i-datagrid-resizor', onMouseDown: handleMouseDown, onClick: (e) => e.stopPropagation() }));
-}
+});
 
 const Arrow = (props) => (jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', ...props, children: jsx("g", { fill: 'none', children: jsx("path", { d: 'M9 17.898c0 1.074 1.265 1.648 2.073.941l6.31-5.522a1.75 1.75 0 0 0 0-2.634l-6.31-5.522C10.265 4.454 9 5.028 9 6.102v11.796z', fill: 'currentColor' }) }) }));
 function Sorter(props) {
@@ -1052,11 +1166,24 @@ function Sorter(props) {
 
 function Row(props) {
     const { row, data, columns, cellEllipsis, onRowClick, onCellClick, onCellDoubleClick, } = props;
-    return (jsx("div", { className: 'i-datagrid-row', onClick: () => onRowClick?.(data, row), children: columns.map((col, i) => (jsx(Cell, { column: col, col: i, row: row, data: data, cellEllipsis: cellEllipsis, onCellClick: onCellClick, onCellDoubleClick: onCellDoubleClick }, i))) }));
+    const handleRowClick = useCallback(() => {
+        onRowClick?.(data, row);
+    }, [data, onRowClick, row]);
+    return (jsx("div", { className: 'i-datagrid-row', onClick: handleRowClick, children: columns.map((col, i) => (jsx(Cell, { column: col, col: i, row: row, data: data, cellEllipsis: cellEllipsis, onCellClick: onCellClick, onCellDoubleClick: onCellDoubleClick }, i))) }));
 }
 function Header$1(props) {
     const { columns, resizable, cellEllipsis, sortBy, sortType, onWidthChange, onHeaderClick, } = props;
-    return (jsx("div", { className: 'i-datagrid-header i-datagrid-row', children: columns.map((column, col) => {
+    const columnById = useMemo(() => {
+        const map = new Map();
+        columns.forEach((c) => map.set(c.id, c));
+        return map;
+    }, [columns]);
+    const handleClick = useCallback((e) => {
+        const el = e.target?.closest?.(".i-datagrid-cell[data-col]");
+        const id = el?.dataset?.col;
+        onHeaderClick?.(id ? columnById.get(id) : undefined, e);
+    }, [columnById, onHeaderClick]);
+    return (jsx("div", { className: 'i-datagrid-header i-datagrid-row', onClick: handleClick, children: columns.map((column, col) => {
             const { id, title, fixed, colSpan, sorter, justify, renderHeader, } = column;
             const style = getCellStyle({
                 justify,
@@ -1068,68 +1195,352 @@ function Header$1(props) {
             return (jsxs("div", { "data-col": id, className: classNames("i-datagrid-cell", {
                     "i-datagrid-has-sorter": sorter,
                     "i-datagrid-cell-fixed": fixed,
-                }), style: { ...style, insetBlockStart: 0 }, onClick: (e) => onHeaderClick?.(column, e), children: [renderHeader?.(column, col) ?? (jsx("div", { className: classNames("i-datagrid-cell-content", {
+                }), style: { ...style, insetBlockStart: 0 }, children: [renderHeader?.(column, col) ?? (jsx("div", { className: classNames("i-datagrid-cell-content", {
                             "i-datagrid-cell-content-ellipsis": cellEllipsis,
                         }), children: title || id })), sorter && jsx(Sorter, { type: order }), resizable && (jsx(Resize, { index: col, onWidthChange: onWidthChange }))] }, col));
         }) }));
 }
 
+function VirtualDatagrid(props) {
+    const { virtual, columns, rows, header, sortBy, sortType, height, loading, resizable, striped, cellEllipsis, empty, wrapRef, containerRef, onHeaderClick, onWidthChange, onRowClick, onCellClick, onCellDoubleClick, onScroll, } = props;
+    const headerRef = useRef(null);
+    const headerInnerRef = useRef(null);
+    const listRef = useRef(null);
+    const ro = useResizeObserver();
+    const triggerRef = useRef({ rowCount: -1 });
+    const [viewport, setViewport] = useState({ width: 0, height: 0 });
+    const [contentWidth, setContentWidth] = useState(0);
+    const rafRef = useRef({
+        viewport: 0,
+        contentWidth: 0,
+    });
+    const columnById = useMemo(() => {
+        const map = new Map();
+        columns.forEach((c) => map.set(c.id, c));
+        return map;
+    }, [columns]);
+    const columnIndexById = useMemo(() => {
+        const map = new Map();
+        columns.forEach((c, i) => map.set(c.id, i));
+        return map;
+    }, [columns]);
+    const getVirtualCellStyle = useCallback(({ justify, col, colSpan = 1, }) => {
+        return {
+            "--datagrid-justify": justify,
+            gridColumn: `${col + 1} / span ${colSpan}`,
+            insetInline: `var(--datagrid-cell-inset-${col})`,
+        };
+    }, []);
+    const renderVirtualCell = useCallback(({ column, data, row, col, isHeader, }) => {
+        const { id, fixed, justify, colSpan, render, title, sorter, renderHeader, } = column;
+        const style = {
+            ...getVirtualCellStyle({ justify, col, colSpan }),
+            ...(isHeader ? { insetBlockStart: 0 } : null),
+        };
+        const order = isHeader && sortBy === id ? sortType : "";
+        return (jsxs("div", { "data-col": id, className: classNames("i-datagrid-cell", {
+                [`i-datagrid-cell-fixed-${fixed}`]: fixed,
+                "i-datagrid-has-sorter": isHeader && sorter,
+            }), style: style, children: [isHeader
+                    ? (renderHeader?.(column, col) ?? (jsx("div", { className: classNames("i-datagrid-cell-content", {
+                            "i-datagrid-cell-content-ellipsis": cellEllipsis,
+                        }), children: title || id })))
+                    : (render?.(data?.[id], data, row, col) ?? (jsx("div", { className: classNames("i-datagrid-cell-content", {
+                            "i-datagrid-cell-content-ellipsis": cellEllipsis,
+                        }), children: data?.[id] }))), isHeader && sorter && jsx(Sorter, { type: order }), isHeader && resizable && (jsx(Resize, { index: col, onWidthChange: onWidthChange }))] }, id));
+    }, [
+        cellEllipsis,
+        getVirtualCellStyle,
+        onWidthChange,
+        resizable,
+        sortBy,
+        sortType,
+    ]);
+    const handleHeaderClick = useCallback((e) => {
+        const el = e.target?.closest?.(".i-datagrid-cell[data-col]");
+        const id = el?.dataset?.col;
+        onHeaderClick(id ? columnById.get(id) : undefined, e);
+    }, [columnById, onHeaderClick]);
+    const handleBodyScroll = useCallback((e) => {
+        const el = e.currentTarget;
+        if (!el)
+            return;
+        if (headerRef.current &&
+            headerRef.current.scrollLeft !== el.scrollLeft) {
+            headerRef.current.scrollLeft = el.scrollLeft;
+        }
+    }, []);
+    const handleReachEnd = useCallback(() => {
+        if (virtual.onReachEnd) {
+            virtual.onReachEnd();
+            return;
+        }
+        onScroll?.(undefined);
+    }, [onScroll, virtual.onReachEnd]);
+    const handleRowsRendered = useCallback((_visible, overscan) => {
+        if (!virtual.hasMore)
+            return;
+        const threshold = virtual.threshold ?? 8;
+        const stopIndex = overscan?.stopIndex ?? -1;
+        if (stopIndex < rows.length - 1 - threshold)
+            return;
+        if (triggerRef.current.rowCount === rows.length)
+            return;
+        triggerRef.current.rowCount = rows.length;
+        handleReachEnd();
+    }, [handleReachEnd, rows.length, virtual.hasMore, virtual.threshold]);
+    const handleHeaderScroll = useCallback((e) => {
+        const el = e.currentTarget;
+        if (!el)
+            return;
+        const listEl = listRef.current?.element;
+        if (listEl && listEl.scrollLeft !== el.scrollLeft) {
+            listEl.scrollLeft = el.scrollLeft;
+        }
+    }, []);
+    const handleBodyClickCapture = useCallback((e, rowData, rowNum) => {
+        if (!onCellClick)
+            return;
+        const el = e.target?.closest?.(".i-datagrid-cell[data-col]");
+        const id = el?.dataset?.col;
+        if (!id)
+            return;
+        const column = columnById.get(id);
+        const col = columnIndexById.get(id);
+        if (!column || col == null)
+            return;
+        onCellClick(rowData, column, rowNum, col, e);
+    }, [columnById, columnIndexById, onCellClick]);
+    const handleBodyDoubleClickCapture = useCallback((e, rowData, rowNum) => {
+        if (!onCellDoubleClick)
+            return;
+        const el = e.target?.closest?.(".i-datagrid-cell[data-col]");
+        const id = el?.dataset?.col;
+        if (!id)
+            return;
+        const column = columnById.get(id);
+        const col = columnIndexById.get(id);
+        if (!column || col == null)
+            return;
+        onCellDoubleClick(rowData, column, rowNum, col, e);
+    }, [columnById, columnIndexById, onCellDoubleClick]);
+    useEffect(() => {
+        const el = wrapRef.current;
+        if (!el)
+            return;
+        const update = () => {
+            if (rafRef.current.viewport)
+                cancelAnimationFrame(rafRef.current.viewport);
+            rafRef.current.viewport = requestAnimationFrame(() => {
+                rafRef.current.viewport = 0;
+                const r = el.getBoundingClientRect();
+                const w = Math.round(r.width);
+                const h = Math.round(r.height);
+                setViewport((prev) => {
+                    if (prev.width === w && prev.height === h)
+                        return prev;
+                    return { width: w, height: h };
+                });
+            });
+        };
+        update();
+        ro.observe?.(el, update);
+        return () => {
+            ro.unobserve?.(el);
+            if (rafRef.current.viewport)
+                cancelAnimationFrame(rafRef.current.viewport);
+            rafRef.current.viewport = 0;
+        };
+    }, [ro, wrapRef]);
+    useEffect(() => {
+        const el = headerInnerRef.current;
+        if (!el)
+            return;
+        const update = () => {
+            if (rafRef.current.contentWidth) {
+                cancelAnimationFrame(rafRef.current.contentWidth);
+            }
+            rafRef.current.contentWidth = requestAnimationFrame(() => {
+                rafRef.current.contentWidth = 0;
+                const w = Math.ceil(el.scrollWidth);
+                setContentWidth((prev) => (prev === w ? prev : w));
+            });
+        };
+        update();
+        ro.observe?.(el, update);
+        return () => {
+            ro.unobserve?.(el);
+            if (rafRef.current.contentWidth) {
+                cancelAnimationFrame(rafRef.current.contentWidth);
+            }
+            rafRef.current.contentWidth = 0;
+        };
+    }, [ro]);
+    useEffect(() => {
+        triggerRef.current.rowCount = -1;
+    }, [rows.length, virtual.hasMore]);
+    useEffect(() => {
+        if (!loading)
+            return;
+        const listEl = listRef.current?.element;
+        listEl?.scrollTo({ top: 0, left: 0 });
+        headerRef.current?.scrollTo({ top: 0, left: 0 });
+    }, [loading]);
+    const listHeight = Math.max(0, (typeof height === "number" ? height : viewport.height || 360) -
+        (header ? virtual.rowHeight : 0));
+    const hasVerticalScrollbar = rows.length * virtual.rowHeight > listHeight + 1;
+    const scrollbarSize = hasVerticalScrollbar ? getScrollbarSize() : 0;
+    const measuredContentWidth = Math.max(contentWidth, viewport.width || 0);
+    const contentWidthPx = measuredContentWidth
+        ? `${measuredContentWidth}px`
+        : "fit-content";
+    const headerCells = useMemo(() => columns.map((c, col) => renderVirtualCell({
+        column: c,
+        row: 0,
+        col,
+        isHeader: true,
+    })), [columns, renderVirtualCell]);
+    const headerInnerStyle = useMemo(() => ({
+        display: "grid",
+        gridTemplateColumns: "var(--grid-template-columns)",
+        height: virtual.rowHeight,
+        width: contentWidthPx,
+        minWidth: "100%",
+    }), [contentWidthPx, virtual.rowHeight]);
+    const listStyle = useMemo(() => ({
+        height: listHeight,
+        width: "100%",
+        overflow: "auto",
+    }), [listHeight]);
+    const headerWrapStyle = useMemo(() => scrollbarSize > 0
+        ? {
+            paddingRight: scrollbarSize,
+            boxSizing: "content-box",
+        }
+        : undefined, [scrollbarSize]);
+    const loaderNode = useMemo(() => virtual.loader ?? jsx(Loading, { className: 'my-12' }), [virtual.loader]);
+    const rowComponent = useCallback(({ index, style: itemStyle }) => {
+        if (index >= rows.length) {
+            return (jsx("div", { style: {
+                    ...itemStyle,
+                    width: contentWidthPx,
+                    minWidth: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, children: loaderNode }));
+        }
+        const rowData = rows[index];
+        const rowNum = index + (header ? 1 : 0);
+        const bg = striped && index % 2 === 0 ? "var(--background-1)" : undefined;
+        return (jsx("div", { style: {
+                ...itemStyle,
+                width: contentWidthPx,
+                minWidth: "100%",
+                display: "grid",
+                gridTemplateColumns: "var(--grid-template-columns)",
+                height: virtual.rowHeight,
+                "--datagrid-cell-background": bg,
+            }, className: 'i-datagrid-row', onClickCapture: (e) => handleBodyClickCapture(e, rowData, rowNum), onDoubleClickCapture: (e) => handleBodyDoubleClickCapture(e, rowData, rowNum), onClick: () => onRowClick?.(rowData, rowNum), children: columns.map((c, col) => renderVirtualCell({
+                column: c,
+                data: rowData,
+                row: rowNum,
+                col,
+            })) }));
+    }, [
+        columns,
+        contentWidthPx,
+        handleBodyClickCapture,
+        handleBodyDoubleClickCapture,
+        header,
+        loaderNode,
+        onRowClick,
+        renderVirtualCell,
+        rows,
+        striped,
+        virtual.rowHeight,
+    ]);
+    return (jsxs("div", { ref: containerRef, className: classNames("i-datagrid", {
+            "i-datagrid-loading": loading,
+        }), style: { display: "block", width: "100%", maxWidth: "100%" }, children: [header && (jsx("div", { ref: headerRef, className: 'i-datagrid-virtual-header', onScroll: handleHeaderScroll, style: headerWrapStyle, children: jsx("div", { ref: headerInnerRef, className: 'i-datagrid-header i-datagrid-row', style: headerInnerStyle, onClick: handleHeaderClick, children: headerCells }) })), jsx(List$2, { listRef: listRef, rowCount: rows.length + (virtual.hasMore ? 1 : 0), rowHeight: virtual.rowHeight, overscanCount: Math.max(3, virtual.threshold ?? 8), rowProps: {}, style: listStyle, onScroll: handleBodyScroll, onRowsRendered: handleRowsRendered, rowComponent: rowComponent }), rows.length < 1 && !virtual.hasMore && empty] }));
+}
+
 const Datagrid = (props) => {
-    const { data = [], columns = [], border, striped, header = true, resizable, cellPadding = ".5em", cellEllipsis, empty = jsx(Empty, {}), loading, height = "unset", style, className, renderLoading = () => (jsx(Loading, { size: '1.5em', className: 'color-3', absolute: true })), onCellClick, onRowClick, onCellDoubleClick, onHeaderClick, onSort, onScroll, onResize, } = props;
+    const { data = [], columns = [], border, striped, header = true, resizable, cellPadding = ".5em", cellEllipsis, empty = jsx(Empty, {}), loading, height = "unset", style, className, rowKey, virtual, renderLoading = () => (jsx(Loading, { size: '1.5em', className: 'color-3', absolute: true })), onCellClick, onRowClick, onCellDoubleClick, onHeaderClick, onSort, onScroll, onResize, } = props;
     const container = useRef(null);
+    const wrapRef = useRef(null);
     const state = useReactive({
         rows: data,
         widths: columns.map((col) => col.width ?? "min-content"),
         sortBy: "",
         sortType: "",
     });
+    const previewRef = useRef({ index: -1, width: -1, template: "" });
+    useEffect(() => {
+        const next = columns.map((col, i) => {
+            if (col.width != null)
+                return col.width;
+            return state.widths[i] ?? "min-content";
+        });
+        let changed = next.length !== state.widths.length;
+        if (!changed) {
+            for (let i = 0; i < next.length; i++) {
+                if (next[i] !== state.widths[i]) {
+                    changed = true;
+                    break;
+                }
+            }
+        }
+        if (changed)
+            state.widths = next;
+    }, [columns, state]);
     const styles = useMemo(() => {
         const { widths } = state;
         const o = {
             ...style,
-            "--grid-template-columns": widths
-                .map((w) => {
-                return typeof w === "number" ? `${w}px` : w;
-            })
-                .join(" "),
+            "--grid-template-columns": buildGridTemplateColumns(widths),
         };
         if (!resizable)
             return o;
-        const fws = columns.map((col, i) => {
-            const { fixed } = col;
-            if (!fixed)
-                return 0;
-            return widths[i];
-        });
-        columns.map((col, i) => {
-            const { fixed } = col;
-            if (!fixed)
+        const cssWidths = buildCssWidths(widths);
+        applyFixedInsets((k, v) => {
+            o[k] = v;
+        }, columns, cssWidths);
+        return o;
+    }, [columns, resizable, state.widths, style]);
+    const handleWidthChange = useCallback((i, w, phase = "commit") => {
+        if (!resizable)
+            return;
+        if (phase === "preview") {
+            const el = wrapRef.current;
+            if (!el)
+                return;
+            if (previewRef.current.index === i &&
+                previewRef.current.width === w) {
                 return;
-            if (i === 0) {
-                o[`--datagrid-cell-inset-0`] = 0;
             }
-            else if (i === fws.length - 1) {
-                o[`--datagrid-cell-inset-${fws.length - 1}`] = "auto 0";
+            const template = buildGridTemplateColumns(state.widths, i, w);
+            if (previewRef.current.template !== template) {
+                el.style.setProperty("--grid-template-columns", template);
+                const cssWidths = buildCssWidths(state.widths, i, w);
+                applyFixedInsets((k, v) => el.style.setProperty(k, v), columns, cssWidths);
+                previewRef.current.template = template;
             }
-            else {
-                const isLeft = fixed === "left";
-                const before = isLeft ? fws.slice(0, i) : fws.slice(i + 1);
-                const sum = before.reduce((pre, cur) => pre + cur) + "px";
-                const result = isLeft ? `${sum} auto` : `auto ${sum}`;
-                o[`--datagrid-cell-inset-${i}`] = result;
-            }
-        });
-        return o;
-    }, [state.widths, resizable]);
-    const handleWidthChange = (i, w) => {
-        if (!resizable)
+            previewRef.current.index = i;
+            previewRef.current.width = w;
             return;
-        const [...ws] = state.widths;
-        ws[i] = w;
-        state.widths = ws;
+        }
+        previewRef.current.index = -1;
+        previewRef.current.width = -1;
+        previewRef.current.template = "";
+        if (state.widths[i] === w)
+            return;
+        const next = [...state.widths];
+        next[i] = w;
+        state.widths = next;
         onResize?.(columns[i], w);
-    };
-    const handleHeaderClick = (column, e) => {
+    }, [columns, onResize, resizable, state, wrapRef]);
+    const handleHeaderClick = useCallback((column, e) => {
         if (column?.sorter) {
             const [sortBy, sortType] = getNextSorter(state.sortBy, state.sortType, column.id);
             Object.assign(state, {
@@ -1139,7 +1550,7 @@ const Datagrid = (props) => {
             onSort?.(sortBy, sortType);
         }
         onHeaderClick?.(column, e);
-    };
+    }, [onHeaderClick, onSort, state]);
     const rows = useMemo(() => {
         const { sortBy, sortType } = state;
         if (sortBy && !onSort) {
@@ -1152,28 +1563,104 @@ const Datagrid = (props) => {
         }
         return data;
     }, [data, columns, state.sortBy, state.sortType]);
+    const useVirtual = useMemo(() => {
+        if (!virtual)
+            return false;
+        const rowHeight = virtual.rowHeight;
+        return !!rowHeight && rowHeight > 0;
+    }, [virtual]);
     useEffect(() => {
+        if (!resizable)
+            return;
         if (!container.current)
             return;
-        const { current: div } = container;
-        const tds = div.querySelector(".i-datagrid-row")?.children;
-        if (!tds?.length)
+        if (!columns.some((col, i) => col.width == null && typeof state.widths[i] !== "number")) {
             return;
-        state.widths = Array.from(tds).map((node) => node.offsetWidth);
-    }, [columns, resizable]);
+        }
+        let rafId = null;
+        let tries = 0;
+        const run = () => {
+            rafId = null;
+            const div = container.current;
+            if (!div)
+                return;
+            const headerRow = div.querySelector(".i-datagrid-header.i-datagrid-row");
+            const bodyRow = div.querySelector(".i-datagrid-row:not(.i-datagrid-header)");
+            const headerCells = headerRow ? Array.from(headerRow.children) : [];
+            const bodyCells = bodyRow ? Array.from(bodyRow.children) : [];
+            const cellCount = Math.max(headerCells.length, bodyCells.length);
+            if (cellCount < 1) {
+                tries++;
+                if (tries < 10)
+                    rafId = requestAnimationFrame(run);
+                return;
+            }
+            const measured = new Array(cellCount).fill(null);
+            for (let i = 0; i < cellCount; i++) {
+                const hw = headerCells[i]
+                    ?.offsetWidth;
+                const bw = bodyCells[i]
+                    ?.offsetWidth;
+                const w = Math.max(hw ?? 0, bw ?? 0);
+                measured[i] = w > 0 ? w : null;
+            }
+            const next = columns.map((col, i) => {
+                if (col.width != null)
+                    return col.width;
+                const cur = state.widths[i];
+                if (typeof cur === "number")
+                    return cur;
+                return measured[i] ?? cur ?? "min-content";
+            });
+            let changed = next.length !== state.widths.length;
+            if (!changed) {
+                for (let i = 0; i < next.length; i++) {
+                    if (next[i] !== state.widths[i]) {
+                        changed = true;
+                        break;
+                    }
+                }
+            }
+            if (changed)
+                state.widths = next;
+        };
+        rafId = requestAnimationFrame(run);
+        return () => {
+            if (rafId != null)
+                cancelAnimationFrame(rafId);
+        };
+    }, [columns, resizable, state, useVirtual]);
     useEffect(() => {
-        loading && container.current?.scrollTo({ top: 0, left: 0 });
-    }, [loading]);
-    const mergedStyle = {
+        if (!loading)
+            return;
+        if (useVirtual)
+            return;
+        container.current?.scrollTo({ top: 0, left: 0 });
+    }, [loading, useVirtual]);
+    const mergedStyle = useMemo(() => ({
         "--cell-padding": cellPadding,
         ...styles,
-    };
-    return (jsxs("div", { style: { maxHeight: height, ...mergedStyle }, className: classNames("i-datagrid-container", className, {
+    }), [cellPadding, styles]);
+    const getRowKey = useMemo(() => {
+        if (typeof rowKey === "function")
+            return rowKey;
+        if (typeof rowKey === "string") {
+            return (row) => row?.[rowKey];
+        }
+        return (_row, index) => index;
+    }, [rowKey]);
+    return (jsxs("div", { ref: wrapRef, style: {
+            maxHeight: height,
+            ...(useVirtual
+                ? { overflowX: "visible", overflowY: "hidden" }
+                : null),
+            ...mergedStyle,
+        }, className: classNames("i-datagrid-container", className, {
             "i-datagrid-bordered": border,
             "i-datagrid-striped": striped,
-        }), children: [jsxs("div", { ref: container, className: classNames("i-datagrid", {
+        }), children: [useVirtual && virtual ? (jsx(VirtualDatagrid, { virtual: virtual, columns: columns, rows: rows, header: header, sortBy: state.sortBy, sortType: state.sortType, height: height, loading: loading, resizable: resizable, striped: striped, cellEllipsis: cellEllipsis, empty: empty, wrapRef: wrapRef, containerRef: container, getRowKey: getRowKey, onHeaderClick: handleHeaderClick, onWidthChange: handleWidthChange, onRowClick: onRowClick, onCellClick: onCellClick, onCellDoubleClick: onCellDoubleClick, onScroll: onScroll })) : (jsxs("div", { ref: container, className: classNames("i-datagrid", {
                     "i-datagrid-loading": loading,
-                }), onWheel: onScroll, children: [header && (jsx(Header$1, { columns: columns, resizable: resizable, sortType: state.sortType, sortBy: state.sortBy, cellEllipsis: cellEllipsis, onWidthChange: handleWidthChange, onHeaderClick: handleHeaderClick })), rows.map((row, i) => (jsx(Row, { row: i + (header ? 1 : 0), data: row, cellEllipsis: cellEllipsis, columns: columns, onCellClick: onCellClick, onRowClick: onRowClick, onCellDoubleClick: onCellDoubleClick }, i))), rows.length < 1 && empty] }), loading && renderLoading()] }));
+                }), onWheel: onScroll, children: [header && (jsx(Header$1, { columns: columns, resizable: resizable, sortType: state.sortType, sortBy: state.sortBy, cellEllipsis: cellEllipsis, onWidthChange: handleWidthChange, onHeaderClick: handleHeaderClick })), rows.map((row, i) => (jsx(Row, { row: i + (header ? 1 : 0), data: row, cellEllipsis: cellEllipsis, columns: columns, onCellClick: onCellClick, onRowClick: onRowClick, onCellDoubleClick: onCellDoubleClick }, getRowKey(row, i) ?? i))), rows.length < 1 && empty] })), loading && renderLoading()] }));
 };
 
 const Description = (props) => {
@@ -2209,6 +2696,10 @@ const Editor = (props) => {
         setMemtionKeyword("");
         setMemtionActiveIndex(0);
     };
+    const syncEditorState = () => {
+        selectionRef.current = null;
+        hideMemtion();
+    };
     const insertMemtion = (option) => {
         const replaceRange = getMemtionReplaceRange(memtionTriggerRangeRef.current, selectionRef.current);
         const range = insertMemtionOption({
@@ -2295,6 +2786,7 @@ const Editor = (props) => {
         if (getEditorValue(true) === nextValue)
             return;
         setEditorValue(nextValue);
+        syncEditorState();
         syncHeight();
     }, [autosize, mode, value]);
     useEffect(() => {
@@ -4507,7 +4999,7 @@ function RadioItem(props) {
 }
 
 function Radio(props) {
-    const { label, name, options, value, type = "default", status = "normal", message, optionInline = true, labelInline, disabled, required, className, renderItem, onChange, } = props;
+    const { label, name, options, value, type = "default", status = "normal", message, optionInline = true, labelInline, disabled, required, className, style, renderItem, onChange, } = props;
     const [selectedValue, setSelectedValue] = useState(value);
     const formattedOptions = useMemo(() => formatOption(options), [options]);
     const handleChange = (value, e) => {
@@ -4520,7 +5012,7 @@ function Radio(props) {
     return (jsxs("div", { className: classNames("i-radio i-input-label", {
             [`i-radio-${status}`]: status !== "normal",
             "i-input-inline": labelInline,
-        }, className), children: [label && (jsxs("span", { className: 'i-input-label-text', children: [required && jsx("span", { className: 'error', children: "*" }), label, message && jsx("p", { className: 'i-radio-message', children: message })] })), jsx("div", { className: classNames("i-radio-options", {
+        }, className), style: style, children: [label && (jsxs("span", { className: "i-input-label-text", children: [required && jsx("span", { className: "error", children: "*" }), label, message && jsx("p", { className: "i-radio-message", children: message })] })), jsx("div", { className: classNames("i-radio-options", {
                     "i-options-block": !optionInline,
                     "i-radio-options-button": type === "button",
                 }), children: formattedOptions.map((option) => {