@react-fabric/data 1.0.0-beta.9 → 1.0.1

package/src/virtual/List.tsx

@@ -30,10 +30,9 @@
 
 import { Skeleton, useDebounce } from "@react-fabric/core";
 import { type TestProps } from "@react-fabric/core/dist/types/types";
-import { debounce } from "@react-fabric/utilities";
+import { cn, debounce } from "@react-fabric/utilities";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import classNames from "classnames";
-import memoizeOne from "memoize-one";
+import memoize from "memoize-one";
 import {
   memo,
   useCallback,
@@ -56,11 +55,7 @@ export interface VirtualListRef {
 }
 
 export interface VirtualListProps<T> extends TestProps {
-  children: (props: {
-    data: T;
-    index: number;
-    isLast: boolean;
-  }) => ReactElement;
+  children: (props: { item: T; index: number; isLast: boolean }) => ReactElement;
   listRef?: Ref<VirtualListRef | undefined>;
   /**
    * default item height
@@ -74,6 +69,8 @@ export interface VirtualListProps<T> extends TestProps {
    * full width list
    */
   fullWidth?: boolean;
+  maxWidth?: string | number;
+  minWidth?: string | number;
   /**
    * padding
    */
@@ -86,6 +83,7 @@ export interface VirtualListProps<T> extends TestProps {
    * data list
    */
   items: T[];
+  total?: number;
   initialScroll?: number;
   /**
    * loading state
@@ -98,19 +96,22 @@ export interface VirtualListProps<T> extends TestProps {
   /**
    * load more callback
    */
-  onLoadMore?: (page?: number) => void;
+  onLoadMore?: (lastIndex?: number) => void;
   /**
    * scroll handler
    */
   onScroll?: (top: number) => void;
 }
 
-const createItemList = memoizeOne((items) => items);
+const createItemList = memoize((items) => items as never);
 
-const _VirtualList = <T extends KeyValue>({
+const VirtualListComponent = <T extends AnyObject>({
   items,
+  total = 0,
   children,
   fullWidth,
+  maxWidth,
+  minWidth,
   padding = "md",
   orientation = "vertical",
   defaultHeight: height = 48,
@@ -124,18 +125,18 @@ const _VirtualList = <T extends KeyValue>({
   ...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;
+    item: T;
     isLast: boolean;
     isSticky: boolean;
   }> = createItemList(
-    items.map((item: AnyObject, idx) => {
+    items.map((item: T, index) => {
       return {
-        index: idx,
-        data: item,
-        isLast: idx + 1 === items.length,
+        index,
+        item,
+        isLast: index + 1 === items.length,
       };
     }),
   );
@@ -143,6 +144,7 @@ const _VirtualList = <T extends KeyValue>({
   const scrollerRef = useRef<HTMLDivElement>(null);
   const virtualizer = useVirtualizer({
     count,
+    overscan: 0,
     horizontal: orientation === "horizontal",
     getScrollElement: () => scrollerRef.current,
     estimateSize: () => (orientation === "horizontal" ? width : height),
@@ -150,15 +152,11 @@ const _VirtualList = <T extends KeyValue>({
 
   const virtualItems = virtualizer.getVirtualItems();
 
-  const currentIndex = useRef(0);
+  const currentIndexRef = useRef(0);
   useEffect(() => {
-    currentIndex.current = virtualItems[1]?.index ?? 0;
-    if (
-      scrollerRef.current &&
-      virtualItems[0] &&
-      scrollerRef.current.scrollTop < virtualItems[0].size
-    )
-      currentIndex.current = 0;
+    currentIndexRef.current = virtualItems[0]?.index ?? 0;
+    if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size)
+      currentIndexRef.current = 0;
   }, [virtualItems]);
 
   const calculateActiveScroll = useCallback(() => {
@@ -180,96 +178,96 @@ const _VirtualList = <T extends KeyValue>({
       if (scrollWidth === offsetWidth) return 0;
 
       if (Math.abs(scrollLeft) === 0) return 1;
-      if (Math.abs(scrollLeft) >= scrollWidth - offsetWidth - extraSize * 2)
-        return 2;
+      if (Math.abs(scrollLeft) >= scrollWidth - offsetWidth - extraSize * 2) return 2;
     }
     return 3;
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, [orientation]);
 
   const [scrollActive, setScrollActive] = useState(0);
-  const fireScrollEvent = useDebounce(
-    () => onScroll?.(currentIndex.current),
-    [onScroll],
-  );
+  const fireScrollEvent = useDebounce(() => onScroll?.(currentIndexRef.current), [onScroll]);
   const handleScroll = useCallback(() => {
     setScrollActive(calculateActiveScroll());
     fireScrollEvent();
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, [orientation, onLoadMore]);
 
   useEffect(() => {
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setScrollActive(calculateActiveScroll());
   }, [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]);
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [onLoadMore, virtualItems]);
 
+  const isRenderedRef = useRef(false);
   useLayoutEffect(() => {
-    setTimeout(() => {
-      initialScroll &&
-        virtualizer.scrollToIndex(initialScroll, { align: "start" });
-    }, 100);
-  }, []);
+    if (!isRenderedRef.current && itemList.length > 0) {
+      isRenderedRef.current = true;
+      if (initialScroll) {
+        const tmr = setTimeout(() => {
+          virtualizer.scrollToIndex(Math.floor(initialScroll), {
+            align: "start",
+          });
+        }, 200);
+
+        return () => {
+          clearTimeout(tmr);
+        };
+      }
+    }
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [itemList, initialScroll]);
 
   useImperativeHandle(
     listRef,
     () => ({
       scrollToItem(index) {
-        virtualizer.scrollToIndex(index, { align: "start" });
+        virtualizer.scrollToIndex(index, { align: "auto" });
       },
       hilight(index) {
-        scrollerRef.current
-          ?.querySelector(".hilight")
-          ?.classList.remove("hilight", "ring-1");
+        const el = scrollerRef.current?.querySelector("[data-selected='true']") as HTMLElement;
+        if (el) el.dataset.selected = "false";
         virtualizer.scrollToIndex(Math.floor(index), {
-          align: "start",
+          align: "auto",
         });
         setTimeout(() => {
-          scrollerRef.current
-            ?.querySelector(`[data-index="${index}"]`)
-            ?.classList.add("hilight", "ring-1");
+          const el = scrollerRef.current?.querySelector(`[data-index="${index}"]`) as HTMLElement;
+          if (el) el.dataset.selected = "true";
         }, 100);
       },
       unhilight() {
-        scrollerRef.current
-          ?.querySelector(".hilight")
-          ?.classList.remove("hilight", "ring-1");
+        const el = scrollerRef.current?.querySelector("[data-selected='true']") as HTMLElement;
+        if (el) el.dataset.selected = "false";
       },
     }),
     [virtualizer],
   );
 
   return (
-    <div
-      ref={scrollerRef}
-      onScroll={handleScroll}
-      className={classNames(
-        "area-content bg-base overflow-auto contain-strict",
-      )}
-      {...aria}
-    >
+    <div ref={scrollerRef} onScroll={handleScroll} className={cn("area-content bg-default overflow-auto")} {...aria}>
       <div
-        className={classNames(
-          "inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full",
+        className={cn(
+          "flex flex-nowrap gap-2 justify-center min-h-full min-w-full",
           orientation === "horizontal" && "flex-col",
         )}
       >
         <div
-          className={classNames(
+          className={cn(
             "box-content inline-flex flex-nowrap",
             orientation === "vertical" && "flex-col",
             orientation === "horizontal" && "flex-row",
@@ -278,12 +276,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
@@ -298,26 +300,29 @@ const _VirtualList = <T extends KeyValue>({
                 key={key}
                 data-index={index}
                 ref={virtualizer.measureElement}
-                className={classNames(
-                  "rounded-capped",
-                  orientation === "horizontal" ? "inline-grid" : "grid",
-                )}
+                className={cn("rounded-capped", orientation === "horizontal" ? "inline-grid" : "grid")}
+                style={{
+                  minWidth: width,
+                  minHeight: height,
+                }}
               >
-                {children(itemList[index] as AnyObject)}
+                {itemList[index]?.item
+                  ? children(itemList[index])
+                  : itemList[index]?.item === null && <Skeleton className="p-2" />}
               </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>
         {!hideScroller && (
           <div
-            className={classNames(
+            className={cn(
               orientation === "vertical" && "self-end sticky bottom-2",
-              orientation === "horizontal" && "self-end sticky end-2",
+              orientation === "horizontal" && "self-end sticky inset-e-2",
             )}
           >
             <Scroller
@@ -327,17 +332,13 @@ const _VirtualList = <T extends KeyValue>({
               onPrevious={() =>
                 scrollerRef.current &&
                 virtualizer.scrollBy(
-                  -(orientation === "vertical"
-                    ? scrollerRef.current.offsetHeight
-                    : scrollerRef.current.offsetWidth),
+                  -(orientation === "vertical" ? scrollerRef.current.offsetHeight : scrollerRef.current.offsetWidth),
                 )
               }
               onNext={() =>
                 scrollerRef.current &&
                 virtualizer.scrollBy(
-                  orientation === "vertical"
-                    ? scrollerRef.current.offsetHeight
-                    : scrollerRef.current.offsetWidth,
+                  orientation === "vertical" ? scrollerRef.current.offsetHeight : scrollerRef.current.offsetWidth,
                 )
               }
               onEnd={() => virtualizer.scrollToIndex(count - 1)}
@@ -348,7 +349,39 @@ const _VirtualList = <T extends KeyValue>({
     </div>
   );
 };
-_VirtualList.displayName = "VirtualList";
 
 const GenericMemo: <T>(c: T) => T = memo;
-export const VirtualList = GenericMemo(_VirtualList);
+
+/**
+ * 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.
+ *
+ * @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(VirtualListComponent);

package/src/virtual/Scroller.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Button, ButtonGroup, CoreIcons } from "@react-fabric/core";
+import { Button, ButtonGroup } from "@react-fabric/core";
 
 export const Scroller = ({
   vertical = true,
@@ -41,38 +41,54 @@ export const Scroller = ({
   return (
     <ButtonGroup vertical={vertical} variant="link" className="outline">
       <Button
-        rtlFlip
         size="sm"
         variant="link"
         aria-label="scroll to top"
-        icon={vertical ? CoreIcons.chevronsUp : CoreIcons.chevronsLeft}
+        icon={{
+          icon: vertical
+            ? "icon-[mdi--chevron-double-up]"
+            : "icon-[mdi--chevron-double-left]",
+          rtlFlip: true,
+        }}
         disabled={(scrollActive & 2) === 0}
         onClick={onStart}
       />
       <Button
-        rtlFlip
         size="sm"
         variant="link"
         aria-label="scroll up"
-        icon={vertical ? CoreIcons.chevronUp : CoreIcons.chevronLeft}
+        icon={{
+          icon: vertical
+            ? "icon-[mdi--chevron-up]"
+            : "icon-[mdi--chevron-left]",
+          rtlFlip: true,
+        }}
         disabled={(scrollActive & 2) === 0}
         onClick={onPrevious}
       />
       <Button
-        rtlFlip
         size="sm"
         variant="link"
         aria-label="scroll down"
-        icon={vertical ? CoreIcons.chevronDown : CoreIcons.chevronRight}
+        icon={{
+          icon: vertical
+            ? "icon-[mdi--chevron-down]"
+            : "icon-[mdi--chevron-right]",
+          rtlFlip: true,
+        }}
         disabled={scrollActive % 2 === 0}
         onClick={onNext}
       />
       <Button
-        rtlFlip
         size="sm"
         variant="link"
         aria-label="scroll to bottom"
-        icon={vertical ? CoreIcons.chevronsDown : CoreIcons.chevronsRight}
+        icon={{
+          icon: vertical
+            ? "icon-[mdi--chevron-double-down]"
+            : "icon-[mdi--chevron-double-right]",
+          rtlFlip: true,
+        }}
         disabled={scrollActive % 2 === 0}
         onClick={onEnd}
       />

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%)}}}

package/dist/types/table/Context.d.ts

@@ -1,8 +0,0 @@
-import { type ChildrenProp } from "@react-fabric/core/dist/types/types";
-interface Context {
-    widths: Map<string, number>;
-    startResize: (col: HTMLElement) => void;
-}
-export declare const TableProvider: ({ children }: ChildrenProp) => import("react/jsx-runtime").JSX.Element;
-export declare const useTableContext: () => Context;
-export {};