@rainbow-oh/yee-c 0.4.5 → 0.5.0

package/dist/cjs/Form/utils/validate.js

@@ -15,11 +15,32 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // src/Form/utils/validate.ts
 var validate_exports = {};
 __export(validate_exports, {
-  default: () => validate_default
+  default: () => validate_default,
+  runValidator: () => runValidator
 });
 module.exports = __toCommonJS(validate_exports);
 function isEmpty(v) {
@@ -80,8 +101,8 @@ function verifyRuleOfRegexp(regexp, value) {
     return true;
   }
 }
-function verifyMain(rule, value) {
-  const { min, max, minLength, maxLength, regexp, validator } = rule;
+function verifySyncRules(rule, value) {
+  const { min, max, minLength, maxLength, regexp } = rule;
   if (typeof min !== "undefined" && !verifyRuleOfMin(min, value)) {
     return false;
   }
@@ -97,15 +118,43 @@ function verifyMain(rule, value) {
   if (regexp instanceof RegExp && !verifyRuleOfRegexp(regexp, value)) {
     return false;
   }
-  if (typeof validator === "function" && !validator(value)) {
-    return false;
-  }
   return true;
 }
+function runValidator(validator, value) {
+  return __async(this, null, function* () {
+    try {
+      const res = validator(value);
+      if (res instanceof Promise) {
+        const resolved = yield res;
+        if (resolved === false) {
+          return { passed: false };
+        }
+        return { passed: true };
+      }
+      if (res === false) {
+        return { passed: false };
+      }
+      return { passed: true };
+    } catch (e) {
+      return {
+        passed: false,
+        message: e instanceof Error ? e.message : String(e)
+      };
+    }
+  });
+}
 function validate(rule, value) {
-  if (rule.required && isEmpty(value)) {
-    return false;
-  }
-  return verifyMain(rule, value);
+  return __async(this, null, function* () {
+    if (rule.required && isEmpty(value)) {
+      return { passed: false };
+    }
+    if (!verifySyncRules(rule, value)) {
+      return { passed: false };
+    }
+    if (typeof rule.validator === "function") {
+      return runValidator(rule.validator, value);
+    }
+    return { passed: true };
+  });
 }
 var validate_default = validate;

package/dist/cjs/Select/demo/basic.js

@@ -47,7 +47,7 @@ var options = [
   { label: "Peach", value: "peach" }
 ];
 var basic_default = () => {
-  const [value, setValue] = (0, import_react.useState)("apple");
+  const [value, setValue] = (0, import_react.useState)("mango");
   return /* @__PURE__ */ import_react.default.createElement(
     import_yee_c.Select,
     {

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

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

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

@@ -0,0 +1,55 @@
+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/Select/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 options = Array.from({ length: 5e3 }, (_, i) => ({
+  label: `Option ${i + 1}`,
+  value: i
+}));
+var virtual_default = () => {
+  const [value, setValue] = (0, import_react.useState)(100);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Select,
+    {
+      virtual: true,
+      searchable: true,
+      value,
+      onChange: (val) => setValue(val),
+      options,
+      style: { width: 200 },
+      placeholder: "Please select"
+    }
+  );
+};

package/dist/cjs/Select/hooks/useSelectKeyboard.d.ts

@@ -11,8 +11,14 @@ interface UseSelectKeyboardParams {
     onClose?: () => void;
     onOpenChange?: (open: boolean) => void;
     containerRef?: React.RefObject<HTMLElement>;
+    /**
+     * Virtual-mode scroll hook. When provided, keyboard navigation drives the
+     * virtual viewport through this callback instead of calling scrollIntoView
+     * (the focused option may not be in the DOM while virtualized).
+     */
+    scrollToIndex?: (index: number) => void;
 }
-export default function useSelectKeyboard({ options, open, selectedKeys, onSelect, onClose, onOpenChange, containerRef, }: UseSelectKeyboardParams): {
+export default function useSelectKeyboard({ options, open, selectedKeys, onSelect, onClose, onOpenChange, containerRef, scrollToIndex, }: UseSelectKeyboardParams): {
     focusedKey: string | number;
     onKeyDown: (event: React.KeyboardEvent) => void;
 };

package/dist/cjs/Select/hooks/useSelectKeyboard.js

@@ -41,7 +41,8 @@ function useSelectKeyboard({
   onSelect,
   onClose,
   onOpenChange,
-  containerRef
+  containerRef,
+  scrollToIndex
 }) {
   const [focusedKey, setFocusedKey] = (0, import_react.useState)("");
   const latestFocusedKey = (0, import_useLatest.default)(focusedKey);
@@ -69,6 +70,10 @@ function useSelectKeyboard({
     }
   };
   const scrollOptionIntoView = (index) => {
+    if (scrollToIndex) {
+      scrollToIndex(index);
+      return;
+    }
     const container = containerRef == null ? void 0 : containerRef.current;
     if (!container)
       return;
@@ -150,18 +155,23 @@ function useSelectKeyboard({
   };
   (0, import_react.useEffect)(() => {
     if (open) {
+      let focusedValue = "";
       if ((selectedKeys == null ? void 0 : selectedKeys.length) > 0) {
         const firstSelected = options == null ? void 0 : options.find(
           (opt) => opt.value === selectedKeys[0]
         );
         if (firstSelected && !firstSelected.disabled) {
-          setFocusedKey(firstSelected.value);
-          return;
+          focusedValue = firstSelected.value;
+        }
+      }
+      if (!focusedValue) {
+        const firstEnabled = options == null ? void 0 : options.find((opt) => !opt.disabled);
+        if (firstEnabled) {
+          focusedValue = firstEnabled.value;
         }
       }
-      const firstEnabled = options == null ? void 0 : options.find((opt) => !opt.disabled);
-      if (firstEnabled) {
-        setFocusedKey(firstEnabled.value);
+      if (focusedValue) {
+        setFocusedKey(focusedValue);
       }
     } else {
       setFocusedKey("");

package/dist/cjs/Select/interface.d.ts

@@ -94,6 +94,26 @@ export interface SelectProps extends DataAttributeProps {
      * Callback when searching
      */
     onFilter?: (value: string, options: Array<Option>) => Array<Option>;
+    /**
+     * Enable virtual scrolling for the dropdown.
+     *
+     * When enabled, only the options inside the visible window are rendered
+     * (the DOM node count stays constant regardless of how many options there
+     * are). Recommended for large option sets (hundreds or thousands).
+     * @default false
+     */
+    virtual?: boolean;
+    /**
+     * Height of each option in pixels. Required to be a fixed value when
+     * `virtual` is enabled (the list assumes every option has exactly this height).
+     * @default 32
+     */
+    itemHeight?: number;
+    /**
+     * Max height of the dropdown popup in pixels.
+     * @default 200
+     */
+    listHeight?: number;
 }
 /**
  * Props for the internal Option component (renders a single dropdown option).
@@ -119,6 +139,11 @@ export interface OptionProps {
      * Test id forwarded to the option element
      */
     dataTestId?: string;
+    /**
+     * Inline style forwarded to the option element.
+     * Used by virtual scrolling to position each option absolutely.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * Context value shared between Options and each Option.
@@ -167,6 +192,25 @@ export interface OptionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * Whether multiple selection mode is active
      */
     multiple: boolean;
+    /**
+     * Whether virtual scrolling is enabled
+     */
+    virtual?: boolean;
+    /**
+     * Fixed option height in pixels (only meaningful when `virtual` is enabled)
+     */
+    itemHeight?: number;
+    /**
+     * Max popup height in pixels (only meaningful when `virtual` is enabled)
+     */
+    listHeight?: number;
+    /**
+     * Ref that receives the virtual list API (currently `scrollToIndex`),
+     * so the parent can wire keyboard navigation to the virtual viewport.
+     */
+    virtualApiRef?: React.MutableRefObject<{
+        scrollToIndex: (index: number) => void;
+    } | null>;
     /**
      * Callback when an option is selected
      */

package/dist/cjs/Select/option.js

@@ -37,7 +37,7 @@ var import_lucide_react = require("lucide-react");
 var import_react = __toESM(require("react"));
 var import_options = require("./options");
 var Option = (props) => {
-  const { label, value, disabled, title, dataTestId } = props;
+  const { label, value, disabled, title, dataTestId, style } = props;
   const { prefixCls, selectedKeys, focusedKey, multiple, onSelect } = (0, import_react.useContext)(import_options.OptionsCtx);
   const handleClick = (e) => {
     if (!disabled) {
@@ -64,7 +64,8 @@ var Option = (props) => {
       role: "option",
       tabIndex: disabled ? void 0 : 0,
       title: htmlTitle,
-      "data-testid": dataTestId
+      "data-testid": dataTestId,
+      style
     },
     /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-option-content` }, label),
     multiple && selected && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-option-state` }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Check, { size: 16 }))

package/dist/cjs/Select/options.js

@@ -64,6 +64,7 @@ __export(options_exports, {
 module.exports = __toCommonJS(options_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
+var import_useVirtualList = __toESM(require("../hooks/useVirtualList"));
 var import_locale = require("../locale");
 var import_option = __toESM(require("./option"));
 var OptionsCtx = (0, import_react.createContext)(
@@ -82,6 +83,10 @@ var Options = (0, import_react.forwardRef)(
       focusedKey,
       dataTestId,
       multiple,
+      virtual,
+      itemHeight = 32,
+      listHeight = 200,
+      virtualApiRef,
       onSelect
     } = _a, rest = __objRest(_a, [
       "prefixCls",
@@ -92,30 +97,125 @@ var Options = (0, import_react.forwardRef)(
       "focusedKey",
       "dataTestId",
       "multiple",
+      "virtual",
+      "itemHeight",
+      "listHeight",
+      "virtualApiRef",
       "onSelect"
     ]);
-    const componentRef = ref || (0, import_react.useRef)(null);
+    const rootRef = (0, import_react.useRef)(null);
+    (0, import_react.useImperativeHandle)(ref, () => rootRef.current, []);
+    const {
+      start,
+      end,
+      offsetY,
+      totalHeight,
+      viewportRef,
+      onScroll,
+      scrollToIndex
+    } = (0, import_useVirtualList.default)({
+      itemCount: options.length,
+      itemHeight
+    });
+    (0, import_react.useEffect)(() => {
+      if (!virtual || !virtualApiRef)
+        return;
+      virtualApiRef.current = { scrollToIndex };
+      return () => {
+        if (virtualApiRef.current) {
+          virtualApiRef.current = null;
+        }
+      };
+    }, [virtual, virtualApiRef, scrollToIndex]);
+    (0, import_react.useEffect)(() => {
+      if (virtual) {
+        scrollToIndex(0);
+      }
+    }, [options, virtual, scrollToIndex]);
+    (0, import_react.useEffect)(() => {
+      if (options.length === 0)
+        return;
+      if (focusedKey === "")
+        return;
+      const focusedIndex = options.findIndex((o) => o.value === focusedKey);
+      if (focusedIndex < 0)
+        return;
+      if (virtual) {
+        scrollToIndex(focusedIndex);
+        return;
+      }
+      const container = rootRef.current;
+      if (!container)
+        return;
+      const optionElements = container.querySelectorAll('[role="option"]');
+      const targetElement = optionElements[focusedIndex];
+      if (targetElement) {
+        targetElement.scrollIntoView({ block: "nearest" });
+      }
+    }, [focusedKey, virtual, options, scrollToIndex, rootRef]);
+    const isEmpty = options.length === 0;
+    const ctxValue = {
+      prefixCls,
+      selectedKeys,
+      focusedKey,
+      multiple,
+      onSelect
+    };
+    if (virtual && !isEmpty) {
+      const visibleOptions = options.slice(start, end);
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        __spreadProps(__spreadValues({}, rest), {
+          className: (0, import_clsx.default)(
+            `${prefixCls}-popup`,
+            `${prefixCls}-popup-virtual`,
+            popupClassName
+          ),
+          style: popupStyle,
+          ref: rootRef,
+          tabIndex: -1
+        }),
+        /* @__PURE__ */ import_react.default.createElement(OptionsCtx.Provider, { value: ctxValue }, /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: `${prefixCls}-popup-viewport`,
+            ref: viewportRef,
+            onScroll,
+            style: { maxHeight: listHeight, overflowY: "auto" }
+          },
+          /* @__PURE__ */ import_react.default.createElement("div", { style: { height: totalHeight, position: "relative" } }, visibleOptions.map((option, i) => /* @__PURE__ */ import_react.default.createElement(
+            import_option.default,
+            __spreadProps(__spreadValues({}, option), {
+              key: option.value,
+              dataTestId: `${dataTestId}-${start + i}`,
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                height: itemHeight,
+                transform: `translateY(${offsetY + i * itemHeight}px)`
+              }
+            })
+          )))
+        ))
+      );
+    }
     return /* @__PURE__ */ import_react.default.createElement(
       "div",
       __spreadProps(__spreadValues({}, rest), {
         className: (0, import_clsx.default)(`${prefixCls}-popup`, popupClassName),
         style: popupStyle,
-        ref: componentRef,
+        ref: rootRef,
         tabIndex: -1
       }),
-      options.length === 0 ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-empty` }, select.noData) : /* @__PURE__ */ import_react.default.createElement(
-        OptionsCtx.Provider,
-        {
-          value: { prefixCls, selectedKeys, focusedKey, multiple, onSelect }
-        },
-        options.map((option, index) => /* @__PURE__ */ import_react.default.createElement(
-          import_option.default,
-          __spreadProps(__spreadValues({}, option), {
-            key: option.value,
-            dataTestId: `${dataTestId}-${index}`
-          })
-        ))
-      )
+      isEmpty ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-empty` }, select.noData) : /* @__PURE__ */ import_react.default.createElement(OptionsCtx.Provider, { value: ctxValue }, options.map((option, index) => /* @__PURE__ */ import_react.default.createElement(
+        import_option.default,
+        __spreadProps(__spreadValues({}, option), {
+          key: option.value,
+          dataTestId: `${dataTestId}-${index}`
+        })
+      )))
     );
   }
 );

package/dist/cjs/Select/select.js

@@ -83,7 +83,10 @@ var Select = (baseprops) => {
     optionFilterProp = "label",
     disabled,
     onChange,
-    onFilter
+    onFilter,
+    virtual,
+    itemHeight,
+    listHeight
   } = _a, rest = __objRest(_a, [
     "prefixCls",
     "options",
@@ -94,7 +97,10 @@ var Select = (baseprops) => {
     "optionFilterProp",
     "disabled",
     "onChange",
-    "onFilter"
+    "onFilter",
+    "virtual",
+    "itemHeight",
+    "listHeight"
   ]);
   const single = mode !== "multiple" && mode !== "tags" ? true : false;
   const handleState = (value2) => {
@@ -114,6 +120,11 @@ var Select = (baseprops) => {
   const [searchValue, setSearchValue] = (0, import_react.useState)("");
   const [open, setOpen] = (0, import_react.useState)(false);
   const popupRef = (0, import_react.useRef)(null);
+  const virtualApiRef = (0, import_react.useRef)(null);
+  const handleVirtualScrollToIndex = (0, import_react.useCallback)((index) => {
+    var _a2;
+    (_a2 = virtualApiRef.current) == null ? void 0 : _a2.scrollToIndex(index);
+  }, []);
   const getOptions = (keys) => {
     if (keys === "" || keys === null) {
       return void 0;
@@ -184,7 +195,8 @@ var Select = (baseprops) => {
     onSelect: handleSelect,
     onClose: () => setOpen(false),
     onOpenChange: handleOpenChange,
-    containerRef: popupRef
+    containerRef: popupRef,
+    scrollToIndex: virtual ? handleVirtualScrollToIndex : void 0
   });
   const popup = /* @__PURE__ */ import_react.default.createElement(
     import_options.default,
@@ -196,7 +208,11 @@ var Select = (baseprops) => {
       selectedKeys: mergedValue,
       dataTestId: rest["data-testid"],
       onSelect: handleSelect,
-      ref: popupRef
+      ref: popupRef,
+      virtual,
+      itemHeight,
+      listHeight,
+      virtualApiRef
     }
   );
   return /* @__PURE__ */ import_react.default.createElement(

package/dist/cjs/Select/style/index.less

@@ -8,6 +8,17 @@
     overflow: auto;
   }
 
+  // Virtual mode: the popup no longer scrolls itself; the inner viewport does.
+  // Without this override there would be two scrollbars.
+  &-popup-virtual {
+    max-height: none;
+    overflow: visible;
+  }
+
+  &-popup-viewport {
+    overflow-y: auto;
+  }
+
   &-option {
     display: flex;
     padding: var(--yee-select-option-padding);
@@ -37,6 +48,12 @@
     }
   }
 
+  // In virtual mode each option has a fixed inline height; center its content
+  // vertically so it stays aligned regardless of the inherited line-height.
+  &-popup-virtual &-option {
+    align-items: center;
+  }
+
   &-empty {
     padding: var(--yee-select-option-padding);
   }

package/dist/cjs/Table/style/index.less

@@ -23,13 +23,32 @@
           var(--yee-table-tbody-td-borderbottom-color);
       }
     }
+
+    @{pls}-cell {
+      &::before {
+        display: none;
+      }
+    }
   }
 
   &-thead {
     color: var(--yee-table-thead-color);
 
     @{pls}-cell {
+      position: relative;
       background-color: var(--yee-table-thead-bg-color);
+
+      &:not(:last-child):not(@{pls}-expand-col) {
+        &::before {
+          position: absolute;
+          content: '';
+          width: 1.5px;
+          height: 30%;
+          top: 35%;
+          right: 0;
+          background-color: var(--yee-table-head-cell-split-line-color, #eee);
+        }
+      }
     }
 
     &-cell {

package/dist/cjs/hooks/index.d.ts

@@ -16,4 +16,5 @@ import useMount from './useMount';
 import usePrevious from './usePrevious';
 import useUpdateEffect from './useUpdateEffect';
 import useVirtualForm from './useVirtualForm';
-export { useBreakpoint, useDebounceFunction, useDebounceValue, useDeepCompareEffect, useDeepCompareMemo, useDeepCompareMemoize, useDelayState, useEsc, useEvent, useIntersectionObserver, useKeyControl, useLatest, useLayoutEffect, useMergedState, useMount, usePrevious, useUpdateEffect, useVirtualForm, };
+import useVirtualList from './useVirtualList';
+export { useBreakpoint, useDebounceFunction, useDebounceValue, useDeepCompareEffect, useDeepCompareMemo, useDeepCompareMemoize, useDelayState, useEsc, useEvent, useIntersectionObserver, useKeyControl, useLatest, useLayoutEffect, useMergedState, useMount, usePrevious, useUpdateEffect, useVirtualForm, useVirtualList, };

package/dist/cjs/hooks/index.js

@@ -46,7 +46,8 @@ __export(hooks_exports, {
   useMount: () => import_useMount.default,
   usePrevious: () => import_usePrevious.default,
   useUpdateEffect: () => import_useUpdateEffect.default,
-  useVirtualForm: () => import_useVirtualForm.default
+  useVirtualForm: () => import_useVirtualForm.default,
+  useVirtualList: () => import_useVirtualList.default
 });
 module.exports = __toCommonJS(hooks_exports);
 var import_useBreakpoint = __toESM(require("./useBreakpoint"));
@@ -67,3 +68,4 @@ var import_useMount = __toESM(require("./useMount"));
 var import_usePrevious = __toESM(require("./usePrevious"));
 var import_useUpdateEffect = __toESM(require("./useUpdateEffect"));
 var import_useVirtualForm = __toESM(require("./useVirtualForm"));
+var import_useVirtualList = __toESM(require("./useVirtualList"));