react-kd-grid 5.0.2 → 5.0.3

package/dist/components/SearchToolbar.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode, ChangeEvent } from "react";
-import type { Density, BulkActionOption, SavedFilter, ExportFormat } from "../types";
+import { ChangeEvent, ReactNode } from "react";
+import type { BulkActionOption, Density, ExportFormat, SavedFilter } from "../types";
 interface ColumnVisibility {
     [columnKey: string]: boolean;
 }
@@ -59,6 +59,10 @@ interface SearchToolbarProps {
     customLeftContent?: ReactNode;
     customRightContent?: ReactNode;
 }
+/**
+ * Optimized SearchToolbar using React.memo to prevent unnecessary re-renders
+ * as users type in the global search or modify filters.
+ */
 export declare const SearchToolbar: import("react").MemoExoticComponent<{
     ({ globalFilter, filteredDataLength, totalDataLength, selectedRowsCount, selectedRows, showExport, showColumnToggle, showBulkActions, columns, columnVisibility, columnFilters, bulkActions, exportOptions, onGlobalFilterChange, onClearFilters, onColumnVisibilityChange, onColumnFilter, onResetColumns, columnOrder, onColumnOrderChange, pinnedColumns, onScrollToColumn, density, onDensityChange, showDensityControl, customLeftContent, customRightContent, }: SearchToolbarProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/components/toolbar/BulkActionPopover.d.ts

@@ -0,0 +1,17 @@
+import { BulkActionOption } from "../../types";
+interface BulkActionPopoverProps {
+    isOpen: boolean;
+    anchorEl: HTMLElement | null;
+    onClose: () => void;
+    bulkActions: BulkActionOption[];
+    selectedRowsCount: number;
+    onBulkAction: (action: BulkActionOption) => void;
+}
+/**
+ * BulkActionPopover
+ *
+ * Displays a menu of actions that can be globally applied to all currently selected grid rows.
+ * Features customizable icons and labels per action.
+ */
+export declare const BulkActionPopover: ({ isOpen, anchorEl, onClose, bulkActions, selectedRowsCount, onBulkAction, }: BulkActionPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/toolbar/ColumnVisibilityPopover.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+interface ColumnDefinition {
+    key: string;
+    header: string;
+}
+interface ColumnVisibilityPopoverProps {
+    isOpen: boolean;
+    anchorEl: HTMLElement | null;
+    onClose: () => void;
+    filteredColumns: ColumnDefinition[];
+    columnVisibility: Record<string, boolean>;
+    onColumnToggle: (columnKey: string) => void;
+    columnSearch: string;
+    onColumnSearchChange: (value: string) => void;
+    onResetColumns: () => void;
+    onScrollToColumn?: (columnKey: string) => void;
+    onColumnVisibilityChange?: (columnKey: string, visible: boolean) => void;
+    draggingKey: string | null;
+    dragOver: {
+        key: string;
+        position: "before" | "after";
+    } | null;
+    handleDragStart: (columnKey: string, e: React.DragEvent) => void;
+    handleDragOver: (targetKey: string, e: React.DragEvent) => void;
+    handleDrop: (targetKey: string) => void;
+    handleDragEnd: () => void;
+}
+/**
+ * ColumnVisibilityPopover
+ *
+ * Provides the UI for toggling column visibility and reordering columns via drag-and-drop.
+ * Includes column search and reset functionality.
+ */
+export declare const ColumnVisibilityPopover: ({ isOpen, anchorEl, onClose, filteredColumns, columnVisibility, onColumnToggle, columnSearch, onColumnSearchChange, onResetColumns, onScrollToColumn, onColumnVisibilityChange, draggingKey, dragOver, handleDragStart, handleDragOver, handleDrop, handleDragEnd, }: ColumnVisibilityPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/toolbar/ExportPopover.d.ts

@@ -0,0 +1,18 @@
+import { ExportFormat } from "../../types";
+interface ExportPopoverProps {
+    isOpen: boolean;
+    anchorEl: HTMLElement | null;
+    onClose: () => void;
+    exportFormats: ExportFormat[];
+    filteredDataLength: number;
+    selectedRowsCount: number;
+    onExport: (format: ExportFormat, exportSelected: boolean) => void;
+}
+/**
+ * ExportPopover
+ *
+ * Provides the UI for exporting grid data in various formats (CSV, JSON, Excel).
+ * Allows exporting either all filtered data or only the currently selected rows.
+ */
+export declare const ExportPopover: ({ isOpen, anchorEl, onClose, exportFormats, filteredDataLength, selectedRowsCount, onExport, }: ExportPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/toolbar/FilterPopover.d.ts

@@ -0,0 +1,29 @@
+interface ColumnDefinition {
+    key: string;
+    header: string;
+    visible?: boolean;
+    filterOptions?: Array<{
+        label: string;
+        value: string | number;
+    }>;
+    filterType?: "text" | "select" | "multiselect";
+    filterable?: any;
+}
+interface FilterPopoverProps {
+    isOpen: boolean;
+    anchorEl: HTMLElement | null;
+    onClose: () => void;
+    onClearFilters?: () => void;
+    columns: ColumnDefinition[];
+    columnFilters: Record<string, any>;
+    onColumnFilter?: (columnKey: string, filter: any) => void;
+    hasFilterableColumns: boolean;
+}
+/**
+ * FilterPopover
+ *
+ * Provides the UI for managing column-specific filters.
+ * Includes a search/select interface for each filterable column and a clear all action.
+ */
+export declare const FilterPopover: ({ isOpen, anchorEl, onClose, onClearFilters, columns, columnFilters, onColumnFilter, hasFilterableColumns, }: FilterPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/toolbar/SettingsPopover.d.ts

@@ -0,0 +1,17 @@
+import { Density } from "../../types";
+interface SettingsPopoverProps {
+    isOpen: boolean;
+    anchorEl: HTMLElement | null;
+    onClose: () => void;
+    density: Density;
+    onDensityChange?: (density: Density) => void;
+    showDensityControl?: boolean;
+}
+/**
+ * SettingsPopover
+ *
+ * Provides a menu for general grid configurations.
+ * Currently supports Row Density selection and is easily extensible for future settings.
+ */
+export declare const SettingsPopover: ({ isOpen, anchorEl, onClose, density, onDensityChange, showDensityControl, }: SettingsPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/Button.d.ts

@@ -0,0 +1,11 @@
+import { ButtonHTMLAttributes } from "react";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
+    size?: "sm" | "md" | "lg";
+    isLoading?: boolean;
+}
+/**
+ * Enterprise-grade Button component with built-in loading states and variant styling.
+ */
+export declare const Button: ({ children, variant, size, isLoading, className, disabled, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/Checkbox.d.ts

@@ -0,0 +1,9 @@
+import { InputHTMLAttributes } from "react";
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: string;
+}
+/**
+ * Enterprise-grade Checkbox component for consistent styling.
+ */
+export declare const Checkbox: ({ label, className, id, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/TextField.d.ts

@@ -0,0 +1,12 @@
+import React, { InputHTMLAttributes } from "react";
+interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    icon?: React.ReactNode;
+}
+/**
+ * Enterprise-grade TextField component with support for labels, errors, and icons.
+ */
+export declare const TextField: ({ label, error, helperText, icon, className, id, ...props }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/constants/toolbar.d.ts

@@ -0,0 +1,17 @@
+import { ExportFormat, Density } from "../types";
+/**
+ * Mappings for Export formats to their respective icons.
+ */
+export declare const getExportIcon: (format: ExportFormat) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Mappings for Bulk Action IDs to their respective icons.
+ */
+export declare const getBulkActionIcon: (action: string) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Human-readable labels for export formats.
+ */
+export declare const getFormatLabel: (format: ExportFormat) => "CSV" | "JSON" | "Excel";
+/**
+ * Default density options for the grid.
+ */
+export declare const DENSITY_OPTIONS: Density[];

package/dist/core/GridBodyContainer.d.ts

@@ -0,0 +1,83 @@
+import React, { RefObject } from "react";
+import type { GridColumn, GridRow, SortConfig, ColumnFilterValue } from "../types";
+interface GridBodyContainerProps {
+    scrollRef: RefObject<HTMLDivElement>;
+    flatRows: any[];
+    columnsWithWidths: any[];
+    visibleColumns: any[];
+    totalWidth: number;
+    selectable: boolean;
+    dataToDisplay: any[];
+    pinnedAll: any[];
+    effectivePinnedColumns: Set<string>;
+    hvPadLeftMemo: number;
+    hvPadRightMemo: number;
+    resolvedHeaderHeight: number;
+    sortConfig: SortConfig;
+    columnFilters: Record<string, ColumnFilterValue | null>;
+    selectedRows: Set<string | number>;
+    data: any[];
+    handleSort: (key: string) => void;
+    setColumnFilter: (key: string, filter: ColumnFilterValue | null) => void;
+    handleSelectAll: (checked: boolean) => void;
+    handleColumnResize: (columnKey: string, width: number) => void;
+    handleColumnPin: (columnKey: string, pinned: boolean) => void;
+    addGroupKey: (key: string) => void;
+    removeGroupKey: (key: string) => void;
+    handleGroupBy: (columnKey: string) => void;
+    autosizeColumn: (columnKey: string) => void;
+    autosizeAllColumns: () => void;
+    resetColumns: () => void;
+    columnOrder: string[];
+    setColumnOrder: React.Dispatch<React.SetStateAction<string[]>>;
+    pagination: any;
+    minResizeWidth?: number;
+    effectiveVirtualized: boolean;
+    virtualizedRange: {
+        offsetY: number;
+        startIndex: number;
+        endIndex: number;
+    };
+    resolvedRowHeight: number;
+    visibleData: any[];
+    isRowSelectable?: (row: GridRow) => boolean;
+    handleRowSelect: (rowId: string | number, isSelected: boolean) => void;
+    rowStyle?: any;
+    globalFilter: string;
+    onContextMenu?: any;
+    onRowDoubleClick?: any;
+    onRowClick?: any;
+    onCellClick?: any;
+    onCellContextMenu?: any;
+    isCellFocused: (rowId: string | number, columnKey: string) => boolean;
+    isCellSelected: (rowId: string | number, columnKey: string) => boolean;
+    handleCellMouseDown: any;
+    handleCellMouseEnter: any;
+    contextMenuItems?: any;
+    getRowId?: any;
+    isEditing: (rowId: string | number, columnKey: string) => boolean;
+    startEdit: any;
+    commitEdit: any;
+    cancelEdit: any;
+    editingCell: any;
+    safeGetRowId: (r: any) => string | number;
+    toggleGroupExpansion: (groupKey: string) => void;
+    containerWidth: number;
+    groupConfig: any;
+    columns: GridColumn[];
+    renderGroupActions?: any;
+    groupFooterVariant: "chips" | "columns";
+    isValidLicense: boolean;
+    infiniteScroll: any;
+    sentinelRef: RefObject<HTMLDivElement>;
+    loading: boolean;
+    showLoader: boolean;
+    finishingLoader: boolean;
+    loaderTop: number;
+    noDataMessage?: string;
+    noDataRenderer?: any;
+    handleScroll: (e: React.UIEvent<HTMLDivElement>) => void;
+    cellSelectionEnabled: boolean;
+}
+export declare const GridBodyContainer: React.FC<GridBodyContainerProps>;
+export {};

package/dist/core/GridFooterContainer.d.ts

@@ -0,0 +1,23 @@
+import React, { RefObject } from "react";
+interface GridFooterContainerProps {
+    hasFooterAggregate: boolean;
+    footerScrollRef: RefObject<HTMLDivElement>;
+    forwardWheelToBody: (e: React.WheelEvent) => void;
+    totalWidth: number;
+    selectable: boolean;
+    resolvedRowHeight: number;
+    columnsWithWidths: any[];
+    flatRows: any[];
+    effectivePinnedColumns: Set<string>;
+    infiniteScroll: any;
+    paginationConfig: any;
+    isServerLoading: boolean;
+    selectedRowsCount: number;
+    data: any[];
+    filteredData: any[];
+    pagination: any;
+    handlePageChange: (page: number) => void;
+    handlePageSizeChange: (pageSize: number) => void;
+}
+export declare const GridFooterContainer: React.FC<GridFooterContainerProps>;
+export {};

package/dist/core/GridToolbarContainer.d.ts

@@ -0,0 +1,48 @@
+import React, { ChangeEvent } from "react";
+import type { GridColumn, ColumnFilterValue, Density } from "../types";
+interface GridToolbarContainerProps {
+    showToolbar: boolean;
+    filterable: boolean;
+    globalFilter: string;
+    filteredDataLength: number;
+    totalDataLength: number;
+    paginationMode?: "client" | "server";
+    selectedRowsCount: number;
+    showExport: boolean;
+    columns: GridColumn[];
+    columnFilters: Record<string, ColumnFilterValue | null>;
+    columnVisibility: Record<string, boolean>;
+    onResetColumns: () => void;
+    exportOptions: {
+        enabled: boolean;
+        formats: any[];
+        filename: string;
+        onExport: (format: any, exportSelected: boolean) => void;
+    };
+    toolbarLeft?: React.ReactNode;
+    toolbarRight?: React.ReactNode;
+    onGlobalFilterChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onClearFilters: () => void;
+    onColumnFilter: (columnKey: string, filter: ColumnFilterValue | null) => void;
+    onColumnVisibilityChange: (columnKey: string, visible: boolean) => void;
+    columnOrder: string[];
+    onColumnOrderChange: (order: string[]) => void;
+    pinnedColumns: Set<string>;
+    onScrollToColumn: (columnKey: string) => void;
+    density: Density;
+    onDensityChange: (density: Density) => void;
+    showDensityControl: boolean;
+    groupable: boolean;
+    groupBarVisibility: "auto" | "visible" | "hidden";
+    groupConfig: {
+        columnKeys: string[];
+        expanded: Set<string>;
+    };
+    removeGroupKey: (key: string) => void;
+    setGroupKeys: (keys: string[]) => void;
+    addGroupKey: (key: string) => void;
+    collapseAllGroups: () => void;
+    expandAllGroups: () => void;
+}
+export declare const GridToolbarContainer: React.FC<GridToolbarContainerProps>;
+export {};

package/dist/hooks/toolbar/useColumnDnD.d.ts

@@ -0,0 +1,28 @@
+interface Column {
+    key: string;
+    header: string;
+}
+interface UseColumnDnDProps {
+    columns: Column[];
+    columnOrder: string[];
+    pinnedColumns?: Set<string>;
+    onColumnOrderChange?: (order: string[]) => void;
+}
+/**
+ * useColumnDnD
+ *
+ * Encapsulates the drag-and-drop logic for reordering columns within the toolbar menu.
+ * Previously, this logic was mixed with the rendering and menu state in SearchToolbar.tsx.
+ */
+export declare function useColumnDnD({ columns, columnOrder, pinnedColumns, onColumnOrderChange, }: UseColumnDnDProps): {
+    draggingKey: string;
+    dragOver: {
+        key: string;
+        position: "before" | "after";
+    };
+    handleDragStart: (columnKey: string, e: React.DragEvent) => void;
+    handleDragOver: (targetKey: string, e: React.DragEvent) => void;
+    handleDrop: (targetKey: string) => void;
+    handleDragEnd: () => void;
+};
+export {};

package/dist/hooks/toolbar/useToolbarMenus.d.ts

@@ -0,0 +1,29 @@
+/**
+ * useToolbarMenus
+ *
+ * Manages the visibility of various popover menus in the grid toolbar.
+ * Includes logic to close menus when clicking outside and handle specific cases like MUI DatePickers.
+ */
+export declare function useToolbarMenus(): {
+    showExportMenu: boolean;
+    setShowExportMenu: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    showFilters: boolean;
+    setShowFilters: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    showBulkActionsMenu: boolean;
+    setShowBulkActionsMenu: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    showColumnMenu: boolean;
+    setShowColumnMenu: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    showSettingsMenu: boolean;
+    setShowSettingsMenu: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    exportMenuRef: import("react").MutableRefObject<HTMLDivElement>;
+    bulkActionsRef: import("react").MutableRefObject<HTMLDivElement>;
+    columnMenuRef: import("react").MutableRefObject<HTMLDivElement>;
+    filtersMenuRef: import("react").MutableRefObject<HTMLDivElement>;
+    settingsMenuRef: import("react").MutableRefObject<HTMLDivElement>;
+    exportAnchorRef: import("react").MutableRefObject<HTMLButtonElement>;
+    bulkActionsAnchorRef: import("react").MutableRefObject<HTMLButtonElement>;
+    columnAnchorRef: import("react").MutableRefObject<HTMLButtonElement>;
+    filtersAnchorRef: import("react").MutableRefObject<HTMLButtonElement>;
+    settingsAnchorRef: import("react").MutableRefObject<HTMLButtonElement>;
+    closeAllMenus: () => void;
+};

package/dist/hooks/useColumnState.d.ts

@@ -17,12 +17,18 @@ interface UseColumnStateProps {
     globalFilter: string;
     columnFilters: Record<string, ColumnFilterValue | null>;
     density: Density;
+    containerWidth: number;
+    selectable: boolean;
 }
 export interface UseColumnStateReturn {
     columnWidths: Record<string, number>;
     columnOrder: string[];
     pinnedColumns: Set<string>;
     columnVisibility: Record<string, boolean>;
+    columnsWithWidths: any[];
+    pinnedAll: any[];
+    unpinnedAll: any[];
+    effectivePinnedColumns: Set<string>;
     handleColumnResize: (columnKey: string, width: number) => void;
     handleColumnPin: (columnKey: string, pinned: boolean) => void;
     handleColumnVisibilityChange: (columnKey: string, visible: boolean) => void;
@@ -40,6 +46,7 @@ export interface UseColumnStateReturn {
  * - Autosize (canvas-based measureText, with heuristic fallback)
  * - Column config hydration from `initialColumnConfig` on mount
  * - Debounced `onColumnConfigChange` emission
+ * - Calculation of resolved columnsWithWidths including flex-grow
  */
-export declare const useColumnState: ({ columns, data, initialColumnConfig, onColumnConfigChange, setSortConfig, setGroupKeys, setDensity, setGlobalFilter, setColumnFilter, sortConfig, groupConfig, globalFilter, columnFilters, density, }: UseColumnStateProps) => UseColumnStateReturn;
+export declare const useColumnState: ({ columns, data, initialColumnConfig, onColumnConfigChange, setSortConfig, setGroupKeys, setDensity, setGlobalFilter, setColumnFilter, sortConfig, groupConfig, globalFilter, columnFilters, density, containerWidth, selectable, }: UseColumnStateProps) => UseColumnStateReturn;
 export {};

package/dist/hooks/useGridDataMaps.d.ts

@@ -0,0 +1,17 @@
+import { GridRow } from "../types";
+interface UseGridDataMapsProps {
+    dataToDisplay: any[];
+    columnsWithWidths: any[];
+    getRowId?: (row: GridRow) => string | number;
+}
+export declare const useGridDataMaps: ({ dataToDisplay, columnsWithWidths, getRowId, }: UseGridDataMapsProps) => {
+    colIndexByKey: Map<string, number>;
+    colByKey: Map<string, any>;
+    flatRows: any[];
+    rowIndexById: Map<string | number, number>;
+    rowById: Map<string | number, any>;
+    totalWidth: any;
+    columnKeys: any[];
+    hasFooterAggregate: boolean;
+};
+export {};

package/dist/hooks/useGridMethods.d.ts

@@ -0,0 +1,20 @@
+import { RefObject } from "react";
+interface UseGridMethodsProps {
+    scrollRef: RefObject<HTMLDivElement>;
+    rowIndexById: Map<string | number, number>;
+    colIndexByKey: Map<string, number>;
+    columnsWithWidths: any[];
+    resolvedRowHeight: number;
+    selectable: boolean;
+}
+/**
+ * useGridMethods
+ *
+ * Centralizes imperative grid operations like scrolling to specific rows or columns.
+ * This logic was previously duplicated in DataGrid.tsx and its sub-components.
+ */
+export declare function useGridMethods({ scrollRef, rowIndexById, colIndexByKey, columnsWithWidths, resolvedRowHeight, selectable, }: UseGridMethodsProps): {
+    scrollToRow: (rowId: string | number) => void;
+    scrollToColumn: (columnKey: string) => void;
+};
+export {};

package/dist/hooks/useHorizontalVirtualization.d.ts

@@ -0,0 +1,18 @@
+interface UseHorizontalVirtualizationProps {
+    columnsWithWidths: any[];
+    pinnedAll: any[];
+    unpinnedAll: any[];
+    effectivePinnedColumns: Set<string>;
+    hScrollLeft: number;
+    viewportWidth: number;
+    selectable: boolean;
+    enableHorizontalVirtualization: boolean;
+    horizontalVirtualizationThreshold: number;
+}
+export declare const useHorizontalVirtualization: ({ columnsWithWidths, pinnedAll, unpinnedAll, effectivePinnedColumns, hScrollLeft, viewportWidth, selectable, enableHorizontalVirtualization, horizontalVirtualizationThreshold, }: UseHorizontalVirtualizationProps) => {
+    needsHorizontalVirtualization: boolean;
+    visibleColumns: any[];
+    hvPadLeftMemo: number;
+    hvPadRightMemo: number;
+};
+export {};

package/dist/icons/index.d.ts

@@ -42,6 +42,7 @@ export declare const Search: (p: IconProps) => import("react/jsx-runtime").JSX.E
 export declare const Database: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
 export declare const FileText: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Table: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Columns: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Users: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
 export declare const LocateFixed: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Loader2: (p: IconProps) => import("react/jsx-runtime").JSX.Element;