@flikk/ui 1.0.0-beta.1

package/dist/components/core/Table/Table.filterUtils.js

@@ -0,0 +1,260 @@
+/**
+ * Operators available per filter type
+ */
+const operatorsByType = {
+    text: ['contains', 'notContains', 'equals', 'notEquals', 'startsWith', 'endsWith', 'isEmpty', 'isNotEmpty'],
+    number: ['equals', 'notEquals', 'greaterThan', 'lessThan', 'greaterThanOrEqual', 'lessThanOrEqual', 'between', 'isEmpty', 'isNotEmpty'],
+    date: ['equals', 'before', 'after', 'between', 'isEmpty', 'isNotEmpty'],
+    select: ['equals', 'notEquals', 'isEmpty', 'isNotEmpty'],
+    multiSelect: ['contains', 'equals', 'isEmpty', 'isNotEmpty'],
+    boolean: ['isTrue', 'isFalse'],
+};
+/**
+ * Default operator per filter type
+ */
+const defaultOperatorByType = {
+    text: 'contains',
+    number: 'equals',
+    date: 'equals',
+    select: 'equals',
+    multiSelect: 'contains',
+    boolean: 'isTrue',
+};
+/**
+ * Human-readable labels for filter operators
+ */
+const operatorLabels = {
+    equals: 'Equals',
+    notEquals: 'Not equals',
+    contains: 'Contains',
+    notContains: 'Not contains',
+    startsWith: 'Starts with',
+    endsWith: 'Ends with',
+    greaterThan: 'Greater than',
+    lessThan: 'Less than',
+    greaterThanOrEqual: 'Greater or equal',
+    lessThanOrEqual: 'Less or equal',
+    isEmpty: 'Is empty',
+    isNotEmpty: 'Is not empty',
+    isTrue: 'Is true',
+    isFalse: 'Is false',
+    before: 'Before',
+    after: 'After',
+    between: 'Between',
+};
+/**
+ * Infer the filter type for a column based on its configuration and data.
+ * Priority: explicit filterType > filterOptions presence > data sampling
+ */
+function inferFilterType(column, data) {
+    // 1. Explicit filterType always wins
+    if (column.filterType)
+        return column.filterType;
+    // 2. If column has filterOptions, it's a select
+    if (column.filterOptions && column.filterOptions.length > 0)
+        return 'select';
+    // 3. Sample first non-null value from data
+    if (data && data.length > 0) {
+        for (const row of data) {
+            const value = typeof column.accessor === 'function'
+                ? column.accessor(row)
+                : row[column.accessor];
+            if (value == null)
+                continue;
+            if (typeof value === 'boolean')
+                return 'boolean';
+            if (typeof value === 'number')
+                return 'number';
+            if (value instanceof Date)
+                return 'date';
+            if (typeof value === 'string') {
+                // Check if it looks like an ISO date string (YYYY-MM-DD or full ISO)
+                if (/^\d{4}-\d{2}-\d{2}(T|\s|$)/.test(value))
+                    return 'date';
+            }
+            // Default to text
+            return 'text';
+        }
+    }
+    return 'text';
+}
+/**
+ * Get the valid operators for a given filter type
+ */
+function getOperatorsForFilterType(filterType) {
+    const operators = operatorsByType[filterType] || operatorsByType.text;
+    return operators.map((op) => ({
+        id: op,
+        label: operatorLabels[op],
+        value: op,
+    }));
+}
+/**
+ * Get the default operator for a given filter type
+ */
+function getDefaultOperator(filterType) {
+    return defaultOperatorByType[filterType] || 'contains';
+}
+/**
+ * Returns true if the operator requires no value input (unary operators)
+ */
+function isUnaryOperator(operator) {
+    return ['isEmpty', 'isNotEmpty', 'isTrue', 'isFalse'].includes(operator);
+}
+/**
+ * Returns true if the operator needs two value inputs (between)
+ */
+function isBetweenOperator(operator) {
+    return operator === 'between';
+}
+/**
+ * Resolve a column accessor to extract a cell value from a row
+ */
+function getCellValue(row, column) {
+    if (typeof column.accessor === 'function') {
+        return column.accessor(row);
+    }
+    return row[column.accessor];
+}
+/**
+ * Evaluate a single filter condition against a row value
+ */
+function evaluateFilter(cellValue, filter, filterType) {
+    const operator = filter.operator || 'contains';
+    const filterValue = filter.value;
+    // Handle unary operators first
+    if (operator === 'isEmpty') {
+        return cellValue == null || cellValue === '' || (Array.isArray(cellValue) && cellValue.length === 0);
+    }
+    if (operator === 'isNotEmpty') {
+        return cellValue != null && cellValue !== '' && !(Array.isArray(cellValue) && cellValue.length === 0);
+    }
+    if (operator === 'isTrue') {
+        return cellValue === true || cellValue === 'true' || cellValue === 1;
+    }
+    if (operator === 'isFalse') {
+        return cellValue === false || cellValue === 'false' || cellValue === 0;
+    }
+    // For non-unary operators, if no filter value is set, skip (pass-through)
+    if (filterValue == null || filterValue === '')
+        return true;
+    // Type-aware comparison
+    switch (filterType) {
+        case 'number': {
+            const numCell = Number(cellValue);
+            const numFilter = Number(filterValue);
+            if (isNaN(numCell))
+                return false;
+            switch (operator) {
+                case 'equals': return numCell === numFilter;
+                case 'notEquals': return numCell !== numFilter;
+                case 'greaterThan': return numCell > numFilter;
+                case 'lessThan': return numCell < numFilter;
+                case 'greaterThanOrEqual': return numCell >= numFilter;
+                case 'lessThanOrEqual': return numCell <= numFilter;
+                case 'between': {
+                    if (Array.isArray(filterValue) && filterValue.length === 2) {
+                        const [min, max] = filterValue.map(Number);
+                        return numCell >= min && numCell <= max;
+                    }
+                    return true;
+                }
+                default: return true;
+            }
+        }
+        case 'date': {
+            const dateCell = cellValue instanceof Date ? cellValue : new Date(String(cellValue));
+            if (isNaN(dateCell.getTime()))
+                return false;
+            if (operator === 'between') {
+                if (Array.isArray(filterValue) && filterValue.length === 2) {
+                    const [minDate, maxDate] = filterValue.map((v) => new Date(v));
+                    return dateCell >= minDate && dateCell <= maxDate;
+                }
+                return true;
+            }
+            const dateFilter = new Date(String(filterValue));
+            if (isNaN(dateFilter.getTime()))
+                return true;
+            // Normalize to date-only comparison (strip time)
+            const cellDateOnly = new Date(dateCell.getFullYear(), dateCell.getMonth(), dateCell.getDate());
+            const filterDateOnly = new Date(dateFilter.getFullYear(), dateFilter.getMonth(), dateFilter.getDate());
+            switch (operator) {
+                case 'equals': return cellDateOnly.getTime() === filterDateOnly.getTime();
+                case 'before': return cellDateOnly < filterDateOnly;
+                case 'after': return cellDateOnly > filterDateOnly;
+                default: return true;
+            }
+        }
+        case 'boolean':
+            // Boolean operators are handled above as unary
+            return true;
+        case 'multiSelect': {
+            const cellArr = Array.isArray(cellValue) ? cellValue : [cellValue];
+            const filterArr = Array.isArray(filterValue) ? filterValue : [filterValue];
+            switch (operator) {
+                case 'contains': return filterArr.some((fv) => cellArr.includes(fv));
+                case 'equals': return filterArr.length === cellArr.length && filterArr.every((fv) => cellArr.includes(fv));
+                default: return true;
+            }
+        }
+        case 'select': {
+            const strCell = String(cellValue).toLowerCase();
+            const strFilter = String(filterValue).toLowerCase();
+            switch (operator) {
+                case 'equals': return strCell === strFilter;
+                case 'notEquals': return strCell !== strFilter;
+                default: return true;
+            }
+        }
+        case 'text':
+        default: {
+            const strCell = String(cellValue).toLowerCase();
+            const strFilter = String(filterValue).toLowerCase();
+            switch (operator) {
+                case 'contains': return strCell.includes(strFilter);
+                case 'notContains': return !strCell.includes(strFilter);
+                case 'equals': return strCell === strFilter;
+                case 'notEquals': return strCell !== strFilter;
+                case 'startsWith': return strCell.startsWith(strFilter);
+                case 'endsWith': return strCell.endsWith(strFilter);
+                default: return strCell.includes(strFilter);
+            }
+        }
+    }
+}
+/**
+ * Pure filtering function — filters data based on columns, filter configs, and logic.
+ * Returns filtered data array.
+ */
+function filterData(data, columns, filters, logic = 'and') {
+    // Remove filters with no column or that are effectively empty
+    const activeFilters = filters.filter((f) => {
+        if (!f.columnId)
+            return false;
+        // Unary operators don't need a value
+        if (f.operator && isUnaryOperator(f.operator))
+            return true;
+        // Non-unary operators need a value
+        return f.value != null && f.value !== '';
+    });
+    if (activeFilters.length === 0)
+        return data;
+    // Build a column lookup for quick access
+    const columnMap = new Map(columns.map((col) => [col.id, col]));
+    return data.filter((row) => {
+        const results = activeFilters.map((filter) => {
+            const column = columnMap.get(filter.columnId);
+            if (!column)
+                return true;
+            const cellValue = getCellValue(row, column);
+            const filterType = inferFilterType(column, data);
+            return evaluateFilter(cellValue, filter, filterType);
+        });
+        return logic === 'and'
+            ? results.every(Boolean)
+            : results.some(Boolean);
+    });
+}
+
+export { filterData, getDefaultOperator, getOperatorsForFilterType, inferFilterType, isBetweenOperator, isUnaryOperator, operatorLabels };

package/dist/components/core/Table/Table.js

@@ -0,0 +1,160 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, useState, useRef, useEffect, useMemo } from 'react';
+import { tableTheme } from './Table.theme.js';
+import { cn } from '../../../utils/cn.js';
+import { TableHeader } from './TableHeader.js';
+import { TableBody } from './TableBody.js';
+import { TableSelectionHeader } from './TableSelectionHeader.js';
+import { TableColumnManager } from './TableColumnManager.js';
+import { TableFilter } from './TableFilter.js';
+import { useTableColumns } from './hooks/useTableColumns.js';
+import { useTableSelection } from './hooks/useTableSelection.js';
+import { useTablePagination } from './hooks/useTablePagination.js';
+import { useTableFilter } from './hooks/useTableFilter.js';
+
+/**
+ * Context for sharing table state across all table components
+ * Provides theme, configuration, and callback functions to child components
+ */
+const TableContext = createContext({
+    theme: tableTheme,
+    variant: "default",
+    freezeHeader: false,
+    freezeFirstColumn: false,
+    freezeLastColumn: false,
+});
+/**
+ * Enhanced Table component with dual API support (declarative and data-driven)
+ *
+ * Features:
+ * - Dual API: Use with data/columns props OR declarative Table.Header/Body/Row/Cell components
+ * - Stable row identification using rowKey prop for consistent React reconciliation
+ * - Column management with visibility controls
+ * - Sorting, filtering, row selection, and expansion
+ * - Frozen columns and headers
+ * - Pagination support
+ * - Full accessibility compliance (WCAG 2.1 AA)
+ * - Theme customization with className overrides
+ */
+function TableComponent(props) {
+    var _a;
+    const { data, columns, rowKey, variant = "default", theme: themeOverrides, className = "", freezeHeader = false, freezeFirstColumn = false, freezeLastColumn = false, sortable = false, sortConfig = [], onSortChange, filterable = false, filterConfig = [], onFilterChange, filterLogic: controlledFilterLogic, enableBuiltInFilter = false, expandable = false, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable = false, selectionType = "checkbox", selectedRows = [], onSelectionChange, bulkActions = [], showColumnManager = false, visibleColumns: initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, pagination, children, } = props;
+    // Column management hook
+    const { visibleColumns, columnOrder, visibleColumnsList, handleToggleColumn, handleColumnReorder, handleResetToDefault, } = useTableColumns({
+        columns,
+        initialVisibleColumns,
+        onVisibleColumnsChange,
+        onColumnReorder,
+    });
+    // Filter logic state
+    const [internalFilterLogic, setInternalFilterLogic] = useState('and');
+    const filterLogic = controlledFilterLogic !== null && controlledFilterLogic !== void 0 ? controlledFilterLogic : internalFilterLogic;
+    const handleFilterLogicChange = (logic) => {
+        setInternalFilterLogic(logic);
+    };
+    // Built-in filter hook
+    const { filteredData: builtInFilteredData } = useTableFilter({
+        filterConfig,
+        onFilterChange,
+        filterLogic,
+        data,
+        columns,
+        enableBuiltInFilter,
+    });
+    // Use filtered data when built-in filter is enabled, otherwise use raw data
+    const effectiveData = enableBuiltInFilter ? builtInFilteredData : data;
+    // Pagination hook
+    const { paginatedData } = useTablePagination({
+        data: effectiveData,
+        pagination,
+    });
+    // Selection hook (for clear selection in header)
+    const { handleClearSelection } = useTableSelection({
+        data: paginatedData,
+        rowKey,
+        selectionType,
+        selectedRows,
+        onSelectionChange,
+    });
+    // Determine which API is being used (declarative vs data-driven)
+    const isDeclarativeAPI = !!children;
+    // Detect horizontal overflow to conditionally apply frozen column backdrop styles
+    const scrollContainerRef = useRef(null);
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    useEffect(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        const checkOverflow = () => {
+            setIsOverflowing(container.scrollWidth > container.clientWidth);
+        };
+        checkOverflow();
+        const observer = new ResizeObserver(checkOverflow);
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, []);
+    // Merge global theme with component-specific overrides
+    // When the table overflows, add backdrop-blur + shadow to frozen columns
+    const theme = useMemo(() => {
+        const merged = {
+            ...tableTheme,
+            ...(themeOverrides || {}),
+        };
+        if (isOverflowing) {
+            const overflowBg = "backdrop-blur-sm bg-black/5 dark:bg-white/5";
+            merged.frozenColumnStyle = cn(merged.frozenColumnStyle, overflowBg, "shadow-l-xl");
+            merged.lastFrozenColumnStyle = cn(merged.lastFrozenColumnStyle, overflowBg, "shadow-r-xl");
+        }
+        return merged;
+    }, [themeOverrides, isOverflowing]);
+    // Get base classes from theme
+    const baseClasses = theme.baseStyle || "";
+    const variantClasses = ((_a = theme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "";
+    // Memoize context value to prevent unnecessary re-renders in consumers
+    const contextValue = useMemo(() => ({
+        theme,
+        variant,
+        freezeHeader,
+        freezeFirstColumn,
+        freezeLastColumn,
+        sortable,
+        sortConfig,
+        onSortChange,
+        filterable,
+        filterConfig,
+        onFilterChange,
+        filterLogic,
+        expandable,
+        expandedRows,
+        onExpandedRowsChange,
+        selectable,
+        selectionType,
+        selectedRows,
+        onSelectionChange,
+    }), [
+        theme,
+        variant,
+        freezeHeader,
+        freezeFirstColumn,
+        freezeLastColumn,
+        sortable,
+        sortConfig,
+        onSortChange,
+        filterable,
+        filterConfig,
+        onFilterChange,
+        filterLogic,
+        expandable,
+        expandedRows,
+        onExpandedRowsChange,
+        selectable,
+        selectionType,
+        selectedRows,
+        onSelectionChange,
+    ]);
+    return (jsx(TableContext.Provider, { value: contextValue, children: jsxs("div", { className: "relative", children: [!isDeclarativeAPI && columns && ((filterable && onFilterChange) || showColumnManager) && (jsxs("div", { className: theme.columnManagerContainer, children: [filterable && onFilterChange && (jsx(TableFilter, { columns: columns, filterConfig: filterConfig, onFilterChange: onFilterChange, filterLogic: filterLogic, onFilterLogicChange: handleFilterLogicChange, data: data })), showColumnManager && (jsx(TableColumnManager, { columns: columns, visibleColumns: visibleColumns, columnOrder: columnOrder, onToggleColumn: handleToggleColumn, onResetToDefault: handleResetToDefault, onColumnReorder: onColumnReorder ? handleColumnReorder : undefined }))] })), !isDeclarativeAPI && selectable && selectedRows.length > 0 && (jsx(TableSelectionHeader, { selectedCount: selectedRows.length, totalCount: paginatedData.length, selectedRows: selectedRows, bulkActions: bulkActions, onClearSelection: handleClearSelection })), jsx("div", { className: "overflow-x-auto", ref: scrollContainerRef, children: jsx("table", { className: cn(baseClasses, variantClasses, className), role: "table", "aria-label": isDeclarativeAPI ? "Data table" : `Data table with ${paginatedData.length} rows`, "aria-rowcount": pagination ? pagination.totalItems : data === null || data === void 0 ? void 0 : data.length, "aria-colcount": visibleColumnsList.length, children: isDeclarativeAPI ? (children) : (jsxs(Fragment, { children: [jsx(TableHeader, { columns: visibleColumnsList, sortConfig: sortConfig, onSortChange: onSortChange, filterConfig: filterConfig, onFilterChange: onFilterChange, freezeHeader: freezeHeader, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, expandable: expandable, expandedRowRender: expandedRowRender, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, totalRowCount: paginatedData.length, theme: theme, data: paginatedData, rowKey: rowKey }), jsx(TableBody, { data: paginatedData, columns: visibleColumnsList, rowKey: rowKey, expandedRowRender: expandedRowRender, expandedRows: expandedRows, onExpandedRowsChange: onExpandedRowsChange, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, theme: theme })] })) }) })] }) }));
+}
+TableComponent.displayName = "Table";
+const Table = TableComponent;
+
+export { Table, TableContext };

package/dist/components/core/Table/Table.theme.d.ts

@@ -0,0 +1,2 @@
+import { TableThemeOverrides } from "./Table.types";
+export declare const tableTheme: TableThemeOverrides;

package/dist/components/core/Table/Table.theme.js

@@ -0,0 +1,57 @@
+const tableTheme = {
+    // Base styles for the table
+    // Uses border-separate so sticky cells keep their borders (border-collapse
+    // paints borders on the table grid, which sticky cells float above)
+    // Light: white background | Dark: neutral-900 background
+    baseStyle: "w-full border-separate border-spacing-0 text-sm " + "",
+    // Variant styles
+    // Each variant gets dark mode border colors and alternate row colors
+    variants: {
+        default: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
+            "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
+        striped: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
+            "[&>tbody>tr:nth-child(odd)]:bg-[var(--color-neutral-50)] dark:[&>tbody>tr:nth-child(odd)]:bg-[var(--color-neutral-800)] " +
+            "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
+        bordered: "border-t border-l border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
+            "[&_td]:border-b [&_td]:border-r [&_th]:border-b [&_th]:border-r " +
+            "[&_td]:border-[var(--color-border)] [&_th]:border-[var(--color-border)] " +
+            "dark:[&_td]:border-[var(--color-neutral-700)] dark:[&_th]:border-[var(--color-neutral-700)] " +
+            "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
+        compact: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
+            "[&_td]:px-3 [&_td]:py-1 [&_th]:px-3 [&_th]:py-1",
+    },
+    // Header styles
+    // Light: primary text, light border | Dark: neutral-200 text, neutral-700 border
+    headerStyle: "text-left font-medium sticky top-0 border-b first:pl-4 last:pr-4 " +
+        "text-[var(--color-text-primary)] border-[var(--color-border)] ",
+    // Cell styles — borders on cells (not rows) so sticky columns keep them
+    // Light: primary text | Dark: neutral-300 text
+    cellStyle: "border-b border-b-[var(--color-border)] first:pl-4 last:pr-4 " +
+        "text-[var(--color-text-primary)] ",
+    // Row styles — hover and layout only (borders moved to cells)
+    // Light: neutral-50 hover | Dark: neutral-800 hover
+    rowStyle: "group transition-all duration-300 relative " +
+        "hover:bg-[var(--color-neutral-50)] " +
+        "dark:hover:bg-[var(--color-background-tertiary)]",
+    // Selected row styles — background is applied per-cell (in TableCell) so that
+    // sticky/frozen columns repaint correctly. The row only carries the left indicator.
+    selectedRowStyle: "shadow-[inset_3px_0_0_0_var(--color-primary)]",
+    hoverRowStyle: "cursor-pointer",
+    // Frozen column styles — borders are on the cell (via cellStyle) so they
+    // travel with the sticky element. Only need vertical separator borders here.
+    frozenColumnStyle: "sticky left-0 z-10",
+    lastFrozenColumnStyle: "sticky right-0 z-10",
+    frozenHeaderStyle: "sticky top-0 z-20 " +
+        "shadow-lg shadow-[var(--color-neutral-200)]/50 " +
+        "dark:shadow-[var(--color-neutral-900)]/50",
+    // Utility controls - Column manager button
+    // Light: white bg with light border | Dark: neutral-800 bg with neutral-600 border
+    columnManagerButton: "inline-flex items-center gap-2 rounded-[calc(var(--radius-base)*0.75)] px-3 py-2 text-sm font-medium " +
+        "focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:ring-offset-2 " +
+        "dark:focus:ring-offset-[var(--color-neutral-900)] " +
+        "bg-white border border-[var(--color-neutral-300)] text-[var(--color-text-primary)] hover:bg-[var(--color-neutral-50)] " +
+        "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-600)] dark:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-neutral-700)]",
+    columnManagerContainer: "mb-4 flex items-center justify-end gap-2",
+};
+
+export { tableTheme };