@pinnacle0/web-ui 0.3.69 → 0.3.71

package/core/ResizeObserverPolyfill.d.ts

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

package/core/ResizeObserverPolyfill.js

@@ -0,0 +1,53 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+(function () { return __awaiter(void 0, void 0, void 0, function () {
+    var module_1;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                if (!("ResizeObserver" in window === false)) return [3 /*break*/, 2];
+                return [4 /*yield*/, import("@juggle/resize-observer")];
+            case 1:
+                module_1 = _a.sent();
+                window.ResizeObserver = module_1.ResizeObserver;
+                _a.label = 2;
+            case 2: return [2 /*return*/];
+        }
+    });
+}); })();
+export {};
+//# sourceMappingURL=ResizeObserverPolyfill.js.map

package/core/ResizeObserverPolyfill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeObserverPolyfill.js","sourceRoot":"","sources":["../../src/core/ResizeObserverPolyfill.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,CAAC;;;;;qBACO,CAAA,gBAAgB,IAAI,MAAM,KAAK,KAAK,CAAA,EAApC,wBAAoC;gBAErB,qBAAM,MAAM,CAAC,yBAAyB,CAAC,EAAA;;gBAAhD,WAAS,SAAuC;gBACtD,MAAM,CAAC,cAAc,GAAG,QAAM,CAAC,cAAc,CAAC;;;;;KAErD,CAAC,EAAE,CAAC"}

package/core/VirtualList.d.ts

@@ -0,0 +1,25 @@
+import type { VirtualizerOptions } from "@tanstack/react-virtual";
+import type { ComponentType } from "react";
+import type { StringKey } from "../internal/type";
+declare type Direction = "horizontal" | "vertical";
+export interface ItemProps<T extends object> {
+    index: number;
+    data: T;
+    measure: (element: HTMLElement | null) => void;
+}
+export interface Props<T extends object> {
+    initialRect?: {
+        width: number;
+        height: number;
+    };
+    data: T[];
+    renderData: ComponentType<ItemProps<T>>;
+    rowKey?: StringKey<T> | "index";
+    direction?: Direction;
+    fixedSize?: (index: number) => number;
+    overscan?: number;
+    observeElementRect?: VirtualizerOptions<HTMLElement | null, HTMLElement>["observeElementRect"];
+    observeElementOffset?: VirtualizerOptions<HTMLElement | null, HTMLElement>["observeElementOffset"];
+}
+export declare function VirtualList<T extends object>({ data, rowKey, direction, renderData, overscan, initialRect, observeElementOffset, fixedSize, observeElementRect, }: Props<T>): JSX.Element;
+export {};

package/core/VirtualList.js

@@ -0,0 +1,49 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import { useVirtualizer, observeElementOffset as defaultObserveElementOffset, observeElementRect as defaultObserveElementRect } from "@tanstack/react-virtual";
+var DEFAULT_ITEM_SIZE = 100;
+export function VirtualList(_a) {
+    var data = _a.data, _b = _a.rowKey, rowKey = _b === void 0 ? "index" : _b, _c = _a.direction, direction = _c === void 0 ? "vertical" : _c, renderData = _a.renderData, _d = _a.overscan, overscan = _d === void 0 ? 5 : _d, _e = _a.initialRect, initialRect = _e === void 0 ? { width: 0, height: 0 } : _e, observeElementOffset = _a.observeElementOffset, fixedSize = _a.fixedSize, observeElementRect = _a.observeElementRect;
+    var Item = renderData;
+    var parentRef = React.useRef(null);
+    var horizontal = direction === "horizontal";
+    var sizeStyle = horizontal ? { height: "100%" } : { width: "100%" };
+    var virtualizer = useVirtualizer({
+        initialRect: initialRect,
+        horizontal: horizontal,
+        count: data.length,
+        getScrollElement: function () { return parentRef.current; },
+        estimateSize: fixedSize !== null && fixedSize !== void 0 ? fixedSize : (function () { return DEFAULT_ITEM_SIZE; }),
+        observeElementOffset: observeElementOffset !== null && observeElementOffset !== void 0 ? observeElementOffset : defaultObserveElementOffset,
+        observeElementRect: observeElementRect !== null && observeElementRect !== void 0 ? observeElementRect : defaultObserveElementRect,
+        overscan: overscan,
+    });
+    var virtualizerRef = React.useRef(virtualizer);
+    virtualizerRef.current = virtualizer;
+    // TODO/Alvis: This is temporary fix of issue: https://github.com/TanStack/virtual/issues/363, please remove the code after update
+    React.useLayoutEffect(function () {
+        var v = virtualizerRef.current;
+        v._didMount()();
+        v._willUpdate();
+    }, [data.length]);
+    var getItemKey = function (index) { return (rowKey === "index" ? index : data[index][rowKey]); };
+    return (React.createElement("div", { className: "g-virtual-list", ref: parentRef, style: { width: "100%", height: "100%", overflow: "auto" } },
+        React.createElement("div", { className: "g-virtual-list-inner", style: {
+                height: horizontal ? "100%" : virtualizer.getTotalSize(),
+                width: horizontal ? virtualizer.getTotalSize() : "100%",
+                position: "relative",
+            } }, virtualizer.getVirtualItems().map(function (virtualRow) { return (React.createElement("div", { className: "g-virtual-list-item", key: getItemKey(virtualRow.index), style: __assign({ position: "absolute", top: 0, left: 0, transform: horizontal ? "translateX(".concat(virtualRow.start, "px)") : "translateY(".concat(virtualRow.start, "px)") }, sizeStyle) },
+            React.createElement("div", { className: "g-virtual-list-item-wrapper", ref: virtualRow.measureElement, style: __assign({}, sizeStyle) },
+                React.createElement(Item, { data: data[virtualRow.index], index: virtualRow.index, measure: virtualRow.measureElement })))); }))));
+}
+//# sourceMappingURL=VirtualList.js.map

package/core/VirtualList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualList.js","sourceRoot":"","sources":["../../src/core/VirtualList.tsx"],"names":[],"mappings":"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"}

package/core/VirtualTable/TableHeader.d.ts

@@ -1,13 +1,10 @@
 import React from "react";
-import type { ColumnFixedPosition, VirtualTableColumn, StickyPosition } from "./type";
+import type { VirtualTableColumn, StickyPosition } from "./type";
 interface Props<RowType extends object> {
-    headersRef: React.RefObject<HTMLDivElement>;
+    headerRef: React.MutableRefObject<HTMLDivElement | null>;
     headerHeight: number;
     columns: VirtualTableColumn<RowType>[];
-    stickyPosition: Record<number, StickyPosition>;
-    getFixedColumnClassNames: (fixed: ColumnFixedPosition | undefined, columnIndex: number) => (string | undefined)[];
+    stickyPositionMap: Record<number, StickyPosition>;
 }
-export declare const TableHeader: (<RowType extends object>({ headersRef, headerHeight, columns, stickyPosition, getFixedColumnClassNames }: Props<RowType>) => JSX.Element) & {
-    displayName: string;
-};
+export declare const TableHeader: <RowType extends object>({ headerRef, headerHeight, columns, stickyPositionMap }: Props<RowType>) => JSX.Element;
 export {};

package/core/VirtualTable/TableHeader.js

@@ -1,45 +1,18 @@
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import React from "react";
+import { ReactUtil } from "../../util/ReactUtil";
 import { classNames } from "../../util/ClassNames";
-export var TableHeader = Object.assign(function (_a) {
-    var headersRef = _a.headersRef, headerHeight = _a.headerHeight, columns = _a.columns, stickyPosition = _a.stickyPosition, getFixedColumnClassNames = _a.getFixedColumnClassNames;
-    return (React.createElement("div", { className: "table-headers", ref: headersRef, style: { height: headerHeight, width: scrollX || "100%" } }, columns.map(function (_a, columnIndex) {
-        var _b;
+export var TableHeader = ReactUtil.memo("TableHeader", function (_a) {
+    var headerRef = _a.headerRef, headerHeight = _a.headerHeight, columns = _a.columns, stickyPositionMap = _a.stickyPositionMap;
+    return (React.createElement("div", { className: "table-headers", ref: headerRef, style: { height: headerHeight, width: scrollX || "100%" } }, columns.map(function (_a, columnIndex) {
         var title = _a.title, width = _a.width, align = _a.align, fixed = _a.fixed, display = _a.display;
-        var stickyPositionValue = ((_b = stickyPosition[columnIndex]) === null || _b === void 0 ? void 0 : _b.value) || 0;
-        return (React.createElement("div", { className: classNames.apply(void 0, __spreadArray(["table-header"], __read(getFixedColumnClassNames(fixed, columnIndex)), false)), key: columnIndex, style: {
+        var stickyPosition = stickyPositionMap[columnIndex];
+        return (React.createElement("div", { className: classNames("table-header", { fixed: fixed, left: fixed === "left", right: fixed === "right", last: stickyPosition === null || stickyPosition === void 0 ? void 0 : stickyPosition.isLast }), key: columnIndex, style: {
                 display: display !== "hidden" ? "flex" : "none",
                 flex: "1 0 ".concat(width, "px"),
                 textAlign: align,
-                left: fixed === "left" ? stickyPositionValue : undefined,
-                right: fixed === "right" ? stickyPositionValue : undefined,
+                left: fixed === "left" ? stickyPosition === null || stickyPosition === void 0 ? void 0 : stickyPosition.value : undefined,
+                right: fixed === "right" ? stickyPosition === null || stickyPosition === void 0 ? void 0 : stickyPosition.value : undefined,
             } }, title));
     })));
-}, {
-    displayName: "TableHeader",
 });
 //# sourceMappingURL=TableHeader.js.map

package/core/VirtualTable/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/TableHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAWjD,MAAM,CAAC,IAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CACpC,UAAkC,EAA6F;QAA5F,UAAU,gBAAA,EAAE,YAAY,kBAAA,EAAE,OAAO,aAAA,EAAE,cAAc,oBAAA,EAAE,wBAAwB,8BAAA;IAC1G,OAAO,CACH,6BAAK,SAAS,EAAC,eAAe,EAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,EAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,IAAI,MAAM,EAAC,IAClG,OAAO,CAAC,GAAG,CAAC,UAAC,EAAqC,EAAE,WAAW;;YAAjD,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,OAAO,aAAA;QAC9C,IAAM,mBAAmB,GAAG,CAAA,MAAA,cAAc,CAAC,WAAW,CAAC,0CAAE,KAAK,KAAI,CAAC,CAAC;QACpE,OAAO,CACH,6BACI,SAAS,EAAE,UAAU,8BAAC,cAAc,UAAK,wBAAwB,CAAC,KAAK,EAAE,WAAW,CAAC,YACrF,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE;gBACH,OAAO,EAAE,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;gBAC/C,IAAI,EAAE,cAAO,KAAK,OAAI;gBACtB,SAAS,EAAE,KAAK;gBAChB,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS;gBACxD,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS;aAC7D,IAEA,KAAK,CACJ,CACT,CAAC;IACN,CAAC,CAAC,CACA,CACT,CAAC;AACN,CAAC,EACD;IACI,WAAW,EAAE,aAAa;CAC7B,CACJ,CAAC"}
+{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAUjD,MAAM,CAAC,IAAM,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC,aAAa,EAAE,UAAkC,EAAqE;QAApE,SAAS,eAAA,EAAE,YAAY,kBAAA,EAAE,OAAO,aAAA,EAAE,iBAAiB,uBAAA;IAC3I,OAAO,CACH,6BAAK,SAAS,EAAC,eAAe,EAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,EAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,IAAI,MAAM,EAAC,IACjG,OAAO,CAAC,GAAG,CAAC,UAAC,EAAqC,EAAE,WAAW;YAAjD,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,OAAO,aAAA;QAC9C,IAAM,cAAc,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;QACtD,OAAO,CACH,6BACI,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,EAAC,KAAK,OAAA,EAAE,IAAI,EAAE,KAAK,KAAK,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,OAAO,EAAE,IAAI,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,MAAM,EAAC,CAAC,EAC9H,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE;gBACH,OAAO,EAAE,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;gBAC/C,IAAI,EAAE,cAAO,KAAK,OAAI;gBACtB,SAAS,EAAE,KAAK;gBAChB,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,CAAC,CAAC,CAAC,SAAS;gBAC1D,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,CAAC,CAAC,CAAC,SAAS;aAC/D,IAEA,KAAK,CACJ,CACT,CAAC;IACN,CAAC,CAAC,CACA,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}

package/core/VirtualTable/TableRow.d.ts

@@ -1,21 +1,16 @@
 /// <reference types="react" />
-import type { VirtualItem } from "react-virtual";
-import type { ColumnFixedPosition, VirtualTableColumn, VirtualTableRowExpand, StickyPosition } from "./type";
+import type { VirtualItem } from "@tanstack/react-virtual";
+import type { VirtualTableColumn, StickyPosition } from "./type";
 interface Props<RowType extends object> {
     data: RowType;
     columns: VirtualTableColumn<RowType>[];
-    virtualItem: VirtualItem;
+    virtualItem: VirtualItem<HTMLDivElement>;
     columnWidths: number[];
     rowHeight: number;
-    lastShownColumnIndex: number;
     scrollBarSize: number;
-    stickyPosition: Record<number, StickyPosition>;
-    getFixedColumnClassNames: (fixed: ColumnFixedPosition | undefined, columnIndex: number) => (string | undefined)[];
+    stickyPositionMap: Record<number, StickyPosition>;
     rowClassName?: string;
     onRowClick?: (record: RowType, rowIndex: number) => void;
-    rowExpand?: VirtualTableRowExpand<RowType>;
 }
-export declare const TableRow: (<RowType extends object>({ virtualItem, getFixedColumnClassNames, data, columns, columnWidths, rowHeight, scrollBarSize, stickyPosition, lastShownColumnIndex, rowClassName, onRowClick, rowExpand, }: Props<RowType>) => JSX.Element) & {
-    displayName: string;
-};
+export declare const TableRow: <RowType extends object>({ virtualItem, data, columns, columnWidths, rowHeight, scrollBarSize, stickyPositionMap, rowClassName, onRowClick }: Props<RowType>) => JSX.Element;
 export {};

package/core/VirtualTable/TableRow.js

@@ -24,36 +24,27 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import React from "react";
+import { ReactUtil } from "../../util/ReactUtil";
 import { classNames } from "../../util/ClassNames";
-export var TableRow = Object.assign(function (_a) {
-    var virtualItem = _a.virtualItem, getFixedColumnClassNames = _a.getFixedColumnClassNames, data = _a.data, columns = _a.columns, columnWidths = _a.columnWidths, rowHeight = _a.rowHeight, scrollBarSize = _a.scrollBarSize, stickyPosition = _a.stickyPosition, lastShownColumnIndex = _a.lastShownColumnIndex, rowClassName = _a.rowClassName, onRowClick = _a.onRowClick, rowExpand = _a.rowExpand;
-    var rowRef = React.useRef(null);
-    var _b = __read(React.useState((rowExpand === null || rowExpand === void 0 ? void 0 : rowExpand.isDefaultExpanded) || false), 2), isExpanded = _b[0], setIsExpanded = _b[1];
+export var TableRow = ReactUtil.memo("TableRow", function (_a) {
+    var virtualItem = _a.virtualItem, data = _a.data, columns = _a.columns, columnWidths = _a.columnWidths, rowHeight = _a.rowHeight, scrollBarSize = _a.scrollBarSize, stickyPositionMap = _a.stickyPositionMap, rowClassName = _a.rowClassName, onRowClick = _a.onRowClick;
     var rowIndex = virtualItem.index;
-    var toggleExpendRow = React.useCallback(function () { return setIsExpanded(!isExpanded); }, [isExpanded]);
-    React.useEffect(function () {
-        if (rowRef.current) {
-            virtualItem.measureRef(rowRef.current);
-        }
-    }, [isExpanded, virtualItem]);
-    return (React.createElement("div", { ref: rowRef, key: rowIndex, className: classNames("table-row", rowClassName, rowIndex % 2 ? "odd" : "even"), style: { transform: "translateY(".concat(virtualItem.start, "px)") }, onClick: function () { return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data, rowIndex); } },
-        columns.map(function (column, columnIndex) {
-            var _a;
-            var colSpan = column.colSpan ? column.colSpan(data, rowIndex, columnIndex) : 1;
-            // handle colspan > 1
-            var cellWidth = colSpan > 1 ? columnWidths.slice(columnIndex, columnIndex + colSpan).reduce(function (acc, curr) { return acc + curr; }, 0) : columnWidths[columnIndex] || column.width;
-            var renderData = column.display !== "hidden" && (rowExpand && columnIndex === columns.length - 1 ? React.createElement(rowExpand.ExpandButton, { onClick: toggleExpendRow }) : column.renderData(data, rowIndex));
-            // minus the scroll bar size of the last column & minus the scroll bar size in the right sticky value of the right fixed columns
-            var isLastShownColumn = lastShownColumnIndex === columnIndex;
-            var stickyPositionValue = ((_a = stickyPosition[columnIndex]) === null || _a === void 0 ? void 0 : _a.value) || 0;
-            return (renderData && (React.createElement("div", { className: classNames.apply(void 0, __spreadArray(["table-cell"], __read(getFixedColumnClassNames(column.fixed, columnIndex)), false)), key: columnIndex, style: {
-                    height: rowHeight,
-                    width: cellWidth - (isLastShownColumn ? scrollBarSize : 0),
-                    textAlign: column.align,
-                    left: column.fixed === "left" ? stickyPositionValue : undefined,
-                    right: column.fixed === "right" ? stickyPositionValue - (isLastShownColumn ? 0 : scrollBarSize) : undefined,
-                } }, renderData)));
-        }),
-        rowExpand && React.createElement("div", { className: classNames("expand-row", { expanded: isExpanded }) }, rowExpand.renderExpandRow(data, rowIndex))));
-}, { displayName: "TableRow" });
+    var lastShownColumnIndex = React.useMemo(function () { return columns.length - 1 - __spreadArray([], __read(columns), false).reverse().findIndex(function (_) { return _.display !== "hidden"; }); }, [columns]);
+    return (React.createElement("div", { key: rowIndex, className: classNames("table-row", rowClassName, rowIndex % 2 ? "odd" : "even"), style: { transform: "translateY(".concat(virtualItem.start, "px)") }, onClick: function () { return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data, rowIndex); } }, columns.map(function (column, columnIndex) {
+        var colSpan = column.colSpan ? column.colSpan(data, rowIndex, columnIndex) : 1;
+        // handle colspan > 1
+        var cellWidth = colSpan > 1 ? columnWidths.slice(columnIndex, columnIndex + colSpan).reduce(function (acc, curr) { return acc + curr; }, 0) : columnWidths[columnIndex] || column.width;
+        var renderData = column.display !== "hidden" && column.renderData(data, rowIndex);
+        // minus the scroll bar size of the last column & minus the scroll bar size in the right sticky value of the right fixed columns
+        var isLastShownColumn = lastShownColumnIndex === columnIndex;
+        var stickyPosition = stickyPositionMap[columnIndex];
+        return (renderData && (React.createElement("div", { className: classNames("table-cell", { fixed: column.fixed, left: column.fixed === "left", right: column.fixed === "right", last: stickyPosition === null || stickyPosition === void 0 ? void 0 : stickyPosition.isLast }), key: columnIndex, style: {
+                height: rowHeight,
+                width: cellWidth - (isLastShownColumn ? scrollBarSize : 0),
+                textAlign: column.align,
+                left: column.fixed === "left" ? stickyPosition === null || stickyPosition === void 0 ? void 0 : stickyPosition.value : undefined,
+                right: column.fixed === "right" ? (stickyPosition === null || stickyPosition === void 0 ? void 0 : stickyPosition.value) - (isLastShownColumn ? 0 : scrollBarSize) : undefined,
+            } }, renderData)));
+    })));
+});
 //# sourceMappingURL=TableRow.js.map

package/core/VirtualTable/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/TableRow.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/TableRow.tsx"],"names":[],"mappings":"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"}

package/core/VirtualTable/hooks/useColumns.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import type { VirtualTableColumn, StickyPosition } from "../type";
+interface Props<RowType extends object> {
+    columns: VirtualTableColumn<RowType>[];
+    scrollContentRef: React.RefObject<HTMLDivElement>;
+    isScrollable: boolean;
+}
+export declare function useColumns<RowType extends object>({ columns, scrollContentRef, isScrollable }: Props<RowType>): {
+    columnWidths: number[];
+    getColumnWidths: () => void;
+    stickyPositionMap: Record<number, StickyPosition>;
+    scrollBarSize: number;
+    headerRef: React.MutableRefObject<HTMLDivElement | null>;
+};
+/**
+ *
+ * If the Virtual Table is render inside a container with open animation e.g. <Modal />,
+ * the colWidths may be calculated during the transition and get the wrong width with useState & useEffect
+ * useLayoutEffect will be trigged in the transition process and get the final correct column widths
+ *
+ */
+export declare const useColumnWidths: () => {
+    columnWidths: number[];
+    getColumnWidths: () => void;
+    headerRef: React.MutableRefObject<HTMLDivElement | null>;
+};
+export declare const useStickyPosition: <RowType extends object>(columns: VirtualTableColumn<RowType>[], columnWidths: number[]) => Record<number, StickyPosition>;
+export declare const useScrollBar: (scrollContentRef: React.RefObject<HTMLDivElement>) => {
+    scrollBarSize: number;
+    calculateScrollBarSize: () => void;
+};
+export {};

package/core/VirtualTable/hooks/useColumns.js

@@ -0,0 +1,112 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React from "react";
+import { useDebounce } from "../../../hooks/useDebounce";
+import { ArrayUtil } from "../../../internal/ArrayUtil";
+export function useColumns(_a) {
+    var columns = _a.columns, scrollContentRef = _a.scrollContentRef, isScrollable = _a.isScrollable;
+    var _b = useColumnWidths(), columnWidths = _b.columnWidths, headerRef = _b.headerRef, getColumnWidths = _b.getColumnWidths;
+    var stickyPositionMap = useStickyPosition(columns, columnWidths);
+    var _c = useScrollBar(scrollContentRef), scrollBarSize = _c.scrollBarSize, calculateScrollBarSize = _c.calculateScrollBarSize;
+    var debouncedGetColumnWidths = useDebounce(getColumnWidths);
+    var debouncedCalculateScrollBarSize = useDebounce(calculateScrollBarSize);
+    var handler = React.useCallback(function (event) {
+        if (event.currentTarget && "querySelector" in event.currentTarget && headerRef.current) {
+            var element = event.currentTarget;
+            var result = element.querySelector(".g-virtual-table");
+            if (result) {
+                debouncedGetColumnWidths();
+                debouncedCalculateScrollBarSize();
+            }
+        }
+    }, [headerRef, debouncedGetColumnWidths, debouncedCalculateScrollBarSize]);
+    React.useEffect(function () {
+        document.body.addEventListener("transitionend", handler);
+        document.body.addEventListener("animationend", handler);
+        return function () {
+            document.body.removeEventListener("transitionend", handler);
+            document.body.removeEventListener("animationend", handler);
+        };
+    }, [handler]);
+    React.useEffect(function () {
+        calculateScrollBarSize();
+    }, [isScrollable, columnWidths, calculateScrollBarSize]);
+    return {
+        columnWidths: columnWidths,
+        getColumnWidths: getColumnWidths,
+        stickyPositionMap: stickyPositionMap,
+        scrollBarSize: scrollBarSize,
+        headerRef: headerRef,
+    };
+}
+/**
+ *
+ * If the Virtual Table is render inside a container with open animation e.g. <Modal />,
+ * the colWidths may be calculated during the transition and get the wrong width with useState & useEffect
+ * useLayoutEffect will be trigged in the transition process and get the final correct column widths
+ *
+ */
+export var useColumnWidths = function () {
+    var headerRef = React.useRef(null);
+    var _a = __read(React.useState([]), 2), columnWidths = _a[0], setColumnWidths = _a[1];
+    var getColumnWidths = React.useCallback(function () {
+        if (!headerRef.current)
+            return;
+        var headers = headerRef.current.querySelectorAll(".table-header");
+        var widths = Array.prototype.slice.call(headers).map(function (header) {
+            var width = header.getBoundingClientRect().width;
+            return width;
+        });
+        setColumnWidths(widths);
+    }, [headerRef]);
+    return { columnWidths: columnWidths, getColumnWidths: getColumnWidths, headerRef: headerRef };
+};
+export var useStickyPosition = function (columns, columnWidths) {
+    return React.useMemo(function () {
+        var stickyPositionMap = {};
+        var left = [];
+        var right = [];
+        var leftFixedCols = ArrayUtil.compactMap(columns, function (_, columnIndex) { return (_.fixed === "left" ? { columnIndex: columnIndex, width: columnWidths[columnIndex] || 0 } : null); });
+        // the right sticky value stack in reverse direction
+        var rightFixedCols = ArrayUtil.compactMap(columns, function (_, columnIndex) { return (_.fixed === "right" ? { columnIndex: columnIndex, width: columnWidths[columnIndex] || 0 } : null); }).reverse();
+        leftFixedCols.forEach(function (column, idx) {
+            var stackedPositionValue = left.reduce(function (acc, prev) { return acc + prev; }, 0);
+            left.push(column.width);
+            stickyPositionMap[column.columnIndex] = { value: stackedPositionValue, isLast: idx === leftFixedCols.length - 1 };
+        });
+        rightFixedCols.forEach(function (column, idx) {
+            var stackedPositionValue = right.reduce(function (acc, prev) { return acc + prev; }, 0);
+            right.unshift(column.width);
+            stickyPositionMap[column.columnIndex] = { value: stackedPositionValue, isLast: idx === rightFixedCols.length - 1 };
+        });
+        return stickyPositionMap;
+    }, [columnWidths, columns]);
+};
+export var useScrollBar = function (scrollContentRef) {
+    var _a = __read(React.useState(0), 2), scrollBarSize = _a[0], setScrollBarSize = _a[1];
+    var calculateScrollBarSize = React.useCallback(function () {
+        if (scrollContentRef.current) {
+            var _a = scrollContentRef.current, clientWidth = _a.clientWidth, offsetWidth = _a.offsetWidth;
+            setScrollBarSize(offsetWidth - clientWidth);
+        }
+    }, [scrollContentRef, setScrollBarSize]);
+    return {
+        scrollBarSize: scrollBarSize,
+        calculateScrollBarSize: calculateScrollBarSize,
+    };
+};
+//# sourceMappingURL=useColumns.js.map

package/core/VirtualTable/hooks/useColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumns.js","sourceRoot":"","sources":["../../../../src/core/VirtualTable/hooks/useColumns.ts"],"names":[],"mappings":"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"}

package/core/VirtualTable/hooks/useScroll.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface Props {
+    scrollContentRef: React.RefObject<HTMLDivElement>;
+    headerRef: React.RefObject<HTMLDivElement>;
+}
+export declare const useScroll: ({ scrollContentRef, headerRef }: Props) => {
+    onScroll: () => void;
+    isScrollToLeft: boolean;
+    isScrollToRight: boolean;
+    tableBodyRef: (node: HTMLDivElement) => void;
+};
+export declare const useScrollToEdge: (scrollContentRef: React.RefObject<HTMLDivElement>) => {
+    isScrollToLeft: boolean;
+    isScrollToRight: boolean;
+    checkIsScrollToEdge: () => void;
+};
+export {};

package/core/VirtualTable/hooks/useScroll.js

@@ -0,0 +1,57 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React from "react";
+export var useScroll = function (_a) {
+    var scrollContentRef = _a.scrollContentRef, headerRef = _a.headerRef;
+    var tableBodyRef = function (node) {
+        if (node) {
+            checkIsScrollToEdge();
+        }
+    };
+    var _b = useScrollToEdge(scrollContentRef), isScrollToLeft = _b.isScrollToLeft, isScrollToRight = _b.isScrollToRight, checkIsScrollToEdge = _b.checkIsScrollToEdge;
+    var onScroll = React.useCallback(function () {
+        requestAnimationFrame(function () {
+            if (scrollContentRef.current && headerRef.current && scrollContentRef.current.scrollLeft !== headerRef.current.scrollLeft) {
+                headerRef.current.scrollLeft = scrollContentRef.current.scrollLeft;
+                checkIsScrollToEdge();
+            }
+        });
+    }, [scrollContentRef, headerRef, checkIsScrollToEdge]);
+    return {
+        onScroll: onScroll,
+        isScrollToLeft: isScrollToLeft,
+        isScrollToRight: isScrollToRight,
+        tableBodyRef: tableBodyRef,
+    };
+};
+export var useScrollToEdge = function (scrollContentRef) {
+    var _a = __read(React.useState(false), 2), isScrollToLeft = _a[0], setIsScrollToLeft = _a[1];
+    var _b = __read(React.useState(false), 2), isScrollToRight = _b[0], setIsScrollToRight = _b[1];
+    var checkIsScrollToEdge = React.useCallback(function () {
+        if (scrollContentRef.current) {
+            var _a = scrollContentRef.current, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, offsetWidth = _a.offsetWidth;
+            setIsScrollToLeft(scrollLeft <= 1);
+            setIsScrollToRight(scrollLeft >= scrollWidth - offsetWidth);
+        }
+    }, [scrollContentRef]);
+    return {
+        isScrollToLeft: isScrollToLeft,
+        isScrollToRight: isScrollToRight,
+        checkIsScrollToEdge: checkIsScrollToEdge,
+    };
+};
+//# sourceMappingURL=useScroll.js.map

package/core/VirtualTable/hooks/useScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScroll.js","sourceRoot":"","sources":["../../../../src/core/VirtualTable/hooks/useScroll.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,EAAoC;QAAnC,gBAAgB,sBAAA,EAAE,SAAS,eAAA;IAClD,IAAM,YAAY,GAAG,UAAC,IAAoB;QACtC,IAAI,IAAI,EAAE;YACN,mBAAmB,EAAE,CAAC;SACzB;IACL,CAAC,CAAC;IACI,IAAA,KAAyD,eAAe,CAAC,gBAAgB,CAAC,EAAzF,cAAc,oBAAA,EAAE,eAAe,qBAAA,EAAE,mBAAmB,yBAAqC,CAAC;IACjG,IAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC;QAC/B,qBAAqB,CAAC;YAClB,IAAI,gBAAgB,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,IAAI,gBAAgB,CAAC,OAAO,CAAC,UAAU,KAAK,SAAS,CAAC,OAAO,CAAC,UAAU,EAAE;gBACvH,SAAS,CAAC,OAAO,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;gBACnE,mBAAmB,EAAE,CAAC;aACzB;QACL,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,gBAAgB,EAAE,SAAS,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEvD,OAAO;QACH,QAAQ,UAAA;QACR,cAAc,gBAAA;QACd,eAAe,iBAAA;QACf,YAAY,cAAA;KACf,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,gBAAiD;IACvE,IAAA,KAAA,OAAsC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAA1D,cAAc,QAAA,EAAE,iBAAiB,QAAyB,CAAC;IAC5D,IAAA,KAAA,OAAwC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAA5D,eAAe,QAAA,EAAE,kBAAkB,QAAyB,CAAC;IAEpE,IAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAAC;QAC1C,IAAI,gBAAgB,CAAC,OAAO,EAAE;YACpB,IAAA,KAAyC,gBAAgB,CAAC,OAAO,EAAhE,UAAU,gBAAA,EAAE,WAAW,iBAAA,EAAE,WAAW,iBAA4B,CAAC;YACxE,iBAAiB,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC;YACnC,kBAAkB,CAAC,UAAU,IAAI,WAAW,GAAG,WAAW,CAAC,CAAC;SAC/D;IACL,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,OAAO;QACH,cAAc,gBAAA;QACd,eAAe,iBAAA;QACf,mBAAmB,qBAAA;KACtB,CAAC;AACN,CAAC,CAAC"}

package/core/VirtualTable/index.d.ts

@@ -1,30 +1,28 @@
 /// <reference types="react" />
 import type { SafeReactChild, StringKey } from "../../internal/type";
-import type { VirtualTableColumn, VirtualTableRowExpand, VirtualTableRowSelection } from "./type";
+import type { VirtualTableColumn, VirtualTableRowSelection } from "./type";
 import "./index.less";
 export interface VirtualTableProps<RowType extends object> {
     dataSource: RowType[];
     columns: VirtualTableColumn<RowType>[];
-    scrollY: number;
     rowHeight: number;
     className?: string;
     rowClassName?: string;
     /**
-     * if scrollX is not provided, width: 100% will be used
-     * if width: 100% is used, please wrap the table with a container
+     * if scrollX and scrollY is not provided, height: 100% and width: 100% will be used and please wrap the table with a container
      */
+    scrollY?: number;
     scrollX?: number;
     loading?: boolean;
     emptyPlaceholder?: SafeReactChild;
-    rowSelection?: VirtualTableRowSelection<RowType>;
     onRowClick?: (record: RowType, rowIndex: number) => void;
     /**
      * Default: index
      */
     rowKey?: StringKey<RowType> | "index";
     headerHeight?: number;
-    rowExpand?: VirtualTableRowExpand<RowType>;
+    rowSelection?: VirtualTableRowSelection<RowType>;
 }
-export declare const VirtualTable: (<RowType extends object>({ columns, rowHeight, scrollY, dataSource, className, rowClassName, loading, emptyPlaceholder, rowSelection, onRowClick, scrollX, rowExpand, rowKey, headerHeight, }: VirtualTableProps<RowType>) => JSX.Element) & {
+export declare const VirtualTable: (<RowType extends object>({ columns, rowHeight, dataSource, className, rowClassName, loading, emptyPlaceholder, onRowClick, scrollY, scrollX, rowSelection, headerHeight, rowKey, }: VirtualTableProps<RowType>) => JSX.Element) & {
     displayName: string;
 };