@rainbow-oh/yee-c 0.4.4 → 0.5.0

package/src/PickerPanel/panels/RangePanel/index.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 
 import { Dayjs } from 'dayjs';
+import type { PickerPanelProps } from '../../interface';
+import type { RangePanelProps } from './interface';
 import PickerPanel from '../../picker-panel';
 import pickerUtils from '../../utils/pickerUtils';
 
-function RangePanel(props: any) {
+function RangePanel(props: RangePanelProps) {
   const {
     prefixCls = 'yee-picker',
     panel = 'start',
@@ -28,12 +30,12 @@ function RangePanel(props: any) {
           picker={picker}
           value={panel === 'start' ? value[0] : value[1]}
           pickerView={pickerUtils.init(pickerView[panel === 'start' ? 0 : 1])}
-          onChange={onChange}
+          onChange={onChange as PickerPanelProps['onChange']}
           onPanelChange={onPanelChange}
           onCellMouse={onCellMouse}
           hoverRange={hoverRange}
           selectedRange={selectedRange}
-          disabledDate={disabledDate}
+          disabledDate={disabledDate as PickerPanelProps['disabledDate']}
           footer={false}
         />
       </div>
@@ -61,12 +63,12 @@ function RangePanel(props: any) {
         picker={picker}
         value={startValue}
         pickerView={startViewDate}
-        onChange={onChange}
-        onPanelChange={(viewDate) => onPanelChange(viewDate, 'start')}
+        onChange={onChange as PickerPanelProps['onChange']}
+        onPanelChange={(viewDate) => onPanelChange?.(viewDate, 'start')}
         onCellMouse={onCellMouse}
         hoverRange={hoverRange}
         selectedRange={selectedRange}
-        disabledDate={disabledDate}
+        disabledDate={disabledDate as PickerPanelProps['disabledDate']}
         footer={false}
         showNextIcon={false}
         showSuperNextIcon={false}
@@ -76,12 +78,12 @@ function RangePanel(props: any) {
         picker={picker}
         value={endValue}
         pickerView={endViewDate}
-        onChange={onChange}
-        onPanelChange={(viewDate) => onPanelChange(viewDate, 'end')}
+        onChange={onChange as PickerPanelProps['onChange']}
+        onPanelChange={(viewDate) => onPanelChange?.(viewDate, 'end')}
         onCellMouse={onCellMouse}
         hoverRange={hoverRange}
         selectedRange={selectedRange}
-        disabledDate={disabledDate}
+        disabledDate={disabledDate as PickerPanelProps['disabledDate']}
         footer={false}
         showPrevIcon={false}
         showSuperPrevIcon={false}

package/src/PickerPanel/panels/RangePanel/interface.ts

@@ -22,17 +22,17 @@ export type PickerType =
 export interface RangePanelProps {
   prefixCls?: string;
   panel?: 'start' | 'end';
-  value?: Array<Dayjs | string | undefined>;
-  viewDate?: string;
+  value: Array<Dayjs | undefined>;
+  pickerView: [Dayjs, Dayjs];
   picker?: PickerType;
   mode?: PickerMode;
   format?: string;
   saveFormat?: string;
   onChange?: (date: Dayjs, panel: string) => void;
-  onPanelChange?: (dates: Dayjs[]) => void;
+  onPanelChange?: (date: Dayjs, type?: 'start' | 'end') => void;
   onCellMouse?: (date: Dayjs | string) => void;
-  hoverRange?: Array<Dayjs | null>;
-  selectedRange?: Array<Dayjs | null>;
+  hoverRange?: Array<Dayjs | null | undefined>;
+  selectedRange?: Array<Dayjs | null | undefined>;
   disabledDate?: (current: Dayjs, type: 'start' | 'end') => boolean;
   showNextIcon?: boolean;
   showSuperNextIcon?: boolean;

package/src/PickerPanel/panels/TimePanel/TimeBody.tsx

@@ -1,5 +1,6 @@
 import { Dayjs } from 'dayjs';
 import * as React from 'react';
+import type { PanelSharedProps, TimeUnit } from '../../interface';
 import panelConfig from '../../configs';
 import pickerUtils from '../../utils/pickerUtils';
 import TimeColumn from './TimeColumn';
@@ -10,7 +11,7 @@ function getTimeArray(
   length: number,
   step: number,
   viewDate: Dayjs,
-  type: string,
+  type: TimeUnit,
 ): Array<Dayjs> {
   const arr = new Array(length)
     .fill(0)
@@ -25,7 +26,22 @@ function getTimeArray(
   }
 }
 
-function TimeBody(props: any) {
+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;
+}
+
+function TimeBody(props: TimeBodyProps) {
   const {
     value,
     prefixCls,
@@ -48,10 +64,10 @@ function TimeBody(props: any) {
   const columns: React.ReactNode[] = [];
 
   function addColumnNode(
-    type: string,
-    selectedValue: number,
+    type: TimeUnit,
+    selectedValue: Dayjs | undefined,
     cells: Array<Dayjs>,
-    disabled: boolean,
+    disabled?: boolean,
   ): React.ReactNode {
     return (
       <TimeColumn

package/src/PickerPanel/panels/TimePanel/TimeCell.tsx

@@ -1,7 +1,14 @@
 import clsx from 'clsx';
 import React from 'react';
 
-function TimeCell(props: any) {
+interface TimeCellProps {
+  prefixCls?: string;
+  value: number;
+  onSelect?: (value: number) => void;
+  active?: boolean;
+}
+
+function TimeCell(props: TimeCellProps) {
   const { prefixCls, value, onSelect, active } = props;
 
   const cls = clsx(`${prefixCls}-time-panel-cell`, {
@@ -11,7 +18,7 @@ function TimeCell(props: any) {
   const renderValue = value < 10 ? '0' + value : value;
 
   return (
-    <li className={cls} onClick={() => onSelect(value)}>
+    <li className={cls} onClick={() => onSelect?.(value)}>
       <div className={`${prefixCls}-time-panel-cell-inner`}>{renderValue}</div>
     </li>
   );

package/src/PickerPanel/panels/TimePanel/TimeColumn.tsx

@@ -1,9 +1,22 @@
 import clsx from 'clsx';
 import dayjs, { Dayjs } from 'dayjs';
 import React from 'react';
+import type { TimeUnit } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 
-function TimeColumn(props: any) {
+interface TimeColumnProps {
+  prefixCls?: string;
+  type: TimeUnit;
+  value?: Dayjs;
+  cells: Dayjs[];
+  disabled?: boolean;
+  onSelect?: (date: Dayjs) => void;
+  viewDate?: Dayjs;
+  maxDate?: Dayjs;
+  minDate?: Dayjs;
+}
+
+function TimeColumn(props: TimeColumnProps) {
   const {
     prefixCls,
     type,
@@ -20,7 +33,7 @@ function TimeColumn(props: any) {
   const [selectedCell, setSelectedCell] = React.useState<number>();
 
   React.useLayoutEffect(() => {
-    if (value !== -1 && selectedRef.current) {
+    if (value !== undefined && selectedRef.current) {
       ref.current?.scrollTo({
         top: selectedRef.current?.offsetTop,
         behavior: 'smooth',

package/src/PickerPanel/panels/TimePanel/TimeHeader.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 
-function TimeHeader(props: any) {
+interface TimeHeaderProps {
+  prefixCls?: string;
+}
+
+function TimeHeader(props: TimeHeaderProps) {
   const { prefixCls } = props;
 
   return (

package/src/PickerPanel/panels/TimePanel/index.tsx

@@ -1,8 +1,17 @@
 import * as React from 'react';
+import type { PanelSharedProps } from '../../interface';
 import TimeBody from './TimeBody';
 import TimeHeader from './TimeHeader';
 
-function TimePanel(props: any) {
+interface TimePanelProps extends PanelSharedProps {
+  format?: string;
+  hourStep?: number;
+  minuteStep?: number;
+  secondStep?: number;
+  showTitle?: boolean;
+}
+
+function TimePanel(props: TimePanelProps) {
   const {
     format = 'HH:mm:ss',
     prefixCls,

package/src/PickerPanel/panels/WeekPanel/WeekBody.tsx

@@ -3,10 +3,11 @@ import { Dayjs } from 'dayjs';
 import * as React from 'react';
 import useEvent from '../../../hooks/useEvent';
 import { useLocale } from '../../../locale';
+import type { PanelSharedProps } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 import PanelBody from '../PanelBody';
 
-function WeekBody(props: any) {
+function WeekBody(props: PanelSharedProps) {
   const { locale } = useLocale();
   const { weekpicker } = locale;
 

package/src/PickerPanel/panels/WeekPanel/WeekHeader.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import Button from '../../../Button';
 import useEvent from '../../../hooks/useEvent';
+import type { PanelSharedProps } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 import Header from '../Header';
 
-export default function WeekHeader(props: any) {
+export default function WeekHeader(props: PanelSharedProps) {
   const { viewDate, onViewDateChange, onPanelChange } = props;
 
   const year = pickerUtils.getYear(viewDate);

package/src/PickerPanel/panels/WeekPanel/index.tsx

@@ -1,11 +1,12 @@
 import clsx from 'clsx';
 import { Dayjs } from 'dayjs';
 import React from 'react';
+import type { PanelSharedProps } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 import DateBody from '../DatePanel/DateBody';
 import DateHeader from '../DatePanel/DateHeader';
 
-export default function WeekPanel(props: any) {
+export default function WeekPanel(props: PanelSharedProps) {
   const { prefixCls, selectedDate } = props;
 
   const prefixColumn = (currentDate: Dayjs) => {

package/src/PickerPanel/panels/YearPanel/YearBody.tsx

@@ -4,9 +4,10 @@ import * as React from 'react';
 import PanelBody from '../PanelBody';
 
 import useEvent from '../../../hooks/useEvent';
+import type { PanelSharedProps } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 
-function YearBody(props: any) {
+function YearBody(props: PanelSharedProps) {
   const {
     prefixCls,
     viewDate,
@@ -14,7 +15,7 @@ function YearBody(props: any) {
     maxDate,
     minDate,
     nowDate,
-    offsetYear,
+    offsetYear = 0,
     hoverRange = [],
     selectedRange = [],
   } = props;
@@ -34,7 +35,7 @@ function YearBody(props: any) {
 
   const getCellTitle = useEvent((currentDate: Dayjs) => {
     const _year = pickerUtils.getYear(currentDate) + offsetYear;
-    return _year < 1000 ? '0' + _year : _year;
+    return _year < 1000 ? '0' + _year : String(_year);
   });
 
   const getCellClassName = useEvent((currentDate: Dayjs) => {

package/src/PickerPanel/panels/YearPanel/YearHeader.tsx

@@ -2,12 +2,18 @@ import * as React from 'react';
 import Button from '../../../Button';
 import useEvent from '../../../hooks/useEvent';
 import Header from '../Header';
+import type { PanelSharedProps } from '../../interface';
 
 import pickerUtils from '../../utils/pickerUtils';
 
-export default function YearHeader(props: any) {
-  const { prefixCls, viewDate, onViewDateChange, onPanelChange, offsetYear } =
-    props;
+export default function YearHeader(props: PanelSharedProps) {
+  const {
+    prefixCls,
+    viewDate,
+    onViewDateChange,
+    onPanelChange,
+    offsetYear = 0,
+  } = props;
 
   const viewYear = pickerUtils.getYear(viewDate);
   const startYear = viewYear - (viewYear % 10) + offsetYear;

package/src/PickerPanel/panels/YearPanel/index.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
+import type { PanelSharedProps } from '../../interface';
 import YearBody from './YearBody';
 import YearHeader from './YearHeader';
 
-export default function DecadePanel(props: any) {
+export default function DecadePanel(props: PanelSharedProps) {
   const { prefixCls, offset } = props;
 
   let offsetYear = 0;
   if (offset?.year) {
-    offsetYear = parseInt(offset.year);
+    offsetYear = offset.year;
   }
 
   return (

package/src/PickerPanel/picker-panel.tsx

@@ -76,7 +76,7 @@ const PickerPanel = React.forwardRef<HTMLDivElement, PickerPanelProps>(
     });
 
     // Panel view switch
-    const handlePanelChange = (newView: 'year' | 'month' | 'date') => {
+    const handlePanelChange = (newView: PickerType) => {
       prevPanelView.current = panelView;
       setPanelView(newView);
     };
@@ -87,8 +87,10 @@ const PickerPanel = React.forwardRef<HTMLDivElement, PickerPanelProps>(
       onPanelChange?.(newViewDate);
     };
 
-    const handleMouseChange = (date: Dayjs) => {
-      onCellMouse?.(date);
+    // `PanelBody` clears the hover by passing `''`; forward as-is to preserve
+    // the existing runtime behavior.
+    const handleMouseChange = (date: Dayjs | '') => {
+      onCellMouse?.(date as Dayjs);
     };
 
     const handleNowClick = () => {

package/src/PickerPanel/utils/pickerUtils.ts

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import dayjs, { Dayjs, QUnitType } from 'dayjs';
+import dayjs, { Dayjs, OpUnitType, QUnitType } from 'dayjs';
 import buddhistEra from 'dayjs/plugin/buddhistEra';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import isBetween from 'dayjs/plugin/isBetween';
@@ -26,7 +26,7 @@ type PickerType =
 
 const d = {
   dayjs: dayjs,
-  init: (date?: string, ...rest: any[]) => dayjs(date, ...rest),
+  init: (date?: dayjs.ConfigType, option?: dayjs.OptionType) => dayjs(date, option),
   getNow: () => {
     return d.init(undefined);
   },
@@ -40,7 +40,11 @@ const d = {
   getSecond: (date: Dayjs) => date.second(),
 
   format: (date: Dayjs, format: string) => dayjs(date).format(format),
-  isSame: (date1: Dayjs, date2: Dayjs, type?: PickerType) => {
+  isSame: (
+    date1: Dayjs | undefined,
+    date2: Dayjs | undefined,
+    type?: PickerType,
+  ) => {
     if (!d.isValid(date1) && !d.isValid(date2)) return true;
     return date1 && date2 ? date1.isSame(date2, type as QUnitType) : false;
   },
@@ -56,18 +60,23 @@ const d = {
   addDate: (date: Dayjs, offset: number) => date?.add(offset, 'day'),
   isAfter: (
     date1: Dayjs,
-    date2: Dayjs,
+    date2: Dayjs | undefined,
     type?: 'day' | 'hour' | 'minute' | 'second' | 'year' | 'month',
   ) => (date2 ? date1.isAfter(date2, type) : false),
   isBefore: (
     date1: Dayjs,
-    date2: Dayjs,
+    date2: Dayjs | undefined,
     type?: 'day' | 'hour' | 'minute' | 'second' | 'year' | 'month',
   ) => (date2 ? date1.isBefore(date2, type) : false),
-  isValid: (date: Dayjs, format?: string, strict?: boolean) =>
+  isValid: (date: Dayjs | undefined, format?: string, strict?: boolean) =>
     dayjs(date, format, strict).isValid(),
-  isBetween: (date: Dayjs, start: Dayjs, end: Dayjs, ...args: any[]) =>
-    date && start && end ? date.isBetween(start, end, ...args) : false,
+  isBetween: (
+    date: Dayjs,
+    start: Dayjs,
+    end: Dayjs,
+    unit?: OpUnitType,
+    nulls?: '()' | '[]' | '[)' | '(]',
+  ) => (date && start && end ? date.isBetween(start, end, unit, nulls) : false),
 
   getCellClassName: ({
     date,

package/src/Select/demo/basic.tsx

@@ -15,7 +15,7 @@ const options = [
 ];
 
 export default () => {
-  const [value, setValue] = useState('apple');
+  const [value, setValue] = useState('mango');
 
   return (
     <Select

package/src/Select/demo/virtual.tsx

@@ -0,0 +1,25 @@
+import { Select } from '@rainbow-oh/yee-c';
+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.
+const options = Array.from({ length: 5000 }, (_, i) => ({
+  label: `Option ${i + 1}`,
+  value: i,
+}));
+
+export default () => {
+  const [value, setValue] = useState<number>(100);
+
+  return (
+    <Select
+      virtual
+      searchable
+      value={value}
+      onChange={(val) => setValue(val as number)}
+      options={options}
+      style={{ width: 200 }}
+      placeholder="Please select"
+    />
+  );
+};

package/src/Select/hooks/useSelectKeyboard.ts

@@ -13,6 +13,12 @@ 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({
@@ -23,6 +29,7 @@ export default function useSelectKeyboard({
   onClose,
   onOpenChange,
   containerRef,
+  scrollToIndex,
 }: UseSelectKeyboardParams) {
   const [focusedKey, setFocusedKey] = useState<string | number>('');
   const latestFocusedKey = useLatest(focusedKey);
@@ -59,6 +66,13 @@ export default function useSelectKeyboard({
 
   // Scroll the focused option into view
   const scrollOptionIntoView = (index: number) => {
+    // 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;
+    }
+
     const container = containerRef?.current;
     if (!container) return;
 
@@ -163,20 +177,30 @@ export default function useSelectKeyboard({
   useEffect(() => {
     if (open) {
       // Focus the first selected option, or the first enabled option
+      let focusedValue: string | number = '';
       if (selectedKeys?.length > 0) {
         const firstSelected = options?.find(
           (opt) => opt.value === selectedKeys[0],
         );
         if (firstSelected && !firstSelected.disabled) {
-          setFocusedKey(firstSelected.value);
-          return;
+          focusedValue = firstSelected.value;
         }
       }
-      // Find the first enabled option
-      const firstEnabled = options?.find((opt) => !opt.disabled);
-      if (firstEnabled) {
-        setFocusedKey(firstEnabled.value);
+      if (!focusedValue) {
+        // Find the first enabled option
+        const firstEnabled = options?.find((opt) => !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/src/Select/index.en-US.md

@@ -21,6 +21,7 @@ Select component for choosing from a set of options.
 <code src="./demo/multiple.tsx" title="Multiple" description="Multiple selection mode"></code>
 <code src="./demo/search.tsx" title="Search" description="Searchable Select"></code>
 <code src="./demo/tags.tsx" title="Tags" description="Tags mode Select"></code>
+<code src="./demo/virtual.tsx" title="Virtual Scroll" description="Virtual scrolling for large datasets (thousands of options)"></code>
 
 ## API
 
@@ -46,6 +47,9 @@ Select component for choosing from a set of options.
 | optionLabelProp | `string \| (() => string)` | Property to display in the input box | - |
 | onChange | `(value: string \| number \| Array<string \| number>, options?: Option \| undefined \| Option[]) => void` | Value change callback | - |
 | onFilter | `(value: string, options: Array<Option>) => Array<Option>` | Search callback | - |
+| virtual | `boolean` | Enable virtual scrolling. Only the options in the visible window are rendered, so the DOM node count stays constant regardless of the total. Recommended for hundreds or thousands of options | `false` |
+| itemHeight | `number` | Fixed height of each option in pixels. Must be a fixed value when `virtual` is enabled | `32` |
+| listHeight | `number` | Max height of the dropdown popup in pixels | `200` |
 | data-* | `string` | - | Supports all data-* attributes, forwarded to root DOM element |
 
 ### Option

package/src/Select/index.zh-CN.md

@@ -21,6 +21,7 @@ toc: 'content'
 <code src="./demo/multiple.tsx" title="多选" description="多选模式"></code>
 <code src="./demo/search.tsx" title="可搜索" description="可搜索的Select"></code>
 <code src="./demo/tags.tsx" title="标签模式" description="标签模式的Select"></code>
+<code src="./demo/virtual.tsx" title="虚拟滚动" description="大数据量（几千条）下的虚拟滚动"></code>
 
 ## API
 
@@ -46,6 +47,9 @@ toc: 'content'
 | optionLabelProp | `string \| (() => string)` | 回填到选择框里的属性 | - |
 | onChange | `(value: string \| number \| Array<string \| number>, options?: Option \| undefined \| Option[]) => void` | 值改变时的回调函数 | - |
 | onFilter | `(value: string, options: Array<Option>) => Array<Option>` | 搜索时的回调函数 | - |
+| virtual | `boolean` | 是否开启虚拟滚动。开启后仅渲染可视区内的选项，DOM 节点数与数据总量无关，适合成百上千条数据 | `false` |
+| itemHeight | `number` | 每个选项的固定高度（px），开启 `virtual` 时必须为定值 | `32` |
+| listHeight | `number` | 下拉框最大高度（px） | `200` |
 | data-* | `string` | - | 支持所有 data-* 属性，透传到组件根 DOM 元素 |
 
 ### Option

package/src/Select/interface.ts

@@ -104,6 +104,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;
 }
 
 /**
@@ -130,6 +150,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;
 }
 
 /**
@@ -149,8 +174,10 @@ export interface OptionsContextValue {
 /**
  * Props for the internal Options (popup list) component.
  */
-export interface OptionsProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+export interface OptionsProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'onSelect'
+> {
   /**
    * Custom class name prefix
    */
@@ -184,6 +211,25 @@ export interface OptionsProps
    * 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/src/Select/option.tsx

@@ -6,7 +6,7 @@ import type { OptionProps } from './interface';
 import { OptionsCtx } from './options';
 
 const Option = (props: OptionProps) => {
-  const { label, value, disabled, title, dataTestId } = props;
+  const { label, value, disabled, title, dataTestId, style } = props;
   const { prefixCls, selectedKeys, focusedKey, multiple, onSelect } =
     useContext(OptionsCtx);
 
@@ -42,6 +42,7 @@ const Option = (props: OptionProps) => {
       tabIndex={disabled ? undefined : 0}
       title={htmlTitle}
       data-testid={dataTestId}
+      style={style}
     >
       <div className={`${prefixCls}-option-content`}>{label}</div>
       {multiple && selected && (