@qsxy/element-plus-react 1.0.2 → 2.0.0

package/dist/VirtualList/components/scrollbar.js

@@ -0,0 +1,272 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import classNames from 'classnames';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { useClassNames } from "../../hooks";
+import { BAR_MAP } from "../../Scrollbar/util";
+import { cAF, rAF } from "../../Util";
+import { HORIZONTAL, SCROLLBAR_MIN_SIZE, ScrollbarDirKey } from "../defaults";
+import { renderThumbStyle } from "../utils";
+var Scrollbar = /*#__PURE__*/forwardRef(function (props, ref) {
+  var alwaysOn = props.alwaysOn,
+    className = props.class,
+    layout = props.layout,
+    ratio = props.ratio,
+    clientSize = props.clientSize,
+    scrollFrom = props.scrollFrom,
+    _props$scrollbarSize = props.scrollbarSize,
+    scrollbarSize = _props$scrollbarSize === void 0 ? 6 : _props$scrollbarSize,
+    _props$startGap = props.startGap,
+    startGap = _props$startGap === void 0 ? 0 : _props$startGap,
+    _props$endGap = props.endGap,
+    endGap = _props$endGap === void 0 ? 2 : _props$endGap,
+    _props$visible = props.visible,
+    visible = _props$visible === void 0 ? true : _props$visible,
+    onScroll = props.onScroll,
+    onStartMove = props.onStartMove,
+    onStopMove = props.onStopMove;
+  var GAP = useMemo(function () {
+    return startGap + endGap;
+  }, [endGap, startGap]); // top 2 + bottom 2 | left 2 + right 2
+
+  var nsVirtualScrollbar = useClassNames('virtual-scrollbar');
+  var nsScrollbar = useClassNames('scrollbar');
+
+  // DOM refs
+  var trackRef = useRef(null);
+  var thumbRef = useRef(null);
+
+  // local variables
+  var frameHandleRef = useRef(null);
+  var onselectstartStoreRef = useRef(null);
+
+  // state
+  // const [state, setState] = useState<ScrollState>({
+  //     isDragging: false,
+  //     traveled: 0,
+  // });
+  var stateRef = useRef({
+    isDragging: false,
+    traveled: 0
+  });
+  var bar = useMemo(function () {
+    return BAR_MAP[layout];
+  }, [layout]);
+  var trackSize = useMemo(function () {
+    return clientSize - GAP;
+  }, [clientSize, GAP]);
+  var trackStyle = useMemo(function () {
+    return _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+      position: 'absolute',
+      width: "".concat(layout === HORIZONTAL ? trackSize : scrollbarSize, "px"),
+      height: "".concat(layout === HORIZONTAL ? scrollbarSize : trackSize, "px")
+    }, ScrollbarDirKey[layout], '2px'), "right", '2px'), "bottom", '2px'), "borderRadius", '4px');
+  }, [layout, trackSize, scrollbarSize]);
+  var thumbSize = useMemo(function () {
+    if (ratio >= 100) {
+      return Number.POSITIVE_INFINITY;
+    }
+    if (ratio >= 50) {
+      return ratio * trackSize / 100;
+    }
+    var SCROLLBAR_MAX_SIZE = trackSize / 3;
+    return Math.floor(Math.min(Math.max(ratio * trackSize / 100, SCROLLBAR_MIN_SIZE), SCROLLBAR_MAX_SIZE));
+  }, [ratio, trackSize]);
+  var thumbStyle = useCallback(function () {
+    if (!Number.isFinite(thumbSize)) {
+      return {
+        display: 'none'
+      };
+    }
+    var thumb = "".concat(thumbSize, "px");
+    var style = renderThumbStyle({
+      bar: bar,
+      size: thumb,
+      move: stateRef.current.traveled
+    }, layout);
+    return style;
+  }, [thumbSize, bar, layout]);
+  var totalSteps = useMemo(function () {
+    return Math.ceil(clientSize - thumbSize - GAP);
+  }, [clientSize, thumbSize, GAP]);
+  var onMouseUp = function onMouseUp() {
+    // setState(prev => ({
+    //     ...prev,
+    //     isDragging: false,
+    //     [bar.axis]: 0,
+    // }));
+    stateRef.current = _objectSpread(_objectSpread({}, stateRef.current), {}, _defineProperty({
+      isDragging: false
+    }, bar.axis, 0));
+    detachEvents();
+    onStopMove === null || onStopMove === void 0 || onStopMove();
+  };
+  var onMouseMove = function onMouseMove(e) {
+    var isDragging = stateRef.current.isDragging;
+    if (!isDragging) {
+      return;
+    }
+    if (!thumbRef.current || !trackRef.current) {
+      return;
+    }
+    var prevPage = stateRef.current[bar.axis];
+    if (!prevPage) {
+      return;
+    }
+    cAF(frameHandleRef.current);
+    // using the current track's offset top/left - the current pointer's clientY/clientX
+    // to get the relative position of the pointer to the track.
+    var offset = (trackRef.current.getBoundingClientRect()[bar.direction] - e[bar.client]) * -1;
+
+    // find where the thumb was clicked on.
+    var thumbClickPosition = thumbRef.current[bar.offset] - prevPage;
+
+    /**
+     *  +--------------+                                   +--------------+
+     *  |              -  <--------- thumb.offsetTop       |              |
+     *  |             |+|             <--+                 |              |
+     *  |              -                 |                 |              |
+     *  |   Content    |                 |                 |              |
+     *  |              |                 |                 |              |
+     *  |              |                 |                 |              |
+     *  |              |                 |                 |              -
+     *  |              |                 +-->              |             |+|
+     *  |              |                                   |              -
+     *  +--------------+                                   +--------------+
+     */
+
+    // using the current position - prev position to
+    var distance = offset - thumbClickPosition;
+    // get how many steps in total.
+    // gap of 2 on top, 2 on bottom, in total 4.
+    // using totalSteps ÷ totalSize getting each step's size * distance to get the new
+    // scroll offset to scrollTo
+    frameHandleRef.current = rAF(function () {
+      // setState(prev => ({
+      //     ...prev,
+      //     traveled: Math.max(0, Math.min(distance, totalSteps)),
+      // }));
+    });
+    stateRef.current = _objectSpread(_objectSpread({}, stateRef.current), {}, {
+      traveled: Math.max(0, Math.min(distance, totalSteps))
+    });
+    onScroll === null || onScroll === void 0 || onScroll(distance, totalSteps);
+  };
+  var attachEvents = function attachEvents() {
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+    var thumbEl = thumbRef.current;
+    if (!thumbEl) {
+      return;
+    }
+    onselectstartStoreRef.current = document.onselectstart;
+    document.onselectstart = function () {
+      return false;
+    };
+    thumbEl.addEventListener('touchmove', onMouseMove, {
+      passive: true
+    });
+    thumbEl.addEventListener('touchend', onMouseUp);
+  };
+  var detachEvents = function detachEvents() {
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+    document.onselectstart = onselectstartStoreRef.current;
+    onselectstartStoreRef.current = null;
+    var thumbEl = thumbRef.current;
+    if (!thumbEl) {
+      return;
+    }
+    thumbEl.removeEventListener('touchmove', onMouseMove);
+    thumbEl.removeEventListener('touchend', onMouseUp);
+  };
+  var onThumbMouseDown = function onThumbMouseDown(e) {
+    e.stopPropagation();
+    if ('ctrlKey' in e && e.ctrlKey) {
+      return;
+    }
+    if ('button' in e && [1, 2].includes(e.button)) {
+      return;
+    }
+    stateRef.current = _objectSpread(_objectSpread({}, stateRef.current), {}, _defineProperty({
+      isDragging: true
+    }, bar.axis, e.target[bar.offset] - (e[bar.client] - e.target.getBoundingClientRect()[bar.direction])));
+    // setState(stateRef.current);
+
+    onStartMove === null || onStartMove === void 0 || onStartMove();
+    attachEvents();
+  };
+  var clickTrackHandler = useCallback(function (e) {
+    var offset = Math.abs(e.target.getBoundingClientRect()[bar.direction] - e[bar.client]);
+    var thumbHalf = thumbRef.current[bar.offset] / 2;
+    var distance = offset - thumbHalf;
+
+    // setState(prev => ({
+    //     ...prev,
+    //     traveled: Math.max(0, Math.min(distance, totalSteps)),
+    // }));
+    stateRef.current = _objectSpread(_objectSpread({}, stateRef.current), {}, {
+      traveled: Math.max(0, Math.min(distance, totalSteps))
+    });
+    onScroll === null || onScroll === void 0 || onScroll(distance, totalSteps);
+  }, [bar, totalSteps, onScroll]);
+
+  // Watch for scrollFrom changes
+  useEffect(function () {
+    if (stateRef.current.isDragging) {
+      return;
+    }
+    /**
+     *  this is simply mapping the current scrollbar offset
+     *
+     *  formula 1:
+     *    v = scrollOffset / (estimatedTotalSize - clientSize)
+     *    traveled = v * (clientSize - thumbSize - GAP) --> v * totalSteps
+     *
+     *  formula 2:
+     *    traveled = (v * clientSize) / (clientSize / totalSteps) --> (v * clientSize) * (totalSteps / clientSize) --> v * totalSteps
+     */
+    // setState(prev => ({
+    //     ...prev,
+    //     traveled: Math.ceil(scrollFrom * totalSteps),
+    // }));
+    stateRef.current = _objectSpread(_objectSpread({}, stateRef.current), {}, {
+      traveled: Math.ceil(scrollFrom * totalSteps)
+    });
+  }, [scrollFrom]);
+  useEffect(function () {
+    return function () {
+      detachEvents();
+    };
+  }, []);
+  useImperativeHandle(ref, function () {
+    return {
+      onMouseUp: onMouseUp
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    ref: trackRef,
+    className: classNames(nsVirtualScrollbar.b(), className, (alwaysOn || stateRef.current.isDragging) && 'always-on'),
+    style: trackStyle,
+    onMouseDown: function onMouseDown(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      clickTrackHandler(e);
+    },
+    onTouchStart: function onTouchStart(e) {
+      e.preventDefault();
+      onThumbMouseDown(e);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: thumbRef,
+    className: nsScrollbar.e('thumb'),
+    style: thumbStyle(),
+    onMouseDown: onThumbMouseDown
+  }));
+});
+export default Scrollbar;

package/dist/VirtualList/defaults.d.ts

@@ -0,0 +1,26 @@
+export declare const DEFAULT_DYNAMIC_LIST_ITEM_SIZE = 50;
+export declare const ITEM_RENDER_EVT = "itemRendered";
+export declare const SCROLL_EVT = "scroll";
+export declare const FORWARD = "forward";
+export declare const BACKWARD = "backward";
+export declare const AUTO_ALIGNMENT = "auto";
+export declare const SMART_ALIGNMENT = "smart";
+export declare const START_ALIGNMENT = "start";
+export declare const CENTERED_ALIGNMENT = "center";
+export declare const END_ALIGNMENT = "end";
+export declare const HORIZONTAL = "horizontal";
+export declare const VERTICAL = "vertical";
+export declare const LTR = "ltr";
+export declare const RTL = "rtl";
+export declare const RTL_OFFSET_NAG = "negative";
+export declare const RTL_OFFSET_POS_ASC = "positive-ascending";
+export declare const RTL_OFFSET_POS_DESC = "positive-descending";
+export declare const ScrollbarSizeKey: {
+    horizontal: string;
+    vertical: string;
+};
+export declare const ScrollbarDirKey: {
+    horizontal: string;
+    vertical: string;
+};
+export declare const SCROLLBAR_MIN_SIZE = 20;

package/dist/VirtualList/defaults.js

@@ -0,0 +1,24 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+export var DEFAULT_DYNAMIC_LIST_ITEM_SIZE = 50;
+export var ITEM_RENDER_EVT = 'itemRendered';
+export var SCROLL_EVT = 'scroll';
+export var FORWARD = 'forward';
+export var BACKWARD = 'backward';
+export var AUTO_ALIGNMENT = 'auto';
+export var SMART_ALIGNMENT = 'smart';
+export var START_ALIGNMENT = 'start';
+export var CENTERED_ALIGNMENT = 'center';
+export var END_ALIGNMENT = 'end';
+export var HORIZONTAL = 'horizontal';
+export var VERTICAL = 'vertical';
+export var LTR = 'ltr';
+export var RTL = 'rtl';
+export var RTL_OFFSET_NAG = 'negative';
+export var RTL_OFFSET_POS_ASC = 'positive-ascending';
+export var RTL_OFFSET_POS_DESC = 'positive-descending';
+export var ScrollbarSizeKey = _defineProperty(_defineProperty({}, HORIZONTAL, 'height'), VERTICAL, 'width');
+export var ScrollbarDirKey = _defineProperty(_defineProperty({}, HORIZONTAL, 'left'), VERTICAL, 'top');
+export var SCROLLBAR_MIN_SIZE = 20;

package/dist/VirtualList/hooks/use-cache.d.ts

@@ -0,0 +1 @@
+export declare const useCache: <T>() => (arg1: any, arg2: any, arg3: any) => any;

package/dist/VirtualList/hooks/use-cache.js

@@ -0,0 +1,16 @@
+import memoize from 'memoize-one';
+import { useCallback, useRef } from 'react';
+export var useCache = function useCache() {
+  var cacheRef = useRef();
+  if (!cacheRef.current) {
+    var getItemStyleCache = function getItemStyleCache(_, __, ___) {
+      return {};
+    };
+    cacheRef.current = memoize(getItemStyleCache);
+  }
+  var getCachedStyle = useCallback(function (arg1, arg2, arg3) {
+    var _cacheRef$current;
+    return (_cacheRef$current = cacheRef.current) === null || _cacheRef$current === void 0 ? void 0 : _cacheRef$current.call(cacheRef, arg1, arg2, arg3);
+  }, []);
+  return getCachedStyle;
+};

package/dist/VirtualList/hooks/use-grid-touch.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+import { GridScrollOptions, GridStates } from '../types';
+export declare const useGridTouch: (windowRef: RefObject<HTMLElement | null>, states: GridStates, scrollTo: (scrollOptions: GridScrollOptions) => void, estimatedTotalWidth: number, estimatedTotalHeight: number, parsedWidth: number, parsedHeight: number) => {
+    touchStartX: import("react").MutableRefObject<number>;
+    touchStartY: import("react").MutableRefObject<number>;
+    handleTouchStart: (event: TouchEvent) => void;
+    handleTouchMove: (event: TouchEvent) => void;
+};

package/dist/VirtualList/hooks/use-grid-touch.js

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { cAF, rAF } from "../../Util";
+export var useGridTouch = function useGridTouch(windowRef, states, scrollTo, estimatedTotalWidth, estimatedTotalHeight, parsedWidth, parsedHeight) {
+  var touchStartX = useRef(0);
+  var touchStartY = useRef(0);
+  var frameHandle = useRef(undefined);
+  var deltaX = useRef(0);
+  var deltaY = useRef(0);
+  var handleTouchStart = useCallback(function (event) {
+    cAF(frameHandle.current);
+    touchStartX.current = event.touches[0].clientX;
+    touchStartY.current = event.touches[0].clientY;
+    deltaX.current = 0;
+    deltaY.current = 0;
+  }, []);
+  var handleTouchMove = useCallback(function (event) {
+    event.preventDefault();
+    cAF(frameHandle.current);
+    deltaX.current += touchStartX.current - event.touches[0].clientX;
+    deltaY.current += touchStartY.current - event.touches[0].clientY;
+    touchStartX.current = event.touches[0].clientX;
+    touchStartY.current = event.touches[0].clientY;
+    frameHandle.current = rAF(function () {
+      var maxScrollLeft = estimatedTotalWidth - parsedWidth;
+      var maxScrollTop = estimatedTotalHeight - parsedHeight;
+      var safeScrollLeft = Math.min(states.scrollLeft + deltaX.current, maxScrollLeft);
+      var safeScrollTop = Math.min(states.scrollTop + deltaY.current, maxScrollTop);
+      scrollTo({
+        scrollLeft: safeScrollLeft,
+        scrollTop: safeScrollTop
+      });
+      deltaX.current = 0;
+      deltaY.current = 0;
+    });
+  }, [estimatedTotalWidth, estimatedTotalHeight, parsedWidth, parsedHeight, states, scrollTo]);
+  useEffect(function () {
+    var element = windowRef.current;
+    if (!element) {
+      return;
+    }
+    element.addEventListener('touchstart', handleTouchStart, {
+      passive: true
+    });
+    element.addEventListener('touchmove', handleTouchMove, {
+      passive: false
+    });
+    return function () {
+      element.removeEventListener('touchstart', handleTouchStart);
+      element.removeEventListener('touchmove', handleTouchMove);
+    };
+  }, [windowRef, handleTouchStart, handleTouchMove]);
+  return {
+    touchStartX: touchStartX,
+    touchStartY: touchStartY,
+    handleTouchStart: handleTouchStart,
+    handleTouchMove: handleTouchMove
+  };
+};

package/dist/VirtualList/hooks/use-grid-wheel.d.ts

@@ -0,0 +1,12 @@
+interface GridWheelState {
+    atXStartEdge: boolean;
+    atXEndEdge: boolean;
+    atYStartEdge: boolean;
+    atYEndEdge: boolean;
+}
+type GridWheelHandler = (x: number, y: number) => void;
+export declare const useGridWheel: ({ atXEndEdge, atXStartEdge, atYEndEdge, atYStartEdge }: GridWheelState, onWheelDelta: GridWheelHandler) => {
+    hasReachedEdge: (x: number, y: number) => boolean;
+    onWheel: (e: WheelEvent) => void;
+};
+export {};

package/dist/VirtualList/hooks/use-grid-wheel.js

@@ -0,0 +1,48 @@
+import { cAF, rAF } from "../../Util";
+import { useCallback, useRef } from 'react';
+export var useGridWheel = function useGridWheel(_ref, onWheelDelta) {
+  var atXEndEdge = _ref.atXEndEdge,
+    atXStartEdge = _ref.atXStartEdge,
+    atYEndEdge = _ref.atYEndEdge,
+    atYStartEdge = _ref.atYStartEdge;
+  var frameHandle = useRef(null);
+  var xOffset = useRef(0);
+  var yOffset = useRef(0);
+  var hasReachedEdge = useCallback(function (x, y) {
+    var xEdgeReached = x < 0 && atXStartEdge || x > 0 && atXEndEdge;
+    var yEdgeReached = y < 0 && atYStartEdge || y > 0 && atYEndEdge;
+    return xEdgeReached || yEdgeReached;
+  }, [atXStartEdge, atXEndEdge, atYStartEdge, atYEndEdge]);
+  var onWheel = useCallback(function (e) {
+    cAF(frameHandle.current);
+    var x = e.deltaX;
+    var y = e.deltaY;
+    // Simulate native behavior when using touch pad/track pad for wheeling.
+    if (Math.abs(x) > Math.abs(y)) {
+      y = 0;
+    } else {
+      x = 0;
+    }
+
+    // Special case for windows machine with shift key + wheel scrolling
+    if (e.shiftKey && y !== 0) {
+      x = y;
+      y = 0;
+    }
+    if (hasReachedEdge(x, y)) {
+      return;
+    }
+    xOffset.current += x;
+    yOffset.current += y;
+    e.preventDefault();
+    frameHandle.current = rAF(function () {
+      onWheelDelta(xOffset.current, yOffset.current);
+      xOffset.current = 0;
+      yOffset.current = 0;
+    });
+  }, [hasReachedEdge, onWheelDelta]);
+  return {
+    hasReachedEdge: hasReachedEdge,
+    onWheel: onWheel
+  };
+};

package/dist/VirtualList/hooks/use-wheel.d.ts

@@ -0,0 +1,12 @@
+import type { LayoutDirection } from '../types';
+interface ListWheelState {
+    atStartEdge: boolean;
+    atEndEdge: boolean;
+    layout: LayoutDirection;
+}
+type ListWheelHandler = (offset: number) => void;
+export declare const useWheel: ({ atEndEdge, atStartEdge, layout }: ListWheelState, onWheelDelta: ListWheelHandler) => {
+    hasReachedEdge: (_offset: number) => boolean;
+    onWheel: (e: WheelEvent) => void;
+};
+export default useWheel;

package/dist/VirtualList/hooks/use-wheel.js

@@ -0,0 +1,41 @@
+import { useCallback, useRef } from 'react';
+import { HORIZONTAL } from "../defaults";
+import { cAF, isFirefox, rAF } from "../../Util";
+export var useWheel = function useWheel(_ref, onWheelDelta) {
+  var atEndEdge = _ref.atEndEdge,
+    atStartEdge = _ref.atStartEdge,
+    layout = _ref.layout;
+  var frameHandle = useRef(null);
+  var offset = useRef(0);
+  var hasReachedEdge = useCallback(function (_offset) {
+    var edgeReached = _offset < 0 && atStartEdge || _offset > 0 && atEndEdge;
+    return edgeReached;
+  }, [atStartEdge, atEndEdge]);
+  var onWheel = useCallback(function (e) {
+    cAF(frameHandle.current);
+    var deltaX = e.deltaX,
+      deltaY = e.deltaY;
+    // Special case for windows machine with shift key + wheel scrolling
+    if (e.shiftKey && deltaY !== 0) {
+      deltaX = deltaY;
+      deltaY = 0;
+    }
+    var newOffset = layout === HORIZONTAL ? deltaX : deltaY;
+    if (hasReachedEdge(newOffset)) {
+      return;
+    }
+    offset.current += newOffset;
+    if (!isFirefox() && newOffset !== 0) {
+      e.preventDefault();
+    }
+    frameHandle.current = rAF(function () {
+      onWheelDelta(offset.current);
+      offset.current = 0;
+    });
+  }, [layout, hasReachedEdge, onWheelDelta]);
+  return {
+    hasReachedEdge: hasReachedEdge,
+    onWheel: onWheel
+  };
+};
+export default useWheel;

package/dist/VirtualList/index.d.ts

@@ -0,0 +1,9 @@
+export { default as DynamicSizeGrid } from './components/dynamic-size-grid';
+export { default as DynamicSizeList } from './components/dynamic-size-list';
+export { default as FixedSizeGrid } from './components/fixed-size-grid';
+export { default as FixedSizeList } from './components/fixed-size-list';
+export * from './props';
+export type { DynamicSizeGridInstance, ResetAfterIndex, ResetAfterIndices } from './components/dynamic-size-grid';
+export type { DynamicSizeListInstance } from './components/dynamic-size-list';
+export type { FixedSizeListInstance } from './components/fixed-size-list';
+export * from './types';

package/dist/VirtualList/index.js

@@ -0,0 +1,6 @@
+export { default as DynamicSizeGrid } from "./components/dynamic-size-grid";
+export { default as DynamicSizeList } from "./components/dynamic-size-list";
+export { default as FixedSizeGrid } from "./components/fixed-size-grid";
+export { default as FixedSizeList } from "./components/fixed-size-list";
+export * from "./props";
+export * from "./types";

package/dist/VirtualList/props.d.ts

@@ -0,0 +1,95 @@
+import React, { CSSProperties } from 'react';
+import { TableGridRowSlotParams } from '../TableV2';
+import type { Dir, GridItemKeyGetter, ItemSize } from './types';
+export interface VirtualizedProps {
+    className?: string;
+    containerElement?: string | React.ComponentType<any>;
+    data?: any[];
+    /**
+     * @description controls the horizontal direction.
+     */
+    direction?: 'ltr' | 'rtl';
+    height: number | string;
+    innerElement?: string | React.ComponentType<any>;
+    innerProps?: Record<string, unknown>;
+    style?: CSSProperties;
+    useIsScrolling?: boolean;
+    width?: number | string;
+    perfMode?: boolean;
+    scrollbarAlwaysOn?: boolean;
+}
+export interface VirtualizedListProps extends VirtualizedProps {
+    /**
+     * @description describes how many items should be pre rendered to the head
+     * and the tail of the window
+     */
+    cache?: number;
+    estimatedItemSize?: number;
+    /**
+     * @description controls the list's orientation
+     */
+    layout?: 'horizontal' | 'vertical';
+    initScrollOffset?: number;
+    /**
+     * @description describes the total number of the list.
+     */
+    total: number;
+    itemSize: number | ItemSize;
+}
+export interface VirtualizedGridProps extends VirtualizedProps {
+    columnCache?: number;
+    columnWidth: number | ItemSize;
+    estimatedColumnWidth?: number;
+    estimatedRowHeight?: number;
+    initScrollLeft?: number;
+    initScrollTop?: number;
+    itemKey?: GridItemKeyGetter;
+    rowCache?: number;
+    rowHeight: number | ItemSize;
+    totalColumn: number;
+    totalRow: number;
+    hScrollbarSize?: number;
+    vScrollbarSize?: number;
+    scrollbarStartGap?: number;
+    scrollbarEndGap?: number;
+    role?: string;
+    itemRendered?: (info: {
+        columnCacheStart: number;
+        columnCacheEnd: number;
+        rowCacheStart: number;
+        rowCacheEnd: number;
+        columnVisibleStart: number;
+        columnVisibleEnd: number;
+        rowVisibleStart: number;
+        rowVisibleEnd: number;
+    }) => void;
+    onScroll?: (info: {
+        xAxisScrollDir: Dir;
+        scrollLeft: number;
+        yAxisScrollDir: Dir;
+        scrollTop: number;
+        updateRequested: boolean;
+    }) => void;
+    rowFormatter?: (props: TableGridRowSlotParams) => React.ReactNode;
+    children?: (params: any) => React.ReactNode;
+}
+export interface VirtualizedScrollbarProps {
+    alwaysOn?: boolean;
+    class?: string;
+    layout: 'horizontal' | 'vertical';
+    total: number;
+    ratio: number;
+    clientSize: number;
+    scrollFrom: number;
+    scrollbarSize?: number;
+    startGap?: number;
+    endGap?: number;
+    visible?: boolean;
+    onScroll?: (distance: number, totalSteps: number) => void;
+    onStartMove?: () => void;
+    onStopMove?: () => void;
+}
+export declare const defaultVirtualizedProps: Partial<VirtualizedProps>;
+export declare const defaultVirtualizedListProps: Partial<VirtualizedListProps>;
+export declare const defaultVirtualizedGridProps: Partial<VirtualizedGridProps>;
+export declare const defaultVirtualizedScrollbarProps: Partial<VirtualizedScrollbarProps>;