@versini/ui-datagrid 0.8.0 → 0.8.2

package/dist/DataGridCellSort/ButtonSort.js

@@ -1,67 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.8.0
-  © 2026 gizmette.com
-*/
-
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { BlurEffects } from "../DataGridConstants/index.js";
-import { getTextColorClassesForHeaderFooter } from "../utilities/classes.js";
-
-;// CONCATENATED MODULE: external "react/jsx-runtime"
-
-;// CONCATENATED MODULE: external "clsx"
-
-;// CONCATENATED MODULE: external "../DataGridConstants/index.js"
-
-;// CONCATENATED MODULE: external "../utilities/classes.js"
-
-;// CONCATENATED MODULE: ./src/DataGridCellSort/ButtonSort.tsx
-
-
-
-
-const getActiveIndicatorClasses = (active)=>{
-    if (!active) {
-        return "";
-    }
-    return clsx("relative", "focus-within:static", "focus-within:after:border-transparent", "after:absolute", "after:content-['']", "after:border-b-2", "after:-bottom-1", "after:left-0", "after:right-0", // the small border at the bottom of the button when it is active (sorted)
-    "after:border-table-light");
-};
-const ButtonSort = ({ active = false, className, onClick, labelRight, children, blurEffect, mode })=>{
-    const hasBlur = Boolean(blurEffect && blurEffect !== BlurEffects.NONE);
-    const buttonClasses = clsx(// Base styles
-    "flex items-center", // Size - small
-    "h-6 px-1 sm:px-2", // Font
-    "text-sm font-bold", // Radius - small
-    "rounded-xs", // Text color
-    getTextColorClassesForHeaderFooter({
-        mode,
-        hasBlur
-    }), // Focus styles
-    "focus:outline", "focus:outline-2", "focus:outline-offset-2", "focus:outline-focus-medium", // Hover styles
-    "hover:text-copy-light-hover", "hover:bg-action-darker-hover", // Active styles
-    "active:text-copy-medium-active", "active:bg-action-dark-active", // Custom className
-    className);
-    const wrapperClasses = getActiveIndicatorClasses(active);
-    return /*#__PURE__*/ jsx("div", {
-        className: wrapperClasses,
-        children: /*#__PURE__*/ jsxs("button", {
-            className: buttonClasses,
-            type: "button",
-            onClick: onClick,
-            children: [
-                /*#__PURE__*/ jsx("span", {
-                    className: "text-copy-light",
-                    children: children
-                }),
-                labelRight && /*#__PURE__*/ jsx("span", {
-                    className: "pl-2",
-                    children: labelRight
-                })
-            ]
-        })
-    });
-};
-
-export { ButtonSort };

package/dist/DataGridCellSort/DataGridCellSort.js

@@ -1,111 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.8.0
-  © 2026 gizmette.com
-*/
-
-import { jsx, jsxs } from "react/jsx-runtime";
-import { IconSort, IconSortDown, IconSortUp } from "@versini/ui-icons";
-import clsx from "clsx";
-import { DataGridContext } from "../DataGrid/DataGridContext.js";
-import { getCellClasses } from "../utilities/classes.js";
-import { ButtonSort } from "./ButtonSort.js";
-
-;// CONCATENATED MODULE: external "react/jsx-runtime"
-
-;// CONCATENATED MODULE: external "@versini/ui-icons"
-
-;// CONCATENATED MODULE: external "clsx"
-
-;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
-
-;// CONCATENATED MODULE: external "../utilities/classes.js"
-
-;// CONCATENATED MODULE: external "./ButtonSort.js"
-
-;// CONCATENATED MODULE: ./src/DataGridCellSort/DataGridCellSort.tsx
-
-
-
-
-
-
-/* =============================================================================
- * DataGridCellSort
- * ========================================================================== */ const DataGridCellSort = ({ className, children, cellId, onSort, sortDirection, sortedCell, slotLeft, slotRight, buttonClassName, align, ...rest })=>{
-    const isSorted = sortedCell === cellId;
-    const handleSort = ()=>{
-        if (onSort) {
-            // Convert false to undefined for the callback.
-            const currentDirection = isSorted && sortDirection ? sortDirection : undefined;
-            onSort(cellId, currentDirection);
-        }
-    };
-    const getSortIcon = ()=>{
-        if (isSorted && sortDirection === "asc") {
-            return /*#__PURE__*/ jsx(IconSortUp, {
-                size: "size-4",
-                monotone: true
-            });
-        }
-        if (isSorted && sortDirection === "desc") {
-            return /*#__PURE__*/ jsx(IconSortDown, {
-                size: "size-4",
-                monotone: true
-            });
-        }
-        return /*#__PURE__*/ jsx(IconSort, {
-            size: "size-4",
-            monotone: true
-        });
-    };
-    const getAriaSort = ()=>{
-        if (isSorted && sortDirection === "asc") {
-            return "ascending";
-        }
-        if (isSorted && sortDirection === "desc") {
-            return "descending";
-        }
-        return "other";
-    };
-    return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
-        children: ({ mode, compact, cellWrapper, blurEffect })=>{
-            const mainClasses = getCellClasses({
-                cellWrapper,
-                className,
-                mode,
-                compact,
-                align
-            });
-            // Flex container for alignment of button within the cell.
-            const contentClasses = clsx("flex", {
-                "justify-start": align === "left" || !align,
-                "justify-center": align === "center",
-                "justify-end": align === "right"
-            });
-            return /*#__PURE__*/ jsx("div", {
-                className: mainClasses,
-                role: "columnheader",
-                "aria-sort": getAriaSort(),
-                ...rest,
-                children: /*#__PURE__*/ jsxs("div", {
-                    className: contentClasses,
-                    children: [
-                        slotLeft,
-                        /*#__PURE__*/ jsx(ButtonSort, {
-                            mode: mode,
-                            blurEffect: blurEffect,
-                            active: isSorted,
-                            className: buttonClassName,
-                            onClick: handleSort,
-                            labelRight: children,
-                            children: getSortIcon()
-                        }),
-                        slotRight
-                    ]
-                })
-            });
-        }
-    });
-};
-
-export { DataGridCellSort };

package/dist/DataGridFooter/DataGridFooter.js

@@ -1,98 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.8.0
-  © 2026 gizmette.com
-*/
-
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef } from "react";
-import { DataGridContext } from "../DataGrid/DataGridContext.js";
-import { CellWrapper } from "../DataGridConstants/DataGridConstants.js";
-import { getFooterClasses } from "../utilities/classes.js";
-
-;// CONCATENATED MODULE: external "react/jsx-runtime"
-
-;// CONCATENATED MODULE: external "react"
-
-;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
-
-;// CONCATENATED MODULE: external "../DataGridConstants/DataGridConstants.js"
-
-;// CONCATENATED MODULE: external "../utilities/classes.js"
-
-;// CONCATENATED MODULE: ./src/DataGridFooter/DataGridFooter.tsx
-
-
-
-
-
-/* =============================================================================
- * DataGridFooter
- * ========================================================================== */ const DataGridFooter = ({ className, children, ...rest })=>{
-    return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
-        children: (ctx)=>/*#__PURE__*/ jsx(DataGridFooterInner, {
-                className: className,
-                ctx: ctx,
-                ...rest,
-                children: children
-            })
-    });
-};
-DataGridFooter.displayName = "DataGridFooter";
-/**
- * Inner component to handle the useEffect for registering footer. Separated to
- * avoid hooks inside Consumer render prop.
- */ const DataGridFooterInner = ({ className, ctx, children, ...rest })=>{
-    const footerRef = useRef(null);
-    /**
-	 * Register this footer with the parent DataGrid on mount. This enables sticky
-	 * footer behavior regardless of nesting depth.
-	 */ useEffect(()=>{
-        ctx.registerFooter?.();
-        return ()=>{
-            ctx.unregisterFooter?.();
-        };
-    }, [
-        ctx.registerFooter,
-        ctx.unregisterFooter
-    ]);
-    /**
-	 * Measure and report footer height for dynamic padding calculation. Uses
-	 * ResizeObserver to handle dynamic content changes.
-	 */ useLayoutEffect(()=>{
-        const element = footerRef.current;
-        if (!element || !ctx.stickyFooter || !ctx.setFooterHeight) {
-            return;
-        }
-        const observer = new ResizeObserver((entries)=>{
-            const height = entries[0]?.borderBoxSize?.[0]?.blockSize;
-            if (height !== undefined) {
-                ctx.setFooterHeight?.(height);
-            }
-        });
-        observer.observe(element);
-        return ()=>observer.disconnect();
-    }, [
-        ctx.stickyFooter,
-        ctx.setFooterHeight
-    ]);
-    return /*#__PURE__*/ jsx(DataGridContext.Provider, {
-        value: {
-            ...ctx,
-            cellWrapper: CellWrapper.FOOTER
-        },
-        children: /*#__PURE__*/ jsx("div", {
-            ref: footerRef,
-            role: "rowgroup",
-            className: getFooterClasses({
-                className,
-                stickyFooter: ctx.stickyFooter,
-                mode: ctx.mode,
-                blurEffect: ctx.blurEffect
-            }),
-            ...rest,
-            children: children
-        })
-    });
-};
-
-export { DataGridFooter };

package/dist/DataGridHeader/DataGridHeader.js

@@ -1,129 +0,0 @@
-/*!
-  @versini/ui-datagrid v0.8.0
-  © 2026 gizmette.com
-*/
-
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useLayoutEffect, useRef } from "react";
-import { DataGridContext } from "../DataGrid/DataGridContext.js";
-import { CellWrapper } from "../DataGridConstants/DataGridConstants.js";
-import { getCaptionClasses, getHeaderClasses } from "../utilities/classes.js";
-
-;// CONCATENATED MODULE: external "react/jsx-runtime"
-
-;// CONCATENATED MODULE: external "react"
-
-;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
-
-;// CONCATENATED MODULE: external "../DataGridConstants/DataGridConstants.js"
-
-;// CONCATENATED MODULE: external "../utilities/classes.js"
-
-;// CONCATENATED MODULE: ./src/DataGridHeader/DataGridHeader.tsx
-
-
-
-
-
-/* =============================================================================
- * DataGridHeader
- * ========================================================================== */ const DataGridHeader = ({ caption, captionClassName, className, children, ...rest })=>{
-    const captionId = useId();
-    return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
-        children: (ctx)=>/*#__PURE__*/ jsx(DataGridHeaderInner, {
-                caption: caption,
-                captionClassName: captionClassName,
-                captionId: captionId,
-                className: className,
-                ctx: ctx,
-                ...rest,
-                children: children
-            })
-    });
-};
-DataGridHeader.displayName = "DataGridHeader";
-/**
- * Inner component to handle the useEffect for registering captionId and header.
- * Separated to avoid hooks inside Consumer render prop.
- */ const DataGridHeaderInner = ({ caption, captionClassName, captionId, className, ctx, children, ...rest })=>{
-    const headerRef = useRef(null);
-    /**
-	 * Register this header with the parent DataGrid on mount. This enables sticky
-	 * header behavior regardless of nesting depth.
-	 */ useEffect(()=>{
-        ctx.registerHeader?.();
-        return ()=>{
-            ctx.unregisterHeader?.();
-        };
-    }, [
-        ctx.registerHeader,
-        ctx.unregisterHeader
-    ]);
-    // Register the caption ID with the parent DataGrid for aria-labelledby.
-    useEffect(()=>{
-        if (caption && ctx.setCaptionId) {
-            ctx.setCaptionId(captionId);
-        }
-        return ()=>{
-            if (ctx.setCaptionId) {
-                ctx.setCaptionId(undefined);
-            }
-        };
-    }, [
-        caption,
-        captionId,
-        ctx.setCaptionId
-    ]);
-    /**
-	 * Measure and report header height for dynamic padding calculation. Uses
-	 * ResizeObserver to handle dynamic content changes (text wrapping, etc.).
-	 */ useLayoutEffect(()=>{
-        const element = headerRef.current;
-        if (!element || !ctx.stickyHeader || !ctx.setHeaderHeight) {
-            return;
-        }
-        const observer = new ResizeObserver((entries)=>{
-            const height = entries[0]?.borderBoxSize?.[0]?.blockSize;
-            if (height !== undefined) {
-                ctx.setHeaderHeight?.(height);
-            }
-        });
-        observer.observe(element);
-        return ()=>observer.disconnect();
-    }, [
-        ctx.stickyHeader,
-        ctx.setHeaderHeight
-    ]);
-    return /*#__PURE__*/ jsx(DataGridContext.Provider, {
-        value: {
-            ...ctx,
-            cellWrapper: CellWrapper.HEADER
-        },
-        children: /*#__PURE__*/ jsxs("div", {
-            ref: headerRef,
-            role: "rowgroup",
-            className: getHeaderClasses({
-                className,
-                stickyHeader: ctx.stickyHeader,
-                mode: ctx.mode,
-                blurEffect: ctx.blurEffect
-            }),
-            ...rest,
-            children: [
-                caption && /*#__PURE__*/ jsx("div", {
-                    id: captionId,
-                    className: getCaptionClasses({
-                        captionClassName,
-                        mode: ctx.mode,
-                        hasBlur: Boolean(ctx.blurEffect && ctx.blurEffect !== "none"),
-                        stickyHeader: Boolean(ctx.stickyHeader)
-                    }),
-                    children: caption
-                }),
-                children
-            ]
-        })
-    });
-};
-
-export { DataGridHeader };