@xcelsior/ui-spreadsheets 1.1.14 → 1.1.16

package/src/components/ActiveFiltersDisplay.tsx

@@ -0,0 +1,257 @@
+import type React from 'react';
+import { HiX } from 'react-icons/hi';
+import { cn } from '../utils';
+import type {
+    SpreadsheetColumn,
+    SpreadsheetColumnFilter,
+    TextFilterOperator,
+    NumberFilterOperator,
+    DateFilterOperator,
+} from '../types';
+
+/** Text filter operator labels */
+const TEXT_OPERATOR_LABELS: Record<TextFilterOperator, string> = {
+    contains: 'contains',
+    notContains: 'does not contain',
+    equals: 'equals',
+    notEquals: 'does not equal',
+    startsWith: 'starts with',
+    endsWith: 'ends with',
+    isEmpty: 'is empty',
+    isNotEmpty: 'is not empty',
+};
+
+/** Number filter operator labels */
+const NUMBER_OPERATOR_LABELS: Record<NumberFilterOperator, string> = {
+    equals: '=',
+    notEquals: '≠',
+    greaterThan: '>',
+    greaterThanOrEqual: '≥',
+    lessThan: '<',
+    lessThanOrEqual: '≤',
+    between: 'between',
+    isEmpty: 'is empty',
+    isNotEmpty: 'is not empty',
+};
+
+/** Date filter operator labels */
+const DATE_OPERATOR_LABELS: Record<DateFilterOperator, string> = {
+    equals: 'is',
+    notEquals: 'is not',
+    before: 'before',
+    after: 'after',
+    between: 'between',
+    today: 'is today',
+    yesterday: 'is yesterday',
+    thisWeek: 'is this week',
+    lastWeek: 'is last week',
+    thisMonth: 'is this month',
+    lastMonth: 'is last month',
+    thisYear: 'is this year',
+    isEmpty: 'is empty',
+    isNotEmpty: 'is not empty',
+};
+
+export interface ActiveFiltersDisplayProps {
+    /** Current filters */
+    filters: Record<string, SpreadsheetColumnFilter>;
+    /** Column definitions */
+    columns: SpreadsheetColumn[];
+    /** Callback to clear individual filter */
+    onClearFilter: (columnId: string) => void;
+    /** Callback to clear all filters */
+    onClearAllFilters: () => void;
+    /** Custom className */
+    className?: string;
+}
+
+/**
+ * Format a filter into a human-readable string
+ */
+function formatFilter(filter: SpreadsheetColumnFilter, _column: SpreadsheetColumn): string {
+    const parts: string[] = [];
+
+    // Text condition
+    if (filter.textCondition) {
+        const { operator, value } = filter.textCondition;
+        const label = TEXT_OPERATOR_LABELS[operator];
+        if (['isEmpty', 'isNotEmpty'].includes(operator)) {
+            parts.push(label);
+        } else if (value) {
+            parts.push(`${label} "${value}"`);
+        }
+    }
+
+    // Number condition
+    if (filter.numberCondition) {
+        const { operator, value, valueTo } = filter.numberCondition;
+        const label = NUMBER_OPERATOR_LABELS[operator];
+        if (['isEmpty', 'isNotEmpty'].includes(operator)) {
+            parts.push(label);
+        } else if (operator === 'between' && value !== undefined && valueTo !== undefined) {
+            parts.push(`${label} ${value} and ${valueTo}`);
+        } else if (value !== undefined) {
+            parts.push(`${label} ${value}`);
+        }
+    }
+
+    // Date condition
+    if (filter.dateCondition) {
+        const { operator, value, valueTo } = filter.dateCondition;
+        const label = DATE_OPERATOR_LABELS[operator];
+        const noValueOperators = [
+            'isEmpty',
+            'isNotEmpty',
+            'today',
+            'yesterday',
+            'thisWeek',
+            'lastWeek',
+            'thisMonth',
+            'lastMonth',
+            'thisYear',
+        ];
+        if (noValueOperators.includes(operator)) {
+            parts.push(label);
+        } else if (operator === 'between' && value && valueTo) {
+            parts.push(`${label} ${formatDate(value)} and ${formatDate(valueTo)}`);
+        } else if (value) {
+            parts.push(`${label} ${formatDate(value)}`);
+        }
+    }
+
+    // Legacy filters
+    if (filter.text) {
+        parts.push(`contains "${filter.text}"`);
+    }
+
+    if (filter.selectedValues && filter.selectedValues.length > 0) {
+        if (filter.selectedValues.length === 1) {
+            parts.push(`is "${filter.selectedValues[0]}"`);
+        } else {
+            parts.push(`is one of ${filter.selectedValues.length} values`);
+        }
+    }
+
+    if (filter.min !== undefined && filter.max !== undefined) {
+        parts.push(`between ${filter.min} and ${filter.max}`);
+    } else if (filter.min !== undefined) {
+        parts.push(`≥ ${filter.min}`);
+    } else if (filter.max !== undefined) {
+        parts.push(`≤ ${filter.max}`);
+    }
+
+    if (filter.includeBlanks) {
+        parts.push('includes blanks');
+    }
+
+    if (filter.excludeBlanks) {
+        parts.push('excludes blanks');
+    }
+
+    return parts.join(', ') || 'filtered';
+}
+
+/**
+ * Format a date string for display
+ */
+function formatDate(dateStr: string): string {
+    try {
+        const date = new Date(dateStr);
+        return date.toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+        });
+    } catch {
+        return dateStr;
+    }
+}
+
+/**
+ * ActiveFiltersDisplay component - Shows active filters as chips with clear buttons
+ */
+export const ActiveFiltersDisplay: React.FC<ActiveFiltersDisplayProps> = ({
+    filters,
+    columns,
+    onClearFilter,
+    onClearAllFilters,
+    className,
+}) => {
+    const activeFilters = Object.entries(filters).filter(([_, filter]) => {
+        // Check if filter has any active conditions
+        return (
+            filter.textCondition ||
+            filter.numberCondition ||
+            filter.dateCondition ||
+            filter.text ||
+            (filter.selectedValues && filter.selectedValues.length > 0) ||
+            filter.min !== undefined ||
+            filter.max !== undefined ||
+            filter.includeBlanks ||
+            filter.excludeBlanks
+        );
+    });
+
+    if (activeFilters.length === 0) {
+        return null;
+    }
+
+    const getColumnLabel = (columnId: string): string => {
+        const column = columns.find((c) => c.id === columnId);
+        return column?.label || columnId;
+    };
+
+    const getColumn = (columnId: string): SpreadsheetColumn | undefined => {
+        return columns.find((c) => c.id === columnId);
+    };
+
+    return (
+        <div
+            className={cn(
+                'flex flex-wrap items-center gap-2 px-4 py-2 bg-amber-50 border-b border-amber-200',
+                className
+            )}
+        >
+            <span className="text-xs font-medium text-amber-700 mr-1">Active filters:</span>
+
+            {activeFilters.map(([columnId, filter]) => {
+                const column = getColumn(columnId);
+                const filterDescription = column
+                    ? formatFilter(filter, column)
+                    : formatFilter(filter, { id: columnId, label: columnId });
+
+                return (
+                    <div
+                        key={columnId}
+                        className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-white border border-amber-300 rounded-full shadow-sm"
+                    >
+                        <span className="text-xs font-medium text-gray-700">
+                            {getColumnLabel(columnId)}
+                        </span>
+                        <span className="text-xs text-gray-500">{filterDescription}</span>
+                        <button
+                            type="button"
+                            onClick={() => onClearFilter(columnId)}
+                            className="p-0.5 hover:bg-amber-100 rounded-full transition-colors"
+                            title={`Clear filter for ${getColumnLabel(columnId)}`}
+                        >
+                            <HiX className="h-3 w-3 text-amber-600 hover:text-amber-800" />
+                        </button>
+                    </div>
+                );
+            })}
+
+            {activeFilters.length > 1 && (
+                <button
+                    type="button"
+                    onClick={onClearAllFilters}
+                    className="text-xs text-amber-700 hover:text-amber-900 underline ml-2 transition-colors"
+                >
+                    Clear all
+                </button>
+            )}
+        </div>
+    );
+};
+
+ActiveFiltersDisplay.displayName = 'ActiveFiltersDisplay';

package/src/components/Spreadsheet.tsx

@@ -226,6 +226,9 @@ export function Spreadsheet<T extends Record<string, any>>({
     // Modal state
     const [showSettingsModal, setShowSettingsModal] = useState(false);
 
+    // Filters panel state
+    const [showFiltersPanel, setShowFiltersPanel] = useState(false);
+
     // Undo/Redo hook
     const {
         canUndo,
@@ -283,6 +286,29 @@ export function Spreadsheet<T extends Record<string, any>>({
         [controlledPageSize, controlledCurrentPage, onPageChange]
     );
 
+    // Reset pagination to page 1 when filters change
+    const resetPaginationToFirstPage = useCallback(() => {
+        if (controlledCurrentPage === undefined) {
+            setInternalCurrentPage(1);
+        }
+        onPageChange?.(1, pageSize);
+    }, [controlledCurrentPage, onPageChange, pageSize]);
+
+    // Wrapper for handleFilterChange that resets pagination
+    const handleFilterChangeWithReset = useCallback(
+        (columnId: string, filter: Parameters<typeof handleFilterChange>[1]) => {
+            handleFilterChange(columnId, filter);
+            resetPaginationToFirstPage();
+        },
+        [handleFilterChange, resetPaginationToFirstPage]
+    );
+
+    // Wrapper for clearAllFilters that resets pagination
+    const clearAllFiltersWithReset = useCallback(() => {
+        clearAllFilters();
+        resetPaginationToFirstPage();
+    }, [clearAllFilters, resetPaginationToFirstPage]);
+
     // Sync sortConfig to spreadsheetSettings when sorting changes
     useEffect(() => {
         setSpreadsheetSettings((prev) => ({
@@ -825,7 +851,12 @@ export function Spreadsheet<T extends Record<string, any>>({
                     saveStatus={saveStatus}
                     autoSave={spreadsheetSettings.autoSave}
                     hasActiveFilters={hasActiveFilters}
-                    onClearFilters={clearAllFilters}
+                    onClearFilters={clearAllFiltersWithReset}
+                    filters={filters}
+                    columns={columns}
+                    onClearFilter={(columnId) => handleFilterChangeWithReset(columnId, undefined)}
+                    showFiltersPanel={showFiltersPanel}
+                    onToggleFiltersPanel={() => setShowFiltersPanel(!showFiltersPanel)}
                     onZoomIn={() => setZoom((z) => Math.min(z + 10, 200))}
                     onZoomOut={() => setZoom((z) => Math.max(z - 10, 50))}
                     onZoomReset={() => setZoom(100)}
@@ -869,7 +900,12 @@ export function Spreadsheet<T extends Record<string, any>>({
                                         if (item.type === 'pinned-column') {
                                             const col = columns.find((c) => c.id === item.columnId);
                                             const isPinnedLeft = item.pinSide === 'left';
-                                            const pinnedWidth = Math.max(col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH);
+                                            const pinnedWidth = Math.max(
+                                                col?.minWidth ||
+                                                    col?.width ||
+                                                    MIN_PINNED_COLUMN_WIDTH,
+                                                MIN_PINNED_COLUMN_WIDTH
+                                            );
                                             return (
                                                 <th
                                                     key={`pinned-group-${item.columnId}`}
@@ -888,8 +924,6 @@ export function Spreadsheet<T extends Record<string, any>>({
                                                             ? `${getColumnRightOffset(item.columnId)}px`
                                                             : undefined,
                                                         minWidth: pinnedWidth,
-                                                        width: pinnedWidth,
-                                                        maxWidth: pinnedWidth,
                                                     }}
                                                 />
                                             );
@@ -1002,7 +1036,7 @@ export function Spreadsheet<T extends Record<string, any>>({
                                                     column={column}
                                                     filter={filters[column.id]}
                                                     onFilterChange={(filter) =>
-                                                        handleFilterChange(column.id, filter)
+                                                        handleFilterChangeWithReset(column.id, filter)
                                                     }
                                                     onClose={() => setActiveFilterColumn(null)}
                                                 />

package/src/components/SpreadsheetCell.tsx

@@ -277,8 +277,14 @@ const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
                 // Pinned columns must have a fixed width so sticky offsets stay correct.
                 // Enforce MIN_PINNED_COLUMN_WIDTH so header actions always fit.
                 ...(isPinned && {
-                    width: Math.max(column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH),
-                    maxWidth: Math.max(column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH),
+                    width: Math.max(
+                        column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH,
+                        MIN_PINNED_COLUMN_WIDTH
+                    ),
+                    maxWidth: Math.max(
+                        column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH,
+                        MIN_PINNED_COLUMN_WIDTH
+                    ),
                 }),
                 ...positionStyles,
                 ...selectionBorderStyles,

package/src/components/SpreadsheetHeader.tsx

@@ -75,8 +75,14 @@ export const SpreadsheetHeader: React.FC<
                 // Pinned columns must have a fixed width so sticky offsets stay correct.
                 // Enforce MIN_PINNED_COLUMN_WIDTH so header actions (pin/filter/highlight) always fit.
                 ...(isPinned && {
-                    width: Math.max(column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH),
-                    maxWidth: Math.max(column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH),
+                    width: Math.max(
+                        column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH,
+                        MIN_PINNED_COLUMN_WIDTH
+                    ),
+                    maxWidth: Math.max(
+                        column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH,
+                        MIN_PINNED_COLUMN_WIDTH
+                    ),
                 }),
                 top: 0, // For sticky header
                 ...positionStyles,