@xcelsior/ui-spreadsheets 1.1.13 → 1.1.15

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

@@ -21,6 +21,7 @@ import {
     useSpreadsheetPinning,
     ROW_INDEX_COLUMN_WIDTH,
     ROW_INDEX_COLUMN_ID,
+    MIN_PINNED_COLUMN_WIDTH,
 } from '../hooks/useSpreadsheetPinning';
 import { useSpreadsheetComments } from '../hooks/useSpreadsheetComments';
 import { useSpreadsheetUndoRedo } from '../hooks/useSpreadsheetUndoRedo';
@@ -225,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,
@@ -825,6 +829,11 @@ export function Spreadsheet<T extends Record<string, any>>({
                     autoSave={spreadsheetSettings.autoSave}
                     hasActiveFilters={hasActiveFilters}
                     onClearFilters={clearAllFilters}
+                    filters={filters}
+                    columns={columns}
+                    onClearFilter={(columnId) => handleFilterChange(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)}
@@ -868,6 +877,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
+                                            );
                                             return (
                                                 <th
                                                     key={`pinned-group-${item.columnId}`}
@@ -885,7 +900,7 @@ export function Spreadsheet<T extends Record<string, any>>({
                                                         right: !isPinnedLeft
                                                             ? `${getColumnRightOffset(item.columnId)}px`
                                                             : undefined,
-                                                        minWidth: col?.minWidth || col?.width,
+                                                        minWidth: pinnedWidth,
                                                     }}
                                                 />
                                             );

package/src/components/SpreadsheetCell.tsx

@@ -4,6 +4,7 @@ import { AiFillHighlight } from 'react-icons/ai';
 import { FaComment, FaRegComment } from 'react-icons/fa';
 import { cn } from '../utils';
 import type { SpreadsheetCellProps } from '../types';
+import { MIN_PINNED_COLUMN_WIDTH } from '../hooks/useSpreadsheetPinning';
 
 const cellPaddingCompact = 'px-1 py-px';
 const cellPaddingNormal = 'px-2 py-1';
@@ -273,6 +274,18 @@ const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
             style={{
                 backgroundColor: isInSelection ? 'rgb(239 246 255)' : getBackgroundColor(),
                 minWidth: column.minWidth || column.width,
+                // 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
+                    ),
+                }),
                 ...positionStyles,
                 ...selectionBorderStyles,
             }}

package/src/components/SpreadsheetHeader.tsx

@@ -3,6 +3,7 @@ import { HiChevronDown, HiChevronUp } from 'react-icons/hi';
 import { cn } from '../utils';
 import type { SpreadsheetHeaderProps } from '../types';
 import { ColumnHeaderActions } from './ColumnHeaderActions';
+import { MIN_PINNED_COLUMN_WIDTH } from '../hooks/useSpreadsheetPinning';
 
 const cellPaddingCompact = 'px-1 py-0.5';
 const cellPaddingNormal = 'px-2 py-1.5';
@@ -71,6 +72,18 @@ export const SpreadsheetHeader: React.FC<
             style={{
                 backgroundColor: highlightColor || 'rgb(243 244 246)', // gray-100
                 minWidth: column.minWidth || column.width,
+                // 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
+                    ),
+                }),
                 top: 0, // For sticky header
                 ...positionStyles,
             }}

package/src/components/SpreadsheetToolbar.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import {
     HiCheck,
+    HiChevronDown,
+    HiChevronUp,
     HiCog,
     HiDotsVertical,
     HiFilter,
@@ -12,6 +14,7 @@ import {
 } from 'react-icons/hi';
 import { cn } from '../utils';
 import type { SpreadsheetToolbarProps } from '../types';
+import { ActiveFiltersDisplay } from './ActiveFiltersDisplay';
 
 /**
  * SpreadsheetToolbar component - Top toolbar with zoom controls, undo/redo, filters, and actions.
@@ -60,6 +63,11 @@ export const SpreadsheetToolbar: React.FC<SpreadsheetToolbarProps> = ({
     onShowShortcuts,
     hasActiveFilters,
     onClearFilters,
+    filters,
+    columns,
+    onClearFilter,
+    showFiltersPanel,
+    onToggleFiltersPanel,
     className,
 }) => {
     const [showMoreMenu, setShowMoreMenu] = React.useState(false);
@@ -122,13 +130,30 @@ export const SpreadsheetToolbar: React.FC<SpreadsheetToolbarProps> = ({
         }
     };
 
+    // Count active filters
+    const activeFilterCount = filters
+        ? Object.values(filters).filter(
+              (f) =>
+                  f.textCondition ||
+                  f.numberCondition ||
+                  f.dateCondition ||
+                  f.text ||
+                  (f.selectedValues && f.selectedValues.length > 0) ||
+                  f.min !== undefined ||
+                  f.max !== undefined ||
+                  f.includeBlanks ||
+                  f.excludeBlanks
+          ).length
+        : 0;
+
     return (
-        <div
-            className={cn(
-                'flex flex-wrap items-center justify-between gap-2 px-4 py-2 border-b border-gray-200 bg-white',
-                className
-            )}
-        >
+        <div className="flex flex-col">
+            <div
+                className={cn(
+                    'flex flex-wrap items-center justify-between gap-2 px-4 py-2 border-b border-gray-200 bg-white',
+                    className
+                )}
+            >
             {/* Left section: Primary actions */}
             <div className="flex items-center gap-2">
                 {/* Undo/Redo buttons */}
@@ -212,22 +237,29 @@ export const SpreadsheetToolbar: React.FC<SpreadsheetToolbarProps> = ({
                     </div>
                 )}
 
-                {/* Clear filters button */}
-                {hasActiveFilters && onClearFilters && (
-                    <div className="flex items-center gap-2 px-2.5 py-1.5 bg-amber-500 text-white rounded">
+                {/* Show filters button */}
+                {hasActiveFilters && onToggleFiltersPanel && (
+                    <button
+                        type={'button'}
+                        onClick={onToggleFiltersPanel}
+                        className={cn(
+                            'flex items-center gap-2 px-2.5 py-1.5 rounded transition-colors',
+                            showFiltersPanel
+                                ? 'bg-amber-600 text-white hover:bg-amber-700'
+                                : 'bg-amber-500 text-white hover:bg-amber-600'
+                        )}
+                        title={showFiltersPanel ? 'Hide active filters' : 'Show active filters'}
+                    >
                         <HiFilter className="h-3.5 w-3.5" />
                         <span className="text-xs font-medium whitespace-nowrap">
-                            Filters active
+                            {activeFilterCount} filter{activeFilterCount !== 1 ? 's' : ''} active
                         </span>
-                        <button
-                            type={'button'}
-                            onClick={onClearFilters}
-                            className="p-0.5 hover:bg-amber-600 rounded"
-                            title="Clear all filters"
-                        >
-                            <HiX className="h-3 w-3" />
-                        </button>
-                    </div>
+                        {showFiltersPanel ? (
+                            <HiChevronUp className="h-3 w-3" />
+                        ) : (
+                            <HiChevronDown className="h-3 w-3" />
+                        )}
+                    </button>
                 )}
 
                 {/* Summary badge */}
@@ -350,6 +382,17 @@ export const SpreadsheetToolbar: React.FC<SpreadsheetToolbarProps> = ({
                     )}
                 </div>
             </div>
+            </div>
+
+            {/* Active filters panel */}
+            {showFiltersPanel && filters && columns && onClearFilter && onClearFilters && (
+                <ActiveFiltersDisplay
+                    filters={filters}
+                    columns={columns}
+                    onClearFilter={onClearFilter}
+                    onClearAllFilters={onClearFilters}
+                />
+            )}
         </div>
     );
 };

package/src/hooks/useSpreadsheetPinning.ts

@@ -4,6 +4,8 @@ import type { SpreadsheetColumn, SpreadsheetColumnGroup } from '../types';
 // Special column ID for row index
 export const ROW_INDEX_COLUMN_ID = '__row_index__';
 export const ROW_INDEX_COLUMN_WIDTH = 80;
+// Minimum width for any pinned column to ensure header actions (pin, filter, highlight icons) fit
+export const MIN_PINNED_COLUMN_WIDTH = 150;
 
 export interface UseSpreadsheetPinningOptions<T> {
     columns: SpreadsheetColumn<T>[];
@@ -178,8 +180,10 @@ export function useSpreadsheetPinning<T>({
             let offset = baseOffset;
             for (let i = 0; i < index; i++) {
                 const col = columns.find((c) => c.id === pinnedLeft[i]);
-                // Use minWidth || width to match the rendered cell width
-                offset += col?.minWidth || col?.width || 100;
+                // Pinned columns are clamped to at least MIN_PINNED_COLUMN_WIDTH
+                // so that header actions (pin, filter, highlight icons) always fit
+                const configuredWidth = col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH;
+                offset += Math.max(configuredWidth, MIN_PINNED_COLUMN_WIDTH);
             }
             return offset;
         },
@@ -218,7 +222,8 @@ export function useSpreadsheetPinning<T>({
             let offset = 0;
             for (let i = pinnedRight.length - 1; i > index; i--) {
                 const col = columns.find((c) => c.id === pinnedRight[i]);
-                offset += col?.minWidth || col?.width || 100;
+                const configuredWidth = col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH;
+                offset += Math.max(configuredWidth, MIN_PINNED_COLUMN_WIDTH);
             }
             return offset;
         },

package/src/index.ts

@@ -8,6 +8,8 @@ export { SpreadsheetFilterDropdown } from './components/SpreadsheetFilterDropdow
 export { SpreadsheetToolbar } from './components/SpreadsheetToolbar';
 export { SpreadsheetSettingsModal } from './components/SpreadsheetSettingsModal';
 export { RowContextMenu } from './components/RowContextMenu';
+export { ActiveFiltersDisplay } from './components/ActiveFiltersDisplay';
+export type { ActiveFiltersDisplayProps } from './components/ActiveFiltersDisplay';
 export type { SpreadsheetSettings } from './components/SpreadsheetSettingsModal';
 
 // Types

package/src/types.ts

@@ -703,6 +703,16 @@ export interface SpreadsheetToolbarProps {
     hasActiveFilters?: boolean;
     /** Callback to clear all filters */
     onClearFilters?: () => void;
+    /** Current filters (for displaying active filters) */
+    filters?: Record<string, SpreadsheetColumnFilter>;
+    /** Column definitions (for displaying filter column names) */
+    columns?: SpreadsheetColumn[];
+    /** Callback to clear individual filter */
+    onClearFilter?: (columnId: string) => void;
+    /** Whether to show the active filters panel */
+    showFiltersPanel?: boolean;
+    /** Callback to toggle the active filters panel */
+    onToggleFiltersPanel?: () => void;
     /** Custom className */
     className?: string;
 }