@rainbow-oh/yee-c 0.6.4 → 0.8.0

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

@@ -256,7 +256,7 @@ var Drawer = (baseprops) => {
             className: (0, import_clsx.default)(`${prefixCls}-header`, classNames == null ? void 0 : classNames.header),
             style: styles == null ? void 0 : styles.header
           },
-          /* @__PURE__ */ import_react2.default.createElement("div", { className: `${prefixCls}-title` }, title)
+          /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_clsx.default)(`${prefixCls}-title`, classNames == null ? void 0 : classNames.title), style: styles == null ? void 0 : styles.title }, title)
         ) : null,
         /* @__PURE__ */ import_react2.default.createElement(
           "div",

package/dist/cjs/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/cjs/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/cjs/Form/form-store.d.ts

@@ -28,7 +28,8 @@ export declare class FormStore {
     clearFields: (name?: Name[]) => void;
     validateField: (name: Name, trigger?: TRIGGER) => Promise<ValidateMessage[]>;
     validateFields: (names?: string[], trigger?: TRIGGER) => Promise<ValidateMessage[]>;
-    refreshField: (newStore?: Store) => void;
+    private getRelatedFieldNames;
+    refreshField: (newStore?: Store, relatedFieldNames?: Name[]) => void;
     subscribe: (namePath?: NamePath, callback?: () => void) => (() => void);
     private notifyWatchers;
     registerGroupEntity: (id: string, entity: GroupEntity) => (() => void);

package/dist/cjs/Form/form-store.js

@@ -80,6 +80,7 @@ function move(array, from, to) {
   return result;
 }
 var GLOBAL_WATCH_KEY = "__ALL__";
+var isRelatedNamePath = (first, second) => first === second || first.startsWith(`${second}.`) || second.startsWith(`${first}.`);
 var FormStore = class {
   constructor() {
     this.store = {};
@@ -170,10 +171,12 @@ var FormStore = class {
           }
         });
       }
+      const changedKeys = Object.keys(newStore);
+      const relatedFieldNames = this.getRelatedFieldNames(changedKeys);
       if (trigger === "onChange" || trigger === "onBlur" || trigger === "onSubmit") {
-        void this.validateFields(Object.keys(newStore), trigger);
+        void this.validateFields(relatedFieldNames, trigger);
       }
-      this.refreshField(newStore);
+      this.refreshField(newStore, relatedFieldNames);
     };
     this.resetFields = (name) => {
       var _a, _b;
@@ -281,16 +284,20 @@ var FormStore = class {
       });
       return err;
     });
-    this.refreshField = (newStore) => {
+    this.getRelatedFieldNames = (changedKeys) => Array.from(this.fieldMap.keys()).filter(
+      (fieldName) => changedKeys.some(
+        (changedKey) => isRelatedNamePath(String(fieldName), changedKey)
+      )
+    );
+    this.refreshField = (newStore, relatedFieldNames) => {
       if (newStore) {
-        const keys = Object.keys(newStore);
-        keys.forEach((key) => {
-          const entity = this.fieldMap.get(key);
-          if (entity) {
-            entity == null ? void 0 : entity.onStoreChange();
-          }
-          this.notifyWatchers(key);
+        const changedKeys = Object.keys(newStore);
+        const fieldNames = relatedFieldNames != null ? relatedFieldNames : this.getRelatedFieldNames(changedKeys);
+        fieldNames.forEach((fieldName) => {
+          var _a;
+          (_a = this.fieldMap.get(fieldName)) == null ? void 0 : _a.onStoreChange();
         });
+        this.notifyWatchers(changedKeys);
       } else {
         this.fieldEntities.forEach((entity) => {
           entity == null ? void 0 : entity.onStoreChange();
@@ -308,15 +315,23 @@ var FormStore = class {
       }
       this.watchers.get(key).add(callback);
       return () => {
-        var _a;
-        (_a = this.watchers.get(key)) == null ? void 0 : _a.delete(callback);
+        const watchers = this.watchers.get(key);
+        watchers == null ? void 0 : watchers.delete(callback);
+        if ((watchers == null ? void 0 : watchers.size) === 0) {
+          this.watchers.delete(key);
+        }
       };
     };
-    this.notifyWatchers = (changedKey) => {
-      var _a, _b;
-      if (changedKey) {
-        (_a = this.watchers.get(changedKey)) == null ? void 0 : _a.forEach((cb) => cb());
-        (_b = this.watchers.get(GLOBAL_WATCH_KEY)) == null ? void 0 : _b.forEach((cb) => cb());
+    this.notifyWatchers = (changedKeys) => {
+      if (changedKeys) {
+        const keys = Array.isArray(changedKeys) ? changedKeys : [changedKeys];
+        const callbacks = /* @__PURE__ */ new Set();
+        this.watchers.forEach((watchers, watchedKey) => {
+          if (watchedKey === GLOBAL_WATCH_KEY || keys.some((changedKey) => isRelatedNamePath(watchedKey, changedKey))) {
+            watchers.forEach((callback) => callbacks.add(callback));
+          }
+        });
+        callbacks.forEach((callback) => callback());
       } else {
         this.watchers.forEach((set) => set.forEach((cb) => cb()));
       }

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

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

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

@@ -0,0 +1,53 @@
+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/List/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 items = Array.from({ length: 1e4 }, (_, i) => ({
+  key: String(i),
+  label: `List item ${i + 1}`,
+  value: String(i)
+}));
+var virtual_default = () => {
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.List,
+    {
+      virtual: true,
+      height: 300,
+      itemHeight: 32,
+      items,
+      onClick: (item) => console.log("Clicked:", item.label)
+    }
+  );
+};

package/dist/cjs/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/cjs/List/hooks/useListKeyboard.js

@@ -0,0 +1,188 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/List/hooks/useListKeyboard.ts
+var useListKeyboard_exports = {};
+__export(useListKeyboard_exports, {
+  default: () => useListKeyboard
+});
+module.exports = __toCommonJS(useListKeyboard_exports);
+var import_react = require("react");
+function useListKeyboard({
+  items,
+  columns = 1,
+  focusedKey: controlledFocusedKey,
+  onFocusChange,
+  onClick
+}) {
+  const [internalFocusedKey, setInternalFocusedKey] = (0, import_react.useState)("");
+  const isControlled = controlledFocusedKey !== void 0;
+  const focusedKey = isControlled ? controlledFocusedKey : internalFocusedKey;
+  const setFocusedKey = (0, import_react.useCallback)(
+    (key) => {
+      if (!isControlled) {
+        setInternalFocusedKey(key);
+      }
+      onFocusChange == null ? void 0 : onFocusChange(key);
+    },
+    [isControlled, onFocusChange]
+  );
+  (0, import_react.useEffect)(() => {
+    if (!isControlled && internalFocusedKey !== "" && !items.some((item) => item.key === internalFocusedKey)) {
+      setInternalFocusedKey("");
+    }
+  }, [items, isControlled, internalFocusedKey]);
+  const getFocusedIndex = () => {
+    if (focusedKey === "" || focusedKey === void 0)
+      return -1;
+    return items.findIndex((item) => item.key === focusedKey);
+  };
+  const findNextEnabledIndex = (startIndex, direction) => {
+    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;
+    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 = () => {
+    var _a;
+    const focusedIndex = getFocusedIndex();
+    let nextIndex;
+    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 {
+          const lastRowStart = Math.floor((items.length - 1) / columns) * columns;
+          const col = focusedIndex % columns;
+          const wrapTarget = Math.min(lastRowStart + col, items.length - 1);
+          nextIndex = ((_a = items[wrapTarget]) == null ? void 0 : _a.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 = () => {
+    var _a;
+    const focusedIndex = getFocusedIndex();
+    let nextIndex;
+    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 {
+          const col = focusedIndex % columns;
+          const wrapTarget = col;
+          nextIndex = ((_a = items[wrapTarget]) == null ? void 0 : _a.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 === void 0)
+      return;
+    const item = items.find((i) => i.key === focusedKey);
+    if (item && !item.disabled) {
+      onClick == null ? void 0 : onClick(item);
+    }
+  };
+  const 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,
+    onKeyDown
+  };
+}

package/dist/cjs/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/cjs/List/list.js

@@ -65,7 +65,9 @@ module.exports = __toCommonJS(list_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_Config_Provider = require("../Config-Provider");
+var import_useVirtualList = __toESM(require("../hooks/useVirtualList"));
 var import_mergeContextToProps = __toESM(require("../utils/mergeContextToProps"));
+var import_useListKeyboard = __toESM(require("./hooks/useListKeyboard"));
 var import_list_item = __toESM(require("./list-item"));
 var import_style = require("./style/index.less");
 var ListCtx = (0, import_react.createContext)({});
@@ -75,46 +77,164 @@ var List = (0, import_react.forwardRef)((baseprops, ref) => {
   const _a = props, {
     prefixCls = "yee-list",
     className,
+    style,
     items,
     bordered,
-    focusedKey,
+    focusedKey: controlledFocusedKey,
     itemRender,
-    onClick
+    onClick,
+    onFocusChange,
+    virtual = false,
+    height,
+    itemHeight = 32,
+    columns = 1
   } = _a, rest = __objRest(_a, [
     "prefixCls",
     "className",
+    "style",
     "items",
     "bordered",
     "focusedKey",
     "itemRender",
-    "onClick"
+    "onClick",
+    "onFocusChange",
+    "virtual",
+    "height",
+    "itemHeight",
+    "columns"
   ]);
+  const multiColumn = columns > 1;
+  const useVirtual = virtual && height !== null && height !== void 0 && Array.isArray(items);
+  const safeItems = Array.isArray(items) ? items : [];
+  const { focusedKey, onKeyDown } = (0, import_useListKeyboard.default)({
+    items: safeItems,
+    columns,
+    focusedKey: controlledFocusedKey,
+    onFocusChange,
+    onClick
+  });
+  const rowCount = multiColumn ? Math.ceil(safeItems.length / columns) : safeItems.length;
+  const { start, end, offsetY, totalHeight, viewportRef, onScroll } = (0, import_useVirtualList.default)({
+    itemCount: useVirtual ? rowCount : 0,
+    itemHeight,
+    overscan: 4
+  });
   const cls = (0, import_clsx.default)(
     prefixCls,
     {
-      [`${prefixCls}-bordered`]: bordered
+      [`${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 /* @__PURE__ */ import_react.default.createElement(import_list_item.default, __spreadProps(__spreadValues({}, item), { $key: item.key, key: item.key || index }));
-    }) : null;
+  const renderItem = (item, index) => {
+    if (typeof itemRender === "function") {
+      return itemRender(item);
+    }
+    return /* @__PURE__ */ import_react.default.createElement(import_list_item.default, __spreadProps(__spreadValues({}, item), { $key: item.key, key: item.key || index }));
   };
-  return /* @__PURE__ */ import_react.default.createElement("ul", __spreadValues({ ref, className: cls, tabIndex: 0, "aria-label": "list" }, rest), /* @__PURE__ */ import_react.default.createElement(
-    ListCtx.Provider,
-    {
-      value: {
-        prefixCls,
-        focusedKey,
-        onClick
+  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 });
+        }
       }
-    },
-    itemRenders()
-  ));
+      visibleRows.push({ rowIdx, rowItems });
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      "ul",
+      __spreadValues({
+        ref,
+        className: cls,
+        tabIndex: 0,
+        "aria-label": "list",
+        onKeyDown
+      }, rest),
+      /* @__PURE__ */ import_react.default.createElement(ListCtx.Provider, { value: { prefixCls, focusedKey, onClick } }, /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          ref: viewportRef,
+          onScroll,
+          style: { height, overflowY: "auto" }
+        },
+        /* @__PURE__ */ import_react.default.createElement("div", { style: { height: totalHeight, position: "relative" } }, visibleRows.map(({ rowIdx, rowItems }, ri) => /* @__PURE__ */ import_react.default.createElement(
+          "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)
+          )
+        )))
+      ))
+    );
+  }
+  if (useVirtual) {
+    const slicedItems = safeItems.slice(start, end);
+    return /* @__PURE__ */ import_react.default.createElement(
+      "ul",
+      __spreadValues({
+        ref,
+        className: cls,
+        tabIndex: 0,
+        "aria-label": "list",
+        onKeyDown
+      }, rest),
+      /* @__PURE__ */ import_react.default.createElement(ListCtx.Provider, { value: { prefixCls, focusedKey, onClick } }, /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          ref: viewportRef,
+          onScroll,
+          style: { height, overflowY: "auto" }
+        },
+        /* @__PURE__ */ import_react.default.createElement("div", { style: { height: totalHeight, position: "relative" } }, slicedItems.map((item, i) => {
+          const element = renderItem(item, start + i);
+          return /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              key: item.key || start + i,
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: itemHeight,
+                transform: `translateY(${offsetY + i * itemHeight}px)`
+              }
+            },
+            element
+          );
+        }))
+      ))
+    );
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    "ul",
+    __spreadValues({
+      ref,
+      className: cls,
+      tabIndex: 0,
+      "aria-label": "list",
+      onKeyDown,
+      style: multiColumn ? __spreadValues({ "--yee-list-columns": columns }, style) : style
+    }, rest),
+    /* @__PURE__ */ import_react.default.createElement(ListCtx.Provider, { value: { prefixCls, focusedKey, onClick } }, safeItems.map((item, index) => renderItem(item, index)))
+  );
 });
 List.displayName = "List";
 var list_default = List;