@pinnacle0/web-ui 0.3.16 → 0.3.18-beta1

package/core/FlatList/shared/hooks/useBounceSwipe.js

@@ -0,0 +1,111 @@
+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);
+};
+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 { useElementScrollState } from "./useElementScrollState";
+import { Direction, useSwipe } from "../../../../hooks/useSwipe";
+import { useTransform } from "../../../../hooks/useTransform";
+export var useBounceSwipe = function (options) {
+    var contentRef = options.contentRef, animatedRef = options.animatedRef, axis = options.axis, _a = options.baseOffset, baseOffset = _a === void 0 ? 0 : _a, onStart = options.onStart, onMove = options.onMove, onEnd = options.onEnd, onCancel = options.onCancel;
+    var _b = __read(React.useState(null), 2), boundary = _b[0], setBoundary = _b[1];
+    var transit = useTransform(animatedRef, { duration: 300, timingFunction: "cubic-bezier(0, 0.61, 0.28, 1.22)", property: "transform" });
+    var startOffsetRef = React.useRef(0);
+    var isX = React.useMemo(function () { return axis === "horizontal"; }, [axis]);
+    var isY = React.useMemo(function () { return axis === "vertical"; }, [axis]);
+    var _c = useElementScrollState(contentRef), isScrollable = _c.isScrollable, isScrollTop = _c.isScrollTop, isScrollBottom = _c.isScrollBottom, isScrollLeft = _c.isScrollLeft, isScrollRight = _c.isScrollRight;
+    var threshold = function (_a) {
+        var direction = _a.direction;
+        if (isY) {
+            return (direction === Direction.DOWN && isScrollTop()) || (direction === Direction.UP && isScrollBottom());
+        }
+        else {
+            return (direction === Direction.RIGHT && isScrollLeft()) || (direction === Direction.LEFT && isScrollRight());
+        }
+    };
+    var clearSwipe = function () {
+        startOffsetRef.current = 0;
+        setBoundary(null);
+    };
+    React.useEffect(function () {
+        // Changing overflow style to fixed laggy bounce swipe in chrome
+        if (contentRef.current) {
+            if (boundary) {
+                contentRef.current.style.overflow = "hidden";
+            }
+            else {
+                contentRef.current.style.overflow = "auto";
+            }
+        }
+    }, [boundary, contentRef]);
+    var getOffset = function (delta, boundary) {
+        var resultOffset = [0, 0];
+        var limitedOffset = delta[isX ? 0 : 1] - startOffsetRef.current + baseOffset;
+        var computeResultOffset = function (value) { return [isX ? value : 0, isY ? value : 0]; };
+        if (boundary === "upper") {
+            resultOffset = limitedOffset < 0 ? null : computeResultOffset(limitedOffset);
+        }
+        else if (boundary === "lower") {
+            resultOffset = limitedOffset > 0 ? null : computeResultOffset(limitedOffset);
+        }
+        else {
+            resultOffset = computeResultOffset(limitedOffset);
+        }
+        return resultOffset;
+    };
+    var handlers = useSwipe({
+        onStart: function (state) {
+            var _a = __read(state.delta, 2), x = _a[0], y = _a[1], direction = state.direction;
+            isScrollable(axis) && setBoundary(direction === Direction.DOWN ? "upper" : "lower");
+            startOffsetRef.current = isX ? x : y;
+            onStart === null || onStart === void 0 ? void 0 : onStart(__assign(__assign({}, state), { boundary: boundary }));
+        },
+        onMove: function (state) {
+            var delta = state.delta, cancel = state.cancel;
+            var offset = getOffset(delta, boundary);
+            if (!offset) {
+                cancel();
+            }
+            else {
+                var _a = __read(offset, 2), x = _a[0], y = _a[1];
+                transit.to({ x: x, y: y, immediate: true });
+                onMove === null || onMove === void 0 ? void 0 : onMove(__assign(__assign({}, state), { boundary: boundary }));
+            }
+        },
+        onEnd: function (state) {
+            onEnd === null || onEnd === void 0 ? void 0 : onEnd(__assign(__assign({}, state), { boundary: boundary }));
+            transit.clear();
+            clearSwipe();
+        },
+        onCancel: function (state) {
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel(__assign(__assign({}, state), { boundary: boundary }));
+            transit.clear();
+            clearSwipe();
+        },
+    }, { threshold: threshold });
+    return handlers;
+};
+//# sourceMappingURL=useBounceSwipe.js.map

package/core/FlatList/shared/hooks/useBounceSwipe.js.map

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

package/core/FlatList/shared/hooks/useElementScrollState.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export declare const useElementScrollState: (ref: React.RefObject<HTMLElement | null>) => {
+    isScrollTop: () => boolean;
+    isScrollBottom: () => boolean;
+    isScrollLeft: () => boolean;
+    isScrollRight: () => boolean;
+    isScrollable: (direction: "vertical" | "horizontal") => boolean;
+};

package/core/FlatList/shared/hooks/useElementScrollState.js

@@ -0,0 +1,38 @@
+import React from "react";
+// need to cache scrollable results
+// only change when window resize, data change, and css change
+export var useElementScrollState = function (ref) {
+    var isScrollable = React.useCallback(function (direction) {
+        if (ref.current) {
+            var element = ref.current;
+            return direction === "vertical" ? element.scrollHeight > element.clientHeight : element.scrollWidth > element.clientWidth;
+        }
+        else {
+            return false;
+        }
+    }, [ref]);
+    var isScrollTop = React.useCallback(function () { var _a; return ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollTop) === 0; }, [ref]);
+    var isScrollBottom = React.useCallback(function () {
+        var element = ref.current;
+        if (element) {
+            var scrollHeight = element.scrollHeight, scrollTop = element.scrollTop, clientHeight = element.clientHeight;
+            return Math.ceil(scrollTop) + clientHeight >= scrollHeight;
+        }
+        else {
+            return false;
+        }
+    }, [ref]);
+    var isScrollLeft = React.useCallback(function () { var _a; return ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) === 0; }, [ref]);
+    var isScrollRight = React.useCallback(function () {
+        var element = ref.current;
+        if (element) {
+            var scrollWidth = element.scrollWidth, scrollLeft = element.scrollLeft, clientWidth = element.clientWidth;
+            return Math.ceil(scrollLeft) + clientWidth >= scrollWidth;
+        }
+        else {
+            return false;
+        }
+    }, [ref]);
+    return { isScrollTop: isScrollTop, isScrollBottom: isScrollBottom, isScrollLeft: isScrollLeft, isScrollRight: isScrollRight, isScrollable: isScrollable };
+};
+//# sourceMappingURL=useElementScrollState.js.map

package/core/FlatList/shared/hooks/useElementScrollState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElementScrollState.js","sourceRoot":"","sources":["../../../../../src/core/FlatList/shared/hooks/useElementScrollState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,mCAAmC;AAEnC,8DAA8D;AAE9D,MAAM,CAAC,IAAM,qBAAqB,GAAG,UAAC,GAAwC;IAC1E,IAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAClC,UAAC,SAAoC;QACjC,IAAI,GAAG,CAAC,OAAO,EAAE;YACb,IAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;YAC5B,OAAO,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;SAC7H;aAAM;YACH,OAAO,KAAK,CAAC;SAChB;IACL,CAAC,EACD,CAAC,GAAG,CAAC,CACR,CAAC;IAEF,IAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,sBAAM,OAAA,CAAA,MAAA,GAAG,CAAC,OAAO,0CAAE,SAAS,MAAK,CAAC,CAAA,EAAA,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IACjF,IAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC;QACrC,IAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;QAC5B,IAAI,OAAO,EAAE;YACF,IAAA,YAAY,GAA6B,OAAO,aAApC,EAAE,SAAS,GAAkB,OAAO,UAAzB,EAAE,YAAY,GAAI,OAAO,aAAX,CAAY;YACxD,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,YAAY,IAAI,YAAY,CAAC;SAC9D;aAAM;YACH,OAAO,KAAK,CAAC;SAChB;IACL,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,IAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,sBAAM,OAAA,CAAA,MAAA,GAAG,CAAC,OAAO,0CAAE,UAAU,MAAK,CAAC,CAAA,EAAA,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IACnF,IAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC;QACpC,IAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;QAC5B,IAAI,OAAO,EAAE;YACF,IAAA,WAAW,GAA6B,OAAO,YAApC,EAAE,UAAU,GAAiB,OAAO,WAAxB,EAAE,WAAW,GAAI,OAAO,YAAX,CAAY;YACvD,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,WAAW,IAAI,WAAW,CAAC;SAC7D;aAAM;YACH,OAAO,KAAK,CAAC;SAChB;IACL,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO,EAAC,WAAW,aAAA,EAAE,cAAc,gBAAA,EAAE,YAAY,cAAA,EAAE,aAAa,eAAA,EAAE,YAAY,cAAA,EAAC,CAAC;AACpF,CAAC,CAAC"}

package/core/FlatList/shared/hooks/useFlatList.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { LoadingType } from "../../type";
+interface Options {
+    contentRef: React.RefObject<HTMLElement>;
+    animatedRef: React.RefObject<HTMLElement>;
+    isLoading: boolean;
+    onPullDownRefresh?: () => void;
+    onPullUpLoading?: () => void;
+}
+export declare const useFlatList: (options: Options) => {
+    handlers: import("../../../../hooks/useSwipe").SwipeHookResult;
+    loadingType: LoadingType;
+};
+export {};

package/core/FlatList/shared/hooks/useFlatList.js

@@ -0,0 +1,86 @@
+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 { Direction } from "../../../../hooks/useSwipe";
+import { useTransform } from "../../../../hooks/useTransform";
+import { PULL_DOWN_REFRESH_THRESHOLD } from "../../type";
+import { useBounceSwipe } from "./useBounceSwipe";
+import { useElementScrollState } from "./useElementScrollState";
+export var useFlatList = function (options) {
+    var contentRef = options.contentRef, animatedRef = options.animatedRef, isLoading = options.isLoading, onPullDownRefresh = options.onPullDownRefresh, onPullUpLoading = options.onPullUpLoading;
+    var startOffsetRef = React.useRef(0);
+    var _a = __read(React.useState(null), 2), loadingType = _a[0], setLoadingType = _a[1];
+    var loadingTypeRef = React.useRef(null);
+    loadingTypeRef.current = loadingType;
+    var isScrollable = useElementScrollState(contentRef).isScrollable;
+    var transit = useTransform(animatedRef);
+    var transitRef = React.useRef(transit);
+    transitRef.current = transit;
+    var reset = React.useCallback(function () {
+        startOffsetRef.current = 0;
+    }, []);
+    var handlers = useBounceSwipe({
+        axis: "vertical",
+        contentRef: contentRef,
+        animatedRef: animatedRef,
+        onStart: function (_a) {
+            var _b = __read(_a.delta, 2), y = _b[1];
+            startOffsetRef.current = y;
+        },
+        onEnd: function (_a) {
+            var delta = _a.delta, direction = _a.direction, boundary = _a.boundary;
+            if (isLoading) {
+                if (boundary !== "upper") {
+                    transit.to({
+                        y: PULL_DOWN_REFRESH_THRESHOLD,
+                    });
+                }
+            }
+            else {
+                if (Math.abs(startOffsetRef.current - delta[1]) >= PULL_DOWN_REFRESH_THRESHOLD) {
+                    var scrollable = isScrollable("vertical");
+                    if (boundary === "upper" || (!scrollable && direction === Direction.DOWN)) {
+                        setLoadingType("refresh");
+                        onPullDownRefresh === null || onPullDownRefresh === void 0 ? void 0 : onPullDownRefresh();
+                    }
+                    else {
+                        setLoadingType("loading");
+                        onPullUpLoading === null || onPullUpLoading === void 0 ? void 0 : onPullUpLoading();
+                    }
+                }
+            }
+            reset();
+        },
+        onCancel: reset,
+    });
+    React.useEffect(function () {
+        if (isLoading) {
+            if (loadingTypeRef.current === "refresh") {
+                transitRef.current.to({
+                    y: PULL_DOWN_REFRESH_THRESHOLD,
+                    immediate: false,
+                });
+            }
+        }
+        else {
+            transitRef.current.clear();
+            setLoadingType(null);
+        }
+    }, [isLoading]);
+    return { handlers: handlers, loadingType: loadingType };
+};
+//# sourceMappingURL=useFlatList.js.map

package/core/FlatList/shared/hooks/useFlatList.js.map

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

package/core/FlatList/shared/hooks/useLoadingWithDelay.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This hook prevent loading state causing ui to flash
+ * For instance, in real life loading only last for 50ms, so it make loading ui appear in a blink of an eye, which is not good
+ * Hook will only delay the loading state change from true to false, it force loading ui at least appear for a period of time
+ * @param loading
+ * @param delay
+ * @returns
+ */
+export declare const useLoadingWithDelay: (loading: boolean, delay: number) => Readonly<boolean>;

package/core/FlatList/shared/hooks/useLoadingWithDelay.js

@@ -0,0 +1,52 @@
+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";
+/**
+ * This hook prevent loading state causing ui to flash
+ * For instance, in real life loading only last for 50ms, so it make loading ui appear in a blink of an eye, which is not good
+ * Hook will only delay the loading state change from true to false, it force loading ui at least appear for a period of time
+ * @param loading
+ * @param delay
+ * @returns
+ */
+export var useLoadingWithDelay = function (loading, delay) {
+    var _a = __read(React.useState(loading), 2), loadingWithDelay = _a[0], setLoadingWithDelay = _a[1];
+    var startTimeRef = React.useRef(null);
+    var setLoadingRef = React.useRef();
+    var setLoading = React.useCallback(function (value) {
+        if (value) {
+            setLoadingWithDelay(true);
+            startTimeRef.current = Date.now();
+            setTimeout(function () { return (startTimeRef.current = null); }, delay);
+        }
+        else {
+            if (startTimeRef.current) {
+                setTimeout(function () { return setLoadingWithDelay(false); }, Math.abs(delay - (Date.now() - startTimeRef.current)));
+            }
+            else {
+                setLoadingWithDelay(value);
+            }
+        }
+    }, [delay]);
+    setLoadingRef.current = setLoading;
+    React.useEffect(function () {
+        var _a;
+        (_a = setLoadingRef.current) === null || _a === void 0 ? void 0 : _a.call(setLoadingRef, loading);
+    }, [loading]);
+    return loadingWithDelay;
+};
+//# sourceMappingURL=useLoadingWithDelay.js.map

package/core/FlatList/shared/hooks/useLoadingWithDelay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLoadingWithDelay.js","sourceRoot":"","sources":["../../../../../src/core/FlatList/shared/hooks/useLoadingWithDelay.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;GAOG;AACH,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,OAAgB,EAAE,KAAa;IACzD,IAAA,KAAA,OAA0C,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAA,EAAhE,gBAAgB,QAAA,EAAE,mBAAmB,QAA2B,CAAC;IACxE,IAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAgB,IAAI,CAAC,CAAC;IACvD,IAAM,aAAa,GAAG,KAAK,CAAC,MAAM,EAA4B,CAAC;IAE/D,IAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAChC,UAAC,KAAc;QACX,IAAI,KAAK,EAAE;YACP,mBAAmB,CAAC,IAAI,CAAC,CAAC;YAC1B,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YAClC,UAAU,CAAC,cAAM,OAAA,CAAC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC,EAA7B,CAA6B,EAAE,KAAK,CAAC,CAAC;SAC1D;aAAM;YACH,IAAI,YAAY,CAAC,OAAO,EAAE;gBACtB,UAAU,CAAC,cAAM,OAAA,mBAAmB,CAAC,KAAK,CAAC,EAA1B,CAA0B,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;aACvG;iBAAM;gBACH,mBAAmB,CAAC,KAAK,CAAC,CAAC;aAC9B;SACJ;IACL,CAAC,EACD,CAAC,KAAK,CAAC,CACV,CAAC;IAEF,aAAa,CAAC,OAAO,GAAG,UAAU,CAAC;IAEnC,KAAK,CAAC,SAAS,CAAC;;QACZ,MAAA,aAAa,CAAC,OAAO,8DAAG,OAAO,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,gBAAgB,CAAC;AAC5B,CAAC,CAAC"}

package/core/FlatList/type.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export declare const PULL_DOWN_REFRESH_THRESHOLD = 50;
+export declare type LoadingType = "refresh" | "loading" | null;
+export interface FlatListItemProps<T> {
+    data: T;
+    index: number;
+}
+export declare type ItemRenderer<T> = React.FunctionComponent<FlatListItemProps<T>>;
+export interface FlatListProps<T> {
+    data: T[];
+    renderItem: ItemRenderer<T>;
+    loading?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    onPullUpLoading?: () => void;
+    onPullDownRefresh?: () => void;
+    autoLoad?: boolean | number;
+    emptyPlaceholder?: string | React.ReactElement;
+    contentStyle?: React.CSSProperties;
+    bounceEffect?: boolean;
+    pullUpLoadingMessage?: string;
+    endOfListMessage?: string;
+    pullDownRefreshMessage?: string;
+}
+export interface FlatListItemProps<T> {
+    data: T;
+    index: number;
+}
+export interface FooterData {
+    loading: boolean;
+    ended: boolean;
+    loadingMessage?: string;
+    endMessage?: string;
+}

package/core/FlatList/type.js

@@ -0,0 +1,2 @@
+export var PULL_DOWN_REFRESH_THRESHOLD = 50;
+//# sourceMappingURL=type.js.map

package/core/FlatList/type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.js","sourceRoot":"","sources":["../../../src/core/FlatList/type.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,2BAA2B,GAAG,EAAE,CAAC"}

package/core/VirtualTable/TableHeader.d.ts

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

package/core/VirtualTable/TableHeader.js

@@ -25,8 +25,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import React from "react";
 export var TableHeader = Object.assign(function (_a) {
-    var headersRef = _a.headersRef, headerHeight = _a.headerHeight, transformedColumns = _a.transformedColumns, stickyPosition = _a.stickyPosition, getFixedColumnClassNames = _a.getFixedColumnClassNames;
-    return (React.createElement("div", { className: "table-headers", ref: headersRef, style: { height: headerHeight, width: scrollX || "100%" } }, transformedColumns.map(function (_a, columnIndex) {
+    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;
         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;

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;AAY1B,MAAM,CAAC,IAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CACpC,UAAkC,EAAwG;QAAvG,UAAU,gBAAA,EAAE,YAAY,kBAAA,EAAE,kBAAkB,wBAAA,EAAE,cAAc,oBAAA,EAAE,wBAAwB,8BAAA;IACrH,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,kBAAkB,CAAC,GAAG,CAAC,UAAC,EAAqC,EAAE,WAAW;;YAAjD,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,OAAO,aAAA;QACzD,IAAM,mBAAmB,GAAG,CAAA,MAAA,cAAc,CAAC,WAAW,CAAC,0CAAE,KAAK,KAAI,CAAC,CAAC;QACpE,OAAO,CACH,6BACI,SAAS,EAAE,eAAC,cAAc,UAAK,wBAAwB,CAAC,KAAK,EAAE,WAAW,CAAC,UAAE,IAAI,CAAC,GAAG,CAAC,EACtF,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;AAW1B,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,eAAC,cAAc,UAAK,wBAAwB,CAAC,KAAK,EAAE,WAAW,CAAC,UAAE,IAAI,CAAC,GAAG,CAAC,EACtF,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"}

package/core/VirtualTable/TableRow.d.ts

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

package/core/VirtualTable/TableRow.js

@@ -25,25 +25,34 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import React from "react";
 export var TableRow = Object.assign(function (_a) {
-    var virtualItem = _a.virtualItem, getFixedColumnClassNames = _a.getFixedColumnClassNames, dataSource = _a.dataSource, transformedColumns = _a.transformedColumns, columnWidths = _a.columnWidths, scrollBarSize = _a.scrollBarSize, stickyPosition = _a.stickyPosition, lastShownColumnIndex = _a.lastShownColumnIndex, rowClassName = _a.rowClassName, onRowClick = _a.onRowClick;
+    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];
     var rowIndex = virtualItem.index;
-    var currentData = dataSource[rowIndex];
-    return (React.createElement("div", { key: rowIndex, className: ["table-row", rowClassName, rowIndex % 2 ? "odd" : "even"].join(" "), style: { height: virtualItem.size, transform: "translateY(".concat(virtualItem.start, "px)") }, onClick: function () { return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(currentData, rowIndex); } }, transformedColumns.map(function (column, columnIndex) {
-        var _a;
-        var colSpan = column.colSpan ? column.colSpan(currentData, 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(currentData, 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: __spreadArray(["table-cell"], __read(getFixedColumnClassNames(column.fixed, columnIndex)), false).join(" "), key: columnIndex, style: {
-                height: "100%",
-                width: cellWidth - (isLastShownColumn ? scrollBarSize : 0),
-                textAlign: column.align,
-                left: column.fixed === "left" ? stickyPositionValue : undefined,
-                right: column.fixed === "right" ? stickyPositionValue - (isLastShownColumn ? 0 : scrollBarSize) : undefined,
-            } }, renderData)));
-    })));
+    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: ["table-row", rowClassName, rowIndex % 2 ? "odd" : "even"].join(" "), 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: __spreadArray(["table-cell"], __read(getFixedColumnClassNames(column.fixed, columnIndex)), false).join(" "), 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: "expand-row ".concat(isExpanded ? "expanded" : "") }, rowExpand.renderExpandRow(data, rowIndex))));
 }, { displayName: "TableRow" });
 //# 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/useColumnWidths.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnWidths.js","sourceRoot":"","sources":["../../../../src/core/VirtualTable/hooks/useColumnWidths.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;GAKG;AAEH,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,UAA2C;IACjE,IAAA,KAAA,OAA4B,KAAK,CAAC,QAAQ,CAAW,EAAE,CAAC,IAAA,EAAvD,SAAS,QAAA,EAAE,YAAY,QAAgC,CAAC;IAE/D,IAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC;QACzC,IAAI,CAAC,UAAU,CAAC,OAAO;YAAE,OAAO;QAChC,IAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;QACrE,IAAM,MAAM,GAAa,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,UAAA,MAAM;YAC5D,IAAA,KAAK,GAAI,MAAM,CAAC,qBAAqB,EAAE,MAAlC,CAAmC;YAC/C,OAAO,KAAK,CAAC;QACjB,CAAC,CAAC,CAAC;QACH,YAAY,CAAC,MAAM,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,EAAC,YAAY,EAAE,SAAS,EAAE,kBAAkB,oBAAA,EAAC,CAAC;AACzD,CAAC,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDebounce.js","sourceRoot":"","sources":["../../../../src/core/VirtualTable/hooks/useDebounce.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,IAAM,WAAW,GAAG,UAA+B,QAAkC;IACxF,IAAM,KAAK,GAAG,KAAK,CAAC,MAAM,EAAU,CAAC;IAErC,IAAM,QAAQ,GAAG;QACb,OAAO;YAAU,cAAc;iBAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;gBAAd,yBAAc;;YAC3B,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAC5B,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC;gBAC9B,QAAQ,wCAAI,IAAI,WAAE;YACtB,CAAC,EAAE,GAAG,CAAC,CAAC;QACZ,CAAC,CAAC;IACN,CAAC,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,cAAM,OAAA,cAAM,OAAA,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,EAA3B,CAA2B,EAAjC,CAAiC,EAAE,EAAE,CAAC,CAAC;IAC7D,2FAA2F;IAC3F,OAAO,KAAK,CAAC,OAAO,CAAC,cAAM,OAAA,QAAQ,EAAE,EAAV,CAAU,EAAE,EAAE,CAAC,CAAC;AAC/C,CAAC,CAAC"}

package/core/VirtualTable/{useLayout.d.ts → hooks/useLayout.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import type { VirtualTableColumn } from "./type";
+import type { VirtualTableColumn } from "../type";
 interface Props<RowType extends object> {
     headersRef: React.RefObject<HTMLDivElement>;
     scrollContentRef: React.RefObject<HTMLDivElement>;
@@ -9,6 +9,9 @@ interface Props<RowType extends object> {
 export declare const useLayout: <RowType extends object>({ headersRef, scrollContentRef, isScrollable, columns }: Props<RowType>) => {
     columnWidths: number[];
     scrollBarSize: number;
-    stickyPosition: Record<number, import("./useStickyPosition").StickyPosition>;
+    stickyPosition: Record<number, import("../type").StickyPosition>;
+    isScrollToEdge: () => void;
+    isScrollToLeft: boolean;
+    isScrollToRight: boolean;
 };
 export {};

package/core/VirtualTable/{useLayout.js → hooks/useLayout.js}

@@ -3,13 +3,16 @@ import { useDebounce } from "./useDebounce";
 import { useScrollBarSize } from "./useScrollBarSize";
 import { useColumnWidths } from "./useColumnWidths";
 import { useStickyPosition } from "./useStickyPosition";
+import { useScrollToEdge } from "./useScrollToEdge";
 export var useLayout = function (_a) {
     var headersRef = _a.headersRef, scrollContentRef = _a.scrollContentRef, isScrollable = _a.isScrollable, columns = _a.columns;
     var _b = useColumnWidths(headersRef), calculateColWidths = _b.calculateColWidths, columnWidths = _b.columnWidths;
     var _c = useScrollBarSize(scrollContentRef, isScrollable), calculateScrollBarSize = _c.calculateScrollBarSize, scrollBarSize = _c.scrollBarSize;
+    var _d = useScrollToEdge(scrollContentRef), isScrollToEdge = _d.isScrollToEdge, isScrollToLeft = _d.isScrollToLeft, isScrollToRight = _d.isScrollToRight;
     var stickyPosition = useStickyPosition(columns, columnWidths);
     var debouncedCalculateColWidths = useDebounce(calculateColWidths);
     var debouncedCalculateScrollBarSize = useDebounce(calculateScrollBarSize);
+    var debouncedIsScrollToEdge = useDebounce(isScrollToEdge);
     var handler = React.useCallback(function (event) {
         if (event.currentTarget && "querySelector" in event.currentTarget && headersRef.current) {
             var element = event.currentTarget;
@@ -17,9 +20,10 @@ export var useLayout = function (_a) {
             if (result) {
                 debouncedCalculateColWidths();
                 debouncedCalculateScrollBarSize();
+                debouncedIsScrollToEdge();
             }
         }
-    }, [debouncedCalculateColWidths, debouncedCalculateScrollBarSize, headersRef]);
+    }, [debouncedCalculateColWidths, debouncedCalculateScrollBarSize, headersRef, debouncedIsScrollToEdge]);
     React.useEffect(function () {
         document.body.addEventListener("transitionend", handler);
         document.body.addEventListener("animationend", handler);
@@ -32,6 +36,9 @@ export var useLayout = function (_a) {
         columnWidths: columnWidths,
         scrollBarSize: scrollBarSize,
         stickyPosition: stickyPosition,
+        isScrollToEdge: isScrollToEdge,
+        isScrollToLeft: isScrollToLeft,
+        isScrollToRight: isScrollToRight,
     };
 };
 //# sourceMappingURL=useLayout.js.map