@versini/ui-datagrid 0.3.7 → 0.4.0

package/dist/DataGridInfinite/InfiniteScrollMarker.d.ts

@@ -1,31 +0,0 @@
-export type InfiniteScrollMarkerProps = {
-    /**
-     * Custom class name for the row.
-     */
-    className?: string;
-    /**
-     * Whether to show the marker (for debugging). In production, the marker is
-     * invisible.
-     */
-    debug?: boolean;
-};
-/**
- * Invisible marker row for infinite scroll. Place this at the end of your
- * DataGridBody.
- *
- * @example
- * ```tsx
- * const { hasMore, markerRef } = useInfiniteScroll({ totalItems: data.length });
- *
- * return (
- *   <DataGridBody>
- *     {data.slice(0, visibleCount).map((item) => (
- *       <DataGridRow key={item.id}>...</DataGridRow>
- *     ))}
- *     {hasMore && <InfiniteScrollMarker ref={markerRef} />}
- *   </DataGridBody>
- * );
- * ```
- *
- */
-export declare const InfiniteScrollMarker: import("react").ForwardRefExoticComponent<InfiniteScrollMarkerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/DataGridInfinite/InfiniteScrollMarker.js

@@ -1,54 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.3.7
-  © 2026 gizmette.com
-*/
-
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-
-;// CONCATENATED MODULE: external "react/jsx-runtime"
-
-;// CONCATENATED MODULE: external "react"
-
-;// CONCATENATED MODULE: ./src/DataGridInfinite/InfiniteScrollMarker.tsx
-
-
-/**
- * Invisible marker row for infinite scroll. Place this at the end of your
- * DataGridBody.
- *
- * @example
- * ```tsx
- * const { hasMore, markerRef } = useInfiniteScroll({ totalItems: data.length });
- *
- * return (
- *   <DataGridBody>
- *     {data.slice(0, visibleCount).map((item) => (
- *       <DataGridRow key={item.id}>...</DataGridRow>
- *     ))}
- *     {hasMore && <InfiniteScrollMarker ref={markerRef} />}
- *   </DataGridBody>
- * );
- * ```
- *
- */ const InfiniteScrollMarker_InfiniteScrollMarker = /*#__PURE__*/ forwardRef(function InfiniteScrollMarker({ className, debug = false }, ref) {
-    return /*#__PURE__*/ jsx("div", {
-        ref: ref,
-        role: "row",
-        className: className,
-        "aria-hidden": "true",
-        style: {
-            height: debug ? "40px" : "1px",
-            background: debug ? "red" : "transparent"
-        },
-        children: /*#__PURE__*/ jsx("div", {
-            role: "gridcell",
-            style: {
-                padding: 0,
-                border: 0
-            }
-        })
-    });
-});
-
-export { InfiniteScrollMarker_InfiniteScrollMarker as InfiniteScrollMarker };

package/dist/DataGridInfinite/useInfiniteScroll.d.ts

@@ -1,92 +0,0 @@
-/**
- * Finds the nearest scrollable ancestor of an element. Returns null if no
- * scrollable ancestor is found (uses viewport).
- */
-export declare function findScrollableAncestor(element: HTMLElement): Element | null;
-export type UseInfiniteScrollOptions = {
-    /**
-     * Number of items to show initially and to add on each scroll.
-     * @default 20
-     */
-    batchSize?: number;
-    /**
-     * How many items before the end to trigger loading more.
-     * @default 5
-     */
-    threshold?: number;
-    /**
-     * IntersectionObserver root margin.
-     * @default "20px"
-     */
-    rootMargin?: string;
-    /**
-     * Total number of items in the dataset. Used to determine if more items can be
-     * loaded.
-     */
-    totalItems: number;
-    /**
-     * Initial number of visible items (optional). If not provided, uses batchSize.
-     * + threshold.
-     */
-    initialVisibleCount?: number;
-    /**
-     * Callback when more items are loaded.
-     */
-    onLoadMore?: (newVisibleCount: number) => void;
-    /**
-     * The scroll container element for IntersectionObserver root. Required when
-     * the DataGrid is inside a scrollable container (e.g., with maxHeight). Pass
-     * null to use the viewport as root.
-     */
-    scrollContainer?: Element | null;
-};
-export type UseInfiniteScrollReturn = {
-    /**
-     * Current number of visible items.
-     */
-    visibleCount: number;
-    /**
-     * Whether there are more items to load.
-     */
-    hasMore: boolean;
-    /**
-     * Callback ref to attach to the marker element.
-     */
-    markerRef: (node: HTMLElement | null) => void;
-    /**
-     * Reset visible count to initial value.
-     */
-    reset: () => void;
-    /**
-     * Manually set the visible count (useful for scroll-to-item).
-     */
-    setVisibleCount: React.Dispatch<React.SetStateAction<number>>;
-    /**
-     * Expand visible count to include a specific index.
-     */
-    expandToInclude: (index: number) => void;
-};
-/**
- * Hook for implementing infinite scroll with IntersectionObserver.
- *
- * @example
- * ```tsx
- * const { visibleCount, hasMore, markerRef } = useInfiniteScroll({
- *   totalItems: data.length,
- *   batchSize: 25,
- * });
- *
- * return (
- *   <DataGrid>
- *     <DataGridBody>
- *       {data.slice(0, visibleCount).map((item, index) => (
- *         <DataGridRow key={item.id}>...</DataGridRow>
- *       ))}
- *       {hasMore && <InfiniteScrollMarker ref={markerRef} />}
- *     </DataGridBody>
- *   </DataGrid>
- * );
- * ```
- *
- */
-export declare function useInfiniteScroll({ batchSize, threshold, rootMargin, totalItems, initialVisibleCount, onLoadMore, scrollContainer, }: UseInfiniteScrollOptions): UseInfiniteScrollReturn;

package/dist/DataGridInfinite/useInfiniteScroll.js

@@ -1,136 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.3.7
-  © 2026 gizmette.com
-*/
-
-import { useCallback, useEffect, useRef, useState } from "react";
-
-;// CONCATENATED MODULE: external "react"
-
-;// CONCATENATED MODULE: ./src/DataGridInfinite/useInfiniteScroll.ts
-
-const DEFAULT_BATCH_SIZE = 20;
-const DEFAULT_THRESHOLD = 5;
-const DEFAULT_ROOT_MARGIN = "20px";
-/**
- * Finds the nearest scrollable ancestor of an element. Returns null if no
- * scrollable ancestor is found (uses viewport).
- */ function findScrollableAncestor(element) {
-    let parent = element.parentElement;
-    while(parent){
-        const style = getComputedStyle(parent);
-        const overflowY = style.overflowY;
-        if (overflowY === "auto" || overflowY === "scroll") {
-            return parent;
-        }
-        parent = parent.parentElement;
-    }
-    return null;
-}
-/**
- * Hook for implementing infinite scroll with IntersectionObserver.
- *
- * @example
- * ```tsx
- * const { visibleCount, hasMore, markerRef } = useInfiniteScroll({
- *   totalItems: data.length,
- *   batchSize: 25,
- * });
- *
- * return (
- *   <DataGrid>
- *     <DataGridBody>
- *       {data.slice(0, visibleCount).map((item, index) => (
- *         <DataGridRow key={item.id}>...</DataGridRow>
- *       ))}
- *       {hasMore && <InfiniteScrollMarker ref={markerRef} />}
- *     </DataGridBody>
- *   </DataGrid>
- * );
- * ```
- *
- */ function useInfiniteScroll({ batchSize = DEFAULT_BATCH_SIZE, threshold = DEFAULT_THRESHOLD, rootMargin = DEFAULT_ROOT_MARGIN, totalItems, initialVisibleCount, onLoadMore, scrollContainer }) {
-    const observerRef = useRef(null);
-    const initialCount = initialVisibleCount ?? batchSize + threshold;
-    const [visibleCount, setVisibleCount] = useState(Math.min(initialCount, totalItems));
-    const hasMore = visibleCount < totalItems;
-    /**
-	 * IntersectionObserver callback - triggered when marker becomes visible.
-	 */ const handleIntersection = useCallback((entries)=>{
-        const target = entries[0];
-        if (target?.isIntersecting) {
-            setVisibleCount((prev)=>{
-                const newCount = Math.min(prev + batchSize, totalItems);
-                if (onLoadMore && newCount > prev) {
-                    onLoadMore(newCount);
-                }
-                return newCount;
-            });
-        }
-    }, [
-        batchSize,
-        totalItems,
-        onLoadMore
-    ]);
-    /**
-	 * Callback ref for the marker element. Creates/disconnects observer as needed.
-	 */ const markerRef = useCallback((node)=>{
-        // Disconnect previous observer.
-        if (observerRef.current) {
-            observerRef.current.disconnect();
-            observerRef.current = null;
-        }
-        if (node && typeof IntersectionObserver !== "undefined") {
-            // Find the scrollable ancestor if not explicitly provided.
-            const root = scrollContainer ?? findScrollableAncestor(node);
-            const options = {
-                root,
-                rootMargin
-            };
-            observerRef.current = new IntersectionObserver(handleIntersection, options);
-            observerRef.current.observe(node);
-        }
-    }, [
-        handleIntersection,
-        rootMargin,
-        scrollContainer
-    ]);
-    /**
-	 * Reset to initial count.
-	 */ const reset = useCallback(()=>{
-        setVisibleCount(Math.min(initialCount, totalItems));
-    }, [
-        initialCount,
-        totalItems
-    ]);
-    /**
-	 * Expand visible count to include a specific index. Useful for scroll-to-row
-	 * functionality.
-	 */ const expandToInclude = useCallback((index)=>{
-        if (index >= visibleCount) {
-            setVisibleCount(index + threshold);
-        }
-    }, [
-        visibleCount,
-        threshold
-    ]);
-    /**
-	 * Cleanup observer on unmount.
-	 */ useEffect(()=>{
-        return ()=>{
-            if (observerRef.current) {
-                observerRef.current.disconnect();
-            }
-        };
-    }, []);
-    return {
-        visibleCount,
-        hasMore,
-        markerRef,
-        reset,
-        setVisibleCount,
-        expandToInclude
-    };
-}
-
-export { findScrollableAncestor, useInfiniteScroll };

package/dist/common/utilities.d.ts

@@ -1,15 +0,0 @@
-import { type BlurEffect, type ThemeMode } from "../DataGridConstants/DataGridConstants";
-export declare const getHeaderFooterBackgroundClasses: ({ mode, hasBlur, sticky, }: {
-    mode: ThemeMode;
-    hasBlur: boolean;
-    sticky: boolean;
-}) => string;
-export declare const getHeaderFooterCopyClasses: ({ mode }: {
-    mode: ThemeMode;
-}) => string;
-/**
- * Common classes for sticky header/footer with optional blur effect.
- */
-export declare const getStickyBlurClasses: ({ blurEffect, }: {
-    blurEffect?: BlurEffect;
-}) => string;

package/dist/common/utilities.js

@@ -1,48 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.3.7
-  © 2026 gizmette.com
-*/
-
-import clsx from "clsx";
-import { BlurEffects } from "../DataGridConstants/DataGridConstants.js";
-
-;// CONCATENATED MODULE: external "clsx"
-
-;// CONCATENATED MODULE: external "../DataGridConstants/DataGridConstants.js"
-
-;// CONCATENATED MODULE: ./src/common/utilities.ts
-
-
-const getHeaderFooterBackgroundClasses = ({ mode, hasBlur, sticky })=>{
-    return clsx({
-        // Semi-transparent backgrounds for blur effect.
-        "bg-surface-darkest/50": hasBlur && sticky && (mode === "dark" || mode === "system"),
-        "bg-surface-light/50": hasBlur && sticky && (mode === "light" || mode === "alt-system"),
-        "dark:bg-surface-light/50": hasBlur && sticky && mode === "system",
-        "dark:bg-surface-darkest/50": hasBlur && sticky && mode === "alt-system",
-        // Solid backgrounds when no blur effect.
-        "bg-surface-darkest": !hasBlur && (mode === "dark" || mode === "system"),
-        "bg-surface-light": !hasBlur && (mode === "light" || mode === "alt-system"),
-        "dark:bg-surface-light": !hasBlur && mode === "system",
-        "dark:bg-surface-darkest": !hasBlur && mode === "alt-system"
-    });
-};
-const getHeaderFooterCopyClasses = ({ mode })=>{
-    return clsx({
-        "text-copy-light": mode === "dark",
-        "text-copy-dark": mode === "light",
-        "text-copy-light dark:text-copy-dark": mode === "system",
-        "text-copy-dark dark:text-copy-light": mode === "alt-system"
-    });
-};
-/**
- * Common classes for sticky header/footer with optional blur effect.
- */ const getStickyBlurClasses = ({ blurEffect })=>{
-    return clsx({
-        "backdrop-blur-sm": blurEffect === BlurEffects.SMALL,
-        "backdrop-blur-md": blurEffect === BlurEffects.MEDIUM,
-        "backdrop-blur-lg": blurEffect === BlurEffects.LARGE
-    });
-};
-
-export { getHeaderFooterBackgroundClasses, getHeaderFooterCopyClasses, getStickyBlurClasses };