@rainbow-oh/yee-c 0.4.4 → 0.5.0

package/dist/cjs/PickerPanel/panels/TimePanel/TimeBody.d.ts

@@ -1,3 +1,19 @@
+import { Dayjs } from 'dayjs';
 import * as React from 'react';
-declare function TimeBody(props: any): React.JSX.Element;
+import type { PanelSharedProps } from '../../interface';
+interface TimeBodyProps extends PanelSharedProps {
+    value?: Dayjs;
+    showTitle?: boolean;
+    showHour?: boolean;
+    showMinute?: boolean;
+    showSecond?: boolean;
+    disabledHours?: boolean;
+    disabledMinutes?: boolean;
+    disabledSeconds?: boolean;
+    is12hour?: boolean;
+    hourStep?: number;
+    minuteStep?: number;
+    secondStep?: number;
+}
+declare function TimeBody(props: TimeBodyProps): React.JSX.Element;
 export default TimeBody;

package/dist/cjs/PickerPanel/panels/TimePanel/TimeCell.d.ts

@@ -1,3 +1,9 @@
 import React from 'react';
-declare function TimeCell(props: any): React.JSX.Element;
+interface TimeCellProps {
+    prefixCls?: string;
+    value: number;
+    onSelect?: (value: number) => void;
+    active?: boolean;
+}
+declare function TimeCell(props: TimeCellProps): React.JSX.Element;
 export default TimeCell;

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

@@ -40,6 +40,6 @@ function TimeCell(props) {
     [`${prefixCls}-time-panel-cell-selected`]: active
   });
   const renderValue = value < 10 ? "0" + value : value;
-  return /* @__PURE__ */ import_react.default.createElement("li", { className: cls, onClick: () => onSelect(value) }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-time-panel-cell-inner` }, renderValue));
+  return /* @__PURE__ */ import_react.default.createElement("li", { className: cls, onClick: () => onSelect == null ? void 0 : onSelect(value) }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-time-panel-cell-inner` }, renderValue));
 }
 var TimeCell_default = TimeCell;

package/dist/cjs/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/cjs/PickerPanel/panels/TimePanel/TimeColumn.js

@@ -52,7 +52,7 @@ function TimeColumn(props) {
   const [selectedCell, setSelectedCell] = import_react.default.useState();
   import_react.default.useLayoutEffect(() => {
     var _a, _b;
-    if (value !== -1 && selectedRef.current) {
+    if (value !== void 0 && selectedRef.current) {
       (_b = ref.current) == null ? void 0 : _b.scrollTo({
         top: (_a = selectedRef.current) == null ? void 0 : _a.offsetTop,
         behavior: "smooth"

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/PickerPanel/panels/YearPanel/YearBody.js

@@ -62,7 +62,7 @@ function YearBody(props) {
     maxDate,
     minDate,
     nowDate,
-    offsetYear,
+    offsetYear = 0,
     hoverRange = [],
     selectedRange = []
   } = props;
@@ -77,7 +77,7 @@ function YearBody(props) {
   });
   const getCellTitle = (0, import_useEvent.default)((currentDate) => {
     const _year = import_pickerUtils.default.getYear(currentDate) + offsetYear;
-    return _year < 1e3 ? "0" + _year : _year;
+    return _year < 1e3 ? "0" + _year : String(_year);
   });
   const getCellClassName = (0, import_useEvent.default)((currentDate) => {
     const currentYear = import_pickerUtils.default.getYear(currentDate);

package/dist/cjs/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/cjs/PickerPanel/panels/YearPanel/YearHeader.js

@@ -38,7 +38,13 @@ var import_useEvent = __toESM(require("../../../hooks/useEvent"));
 var import_Header = __toESM(require("../Header"));
 var import_pickerUtils = __toESM(require("../../utils/pickerUtils"));
 function YearHeader(props) {
-  const { prefixCls, viewDate, onViewDateChange, onPanelChange, offsetYear } = props;
+  const {
+    prefixCls,
+    viewDate,
+    onViewDateChange,
+    onPanelChange,
+    offsetYear = 0
+  } = props;
   const viewYear = import_pickerUtils.default.getYear(viewDate);
   const startYear = viewYear - viewYear % 10 + offsetYear;
   const endYear = startYear + 9;

package/dist/cjs/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/cjs/PickerPanel/panels/YearPanel/index.js

@@ -56,7 +56,7 @@ function DecadePanel(props) {
   const { prefixCls, offset } = props;
   let offsetYear = 0;
   if (offset == null ? void 0 : offset.year) {
-    offsetYear = parseInt(offset.year);
+    offsetYear = offset.year;
   }
   return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-year-panel` }, /* @__PURE__ */ import_react.default.createElement(import_YearHeader.default, __spreadProps(__spreadValues({}, props), { offsetYear })), /* @__PURE__ */ import_react.default.createElement(import_YearBody.default, __spreadProps(__spreadValues({}, props), { offsetYear })));
 }

package/dist/cjs/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/cjs/PickerPanel/utils/pickerUtils.js

@@ -48,7 +48,7 @@ import_dayjs.default.extend(import_localeData.default);
 import_dayjs.default.extend(import_buddhistEra.default);
 var d = {
   dayjs: import_dayjs.default,
-  init: (date, ...rest) => (0, import_dayjs.default)(date, ...rest),
+  init: (date, option) => (0, import_dayjs.default)(date, option),
   getNow: () => {
     return d.init(void 0);
   },
@@ -78,7 +78,7 @@ var d = {
   isAfter: (date1, date2, type) => date2 ? date1.isAfter(date2, type) : false,
   isBefore: (date1, date2, type) => date2 ? date1.isBefore(date2, type) : false,
   isValid: (date, format, strict) => (0, import_dayjs.default)(date, format, strict).isValid(),
-  isBetween: (date, start, end, ...args) => date && start && end ? date.isBetween(start, end, ...args) : false,
+  isBetween: (date, start, end, unit, nulls) => date && start && end ? date.isBetween(start, end, unit, nulls) : false,
   getCellClassName: ({
     date,
     startHoverDate,

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

@@ -47,7 +47,7 @@ var options = [
   { label: "Peach", value: "peach" }
 ];
 var basic_default = () => {
-  const [value, setValue] = (0, import_react.useState)("apple");
+  const [value, setValue] = (0, import_react.useState)("mango");
   return /* @__PURE__ */ import_react.default.createElement(
     import_yee_c.Select,
     {

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

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

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

@@ -0,0 +1,55 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Select/demo/virtual.tsx
+var virtual_exports = {};
+__export(virtual_exports, {
+  default: () => virtual_default
+});
+module.exports = __toCommonJS(virtual_exports);
+var import_yee_c = require("../..");
+var import_react = __toESM(require("react"));
+var options = Array.from({ length: 5e3 }, (_, i) => ({
+  label: `Option ${i + 1}`,
+  value: i
+}));
+var virtual_default = () => {
+  const [value, setValue] = (0, import_react.useState)(100);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Select,
+    {
+      virtual: true,
+      searchable: true,
+      value,
+      onChange: (val) => setValue(val),
+      options,
+      style: { width: 200 },
+      placeholder: "Please select"
+    }
+  );
+};

package/dist/cjs/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/cjs/Select/hooks/useSelectKeyboard.js

@@ -41,7 +41,8 @@ function useSelectKeyboard({
   onSelect,
   onClose,
   onOpenChange,
-  containerRef
+  containerRef,
+  scrollToIndex
 }) {
   const [focusedKey, setFocusedKey] = (0, import_react.useState)("");
   const latestFocusedKey = (0, import_useLatest.default)(focusedKey);
@@ -69,6 +70,10 @@ function useSelectKeyboard({
     }
   };
   const scrollOptionIntoView = (index) => {
+    if (scrollToIndex) {
+      scrollToIndex(index);
+      return;
+    }
     const container = containerRef == null ? void 0 : containerRef.current;
     if (!container)
       return;
@@ -150,18 +155,23 @@ function useSelectKeyboard({
   };
   (0, import_react.useEffect)(() => {
     if (open) {
+      let focusedValue = "";
       if ((selectedKeys == null ? void 0 : selectedKeys.length) > 0) {
         const firstSelected = options == null ? void 0 : options.find(
           (opt) => opt.value === selectedKeys[0]
         );
         if (firstSelected && !firstSelected.disabled) {
-          setFocusedKey(firstSelected.value);
-          return;
+          focusedValue = firstSelected.value;
+        }
+      }
+      if (!focusedValue) {
+        const firstEnabled = options == null ? void 0 : options.find((opt) => !opt.disabled);
+        if (firstEnabled) {
+          focusedValue = firstEnabled.value;
         }
       }
-      const firstEnabled = options == null ? void 0 : options.find((opt) => !opt.disabled);
-      if (firstEnabled) {
-        setFocusedKey(firstEnabled.value);
+      if (focusedValue) {
+        setFocusedKey(focusedValue);
       }
     } else {
       setFocusedKey("");

package/dist/cjs/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/cjs/Select/option.js

@@ -37,7 +37,7 @@ var import_lucide_react = require("lucide-react");
 var import_react = __toESM(require("react"));
 var import_options = require("./options");
 var Option = (props) => {
-  const { label, value, disabled, title, dataTestId } = props;
+  const { label, value, disabled, title, dataTestId, style } = props;
   const { prefixCls, selectedKeys, focusedKey, multiple, onSelect } = (0, import_react.useContext)(import_options.OptionsCtx);
   const handleClick = (e) => {
     if (!disabled) {
@@ -64,7 +64,8 @@ var Option = (props) => {
       role: "option",
       tabIndex: disabled ? void 0 : 0,
       title: htmlTitle,
-      "data-testid": dataTestId
+      "data-testid": dataTestId,
+      style
     },
     /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-option-content` }, label),
     multiple && selected && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-option-state` }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Check, { size: 16 }))

package/dist/cjs/Select/options.js

@@ -64,6 +64,7 @@ __export(options_exports, {
 module.exports = __toCommonJS(options_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
+var import_useVirtualList = __toESM(require("../hooks/useVirtualList"));
 var import_locale = require("../locale");
 var import_option = __toESM(require("./option"));
 var OptionsCtx = (0, import_react.createContext)(
@@ -82,6 +83,10 @@ var Options = (0, import_react.forwardRef)(
       focusedKey,
       dataTestId,
       multiple,
+      virtual,
+      itemHeight = 32,
+      listHeight = 200,
+      virtualApiRef,
       onSelect
     } = _a, rest = __objRest(_a, [
       "prefixCls",
@@ -92,30 +97,125 @@ var Options = (0, import_react.forwardRef)(
       "focusedKey",
       "dataTestId",
       "multiple",
+      "virtual",
+      "itemHeight",
+      "listHeight",
+      "virtualApiRef",
       "onSelect"
     ]);
-    const componentRef = ref || (0, import_react.useRef)(null);
+    const rootRef = (0, import_react.useRef)(null);
+    (0, import_react.useImperativeHandle)(ref, () => rootRef.current, []);
+    const {
+      start,
+      end,
+      offsetY,
+      totalHeight,
+      viewportRef,
+      onScroll,
+      scrollToIndex
+    } = (0, import_useVirtualList.default)({
+      itemCount: options.length,
+      itemHeight
+    });
+    (0, import_react.useEffect)(() => {
+      if (!virtual || !virtualApiRef)
+        return;
+      virtualApiRef.current = { scrollToIndex };
+      return () => {
+        if (virtualApiRef.current) {
+          virtualApiRef.current = null;
+        }
+      };
+    }, [virtual, virtualApiRef, scrollToIndex]);
+    (0, import_react.useEffect)(() => {
+      if (virtual) {
+        scrollToIndex(0);
+      }
+    }, [options, virtual, scrollToIndex]);
+    (0, import_react.useEffect)(() => {
+      if (options.length === 0)
+        return;
+      if (focusedKey === "")
+        return;
+      const focusedIndex = options.findIndex((o) => o.value === focusedKey);
+      if (focusedIndex < 0)
+        return;
+      if (virtual) {
+        scrollToIndex(focusedIndex);
+        return;
+      }
+      const container = rootRef.current;
+      if (!container)
+        return;
+      const optionElements = container.querySelectorAll('[role="option"]');
+      const targetElement = optionElements[focusedIndex];
+      if (targetElement) {
+        targetElement.scrollIntoView({ block: "nearest" });
+      }
+    }, [focusedKey, virtual, options, scrollToIndex, rootRef]);
+    const isEmpty = options.length === 0;
+    const ctxValue = {
+      prefixCls,
+      selectedKeys,
+      focusedKey,
+      multiple,
+      onSelect
+    };
+    if (virtual && !isEmpty) {
+      const visibleOptions = options.slice(start, end);
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        __spreadProps(__spreadValues({}, rest), {
+          className: (0, import_clsx.default)(
+            `${prefixCls}-popup`,
+            `${prefixCls}-popup-virtual`,
+            popupClassName
+          ),
+          style: popupStyle,
+          ref: rootRef,
+          tabIndex: -1
+        }),
+        /* @__PURE__ */ import_react.default.createElement(OptionsCtx.Provider, { value: ctxValue }, /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: `${prefixCls}-popup-viewport`,
+            ref: viewportRef,
+            onScroll,
+            style: { maxHeight: listHeight, overflowY: "auto" }
+          },
+          /* @__PURE__ */ import_react.default.createElement("div", { style: { height: totalHeight, position: "relative" } }, visibleOptions.map((option, i) => /* @__PURE__ */ import_react.default.createElement(
+            import_option.default,
+            __spreadProps(__spreadValues({}, option), {
+              key: option.value,
+              dataTestId: `${dataTestId}-${start + i}`,
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                height: itemHeight,
+                transform: `translateY(${offsetY + i * itemHeight}px)`
+              }
+            })
+          )))
+        ))
+      );
+    }
     return /* @__PURE__ */ import_react.default.createElement(
       "div",
       __spreadProps(__spreadValues({}, rest), {
         className: (0, import_clsx.default)(`${prefixCls}-popup`, popupClassName),
         style: popupStyle,
-        ref: componentRef,
+        ref: rootRef,
         tabIndex: -1
       }),
-      options.length === 0 ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-empty` }, select.noData) : /* @__PURE__ */ import_react.default.createElement(
-        OptionsCtx.Provider,
-        {
-          value: { prefixCls, selectedKeys, focusedKey, multiple, onSelect }
-        },
-        options.map((option, index) => /* @__PURE__ */ import_react.default.createElement(
-          import_option.default,
-          __spreadProps(__spreadValues({}, option), {
-            key: option.value,
-            dataTestId: `${dataTestId}-${index}`
-          })
-        ))
-      )
+      isEmpty ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-empty` }, select.noData) : /* @__PURE__ */ import_react.default.createElement(OptionsCtx.Provider, { value: ctxValue }, options.map((option, index) => /* @__PURE__ */ import_react.default.createElement(
+        import_option.default,
+        __spreadProps(__spreadValues({}, option), {
+          key: option.value,
+          dataTestId: `${dataTestId}-${index}`
+        })
+      )))
     );
   }
 );