@rainbow-oh/yee-c 0.6.3 → 0.7.0

package/dist/esm/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/dist/esm/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/dist/esm/Drawer/drawer.js

@@ -228,7 +228,8 @@ var Drawer = function Drawer(baseprops) {
       className: clsx("".concat(prefixCls, "-header"), classNames === null || classNames === void 0 ? void 0 : classNames.header),
       style: styles === null || styles === void 0 ? void 0 : styles.header
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-title")
+      className: clsx("".concat(prefixCls, "-title"), classNames === null || classNames === void 0 ? void 0 : classNames.title),
+      style: styles === null || styles === void 0 ? void 0 : styles.title
     }, title)) : null, /*#__PURE__*/React.createElement("div", {
       className: clsx("".concat(prefixCls, "-body"), classNames === null || classNames === void 0 ? void 0 : classNames.body),
       style: styles === null || styles === void 0 ? void 0 : styles.body

package/dist/esm/Drawer/interface.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { DataAttributeProps } from '../utils/types';
-export type SemanticDOM = 'mask' | 'wrapper' | 'close' | 'header' | 'content' | 'body' | 'footer';
+export type SemanticDOM = 'mask' | 'wrapper' | 'close' | 'header' | 'title' | 'content' | 'body' | 'footer';
 export interface DrawerProps extends DataAttributeProps {
     /**
      * Custom prefix class name

package/dist/esm/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/dist/esm/List/demo/virtual.d.ts

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

package/dist/esm/List/demo/virtual.js

@@ -0,0 +1,22 @@
+import { List } from "../..";
+import React from 'react';
+var items = Array.from({
+  length: 10000
+}, function (_, i) {
+  return {
+    key: String(i),
+    label: "List item ".concat(i + 1),
+    value: String(i)
+  };
+});
+export default (function () {
+  return /*#__PURE__*/React.createElement(List, {
+    virtual: true,
+    height: 300,
+    itemHeight: 32,
+    items: items,
+    onClick: function onClick(item) {
+      return console.log('Clicked:', item.label);
+    }
+  });
+});

package/dist/esm/List/hooks/useListKeyboard.d.ts

@@ -0,0 +1,28 @@
+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, focusedKey: controlledFocusedKey, onFocusChange, onClick, }: UseListKeyboardParams): {
+    focusedKey: string | number;
+    onKeyDown: (event: React.KeyboardEvent) => void;
+};
+export {};

package/dist/esm/List/hooks/useListKeyboard.js

@@ -0,0 +1,173 @@
+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 { useCallback, useEffect, useState } from 'react';
+export default function useListKeyboard(_ref) {
+  var items = _ref.items,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? 1 : _ref$columns,
+    controlledFocusedKey = _ref.focusedKey,
+    onFocusChange = _ref.onFocusChange,
+    onClick = _ref.onClick;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalFocusedKey = _useState2[0],
+    setInternalFocusedKey = _useState2[1];
+  var isControlled = controlledFocusedKey !== undefined;
+  var focusedKey = isControlled ? controlledFocusedKey : internalFocusedKey;
+  var setFocusedKey = useCallback(function (key) {
+    if (!isControlled) {
+      setInternalFocusedKey(key);
+    }
+    onFocusChange === null || onFocusChange === void 0 || onFocusChange(key);
+  }, [isControlled, onFocusChange]);
+
+  // Reset internal focused key if it no longer exists in items
+  useEffect(function () {
+    if (!isControlled && internalFocusedKey !== '' && !items.some(function (item) {
+      return item.key === internalFocusedKey;
+    })) {
+      setInternalFocusedKey('');
+    }
+  }, [items, isControlled, internalFocusedKey]);
+  var getFocusedIndex = function getFocusedIndex() {
+    if (focusedKey === '' || focusedKey === undefined) return -1;
+    return items.findIndex(function (item) {
+      return item.key === focusedKey;
+    });
+  };
+  var findNextEnabledIndex = function findNextEnabledIndex(startIndex, direction) {
+    var count = items.length;
+    if (count === 0) return -1;
+    var 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
+    var 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;
+  };
+  var handleArrowUp = function handleArrowUp() {
+    var focusedIndex = getFocusedIndex();
+    var nextIndex;
+    if (columns > 1) {
+      if (focusedIndex === -1) {
+        nextIndex = findNextEnabledIndex(items.length - 1, -1);
+      } else {
+        var target = focusedIndex - columns;
+        if (target >= 0) {
+          nextIndex = items[target].disabled ? findNextEnabledIndex(target, -1) : target;
+        } else {
+          var _items$wrapTarget;
+          // Wrap to last row, same column
+          var lastRowStart = Math.floor((items.length - 1) / columns) * columns;
+          var col = focusedIndex % columns;
+          var wrapTarget = Math.min(lastRowStart + col, items.length - 1);
+          nextIndex = (_items$wrapTarget = items[wrapTarget]) !== null && _items$wrapTarget !== void 0 && _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);
+    }
+  };
+  var handleArrowDown = function handleArrowDown() {
+    var focusedIndex = getFocusedIndex();
+    var nextIndex;
+    if (columns > 1) {
+      if (focusedIndex === -1) {
+        nextIndex = findNextEnabledIndex(-1, 1);
+      } else {
+        var target = focusedIndex + columns;
+        if (target < items.length) {
+          nextIndex = items[target].disabled ? findNextEnabledIndex(target, 1) : target;
+        } else {
+          var _items$wrapTarget2;
+          // Wrap to first row, same column
+          var col = focusedIndex % columns;
+          var wrapTarget = col;
+          nextIndex = (_items$wrapTarget2 = items[wrapTarget]) !== null && _items$wrapTarget2 !== void 0 && _items$wrapTarget2.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);
+    }
+  };
+  var handleArrowLeft = function handleArrowLeft() {
+    var focusedIndex = getFocusedIndex();
+    if (focusedIndex <= 0) return;
+    var nextIndex = findNextEnabledIndex(focusedIndex, -1);
+    if (nextIndex !== -1) {
+      setFocusedKey(items[nextIndex].key);
+    }
+  };
+  var handleArrowRight = function handleArrowRight() {
+    var focusedIndex = getFocusedIndex();
+    if (focusedIndex >= items.length - 1 && focusedIndex !== -1) return;
+    var nextIndex = findNextEnabledIndex(focusedIndex === -1 ? -1 : focusedIndex, 1);
+    if (nextIndex !== -1) {
+      setFocusedKey(items[nextIndex].key);
+    }
+  };
+  var handleEnter = function handleEnter() {
+    if (focusedKey === '' || focusedKey === undefined) return;
+    var item = items.find(function (i) {
+      return i.key === focusedKey;
+    });
+    if (item && !item.disabled) {
+      onClick === null || onClick === void 0 || onClick(item);
+    }
+  };
+  var onKeyDown = function onKeyDown(event) {
+    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: focusedKey,
+    onKeyDown: onKeyDown
+  };
+}

package/dist/esm/List/interface.d.ts

@@ -47,8 +47,8 @@ export interface ListProps extends Omit<React.HTMLAttributes<HTMLUListElement>,
      */
     bordered?: boolean;
     /**
-     * Set the focused item
-     * */
+     * Set the focused item (controlled)
+     */
     focusedKey?: string | number;
     /**
      * Render list item as a function
@@ -58,6 +58,33 @@ export interface ListProps extends Omit<React.HTMLAttributes<HTMLUListElement>,
      * 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 = {
     prefixCls: string;

package/dist/esm/List/list.js

@@ -1,5 +1,7 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["prefixCls", "className", "items", "bordered", "focusedKey", "itemRender", "onClick"];
+var _excluded = ["prefixCls", "className", "style", "items", "bordered", "focusedKey", "itemRender", "onClick", "onFocusChange", "virtual", "height", "itemHeight", "columns"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
@@ -9,7 +11,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 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 ListItem from "./list-item";
 import "./style/index.less";
 export var ListCtx = /*#__PURE__*/createContext({});
@@ -20,36 +24,189 @@ var List = /*#__PURE__*/forwardRef(function (baseprops, ref) {
   var _props$prefixCls = props.prefixCls,
     prefixCls = _props$prefixCls === void 0 ? 'yee-list' : _props$prefixCls,
     className = props.className,
+    style = props.style,
     items = props.items,
     bordered = props.bordered,
-    focusedKey = props.focusedKey,
+    controlledFocusedKey = props.focusedKey,
     itemRender = props.itemRender,
     onClick = props.onClick,
+    onFocusChange = props.onFocusChange,
+    _props$virtual = props.virtual,
+    virtual = _props$virtual === void 0 ? false : _props$virtual,
+    height = props.height,
+    _props$itemHeight = props.itemHeight,
+    itemHeight = _props$itemHeight === void 0 ? 32 : _props$itemHeight,
+    _props$columns = props.columns,
+    columns = _props$columns === void 0 ? 1 : _props$columns,
     rest = _objectWithoutProperties(props, _excluded);
-  var cls = clsx(prefixCls, _defineProperty({}, "".concat(prefixCls, "-bordered"), bordered), className);
-  var itemRenders = function itemRenders() {
-    return Array.isArray(items) ? items.map(function (item, index) {
-      if (typeof itemRender === 'function') {
-        return itemRender(item);
+  var multiColumn = columns > 1;
+  var useVirtual = virtual && height !== null && height !== undefined && Array.isArray(items);
+  var safeItems = Array.isArray(items) ? items : [];
+
+  // Keyboard navigation
+  var _useListKeyboard = useListKeyboard({
+      items: safeItems,
+      columns: columns,
+      focusedKey: controlledFocusedKey,
+      onFocusChange: onFocusChange,
+      onClick: onClick
+    }),
+    focusedKey = _useListKeyboard.focusedKey,
+    onKeyDown = _useListKeyboard.onKeyDown;
+
+  // Virtual scroll — in multi-column mode, track rows not individual items
+  var rowCount = multiColumn ? Math.ceil(safeItems.length / columns) : safeItems.length;
+  var _useVirtualList = useVirtualList({
+      itemCount: useVirtual ? rowCount : 0,
+      itemHeight: itemHeight,
+      overscan: 4
+    }),
+    start = _useVirtualList.start,
+    end = _useVirtualList.end,
+    offsetY = _useVirtualList.offsetY,
+    totalHeight = _useVirtualList.totalHeight,
+    viewportRef = _useVirtualList.viewportRef,
+    onScroll = _useVirtualList.onScroll;
+  var cls = clsx(prefixCls, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-bordered"), bordered), "".concat(prefixCls, "-grid"), multiColumn && !useVirtual), className);
+  var renderItem = function renderItem(item, index) {
+    if (typeof itemRender === 'function') {
+      return itemRender(item);
+    }
+    return /*#__PURE__*/React.createElement(ListItem, _extends({}, item, {
+      $key: item.key,
+      key: item.key || index
+    }));
+  };
+
+  // ----- Virtual + multi-column: render rows of N items -----
+  if (useVirtual && multiColumn) {
+    var visibleRows = [];
+    for (var rowIdx = start; rowIdx < end; rowIdx++) {
+      var rowItems = [];
+      for (var col = 0; col < columns; col++) {
+        var flatIdx = rowIdx * columns + col;
+        if (flatIdx < safeItems.length) {
+          rowItems.push({
+            item: safeItems[flatIdx],
+            flatIdx: flatIdx
+          });
+        }
+      }
+      visibleRows.push({
+        rowIdx: rowIdx,
+        rowItems: rowItems
+      });
+    }
+    return /*#__PURE__*/React.createElement("ul", _extends({
+      ref: ref,
+      className: cls,
+      tabIndex: 0,
+      "aria-label": "list",
+      onKeyDown: onKeyDown
+    }, rest), /*#__PURE__*/React.createElement(ListCtx.Provider, {
+      value: {
+        prefixCls: prefixCls,
+        focusedKey: focusedKey,
+        onClick: onClick
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: viewportRef,
+      onScroll: onScroll,
+      style: {
+        height: height,
+        overflowY: 'auto'
       }
-      return /*#__PURE__*/React.createElement(ListItem, _extends({}, item, {
-        $key: item.key,
-        key: item.key || index
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: totalHeight,
+        position: 'relative'
+      }
+    }, visibleRows.map(function (_ref, ri) {
+      var rowIdx = _ref.rowIdx,
+        rowItems = _ref.rowItems;
+      return /*#__PURE__*/React.createElement("div", {
+        key: rowIdx,
+        className: "".concat(prefixCls, "-grid-row"),
+        style: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: itemHeight,
+          transform: "translateY(".concat(offsetY + ri * itemHeight, "px)"),
+          display: 'grid',
+          gridTemplateColumns: "repeat(".concat(columns, ", 1fr)")
+        }
+      }, rowItems.map(function (_ref2) {
+        var item = _ref2.item,
+          flatIdx = _ref2.flatIdx;
+        return renderItem(item, flatIdx);
       }));
-    }) : null;
-  };
+    })))));
+  }
+
+  // ----- Virtual single-column -----
+  if (useVirtual) {
+    var slicedItems = safeItems.slice(start, end);
+    return /*#__PURE__*/React.createElement("ul", _extends({
+      ref: ref,
+      className: cls,
+      tabIndex: 0,
+      "aria-label": "list",
+      onKeyDown: onKeyDown
+    }, rest), /*#__PURE__*/React.createElement(ListCtx.Provider, {
+      value: {
+        prefixCls: prefixCls,
+        focusedKey: focusedKey,
+        onClick: onClick
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: viewportRef,
+      onScroll: onScroll,
+      style: {
+        height: height,
+        overflowY: 'auto'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: totalHeight,
+        position: 'relative'
+      }
+    }, slicedItems.map(function (item, i) {
+      var element = renderItem(item, start + i);
+      return /*#__PURE__*/React.createElement("div", {
+        key: item.key || start + i,
+        style: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: itemHeight,
+          transform: "translateY(".concat(offsetY + i * itemHeight, "px)")
+        }
+      }, element);
+    })))));
+  }
+
+  // ----- Default mode (non-virtual) -----
   return /*#__PURE__*/React.createElement("ul", _extends({
     ref: ref,
     className: cls,
     tabIndex: 0,
-    "aria-label": "list"
+    "aria-label": "list",
+    onKeyDown: onKeyDown,
+    style: multiColumn ? _objectSpread({
+      '--yee-list-columns': columns
+    }, style) : style
   }, rest), /*#__PURE__*/React.createElement(ListCtx.Provider, {
     value: {
       prefixCls: prefixCls,
       focusedKey: focusedKey,
       onClick: onClick
     }
-  }, itemRenders()));
+  }, safeItems.map(function (item, index) {
+    return renderItem(item, index);
+  })));
 });
 List.displayName = 'List';
 export default List;

package/dist/esm/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 {

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

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

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

@@ -0,0 +1,36 @@
+import { Select } from "../..";
+import React from 'react';
+var options = Array.from({
+  length: 24
+}, function (_, i) {
+  return {
+    label: "Option ".concat(i + 1),
+    value: "opt-".concat(i + 1)
+  };
+});
+export default (function () {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 24
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "3 columns:"), /*#__PURE__*/React.createElement(Select, {
+    columns: 3,
+    popupWidth: 360,
+    options: options,
+    placeholder: "Select an option",
+    style: {
+      width: 200
+    }
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "4 columns with multiple selection:"), /*#__PURE__*/React.createElement(Select, {
+    columns: 4,
+    popupWidth: 480,
+    mode: "multiple",
+    options: options,
+    placeholder: "Select options",
+    style: {
+      width: 300
+    }
+  })));
+});