@rainbow-oh/yee-c 0.4.5 → 0.5.0

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 && (

package/src/Select/options.tsx

@@ -1,5 +1,12 @@
 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 type { OptionsContextValue, OptionsProps } from './interface';
 import Option from './option';
@@ -22,27 +29,151 @@ const Options = forwardRef<HTMLDivElement, OptionsProps>(
       focusedKey,
       dataTestId,
       multiple,
+      virtual,
+      itemHeight = 32,
+      listHeight = 200,
+      virtualApiRef,
       onSelect,
       ...rest
     } = props;
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const componentRef = ref || useRef<HTMLDivElement>(null);
+    const rootRef = useRef<HTMLDivElement | null>(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, () => rootRef.current as HTMLDivElement, []);
 
+    // Hook is always called (rules of hooks). When `virtual` is off the
+    // returned viewportRef is never attached, so the observer stays idle.
+    const {
+      start,
+      end,
+      offsetY,
+      totalHeight,
+      viewportRef,
+      onScroll,
+      scrollToIndex,
+    } = useVirtualList({
+      itemCount: options.length,
+      itemHeight,
+    });
+
+    // Expose the virtual scroll API to the parent so keyboard navigation
+    // can drive the virtual viewport (replaces scrollIntoView).
+    useEffect(() => {
+      if (!virtual || !virtualApiRef) return;
+      virtualApiRef.current = { scrollToIndex };
+      return () => {
+        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(() => {
+      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(() => {
+      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] as
+        | HTMLElement
+        | undefined;
+      if (targetElement) {
+        targetElement.scrollIntoView({ block: 'nearest' });
+      }
+    }, [focusedKey, virtual, options, scrollToIndex, rootRef]);
+
+    const isEmpty = options.length === 0;
+    const ctxValue = {
+      prefixCls,
+      selectedKeys,
+      focusedKey,
+      multiple,
+      onSelect,
+    };
+
+    // ----- Virtual mode: only render the visible window -----
+    if (virtual && !isEmpty) {
+      const visibleOptions = options.slice(start, end);
+      return (
+        <div
+          {...rest}
+          className={clsx(
+            `${prefixCls}-popup`,
+            `${prefixCls}-popup-virtual`,
+            popupClassName,
+          )}
+          style={popupStyle}
+          ref={rootRef}
+          tabIndex={-1}
+        >
+          <OptionsCtx.Provider value={ctxValue}>
+            <div
+              className={`${prefixCls}-popup-viewport`}
+              ref={viewportRef}
+              onScroll={onScroll}
+              style={{ maxHeight: listHeight, overflowY: 'auto' }}
+            >
+              <div style={{ height: totalHeight, position: 'relative' }}>
+                {visibleOptions.map((option, i) => (
+                  <Option
+                    {...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)`,
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+          </OptionsCtx.Provider>
+        </div>
+      );
+    }
+
+    // ----- Default mode: render every option (unchanged behavior) -----
     return (
       <div
         {...rest}
         className={clsx(`${prefixCls}-popup`, popupClassName)}
         style={popupStyle}
-        ref={componentRef}
+        ref={rootRef}
         tabIndex={-1}
       >
-        {options.length === 0 ? (
+        {isEmpty ? (
           <div className={`${prefixCls}-empty`}>{select.noData}</div>
         ) : (
-          <OptionsCtx.Provider
-            value={{ prefixCls, selectedKeys, focusedKey, multiple, onSelect }}
-          >
+          <OptionsCtx.Provider value={ctxValue}>
             {options.map((option, index: number) => (
               <Option
                 {...option}

package/src/Select/select.tsx

@@ -1,4 +1,10 @@
-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';
@@ -23,6 +29,9 @@ const Select = (baseprops: SelectProps) => {
     disabled,
     onChange,
     onFilter,
+    virtual,
+    itemHeight,
+    listHeight,
     ...rest
   } = props;
 
@@ -50,6 +59,14 @@ const Select = (baseprops: SelectProps) => {
 
   const [open, setOpen] = useState(false);
   const popupRef = useRef<HTMLDivElement>(null);
+  // Holds the virtual list API exposed by <Options>, so keyboard navigation
+  // can drive the virtual viewport (only populated when `virtual` is on).
+  const virtualApiRef = useRef<{
+    scrollToIndex: (index: number) => void;
+  } | null>(null);
+  const handleVirtualScrollToIndex = useCallback((index: number) => {
+    virtualApiRef.current?.scrollToIndex(index);
+  }, []);
 
   const getOptions = (keys: string | number | Array<string | number>) => {
     if (keys === '' || keys === null) {
@@ -135,6 +152,7 @@ const Select = (baseprops: SelectProps) => {
     onClose: () => setOpen(false),
     onOpenChange: handleOpenChange,
     containerRef: popupRef as React.RefObject<HTMLDivElement>,
+    scrollToIndex: virtual ? handleVirtualScrollToIndex : undefined,
   });
 
   const popup = (
@@ -147,6 +165,10 @@ const Select = (baseprops: SelectProps) => {
       dataTestId={rest['data-testid']}
       onSelect={handleSelect}
       ref={popupRef}
+      virtual={virtual}
+      itemHeight={itemHeight}
+      listHeight={listHeight}
+      virtualApiRef={virtualApiRef}
     />
   );
 

package/src/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/src/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/src/hooks/index.ts

@@ -16,6 +16,7 @@ import useMount from './useMount';
 import usePrevious from './usePrevious';
 import useUpdateEffect from './useUpdateEffect';
 import useVirtualForm from './useVirtualForm';
+import useVirtualList from './useVirtualList';
 
 export {
   useBreakpoint,
@@ -36,4 +37,5 @@ export {
   usePrevious,
   useUpdateEffect,
   useVirtualForm,
+  useVirtualList,
 };