@rainbow-oh/yee-c 0.4.5 → 0.5.0

package/dist/esm/Select/demo/virtual.js

@@ -0,0 +1,38 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Select } from "../..";
+import React, { useState } from 'react';
+
+// Build a large option set (5000 items) to demonstrate virtual scrolling.
+// Even with this many options, the DOM only holds the visible window.
+var options = Array.from({
+  length: 5000
+}, function (_, i) {
+  return {
+    label: "Option ".concat(i + 1),
+    value: i
+  };
+});
+export default (function () {
+  var _useState = useState(100),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return /*#__PURE__*/React.createElement(Select, {
+    virtual: true,
+    searchable: true,
+    value: value,
+    onChange: function onChange(val) {
+      return setValue(val);
+    },
+    options: options,
+    style: {
+      width: 200
+    },
+    placeholder: "Please select"
+  });
+});

package/dist/esm/Select/hooks/useSelectKeyboard.d.ts

@@ -11,8 +11,14 @@ interface UseSelectKeyboardParams {
     onClose?: () => void;
     onOpenChange?: (open: boolean) => void;
     containerRef?: React.RefObject<HTMLElement>;
+    /**
+     * Virtual-mode scroll hook. When provided, keyboard navigation drives the
+     * virtual viewport through this callback instead of calling scrollIntoView
+     * (the focused option may not be in the DOM while virtualized).
+     */
+    scrollToIndex?: (index: number) => void;
 }
-export default function useSelectKeyboard({ options, open, selectedKeys, onSelect, onClose, onOpenChange, containerRef, }: UseSelectKeyboardParams): {
+export default function useSelectKeyboard({ options, open, selectedKeys, onSelect, onClose, onOpenChange, containerRef, scrollToIndex, }: UseSelectKeyboardParams): {
     focusedKey: string | number;
     onKeyDown: (event: React.KeyboardEvent) => void;
 };

package/dist/esm/Select/hooks/useSelectKeyboard.js

@@ -13,7 +13,8 @@ export default function useSelectKeyboard(_ref) {
     onSelect = _ref.onSelect,
     onClose = _ref.onClose,
     onOpenChange = _ref.onOpenChange,
-    containerRef = _ref.containerRef;
+    containerRef = _ref.containerRef,
+    scrollToIndex = _ref.scrollToIndex;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     focusedKey = _useState2[0],
@@ -51,6 +52,12 @@ export default function useSelectKeyboard(_ref) {
 
   // Scroll the focused option into view
   var scrollOptionIntoView = function scrollOptionIntoView(index) {
+    // Virtual mode: drive the virtual viewport directly, since the option
+    // element may not be mounted when it lies outside the render window.
+    if (scrollToIndex) {
+      scrollToIndex(index);
+      return;
+    }
     var container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
     if (!container) return;
     var optionElements = container.querySelectorAll('[role="option"]');
@@ -152,22 +159,31 @@ export default function useSelectKeyboard(_ref) {
   useEffect(function () {
     if (open) {
       // Focus the first selected option, or the first enabled option
+      var focusedValue = '';
       if ((selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.length) > 0) {
         var firstSelected = options === null || options === void 0 ? void 0 : options.find(function (opt) {
           return opt.value === selectedKeys[0];
         });
         if (firstSelected && !firstSelected.disabled) {
-          setFocusedKey(firstSelected.value);
-          return;
+          focusedValue = firstSelected.value;
         }
       }
-      // Find the first enabled option
-      var firstEnabled = options === null || options === void 0 ? void 0 : options.find(function (opt) {
-        return !opt.disabled;
-      });
-      if (firstEnabled) {
-        setFocusedKey(firstEnabled.value);
+      if (!focusedValue) {
+        // Find the first enabled option
+        var firstEnabled = options === null || options === void 0 ? void 0 : options.find(function (opt) {
+          return !opt.disabled;
+        });
+        if (firstEnabled) {
+          focusedValue = firstEnabled.value;
+        }
+      }
+      if (focusedValue) {
+        setFocusedKey(focusedValue);
       }
+      // Scrolling the focused option into view in virtual mode is handled by
+      // <Options> itself (it owns the viewport + virtual list), which avoids
+      // the first-open timing issue where this effect runs before the virtual
+      // API ref is wired up.
     } else {
       // Clear focused key when closing
       setFocusedKey('');

package/dist/esm/Select/interface.d.ts

@@ -94,6 +94,26 @@ export interface SelectProps extends DataAttributeProps {
      * Callback when searching
      */
     onFilter?: (value: string, options: Array<Option>) => Array<Option>;
+    /**
+     * Enable virtual scrolling for the dropdown.
+     *
+     * When enabled, only the options inside the visible window are rendered
+     * (the DOM node count stays constant regardless of how many options there
+     * are). Recommended for large option sets (hundreds or thousands).
+     * @default false
+     */
+    virtual?: boolean;
+    /**
+     * Height of each option in pixels. Required to be a fixed value when
+     * `virtual` is enabled (the list assumes every option has exactly this height).
+     * @default 32
+     */
+    itemHeight?: number;
+    /**
+     * Max height of the dropdown popup in pixels.
+     * @default 200
+     */
+    listHeight?: number;
 }
 /**
  * Props for the internal Option component (renders a single dropdown option).
@@ -119,6 +139,11 @@ export interface OptionProps {
      * Test id forwarded to the option element
      */
     dataTestId?: string;
+    /**
+     * Inline style forwarded to the option element.
+     * Used by virtual scrolling to position each option absolutely.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * Context value shared between Options and each Option.
@@ -167,6 +192,25 @@ export interface OptionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * Whether multiple selection mode is active
      */
     multiple: boolean;
+    /**
+     * Whether virtual scrolling is enabled
+     */
+    virtual?: boolean;
+    /**
+     * Fixed option height in pixels (only meaningful when `virtual` is enabled)
+     */
+    itemHeight?: number;
+    /**
+     * Max popup height in pixels (only meaningful when `virtual` is enabled)
+     */
+    listHeight?: number;
+    /**
+     * Ref that receives the virtual list API (currently `scrollToIndex`),
+     * so the parent can wire keyboard navigation to the virtual viewport.
+     */
+    virtualApiRef?: React.MutableRefObject<{
+        scrollToIndex: (index: number) => void;
+    } | null>;
     /**
      * Callback when an option is selected
      */

package/dist/esm/Select/option.js

@@ -11,7 +11,8 @@ var Option = function Option(props) {
     value = props.value,
     disabled = props.disabled,
     title = props.title,
-    dataTestId = props.dataTestId;
+    dataTestId = props.dataTestId,
+    style = props.style;
   var _useContext = useContext(OptionsCtx),
     prefixCls = _useContext.prefixCls,
     selectedKeys = _useContext.selectedKeys,
@@ -37,7 +38,8 @@ var Option = function Option(props) {
     role: "option",
     tabIndex: disabled ? undefined : 0,
     title: htmlTitle,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    style: style
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-option-content")
   }, label), multiple && selected && /*#__PURE__*/React.createElement("span", {

package/dist/esm/Select/options.js

@@ -1,9 +1,10 @@
-var _excluded = ["prefixCls", "options", "popupClassName", "popupStyle", "selectedKeys", "focusedKey", "dataTestId", "multiple", "onSelect"];
+var _excluded = ["prefixCls", "options", "popupClassName", "popupStyle", "selectedKeys", "focusedKey", "dataTestId", "multiple", "virtual", "itemHeight", "listHeight", "virtualApiRef", "onSelect"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import clsx from 'clsx';
-import React, { createContext, forwardRef, useRef } from 'react';
+import React, { createContext, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import useVirtualList from "../hooks/useVirtualList";
 import { useLocale } from "../locale";
 import Option from "./option";
 export var OptionsCtx = /*#__PURE__*/createContext({});
@@ -19,26 +20,144 @@ var Options = /*#__PURE__*/forwardRef(function (props, ref) {
     focusedKey = props.focusedKey,
     dataTestId = props.dataTestId,
     multiple = props.multiple,
+    virtual = props.virtual,
+    _props$itemHeight = props.itemHeight,
+    itemHeight = _props$itemHeight === void 0 ? 32 : _props$itemHeight,
+    _props$listHeight = props.listHeight,
+    listHeight = _props$listHeight === void 0 ? 200 : _props$listHeight,
+    virtualApiRef = props.virtualApiRef,
     onSelect = props.onSelect,
     rest = _objectWithoutProperties(props, _excluded);
+  var rootRef = useRef(null);
+  // Forward the popup root element to the parent (Select uses it as the
+  // keyboard-nav containerRef) while keeping a stable RefObject for the
+  // effects below.
+  useImperativeHandle(ref, function () {
+    return rootRef.current;
+  }, []);
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  var componentRef = ref || useRef(null);
+  // Hook is always called (rules of hooks). When `virtual` is off the
+  // returned viewportRef is never attached, so the observer stays idle.
+  var _useVirtualList = useVirtualList({
+      itemCount: options.length,
+      itemHeight: itemHeight
+    }),
+    start = _useVirtualList.start,
+    end = _useVirtualList.end,
+    offsetY = _useVirtualList.offsetY,
+    totalHeight = _useVirtualList.totalHeight,
+    viewportRef = _useVirtualList.viewportRef,
+    onScroll = _useVirtualList.onScroll,
+    scrollToIndex = _useVirtualList.scrollToIndex;
+
+  // Expose the virtual scroll API to the parent so keyboard navigation
+  // can drive the virtual viewport (replaces scrollIntoView).
+  useEffect(function () {
+    if (!virtual || !virtualApiRef) return;
+    virtualApiRef.current = {
+      scrollToIndex: scrollToIndex
+    };
+    return function () {
+      if (virtualApiRef.current) {
+        virtualApiRef.current = null;
+      }
+    };
+  }, [virtual, virtualApiRef, scrollToIndex]);
+
+  // Reset the scroll position whenever the option set changes (e.g. after
+  // filtering via search), otherwise the viewport may sit at an offset
+  // where none of the new results are visible.
+  useEffect(function () {
+    if (virtual) {
+      scrollToIndex(0);
+    }
+  }, [options, virtual, scrollToIndex]);
+
+  // Bring the focused option into view on open and whenever it changes.
+  //   - virtual mode: drive the virtual viewport via scrollToIndex.
+  //   - default mode: scrollIntoView on the option's DOM node.
+  // Options owns this (rather than the keyboard hook) so it also covers the
+  // initial open, where the keyboard effect can fire before the popup is
+  // mounted / the virtual API ref is wired up.
+  useEffect(function () {
+    if (options.length === 0) return;
+    if (focusedKey === '') return;
+    var focusedIndex = options.findIndex(function (o) {
+      return o.value === focusedKey;
+    });
+    if (focusedIndex < 0) return;
+    if (virtual) {
+      scrollToIndex(focusedIndex);
+      return;
+    }
+    var container = rootRef.current;
+    if (!container) return;
+    var optionElements = container.querySelectorAll('[role="option"]');
+    var targetElement = optionElements[focusedIndex];
+    if (targetElement) {
+      targetElement.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+  }, [focusedKey, virtual, options, scrollToIndex, rootRef]);
+  var isEmpty = options.length === 0;
+  var ctxValue = {
+    prefixCls: prefixCls,
+    selectedKeys: selectedKeys,
+    focusedKey: focusedKey,
+    multiple: multiple,
+    onSelect: onSelect
+  };
+
+  // ----- Virtual mode: only render the visible window -----
+  if (virtual && !isEmpty) {
+    var visibleOptions = options.slice(start, end);
+    return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+      className: clsx("".concat(prefixCls, "-popup"), "".concat(prefixCls, "-popup-virtual"), popupClassName),
+      style: popupStyle,
+      ref: rootRef,
+      tabIndex: -1
+    }), /*#__PURE__*/React.createElement(OptionsCtx.Provider, {
+      value: ctxValue
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-popup-viewport"),
+      ref: viewportRef,
+      onScroll: onScroll,
+      style: {
+        maxHeight: listHeight,
+        overflowY: 'auto'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: totalHeight,
+        position: 'relative'
+      }
+    }, visibleOptions.map(function (option, i) {
+      return /*#__PURE__*/React.createElement(Option, _extends({}, option, {
+        key: option.value,
+        dataTestId: "".concat(dataTestId, "-").concat(start + i),
+        style: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: itemHeight,
+          transform: "translateY(".concat(offsetY + i * itemHeight, "px)")
+        }
+      }));
+    })))));
+  }
+
+  // ----- Default mode: render every option (unchanged behavior) -----
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: clsx("".concat(prefixCls, "-popup"), popupClassName),
     style: popupStyle,
-    ref: componentRef,
+    ref: rootRef,
     tabIndex: -1
-  }), options.length === 0 ? /*#__PURE__*/React.createElement("div", {
+  }), isEmpty ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-empty")
   }, select.noData) : /*#__PURE__*/React.createElement(OptionsCtx.Provider, {
-    value: {
-      prefixCls: prefixCls,
-      selectedKeys: selectedKeys,
-      focusedKey: focusedKey,
-      multiple: multiple,
-      onSelect: onSelect
-    }
+    value: ctxValue
   }, options.map(function (option, index) {
     return /*#__PURE__*/React.createElement(Option, _extends({}, option, {
       key: option.value,

package/dist/esm/Select/select.js

@@ -1,4 +1,4 @@
-var _excluded = ["prefixCls", "options", "placement", "mode", "value", "defaultValue", "optionFilterProp", "disabled", "onChange", "onFilter"];
+var _excluded = ["prefixCls", "options", "placement", "mode", "value", "defaultValue", "optionFilterProp", "disabled", "onChange", "onFilter", "virtual", "itemHeight", "listHeight"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -13,7 +13,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { useContext, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useMemo, useRef, useState } from 'react';
 import { GlobalContext } from "../Config-Provider";
 import Selector from "../Selector";
 import Trigger from "../Trigger";
@@ -40,6 +40,9 @@ var Select = function Select(baseprops) {
     disabled = props.disabled,
     onChange = props.onChange,
     onFilter = props.onFilter,
+    virtual = props.virtual,
+    itemHeight = props.itemHeight,
+    listHeight = props.listHeight,
     rest = _objectWithoutProperties(props, _excluded);
   var single = mode !== 'multiple' && mode !== 'tags' ? true : false;
   var handleState = function handleState(value) {
@@ -68,6 +71,13 @@ var Select = function Select(baseprops) {
     open = _useState4[0],
     setOpen = _useState4[1];
   var popupRef = useRef(null);
+  // Holds the virtual list API exposed by <Options>, so keyboard navigation
+  // can drive the virtual viewport (only populated when `virtual` is on).
+  var virtualApiRef = useRef(null);
+  var handleVirtualScrollToIndex = useCallback(function (index) {
+    var _virtualApiRef$curren;
+    (_virtualApiRef$curren = virtualApiRef.current) === null || _virtualApiRef$curren === void 0 || _virtualApiRef$curren.scrollToIndex(index);
+  }, []);
   var getOptions = function getOptions(keys) {
     if (keys === '' || keys === null) {
       return undefined;
@@ -150,7 +160,8 @@ var Select = function Select(baseprops) {
         return setOpen(false);
       },
       onOpenChange: handleOpenChange,
-      containerRef: popupRef
+      containerRef: popupRef,
+      scrollToIndex: virtual ? handleVirtualScrollToIndex : undefined
     }),
     focusedKey = _useSelectKeyboard.focusedKey,
     onKeyDown = _useSelectKeyboard.onKeyDown;
@@ -162,7 +173,11 @@ var Select = function Select(baseprops) {
     selectedKeys: mergedValue,
     dataTestId: rest['data-testid'],
     onSelect: handleSelect,
-    ref: popupRef
+    ref: popupRef,
+    virtual: virtual,
+    itemHeight: itemHeight,
+    listHeight: listHeight,
+    virtualApiRef: virtualApiRef
   });
   return /*#__PURE__*/React.createElement(Trigger, _extends({}, rest, {
     placement: placement,

package/dist/esm/Select/style/index.less

@@ -8,6 +8,17 @@
     overflow: auto;
   }
 
+  // Virtual mode: the popup no longer scrolls itself; the inner viewport does.
+  // Without this override there would be two scrollbars.
+  &-popup-virtual {
+    max-height: none;
+    overflow: visible;
+  }
+
+  &-popup-viewport {
+    overflow-y: auto;
+  }
+
   &-option {
     display: flex;
     padding: var(--yee-select-option-padding);
@@ -37,6 +48,12 @@
     }
   }
 
+  // In virtual mode each option has a fixed inline height; center its content
+  // vertically so it stays aligned regardless of the inherited line-height.
+  &-popup-virtual &-option {
+    align-items: center;
+  }
+
   &-empty {
     padding: var(--yee-select-option-padding);
   }

package/dist/esm/Table/style/index.less

@@ -23,13 +23,32 @@
           var(--yee-table-tbody-td-borderbottom-color);
       }
     }
+
+    @{pls}-cell {
+      &::before {
+        display: none;
+      }
+    }
   }
 
   &-thead {
     color: var(--yee-table-thead-color);
 
     @{pls}-cell {
+      position: relative;
       background-color: var(--yee-table-thead-bg-color);
+
+      &:not(:last-child):not(@{pls}-expand-col) {
+        &::before {
+          position: absolute;
+          content: '';
+          width: 1.5px;
+          height: 30%;
+          top: 35%;
+          right: 0;
+          background-color: var(--yee-table-head-cell-split-line-color, #eee);
+        }
+      }
     }
 
     &-cell {

package/dist/esm/hooks/index.d.ts

@@ -16,4 +16,5 @@ import useMount from './useMount';
 import usePrevious from './usePrevious';
 import useUpdateEffect from './useUpdateEffect';
 import useVirtualForm from './useVirtualForm';
-export { useBreakpoint, useDebounceFunction, useDebounceValue, useDeepCompareEffect, useDeepCompareMemo, useDeepCompareMemoize, useDelayState, useEsc, useEvent, useIntersectionObserver, useKeyControl, useLatest, useLayoutEffect, useMergedState, useMount, usePrevious, useUpdateEffect, useVirtualForm, };
+import useVirtualList from './useVirtualList';
+export { useBreakpoint, useDebounceFunction, useDebounceValue, useDeepCompareEffect, useDeepCompareMemo, useDeepCompareMemoize, useDelayState, useEsc, useEvent, useIntersectionObserver, useKeyControl, useLatest, useLayoutEffect, useMergedState, useMount, usePrevious, useUpdateEffect, useVirtualForm, useVirtualList, };

package/dist/esm/hooks/index.js

@@ -16,4 +16,5 @@ import useMount from "./useMount";
 import usePrevious from "./usePrevious";
 import useUpdateEffect from "./useUpdateEffect";
 import useVirtualForm from "./useVirtualForm";
-export { useBreakpoint, useDebounceFunction, useDebounceValue, useDeepCompareEffect, useDeepCompareMemo, useDeepCompareMemoize, useDelayState, useEsc, useEvent, useIntersectionObserver, useKeyControl, useLatest, useLayoutEffect, useMergedState, useMount, usePrevious, useUpdateEffect, useVirtualForm };
+import useVirtualList from "./useVirtualList";
+export { useBreakpoint, useDebounceFunction, useDebounceValue, useDeepCompareEffect, useDeepCompareMemo, useDeepCompareMemoize, useDelayState, useEsc, useEvent, useIntersectionObserver, useKeyControl, useLatest, useLayoutEffect, useMergedState, useMount, usePrevious, useUpdateEffect, useVirtualForm, useVirtualList };

package/dist/esm/hooks/useVirtualList.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+export interface UseVirtualListOptions {
+    /**
+     * Total number of items in the list.
+     */
+    itemCount: number;
+    /**
+     * Fixed height of every item in pixels.
+     */
+    itemHeight: number;
+    /**
+     * Extra items rendered above and below the visible window
+     * to avoid white flashes while scrolling.
+     * @default 4
+     */
+    overscan?: number;
+}
+export interface UseVirtualListResult {
+    /**
+     * Inclusive start index of the render window (already includes overscan).
+     */
+    start: number;
+    /**
+     * Exclusive end index of the render window (already includes overscan).
+     */
+    end: number;
+    /**
+     * Vertical offset to apply to the rendered block, equal to `start * itemHeight`.
+     * Use it as `transform: translateY(offsetY)` or `top: offsetY`.
+     */
+    offsetY: number;
+    /**
+     * Total scrollable height, equal to `itemCount * itemHeight`.
+     * Apply it to the inner spacer element so the scrollbar matches the full list.
+     */
+    totalHeight: number;
+    /**
+     * Ref to bind to the scroll container element.
+     */
+    viewportRef: React.RefObject<HTMLDivElement | null>;
+    /**
+     * Stable scroll handler (rAF-throttled). Bind to the viewport's `onScroll`.
+     */
+    onScroll: () => void;
+    /**
+     * Scroll the viewport so that the item at `index` is visible.
+     * Used by keyboard navigation to replace `scrollIntoView`.
+     */
+    scrollToIndex: (index: number) => void;
+}
+/**
+ * Fixed-height virtual scrolling hook.
+ *
+ * Renders only the items inside the visible window (plus an `overscan` buffer)
+ * and keeps the DOM node count constant regardless of `itemCount`.
+ *
+ * Usage:
+ *   const { start, end, offsetY, totalHeight, viewportRef, onScroll, scrollToIndex } =
+ *     useVirtualList({ itemCount, itemHeight });
+ *
+ *   <div ref={viewportRef} onScroll={onScroll} style={{ maxHeight: 200, overflowY: 'auto' }}>
+ *     <div style={{ height: totalHeight, position: 'relative' }}>
+ *       {items.slice(start, end).map((it, i) => (
+ *         <div key={it.key} style={{ position: 'absolute', height: itemHeight, transform: `translateY(${offsetY + i * itemHeight}px)` }}>
+ *           {it.content}
+ *         </div>
+ *       ))}
+ *     </div>
+ *   </div>
+ */
+export default function useVirtualList({ itemCount, itemHeight, overscan, }: UseVirtualListOptions): UseVirtualListResult;