@rainbow-oh/yee-c 0.6.4 → 0.7.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/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;

package/dist/cjs/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/cjs/Select/demo/columns.d.ts

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