@rainbow-oh/yee-c 0.6.3 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Button/style/index.less

@@ -171,7 +171,7 @@
     --m-btn-hover-color: var(--yee-primary-color-hover);
     --m-btn-active-color: var(--yee-primary-color-active);
     --m-btn-bg-color: var(--yee-btn-primary-bg-color);
-    --m-btn-hover-bg-color: var(--yee-primary-color-hover);
+    --m-btn-hover-bg-color: var(--yee-primary-color-border);
     --m-btn-active-bg-color: var(--yee-primary-color-active);
     --m-btn-border-color: var(--yee-primary-color);
     --m-btn-border-hover-color: var(--yee-primary-color-hover);
@@ -186,7 +186,7 @@
     --m-btn-border-color: var(--yee-success-color);
     --m-btn-border-hover-color: var(--yee-success-color-hover);
     --m-btn-border-active-color: var(--yee-success-color-active);
-    --m-btn-hover-bg-color: var(--yee-success-color-hover);
+    --m-btn-hover-bg-color: var(--yee-success-color-border);
     --m-btn-active-bg-color: var(--yee-success-color-active);
     --m-btn-active-shadow-color: var(--yee-success-color-active);
   }
@@ -198,7 +198,8 @@
     --m-btn-border-color: var(--yee-error-color);
     --m-btn-border-hover-color: var(--yee-error-color-hover);
     --m-btn-border-active-color: var(--yee-error-color-active);
-    --m-btn-hover-bg-color: var(--yee-error-color-hover);
+    // --m-btn-hover-bg-color: var(--yee-error-color-hover);
+    --m-btn-hover-bg-color: var(--yee-error-color-border);
     --m-btn-active-bg-color: var(--yee-error-color-active);
     --m-btn-active-shadow-color: var(--yee-error-color-active);
   }
@@ -210,7 +211,7 @@
     --m-btn-border-color: var(--yee-warning-color);
     --m-btn-border-hover-color: var(--yee-warning-color-hover);
     --m-btn-border-active-color: var(--yee-warning-color-active);
-    --m-btn-hover-bg-color: var(--yee-warning-color-hover);
+    --m-btn-hover-bg-color: var(--yee-warning-color-border);
     --m-btn-active-bg-color: var(--yee-warning-color-active);
     --m-btn-active-shadow-color: var(--yee-warning-color-active);
   }

package/src/Checkbox/style/index.less

@@ -63,7 +63,7 @@
       border-color: var(--yee-checkbox-border-color);
     }
 
-    &&-checked {
+    &@{pls}-checked {
       @{pls}-inner {
         --ye-checkbox-checked-border-color: var(
           --yee-checkbox-disabled-checked-border-color

package/src/Drawer/drawer.tsx

@@ -198,7 +198,7 @@ const Drawer = (baseprops: DrawerProps) => {
                 className={clsx(`${prefixCls}-header`, classNames?.header)}
                 style={styles?.header}
               >
-                <div className={`${prefixCls}-title`}>{title}</div>
+                <div className={clsx(`${prefixCls}-title`, classNames?.title)} style={styles?.title}>{title}</div>
               </div>
             ) : null}
             <div

package/src/Drawer/interface.ts

@@ -5,6 +5,7 @@ export type SemanticDOM =
   | 'wrapper'
   | 'close'
   | 'header'
+  | 'title'
   | 'content'
   | 'body'
   | 'footer';

package/src/Drawer/style/index.less

@@ -38,6 +38,7 @@
   }
 
   &-title {
+    font-size: var(--yee-drawer-title-font-size);
     font-weight: var(--yee-drawer-title-font-weight);
   }
 

package/src/List/demo/virtual.tsx

@@ -0,0 +1,20 @@
+import { List } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+const items = Array.from({ length: 10000 }, (_, i) => ({
+  key: String(i),
+  label: `List item ${i + 1}`,
+  value: String(i),
+}));
+
+export default () => {
+  return (
+    <List
+      virtual
+      height={300}
+      itemHeight={32}
+      items={items}
+      onClick={(item) => console.log('Clicked:', item.label)}
+    />
+  );
+};

package/src/List/hooks/useListKeyboard.ts

@@ -0,0 +1,235 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { ListItemProps } from '../interface';
+
+interface UseListKeyboardParams {
+  items: Array<ListItemProps>;
+  /**
+   * Number of columns in the grid layout.
+   * Affects ArrowUp/Down (jump by columns) and ArrowLeft/Right behavior.
+   * @default 1
+   */
+  columns?: number;
+  /**
+   * Controlled focused key from the parent.
+   * When provided, the hook uses this value instead of internal state.
+   */
+  focusedKey?: string | number;
+  /**
+   * Callback when focused key changes.
+   */
+  onFocusChange?: (key: string | number) => void;
+  /**
+   * Callback when Enter is pressed on a focused item.
+   */
+  onClick?: (item: ListItemProps) => void;
+}
+
+export default function useListKeyboard({
+  items,
+  columns = 1,
+  focusedKey: controlledFocusedKey,
+  onFocusChange,
+  onClick,
+}: UseListKeyboardParams) {
+  const [internalFocusedKey, setInternalFocusedKey] = useState<
+    string | number
+  >('');
+
+  const isControlled = controlledFocusedKey !== undefined;
+  const focusedKey = isControlled ? controlledFocusedKey : internalFocusedKey;
+
+  const setFocusedKey = useCallback(
+    (key: string | number) => {
+      if (!isControlled) {
+        setInternalFocusedKey(key);
+      }
+      onFocusChange?.(key);
+    },
+    [isControlled, onFocusChange],
+  );
+
+  // Reset internal focused key if it no longer exists in items
+  useEffect(() => {
+    if (
+      !isControlled &&
+      internalFocusedKey !== '' &&
+      !items.some((item) => item.key === internalFocusedKey)
+    ) {
+      setInternalFocusedKey('');
+    }
+  }, [items, isControlled, internalFocusedKey]);
+
+  const getFocusedIndex = (): number => {
+    if (focusedKey === '' || focusedKey === undefined) return -1;
+    return items.findIndex((item) => item.key === focusedKey);
+  };
+
+  const findNextEnabledIndex = (
+    startIndex: number,
+    direction: 1 | -1,
+  ): number => {
+    const count = items.length;
+    if (count === 0) return -1;
+    let next =
+      direction === 1
+        ? startIndex + 1 >= count
+          ? 0
+          : startIndex + 1
+        : startIndex - 1 < 0
+          ? count - 1
+          : startIndex - 1;
+
+    // Guard against infinite loop if all items are disabled
+    let attempts = 0;
+    while (items[next].disabled && attempts < count) {
+      next =
+        direction === 1
+          ? next + 1 >= count
+            ? 0
+            : next + 1
+          : next - 1 < 0
+            ? count - 1
+            : next - 1;
+      attempts++;
+    }
+    return items[next].disabled ? -1 : next;
+  };
+
+  const handleArrowUp = () => {
+    const focusedIndex = getFocusedIndex();
+    let nextIndex: number;
+
+    if (columns > 1) {
+      if (focusedIndex === -1) {
+        nextIndex = findNextEnabledIndex(items.length - 1, -1);
+      } else {
+        const target = focusedIndex - columns;
+        if (target >= 0) {
+          nextIndex = items[target].disabled
+            ? findNextEnabledIndex(target, -1)
+            : target;
+        } else {
+          // Wrap to last row, same column
+          const lastRowStart =
+            Math.floor((items.length - 1) / columns) * columns;
+          const col = focusedIndex % columns;
+          const wrapTarget = Math.min(lastRowStart + col, items.length - 1);
+          nextIndex = items[wrapTarget]?.disabled
+            ? findNextEnabledIndex(wrapTarget, -1)
+            : wrapTarget;
+        }
+      }
+    } else {
+      if (focusedIndex === -1) {
+        nextIndex = findNextEnabledIndex(items.length - 1, -1);
+      } else {
+        nextIndex = findNextEnabledIndex(focusedIndex, -1);
+      }
+    }
+
+    if (nextIndex !== -1) {
+      setFocusedKey(items[nextIndex].key);
+    }
+  };
+
+  const handleArrowDown = () => {
+    const focusedIndex = getFocusedIndex();
+    let nextIndex: number;
+
+    if (columns > 1) {
+      if (focusedIndex === -1) {
+        nextIndex = findNextEnabledIndex(-1, 1);
+      } else {
+        const target = focusedIndex + columns;
+        if (target < items.length) {
+          nextIndex = items[target].disabled
+            ? findNextEnabledIndex(target, 1)
+            : target;
+        } else {
+          // Wrap to first row, same column
+          const col = focusedIndex % columns;
+          const wrapTarget = col;
+          nextIndex = items[wrapTarget]?.disabled
+            ? findNextEnabledIndex(wrapTarget, 1)
+            : wrapTarget;
+        }
+      }
+    } else {
+      if (focusedIndex === -1) {
+        nextIndex = findNextEnabledIndex(-1, 1);
+      } else {
+        nextIndex = findNextEnabledIndex(focusedIndex, 1);
+      }
+    }
+
+    if (nextIndex !== -1) {
+      setFocusedKey(items[nextIndex].key);
+    }
+  };
+
+  const handleArrowLeft = () => {
+    const focusedIndex = getFocusedIndex();
+    if (focusedIndex <= 0) return;
+    const nextIndex = findNextEnabledIndex(focusedIndex, -1);
+    if (nextIndex !== -1) {
+      setFocusedKey(items[nextIndex].key);
+    }
+  };
+
+  const handleArrowRight = () => {
+    const focusedIndex = getFocusedIndex();
+    if (focusedIndex >= items.length - 1 && focusedIndex !== -1) return;
+    const nextIndex = findNextEnabledIndex(
+      focusedIndex === -1 ? -1 : focusedIndex,
+      1,
+    );
+    if (nextIndex !== -1) {
+      setFocusedKey(items[nextIndex].key);
+    }
+  };
+
+  const handleEnter = () => {
+    if (focusedKey === '' || focusedKey === undefined) return;
+    const item = items.find((i) => i.key === focusedKey);
+    if (item && !item.disabled) {
+      onClick?.(item);
+    }
+  };
+
+  const onKeyDown = (event: React.KeyboardEvent) => {
+    if (!items || items.length === 0) return;
+
+    switch (event.key) {
+      case 'ArrowUp':
+        event.preventDefault();
+        handleArrowUp();
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        handleArrowDown();
+        break;
+      case 'ArrowLeft':
+        if (columns > 1) {
+          event.preventDefault();
+          handleArrowLeft();
+        }
+        break;
+      case 'ArrowRight':
+        if (columns > 1) {
+          event.preventDefault();
+          handleArrowRight();
+        }
+        break;
+      case 'Enter':
+        event.preventDefault();
+        handleEnter();
+        break;
+      default:
+    }
+  };
+
+  return {
+    focusedKey,
+    onKeyDown,
+  };
+}

package/src/List/index.en-US.md

@@ -18,6 +18,7 @@ A list component for displaying a collection of items.
 <code src="./demo/bordered.tsx" title="Bordered" description="List with border"></code>
 <code src="./demo/renderItem.tsx" title="Custom Render" description="List with custom item rendering"></code>
 <code src="./demo/disabled.tsx" title="Disabled Items" description="List with disabled items"></code>
+<code src="./demo/virtual.tsx" title="Virtual Scroll" description="Virtual scrolling for large datasets (10,000 items), only rendering items in the visible area"></code>
 
 ## API
 
@@ -33,6 +34,11 @@ A list component for displaying a collection of items.
 | focusedKey | `string \| number` | Key of the focused item | - |
 | itemRender | `(item: ListItemProps) => React.ReactNode` | Function to render list items | - |
 | onClick | `(item: ListItemProps) => void` | Click event for list items | - |
+| onFocusChange | `(key: string \| number) => void` | Callback when focused item changes via keyboard navigation | - |
+| virtual | `boolean` | Enable virtual scrolling. Requires `height` to be set | `false` |
+| height | `number` | Scroll container height in pixels. Required when `virtual` is true | - |
+| itemHeight | `number` | Fixed height of each item in pixels | `32` |
+| columns | `number` | Number of columns. Enables grid layout when greater than 1 | `1` |
 
 ### ListItemProps
 

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

@@ -18,6 +18,7 @@ toc: 'content'
 <code src="./demo/bordered.tsx" title="带边框" description="带边框的列表"></code>
 <code src="./demo/renderItem.tsx" title="自定义渲染" description="自定义列表项渲染"></code>
 <code src="./demo/disabled.tsx" title="禁用项" description="包含禁用项的列表"></code>
+<code src="./demo/virtual.tsx" title="虚拟滚动" description="大数据量（万条）下的虚拟滚动，只渲染可视区域内的列表项"></code>
 
 ## API
 
@@ -33,6 +34,11 @@ toc: 'content'
 | focusedKey | `string \| number` | 聚焦项的 key | - |
 | itemRender | `(item: ListItemProps) => React.ReactNode` | 函数形式返回列表项 | - |
 | onClick | `(item: ListItemProps) => void` | 列表项的点击事件 | - |
+| onFocusChange | `(key: string \| number) => void` | 键盘导航焦点变化时的回调 | - |
+| virtual | `boolean` | 是否开启虚拟滚动，需同时设置 `height` | `false` |
+| height | `number` | 滚动容器高度（px），开启 `virtual` 时必填 | - |
+| itemHeight | `number` | 每项固定高度（px） | `32` |
+| columns | `number` | 列数，大于 1 时启用网格布局 | `1` |
 
 ### ListItemProps
 

package/src/List/interface.ts

@@ -52,8 +52,8 @@ export interface ListProps extends Omit<
    */
   bordered?: boolean;
   /**
-   * Set the focused item
-   * */
+   * Set the focused item (controlled)
+   */
   focusedKey?: string | number;
   /**
    * Render list item as a function
@@ -63,6 +63,33 @@ export interface ListProps extends Omit<
    * Click event for list items
    */
   onClick?: (item: ListItemProps) => void;
+  /**
+   * Callback when focused item changes via keyboard navigation
+   */
+  onFocusChange?: (key: string | number) => void;
+  /**
+   * Enable virtual scrolling for large lists.
+   * Requires `height` to be set.
+   * @default false
+   */
+  virtual?: boolean;
+  /**
+   * Height of the scrollable container in pixels.
+   * Required when `virtual` is true.
+   */
+  height?: number;
+  /**
+   * Fixed height of each list item row in pixels.
+   * Used for virtual scroll calculation.
+   * @default 32
+   */
+  itemHeight?: number;
+  /**
+   * Number of columns in the list layout.
+   * When greater than 1, items are displayed in a grid.
+   * @default 1
+   */
+  columns?: number;
 }
 
 export type ListCtxType = {

package/src/List/list.tsx

@@ -1,7 +1,9 @@
 import clsx from 'clsx';
 import React, { createContext, forwardRef, useContext } from 'react';
 import { GlobalContext } from '../Config-Provider';
+import useVirtualList from '../hooks/useVirtualList';
 import mergeContextToProps from '../utils/mergeContextToProps';
+import useListKeyboard from './hooks/useListKeyboard';
 import type { ListCtxType, ListProps } from './interface';
 import ListItem from './list-item';
 
@@ -16,43 +18,179 @@ const List = forwardRef<HTMLUListElement, ListProps>((baseprops, ref) => {
   const {
     prefixCls = 'yee-list',
     className,
+    style,
     items,
     bordered,
-    focusedKey,
+    focusedKey: controlledFocusedKey,
     itemRender,
     onClick,
+    onFocusChange,
+    virtual = false,
+    height,
+    itemHeight = 32,
+    columns = 1,
     ...rest
   } = props;
 
+  const multiColumn = columns > 1;
+  const useVirtual = virtual && height !== null && height !== undefined && Array.isArray(items);
+  const safeItems = Array.isArray(items) ? items : [];
+
+  // Keyboard navigation
+  const { focusedKey, onKeyDown } = useListKeyboard({
+    items: safeItems,
+    columns,
+    focusedKey: controlledFocusedKey,
+    onFocusChange,
+    onClick,
+  });
+
+  // Virtual scroll — in multi-column mode, track rows not individual items
+  const rowCount = multiColumn
+    ? Math.ceil(safeItems.length / columns)
+    : safeItems.length;
+
+  const { start, end, offsetY, totalHeight, viewportRef, onScroll } =
+    useVirtualList({
+      itemCount: useVirtual ? rowCount : 0,
+      itemHeight,
+      overscan: 4,
+    });
+
   const cls = clsx(
     prefixCls,
     {
       [`${prefixCls}-bordered`]: bordered,
+      [`${prefixCls}-grid`]: multiColumn && !useVirtual,
     },
     className,
   );
 
-  const itemRenders = () => {
-    return Array.isArray(items)
-      ? items.map((item, index) => {
-          if (typeof itemRender === 'function') {
-            return itemRender(item);
-          }
-          return <ListItem {...item} $key={item.key} key={item.key || index} />;
-        })
-      : null;
+  const renderItem = (item: any, index: number) => {
+    if (typeof itemRender === 'function') {
+      return itemRender(item);
+    }
+    return <ListItem {...item} $key={item.key} key={item.key || index} />;
   };
 
-  return (
-    <ul ref={ref} className={cls} tabIndex={0} aria-label="list" {...rest}>
-      <ListCtx.Provider
-        value={{
-          prefixCls,
-          focusedKey,
-          onClick: onClick,
-        }}
+  // ----- Virtual + multi-column: render rows of N items -----
+  if (useVirtual && multiColumn) {
+    const visibleRows = [];
+    for (let rowIdx = start; rowIdx < end; rowIdx++) {
+      const rowItems = [];
+      for (let col = 0; col < columns; col++) {
+        const flatIdx = rowIdx * columns + col;
+        if (flatIdx < safeItems.length) {
+          rowItems.push({ item: safeItems[flatIdx], flatIdx });
+        }
+      }
+      visibleRows.push({ rowIdx, rowItems });
+    }
+
+    return (
+      <ul
+        ref={ref}
+        className={cls}
+        tabIndex={0}
+        aria-label="list"
+        onKeyDown={onKeyDown}
+        {...rest}
+      >
+        <ListCtx.Provider value={{ prefixCls, focusedKey, onClick }}>
+          <div
+            ref={viewportRef}
+            onScroll={onScroll}
+            style={{ height, overflowY: 'auto' }}
+          >
+            <div style={{ height: totalHeight, position: 'relative' }}>
+              {visibleRows.map(({ rowIdx, rowItems }, ri) => (
+                <div
+                  key={rowIdx}
+                  className={`${prefixCls}-grid-row`}
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    height: itemHeight,
+                    transform: `translateY(${offsetY + ri * itemHeight}px)`,
+                    display: 'grid',
+                    gridTemplateColumns: `repeat(${columns}, 1fr)`,
+                  }}
+                >
+                  {rowItems.map(({ item, flatIdx }) =>
+                    renderItem(item, flatIdx),
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </ListCtx.Provider>
+      </ul>
+    );
+  }
+
+  // ----- Virtual single-column -----
+  if (useVirtual) {
+    const slicedItems = safeItems.slice(start, end);
+    return (
+      <ul
+        ref={ref}
+        className={cls}
+        tabIndex={0}
+        aria-label="list"
+        onKeyDown={onKeyDown}
+        {...rest}
       >
-        {itemRenders()}
+        <ListCtx.Provider value={{ prefixCls, focusedKey, onClick }}>
+          <div
+            ref={viewportRef}
+            onScroll={onScroll}
+            style={{ height, overflowY: 'auto' }}
+          >
+            <div style={{ height: totalHeight, position: 'relative' }}>
+              {slicedItems.map((item, i) => {
+                const element = renderItem(item, start + i);
+                return (
+                  <div
+                    key={item.key || start + i}
+                    style={{
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      width: '100%',
+                      height: itemHeight,
+                      transform: `translateY(${offsetY + i * itemHeight}px)`,
+                    }}
+                  >
+                    {element}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </ListCtx.Provider>
+      </ul>
+    );
+  }
+
+  // ----- Default mode (non-virtual) -----
+  return (
+    <ul
+      ref={ref}
+      className={cls}
+      tabIndex={0}
+      aria-label="list"
+      onKeyDown={onKeyDown}
+      style={
+        multiColumn
+          ? ({ '--yee-list-columns': columns, ...style } as React.CSSProperties)
+          : style
+      }
+      {...rest}
+    >
+      <ListCtx.Provider value={{ prefixCls, focusedKey, onClick }}>
+        {safeItems.map((item, index) => renderItem(item, index))}
       </ListCtx.Provider>
     </ul>
   );

package/src/List/style/index.less

@@ -6,18 +6,42 @@
   list-style: none;
   background-color: var(--yee-list-bg-color);
 
+  &:focus {
+    outline: none;
+  }
+
   &-item {
     padding: var(--yee-list-item-padding);
 
     &:hover:not(&-disabled) {
       background-color: var(--yee-list-item-bg-hover-color);
+    }
+
+    &-disabled {
       cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    &-clickable:not(&-disabled) {
+      cursor: pointer;
     }
 
     &-focused {
       background-color: var(--yee-list-item-bg-hover-color);
     }
   }
+
+  // Multi-column grid layout (non-virtual mode).
+  // Column count driven by CSS custom property --yee-list-columns set inline.
+  &-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--yee-list-columns, 1), 1fr);
+  }
+
+  // Virtual multi-column: each row is already a grid via inline style.
+  &-grid-row {
+    align-items: center;
+  }
 }
 
 @{pls}-bordered {