@vuer-ai/vuer-uikit 0.0.121 → 0.1.0

package/src/ui/virtual-list/VirtualList.tsx

@@ -0,0 +1,207 @@
+import { forwardRef, useCallback, useEffect, useRef, useState, type ComponentProps } from "react";
+
+import type { VirtualListProps } from "./types";
+import { useVirtualList } from "./useVirtualList";
+import { cn } from "../../hooks";
+
+interface VirtualListComponentProps<T>
+  extends Omit<ComponentProps<"div">, "children" | "onScroll">,
+    VirtualListProps<T> {}
+
+/**
+ * VirtualList component - renders only visible items for efficient list rendering.
+ * Supports both fixed and dynamic item heights.
+ *
+ * @param items - Array of items to render
+ * @param itemHeight - Fixed height in pixels, or 'dynamic' for variable height items
+ * @param estimatedItemHeight - Estimated height for dynamic mode (default: 40)
+ * @param height - Container height (default: '100%')
+ * @param overscan - Number of extra items to render outside visible area (default: 3)
+ * @param getItemKey - Function to get a unique key for each item
+ * @param children - Render function for each item
+ * @param onScroll - Callback when scroll position changes
+ * @param onRangeChange - Callback when visible range changes
+ */
+function VirtualListInner<T>(
+  {
+    items,
+    itemHeight,
+    estimatedItemHeight = 40,
+    height = "100%",
+    overscan = 3,
+    getItemKey,
+    children,
+    onScroll,
+    onRangeChange,
+    className,
+    style,
+    ...props
+  }: VirtualListComponentProps<T>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0);
+
+  // Combine refs
+  const setRefs = useCallback(
+    (node: HTMLDivElement | null) => {
+      (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref],
+  );
+
+  // Measure container height
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerHeight(entry.contentRect.height);
+      }
+    });
+
+    resizeObserver.observe(container);
+    setContainerHeight(container.clientHeight);
+
+    return () => resizeObserver.disconnect();
+  }, []);
+
+  const { visibleRange, totalHeight, getItemStyle, measureItem } = useVirtualList({
+    items,
+    itemHeight,
+    estimatedItemHeight,
+    containerHeight,
+    overscan,
+    scrollTop,
+  });
+
+  // Handle scroll
+  const handleScroll = useCallback(
+    (e: React.UIEvent<HTMLDivElement>) => {
+      const newScrollTop = e.currentTarget.scrollTop;
+      setScrollTop(newScrollTop);
+      onScroll?.(newScrollTop);
+    },
+    [onScroll],
+  );
+
+  // Notify range changes
+  const prevRangeRef = useRef({ start: -1, end: -1 });
+  useEffect(() => {
+    if (
+      visibleRange.start !== prevRangeRef.current.start ||
+      visibleRange.end !== prevRangeRef.current.end
+    ) {
+      prevRangeRef.current = visibleRange;
+      onRangeChange?.(visibleRange.start, visibleRange.end);
+    }
+  }, [visibleRange, onRangeChange]);
+
+  // Render visible items
+  const visibleItems = [];
+  const isDynamic = itemHeight === "dynamic";
+  // For dynamic mode, children should fill the wrapper
+  const dynamicChildStyle = { width: "100%" };
+
+  for (let i = visibleRange.start; i <= visibleRange.end && i < items.length; i++) {
+    const item = items[i];
+    const key = getItemKey ? getItemKey(item, i) : i;
+    const itemStyle = getItemStyle(i);
+
+    // For dynamic height, positioning is on wrapper, children just need width
+    // For fixed height, full style is passed to children render function
+    visibleItems.push(
+      <VirtualListItem
+        key={key}
+        index={i}
+        isDynamic={isDynamic}
+        measureItem={measureItem}
+        style={itemStyle}
+      >
+        {children(item, i, isDynamic ? dynamicChildStyle : itemStyle)}
+      </VirtualListItem>,
+    );
+  }
+
+  return (
+    <div
+      ref={setRefs}
+      className={cn("relative w-full overflow-auto", className)}
+      style={{
+        height,
+        ...style,
+      }}
+      onScroll={handleScroll}
+      {...props}
+    >
+      <div
+        style={{
+          height: totalHeight,
+          position: "relative",
+          width: "100%",
+        }}
+      >
+        {visibleItems}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Individual item wrapper that handles measurement for dynamic heights
+ */
+function VirtualListItem({
+  children,
+  index,
+  isDynamic,
+  measureItem,
+  style,
+}: {
+  children: React.ReactNode;
+  index: number;
+  isDynamic: boolean;
+  measureItem: (index: number, height: number) => void;
+  style: React.CSSProperties;
+}) {
+  const itemRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isDynamic || !itemRef.current) return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        measureItem(index, entry.contentRect.height);
+      }
+    });
+
+    resizeObserver.observe(itemRef.current);
+    measureItem(index, itemRef.current.offsetHeight);
+
+    return () => resizeObserver.disconnect();
+  }, [index, isDynamic, measureItem]);
+
+  if (!isDynamic) {
+    return <>{children}</>;
+  }
+
+  // For dynamic height items, apply positioning to wrapper and let content define height
+  return (
+    <div ref={itemRef} style={style}>
+      {children}
+    </div>
+  );
+}
+
+// Use a generic forwardRef pattern
+export const VirtualList = forwardRef(VirtualListInner) as <T>(
+  props: VirtualListComponentProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> },
+) => React.ReactElement;
+
+export type { VirtualListProps };

package/src/ui/virtual-list/index.ts

@@ -0,0 +1,8 @@
+export { VirtualList } from "./VirtualList";
+export type {
+  VirtualListProps,
+  ItemHeight,
+  UseVirtualListOptions,
+  UseVirtualListResult,
+} from "./types";
+export { useVirtualList } from "./useVirtualList";

package/src/ui/virtual-list/types.ts

@@ -0,0 +1,54 @@
+import type { CSSProperties, ReactNode } from "react";
+
+export type ItemHeight = number | "dynamic";
+
+export interface VirtualListProps<T> {
+  /** Array of items to render */
+  items: T[];
+  /** Fixed height in pixels, or 'dynamic' for variable height items */
+  itemHeight: ItemHeight;
+  /** Estimated height for dynamic mode initial calculation (default: 40) */
+  estimatedItemHeight?: number;
+  /** Container height (default: '100%') */
+  height?: number | string;
+  /** Number of extra items to render outside visible area (default: 3) */
+  overscan?: number;
+  /** Function to get a unique key for each item */
+  getItemKey?: (item: T, index: number) => string | number;
+  /** Render function for each item - receives item, index, and style to apply */
+  children: (item: T, index: number, style: CSSProperties) => ReactNode;
+  /** Callback when scroll position changes */
+  onScroll?: (scrollTop: number) => void;
+  /** Callback when visible range changes */
+  onRangeChange?: (startIndex: number, endIndex: number) => void;
+  /** Additional className for the container */
+  className?: string;
+}
+
+export interface VirtualListState {
+  scrollTop: number;
+  startIndex: number;
+  endIndex: number;
+}
+
+export interface ItemMeasurement {
+  offset: number;
+  height: number;
+}
+
+export interface UseVirtualListOptions<T> {
+  items: T[];
+  itemHeight: ItemHeight;
+  estimatedItemHeight: number;
+  containerHeight: number;
+  overscan: number;
+  scrollTop: number;
+}
+
+export interface UseVirtualListResult {
+  visibleRange: { start: number; end: number };
+  totalHeight: number;
+  getItemStyle: (index: number) => CSSProperties;
+  measureItem: (index: number, height: number) => void;
+  measurements: Map<number, ItemMeasurement>;
+}

package/src/ui/virtual-list/useVirtualList.ts

@@ -0,0 +1,203 @@
+import { useCallback, useMemo, useRef, type CSSProperties } from "react";
+
+import type {
+  ItemHeight,
+  ItemMeasurement,
+  UseVirtualListOptions,
+  UseVirtualListResult,
+} from "./types";
+
+/**
+ * Binary search to find the start index for a given scroll position
+ */
+function findStartIndex(
+  measurements: Map<number, ItemMeasurement>,
+  itemCount: number,
+  scrollTop: number,
+  itemHeight: ItemHeight,
+  estimatedItemHeight: number,
+): number {
+  if (itemCount === 0) return 0;
+
+  if (typeof itemHeight === "number") {
+    return Math.floor(scrollTop / itemHeight);
+  }
+
+  // For dynamic heights, use binary search on measured items
+  let low = 0;
+  let high = itemCount - 1;
+
+  while (low <= high) {
+    const mid = Math.floor((low + high) / 2);
+    const measurement = measurements.get(mid);
+    const offset = measurement?.offset ?? mid * estimatedItemHeight;
+
+    if (offset < scrollTop) {
+      low = mid + 1;
+    } else if (offset > scrollTop) {
+      high = mid - 1;
+    } else {
+      return mid;
+    }
+  }
+
+  return Math.max(0, low - 1);
+}
+
+/**
+ * Hook for virtualizing a list of items
+ */
+export function useVirtualList<T>({
+  items,
+  itemHeight,
+  estimatedItemHeight,
+  containerHeight,
+  overscan,
+  scrollTop,
+}: UseVirtualListOptions<T>): UseVirtualListResult {
+  const measurementsRef = useRef<Map<number, ItemMeasurement>>(new Map());
+  const measurements = measurementsRef.current;
+
+  const isFixed = typeof itemHeight === "number";
+
+  // Calculate total height
+  const totalHeight = useMemo(() => {
+    if (isFixed) {
+      return items.length * itemHeight;
+    }
+
+    // For dynamic heights, use measured heights + estimated for unmeasured
+    let height = 0;
+    for (let i = 0; i < items.length; i++) {
+      const measurement = measurements.get(i);
+      height += measurement?.height ?? estimatedItemHeight;
+    }
+    return height;
+  }, [items.length, itemHeight, isFixed, estimatedItemHeight, measurements]);
+
+  // Calculate visible range
+  const visibleRange = useMemo(() => {
+    if (items.length === 0) {
+      return { start: 0, end: 0 };
+    }
+
+    const startIndex = findStartIndex(
+      measurements,
+      items.length,
+      scrollTop,
+      itemHeight,
+      estimatedItemHeight,
+    );
+
+    let endIndex: number;
+    if (isFixed) {
+      endIndex = Math.min(items.length - 1, Math.ceil((scrollTop + containerHeight) / itemHeight));
+    } else {
+      // For dynamic, scan forward until we exceed container
+      let accumulatedHeight = 0;
+      endIndex = startIndex;
+
+      // Get starting offset
+      const startMeasurement = measurements.get(startIndex);
+      const startOffset = startMeasurement?.offset ?? startIndex * estimatedItemHeight;
+      accumulatedHeight = startOffset - scrollTop;
+
+      while (endIndex < items.length - 1 && accumulatedHeight < containerHeight) {
+        const measurement = measurements.get(endIndex);
+        accumulatedHeight += measurement?.height ?? estimatedItemHeight;
+        endIndex++;
+      }
+    }
+
+    // Apply overscan
+    const start = Math.max(0, startIndex - overscan);
+    const end = Math.min(items.length - 1, endIndex + overscan);
+
+    return { start, end };
+  }, [
+    items.length,
+    scrollTop,
+    containerHeight,
+    overscan,
+    itemHeight,
+    isFixed,
+    estimatedItemHeight,
+    measurements,
+  ]);
+
+  // Get style for an item at a given index
+  const getItemStyle = useCallback(
+    (index: number): CSSProperties => {
+      let top: number;
+
+      if (isFixed) {
+        top = index * (itemHeight as number);
+      } else {
+        const measurement = measurements.get(index);
+        if (measurement) {
+          top = measurement.offset;
+        } else {
+          // Estimate offset based on previous measurements
+          let offset = 0;
+          for (let i = 0; i < index; i++) {
+            const m = measurements.get(i);
+            offset += m?.height ?? estimatedItemHeight;
+          }
+          top = offset;
+        }
+      }
+
+      return {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        transform: `translateY(${top}px)`,
+        ...(isFixed && { height: itemHeight as number }),
+      };
+    },
+    [itemHeight, isFixed, estimatedItemHeight, measurements],
+  );
+
+  // Measure an item (for dynamic heights)
+  const measureItem = useCallback(
+    (index: number, height: number) => {
+      const currentMeasurement = measurements.get(index);
+
+      // Only update if height changed
+      if (currentMeasurement?.height === height) {
+        return;
+      }
+
+      // Calculate offset based on previous items
+      let offset = 0;
+      for (let i = 0; i < index; i++) {
+        const m = measurements.get(i);
+        offset += m?.height ?? estimatedItemHeight;
+      }
+
+      measurements.set(index, { offset, height });
+
+      // Update offsets for subsequent measured items
+      let currentOffset = offset + height;
+      for (let i = index + 1; i < items.length; i++) {
+        const m = measurements.get(i);
+        if (m) {
+          measurements.set(i, { ...m, offset: currentOffset });
+          currentOffset += m.height;
+        } else {
+          break;
+        }
+      }
+    },
+    [items.length, estimatedItemHeight, measurements],
+  );
+
+  return {
+    visibleRange,
+    totalHeight,
+    getItemStyle,
+    measureItem,
+    measurements,
+  };
+}

package/dist/auth/components/index.d.cts

@@ -1,2 +0,0 @@
-export { UserAvatar } from './user-avatar/index.cjs';
-import 'react/jsx-runtime';

package/dist/auth/components/index.d.ts

@@ -1,2 +0,0 @@
-export { UserAvatar } from './user-avatar/index.js';
-import 'react/jsx-runtime';

package/dist/auth/components/user-avatar/index.cjs

@@ -1,128 +0,0 @@
-'use strict';
-
-var chunkRTZNHV43_cjs = require('../../../chunk-RTZNHV43.cjs');
-require('../../../chunk-EMXEFZEB.cjs');
-require('../../../chunk-RSBVQ7SJ.cjs');
-require('../../../chunk-OOHCJIRV.cjs');
-require('../../../chunk-7R5HY3IM.cjs');
-require('../../../chunk-Q76WU4DL.cjs');
-require('../../../chunk-3WMO5QJJ.cjs');
-require('../../../chunk-X3H6FYAM.cjs');
-require('../../../chunk-OBWKFURE.cjs');
-require('../../../chunk-MMQR4IEY.cjs');
-require('../../../chunk-WJL5HMO6.cjs');
-require('../../../chunk-RJ7I6ZQK.cjs');
-require('../../../chunk-STJMH4NX.cjs');
-require('../../../chunk-O3DFVRON.cjs');
-require('../../../chunk-5HT74RHB.cjs');
-require('../../../chunk-Z6UDRPC2.cjs');
-require('../../../chunk-YJ6X6T5K.cjs');
-require('../../../chunk-G5NT42YF.cjs');
-require('../../../chunk-UFYHIDMC.cjs');
-require('../../../chunk-4WWGBRQV.cjs');
-require('../../../chunk-VOTZLQ6J.cjs');
-require('../../../chunk-OCADGDGL.cjs');
-require('../../../chunk-UTS56UA5.cjs');
-require('../../../chunk-G2ZYONQO.cjs');
-require('../../../chunk-JWVH6R35.cjs');
-require('../../../chunk-MVAFOQ67.cjs');
-require('../../../chunk-7ICRKPIO.cjs');
-require('../../../chunk-4H5EXSBN.cjs');
-require('../../../chunk-T737IFFK.cjs');
-require('../../../chunk-E6G4MTX3.cjs');
-require('../../../chunk-WX7SLJUA.cjs');
-require('../../../chunk-UCAIVC2B.cjs');
-require('../../../chunk-34NDAZS6.cjs');
-require('../../../chunk-4AE2TOOL.cjs');
-require('../../../chunk-S4C7HO32.cjs');
-require('../../../chunk-WYUJM72T.cjs');
-require('../../../chunk-63OJOP6W.cjs');
-require('../../../chunk-DECFNBXU.cjs');
-require('../../../chunk-XMVARRN6.cjs');
-require('../../../chunk-GBRIW266.cjs');
-require('../../../chunk-NC2U7QTW.cjs');
-require('../../../chunk-CV2EDA3W.cjs');
-require('../../../chunk-E7ACJ3NX.cjs');
-require('../../../chunk-KKGDRIR2.cjs');
-require('../../../chunk-WQT7JQN4.cjs');
-require('../../../chunk-JVZ6J2UX.cjs');
-require('../../../chunk-KWSH253U.cjs');
-require('../../../chunk-QF3JWGWX.cjs');
-require('../../../chunk-42DBXENE.cjs');
-require('../../../chunk-COJRGW3A.cjs');
-require('../../../chunk-VW2NEQHK.cjs');
-require('../../../chunk-EOTGD64D.cjs');
-require('../../../chunk-SNUQOJLK.cjs');
-require('../../../chunk-4TRHQ7MJ.cjs');
-require('../../../chunk-XDIHVSZ5.cjs');
-require('../../../chunk-DG2EVWIW.cjs');
-require('../../../chunk-KQAZ6BRD.cjs');
-require('../../../chunk-ZZDIW5JV.cjs');
-require('../../../chunk-SBTB5YJV.cjs');
-require('../../../chunk-XSKUAK23.cjs');
-require('../../../chunk-WRJAYU2L.cjs');
-require('../../../chunk-Z42BBOSG.cjs');
-require('../../../chunk-LGOEGWMJ.cjs');
-require('../../../chunk-HVACIZB5.cjs');
-require('../../../chunk-KR7VBV3B.cjs');
-require('../../../chunk-WHV4VATL.cjs');
-require('../../../chunk-PWZ4F3WY.cjs');
-require('../../../chunk-NHFIDL5X.cjs');
-require('../../../chunk-GVRVRBDU.cjs');
-require('../../../chunk-LGUQR5AR.cjs');
-require('../../../chunk-SUWJDU3Y.cjs');
-require('../../../chunk-NIACIZWY.cjs');
-require('../../../chunk-3JMUI4R2.cjs');
-require('../../../chunk-7TXGEIV3.cjs');
-require('../../../chunk-3F3LBOQJ.cjs');
-require('../../../chunk-T2OAWYOU.cjs');
-require('../../../chunk-BI4QZVVB.cjs');
-require('../../../chunk-WYD3KNAT.cjs');
-require('../../../chunk-7YFUNCKT.cjs');
-require('../../../chunk-L6W77P4B.cjs');
-require('../../../chunk-NEJKCSS5.cjs');
-require('../../../chunk-D5WTSBUX.cjs');
-require('../../../chunk-YGZHBIZP.cjs');
-require('../../../chunk-BSDIS4KS.cjs');
-require('../../../chunk-6CJWNYHL.cjs');
-require('../../../chunk-JF43YF6J.cjs');
-require('../../../chunk-57NITJN5.cjs');
-require('../../../chunk-T2BDPMCF.cjs');
-require('../../../chunk-NSPAT6XV.cjs');
-require('../../../chunk-MQ5DGLVE.cjs');
-require('../../../chunk-ACGXE2IO.cjs');
-require('../../../chunk-ZAK7AFVY.cjs');
-require('../../../chunk-22T2AL3G.cjs');
-require('../../../chunk-4WKFVKFF.cjs');
-require('../../../chunk-COL2MXGC.cjs');
-require('../../../chunk-CYWVJ3HF.cjs');
-require('../../../chunk-B6CIRZI4.cjs');
-require('../../../chunk-UTHAZV2T.cjs');
-require('../../../chunk-P6E4WLMD.cjs');
-require('../../../chunk-EMZEL54F.cjs');
-require('../../../chunk-6VIKDPCD.cjs');
-require('../../../chunk-PMG3NZF5.cjs');
-require('../../../chunk-YAFKQ5ZV.cjs');
-require('../../../chunk-R22VW3EK.cjs');
-require('../../../chunk-T3G35JSP.cjs');
-require('../../../chunk-JMCH2AFN.cjs');
-require('../../../chunk-ZG33TW5I.cjs');
-require('../../../chunk-QN4N4I3Z.cjs');
-require('../../../chunk-LBWMTA5T.cjs');
-require('../../../chunk-Q7E73DVJ.cjs');
-require('../../../chunk-DVUN6GQI.cjs');
-require('../../../chunk-VXZURKMQ.cjs');
-require('../../../chunk-Q4XH2Z5M.cjs');
-require('../../../chunk-6BOWMGFG.cjs');
-require('../../../chunk-YZIR6LIY.cjs');
-require('../../../chunk-GEGPGQVH.cjs');
-require('../../../chunk-6LTCLQH3.cjs');
-require('../../../chunk-G4FJGNY5.cjs');
-require('../../../chunk-F4Z5KATZ.cjs');
-
-
-
-Object.defineProperty(exports, "UserAvatar", {
-  enumerable: true,
-  get: function () { return chunkRTZNHV43_cjs.UserAvatar; }
-});

package/dist/auth/components/user-avatar/index.d.cts

@@ -1,8 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-interface Props {
-    className?: string;
-}
-declare function UserAvatar({ className }: Props): react_jsx_runtime.JSX.Element;
-
-export { UserAvatar };

package/dist/auth/components/user-avatar/index.d.ts

@@ -1,8 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-interface Props {
-    className?: string;
-}
-declare function UserAvatar({ className }: Props): react_jsx_runtime.JSX.Element;
-
-export { UserAvatar };