@rainbow-oh/yee-c 0.4.4 → 0.5.0

package/dist/esm/PickerPanel/panels/TimePanel/TimeCell.js

@@ -14,7 +14,7 @@ function TimeCell(props) {
   return /*#__PURE__*/React.createElement("li", {
     className: cls,
     onClick: function onClick() {
-      return onSelect(value);
+      return onSelect === null || onSelect === void 0 ? void 0 : onSelect(value);
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-time-panel-cell-inner")

package/dist/esm/PickerPanel/panels/TimePanel/TimeColumn.d.ts

@@ -1,3 +1,16 @@
+import { Dayjs } from 'dayjs';
 import React from 'react';
-declare function TimeColumn(props: any): React.JSX.Element;
+import type { TimeUnit } from '../../interface';
+interface TimeColumnProps {
+    prefixCls?: string;
+    type: TimeUnit;
+    value?: Dayjs;
+    cells: Dayjs[];
+    disabled?: boolean;
+    onSelect?: (date: Dayjs) => void;
+    viewDate?: Dayjs;
+    maxDate?: Dayjs;
+    minDate?: Dayjs;
+}
+declare function TimeColumn(props: TimeColumnProps): React.JSX.Element;
 export default TimeColumn;

package/dist/esm/PickerPanel/panels/TimePanel/TimeColumn.js

@@ -28,7 +28,7 @@ function TimeColumn(props) {
     selectedCell = _React$useState2[0],
     setSelectedCell = _React$useState2[1];
   React.useLayoutEffect(function () {
-    if (value !== -1 && selectedRef.current) {
+    if (value !== undefined && selectedRef.current) {
       var _ref$current, _selectedRef$current;
       (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.scrollTo({
         top: (_selectedRef$current = selectedRef.current) === null || _selectedRef$current === void 0 ? void 0 : _selectedRef$current.offsetTop,

package/dist/esm/PickerPanel/panels/TimePanel/TimeHeader.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
-declare function TimeHeader(props: any): React.JSX.Element;
+interface TimeHeaderProps {
+    prefixCls?: string;
+}
+declare function TimeHeader(props: TimeHeaderProps): React.JSX.Element;
 export default TimeHeader;

package/dist/esm/PickerPanel/panels/TimePanel/index.d.ts

@@ -1,3 +1,11 @@
 import * as React from 'react';
-declare function TimePanel(props: any): React.JSX.Element;
+import type { PanelSharedProps } from '../../interface';
+interface TimePanelProps extends PanelSharedProps {
+    format?: string;
+    hourStep?: number;
+    minuteStep?: number;
+    secondStep?: number;
+    showTitle?: boolean;
+}
+declare function TimePanel(props: TimePanelProps): React.JSX.Element;
 export default TimePanel;

package/dist/esm/PickerPanel/panels/WeekPanel/WeekBody.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
-declare function WeekBody(props: any): React.JSX.Element;
+import type { PanelSharedProps } from '../../interface';
+declare function WeekBody(props: PanelSharedProps): React.JSX.Element;
 export default WeekBody;

package/dist/esm/PickerPanel/panels/WeekPanel/WeekHeader.d.ts

@@ -1,2 +1,3 @@
 import * as React from 'react';
-export default function WeekHeader(props: any): React.JSX.Element;
+import type { PanelSharedProps } from '../../interface';
+export default function WeekHeader(props: PanelSharedProps): React.JSX.Element;

package/dist/esm/PickerPanel/panels/WeekPanel/index.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
-export default function WeekPanel(props: any): React.JSX.Element;
+import type { PanelSharedProps } from '../../interface';
+export default function WeekPanel(props: PanelSharedProps): React.JSX.Element;

package/dist/esm/PickerPanel/panels/YearPanel/YearBody.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
-declare function YearBody(props: any): React.JSX.Element;
+import type { PanelSharedProps } from '../../interface';
+declare function YearBody(props: PanelSharedProps): React.JSX.Element;
 export default YearBody;

package/dist/esm/PickerPanel/panels/YearPanel/YearBody.js

@@ -21,7 +21,8 @@ function YearBody(props) {
     maxDate = props.maxDate,
     minDate = props.minDate,
     nowDate = props.nowDate,
-    offsetYear = props.offsetYear,
+    _props$offsetYear = props.offsetYear,
+    offsetYear = _props$offsetYear === void 0 ? 0 : _props$offsetYear,
     _props$hoverRange = props.hoverRange,
     hoverRange = _props$hoverRange === void 0 ? [] : _props$hoverRange,
     _props$selectedRange = props.selectedRange,
@@ -45,7 +46,7 @@ function YearBody(props) {
   });
   var getCellTitle = useEvent(function (currentDate) {
     var _year = pickerUtils.getYear(currentDate) + offsetYear;
-    return _year < 1000 ? '0' + _year : _year;
+    return _year < 1000 ? '0' + _year : String(_year);
   });
   var getCellClassName = useEvent(function (currentDate) {
     var currentYear = pickerUtils.getYear(currentDate);

package/dist/esm/PickerPanel/panels/YearPanel/YearHeader.d.ts

@@ -1,2 +1,3 @@
 import * as React from 'react';
-export default function YearHeader(props: any): React.JSX.Element;
+import type { PanelSharedProps } from '../../interface';
+export default function YearHeader(props: PanelSharedProps): React.JSX.Element;

package/dist/esm/PickerPanel/panels/YearPanel/YearHeader.js

@@ -8,7 +8,8 @@ export default function YearHeader(props) {
     viewDate = props.viewDate,
     onViewDateChange = props.onViewDateChange,
     onPanelChange = props.onPanelChange,
-    offsetYear = props.offsetYear;
+    _props$offsetYear = props.offsetYear,
+    offsetYear = _props$offsetYear === void 0 ? 0 : _props$offsetYear;
   var viewYear = pickerUtils.getYear(viewDate);
   var startYear = viewYear - viewYear % 10 + offsetYear;
   var endYear = startYear + 9;

package/dist/esm/PickerPanel/panels/YearPanel/index.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
-export default function DecadePanel(props: any): React.JSX.Element;
+import type { PanelSharedProps } from '../../interface';
+export default function DecadePanel(props: PanelSharedProps): React.JSX.Element;

package/dist/esm/PickerPanel/panels/YearPanel/index.js

@@ -7,7 +7,7 @@ export default function DecadePanel(props) {
     offset = props.offset;
   var offsetYear = 0;
   if (offset !== null && offset !== void 0 && offset.year) {
-    offsetYear = parseInt(offset.year);
+    offsetYear = offset.year;
   }
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-year-panel")

package/dist/esm/PickerPanel/picker-panel.js

@@ -95,6 +95,9 @@ var PickerPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setMergedPickerView(newViewDate);
     onPanelChange === null || onPanelChange === void 0 || onPanelChange(newViewDate);
   };
+
+  // `PanelBody` clears the hover by passing `''`; forward as-is to preserve
+  // the existing runtime behavior.
   var handleMouseChange = function handleMouseChange(date) {
     onCellMouse === null || onCellMouse === void 0 || onCellMouse(date);
   };

package/dist/esm/PickerPanel/utils/pickerUtils.d.ts

@@ -1,8 +1,8 @@
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs, { Dayjs, OpUnitType } from 'dayjs';
 type PickerType = 'year' | 'quarter' | 'month' | 'week' | 'day' | 'second' | 'minute' | 'hour';
 declare const d: {
     dayjs: typeof dayjs;
-    init: (date?: string, ...rest: any[]) => dayjs.Dayjs;
+    init: (date?: dayjs.ConfigType, option?: dayjs.OptionType) => dayjs.Dayjs;
     getNow: () => dayjs.Dayjs;
     getYear: (date: Dayjs) => number;
     getQuarter: (date: Dayjs) => number;
@@ -13,7 +13,7 @@ declare const d: {
     getMinute: (date: Dayjs) => number;
     getSecond: (date: Dayjs) => number;
     format: (date: Dayjs, format: string) => string;
-    isSame: (date1: Dayjs, date2: Dayjs, type?: PickerType) => boolean;
+    isSame: (date1: Dayjs | undefined, date2: Dayjs | undefined, type?: PickerType) => boolean;
     setYear: (date: Dayjs, year: number) => dayjs.Dayjs;
     setMonth: (date: Dayjs, month: number) => dayjs.Dayjs;
     setDate: (date: Dayjs, day: number) => dayjs.Dayjs;
@@ -23,10 +23,10 @@ declare const d: {
     addYear: (date: Dayjs, offset: number) => dayjs.Dayjs;
     addMonth: (date: Dayjs, offset: number) => dayjs.Dayjs;
     addDate: (date: Dayjs, offset: number) => dayjs.Dayjs;
-    isAfter: (date1: Dayjs, date2: Dayjs, type?: 'day' | 'hour' | 'minute' | 'second' | 'year' | 'month') => boolean;
-    isBefore: (date1: Dayjs, date2: Dayjs, type?: 'day' | 'hour' | 'minute' | 'second' | 'year' | 'month') => boolean;
-    isValid: (date: Dayjs, format?: string, strict?: boolean) => boolean;
-    isBetween: (date: Dayjs, start: Dayjs, end: Dayjs, ...args: any[]) => boolean;
+    isAfter: (date1: Dayjs, date2: Dayjs | undefined, type?: 'day' | 'hour' | 'minute' | 'second' | 'year' | 'month') => boolean;
+    isBefore: (date1: Dayjs, date2: Dayjs | undefined, type?: 'day' | 'hour' | 'minute' | 'second' | 'year' | 'month') => boolean;
+    isValid: (date: Dayjs | undefined, format?: string, strict?: boolean) => boolean;
+    isBetween: (date: Dayjs, start: Dayjs, end: Dayjs, unit?: OpUnitType, nulls?: '()' | '[]' | '[)' | '(]') => boolean;
     getCellClassName: ({ date, startHoverDate, endHoverDate, startSelectedDate, endSelectedDate, unit, prefixCls, }: {
         date: Dayjs;
         startHoverDate: Dayjs | null | undefined;

package/dist/esm/PickerPanel/utils/pickerUtils.js

@@ -21,11 +21,8 @@ dayjs.extend(buddhistEra); // Buddhist calendar
 
 var d = {
   dayjs: dayjs,
-  init: function init(date) {
-    for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      rest[_key - 1] = arguments[_key];
-    }
-    return dayjs.apply(void 0, [date].concat(rest));
+  init: function init(date, option) {
+    return dayjs(date, option);
   },
   getNow: function getNow() {
     return d.init(undefined);
@@ -97,11 +94,8 @@ var d = {
   isValid: function isValid(date, format, strict) {
     return dayjs(date, format, strict).isValid();
   },
-  isBetween: function isBetween(date, start, end) {
-    for (var _len2 = arguments.length, args = new Array(_len2 > 3 ? _len2 - 3 : 0), _key2 = 3; _key2 < _len2; _key2++) {
-      args[_key2 - 3] = arguments[_key2];
-    }
-    return date && start && end ? date.isBetween.apply(date, [start, end].concat(args)) : false;
+  isBetween: function isBetween(date, start, end, unit, nulls) {
+    return date && start && end ? date.isBetween(start, end, unit, nulls) : false;
   },
   getCellClassName: function getCellClassName(_ref) {
     var date = _ref.date,

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

@@ -38,7 +38,7 @@ var options = [{
   value: 'peach'
 }];
 export default (function () {
-  var _useState = useState('apple'),
+  var _useState = useState('mango'),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];

package/dist/esm/Select/demo/virtual.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

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,