@ioca/react 1.5.9 → 1.5.10

package/lib/cjs/components/datagrid/datagrid.js

@@ -3,74 +3,96 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var hooks = require('../../js/hooks.js');
 var classNames = require('classnames');
 var react = require('react');
+var hooks = require('../../js/hooks.js');
 var utils = require('../../js/utils.js');
 var loading = require('../loading/loading.js');
 var index = require('../utils/empty/index.js');
+var helper = require('./helper.js');
 var row = require('./row.js');
+var virtual = require('./virtual.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
 var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
 
 const Datagrid = (props) => {
-    const { data = [], columns = [], border, striped, header = true, resizable, cellPadding = ".5em", cellEllipsis, empty = jsxRuntime.jsx(index.default, {}), loading: loading$1, height = "unset", style, className, renderLoading = () => (jsxRuntime.jsx(loading.default, { 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 = jsxRuntime.jsx(index.default, {}), loading: loading$1, height = "unset", style, className, rowKey, virtual: virtual$1, renderLoading = () => (jsxRuntime.jsx(loading.default, { size: '1.5em', className: 'color-3', absolute: true })), onCellClick, onRowClick, onCellDoubleClick, onHeaderClick, onSort, onScroll, onResize, } = props;
     const container = react.useRef(null);
+    const wrapRef = react.useRef(null);
     const state = hooks.useReactive({
         rows: data,
         widths: columns.map((col) => col.width ?? "min-content"),
         sortBy: "",
         sortType: "",
     });
+    const previewRef = react.useRef({ index: -1, width: -1, template: "" });
+    react.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 = react.useMemo(() => {
         const { widths } = state;
         const o = {
             ...style,
-            "--grid-template-columns": widths
-                .map((w) => {
-                return typeof w === "number" ? `${w}px` : w;
-            })
-                .join(" "),
+            "--grid-template-columns": helper.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 = helper.buildCssWidths(widths);
+        helper.applyFixedInsets((k, v) => {
+            o[k] = v;
+        }, columns, cssWidths);
+        return o;
+    }, [columns, resizable, state.widths, style]);
+    const handleWidthChange = react.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";
             }
-            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;
+            const template = helper.buildGridTemplateColumns(state.widths, i, w);
+            if (previewRef.current.template !== template) {
+                el.style.setProperty("--grid-template-columns", template);
+                const cssWidths = helper.buildCssWidths(state.widths, i, w);
+                helper.applyFixedInsets((k, v) => el.style.setProperty(k, v), columns, cssWidths);
+                previewRef.current.template = template;
             }
-        });
-        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 = react.useCallback((column, e) => {
         if (column?.sorter) {
             const [sortBy, sortType] = utils.getNextSorter(state.sortBy, state.sortType, column.id);
             Object.assign(state, {
@@ -80,7 +102,7 @@ const Datagrid = (props) => {
             onSort?.(sortBy, sortType);
         }
         onHeaderClick?.(column, e);
-    };
+    }, [onHeaderClick, onSort, state]);
     const rows = react.useMemo(() => {
         const { sortBy, sortType } = state;
         if (sortBy && !onSort) {
@@ -93,28 +115,104 @@ const Datagrid = (props) => {
         }
         return data;
     }, [data, columns, state.sortBy, state.sortType]);
+    const useVirtual = react.useMemo(() => {
+        if (!virtual$1)
+            return false;
+        const rowHeight = virtual$1.rowHeight;
+        return !!rowHeight && rowHeight > 0;
+    }, [virtual$1]);
     react.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]);
     react.useEffect(() => {
-        loading$1 && container.current?.scrollTo({ top: 0, left: 0 });
-    }, [loading$1]);
-    const mergedStyle = {
+        if (!loading$1)
+            return;
+        if (useVirtual)
+            return;
+        container.current?.scrollTo({ top: 0, left: 0 });
+    }, [loading$1, useVirtual]);
+    const mergedStyle = react.useMemo(() => ({
         "--cell-padding": cellPadding,
         ...styles,
-    };
-    return (jsxRuntime.jsxs("div", { style: { maxHeight: height, ...mergedStyle }, className: classNames__default("i-datagrid-container", className, {
+    }), [cellPadding, styles]);
+    const getRowKey = react.useMemo(() => {
+        if (typeof rowKey === "function")
+            return rowKey;
+        if (typeof rowKey === "string") {
+            return (row) => row?.[rowKey];
+        }
+        return (_row, index) => index;
+    }, [rowKey]);
+    return (jsxRuntime.jsxs("div", { ref: wrapRef, style: {
+            maxHeight: height,
+            ...(useVirtual
+                ? { overflowX: "visible", overflowY: "hidden" }
+                : null),
+            ...mergedStyle,
+        }, className: classNames__default("i-datagrid-container", className, {
             "i-datagrid-bordered": border,
             "i-datagrid-striped": striped,
-        }), children: [jsxRuntime.jsxs("div", { ref: container, className: classNames__default("i-datagrid", {
+        }), children: [useVirtual && virtual$1 ? (jsxRuntime.jsx(virtual.default, { virtual: virtual$1, columns: columns, rows: rows, header: header, sortBy: state.sortBy, sortType: state.sortType, height: height, loading: loading$1, 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 })) : (jsxRuntime.jsxs("div", { ref: container, className: classNames__default("i-datagrid", {
                     "i-datagrid-loading": loading$1,
-                }), onWheel: onScroll, children: [header && (jsxRuntime.jsx(row.Header, { columns: columns, resizable: resizable, sortType: state.sortType, sortBy: state.sortBy, cellEllipsis: cellEllipsis, onWidthChange: handleWidthChange, onHeaderClick: handleHeaderClick })), rows.map((row$1, i) => (jsxRuntime.jsx(row.default, { row: i + (header ? 1 : 0), data: row$1, cellEllipsis: cellEllipsis, columns: columns, onCellClick: onCellClick, onRowClick: onRowClick, onCellDoubleClick: onCellDoubleClick }, i))), rows.length < 1 && empty] }), loading$1 && renderLoading()] }));
+                }), onWheel: onScroll, children: [header && (jsxRuntime.jsx(row.Header, { columns: columns, resizable: resizable, sortType: state.sortType, sortBy: state.sortBy, cellEllipsis: cellEllipsis, onWidthChange: handleWidthChange, onHeaderClick: handleHeaderClick })), rows.map((row$1, i) => (jsxRuntime.jsx(row.default, { row: i + (header ? 1 : 0), data: row$1, cellEllipsis: cellEllipsis, columns: columns, onCellClick: onCellClick, onRowClick: onRowClick, onCellDoubleClick: onCellDoubleClick }, getRowKey(row$1, i) ?? i))), rows.length < 1 && empty] })), loading$1 && renderLoading()] }));
 };
 
 exports.default = Datagrid;

package/lib/cjs/components/datagrid/datagrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid.js","sources":["../../../../packages/components/datagrid/datagrid.tsx"],"sourcesContent":["import { useReactive } from \"../../js/hooks\";\r\nimport classNames from \"classnames\";\r\nimport { CSSProperties, MouseEvent, useEffect, useMemo, useRef } from \"react\";\r\nimport { getNextSorter } from \"../../js/utils\";\r\nimport Loading from \"../loading\";\r\nimport Empty from \"../utils/empty\";\r\nimport \"./index.css\";\r\nimport Row, { Header } from \"./row\";\r\nimport type { IColumn, IData, IDatagrid, TDatagridState } from \"./type\";\r\n\r\nconst Datagrid = (props: IDatagrid) => {\r\n\tconst {\r\n\t\tdata = [],\r\n\t\tcolumns = [],\r\n\t\tborder,\r\n\t\tstriped,\r\n\t\theader = true,\r\n\t\tresizable,\r\n\t\tcellPadding = \".5em\",\r\n\t\tcellEllipsis,\r\n\t\tempty = <Empty />,\r\n\t\tloading,\r\n\t\theight = \"unset\",\r\n\t\tstyle,\r\n\t\tclassName,\r\n\t\trenderLoading = () => (\r\n\t\t\t<Loading size='1.5em' className='color-3' absolute />\r\n\t\t),\r\n\t\tonCellClick,\r\n\t\tonRowClick,\r\n\t\tonCellDoubleClick,\r\n\t\tonHeaderClick,\r\n\t\tonSort,\r\n\t\tonScroll,\r\n\t\tonResize,\r\n\t} = props;\r\n\r\n\tconst container = useRef<HTMLDivElement>(null);\r\n\tconst state = useReactive<TDatagridState>({\r\n\t\trows: data,\r\n\t\twidths: columns.map((col) => col.width ?? \"min-content\"),\r\n\t\tsortBy: \"\",\r\n\t\tsortType: \"\",\r\n\t});\r\n\r\n\tconst styles = useMemo(() => {\r\n\t\tconst { widths } = state;\r\n\r\n\t\tconst o = {\r\n\t\t\t...style,\r\n\t\t\t\"--grid-template-columns\": widths\r\n\t\t\t\t.map((w) => {\r\n\t\t\t\t\treturn typeof w === \"number\" ? `${w}px` : w;\r\n\t\t\t\t})\r\n\t\t\t\t.join(\" \"),\r\n\t\t};\r\n\r\n\t\tif (!resizable) return o;\r\n\r\n\t\tconst fws = columns.map((col, i) => {\r\n\t\t\tconst { fixed } = col;\r\n\t\t\tif (!fixed) return 0;\r\n\t\t\treturn widths[i] as number;\r\n\t\t});\r\n\r\n\t\tcolumns.map((col, i) => {\r\n\t\t\tconst { fixed } = col;\r\n\t\t\tif (!fixed) return;\r\n\t\t\tif (i === 0) {\r\n\t\t\t\to[`--datagrid-cell-inset-0`] = 0;\r\n\t\t\t} else if (i === fws.length - 1) {\r\n\t\t\t\to[`--datagrid-cell-inset-${fws.length - 1}`] = \"auto 0\";\r\n\t\t\t} else {\r\n\t\t\t\tconst isLeft = fixed === \"left\";\r\n\t\t\t\tconst before = isLeft ? fws.slice(0, i) : fws.slice(i + 1);\r\n\t\t\t\tconst sum = before.reduce((pre, cur) => pre + cur) + \"px\";\r\n\t\t\t\tconst result = isLeft ? `${sum} auto` : `auto ${sum}`;\r\n\t\t\t\to[`--datagrid-cell-inset-${i}`] = result;\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\treturn o;\r\n\t}, [state.widths, resizable]);\r\n\r\n\tconst handleWidthChange = (i: number, w: number) => {\r\n\t\tif (!resizable) return;\r\n\r\n\t\tconst [...ws] = state.widths;\r\n\t\tws[i] = w;\r\n\t\tstate.widths = ws;\r\n\t\tonResize?.(columns[i], w);\r\n\t};\r\n\r\n\tconst handleHeaderClick = (column?: IColumn, e?: MouseEvent) => {\r\n\t\tif (column?.sorter) {\r\n\t\t\tconst [sortBy, sortType] = getNextSorter(\r\n\t\t\t\tstate.sortBy,\r\n\t\t\t\tstate.sortType,\r\n\t\t\t\tcolumn.id\r\n\t\t\t);\r\n\r\n\t\t\tObject.assign(state, {\r\n\t\t\t\tsortBy,\r\n\t\t\t\tsortType,\r\n\t\t\t});\r\n\r\n\t\t\tonSort?.(sortBy, sortType);\r\n\t\t}\r\n\r\n\t\tonHeaderClick?.(column, e);\r\n\t};\r\n\r\n\tconst rows = useMemo(() => {\r\n\t\tconst { sortBy, sortType } = state;\r\n\r\n\t\tif (sortBy && !onSort) {\r\n\t\t\tconst sorter = columns.find((col) => col.id === sortBy)?.sorter;\r\n\t\t\tconst sortFn =\r\n\t\t\t\ttypeof sorter === \"function\"\r\n\t\t\t\t\t? sorter\r\n\t\t\t\t\t: (a: IData, b: IData) => b[sortBy] - a[sortBy];\r\n\t\t\tconst sorted = [...data].sort(sortFn);\r\n\r\n\t\t\treturn sortType === \"desc\" ? sorted : sorted.reverse();\r\n\t\t}\r\n\r\n\t\treturn data;\r\n\t}, [data, columns, state.sortBy, state.sortType]);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!container.current) return;\r\n\t\tconst { current: div } = container;\r\n\t\tconst tds = div.querySelector(\".i-datagrid-row\")?.children;\r\n\t\tif (!tds?.length) return;\r\n\t\tstate.widths = Array.from(tds).map((node: any) => node.offsetWidth);\r\n\t}, [columns, resizable]);\r\n\r\n\tuseEffect(() => {\r\n\t\tloading && container.current?.scrollTo({ top: 0, left: 0 });\r\n\t}, [loading]);\r\n\r\n\tconst mergedStyle = {\r\n\t\t\"--cell-padding\": cellPadding,\r\n\t\t...styles,\r\n\t} as CSSProperties;\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tstyle={{ maxHeight: height, ...mergedStyle }}\r\n\t\t\tclassName={classNames(\"i-datagrid-container\", className, {\r\n\t\t\t\t\"i-datagrid-bordered\": border,\r\n\t\t\t\t\"i-datagrid-striped\": striped,\r\n\t\t\t})}\r\n\t\t>\r\n\t\t\t<div\r\n\t\t\t\tref={container}\r\n\t\t\t\tclassName={classNames(\"i-datagrid\", {\r\n\t\t\t\t\t\"i-datagrid-loading\": loading,\r\n\t\t\t\t})}\r\n\t\t\t\tonWheel={onScroll}\r\n\t\t\t>\r\n\t\t\t\t{header && (\r\n\t\t\t\t\t<Header\r\n\t\t\t\t\t\tcolumns={columns}\r\n\t\t\t\t\t\tresizable={resizable}\r\n\t\t\t\t\t\tsortType={state.sortType}\r\n\t\t\t\t\t\tsortBy={state.sortBy}\r\n\t\t\t\t\t\tcellEllipsis={cellEllipsis}\r\n\t\t\t\t\t\tonWidthChange={handleWidthChange}\r\n\t\t\t\t\t\tonHeaderClick={handleHeaderClick}\r\n\t\t\t\t\t/>\r\n\t\t\t\t)}\r\n\r\n\t\t\t\t{rows.map((row, i) => (\r\n\t\t\t\t\t<Row\r\n\t\t\t\t\t\tkey={i}\r\n\t\t\t\t\t\trow={i + (header ? 1 : 0)}\r\n\t\t\t\t\t\tdata={row}\r\n\t\t\t\t\t\tcellEllipsis={cellEllipsis}\r\n\t\t\t\t\t\tcolumns={columns}\r\n\t\t\t\t\t\tonCellClick={onCellClick}\r\n\t\t\t\t\t\tonRowClick={onRowClick}\r\n\t\t\t\t\t\tonCellDoubleClick={onCellDoubleClick}\r\n\t\t\t\t\t/>\r\n\t\t\t\t))}\r\n\r\n\t\t\t\t{rows.length < 1 && empty}\r\n\t\t\t</div>\r\n\r\n\t\t\t{loading && renderLoading()}\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default Datagrid;\r\n"],"names":["_jsx","Empty","loading","Loading","useRef","useReactive","useMemo","getNextSorter","useEffect","_jsxs","classNames","Header","row","Row"],"mappings":"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"}
+{"version":3,"file":"datagrid.js","sources":["../../../../packages/components/datagrid/datagrid.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport {\n\tCSSProperties,\n\tKey,\n\tMouseEvent,\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n} from \"react\";\nimport { useReactive } from \"../../js/hooks\";\nimport { getNextSorter } from \"../../js/utils\";\nimport Loading from \"../loading\";\nimport Empty from \"../utils/empty\";\nimport {\n\tapplyFixedInsets,\n\tbuildCssWidths,\n\tbuildGridTemplateColumns,\n} from \"./helper\";\nimport \"./index.css\";\nimport Row, { Header } from \"./row\";\nimport type { IColumn, IData, IDatagrid, TDatagridState } from \"./type\";\nimport VirtualDatagrid from \"./virtual\";\n\nconst Datagrid = (props: IDatagrid) => {\n\tconst {\n\t\tdata = [],\n\t\tcolumns = [],\n\t\tborder,\n\t\tstriped,\n\t\theader = true,\n\t\tresizable,\n\t\tcellPadding = \".5em\",\n\t\tcellEllipsis,\n\t\tempty = <Empty />,\n\t\tloading,\n\t\theight = \"unset\",\n\t\tstyle,\n\t\tclassName,\n\t\trowKey,\n\t\tvirtual,\n\t\trenderLoading = () => (\n\t\t\t<Loading size='1.5em' className='color-3' absolute />\n\t\t),\n\t\tonCellClick,\n\t\tonRowClick,\n\t\tonCellDoubleClick,\n\t\tonHeaderClick,\n\t\tonSort,\n\t\tonScroll,\n\t\tonResize,\n\t} = props;\n\n\tconst container = useRef<HTMLDivElement>(null);\n\tconst wrapRef = useRef<HTMLDivElement>(null);\n\n\tconst state = useReactive<TDatagridState>({\n\t\trows: data,\n\t\twidths: columns.map((col) => col.width ?? \"min-content\"),\n\t\tsortBy: \"\",\n\t\tsortType: \"\",\n\t});\n\tconst previewRef = useRef({ index: -1, width: -1, template: \"\" });\n\n\tuseEffect(() => {\n\t\tconst next = columns.map((col, i) => {\n\t\t\tif (col.width != null) return col.width;\n\t\t\treturn state.widths[i] ?? \"min-content\";\n\t\t});\n\n\t\tlet changed = next.length !== state.widths.length;\n\t\tif (!changed) {\n\t\t\tfor (let i = 0; i < next.length; i++) {\n\t\t\t\tif (next[i] !== state.widths[i]) {\n\t\t\t\t\tchanged = true;\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (changed) state.widths = next;\n\t}, [columns, state]);\n\n\tconst styles = useMemo(() => {\n\t\tconst { widths } = state;\n\n\t\tconst o = {\n\t\t\t...style,\n\t\t\t\"--grid-template-columns\": buildGridTemplateColumns(widths),\n\t\t};\n\n\t\tif (!resizable) return o;\n\n\t\tconst cssWidths = buildCssWidths(widths);\n\t\tapplyFixedInsets(\n\t\t\t(k, v) => {\n\t\t\t\t(o as any)[k] = v;\n\t\t\t},\n\t\t\tcolumns,\n\t\t\tcssWidths,\n\t\t);\n\n\t\treturn o;\n\t}, [columns, resizable, state.widths, style]);\n\n\tconst handleWidthChange = useCallback(\n\t\t(i: number, w: number, phase: \"preview\" | \"commit\" = \"commit\") => {\n\t\t\tif (!resizable) return;\n\t\t\tif (phase === \"preview\") {\n\t\t\t\tconst el = wrapRef.current;\n\t\t\t\tif (!el) return;\n\t\t\t\tif (\n\t\t\t\t\tpreviewRef.current.index === i &&\n\t\t\t\t\tpreviewRef.current.width === w\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst template = buildGridTemplateColumns(state.widths, i, w);\n\t\t\t\tif (previewRef.current.template !== template) {\n\t\t\t\t\tel.style.setProperty(\"--grid-template-columns\", template);\n\t\t\t\t\tconst cssWidths = buildCssWidths(state.widths, i, w);\n\t\t\t\t\tapplyFixedInsets(\n\t\t\t\t\t\t(k, v) => el.style.setProperty(k, v),\n\t\t\t\t\t\tcolumns,\n\t\t\t\t\t\tcssWidths,\n\t\t\t\t\t);\n\t\t\t\t\tpreviewRef.current.template = template;\n\t\t\t\t}\n\t\t\t\tpreviewRef.current.index = i;\n\t\t\t\tpreviewRef.current.width = w;\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tpreviewRef.current.index = -1;\n\t\t\tpreviewRef.current.width = -1;\n\t\t\tpreviewRef.current.template = \"\";\n\n\t\t\tif (state.widths[i] === w) return;\n\n\t\t\tconst next = [...state.widths];\n\t\t\tnext[i] = w;\n\t\t\tstate.widths = next;\n\t\t\tonResize?.(columns[i], w);\n\t\t},\n\t\t[columns, onResize, resizable, state, wrapRef],\n\t);\n\n\tconst handleHeaderClick = useCallback(\n\t\t(column?: IColumn, e?: MouseEvent) => {\n\t\t\tif (column?.sorter) {\n\t\t\t\tconst [sortBy, sortType] = getNextSorter(\n\t\t\t\t\tstate.sortBy,\n\t\t\t\t\tstate.sortType,\n\t\t\t\t\tcolumn.id,\n\t\t\t\t);\n\n\t\t\t\tObject.assign(state, {\n\t\t\t\t\tsortBy,\n\t\t\t\t\tsortType,\n\t\t\t\t});\n\n\t\t\t\tonSort?.(sortBy, sortType);\n\t\t\t}\n\n\t\t\tonHeaderClick?.(column, e);\n\t\t},\n\t\t[onHeaderClick, onSort, state],\n\t);\n\n\tconst rows = useMemo(() => {\n\t\tconst { sortBy, sortType } = state;\n\n\t\tif (sortBy && !onSort) {\n\t\t\tconst sorter = columns.find((col) => col.id === sortBy)?.sorter;\n\t\t\tconst sortFn =\n\t\t\t\ttypeof sorter === \"function\"\n\t\t\t\t\t? sorter\n\t\t\t\t\t: (a: IData, b: IData) => b[sortBy] - a[sortBy];\n\t\t\tconst sorted = [...data].sort(sortFn);\n\n\t\t\treturn sortType === \"desc\" ? sorted : sorted.reverse();\n\t\t}\n\n\t\treturn data;\n\t}, [data, columns, state.sortBy, state.sortType]);\n\n\tconst useVirtual = useMemo(() => {\n\t\tif (!virtual) return false;\n\t\tconst rowHeight = virtual.rowHeight;\n\t\treturn !!rowHeight && rowHeight > 0;\n\t}, [virtual]);\n\n\tuseEffect(() => {\n\t\tif (!resizable) return;\n\t\tif (!container.current) return;\n\t\tif (\n\t\t\t!columns.some(\n\t\t\t\t(col, i) =>\n\t\t\t\t\tcol.width == null && typeof state.widths[i] !== \"number\",\n\t\t\t)\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet rafId: number | null = null;\n\t\tlet tries = 0;\n\n\t\tconst run = () => {\n\t\t\trafId = null;\n\t\t\tconst div = container.current;\n\t\t\tif (!div) return;\n\n\t\t\tconst headerRow = div.querySelector(\n\t\t\t\t\".i-datagrid-header.i-datagrid-row\",\n\t\t\t) as HTMLElement | null;\n\t\t\tconst bodyRow = div.querySelector(\n\t\t\t\t\".i-datagrid-row:not(.i-datagrid-header)\",\n\t\t\t) as HTMLElement | null;\n\n\t\t\tconst headerCells = headerRow ? Array.from(headerRow.children) : [];\n\t\t\tconst bodyCells = bodyRow ? Array.from(bodyRow.children) : [];\n\n\t\t\tconst cellCount = Math.max(headerCells.length, bodyCells.length);\n\t\t\tif (cellCount < 1) {\n\t\t\t\ttries++;\n\t\t\t\tif (tries < 10) rafId = requestAnimationFrame(run);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst measured = new Array<number | null>(cellCount).fill(null);\n\t\t\tfor (let i = 0; i < cellCount; i++) {\n\t\t\t\tconst hw = (headerCells[i] as HTMLElement | undefined)\n\t\t\t\t\t?.offsetWidth;\n\t\t\t\tconst bw = (bodyCells[i] as HTMLElement | undefined)\n\t\t\t\t\t?.offsetWidth;\n\t\t\t\tconst w = Math.max(hw ?? 0, bw ?? 0);\n\t\t\t\tmeasured[i] = w > 0 ? w : null;\n\t\t\t}\n\n\t\t\tconst next = columns.map((col, i) => {\n\t\t\t\tif (col.width != null) return col.width;\n\t\t\t\tconst cur = state.widths[i];\n\t\t\t\tif (typeof cur === \"number\") return cur;\n\t\t\t\treturn measured[i] ?? cur ?? \"min-content\";\n\t\t\t});\n\n\t\t\tlet changed = next.length !== state.widths.length;\n\t\t\tif (!changed) {\n\t\t\t\tfor (let i = 0; i < next.length; i++) {\n\t\t\t\t\tif (next[i] !== state.widths[i]) {\n\t\t\t\t\t\tchanged = true;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (changed) state.widths = next;\n\t\t};\n\n\t\trafId = requestAnimationFrame(run);\n\t\treturn () => {\n\t\t\tif (rafId != null) cancelAnimationFrame(rafId);\n\t\t};\n\t}, [columns, resizable, state, useVirtual]);\n\n\tuseEffect(() => {\n\t\tif (!loading) return;\n\t\tif (useVirtual) return;\n\t\tcontainer.current?.scrollTo({ top: 0, left: 0 });\n\t}, [loading, useVirtual]);\n\n\tconst mergedStyle = useMemo(\n\t\t() =>\n\t\t\t({\n\t\t\t\t\"--cell-padding\": cellPadding,\n\t\t\t\t...styles,\n\t\t\t}) as CSSProperties,\n\t\t[cellPadding, styles],\n\t);\n\n\tconst getRowKey = useMemo(() => {\n\t\tif (typeof rowKey === \"function\") return rowKey;\n\t\tif (typeof rowKey === \"string\") {\n\t\t\treturn (row: IData) => row?.[rowKey] as Key;\n\t\t}\n\n\t\treturn (_row: IData, index: number) => index as Key;\n\t}, [rowKey]);\n\n\treturn (\n\t\t<div\n\t\t\tref={wrapRef}\n\t\t\tstyle={{\n\t\t\t\tmaxHeight: height,\n\t\t\t\t...(useVirtual\n\t\t\t\t\t? { overflowX: \"visible\", overflowY: \"hidden\" }\n\t\t\t\t\t: null),\n\t\t\t\t...mergedStyle,\n\t\t\t}}\n\t\t\tclassName={classNames(\"i-datagrid-container\", className, {\n\t\t\t\t\"i-datagrid-bordered\": border,\n\t\t\t\t\"i-datagrid-striped\": striped,\n\t\t\t})}\n\t\t>\n\t\t\t{useVirtual && virtual ? (\n\t\t\t\t<VirtualDatagrid\n\t\t\t\t\tvirtual={virtual}\n\t\t\t\t\tcolumns={columns}\n\t\t\t\t\trows={rows}\n\t\t\t\t\theader={header}\n\t\t\t\t\tsortBy={state.sortBy}\n\t\t\t\t\tsortType={state.sortType}\n\t\t\t\t\theight={height}\n\t\t\t\t\tloading={loading}\n\t\t\t\t\tresizable={resizable}\n\t\t\t\t\tstriped={striped}\n\t\t\t\t\tcellEllipsis={cellEllipsis}\n\t\t\t\t\tempty={empty}\n\t\t\t\t\twrapRef={wrapRef}\n\t\t\t\t\tcontainerRef={container}\n\t\t\t\t\tgetRowKey={getRowKey}\n\t\t\t\t\tonHeaderClick={handleHeaderClick}\n\t\t\t\t\tonWidthChange={handleWidthChange}\n\t\t\t\t\tonRowClick={onRowClick}\n\t\t\t\t\tonCellClick={onCellClick}\n\t\t\t\t\tonCellDoubleClick={onCellDoubleClick}\n\t\t\t\t\tonScroll={onScroll}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<div\n\t\t\t\t\tref={container}\n\t\t\t\t\tclassName={classNames(\"i-datagrid\", {\n\t\t\t\t\t\t\"i-datagrid-loading\": loading,\n\t\t\t\t\t})}\n\t\t\t\t\tonWheel={onScroll}\n\t\t\t\t>\n\t\t\t\t\t{header && (\n\t\t\t\t\t\t<Header\n\t\t\t\t\t\t\tcolumns={columns}\n\t\t\t\t\t\t\tresizable={resizable}\n\t\t\t\t\t\t\tsortType={state.sortType}\n\t\t\t\t\t\t\tsortBy={state.sortBy}\n\t\t\t\t\t\t\tcellEllipsis={cellEllipsis}\n\t\t\t\t\t\t\tonWidthChange={handleWidthChange}\n\t\t\t\t\t\t\tonHeaderClick={handleHeaderClick}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{rows.map((row, i) => (\n\t\t\t\t\t\t<Row\n\t\t\t\t\t\t\tkey={getRowKey(row, i) ?? i}\n\t\t\t\t\t\t\trow={i + (header ? 1 : 0)}\n\t\t\t\t\t\t\tdata={row}\n\t\t\t\t\t\t\tcellEllipsis={cellEllipsis}\n\t\t\t\t\t\t\tcolumns={columns}\n\t\t\t\t\t\t\tonCellClick={onCellClick}\n\t\t\t\t\t\t\tonRowClick={onRowClick}\n\t\t\t\t\t\t\tonCellDoubleClick={onCellDoubleClick}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\n\t\t\t\t\t{rows.length < 1 && empty}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{loading && renderLoading()}\n\t\t</div>\n\t);\n};\n\nexport default Datagrid;\n"],"names":["_jsx","Empty","loading","virtual","Loading","useRef","useReactive","useEffect","useMemo","buildGridTemplateColumns","buildCssWidths","applyFixedInsets","useCallback","getNextSorter","_jsxs","classNames","VirtualDatagrid","Header","row","Row"],"mappings":"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"}

package/lib/cjs/components/datagrid/helper.js

@@ -0,0 +1,83 @@
+'use strict';
+
+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)}`);
+    }
+};
+
+exports.applyFixedInsets = applyFixedInsets;
+exports.buildCssWidths = buildCssWidths;
+exports.buildGridTemplateColumns = buildGridTemplateColumns;
+//# sourceMappingURL=helper.js.map

package/lib/cjs/components/datagrid/helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.js","sources":["../../../../packages/components/datagrid/helper.ts"],"sourcesContent":["import type { IColumn } from \"./type\";\n\nconst lengthRe =\n\t/^-?\\d+(\\.\\d+)?(px|em|rem|%|vw|vh|vmin|vmax|ch|ex|cm|mm|in|pt|pc)$/;\n\nconst isLength = (v: string) => {\n\tif (v === \"0\") return true;\n\tif (v.startsWith(\"var(\") || v.startsWith(\"calc(\")) return true;\n\treturn lengthRe.test(v);\n};\n\nconst sumLengths = (parts: string[]) => {\n\tlet out: string[] | null = null;\n\tfor (let i = 0; i < parts.length; i++) {\n\t\tconst v = parts[i];\n\t\tif (!v || !isLength(v)) continue;\n\t\tif (out == null) out = [v];\n\t\telse out.push(v);\n\t}\n\tif (out == null || out.length < 1) return \"0\";\n\tif (out.length === 1) return out[0];\n\treturn `calc(${out.join(\" + \")})`;\n};\n\nconst toCssWidth = (w: number | string) =>\n\ttypeof w === \"number\" ? `${w}px` : w;\n\nexport const buildGridTemplateColumns = (\n\twidths: (number | string)[],\n\toverrideIndex?: number,\n\toverrideWidth?: number,\n) => {\n\tlet out = \"\";\n\tfor (let i = 0; i < widths.length; i++) {\n\t\tconst w =\n\t\t\ti === overrideIndex && overrideWidth != null\n\t\t\t\t? overrideWidth\n\t\t\t\t: widths[i];\n\t\tout += (i ? \" \" : \"\") + toCssWidth(w);\n\t}\n\treturn out;\n};\n\nexport const buildCssWidths = (\n\twidths: (number | string)[],\n\toverrideIndex?: number,\n\toverrideWidth?: number,\n) => {\n\tconst out = new Array<string>(widths.length);\n\tfor (let i = 0; i < widths.length; i++) {\n\t\tconst w =\n\t\t\ti === overrideIndex && overrideWidth != null\n\t\t\t\t? overrideWidth\n\t\t\t\t: widths[i];\n\t\tout[i] = toCssWidth(w);\n\t}\n\treturn out;\n};\n\nexport const applyFixedInsets = (\n\tsetVar: (name: string, value: string) => void,\n\tcolumns: IColumn[],\n\tcssWidths: string[],\n) => {\n\tfor (let i = 0; i < columns.length; i++) {\n\t\tconst fixed = columns[i]?.fixed;\n\t\tif (!fixed) continue;\n\n\t\tif (fixed === \"left\" && i === 0) {\n\t\t\tsetVar(`--datagrid-cell-inset-0`, \"0\");\n\t\t\tcontinue;\n\t\t}\n\n\t\tif (fixed === \"right\" && i === columns.length - 1) {\n\t\t\tsetVar(`--datagrid-cell-inset-${columns.length - 1}`, \"auto 0\");\n\t\t\tcontinue;\n\t\t}\n\n\t\tif (fixed === \"left\") {\n\t\t\tconst parts: string[] = [];\n\t\t\tfor (let j = 0; j < i; j++) {\n\t\t\t\tif (columns[j]?.fixed === \"left\") parts.push(cssWidths[j]);\n\t\t\t}\n\t\t\tsetVar(`--datagrid-cell-inset-${i}`, `${sumLengths(parts)} auto`);\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst parts: string[] = [];\n\t\tfor (let j = i + 1; j < columns.length; j++) {\n\t\t\tif (columns[j]?.fixed === \"right\") parts.push(cssWidths[j]);\n\t\t}\n\t\tsetVar(`--datagrid-cell-inset-${i}`, `auto ${sumLengths(parts)}`);\n\t}\n};\n"],"names":[],"mappings":"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"}

package/lib/cjs/components/datagrid/resize.js

@@ -3,15 +3,36 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var hooks = require('../../js/hooks.js');
 
-function Resize(props) {
+const Resize = react.memo(function Resize(props) {
     const { index, onWidthChange } = props;
     const state = hooks.useReactive({
         resizing: false,
         x: 0,
         width: 0,
     });
+    const rafId = react.useRef(null);
+    const nextWidth = react.useRef(null);
+    react.useEffect(() => {
+        return () => {
+            if (rafId.current != null)
+                cancelAnimationFrame(rafId.current);
+        };
+    }, []);
+    const flush = react.useCallback(() => {
+        rafId.current = null;
+        if (nextWidth.current == null)
+            return;
+        onWidthChange(index, nextWidth.current, "preview");
+    }, [index, onWidthChange]);
+    const schedule = react.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;
@@ -21,24 +42,31 @@ function Resize(props) {
             width,
         });
     };
-    const handleMouseMove = (e) => {
+    const handleMouseMove = react.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 = react.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]);
     hooks.useMouseMove(handleMouseMove);
     hooks.useMouseUp(handleMouseUp);
     return (jsxRuntime.jsx("i", { className: 'i-datagrid-resizor', onMouseDown: handleMouseDown, onClick: (e) => e.stopPropagation() }));
-}
+});
 
 exports.default = Resize;
 //# sourceMappingURL=resize.js.map

package/lib/cjs/components/datagrid/resize.js.map

@@ -1 +1 @@
-{"version":3,"file":"resize.js","sources":["../../../../packages/components/datagrid/resize.tsx"],"sourcesContent":["import { useMouseMove, useMouseUp, useReactive } from \"../../js/hooks\";\r\n\r\nexport default function Resize(props) {\r\n\tconst { index, onWidthChange } = props;\r\n\tconst state = useReactive({\r\n\t\tresizing: false,\r\n\t\tx: 0,\r\n\t\twidth: 0,\r\n\t});\r\n\r\n\tconst handleMouseDown = (e) => {\r\n\t\tconst tar = e.target as HTMLElement;\r\n\t\tconst width = (tar.offsetParent as HTMLElement).offsetWidth;\r\n\r\n\t\tObject.assign(state, {\r\n\t\t\tx: e.pageX,\r\n\t\t\tresizing: true,\r\n\t\t\twidth,\r\n\t\t});\r\n\t};\r\n\r\n\tconst handleMouseMove = (e) => {\r\n\t\tif (!state.resizing) return;\r\n\r\n\t\te.preventDefault();\r\n\r\n\t\tconst after = state.width + e.pageX - state.x;\r\n\t\tif (after <= 24) return;\r\n\r\n\t\tonWidthChange(index, after);\r\n\t};\r\n\r\n\tconst handleMouseUp = () => {\r\n\t\tif (!state.resizing) return;\r\n\r\n\t\tstate.resizing = false;\r\n\t};\r\n\r\n\tuseMouseMove(handleMouseMove);\r\n\tuseMouseUp(handleMouseUp);\r\n\r\n\treturn (\r\n\t\t<i\r\n\t\t\tclassName='i-datagrid-resizor'\r\n\t\t\tonMouseDown={handleMouseDown}\r\n\t\t\tonClick={(e) => e.stopPropagation()}\r\n\t\t/>\r\n\t);\r\n}\r\n"],"names":["useReactive","useMouseMove","useMouseUp","_jsx"],"mappings":";;;;;;;AAEc,SAAU,MAAM,CAAC,KAAK,EAAA;AACnC,IAAA,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,KAAK;IACtC,MAAM,KAAK,GAAGA,iBAAW,CAAC;AACzB,QAAA,QAAQ,EAAE,KAAK;AACf,QAAA,CAAC,EAAE,CAAC;AACJ,QAAA,KAAK,EAAE,CAAC;AACR,KAAA,CAAC;AAEF,IAAA,MAAM,eAAe,GAAG,CAAC,CAAC,KAAI;AAC7B,QAAA,MAAM,GAAG,GAAG,CAAC,CAAC,MAAqB;AACnC,QAAA,MAAM,KAAK,GAAI,GAAG,CAAC,YAA4B,CAAC,WAAW;AAE3D,QAAA,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;YACpB,CAAC,EAAE,CAAC,CAAC,KAAK;AACV,YAAA,QAAQ,EAAE,IAAI;YACd,KAAK;AACL,SAAA,CAAC;AACH,IAAA,CAAC;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,CAAC,KAAI;QAC7B,IAAI,CAAC,KAAK,CAAC,QAAQ;YAAE;QAErB,CAAC,CAAC,cAAc,EAAE;AAElB,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC;QAC7C,IAAI,KAAK,IAAI,EAAE;YAAE;AAEjB,QAAA,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC;AAC5B,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,MAAK;QAC1B,IAAI,CAAC,KAAK,CAAC,QAAQ;YAAE;AAErB,QAAA,KAAK,CAAC,QAAQ,GAAG,KAAK;AACvB,IAAA,CAAC;IAEDC,kBAAY,CAAC,eAAe,CAAC;IAC7BC,gBAAU,CAAC,aAAa,CAAC;IAEzB,QACCC,sBACC,SAAS,EAAC,oBAAoB,EAC9B,WAAW,EAAE,eAAe,EAC5B,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,EAAA,CAClC;AAEJ;;;;"}
+{"version":3,"file":"resize.js","sources":["../../../../packages/components/datagrid/resize.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useRef } from \"react\";\nimport { useMouseMove, useMouseUp, useReactive } from \"../../js/hooks\";\n\ntype ResizeProps = {\n\tindex: number;\n\tonWidthChange: (\n\t\tindex: number,\n\t\twidth: number,\n\t\tphase?: \"preview\" | \"commit\",\n\t) => void;\n};\n\nconst Resize = memo(function Resize(props: ResizeProps) {\n\tconst { index, onWidthChange } = props;\n\tconst state = useReactive({\n\t\tresizing: false,\n\t\tx: 0,\n\t\twidth: 0,\n\t});\n\n\tconst rafId = useRef<number | null>(null);\n\tconst nextWidth = useRef<number | null>(null);\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tif (rafId.current != null) cancelAnimationFrame(rafId.current);\n\t\t};\n\t}, []);\n\n\tconst flush = useCallback(() => {\n\t\trafId.current = null;\n\t\tif (nextWidth.current == null) return;\n\t\tonWidthChange(index, nextWidth.current, \"preview\");\n\t}, [index, onWidthChange]);\n\n\tconst schedule = useCallback(\n\t\t(w: number) => {\n\t\t\tnextWidth.current = w;\n\t\t\tif (rafId.current != null) return;\n\t\t\trafId.current = requestAnimationFrame(flush);\n\t\t},\n\t\t[flush],\n\t);\n\n\tconst handleMouseDown = (e: any) => {\n\t\tconst tar = e.target as HTMLElement;\n\t\tconst width = (tar.offsetParent as HTMLElement).offsetWidth;\n\n\t\tObject.assign(state, {\n\t\t\tx: e.pageX,\n\t\t\tresizing: true,\n\t\t\twidth,\n\t\t});\n\t};\n\n\tconst handleMouseMove = useCallback(\n\t\t(e: any) => {\n\t\t\tif (!state.resizing) return;\n\n\t\t\te.preventDefault();\n\n\t\t\tconst after = state.width + e.pageX - state.x;\n\t\t\tif (after <= 24) return;\n\n\t\t\tschedule(after);\n\t\t},\n\t\t[index, schedule, state],\n\t);\n\n\tconst handleMouseUp = useCallback(() => {\n\t\tif (!state.resizing) return;\n\n\t\tstate.resizing = false;\n\t\tconst w = nextWidth.current;\n\t\tif (rafId.current != null) cancelAnimationFrame(rafId.current);\n\t\trafId.current = null;\n\t\tif (w != null) onWidthChange(index, w, \"commit\");\n\t\tnextWidth.current = null;\n\t}, [index, onWidthChange, state]);\n\n\tuseMouseMove(handleMouseMove);\n\tuseMouseUp(handleMouseUp);\n\n\treturn (\n\t\t<i\n\t\t\tclassName='i-datagrid-resizor'\n\t\t\tonMouseDown={handleMouseDown}\n\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t/>\n\t);\n});\n\nexport default Resize;\n"],"names":["memo","useReactive","useRef","useEffect","useCallback","useMouseMove","useMouseUp","_jsx"],"mappings":"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"}

package/lib/cjs/components/datagrid/row.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('classnames');
+var react = require('react');
 var cell = require('./cell.js');
 var resize = require('./resize.js');
 var sorter = require('./sorter.js');
@@ -14,11 +15,24 @@ var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
 
 function Row(props) {
     const { row, data, columns, cellEllipsis, onRowClick, onCellClick, onCellDoubleClick, } = props;
-    return (jsxRuntime.jsx("div", { className: 'i-datagrid-row', onClick: () => onRowClick?.(data, row), children: columns.map((col, i) => (jsxRuntime.jsx(cell.Cell, { column: col, col: i, row: row, data: data, cellEllipsis: cellEllipsis, onCellClick: onCellClick, onCellDoubleClick: onCellDoubleClick }, i))) }));
+    const handleRowClick = react.useCallback(() => {
+        onRowClick?.(data, row);
+    }, [data, onRowClick, row]);
+    return (jsxRuntime.jsx("div", { className: 'i-datagrid-row', onClick: handleRowClick, children: columns.map((col, i) => (jsxRuntime.jsx(cell.Cell, { column: col, col: i, row: row, data: data, cellEllipsis: cellEllipsis, onCellClick: onCellClick, onCellDoubleClick: onCellDoubleClick }, i))) }));
 }
 function Header(props) {
     const { columns, resizable, cellEllipsis, sortBy, sortType, onWidthChange, onHeaderClick, } = props;
-    return (jsxRuntime.jsx("div", { className: 'i-datagrid-header i-datagrid-row', children: columns.map((column, col) => {
+    const columnById = react.useMemo(() => {
+        const map = new Map();
+        columns.forEach((c) => map.set(c.id, c));
+        return map;
+    }, [columns]);
+    const handleClick = react.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 (jsxRuntime.jsx("div", { className: 'i-datagrid-header i-datagrid-row', onClick: handleClick, children: columns.map((column, col) => {
             const { id, title, fixed, colSpan, sorter: sorter$1, justify, renderHeader, } = column;
             const style = cell.getCellStyle({
                 justify,
@@ -30,7 +44,7 @@ function Header(props) {
             return (jsxRuntime.jsxs("div", { "data-col": id, className: classNames__default("i-datagrid-cell", {
                     "i-datagrid-has-sorter": sorter$1,
                     "i-datagrid-cell-fixed": fixed,
-                }), style: { ...style, insetBlockStart: 0 }, onClick: (e) => onHeaderClick?.(column, e), children: [renderHeader?.(column, col) ?? (jsxRuntime.jsx("div", { className: classNames__default("i-datagrid-cell-content", {
+                }), style: { ...style, insetBlockStart: 0 }, children: [renderHeader?.(column, col) ?? (jsxRuntime.jsx("div", { className: classNames__default("i-datagrid-cell-content", {
                             "i-datagrid-cell-content-ellipsis": cellEllipsis,
                         }), children: title || id })), sorter$1 && jsxRuntime.jsx(sorter.default, { type: order }), resizable && (jsxRuntime.jsx(resize.default, { index: col, onWidthChange: onWidthChange }))] }, col));
         }) }));

package/lib/cjs/components/datagrid/row.js.map

@@ -1 +1 @@
-{"version":3,"file":"row.js","sources":["../../../../packages/components/datagrid/row.tsx"],"sourcesContent":["import classNames from \"classnames\";\r\nimport { Cell, getCellStyle } from \"./cell\";\r\nimport Resize from \"./resize\";\r\nimport Sorter from \"./sorter\";\r\nimport { IHeader, IRow } from \"./type\";\r\n\r\nexport default function Row(props: IRow) {\r\n\tconst {\r\n\t\trow,\r\n\t\tdata,\r\n\t\tcolumns,\r\n\t\tcellEllipsis,\r\n\t\tonRowClick,\r\n\t\tonCellClick,\r\n\t\tonCellDoubleClick,\r\n\t} = props;\r\n\r\n\treturn (\r\n\t\t<div className='i-datagrid-row' onClick={() => onRowClick?.(data, row)}>\r\n\t\t\t{columns.map((col, i) => (\r\n\t\t\t\t<Cell\r\n\t\t\t\t\tkey={i}\r\n\t\t\t\t\tcolumn={col}\r\n\t\t\t\t\tcol={i}\r\n\t\t\t\t\trow={row}\r\n\t\t\t\t\tdata={data}\r\n\t\t\t\t\tcellEllipsis={cellEllipsis}\r\n\t\t\t\t\tonCellClick={onCellClick}\r\n\t\t\t\t\tonCellDoubleClick={onCellDoubleClick}\r\n\t\t\t\t/>\r\n\t\t\t))}\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nexport function Header(props: IHeader) {\r\n\tconst {\r\n\t\tcolumns,\r\n\t\tresizable,\r\n\t\tcellEllipsis,\r\n\t\tsortBy,\r\n\t\tsortType,\r\n\t\tonWidthChange,\r\n\t\tonHeaderClick,\r\n\t} = props;\r\n\r\n\treturn (\r\n\t\t<div className='i-datagrid-header i-datagrid-row'>\r\n\t\t\t{columns.map((column, col) => {\r\n\t\t\t\tconst {\r\n\t\t\t\t\tid,\r\n\t\t\t\t\ttitle,\r\n\t\t\t\t\tfixed,\r\n\t\t\t\t\tcolSpan,\r\n\t\t\t\t\tsorter,\r\n\t\t\t\t\tjustify,\r\n\t\t\t\t\trenderHeader,\r\n\t\t\t\t} = column;\r\n\t\t\t\tconst style = getCellStyle({\r\n\t\t\t\t\tjustify,\r\n\t\t\t\t\trow: 0,\r\n\t\t\t\t\tcol,\r\n\t\t\t\t\tcolSpan,\r\n\t\t\t\t});\r\n\r\n\t\t\t\tconst order = sortBy === id ? sortType : \"\";\r\n\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tkey={col}\r\n\t\t\t\t\t\tdata-col={id}\r\n\t\t\t\t\t\tclassName={classNames(\"i-datagrid-cell\", {\r\n\t\t\t\t\t\t\t\"i-datagrid-has-sorter\": sorter,\r\n\t\t\t\t\t\t\t\"i-datagrid-cell-fixed\": fixed,\r\n\t\t\t\t\t\t})}\r\n\t\t\t\t\t\tstyle={{ ...style, insetBlockStart: 0 }}\r\n\t\t\t\t\t\tonClick={(e) => onHeaderClick?.(column, e)}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{renderHeader?.(column, col) ?? (\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\tclassName={classNames(\r\n\t\t\t\t\t\t\t\t\t\"i-datagrid-cell-content\",\r\n\t\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\t\t\"i-datagrid-cell-content-ellipsis\":\r\n\t\t\t\t\t\t\t\t\t\t\tcellEllipsis,\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t{title || id}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t)}\r\n\r\n\t\t\t\t\t\t{sorter && <Sorter type={order} />}\r\n\r\n\t\t\t\t\t\t{resizable && (\r\n\t\t\t\t\t\t\t<Resize index={col} onWidthChange={onWidthChange} />\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t);\r\n\t\t\t})}\r\n\t\t</div>\r\n\t);\r\n}\r\n"],"names":["_jsx","Cell","sorter","getCellStyle","_jsxs","classNames","Sorter","Resize"],"mappings":";;;;;;;;;;;;;;AAMc,SAAU,GAAG,CAAC,KAAW,EAAA;AACtC,IAAA,MAAM,EACL,GAAG,EACH,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,UAAU,EACV,WAAW,EACX,iBAAiB,GACjB,GAAG,KAAK;AAET,IAAA,QACCA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,MAAM,UAAU,GAAG,IAAI,EAAE,GAAG,CAAC,EAAA,QAAA,EACpE,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,MACnBA,eAACC,SAAI,EAAA,EAEJ,MAAM,EAAE,GAAG,EACX,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EAAA,EAP/B,CAAC,CAQL,CACF,CAAC,EAAA,CACG;AAER;AAEM,SAAU,MAAM,CAAC,KAAc,EAAA;AACpC,IAAA,MAAM,EACL,OAAO,EACP,SAAS,EACT,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,aAAa,EACb,aAAa,GACb,GAAG,KAAK;AAET,IAAA,QACCD,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAC/C,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,KAAI;AAC5B,YAAA,MAAM,EACL,EAAE,EACF,KAAK,EACL,KAAK,EACL,OAAO,UACPE,QAAM,EACN,OAAO,EACP,YAAY,GACZ,GAAG,MAAM;YACV,MAAM,KAAK,GAAGC,iBAAY,CAAC;gBAC1B,OAAO;AACP,gBAAA,GAAG,EAAE,CAAC;gBACN,GAAG;gBACH,OAAO;AACP,aAAA,CAAC;AAEF,YAAA,MAAM,KAAK,GAAG,MAAM,KAAK,EAAE,GAAG,QAAQ,GAAG,EAAE;YAE3C,QACCC,qCAEW,EAAE,EACZ,SAAS,EAAEC,mBAAU,CAAC,iBAAiB,EAAE;AACxC,oBAAA,uBAAuB,EAAEH,QAAM;AAC/B,oBAAA,uBAAuB,EAAE,KAAK;AAC9B,iBAAA,CAAC,EACF,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,eAAe,EAAE,CAAC,EAAE,EACvC,OAAO,EAAE,CAAC,CAAC,KAAK,aAAa,GAAG,MAAM,EAAE,CAAC,CAAC,aAEzC,YAAY,GAAG,MAAM,EAAE,GAAG,CAAC,KAC3BF,cAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAEK,mBAAU,CACpB,yBAAyB,EACzB;AACC,4BAAA,kCAAkC,EACjC,YAAY;AACb,yBAAA,CACD,YAEA,KAAK,IAAI,EAAE,EAAA,CACP,CACN,EAEAH,QAAM,IAAIF,cAAA,CAACM,cAAM,EAAA,EAAC,IAAI,EAAE,KAAK,GAAI,EAEjC,SAAS,KACTN,eAACO,cAAM,EAAA,EAAC,KAAK,EAAE,GAAG,EAAE,aAAa,EAAE,aAAa,GAAI,CACpD,CAAA,EAAA,EA3BI,GAAG,CA4BH;QAER,CAAC,CAAC,EAAA,CACG;AAER;;;;;"}
+{"version":3,"file":"row.js","sources":["../../../../packages/components/datagrid/row.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useCallback, useMemo } from \"react\";\nimport { Cell, getCellStyle } from \"./cell\";\nimport Resize from \"./resize\";\nimport Sorter from \"./sorter\";\nimport { IHeader, IRow } from \"./type\";\n\nexport default function Row(props: IRow) {\n\tconst {\n\t\trow,\n\t\tdata,\n\t\tcolumns,\n\t\tcellEllipsis,\n\t\tonRowClick,\n\t\tonCellClick,\n\t\tonCellDoubleClick,\n\t} = props;\n\n\tconst handleRowClick = useCallback(() => {\n\t\tonRowClick?.(data, row);\n\t}, [data, onRowClick, row]);\n\n\treturn (\n\t\t<div className='i-datagrid-row' onClick={handleRowClick}>\n\t\t\t{columns.map((col, i) => (\n\t\t\t\t<Cell\n\t\t\t\t\tkey={i}\n\t\t\t\t\tcolumn={col}\n\t\t\t\t\tcol={i}\n\t\t\t\t\trow={row}\n\t\t\t\t\tdata={data}\n\t\t\t\t\tcellEllipsis={cellEllipsis}\n\t\t\t\t\tonCellClick={onCellClick}\n\t\t\t\t\tonCellDoubleClick={onCellDoubleClick}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\nexport function Header(props: IHeader) {\n\tconst {\n\t\tcolumns,\n\t\tresizable,\n\t\tcellEllipsis,\n\t\tsortBy,\n\t\tsortType,\n\t\tonWidthChange,\n\t\tonHeaderClick,\n\t} = props;\n\n\tconst columnById = useMemo(() => {\n\t\tconst map = new Map<string, IHeader[\"columns\"][number]>();\n\t\tcolumns.forEach((c) => map.set(c.id, c));\n\t\treturn map;\n\t}, [columns]);\n\n\tconst handleClick = useCallback(\n\t\t(e: any) => {\n\t\t\tconst el = (e.target as HTMLElement | null)?.closest?.(\n\t\t\t\t\".i-datagrid-cell[data-col]\",\n\t\t\t) as HTMLElement | null;\n\t\t\tconst id = el?.dataset?.col;\n\t\t\tonHeaderClick?.(id ? columnById.get(id) : undefined, e);\n\t\t},\n\t\t[columnById, onHeaderClick],\n\t);\n\n\treturn (\n\t\t<div className='i-datagrid-header i-datagrid-row' onClick={handleClick}>\n\t\t\t{columns.map((column, col) => {\n\t\t\t\tconst {\n\t\t\t\t\tid,\n\t\t\t\t\ttitle,\n\t\t\t\t\tfixed,\n\t\t\t\t\tcolSpan,\n\t\t\t\t\tsorter,\n\t\t\t\t\tjustify,\n\t\t\t\t\trenderHeader,\n\t\t\t\t} = column;\n\t\t\t\tconst style = getCellStyle({\n\t\t\t\t\tjustify,\n\t\t\t\t\trow: 0,\n\t\t\t\t\tcol,\n\t\t\t\t\tcolSpan,\n\t\t\t\t});\n\n\t\t\t\tconst order = sortBy === id ? sortType : \"\";\n\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={col}\n\t\t\t\t\t\tdata-col={id}\n\t\t\t\t\t\tclassName={classNames(\"i-datagrid-cell\", {\n\t\t\t\t\t\t\t\"i-datagrid-has-sorter\": sorter,\n\t\t\t\t\t\t\t\"i-datagrid-cell-fixed\": fixed,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tstyle={{ ...style, insetBlockStart: 0 }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderHeader?.(column, col) ?? (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\t\t\t\"i-datagrid-cell-content\",\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\"i-datagrid-cell-content-ellipsis\":\n\t\t\t\t\t\t\t\t\t\t\tcellEllipsis,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{title || id}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{sorter && <Sorter type={order} />}\n\n\t\t\t\t\t\t{resizable && (\n\t\t\t\t\t\t\t<Resize index={col} onWidthChange={onWidthChange} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n}\n"],"names":["useCallback","_jsx","Cell","useMemo","sorter","getCellStyle","_jsxs","classNames","Sorter","Resize"],"mappings":"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"}

package/lib/cjs/components/datagrid/sorter.js.map

@@ -1 +1 @@
-{"version":3,"file":"sorter.js","sources":["../../../../packages/components/datagrid/sorter.tsx"],"sourcesContent":["import classNames from \"classnames\";\r\n\r\nconst Arrow = (props) => (\r\n\t<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>\r\n\t\t<g fill='none'>\r\n\t\t\t<path\r\n\t\t\t\td='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'\r\n\t\t\t\tfill='currentColor'\r\n\t\t\t></path>\r\n\t\t</g>\r\n\t</svg>\r\n);\r\n\r\nexport default function Sorter(props) {\r\n\tconst { type } = props;\r\n\r\n\treturn (\r\n\t\t<a\r\n\t\t\tclassName={classNames(\"i-datagrid-sorter\", {\r\n\t\t\t\t[`i-datagrid-sorter-${type}`]: type,\r\n\t\t\t})}\r\n\t\t>\r\n\t\t\t<Arrow className='i-datagrid-sorter-caret' />\r\n\t\t\t<Arrow className='i-datagrid-sorter-caret' />\r\n\t\t</a>\r\n\t);\r\n}\r\n"],"names":["_jsx","_jsxs","classNames"],"mappings":";;;;;;;;;;;AAEA,MAAM,KAAK,GAAG,CAAC,KAAK,MACnBA,cAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA,GAAK,KAAK,EAAA,QAAA,EACpEA,cAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,MAAM,EAAA,QAAA,EACbA,cAAA,CAAA,MAAA,EAAA,EACC,CAAC,EAAC,6HAA6H,EAC/H,IAAI,EAAC,cAAc,EAAA,CACZ,EAAA,CACL,EAAA,CACC,CACN;AAEa,SAAU,MAAM,CAAC,KAAK,EAAA;AACnC,IAAA,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK;AAEtB,IAAA,QACCC,eAAA,CAAA,GAAA,EAAA,EACC,SAAS,EAAEC,mBAAU,CAAC,mBAAmB,EAAE;AAC1C,YAAA,CAAC,CAAA,kBAAA,EAAqB,IAAI,CAAA,CAAE,GAAG,IAAI;AACnC,SAAA,CAAC,aAEFF,cAAA,CAAC,KAAK,IAAC,SAAS,EAAC,yBAAyB,EAAA,CAAG,EAC7CA,cAAA,CAAC,KAAK,IAAC,SAAS,EAAC,yBAAyB,EAAA,CAAG,CAAA,EAAA,CAC1C;AAEN;;;;"}
+{"version":3,"file":"sorter.js","sources":["../../../../packages/components/datagrid/sorter.tsx"],"sourcesContent":["import classNames from \"classnames\";\n\nconst Arrow = (props) => (\n\t<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>\n\t\t<g fill='none'>\n\t\t\t<path\n\t\t\t\td='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'\n\t\t\t\tfill='currentColor'\n\t\t\t></path>\n\t\t</g>\n\t</svg>\n);\n\nexport default function Sorter(props) {\n\tconst { type } = props;\n\n\treturn (\n\t\t<a\n\t\t\tclassName={classNames(\"i-datagrid-sorter\", {\n\t\t\t\t[`i-datagrid-sorter-${type}`]: type,\n\t\t\t})}\n\t\t>\n\t\t\t<Arrow className='i-datagrid-sorter-caret' />\n\t\t\t<Arrow className='i-datagrid-sorter-caret' />\n\t\t</a>\n\t);\n}\n"],"names":["_jsx","_jsxs","classNames"],"mappings":";;;;;;;;;;;AAEA,MAAM,KAAK,GAAG,CAAC,KAAK,MACnBA,cAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA,GAAK,KAAK,EAAA,QAAA,EACpEA,cAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,MAAM,EAAA,QAAA,EACbA,cAAA,CAAA,MAAA,EAAA,EACC,CAAC,EAAC,6HAA6H,EAC/H,IAAI,EAAC,cAAc,EAAA,CACZ,EAAA,CACL,EAAA,CACC,CACN;AAEa,SAAU,MAAM,CAAC,KAAK,EAAA;AACnC,IAAA,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK;AAEtB,IAAA,QACCC,eAAA,CAAA,GAAA,EAAA,EACC,SAAS,EAAEC,mBAAU,CAAC,mBAAmB,EAAE;AAC1C,YAAA,CAAC,CAAA,kBAAA,EAAqB,IAAI,CAAA,CAAE,GAAG,IAAI;AACnC,SAAA,CAAC,aAEFF,cAAA,CAAC,KAAK,IAAC,SAAS,EAAC,yBAAyB,EAAA,CAAG,EAC7CA,cAAA,CAAC,KAAK,IAAC,SAAS,EAAC,yBAAyB,EAAA,CAAG,CAAA,EAAA,CAC1C;AAEN;;;;"}