@alaarab/ogrid-js 2.1.2 → 2.1.4

package/dist/esm/state/GridState.js

@@ -1,324 +0,0 @@
-import { flattenColumns, processClientSideData, exportToCsv as coreExportToCsv, getCellValue, deriveFilterOptionsFromData, mergeFilter, validateColumns, validateRowIds, } from '@alaarab/ogrid-core';
-import { EventEmitter } from './EventEmitter';
-export class GridState {
-    constructor(options) {
-        this.emitter = new EventEmitter();
-        this._data = [];
-        this._filters = {};
-        this._isLoading = false;
-        this._serverItems = [];
-        this._serverTotalCount = 0;
-        this._fetchId = 0; // Guards against stale fetch responses
-        this._abortController = null; // Cancels in-flight fetch requests
-        this._firstDataRendered = false;
-        // Filter options for client-side data (used by sidebar filters panel & header filter popovers)
-        this._filterOptions = {};
-        // Column display order (array of columnIds)
-        this._columnOrder = [];
-        // Dirty-flag memoization for visibleColumnDefs getter
-        this._visibleColsCache = null;
-        this._visibleColsDirty = true;
-        this._allColumns = options.columns;
-        this._columns = flattenColumns(options.columns);
-        this._getRowId = options.getRowId;
-        this._data = options.data ?? [];
-        this._dataSource = options.dataSource;
-        this._page = options.page ?? 1;
-        this._pageSize = options.pageSize ?? 20;
-        this._sort = options.sort;
-        this._filters = options.filters ?? {};
-        this._visibleColumns = options.visibleColumns ?? new Set(this._columns.map(c => c.columnId));
-        this._columnOrder = this._columns.map(c => c.columnId);
-        this._onError = options.onError;
-        this._onFirstDataRendered = options.onFirstDataRendered;
-        this._rowHeight = options.rowHeight;
-        this._ariaLabel = options.ariaLabel;
-        this._stickyHeader = options.stickyHeader ?? true;
-        this._fullScreen = options.fullScreen ?? false;
-        // Derive initial filter options for client-side data
-        if (!this._dataSource) {
-            this._filterOptions = deriveFilterOptionsFromData(this._data, this._columns);
-        }
-        // Runtime validation — runs once at construction
-        validateColumns(this._columns);
-        if (!this._dataSource && this._data.length > 0) {
-            validateRowIds(this._data, this._getRowId);
-            this._firstDataRendered = true;
-        }
-        // If server-side, trigger initial fetch
-        if (this._dataSource) {
-            this._isLoading = true;
-            this.fetchServerData();
-        }
-    }
-    // --- Getters ---
-    get data() { return this._data; }
-    get page() { return this._page; }
-    get pageSize() { return this._pageSize; }
-    get sort() { return this._sort; }
-    get filters() { return this._filters; }
-    get visibleColumns() { return this._visibleColumns; }
-    get isLoading() { return this._isLoading; }
-    get columns() { return this._columns; }
-    get allColumns() { return this._allColumns; }
-    get getRowId() { return this._getRowId; }
-    get isServerSide() { return this._dataSource != null; }
-    get stickyHeader() { return this._stickyHeader; }
-    get fullScreen() { return this._fullScreen; }
-    get filterOptions() { return this._filterOptions; }
-    get columnOrder() { return this._columnOrder; }
-    get rowHeight() { return this._rowHeight; }
-    get ariaLabel() { return this._ariaLabel; }
-    /** Get the visible columns in display order (respects column reorder). Memoized via dirty flag. */
-    get visibleColumnDefs() {
-        if (!this._visibleColsDirty && this._visibleColsCache)
-            return this._visibleColsCache;
-        const visible = this._columns.filter(c => this._visibleColumns.has(c.columnId));
-        if (this._columnOrder.length === 0) {
-            this._visibleColsCache = visible;
-        }
-        else {
-            const orderMap = new Map(this._columnOrder.map((id, idx) => [id, idx]));
-            this._visibleColsCache = [...visible].sort((a, b) => {
-                const ai = orderMap.get(a.columnId) ?? Infinity;
-                const bi = orderMap.get(b.columnId) ?? Infinity;
-                return ai - bi;
-            });
-        }
-        this._visibleColsDirty = false;
-        return this._visibleColsCache;
-    }
-    /** Get processed (sorted, filtered, paginated) items for current page. */
-    getProcessedItems() {
-        if (this.isServerSide) {
-            return { items: this._serverItems, totalCount: this._serverTotalCount };
-        }
-        const filtered = processClientSideData(this._data, this._columns, this._filters, this._sort?.field, this._sort?.direction);
-        const totalCount = filtered.length;
-        const startIdx = (this._page - 1) * this._pageSize;
-        const endIdx = startIdx + this._pageSize;
-        const items = filtered.slice(startIdx, endIdx);
-        return { items, totalCount };
-    }
-    // --- Server-side fetch ---
-    fetchServerData() {
-        if (!this._dataSource)
-            return;
-        // Cancel any in-flight request before starting a new one
-        if (this._abortController) {
-            this._abortController.abort();
-        }
-        const id = ++this._fetchId;
-        this._abortController = new AbortController();
-        const currentController = this._abortController;
-        this._isLoading = true;
-        this.emitter.emit('stateChange', { type: 'loading' });
-        this._dataSource
-            .fetchPage({
-            page: this._page,
-            pageSize: this._pageSize,
-            sort: this._sort ? { field: this._sort.field, direction: this._sort.direction } : undefined,
-            filters: this._filters,
-        })
-            .then((res) => {
-            // Ignore if this request was superseded by a newer one
-            if (id !== this._fetchId || currentController.signal.aborted)
-                return;
-            this._serverItems = res.items;
-            this._serverTotalCount = res.totalCount;
-            this._isLoading = false;
-            if (!this._firstDataRendered && res.items.length > 0) {
-                this._firstDataRendered = true;
-                validateRowIds(res.items, this._getRowId);
-                this._onFirstDataRendered?.();
-            }
-            this.emitter.emit('stateChange', { type: 'data' });
-        })
-            .catch((err) => {
-            // Ignore if this request was superseded or aborted
-            if (id !== this._fetchId || currentController.signal.aborted)
-                return;
-            this._onError?.(err);
-            this._serverItems = [];
-            this._serverTotalCount = 0;
-            this._isLoading = false;
-            this.emitter.emit('stateChange', { type: 'data' });
-        });
-    }
-    // --- Setters ---
-    setData(data) {
-        this._data = data;
-        if (!this.isServerSide) {
-            this._filterOptions = deriveFilterOptionsFromData(data, this._columns);
-        }
-        this.emitter.emit('stateChange', { type: 'data' });
-    }
-    setPage(page) {
-        this._page = page;
-        if (this.isServerSide) {
-            this.fetchServerData();
-        }
-        else {
-            this.emitter.emit('stateChange', { type: 'page' });
-        }
-    }
-    setPageSize(pageSize) {
-        this._pageSize = pageSize;
-        this._page = 1;
-        if (this.isServerSide) {
-            this.fetchServerData();
-        }
-        else {
-            this.emitter.emit('stateChange', { type: 'page' });
-        }
-    }
-    setSort(sort) {
-        this._sort = sort;
-        this._page = 1;
-        if (this.isServerSide) {
-            this.fetchServerData();
-        }
-        else {
-            this.emitter.emit('stateChange', { type: 'sort' });
-        }
-    }
-    toggleSort(field) {
-        if (this._sort?.field === field) {
-            this._sort = this._sort.direction === 'asc'
-                ? { field, direction: 'desc' }
-                : undefined;
-        }
-        else {
-            this._sort = { field, direction: 'asc' };
-        }
-        this._page = 1;
-        if (this.isServerSide) {
-            this.fetchServerData();
-        }
-        else {
-            this.emitter.emit('stateChange', { type: 'sort' });
-        }
-    }
-    setFilter(key, value) {
-        this._filters = mergeFilter(this._filters, key, value);
-        this._page = 1;
-        if (this.isServerSide) {
-            this.fetchServerData();
-        }
-        else {
-            this.emitter.emit('stateChange', { type: 'filter' });
-        }
-    }
-    clearFilters() {
-        this._filters = {};
-        this._page = 1;
-        if (this.isServerSide) {
-            this.fetchServerData();
-        }
-        else {
-            this.emitter.emit('stateChange', { type: 'filter' });
-        }
-    }
-    setVisibleColumns(columns) {
-        this._visibleColumns = columns;
-        this._visibleColsDirty = true;
-        this.emitter.emit('stateChange', { type: 'columns' });
-    }
-    setColumnOrder(order) {
-        this._columnOrder = order;
-        this._visibleColsDirty = true;
-        this.emitter.emit('stateChange', { type: 'columns' });
-    }
-    setLoading(loading) {
-        this._isLoading = loading;
-        this.emitter.emit('stateChange', { type: 'loading' });
-    }
-    refreshData() {
-        if (this.isServerSide) {
-            this.fetchServerData();
-        }
-    }
-    // --- Event subscription ---
-    onStateChange(handler) {
-        this.emitter.on('stateChange', handler);
-        return () => this.emitter.off('stateChange', handler);
-    }
-    // --- API ---
-    getApi() {
-        return {
-            setRowData: (data) => {
-                if (!this.isServerSide)
-                    this.setData(data);
-            },
-            setLoading: (loading) => this.setLoading(loading),
-            getColumnState: () => ({
-                visibleColumns: Array.from(this._visibleColumns),
-                sort: this._sort,
-                filters: Object.keys(this._filters).length > 0 ? this._filters : undefined,
-            }),
-            applyColumnState: (state) => {
-                if (state.visibleColumns)
-                    this._visibleColumns = new Set(state.visibleColumns);
-                if (state.sort !== undefined)
-                    this._sort = state.sort;
-                if (state.filters !== undefined)
-                    this._filters = state.filters ?? {};
-                if (this.isServerSide) {
-                    this.fetchServerData();
-                }
-                else {
-                    this.emitter.emit('stateChange', { type: 'columns' });
-                }
-            },
-            setFilterModel: (filters) => {
-                this._filters = filters;
-                this._page = 1;
-                if (this.isServerSide) {
-                    this.fetchServerData();
-                }
-                else {
-                    this.emitter.emit('stateChange', { type: 'filter' });
-                }
-            },
-            getSelectedRows: () => [],
-            setSelectedRows: () => { },
-            selectAll: () => { },
-            deselectAll: () => { },
-            clearFilters: () => this.clearFilters(),
-            clearSort: () => this.setSort(undefined),
-            resetGridState: () => {
-                this.clearFilters();
-                this.setSort(undefined);
-            },
-            getDisplayedRows: () => this.getProcessedItems().items,
-            refreshData: () => this.refreshData(),
-            // scrollToRow is wired by OGrid after construction when virtualScrollState is present.
-            // This stub is replaced by OGrid.ts (see "Wire scrollToRow API method") for virtual scroll.
-            // For non-virtual grids it remains a no-op (native browser scroll handles row visibility).
-            scrollToRow: () => { },
-            getColumnOrder: () => [...this._columnOrder],
-            setColumnOrder: (order) => this.setColumnOrder(order),
-            exportToCsv: (filename) => {
-                const { items } = this.getProcessedItems();
-                const cols = this.visibleColumnDefs.map(c => ({ columnId: c.columnId, name: c.name }));
-                coreExportToCsv(items, cols, (item, colId) => {
-                    const col = this._columns.find(c => c.columnId === colId);
-                    if (!col)
-                        return '';
-                    const val = getCellValue(item, col);
-                    if (col.valueFormatter)
-                        return col.valueFormatter(val, item);
-                    return val != null ? String(val) : '';
-                }, filename);
-            },
-        };
-    }
-    destroy() {
-        // Cancel any in-flight fetch request
-        if (this._abortController) {
-            this._abortController.abort();
-            this._abortController = null;
-        }
-        this.emitter.removeAllListeners();
-    }
-}

package/dist/esm/state/HeaderFilterState.js

@@ -1,213 +0,0 @@
-import { EventEmitter } from './EventEmitter';
-/**
- * Manages header filter popover state for all columns.
- * Equivalent of React's useColumnHeaderFilterState, but class-based.
- */
-export class HeaderFilterState {
-    constructor(onFilterChange) {
-        this.emitter = new EventEmitter();
-        // Which column's filter is currently open (null = none)
-        this._openColumnId = null;
-        // Temporary state for the currently open filter popover
-        this._tempTextValue = '';
-        this._tempSelected = new Set();
-        this._tempDateFrom = '';
-        this._tempDateTo = '';
-        this._searchText = '';
-        // Popover position
-        this._popoverPosition = null;
-        // External references
-        this._filters = {};
-        this._filterOptions = {};
-        // Click-outside handler
-        this._clickOutsideHandler = null;
-        this._escapeHandler = null;
-        this._popoverEl = null;
-        this._headerEl = null;
-        this._onFilterChange = onFilterChange;
-    }
-    get openColumnId() { return this._openColumnId; }
-    get tempTextValue() { return this._tempTextValue; }
-    get tempSelected() { return this._tempSelected; }
-    get tempDateFrom() { return this._tempDateFrom; }
-    get tempDateTo() { return this._tempDateTo; }
-    get searchText() { return this._searchText; }
-    get popoverPosition() { return this._popoverPosition; }
-    setFilters(filters) {
-        this._filters = filters;
-    }
-    setFilterOptions(options) {
-        this._filterOptions = options;
-    }
-    /** Allow OGrid to update the popover element reference after rendering (for click-outside detection). */
-    setPopoverEl(el) {
-        this._popoverEl = el;
-    }
-    getFilterOptions(filterField) {
-        return this._filterOptions[filterField] ?? [];
-    }
-    getFilteredOptions(filterField) {
-        const options = this.getFilterOptions(filterField);
-        if (!this._searchText)
-            return options;
-        const lower = this._searchText.toLowerCase();
-        return options.filter(opt => opt.toLowerCase().includes(lower));
-    }
-    hasActiveFilter(config) {
-        const fv = this._filters[config.filterField];
-        if (!fv)
-            return false;
-        if (fv.type === 'text')
-            return fv.value.trim().length > 0;
-        if (fv.type === 'multiSelect')
-            return fv.value.length > 0;
-        if (fv.type === 'date')
-            return !!(fv.value.from || fv.value.to);
-        if (fv.type === 'people')
-            return !!fv.value;
-        return false;
-    }
-    /**
-     * Open a filter popover for a specific column.
-     */
-    open(columnId, config, headerEl, popoverEl) {
-        // Close any existing popover first
-        if (this._openColumnId) {
-            this.close();
-        }
-        this._openColumnId = columnId;
-        this._headerEl = headerEl;
-        this._popoverEl = popoverEl;
-        // Initialize temp state from current filter values
-        const fv = this._filters[config.filterField];
-        if (config.filterType === 'text') {
-            this._tempTextValue = fv?.type === 'text' ? fv.value : '';
-        }
-        else if (config.filterType === 'multiSelect') {
-            this._tempSelected = new Set(fv?.type === 'multiSelect' ? fv.value : []);
-        }
-        else if (config.filterType === 'date') {
-            const dv = fv?.type === 'date' ? fv.value : {};
-            this._tempDateFrom = dv.from ?? '';
-            this._tempDateTo = dv.to ?? '';
-        }
-        this._searchText = '';
-        // Compute position
-        const rect = headerEl.getBoundingClientRect();
-        this._popoverPosition = { top: rect.bottom + 4, left: rect.left };
-        // Set up click-outside listener
-        this._clickOutsideHandler = (e) => {
-            const target = e.target;
-            if (this._popoverEl && !this._popoverEl.contains(target) &&
-                this._headerEl && !this._headerEl.contains(target)) {
-                this.close();
-            }
-        };
-        this._escapeHandler = (e) => {
-            if (e.key === 'Escape') {
-                e.preventDefault();
-                e.stopPropagation();
-                this.close();
-            }
-        };
-        setTimeout(() => {
-            if (this._clickOutsideHandler) {
-                document.addEventListener('mousedown', this._clickOutsideHandler, { passive: true });
-            }
-        }, 0);
-        if (this._escapeHandler) {
-            document.addEventListener('keydown', this._escapeHandler, true);
-        }
-        this.emitter.emit('change');
-    }
-    close() {
-        this._openColumnId = null;
-        this._popoverPosition = null;
-        this._popoverEl = null;
-        this._headerEl = null;
-        if (this._clickOutsideHandler) {
-            document.removeEventListener('mousedown', this._clickOutsideHandler);
-            this._clickOutsideHandler = null;
-        }
-        if (this._escapeHandler) {
-            document.removeEventListener('keydown', this._escapeHandler, true);
-            this._escapeHandler = null;
-        }
-        this.emitter.emit('change');
-    }
-    // --- Temp state setters ---
-    setTempTextValue(v) {
-        this._tempTextValue = v;
-        this.emitter.emit('change');
-    }
-    setSearchText(v) {
-        this._searchText = v;
-        this.emitter.emit('change');
-    }
-    setTempDateFrom(v) {
-        this._tempDateFrom = v;
-        this.emitter.emit('change');
-    }
-    setTempDateTo(v) {
-        this._tempDateTo = v;
-        this.emitter.emit('change');
-    }
-    // --- Checkbox handlers ---
-    handleCheckboxChange(option, checked) {
-        const next = new Set(this._tempSelected);
-        if (checked)
-            next.add(option);
-        else
-            next.delete(option);
-        this._tempSelected = next;
-        this.emitter.emit('change');
-    }
-    handleSelectAll(filterField) {
-        this._tempSelected = new Set(this.getFilterOptions(filterField));
-        this.emitter.emit('change');
-    }
-    handleClearSelection() {
-        this._tempSelected = new Set();
-        this.emitter.emit('change');
-    }
-    // --- Apply/Clear ---
-    applyTextFilter(filterField) {
-        const value = this._tempTextValue.trim();
-        this._onFilterChange(filterField, value ? { type: 'text', value } : undefined);
-        this.close();
-    }
-    clearTextFilter(filterField) {
-        this._tempTextValue = '';
-        this._onFilterChange(filterField, undefined);
-        this.close();
-    }
-    applyMultiSelectFilter(filterField) {
-        const arr = Array.from(this._tempSelected);
-        this._onFilterChange(filterField, arr.length > 0 ? { type: 'multiSelect', value: arr } : undefined);
-        this.close();
-    }
-    applyDateFilter(filterField) {
-        const from = this._tempDateFrom || undefined;
-        const to = this._tempDateTo || undefined;
-        this._onFilterChange(filterField, from || to ? { type: 'date', value: { from, to } } : undefined);
-        this.close();
-    }
-    clearDateFilter(filterField) {
-        this._tempDateFrom = '';
-        this._tempDateTo = '';
-        this._onFilterChange(filterField, undefined);
-        this.close();
-    }
-    clearFilter(filterField) {
-        this._onFilterChange(filterField, undefined);
-        this.close();
-    }
-    onChange(handler) {
-        this.emitter.on('change', handler);
-        return () => this.emitter.off('change', handler);
-    }
-    destroy() {
-        this.close();
-        this.emitter.removeAllListeners();
-    }
-}