@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/hooks/use-border-styles.js

@@ -0,0 +1,433 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBorderStyles = exports.getSelectedTableColumnFromSelection = void 0;
+var tslib_1 = require("tslib");
+var grid_1 = require("@rowsncolumns/grid");
+var grid_2 = require("@rowsncolumns/grid");
+var grid_3 = require("@rowsncolumns/grid");
+var grid_4 = require("@rowsncolumns/grid");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = require("react");
+var atoms_1 = require("../atoms");
+var config_1 = require("../config");
+var helpers_1 = require("../helpers");
+var themes_1 = require("../themes");
+var use_memo_compare_1 = require("./use-memo-compare");
+/**
+ * Checks if the user is dragging a table or basicFilter
+ * @param selection
+ * @param tables
+ * @param basicFilter
+ * @returns
+ */
+var getDraggedSelectionTitle = function (selection, tables, basicFilter) {
+    if (tables === void 0) { tables = []; }
+    if (!selection) {
+        return undefined;
+    }
+    if (basicFilter && (0, grid_4.isAreasEqual)(basicFilter.range, selection.range)) {
+        return basicFilter.title;
+    }
+    // Column selection
+    var _a = tslib_1.__read((0, exports.getSelectedTableColumnFromSelection)(selection, tables), 3), table = _a[0], draggeedColumn = _a[1], isDraggingTable = _a[2];
+    if (draggeedColumn && !isDraggingTable) {
+        return draggeedColumn.map(function (col) { return col.name; }).join("-");
+    }
+    return isDraggingTable && table ? table.title : null;
+};
+var getSelectedTableColumnFromSelection = function (selection, tables) {
+    var e_1, _a;
+    var _b, _c;
+    if (tables === void 0) { tables = []; }
+    if (tables) {
+        try {
+            // Validate if the selection is inside a table
+            for (var tables_1 = tslib_1.__values(tables), tables_1_1 = tables_1.next(); !tables_1_1.done; tables_1_1 = tables_1.next()) {
+                var table = tables_1_1.value;
+                if ((0, grid_2.areaInsideArea)(selection.range, table.range)) {
+                    if (table.range.startRowIndex === selection.range.startRowIndex &&
+                        table.range.endRowIndex === selection.range.endRowIndex &&
+                        table.range.startColumnIndex <= selection.range.startColumnIndex &&
+                        table.range.endColumnIndex >= selection.range.endColumnIndex) {
+                        var columns = [];
+                        var isFullTable = table.range.startColumnIndex === selection.range.startColumnIndex &&
+                            table.range.endColumnIndex === selection.range.endColumnIndex;
+                        if (isFullTable) {
+                            columns.push.apply(columns, tslib_1.__spreadArray([], tslib_1.__read(((_b = table.columns) !== null && _b !== void 0 ? _b : [])), false));
+                        }
+                        else {
+                            for (var columnIndex = selection.range.startColumnIndex; columnIndex <= selection.range.endColumnIndex; columnIndex++) {
+                                var column = (_c = table.columns) === null || _c === void 0 ? void 0 : _c[columnIndex - table.range.startColumnIndex];
+                                if (column)
+                                    columns.push(column);
+                            }
+                        }
+                        return [table, columns, isFullTable];
+                    }
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (tables_1_1 && !tables_1_1.done && (_a = tables_1.return)) _a.call(tables_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    }
+    return config_1.FROZEN_EMPTY_ARRAY;
+};
+exports.getSelectedTableColumnFromSelection = getSelectedTableColumnFromSelection;
+var getDraggedColumnStyle = function (direction, borderColor) {
+    switch (direction) {
+        case grid_1.Direction.Right:
+            return {
+                strokeRightWidth: 3,
+                strokeRightColor: borderColor,
+                strokeBottomWidth: 0,
+                strokeTopWidth: 0,
+                strokeLeftWidth: 0,
+                strokeStyle: "solid",
+            };
+        default:
+            return {
+                strokeRightWidth: 0,
+                strokeBottomWidth: 0,
+                strokeTopWidth: 0,
+                strokeStyle: "solid",
+                strokeLeftWidth: 3,
+                strokeLeftColor: borderColor,
+            };
+    }
+};
+// Get first table border color
+var getTableBorder = function (properties) {
+    var _a, _b;
+    if (properties.headerBorder) {
+        return (_a = properties.headerBorder.left) === null || _a === void 0 ? void 0 : _a.color;
+    }
+    if (properties.firstBandBorder) {
+        return (_b = properties.firstBandBorder.bottom) === null || _b === void 0 ? void 0 : _b.color;
+    }
+    if (properties.headerColor) {
+        return properties.headerColor;
+    }
+};
+var useBorderStyles = function (_a) {
+    var draggedSelection = _a.draggedSelection, initialDraggedSelection = _a.initialDraggedSelection, users = _a.users, currentUserId = _a.userId, renderCollaboratorCursor = _a.renderCollaboratorCursor, currentSheetId = _a.sheetId, borderStyles = _a.borderStyles, flashingBorders = _a.flashingBorders, copiedSelections = _a.copiedSelections, selectionDragBorderColor = _a.selectionDragBorderColor, _b = _a.selectionBorderColor, selectionBorderColor = _b === void 0 ? config_1.SELECTION_BORDER : _b, tableBorderColor = _a.tableBorderColor, _c = _a.pivotTableBorderColor, pivotTableBorderColor = _c === void 0 ? tableBorderColor : _c, tables = _a.tables, pivotTables = _a.pivotTables, basicFilter = _a.basicFilter, hoveredCell = _a.hoveredCell, activeCell = _a.activeCell, theme = _a.theme, agentSuggestions = _a.agentSuggestions, quickEditValues = _a.quickEditValues;
+    var getAddressFromSelection = (0, atoms_1.useGetAddressFromSelection)();
+    /**
+     * Calculate all area ids that is active
+     * This is used so that we dont re-calc
+     * borderStyles
+     */
+    var visibleIds = (0, react_1.useMemo)(function () {
+        // const ids: (number | string)[] = [];
+        var ids = new Set();
+        // Tables
+        tables === null || tables === void 0 ? void 0 : tables.forEach(function (_a) {
+            var range = _a.range, id = _a.id, sheetId = _a.sheetId;
+            if (sheetId === currentSheetId &&
+                (0, helpers_1.isHoveredCellsWithinBounds)(range, activeCell, hoveredCell)) {
+                ids.add(id);
+            }
+        });
+        // Pivot Tables
+        pivotTables === null || pivotTables === void 0 ? void 0 : pivotTables.forEach(function (_a) {
+            var pivotId = _a.pivotId, targetPosition = _a.targetPosition, pivotRange = _a.pivotRange;
+            if (targetPosition.sheetId === currentSheetId &&
+                pivotRange &&
+                (0, helpers_1.isHoveredCellsWithinBounds)(pivotRange, activeCell, hoveredCell)) {
+                ids.add(pivotId);
+            }
+        });
+        // Manual border styles
+        borderStyles === null || borderStyles === void 0 ? void 0 : borderStyles.forEach(function (_a) {
+            var range = _a.range, id = _a.id;
+            if ((0, helpers_1.isHoveredCellsWithinBounds)(range, activeCell, hoveredCell)) {
+                ids.add(id);
+            }
+        });
+        // Manual border styles
+        flashingBorders === null || flashingBorders === void 0 ? void 0 : flashingBorders.forEach(function (_a) {
+            var range = _a.range, id = _a.id;
+            if (range.sheetId === currentSheetId &&
+                (0, helpers_1.isHoveredCellsWithinBounds)(range, activeCell, hoveredCell)) {
+                ids.add(id);
+            }
+        });
+        // Manual border styles
+        users === null || users === void 0 ? void 0 : users.forEach(function (_a) {
+            var userActiveCell = _a.activeCell, userId = _a.userId, selections = _a.selections;
+            if (userActiveCell &&
+                (0, helpers_1.isHoveredCellsWithinBounds)((0, grid_3.cellToArea)(userActiveCell), activeCell, hoveredCell)) {
+                ids.add(userId);
+                return;
+            }
+            selections === null || selections === void 0 ? void 0 : selections.forEach(function (sel) {
+                if ((0, helpers_1.isHoveredCellsWithinBounds)(sel.range, activeCell, hoveredCell)) {
+                    ids.add(userId);
+                }
+            });
+        });
+        // Agent suggestions
+        agentSuggestions === null || agentSuggestions === void 0 ? void 0 : agentSuggestions.forEach(function (suggestion) {
+            if (suggestion.range.sheetId === currentSheetId &&
+                (0, helpers_1.isHoveredCellsWithinBounds)(suggestion.range, activeCell, hoveredCell)) {
+                ids.add(suggestion.id);
+            }
+        });
+        // Quick Edit
+        quickEditValues === null || quickEditValues === void 0 ? void 0 : quickEditValues.forEach(function (value) {
+            if (value.range.sheetId === currentSheetId) {
+                ids.add(value.id);
+            }
+        });
+        // Auto filter
+        if (basicFilter) {
+            if ((0, helpers_1.isHoveredCellsWithinBounds)(basicFilter.range, activeCell, hoveredCell)) {
+                ids.add(basicFilter.id);
+            }
+        }
+        return ids;
+    }, [
+        currentSheetId,
+        tables,
+        pivotTables,
+        borderStyles,
+        flashingBorders,
+        users,
+        basicFilter,
+        activeCell,
+        hoveredCell,
+        agentSuggestions,
+        quickEditValues,
+    ]);
+    // Cache visible ranges ids
+    var cachedRangeIds = (0, use_memo_compare_1.useMemoCompare)(visibleIds);
+    return (0, react_1.useMemo)(function () {
+        var _a, _b;
+        var styles = [];
+        // Tables
+        tables === null || tables === void 0 ? void 0 : tables.forEach(function (table) {
+            var _a, _b, _c, _d, _e;
+            if (table.sheetId === currentSheetId) {
+                var range = table.range, id = table.id;
+                var isWithinBounds = cachedRangeIds.has(id);
+                var hasBorder = ((_a = table.bandedRange) === null || _a === void 0 ? void 0 : _a.rowProperties) ||
+                    ((_b = table.bandedRange) === null || _b === void 0 ? void 0 : _b.columnProperties);
+                var tableBorder = hasBorder && ((_c = table.bandedRange) === null || _c === void 0 ? void 0 : _c.rowProperties)
+                    ? (_e = (0, themes_1.getStringifiedColor)(getTableBorder((_d = table.bandedRange) === null || _d === void 0 ? void 0 : _d.rowProperties), theme)) !== null && _e !== void 0 ? _e : tableBorderColor
+                    : tableBorderColor;
+                styles.push({
+                    index: id,
+                    title: isWithinBounds ? table.title : undefined,
+                    type: "table",
+                    range: range,
+                    style: {
+                        strokeWidth: tableBorder || !hasBorder ? 1 : 0,
+                        stroke: tableBorder,
+                    },
+                    table: table,
+                    draggable: true,
+                });
+            }
+        });
+        // Tables
+        pivotTables === null || pivotTables === void 0 ? void 0 : pivotTables.forEach(function (pivotTable, idx) {
+            var _a;
+            if (pivotTable.targetPosition.sheetId === currentSheetId) {
+                var range = pivotTable.pivotRange, id = pivotTable.pivotId;
+                var isWithinBounds = cachedRangeIds.has(id);
+                if (range) {
+                    styles.push({
+                        index: id,
+                        title: isWithinBounds
+                            ? (_a = pivotTable.name) !== null && _a !== void 0 ? _a : "PivotTable".concat(idx + 1)
+                            : undefined,
+                        type: "pivotTable",
+                        range: range,
+                        style: {
+                            strokeWidth: 1,
+                            stroke: pivotTableBorderColor,
+                        },
+                        pivotTable: pivotTable,
+                        draggable: true,
+                    });
+                }
+            }
+        });
+        // Cleanup border styles for displaying
+        borderStyles === null || borderStyles === void 0 ? void 0 : borderStyles.forEach(function (borderStyle) {
+            var isWithinBounds = cachedRangeIds.has(borderStyle.id);
+            styles.push(tslib_1.__assign(tslib_1.__assign({}, borderStyle), { index: borderStyle.id, title: isWithinBounds ? borderStyle.title : undefined }));
+        });
+        // Cleanup border styles for displaying
+        flashingBorders === null || flashingBorders === void 0 ? void 0 : flashingBorders.forEach(function (borderStyle) {
+            // Ignore flashes that has already passed the start time
+            if (!(0, utils_1.isNil)(borderStyle.startTime) && !(0, utils_1.isNil)(borderStyle.duration)) {
+                if (borderStyle.startTime + borderStyle.duration < Date.now()) {
+                    return;
+                }
+            }
+            if (borderStyle.range.sheetId === currentSheetId) {
+                styles.push(tslib_1.__assign(tslib_1.__assign({}, borderStyle), { index: borderStyle.id }));
+            }
+        });
+        // Cleanup border styles for displaying
+        agentSuggestions === null || agentSuggestions === void 0 ? void 0 : agentSuggestions.forEach(function (agentSuggestion) {
+            if (agentSuggestion.range.sheetId === currentSheetId) {
+                styles.push({
+                    agentSuggestion: agentSuggestion,
+                    range: agentSuggestion.range,
+                    type: "suggestion",
+                    style: {
+                        strokeWidth: 1,
+                        stroke: "#FF5F1F",
+                        strokeStyle: "dashed",
+                    },
+                    index: agentSuggestion.id,
+                    draggable: false,
+                });
+            }
+        });
+        // Create styles for copied selections
+        copiedSelections === null || copiedSelections === void 0 ? void 0 : copiedSelections.forEach(function (sel) {
+            styles.push({
+                index: "copy",
+                type: "copy",
+                range: sel.range,
+                style: {
+                    strokeWidth: 2,
+                    stroke: selectionBorderColor,
+                    strokeStyle: "dashed",
+                    offset: -1,
+                },
+            });
+        });
+        // Collaborators
+        users === null || users === void 0 ? void 0 : users.forEach(function (collaborator, index) {
+            var activeCell = collaborator.activeCell, sheetId = collaborator.sheetId, userId = collaborator.userId, title = collaborator.title, style = collaborator.style, collabSelections = collaborator.selections, kind = collaborator.kind, agentInitiator = collaborator.agentInitiator;
+            if (userId === currentUserId || sheetId !== currentSheetId) {
+                return;
+            }
+            var isWithinBounds = cachedRangeIds.has(userId);
+            var defaultStyle = style !== null && style !== void 0 ? style : {
+                strokeWidth: 2,
+                stroke: (0, utils_1.getSelectionColorAtIndex)(index),
+            };
+            var customStyle = renderCollaboratorCursor === null || renderCollaboratorCursor === void 0 ? void 0 : renderCollaboratorCursor(collaborator);
+            var fallbackStyle = customStyle !== null && customStyle !== void 0 ? customStyle : defaultStyle;
+            var metadata = kind || agentInitiator
+                ? { kind: kind, agentInitiator: agentInitiator }
+                : undefined;
+            // Range-shaped selections (e.g. agent touching A1:E10). Skip ranges
+            // on inactive sheets — no point rendering collab styles for a view
+            // the user can't see. Selections may carry a `sheetId` (SheetRange)
+            // or omit it (plain GridRange — falls back to the collaborator's
+            // sheetId, which we already filtered above).
+            // The name chip renders exactly once per collaborator: on the first
+            // selection rendered for this sheet, falling back to the activeCell
+            // pin when there is none.
+            var hasTitledSelection = false;
+            collabSelections === null || collabSelections === void 0 ? void 0 : collabSelections.forEach(function (sel, selIndex) {
+                var selSheetId = sel.range.sheetId;
+                if (selSheetId != null && selSheetId !== currentSheetId) {
+                    return;
+                }
+                styles.push({
+                    index: "".concat(userId, ":sel:").concat(selIndex),
+                    range: sel.range,
+                    style: fallbackStyle,
+                    title: isWithinBounds && !hasTitledSelection ? title : undefined,
+                    type: "collaborator",
+                    metadata: metadata,
+                });
+                hasTitledSelection = true;
+            });
+            // activeCell pin — always rendered alongside any range selections.
+            if (activeCell) {
+                styles.push({
+                    index: userId,
+                    range: (0, grid_3.cellToArea)(activeCell),
+                    style: fallbackStyle,
+                    title: isWithinBounds && !hasTitledSelection ? title : undefined,
+                    type: "collaborator",
+                    metadata: metadata,
+                });
+            }
+        });
+        // Create basicFilter styes
+        if (basicFilter) {
+            var range = basicFilter.range, id = basicFilter.id;
+            var isWithinBounds = cachedRangeIds.has(id);
+            if (range) {
+                styles.push({
+                    index: id,
+                    type: "table",
+                    range: range,
+                    style: {
+                        strokeWidth: 1,
+                        stroke: tableBorderColor,
+                    },
+                    title: isWithinBounds ? (_a = basicFilter.title) !== null && _a !== void 0 ? _a : undefined : undefined,
+                    draggable: false,
+                });
+            }
+        }
+        // Quick Edit
+        quickEditValues === null || quickEditValues === void 0 ? void 0 : quickEditValues.forEach(function (value) {
+            if (value.range.sheetId === currentSheetId) {
+                styles.push({
+                    index: value.id,
+                    type: "quickedit",
+                    range: value.range,
+                    style: {
+                        strokeWidth: 1,
+                        stroke: "#FFA500",
+                        strokeStyle: "dashed",
+                    },
+                });
+            }
+        });
+        var draggedSelectionTitle = getDraggedSelectionTitle(initialDraggedSelection, tables, basicFilter);
+        // Create styles when a selection is dragged
+        // We need to detect if user is dragging a table
+        // column. If the table column is being dragged inside
+        // a table, style it differently
+        if (draggedSelection) {
+            var _c = tslib_1.__read((0, exports.getSelectedTableColumnFromSelection)(draggedSelection, tables), 3), _1 = _c[0], draggedColumn = _c[1], isDraggingTable = _c[2];
+            var draggingDirection = draggedSelection.range.startColumnIndex >
+                ((_b = initialDraggedSelection === null || initialDraggedSelection === void 0 ? void 0 : initialDraggedSelection.range.startColumnIndex) !== null && _b !== void 0 ? _b : 0)
+                ? grid_1.Direction.Right
+                : grid_1.Direction.Left;
+            styles.push(tslib_1.__assign(tslib_1.__assign({}, draggedSelection), { title: draggedSelectionTitle !== null && draggedSelectionTitle !== void 0 ? draggedSelectionTitle : getAddressFromSelection === null || getAddressFromSelection === void 0 ? void 0 : getAddressFromSelection(draggedSelection, undefined), index: "drag", isDragging: true, style: tslib_1.__assign({ strokeStyle: "dashed", strokeWidth: 2, stroke: selectionDragBorderColor, offset: -1 }, (draggedColumn && !isDraggingTable
+                    ? getDraggedColumnStyle(draggingDirection, selectionBorderColor)
+                    : {})) }));
+        }
+        return styles;
+    }, [
+        draggedSelection,
+        initialDraggedSelection,
+        currentSheetId,
+        users,
+        currentUserId,
+        borderStyles,
+        agentSuggestions,
+        flashingBorders,
+        copiedSelections,
+        selectionDragBorderColor,
+        tables,
+        pivotTables,
+        basicFilter,
+        tableBorderColor,
+        selectionBorderColor,
+        cachedRangeIds,
+        pivotTableBorderColor,
+        getAddressFromSelection,
+        theme,
+        quickEditValues,
+        renderCollaboratorCursor,
+    ]);
+};
+exports.useBorderStyles = useBorderStyles;

package/dist/cjs/hooks/use-callback-ref.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+export declare const useCallbackRef: <T extends (...args: any[]) => any>(callback: T | undefined) => T;
+//# sourceMappingURL=use-callback-ref.d.ts.map

package/dist/cjs/hooks/use-callback-ref.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-callback-ref.d.ts","sourceRoot":"","sources":["../../../hooks/use-callback-ref.ts"],"names":[],"mappings":"AAIA;;;GAGG;AAGH,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EAC9D,UAAU,CAAC,GAAG,SAAS,KACtB,CASF,CAAC"}

package/dist/cjs/hooks/use-callback-ref.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCallbackRef = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var use_isomorphic_layout_effect_1 = require("./use-isomorphic-layout-effect");
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var useCallbackRef = function (callback) {
+    var callbackRef = (0, react_1.useRef)(callback);
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
+        callbackRef.current = callback;
+    });
+    // https://github.com/facebook/react/issues/19240
+    return (0, react_1.useMemo)(function () { return (function () {
+        var _a;
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        return (_a = callbackRef.current) === null || _a === void 0 ? void 0 : _a.call.apply(_a, tslib_1.__spreadArray([callbackRef], tslib_1.__read(args), false));
+    }); }, []);
+};
+exports.useCallbackRef = useCallbackRef;

package/dist/cjs/hooks/use-cell-diff-highlight.d.ts

@@ -0,0 +1,43 @@
+import type { CellFormat } from "@rowsncolumns/common-types";
+import type { CellDiff, CellDiffHighlight, CellDiffState, DiffHighlightColors } from "@rowsncolumns/version-comparison";
+export type UseCellDiffHighlightOptions = {
+    /** Custom colors for diff highlighting */
+    colors?: Partial<DiffHighlightColors>;
+};
+export type DiffHighlightProps = {
+    /** Background color override */
+    backgroundColor: string;
+    /** Whether to apply strikethrough */
+    strikethrough: boolean;
+    /** Text color override (for deleted cells) */
+    textColor?: string;
+    /** Diff state */
+    diffState: CellDiffState;
+    /** Old formatted value (for tooltip) */
+    oldFormattedValue?: string;
+    /** Old format (for tooltip) */
+    oldFormat?: CellFormat;
+    /** Whether only format changed */
+    formatOnlyChange?: boolean;
+};
+export type UseCellDiffHighlightReturn = {
+    /**
+     * Get diff highlight props for a cell
+     * Returns null if no diff or comparison not active
+     */
+    getDiffHighlightProps: (sheetId: number, rowIndex: number, columnIndex: number) => DiffHighlightProps | null;
+    /**
+     * Merge cell format with diff highlighting
+     * Returns the original format with diff styling applied
+     */
+    mergeCellFormatWithDiff: (cellFormat: CellFormat | undefined | null, sheetId: number, rowIndex: number, columnIndex: number) => CellFormat | undefined | null;
+    /**
+     * Get diff highlight info for tooltip display
+     */
+    getDiffHighlight: (sheetId: number, rowIndex: number, columnIndex: number) => CellDiffHighlight | null;
+};
+/**
+ * Hook for applying diff highlighting to cells
+ */
+export declare const useCellDiffHighlight: (getCellDiff: ((sheetId: number, rowIndex: number, columnIndex: number) => CellDiff | null) | undefined, options?: UseCellDiffHighlightOptions) => UseCellDiffHighlightReturn;
+//# sourceMappingURL=use-cell-diff-highlight.d.ts.map

package/dist/cjs/hooks/use-cell-diff-highlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-cell-diff-highlight.d.ts","sourceRoot":"","sources":["../../../hooks/use-cell-diff-highlight.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,4BAA4B,CAAC;AAEzE,OAAO,KAAK,EACV,QAAQ,EACR,iBAAiB,EACjB,aAAa,EACb,mBAAmB,EACpB,MAAM,kCAAkC,CAAC;AAG1C,MAAM,MAAM,2BAA2B,GAAG;IACxC,0CAA0C;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gCAAgC;IAChC,eAAe,EAAE,MAAM,CAAC;IACxB,qCAAqC;IACrC,aAAa,EAAE,OAAO,CAAC;IACvB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB;IACjB,SAAS,EAAE,aAAa,CAAC;IACzB,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC;;;OAGG;IACH,qBAAqB,EAAE,CACrB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,KAChB,kBAAkB,GAAG,IAAI,CAAC;IAE/B;;;OAGG;IACH,uBAAuB,EAAE,CACvB,UAAU,EAAE,UAAU,GAAG,SAAS,GAAG,IAAI,EACzC,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,KAChB,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC;IAEnC;;OAEG;IACH,gBAAgB,EAAE,CAChB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,KAChB,iBAAiB,GAAG,IAAI,CAAC;CAC/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAC/B,aACI,CAAC,CACC,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,KAChB,QAAQ,GAAG,IAAI,CAAC,GACrB,SAAS,EACb,UAAU,2BAA2B,KACpC,0BAqHF,CAAC"}

package/dist/cjs/hooks/use-cell-diff-highlight.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCellDiffHighlight = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var version_comparison_1 = require("@rowsncolumns/version-comparison");
+/**
+ * Hook for applying diff highlighting to cells
+ */
+var useCellDiffHighlight = function (getCellDiff, options) {
+    // Merge colors with defaults
+    var colors = (0, react_1.useMemo)(function () { return (tslib_1.__assign(tslib_1.__assign({}, version_comparison_1.DEFAULT_DIFF_COLORS), options === null || options === void 0 ? void 0 : options.colors)); }, [options === null || options === void 0 ? void 0 : options.colors]);
+    // Get background color for diff state
+    var getBackgroundColor = (0, react_1.useCallback)(function (state) {
+        switch (state) {
+            case "added":
+                return colors.addedBackground;
+            case "deleted":
+                return colors.deletedBackground;
+            case "modified":
+                return colors.modifiedBackground;
+            default:
+                return "transparent";
+        }
+    }, [colors]);
+    // Get diff highlight props for a cell
+    var getDiffHighlightProps = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a, _b, _c, _d;
+        if (!getCellDiff)
+            return null;
+        var diff = getCellDiff(sheetId, rowIndex, columnIndex);
+        if (!diff || diff.state === "unchanged")
+            return null;
+        return {
+            backgroundColor: getBackgroundColor(diff.state),
+            strikethrough: diff.state === "deleted",
+            textColor: diff.state === "deleted" ? colors.deletedTextColor : undefined,
+            diffState: diff.state,
+            oldFormattedValue: (_a = diff.detail) === null || _a === void 0 ? void 0 : _a.oldFormattedValue,
+            oldFormat: (_b = diff.detail) === null || _b === void 0 ? void 0 : _b.oldFormat,
+            formatOnlyChange: ((_c = diff.detail) === null || _c === void 0 ? void 0 : _c.formatChanged) && !((_d = diff.detail) === null || _d === void 0 ? void 0 : _d.valueChanged),
+        };
+    }, [getCellDiff, getBackgroundColor, colors.deletedTextColor]);
+    // Merge cell format with diff highlighting
+    var mergeCellFormatWithDiff = (0, react_1.useCallback)(function (cellFormat, sheetId, rowIndex, columnIndex) {
+        var _a;
+        var diffProps = getDiffHighlightProps(sheetId, rowIndex, columnIndex);
+        if (!diffProps)
+            return cellFormat;
+        // Build text format with diff styling
+        var textFormat = tslib_1.__assign({}, ((_a = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.textFormat) !== null && _a !== void 0 ? _a : {}));
+        // Apply strikethrough for deleted cells
+        if (diffProps.strikethrough) {
+            textFormat.strikethrough = true;
+        }
+        // Apply text color for deleted cells
+        if (diffProps.textColor) {
+            textFormat.color = diffProps.textColor;
+        }
+        return tslib_1.__assign(tslib_1.__assign({}, (cellFormat !== null && cellFormat !== void 0 ? cellFormat : {})), { backgroundColor: diffProps.backgroundColor, textFormat: textFormat });
+    }, [getDiffHighlightProps]);
+    // Get diff highlight info for tooltip
+    var getDiffHighlight = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a, _b, _c, _d;
+        if (!getCellDiff)
+            return null;
+        var diff = getCellDiff(sheetId, rowIndex, columnIndex);
+        if (!diff || diff.state === "unchanged")
+            return null;
+        return {
+            diffState: diff.state,
+            oldFormattedValue: (_a = diff.detail) === null || _a === void 0 ? void 0 : _a.oldFormattedValue,
+            oldFormat: (_b = diff.detail) === null || _b === void 0 ? void 0 : _b.oldFormat,
+            formatOnlyChange: ((_c = diff.detail) === null || _c === void 0 ? void 0 : _c.formatChanged) && !((_d = diff.detail) === null || _d === void 0 ? void 0 : _d.valueChanged),
+        };
+    }, [getCellDiff]);
+    return {
+        getDiffHighlightProps: getDiffHighlightProps,
+        mergeCellFormatWithDiff: mergeCellFormatWithDiff,
+        getDiffHighlight: getDiffHighlight,
+    };
+};
+exports.useCellDiffHighlight = useCellDiffHighlight;

package/dist/cjs/hooks/use-cell-popover.d.ts

@@ -0,0 +1,55 @@
+import { type CellInterface, type CellPosition, type ScrollCoords } from "@rowsncolumns/grid";
+import React from "react";
+import type { CanvasGridProps } from "../components/canvas-grid/typings";
+import type { SheetCoordinate, SheetRange } from "../types";
+export type UseCellPopoverProps = {
+    sheetId: number;
+    /**
+     * Get cell popover
+     */
+    getCellPopoverContent?: CanvasGridProps["getCellPopoverContent"];
+    /**
+     * Trigger active sheet change
+     */
+    onChangeActiveSheet?: CanvasGridProps["onChangeActiveSheet"];
+    /**
+     * Grid references
+     */
+    getCellOffsetFromCoords(cell: CellInterface): CellPosition | undefined;
+    /**
+     * Get current scroll position
+     */
+    getScrollPosition: () => ScrollCoords | undefined;
+    /**
+     * Is frozen row
+     * @param rowIndex
+     */
+    isFrozenRow(rowIndex: number): boolean;
+    /**
+     * Is frozen column
+     * @param columnIndex
+     */
+    isFrozenColumn(columnIndex: number): boolean;
+};
+export type CellPopoverFrameProps = CellPosition & ScrollCoords & {
+    children?: React.ReactNode;
+    isOpen?: boolean;
+    onOpenChange?(value: boolean): void;
+};
+/**
+ * Cell Popover
+ * @param param0
+ * @returns
+ */
+export declare const useCellPopover: ({ sheetId, getCellOffsetFromCoords, getScrollPosition, getCellPopoverContent, isFrozenColumn, isFrozenRow, onChangeActiveSheet, }: UseCellPopoverProps) => {
+    popoverRange: SheetRange | SheetCoordinate | undefined;
+    popoverComponent: React.JSX.Element | null;
+    showCellPopover: (popoverRange: SheetCoordinate | SheetRange | undefined, content: React.ReactNode | React.ComponentType | undefined | null) => void;
+    hideCellPopover: (isOpen?: boolean) => void;
+};
+/**
+ * Default cell Popover
+ * @param props
+ */
+export declare const DefaultCellPopover: ({ isOpen, onOpenChange, x, y, height, children, }: CellPopoverFrameProps) => React.JSX.Element;
+//# sourceMappingURL=use-cell-popover.d.ts.map

package/dist/cjs/hooks/use-cell-popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-cell-popover.d.ts","sourceRoot":"","sources":["../../../hooks/use-cell-popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAC;AAQ5B,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAGzE,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI5D,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,qBAAqB,CAAC,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAC;IACjE;;OAEG;IACH,mBAAmB,CAAC,EAAE,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAC7D;;OAEG;IACH,uBAAuB,CAAC,IAAI,EAAE,aAAa,GAAG,YAAY,GAAG,SAAS,CAAC;IACvE;;OAEG;IACH,iBAAiB,EAAE,MAAM,YAAY,GAAG,SAAS,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IACvC;;;OAGG;IACH,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAC9C,YAAY,GAAG;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CACrC,CAAC;AAEJ;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,mIAQ5B,mBAAmB;;;oCAYA,eAAe,GAAG,UAAU,GAAG,SAAS,WAC7C,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,GAAG,SAAS,GAAG,IAAI;+BAkBzD,OAAO;CA4DtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,mDAOhC,qBAAqB,sBAmCvB,CAAC"}