@react-fabric/data 1.0.0-beta.5 → 1.0.0-beta.52

package/src/virtual/List.tsx

@@ -29,6 +29,7 @@
  */
 
 import { Skeleton, useDebounce } from "@react-fabric/core";
+import { type TestProps } from "@react-fabric/core/dist/types/types";
 import { debounce } from "@react-fabric/utilities";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import classNames from "classnames";
@@ -54,9 +55,9 @@ export interface VirtualListRef {
   unhilight: () => void;
 }
 
-export interface VirtualListProps<T> {
+export interface VirtualListProps<T> extends TestProps {
   children: (props: {
-    data: T;
+    item: T;
     index: number;
     isLast: boolean;
   }) => ReactElement;
@@ -73,6 +74,8 @@ export interface VirtualListProps<T> {
    * full width list
    */
   fullWidth?: boolean;
+  maxWidth?: string | number;
+  minWidth?: string | number;
   /**
    * padding
    */
@@ -85,6 +88,7 @@ export interface VirtualListProps<T> {
    * data list
    */
   items: T[];
+  total?: number;
   initialScroll?: number;
   /**
    * loading state
@@ -97,7 +101,7 @@ export interface VirtualListProps<T> {
   /**
    * load more callback
    */
-  onLoadMore?: (page?: number) => void;
+  onLoadMore?: (lastIndex?: number) => void;
   /**
    * scroll handler
    */
@@ -106,10 +110,13 @@ export interface VirtualListProps<T> {
 
 const createItemList = memoizeOne((items) => items);
 
-const _VirtualList = <T extends KeyValue>({
+const _VirtualList = <T extends AnyObject>({
   items,
+  total = 0,
   children,
   fullWidth,
+  maxWidth,
+  minWidth,
   padding = "md",
   orientation = "vertical",
   defaultHeight: height = 48,
@@ -120,20 +127,21 @@ const _VirtualList = <T extends KeyValue>({
   onLoadMore,
   onScroll,
   listRef,
+  ...aria
 }: VirtualListProps<T>) => {
   const count = useDeferredValue(items.length);
-  const extraSize = useMemo(() => (onLoadMore ? 64 : 0), [onLoadMore]);
+  const extraSize = useMemo(() => (onLoadMore ? 8 : 0), [onLoadMore]);
   const itemList: Array<{
     index: number;
     data: T;
     isLast: boolean;
     isSticky: boolean;
   }> = createItemList(
-    items.map((item: AnyObject, idx) => {
+    items.map((item: AnyObject, index) => {
       return {
-        index: idx,
-        data: item,
-        isLast: idx + 1 === items.length,
+        index,
+        item,
+        isLast: index + 1 === items.length,
       };
     }),
   );
@@ -141,6 +149,7 @@ const _VirtualList = <T extends KeyValue>({
   const scrollerRef = useRef<HTMLDivElement>(null);
   const virtualizer = useVirtualizer({
     count,
+    overscan: 2,
     horizontal: orientation === "horizontal",
     getScrollElement: () => scrollerRef.current,
     estimateSize: () => (orientation === "horizontal" ? width : height),
@@ -199,22 +208,22 @@ const _VirtualList = <T extends KeyValue>({
   }, [itemList, calculateActiveScroll]);
 
   useEffect(() => {
-    const db = debounce(() => {
-      const lastItem = virtualItems?.slice(-1).pop();
-      if (lastItem && !loading && lastItem.index === count - 1) onLoadMore?.();
-    });
-    db();
-    return () => db.cancel();
-  }, [onLoadMore, loading, itemList, virtualItems, count]);
-
-  useEffect(() => {
-    const firstItem = virtualItems[0]?.index;
-    if (onLoadMore && firstItem !== undefined && items[firstItem] === null) {
+    if (onLoadMore) {
+      const firstItem = virtualItems[0]?.index;
+      const lastItem = virtualItems?.slice(-1).pop()?.index;
+      const canLoadPrevPage =
+        firstItem !== undefined && items[firstItem] === null;
+      const canLoadNextPage =
+        lastItem !== undefined && lastItem === count - 1 && count < total;
       const db = debounce(onLoadMore);
-      db(firstItem);
+      if (canLoadPrevPage) {
+        db(firstItem);
+      } else if (!loading && canLoadNextPage) {
+        db(lastItem + 1);
+      }
       return () => db.cancel();
     }
-  }, [onLoadMore, items, virtualItems, count]);
+  }, [onLoadMore, virtualItems]);
 
   useLayoutEffect(() => {
     setTimeout(() => {
@@ -227,14 +236,14 @@ const _VirtualList = <T extends KeyValue>({
     listRef,
     () => ({
       scrollToItem(index) {
-        virtualizer.scrollToIndex(index, { align: "start" });
+        virtualizer.scrollToIndex(index, { align: "auto" });
       },
       hilight(index) {
         scrollerRef.current
           ?.querySelector(".hilight")
           ?.classList.remove("hilight", "ring-1");
         virtualizer.scrollToIndex(Math.floor(index), {
-          align: "start",
+          align: "auto",
         });
         setTimeout(() => {
           scrollerRef.current
@@ -255,13 +264,12 @@ const _VirtualList = <T extends KeyValue>({
     <div
       ref={scrollerRef}
       onScroll={handleScroll}
-      className={classNames(
-        "area-content bg-base overflow-auto contain-strict",
-      )}
+      className={classNames("area-content bg-base overflow-auto")}
+      {...aria}
     >
       <div
         className={classNames(
-          "inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full",
+          "flex flex-nowrap gap-2 justify-center min-h-full min-w-full",
           orientation === "horizontal" && "flex-col",
         )}
       >
@@ -275,12 +283,16 @@ const _VirtualList = <T extends KeyValue>({
             padding === "md" && "p-2",
             padding === "lg" && "p-4",
           )}
+          style={{
+            minWidth,
+            maxWidth,
+          }}
         >
           <div
             style={
               orientation === "vertical"
-                ? { height: virtualizer.getTotalSize() }
-                : { width: virtualizer.getTotalSize() }
+                ? { height: virtualizer.getTotalSize() + extraSize }
+                : { width: virtualizer.getTotalSize() + extraSize }
             }
           >
             <div
@@ -304,9 +316,9 @@ const _VirtualList = <T extends KeyValue>({
               </div>
             ))}
           </div>
-          {onLoadMore && (
-            <div className={orientation === "horizontal" ? "min-w-16" : "h-16"}>
-              {loading && <Skeleton />}
+          {loading && (
+            <div className={orientation === "horizontal" ? "min-w-16" : ""}>
+              <Skeleton />
             </div>
           )}
         </div>
@@ -348,4 +360,41 @@ const _VirtualList = <T extends KeyValue>({
 _VirtualList.displayName = "VirtualList";
 
 const GenericMemo: <T>(c: T) => T = memo;
+
+/**
+ * VirtualList component for rendering large lists efficiently using virtualization.
+ * It supports horizontal and vertical orientations, custom item heights and widths,
+ * and provides a scroller for navigating through the list.
+ * It also supports loading more items on scroll and provides a way to hilight items.
+ * It can be used with a ref to control scrolling and hilighting of items.
+ *
+ * @param {VirtualListProps<T>} props - The properties for the VirtualList component.
+ * @returns {JSX.Element} The rendered VirtualList component.
+ * @template T - The type of items in the list, extending AnyObject.
+ *
+ * @example
+ * ```jsx
+ * <VirtualList
+ *   items={items}
+ *   children={({ item, index, isLast }) => (
+ *     <div key={index} className="item">
+ *       {item.label}
+ *     </div>
+ *   )}
+ *   fullWidth={true}
+ *   orientation="vertical"
+ *   defaultHeight={50}
+ *   onLoadMore={(lastIndex) => console.log("Load more items from index:", lastIndex)}
+ *   onScroll={(top) => console.log("Scrolled to top:", top)}
+ *   listRef={virtualListRef}
+ * >
+ *   {({ item, index, isLast }) => (
+ *     <div className="gallery-item" key={item.id}>
+ *       <img src={item.image} alt={item.label} />
+ *       <p>{item.label}</p>
+ *     </div>
+ *   )}
+ * </VirtualList>
+ * ```
+ */
 export const VirtualList = GenericMemo(_VirtualList);

package/dist/cjs/histogram/Histogram.module.css

@@ -1 +0,0 @@
-@layer comp{.histogram{.histoLabel{--tw-gradient-from:var(--color) var(--tw-gradient-from-position);--tw-gradient-to:color-mix(in lab,var(--color) 20%,var(--fabric-bg)) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);background-color:color(from var(--color) srgb r g b/5%);&:hover{background-color:color(from var(--color) srgb r g b/15%)}&[data-disabled=true]{--color:theme(colors.tint.300);color:theme(colors.tint.600)}}.histoBar{box-shadow:-2px 0 0 var(--color) inset;:global([dir=rtl]) &{box-shadow:2px 0 0 var(--color) inset}}.histoBadge{background-color:color(from var(--color) srgb r g b/15%)}}}

package/dist/esm/histogram/Histogram.module.css

@@ -1 +0,0 @@
-@layer comp{.histogram{.histoLabel{--tw-gradient-from:var(--color) var(--tw-gradient-from-position);--tw-gradient-to:color-mix(in lab,var(--color) 20%,var(--fabric-bg)) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);background-color:color(from var(--color) srgb r g b/5%);&:hover{background-color:color(from var(--color) srgb r g b/15%)}&[data-disabled=true]{--color:theme(colors.tint.300);color:theme(colors.tint.600)}}.histoBar{box-shadow:-2px 0 0 var(--color) inset;:global([dir=rtl]) &{box-shadow:2px 0 0 var(--color) inset}}.histoBadge{background-color:color(from var(--color) srgb r g b/15%)}}}