@rainbow-oh/yee-c 0.4.5 → 0.5.1

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

@@ -482,6 +482,10 @@
   --yee-selector-arrow-right: 8px;
   --yee-selector-clear-right: 8px;
   --yee-selector-clear-padding: 1px;
+  --yee-selector-small-padding: 0 6px;
+  --yee-selector-small-height: 24px;
+  --yee-selector-large-padding: 4px 12px;
+  --yee-selector-large-height: 40px;
   --yee-tags-height: 32px;
   --yee-tags-input-font-size: 14px;
   --yee-tags-input-line-height: 22px;

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-06T02:29:25.236Z
+ * Generated on 2026-07-08T03:16:37.096Z
  */
 
 /* ========== 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-06T02:29:25.236Z
+ * Generated on 2026-07-08T03:16:37.096Z
  */
 
 /* ========== color.css ========== */
@@ -1600,6 +1600,10 @@
   --yee-selector-arrow-right: 8px;
   --yee-selector-clear-right: 8px;
   --yee-selector-clear-padding: 1px;
+  --yee-selector-small-padding: 0 6px;
+  --yee-selector-small-height: 24px;
+  --yee-selector-large-padding: 4px 12px;
+  --yee-selector-large-height: 40px;
   --yee-tags-height: 32px;
   --yee-tags-input-font-size: 14px;
   --yee-tags-input-line-height: 22px;

package/dist/esm/version.d.ts

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

package/dist/esm/version.js

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