@rainbow-oh/yee-c 0.4.4 → 0.5.0

package/dist/esm/Select/select.js

@@ -1,4 +1,4 @@
-var _excluded = ["prefixCls", "options", "placement", "mode", "value", "defaultValue", "optionFilterProp", "disabled", "onChange", "onFilter"];
+var _excluded = ["prefixCls", "options", "placement", "mode", "value", "defaultValue", "optionFilterProp", "disabled", "onChange", "onFilter", "virtual", "itemHeight", "listHeight"];
 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -13,7 +13,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { useContext, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useMemo, useRef, useState } from 'react';
 import { GlobalContext } from "../Config-Provider";
 import Selector from "../Selector";
 import Trigger from "../Trigger";
@@ -40,6 +40,9 @@ var Select = function Select(baseprops) {
     disabled = props.disabled,
     onChange = props.onChange,
     onFilter = props.onFilter,
+    virtual = props.virtual,
+    itemHeight = props.itemHeight,
+    listHeight = props.listHeight,
     rest = _objectWithoutProperties(props, _excluded);
   var single = mode !== 'multiple' && mode !== 'tags' ? true : false;
   var handleState = function handleState(value) {
@@ -68,6 +71,13 @@ var Select = function Select(baseprops) {
     open = _useState4[0],
     setOpen = _useState4[1];
   var popupRef = useRef(null);
+  // Holds the virtual list API exposed by <Options>, so keyboard navigation
+  // can drive the virtual viewport (only populated when `virtual` is on).
+  var virtualApiRef = useRef(null);
+  var handleVirtualScrollToIndex = useCallback(function (index) {
+    var _virtualApiRef$curren;
+    (_virtualApiRef$curren = virtualApiRef.current) === null || _virtualApiRef$curren === void 0 || _virtualApiRef$curren.scrollToIndex(index);
+  }, []);
   var getOptions = function getOptions(keys) {
     if (keys === '' || keys === null) {
       return undefined;
@@ -150,7 +160,8 @@ var Select = function Select(baseprops) {
         return setOpen(false);
       },
       onOpenChange: handleOpenChange,
-      containerRef: popupRef
+      containerRef: popupRef,
+      scrollToIndex: virtual ? handleVirtualScrollToIndex : undefined
     }),
     focusedKey = _useSelectKeyboard.focusedKey,
     onKeyDown = _useSelectKeyboard.onKeyDown;
@@ -162,7 +173,11 @@ var Select = function Select(baseprops) {
     selectedKeys: mergedValue,
     dataTestId: rest['data-testid'],
     onSelect: handleSelect,
-    ref: popupRef
+    ref: popupRef,
+    virtual: virtual,
+    itemHeight: itemHeight,
+    listHeight: listHeight,
+    virtualApiRef: virtualApiRef
   });
   return /*#__PURE__*/React.createElement(Trigger, _extends({}, rest, {
     placement: placement,

package/dist/esm/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,20 +48,13 @@
     }
   }
 
-  &-empty {
-    padding: var(--yee-select-option-padding);
-  }
-}
-
-// form error status
-.yee-form-item-error {
-  @{pls} {
-    border-color: var(--yee-error-color);
+  // 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;
   }
-}
 
-.yee-form-item-warning {
-  @{pls} {
-    border-color: var(--yee-warning-color);
+  &-empty {
+    padding: var(--yee-select-option-padding);
   }
 }

package/dist/esm/Selector/style/index.less

@@ -5,8 +5,7 @@
   box-sizing: border-box;
   width: 100%;
   padding: var(--yee-selector-padding);
-  border: var(--yee-selector-border-width) solid
-    var(--yee-selector-border-color);
+  border: var(--yee-selector-border-width) solid var(--yee-input-border-color);
   border-radius: var(--yee-selector-border-radius);
 
   &-small {
@@ -145,7 +144,7 @@
 
   &:not(@{pls}-disabled) {
     &:hover {
-      border-color: var(--yee-selector-hover-border-color);
+      border-color: var(--yee-input-hover-border-color);
     }
   }
 
@@ -206,137 +205,3 @@
     }
   }
 }
-
-// .yee-tags-searchable {
-//   cursor: text;
-
-//   .yee-tags-input-wrapper {
-//     width: 100%;
-//     padding: 0;
-//     border: none;
-//     outline: none;
-
-//     &:focus {
-//       border: none;
-//       box-shadow: none;
-//     }
-//   }
-
-//   .yee-tags-icon {
-//     width: auto;
-//   }
-// }
-
-// .yee-tags-single-mode {
-//   height: var(--yee-tags-height);
-
-//   .yee-tags-input-container {
-//     position: absolute;
-//     z-index: -1;
-//     width: 100%;
-//     font-size: var(--yee-tags-input-font-size);
-//     line-height: var(--yee-tags-input-line-height);
-
-//     input {
-//       width: 100%;
-//     }
-//   }
-
-//   &.yee-tags-searchable {
-//     .yee-tags-single-option {
-//       width: 100%;
-//     }
-
-//     .yee-tags-container {
-//       &:focus-within,
-//       &:focus {
-//         .yee-tags-input-container {
-//           z-index: 1;
-//           opacity: var(--yee-tags-input-focus-opacity);
-
-//           &.has-value {
-//             opacity: 1;
-
-//             + .yee-tags-single-option {
-//               display: none;
-//             }
-//           }
-//         }
-
-//         .yee-tags-single-option {
-//           opacity: var(--yee-tags-single-option-focus-opacity);
-//         }
-//       }
-//     }
-//   }
-// }
-
-// .yee-tags-multi-mode {
-//   height: auto;
-//   min-height: var(--yee-tags-multi-min-height);
-
-//   &.yee-tags-searchable {
-//     .yee-tag {
-//       max-width: var(--yee-tags-multi-tag-max-width);
-//       height: var(--yee-tags-multi-tag-height);
-//     }
-//   }
-
-//   .yee-tags-container {
-//     flex-wrap: wrap;
-//   }
-
-//   .yee-tags-input-container {
-//     display: inline-grid;
-//     // color: var(--yee-tags-input-container-font-color);
-//     flex: 1 1 auto;
-//     grid-area: 1 / 1 / 2 / 3;
-//     grid-template-columns: 0 min-content;
-//     box-sizing: border-box;
-//     height: var(--yee-tags-multi-input-height);
-
-//     &::after {
-//       grid-area: 1 / 2 / auto / auto;
-//       min-width: var(--yee-tags-multi-input-after-min-width);
-//       margin: 0;
-//       padding: 0;
-//       font: inherit;
-//       white-space: pre;
-//       border: 0;
-//       outline: 0;
-//       visibility: hidden;
-//       content: attr(data-value) ' ';
-//     }
-
-//     & > input {
-//       grid-area: 1 / 2 / auto / auto;
-//       width: 100%;
-//       min-width: var(--yee-tags-multi-input-min-width);
-//       height: var(--yee-tags-multi-input-height);
-//       margin: 0;
-//       padding: 0;
-//       font: inherit;
-//       background-color: transparent;
-//       border: 0;
-//       outline: 0;
-//       opacity: 1;
-//     }
-//   }
-// }
-
-// form error status
-.yee-form-item-error {
-  @{pls} {
-    border-color: var(--yee-error-color);
-
-    &:hover {
-      border-color: var(--yee-error-color-hover);
-    }
-  }
-}
-
-.yee-form-item-warning {
-  @{pls} {
-    border-color: var(--yee-warning-color);
-  }
-}

package/dist/esm/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/esm/TextArea/style/index.less

@@ -98,20 +98,3 @@
     cursor: not-allowed;
   }
 }
-
-// form error status
-.yee-form-item-error {
-  @{pls} {
-    border-color: var(--yee-error-color);
-
-    &:hover {
-      border-color: var(--yee-error-color-hover);
-    }
-  }
-}
-
-.yee-form-item-warning {
-  @{pls} {
-    border-color: var(--yee-warning-color);
-  }
-}

package/dist/esm/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/esm/hooks/index.js

@@ -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/esm/hooks/useVirtualList.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+export interface UseVirtualListOptions {
+    /**
+     * Total number of items in the list.
+     */
+    itemCount: number;
+    /**
+     * Fixed height of every item in pixels.
+     */
+    itemHeight: number;
+    /**
+     * Extra items rendered above and below the visible window
+     * to avoid white flashes while scrolling.
+     * @default 4
+     */
+    overscan?: number;
+}
+export interface UseVirtualListResult {
+    /**
+     * Inclusive start index of the render window (already includes overscan).
+     */
+    start: number;
+    /**
+     * Exclusive end index of the render window (already includes overscan).
+     */
+    end: number;
+    /**
+     * Vertical offset to apply to the rendered block, equal to `start * itemHeight`.
+     * Use it as `transform: translateY(offsetY)` or `top: offsetY`.
+     */
+    offsetY: number;
+    /**
+     * Total scrollable height, equal to `itemCount * itemHeight`.
+     * Apply it to the inner spacer element so the scrollbar matches the full list.
+     */
+    totalHeight: number;
+    /**
+     * Ref to bind to the scroll container element.
+     */
+    viewportRef: React.RefObject<HTMLDivElement | null>;
+    /**
+     * Stable scroll handler (rAF-throttled). Bind to the viewport's `onScroll`.
+     */
+    onScroll: () => void;
+    /**
+     * Scroll the viewport so that the item at `index` is visible.
+     * Used by keyboard navigation to replace `scrollIntoView`.
+     */
+    scrollToIndex: (index: number) => void;
+}
+/**
+ * Fixed-height virtual scrolling hook.
+ *
+ * Renders only the items inside the visible window (plus an `overscan` buffer)
+ * and keeps the DOM node count constant regardless of `itemCount`.
+ *
+ * Usage:
+ *   const { start, end, offsetY, totalHeight, viewportRef, onScroll, scrollToIndex } =
+ *     useVirtualList({ itemCount, itemHeight });
+ *
+ *   <div ref={viewportRef} onScroll={onScroll} style={{ maxHeight: 200, overflowY: 'auto' }}>
+ *     <div style={{ height: totalHeight, position: 'relative' }}>
+ *       {items.slice(start, end).map((it, i) => (
+ *         <div key={it.key} style={{ position: 'absolute', height: itemHeight, transform: `translateY(${offsetY + i * itemHeight}px)` }}>
+ *           {it.content}
+ *         </div>
+ *       ))}
+ *     </div>
+ *   </div>
+ */
+export default function useVirtualList({ itemCount, itemHeight, overscan, }: UseVirtualListOptions): UseVirtualListResult;

package/dist/esm/hooks/useVirtualList.js

@@ -0,0 +1,129 @@
+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 { useEffect, useRef, useState } from 'react';
+import useEvent from "./useEvent";
+import useResizeObserver from "./useResizeObserver";
+/**
+ * Fixed-height virtual scrolling hook.
+ *
+ * Renders only the items inside the visible window (plus an `overscan` buffer)
+ * and keeps the DOM node count constant regardless of `itemCount`.
+ *
+ * Usage:
+ *   const { start, end, offsetY, totalHeight, viewportRef, onScroll, scrollToIndex } =
+ *     useVirtualList({ itemCount, itemHeight });
+ *
+ *   <div ref={viewportRef} onScroll={onScroll} style={{ maxHeight: 200, overflowY: 'auto' }}>
+ *     <div style={{ height: totalHeight, position: 'relative' }}>
+ *       {items.slice(start, end).map((it, i) => (
+ *         <div key={it.key} style={{ position: 'absolute', height: itemHeight, transform: `translateY(${offsetY + i * itemHeight}px)` }}>
+ *           {it.content}
+ *         </div>
+ *       ))}
+ *     </div>
+ *   </div>
+ */
+export default function useVirtualList(_ref) {
+  var itemCount = _ref.itemCount,
+    itemHeight = _ref.itemHeight,
+    _ref$overscan = _ref.overscan,
+    overscan = _ref$overscan === void 0 ? 4 : _ref$overscan;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    scrollTop = _useState2[0],
+    setScrollTop = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    visibleHeight = _useState4[0],
+    setVisibleHeight = _useState4[1];
+  var rafRef = useRef(null);
+
+  // useResizeObserver owns its ref; we reuse it as the viewport ref so the
+  // scroll container and the measured element are the same node.
+  var _useResizeObserver = useResizeObserver(function (entries) {
+      var entry = entries[0];
+      if (!entry) return;
+      var h = entry.contentRect.height;
+      setVisibleHeight(function (prev) {
+        return prev === h ? prev : h;
+      });
+    }),
+    viewportRef = _useResizeObserver.ref;
+  var totalHeight = itemCount * itemHeight;
+
+  // Read the live scrollTop / clientHeight from the viewport node.
+  var readViewport = useEvent(function () {
+    var viewport = viewportRef.current;
+    if (!viewport) return;
+    var top = viewport.scrollTop;
+    var h = viewport.clientHeight;
+    setScrollTop(function (prev) {
+      return prev === top ? prev : top;
+    });
+    setVisibleHeight(function (prev) {
+      return prev === h ? prev : h;
+    });
+  });
+  var onScroll = useEvent(function () {
+    if (rafRef.current !== null) return;
+    rafRef.current = requestAnimationFrame(function () {
+      rafRef.current = null;
+      readViewport();
+    });
+  });
+  useEffect(function () {
+    return function () {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, []);
+
+  // Measure once on mount (ResizeObserver fires shortly after, this covers the first frame).
+  useEffect(function () {
+    readViewport();
+  }, [readViewport]);
+
+  // Keep scrollTop within bounds when the data shrinks (e.g. after filtering),
+  // otherwise the viewport would sit at an offset with empty space below.
+  useEffect(function () {
+    var viewport = viewportRef.current;
+    if (!viewport) return;
+    var maxScroll = Math.max(0, totalHeight - viewport.clientHeight);
+    if (viewport.scrollTop > maxScroll) {
+      viewport.scrollTop = maxScroll;
+      setScrollTop(maxScroll);
+    }
+  }, [totalHeight, viewportRef]);
+  var scrollToIndex = useEvent(function (index) {
+    var viewport = viewportRef.current;
+    if (!viewport) return;
+    var maxScroll = Math.max(0, totalHeight - viewport.clientHeight);
+    var target = Math.min(Math.max(0, index * itemHeight), maxScroll);
+    if (viewport.scrollTop !== target) {
+      viewport.scrollTop = target;
+    }
+    readViewport();
+  });
+
+  // Fallback for the first paint before ResizeObserver reports a height,
+  // so we still render at least one screen + buffer.
+  var effectiveVisibleHeight = visibleHeight || itemHeight;
+  var visibleCount = Math.ceil(effectiveVisibleHeight / itemHeight);
+  var start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+  var end = Math.min(itemCount, start + visibleCount + overscan * 2);
+  var offsetY = start * itemHeight;
+  return {
+    start: start,
+    end: end,
+    offsetY: offsetY,
+    totalHeight: totalHeight,
+    viewportRef: viewportRef,
+    onScroll: onScroll,
+    scrollToIndex: scrollToIndex
+  };
+}

package/dist/esm/style/size.css

@@ -246,6 +246,7 @@
   --yee-drawer-body-padding: 20px 24px;
   --yee-drawer-close-top: 20px;
   --yee-drawer-close-right: 20px;
+  --yee-drawer-title-font-weight: 500;
 
   /* --Field-- */
   --yee-field-gap: 8px;

package/dist/esm/style/themes.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-07-03T02:41:11.107Z
+ * Generated on 2026-07-07T06:37:47.907Z
  */
 
 /* ========== color.blue.css ========== */

package/dist/esm/style/variables.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-07-03T02:41:11.107Z
+ * Generated on 2026-07-07T06:37:47.907Z
  */
 
 /* ========== color.css ========== */
@@ -1364,6 +1364,7 @@
   --yee-drawer-body-padding: 20px 24px;
   --yee-drawer-close-top: 20px;
   --yee-drawer-close-right: 20px;
+  --yee-drawer-title-font-weight: 500;
 
   /* --Field-- */
   --yee-field-gap: 8px;

package/dist/esm/version.d.ts

@@ -3,4 +3,4 @@ declare global {
         __yee_c_version__: string;
     }
 }
-export declare const version = "0.4.4";
+export declare const version = "0.5.0";

package/dist/esm/version.js

@@ -1,4 +1,4 @@
-export var version = "0.4.4";
+export var version = "0.5.0";
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;
 }