beautiful-grid 1.0.0-rc.1

package/esm/utils/gridSearch.js

@@ -0,0 +1,127 @@
+import { getCellValueByRowKey } from './getCellValue';
+import { resolveLogicalCell } from './mergedCells';
+export function normalizeSearchText(value) {
+    if (value === null || value === undefined)
+        return '';
+    if (typeof value === 'string')
+        return value.normalize('NFC');
+    if (typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint') {
+        return String(value).normalize('NFC');
+    }
+    if (value instanceof Date) {
+        try {
+            return value.toISOString().normalize('NFC');
+        }
+        catch {
+            return String(value).normalize('NFC');
+        }
+    }
+    try {
+        const stringified = JSON.stringify(value);
+        return (stringified ?? String(value)).normalize('NFC');
+    }
+    catch {
+        try {
+            return String(value).normalize('NFC');
+        }
+        catch {
+            return '';
+        }
+    }
+}
+function getRowKey(rowKey, item) {
+    return rowKey ? getCellValueByRowKey(rowKey, item.values) : undefined;
+}
+function isPromiseLike(value) {
+    return !!value && (typeof value === 'object' || typeof value === 'function') && 'then' in value;
+}
+export function findGridSearchMatches({ data, columns, sourceIndexByVisibleIndex, rowKey, cellMergeOptions, searchOptions, query, startRowIndex = 0, endRowIndex = data.length, onGetSearchTextError, }) {
+    const normalizedQuery = normalizeSearchText(query).toLowerCase();
+    if (normalizedQuery.length === 0 || data.length === 0 || columns.length === 0)
+        return [];
+    const matches = [];
+    const seenLogicalCells = new Set();
+    const safeStart = Math.max(0, Math.floor(startRowIndex));
+    const safeEnd = Math.min(data.length, Math.max(safeStart, Math.floor(endRowIndex)));
+    for (let visibleIndex = safeStart; visibleIndex < safeEnd; visibleIndex += 1) {
+        for (let columnIndex = 0; columnIndex < columns.length; columnIndex += 1) {
+            const column = columns[columnIndex];
+            if (!column || column.searchable === false)
+                continue;
+            const logical = resolveLogicalCell(data, cellMergeOptions, { rowIndex: visibleIndex, columnIndex });
+            const logicalToken = `${logical.cell.rowIndex}:${logical.cell.columnIndex}`;
+            if (seenLogicalCells.has(logicalToken))
+                continue;
+            seenLogicalCells.add(logicalToken);
+            const canonicalVisibleIndex = logical.cell.rowIndex;
+            const item = data[canonicalVisibleIndex];
+            if (!item)
+                continue;
+            const sourceIndex = sourceIndexByVisibleIndex[canonicalVisibleIndex] ?? canonicalVisibleIndex;
+            const value = getCellValueByRowKey(column.key, item.values);
+            const params = {
+                cell: logical.cell,
+                visibleIndex: canonicalVisibleIndex,
+                sourceIndex,
+                rowKey: getRowKey(rowKey, item),
+                columnIndex,
+                columnId: column.columnId,
+                column,
+                item,
+                values: item.values,
+                value,
+            };
+            let searchableValue = value;
+            const getSearchText = column.getSearchText ?? searchOptions?.getSearchText;
+            if (getSearchText) {
+                try {
+                    const resolved = getSearchText(params);
+                    if (isPromiseLike(resolved)) {
+                        throw new TypeError('getSearchText must return synchronously.');
+                    }
+                    searchableValue = resolved;
+                }
+                catch (error) {
+                    onGetSearchTextError?.(column.columnId, error);
+                    searchableValue = value;
+                }
+            }
+            if (!normalizeSearchText(searchableValue).toLowerCase().includes(normalizedQuery))
+                continue;
+            matches.push({
+                cell: logical.cell,
+                visibleIndex: canonicalVisibleIndex,
+                sourceIndex,
+                rowKey: params.rowKey,
+                columnIndex,
+                columnId: column.columnId,
+            });
+        }
+    }
+    return matches;
+}
+export function dedupeSearchMatches(matches) {
+    const seen = new Set();
+    return matches.filter(match => {
+        const token = `${match.cell.rowIndex}:${match.cell.columnIndex}`;
+        if (seen.has(token))
+            return false;
+        seen.add(token);
+        return true;
+    });
+}
+export function findMatchingSearchResultIndex(matches, previous, previousIndex) {
+    if (matches.length === 0)
+        return undefined;
+    if (!previous)
+        return 0;
+    const rowKeyMatch = previous.rowKey !== undefined
+        ? matches.findIndex(match => Object.is(match.rowKey, previous.rowKey) && match.columnId === previous.columnId)
+        : -1;
+    if (rowKeyMatch >= 0)
+        return rowKeyMatch;
+    const sourceMatch = matches.findIndex(match => match.sourceIndex === previous.sourceIndex && match.columnId === previous.columnId);
+    if (sourceMatch >= 0)
+        return sourceMatch;
+    return Math.min(Math.max(previousIndex ?? 0, 0), matches.length - 1);
+}

package/esm/utils/index.js

@@ -0,0 +1,23 @@
+export * from './getCellValue';
+export * from './getFrozenColumnsWidth';
+export * from './mouseEventSubscribe';
+export * from './common';
+export * from './useForceUpdate';
+export * from './delay';
+export * from './getLineNumber';
+export * from './useBodyData';
+export * from './createPivotData';
+export * from './getColumnId';
+export * from './updateDataQuery';
+export * from './filterData';
+export * from './processDataQuery';
+export * from './scrollbar';
+export * from './number';
+export * from './buildHeaderMatrix';
+export * from './getVisibleScrollableRowRange';
+export * from './cellEditState';
+export * from './getCellSelectionAxisState';
+export * from './mergedCells';
+export * from './gridSearch';
+export * from './cellEditTransaction';
+export * from './rowReorder';

package/esm/utils/mergedCells.js

@@ -0,0 +1,70 @@
+import { getCellValueByRowKey } from './getCellValue';
+const mergedRowRangeCache = new WeakMap();
+function getMergeCacheKey(mergeBy) {
+    return Array.isArray(mergeBy) ? `path:${JSON.stringify(mergeBy)}` : `key:${mergeBy}`;
+}
+export function getMergedRowRange(data, mergeBy, requestedRowIndex) {
+    if (data.length === 0)
+        return { startRowIndex: 0, endRowIndex: 0 };
+    const rowIndex = Math.min(Math.max(requestedRowIndex, 0), data.length - 1);
+    const cacheKey = getMergeCacheKey(mergeBy);
+    let cacheByColumn = mergedRowRangeCache.get(data);
+    if (!cacheByColumn) {
+        cacheByColumn = new Map();
+        mergedRowRangeCache.set(data, cacheByColumn);
+    }
+    let rangesByRow = cacheByColumn.get(cacheKey);
+    if (!rangesByRow) {
+        rangesByRow = new Map();
+        cacheByColumn.set(cacheKey, rangesByRow);
+    }
+    const cachedRange = rangesByRow.get(rowIndex);
+    if (cachedRange)
+        return cachedRange;
+    const value = getCellValueByRowKey(mergeBy, data[rowIndex].values);
+    let startRowIndex = rowIndex;
+    let endRowIndex = rowIndex;
+    while (startRowIndex > 0 && Object.is(getCellValueByRowKey(mergeBy, data[startRowIndex - 1].values), value)) {
+        startRowIndex -= 1;
+    }
+    while (endRowIndex < data.length - 1 &&
+        Object.is(getCellValueByRowKey(mergeBy, data[endRowIndex + 1].values), value)) {
+        endRowIndex += 1;
+    }
+    const range = { startRowIndex, endRowIndex };
+    for (let index = startRowIndex; index <= endRowIndex; index += 1) {
+        rangesByRow.set(index, range);
+    }
+    return range;
+}
+export function resolveLogicalCell(data, cellMergeOptions, requestedCell) {
+    if (data.length === 0) {
+        return {
+            cell: requestedCell,
+            rowRange: { startRowIndex: requestedCell.rowIndex, endRowIndex: requestedCell.rowIndex },
+            rowIndexes: [requestedCell.rowIndex],
+            merged: false,
+        };
+    }
+    const rowIndex = Math.min(Math.max(requestedCell.rowIndex, 0), data.length - 1);
+    const rule = cellMergeOptions?.columnsMap?.[requestedCell.columnIndex];
+    if (!rule) {
+        return {
+            cell: { rowIndex, columnIndex: requestedCell.columnIndex },
+            rowRange: { startRowIndex: rowIndex, endRowIndex: rowIndex },
+            rowIndexes: [rowIndex],
+            merged: false,
+        };
+    }
+    const rowRange = getMergedRowRange(data, rule.mergeBy, rowIndex);
+    const rowIndexes = Array.from({ length: rowRange.endRowIndex - rowRange.startRowIndex + 1 }, (_, index) => rowRange.startRowIndex + index);
+    return {
+        cell: { rowIndex: rowRange.startRowIndex, columnIndex: requestedCell.columnIndex },
+        rowRange,
+        rowIndexes,
+        merged: rowIndexes.length > 1,
+    };
+}
+export function isRowInLogicalCell(logicalCell, rowIndex) {
+    return rowIndex >= logicalCell.rowRange.startRowIndex && rowIndex <= logicalCell.rowRange.endRowIndex;
+}

package/esm/utils/mouseEventSubscribe.js

@@ -0,0 +1,113 @@
+import { throttle } from './common';
+export const mouseEventSubscribe = (callBack, onEnd, options) => {
+    const { interval = 30, target, pointerId, initialClientX } = options || {};
+    const ownerDocument = target?.ownerDocument ?? document;
+    const ownerWindow = ownerDocument.defaultView ?? window;
+    const ownerBody = ownerDocument.body;
+    const canUsePointerCapture = typeof pointerId === 'number' && !!target?.setPointerCapture;
+    let ended = false;
+    let hasMoveEvent = false;
+    let lastEmittedClientX;
+    let lastEmittedClientY;
+    const emitMove = (e) => {
+        lastEmittedClientX = e.clientX;
+        lastEmittedClientY = e.clientY;
+        callBack({
+            pageX: e.pageX,
+            pageY: e.pageY,
+            clientX: e.clientX,
+            clientY: e.clientY,
+        }, () => {
+            onMouseupWindow();
+        });
+    };
+    const throttledCallBack = interval <= 0
+        ? Object.assign((e) => emitMove(e), {
+            cancel: () => undefined,
+            flush: () => undefined,
+        })
+        : throttle(emitMove, interval);
+    const onMousemoveWindow = (e) => {
+        hasMoveEvent = true;
+        throttledCallBack(e);
+    };
+    const onPointermoveWindow = (e) => {
+        if (typeof pointerId === 'number' && e.pointerId !== pointerId)
+            return;
+        hasMoveEvent = true;
+        throttledCallBack(e);
+    };
+    const onMouseleaveWindow = (e) => {
+        if (typeof pointerId === 'number')
+            return;
+        onMouseupWindow(e);
+    };
+    const shouldUseEndEventAsMove = (e) => {
+        if (e.clientX === lastEmittedClientX && e.clientY === lastEmittedClientY)
+            return false;
+        if (hasMoveEvent)
+            return true;
+        if (typeof initialClientX !== 'number')
+            return false;
+        return e.clientX !== initialClientX;
+    };
+    const onMouseupWindow = (e) => {
+        if (ended)
+            return;
+        ended = true;
+        ownerWindow.removeEventListener('mousemove', onMousemoveWindow, true);
+        ownerWindow.removeEventListener('mouseup', onMouseupWindow, true);
+        ownerWindow.removeEventListener('mouseleave', onMouseleaveWindow, true);
+        ownerWindow.removeEventListener('pointermove', onPointermoveWindow, true);
+        ownerWindow.removeEventListener('pointerup', onPointerupWindow, true);
+        ownerWindow.removeEventListener('pointercancel', onPointerupWindow, true);
+        if (typeof pointerId === 'number') {
+            try {
+                target?.releasePointerCapture?.(pointerId);
+            }
+            catch {
+                // Pointer capture can already be lost in Electron popup windows.
+            }
+        }
+        if (ownerBody) {
+            ownerBody.style.userSelect = 'inherit';
+            ownerBody.style.webkitUserSelect = 'inherit';
+        }
+        if (e && shouldUseEndEventAsMove(e)) {
+            throttledCallBack.cancel();
+            emitMove(e);
+        }
+        else {
+            throttledCallBack.flush?.();
+        }
+        throttledCallBack.cancel();
+        onEnd?.();
+    };
+    const onPointerupWindow = (e) => {
+        if (typeof pointerId === 'number' && e.pointerId !== pointerId)
+            return;
+        onMouseupWindow(e);
+    };
+    if (ownerBody) {
+        ownerBody.style.userSelect = 'none';
+        ownerBody.style.webkitUserSelect = 'none';
+    }
+    if (canUsePointerCapture && typeof pointerId === 'number') {
+        try {
+            target?.setPointerCapture?.(pointerId);
+        }
+        catch {
+            // Continue with ownerWindow listeners when capture is unavailable or rejected.
+        }
+        ownerWindow.addEventListener('mousemove', onMousemoveWindow, true);
+        ownerWindow.addEventListener('mouseup', onMouseupWindow, true);
+        ownerWindow.addEventListener('mouseleave', onMouseleaveWindow, true);
+        ownerWindow.addEventListener('pointermove', onPointermoveWindow, true);
+        ownerWindow.addEventListener('pointerup', onPointerupWindow, true);
+        ownerWindow.addEventListener('pointercancel', onPointerupWindow, true);
+        return;
+    }
+    ownerWindow.addEventListener('mousemove', onMousemoveWindow, true);
+    ownerWindow.addEventListener('mouseup', onMouseupWindow, true);
+    ownerWindow.addEventListener('mouseleave', onMouseleaveWindow, true);
+};

package/esm/utils/number/index.js

@@ -0,0 +1,3 @@
+export * from "./toFixed";
+export * from "./toMoney";
+export * from "./toNumber";

package/esm/utils/number/toFixed.js

@@ -0,0 +1,3 @@
+export function toFixed(value) {
+    return parseFloat(value.toFixed(2));
+}

package/esm/utils/number/toMoney.js

@@ -0,0 +1,10 @@
+import { toNumber } from './';
+export function toMoney(value) {
+    const n = toNumber(value);
+    return Number.isNaN(n)
+        ? String(value)
+        : n
+            .toFixed(0)
+            .toString()
+            .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}

package/esm/utils/number/toNumber.js

@@ -0,0 +1,9 @@
+export function toNumber(value) {
+    let n = value;
+    try {
+        n = typeof value === 'number' ? value : Number(value || 0);
+    }
+    finally {
+    }
+    return n;
+}

package/esm/utils/processDataQuery.js

@@ -0,0 +1,119 @@
+import { getCellValueByRowKey } from './getCellValue';
+import { getColumnId } from './getColumnId';
+import { filterRows } from './filterData';
+function compareValues(aVal, bVal) {
+    const isANil = aVal === null || aVal === undefined;
+    const isBNil = bVal === null || bVal === undefined;
+    // null-last rule: null/undefined are always placed last regardless of direction
+    if (isANil && isBNil)
+        return 0;
+    if (isANil)
+        return 1;
+    if (isBNil)
+        return -1;
+    if (typeof aVal === 'number' && typeof bVal === 'number') {
+        return aVal - bVal;
+    }
+    if (aVal instanceof Date && bVal instanceof Date) {
+        return aVal.getTime() - bVal.getTime();
+    }
+    if (typeof aVal === 'boolean' && typeof bVal === 'boolean') {
+        return (aVal ? 1 : 0) - (bVal ? 1 : 0);
+    }
+    return String(aVal).localeCompare(String(bVal));
+}
+/**
+ * Pure data processing pipeline: filter then stable multi-sort.
+ */
+export function processDataQuery(params) {
+    const { data, columns, query, rowKey, includeRows = true } = params;
+    if (!data || data.length === 0) {
+        return {
+            rows: [],
+            data: [],
+            sourceIndexByVisibleIndex: [],
+            visibleIndexBySourceIndex: new Map(),
+        };
+    }
+    // 1. Filter rows
+    const filtered = filterRows(data, columns, query.filterParams || []);
+    // 2. Prepare column lookup
+    const columnMap = new Map();
+    columns.forEach(col => {
+        columnMap.set(getColumnId(col), col);
+    });
+    // 3. Sort rows if sortParams are present
+    const activeSortParams = (query.sortParams || [])
+        .filter(s => {
+        const id = s.columnId ?? s.key;
+        return id && columnMap.has(id);
+    })
+        .sort((a, b) => (a.index ?? 0) - (b.index ?? 0));
+    let sortedRows = filtered;
+    if (activeSortParams.length > 0) {
+        const sortColumns = activeSortParams.map(sortParam => {
+            const columnId = sortParam.columnId ?? sortParam.key;
+            return columnMap.get(columnId);
+        });
+        const sortValues = sortColumns.map(column => filtered.map(entry => getCellValueByRowKey(column.key, entry.item.values)));
+        const sortedIndexes = filtered.map((_, index) => index);
+        sortedIndexes.sort((aIndex, bIndex) => {
+            for (let i = 0; i < activeSortParams.length; i++) {
+                const sortParam = activeSortParams[i];
+                const column = sortColumns[i];
+                const aRaw = sortValues[i][aIndex];
+                const bRaw = sortValues[i][bIndex];
+                const isANil = aRaw === null || aRaw === undefined;
+                const isBNil = bRaw === null || bRaw === undefined;
+                let comparison = 0;
+                if (isANil || isBNil) {
+                    // null-last rule: null/undefined always placed at the end regardless of asc/desc
+                    comparison = isANil && isBNil ? 0 : isANil ? 1 : -1;
+                }
+                else if (column.sortComparator) {
+                    const customResult = column.sortComparator(aRaw, bRaw, {
+                        column,
+                        aItem: filtered[aIndex].item,
+                        bItem: filtered[bIndex].item,
+                    });
+                    comparison = sortParam.orderBy === 'desc' ? -customResult : customResult;
+                }
+                else {
+                    const rawComp = compareValues(aRaw, bRaw);
+                    comparison = sortParam.orderBy === 'desc' ? -rawComp : rawComp;
+                }
+                if (comparison !== 0) {
+                    return comparison;
+                }
+            }
+            // Stable tie-breaker: preserve original sourceIndex
+            return filtered[aIndex].sourceIndex - filtered[bIndex].sourceIndex;
+        });
+        sortedRows = sortedIndexes.map(index => filtered[index]);
+    }
+    // 4. Build output structures
+    const rows = [];
+    const processedData = [];
+    const sourceIndexByVisibleIndex = [];
+    const visibleIndexBySourceIndex = new Map();
+    for (let visibleIndex = 0; visibleIndex < sortedRows.length; visibleIndex++) {
+        const entry = sortedRows[visibleIndex];
+        if (includeRows) {
+            const itemRowKey = rowKey ? getCellValueByRowKey(rowKey, entry.item.values) : undefined;
+            rows.push({
+                item: entry.item,
+                sourceIndex: entry.sourceIndex,
+                rowKey: itemRowKey,
+            });
+        }
+        processedData.push(entry.item);
+        sourceIndexByVisibleIndex.push(entry.sourceIndex);
+        visibleIndexBySourceIndex.set(entry.sourceIndex, visibleIndex);
+    }
+    return {
+        rows,
+        data: processedData,
+        sourceIndexByVisibleIndex,
+        visibleIndexBySourceIndex,
+    };
+}

package/esm/utils/rowReorder.js

@@ -0,0 +1,85 @@
+import { BGridDataItemStatus } from '../types';
+export function moveRowItem(items, fromIndex, toIndex) {
+    if (fromIndex < 0 ||
+        toIndex < 0 ||
+        fromIndex >= items.length ||
+        toIndex >= items.length ||
+        fromIndex === toIndex) {
+        return [...items];
+    }
+    const nextItems = [...items];
+    const source = nextItems.splice(fromIndex, 1)[0];
+    nextItems.splice(toIndex, 0, { ...source, status: BGridDataItemStatus.edit });
+    return nextItems;
+}
+export function remapRowIndex(index, fromIndex, toIndex) {
+    if (index === fromIndex)
+        return toIndex;
+    if (fromIndex < toIndex && index > fromIndex && index <= toIndex)
+        return index - 1;
+    if (toIndex < fromIndex && index >= toIndex && index < fromIndex)
+        return index + 1;
+    return index;
+}
+export function remapCheckedIndexesMap(checkedIndexesMap, fromIndex, toIndex) {
+    const next = new Map();
+    checkedIndexesMap.forEach((value, index) => {
+        next.set(remapRowIndex(index, fromIndex, toIndex), value);
+    });
+    return next;
+}
+export function getRowReorderTargetIndex(params) {
+    const { fromIndex, pointerOffsetY, rowHeight, rowCount } = params;
+    if (rowCount <= 0 || rowHeight <= 0)
+        return -1;
+    return clamp(Math.round(fromIndex + pointerOffsetY / rowHeight), 0, rowCount - 1);
+}
+export function getRowReorderOffset(params) {
+    const { rowIndex, fromIndex, toIndex, rowHeight } = params;
+    if (rowIndex === fromIndex)
+        return 0;
+    if (fromIndex < toIndex && rowIndex > fromIndex && rowIndex <= toIndex)
+        return -rowHeight;
+    if (toIndex < fromIndex && rowIndex >= toIndex && rowIndex < fromIndex)
+        return rowHeight;
+    return 0;
+}
+export function getRowReorderRole(params) {
+    const { rowIndex, fromIndex, toIndex } = params;
+    if (rowIndex === fromIndex)
+        return 'source';
+    if (rowIndex === toIndex && toIndex !== fromIndex)
+        return 'target';
+    if (fromIndex < toIndex && rowIndex > fromIndex && rowIndex < toIndex)
+        return 'shift';
+    if (toIndex < fromIndex && rowIndex > toIndex && rowIndex < fromIndex)
+        return 'shift';
+    return undefined;
+}
+export function getMaxTransitionTimeMs(style) {
+    const durations = parseTimeList(style.transitionDuration);
+    const delays = parseTimeList(style.transitionDelay);
+    const count = Math.max(durations.length, delays.length);
+    let maximum = 0;
+    for (let index = 0; index < count; index++) {
+        const duration = durations[index % Math.max(durations.length, 1)] ?? 0;
+        const delay = delays[index % Math.max(delays.length, 1)] ?? 0;
+        maximum = Math.max(maximum, duration + delay);
+    }
+    return maximum;
+}
+function parseTimeList(value) {
+    if (!value.trim())
+        return [0];
+    return value.split(',').map(part => {
+        const token = part.trim();
+        if (token.endsWith('ms'))
+            return Number.parseFloat(token) || 0;
+        if (token.endsWith('s'))
+            return (Number.parseFloat(token) || 0) * 1000;
+        return Number.parseFloat(token) || 0;
+    });
+}
+function clamp(value, minimum, maximum) {
+    return Math.min(Math.max(value, minimum), maximum);
+}

package/esm/utils/scrollbar.js

@@ -0,0 +1,51 @@
+import { toMoney } from './number';
+export function resolveStatusOptions(options) {
+    return {
+        visible: options?.visible ?? true,
+        configured: options !== undefined,
+        content: options?.content,
+        className: options?.className,
+        style: options?.style,
+    };
+}
+export function resolvePaginationViewOptions(options) {
+    return {
+        visible: options?.visible ?? true,
+        className: options?.className,
+        style: options?.style,
+    };
+}
+export function resolveScrollbarOptions(options) {
+    const variant = options?.variant ?? 'modern';
+    return {
+        variant,
+        horizontal: {
+            visible: options?.horizontal?.visible ?? true,
+            className: options?.horizontal?.className,
+            style: options?.horizontal?.style,
+        },
+        vertical: {
+            visible: options?.vertical?.visible ?? true,
+            className: options?.vertical?.className,
+            style: options?.vertical?.style,
+        },
+    };
+}
+export function shouldRenderBottomBar(params) {
+    const hasDockedHorizontalScrollbar = params.scrollbar.variant !== 'native' &&
+        params.scrollbar.horizontal.visible &&
+        (params.hasHorizontalOverflow ?? true);
+    const hasPageSection = params.hasPage &&
+        (params.status.visible || params.pagination.visible);
+    const hasStatus = params.status.visible;
+    return hasPageSection || hasDockedHorizontalScrollbar || hasStatus;
+}
+export function resolveStatusContent(content, context) {
+    if (typeof content === 'function') {
+        return content(context);
+    }
+    if (content !== undefined) {
+        return content;
+    }
+    return `${toMoney(context.totalItems)} Items`;
+}