@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/hooks/use-border-styles.d.ts

@@ -0,0 +1,31 @@
+import type { AreaStyle, CellInterface, SelectionArea } from "@rowsncolumns/grid";
+import type { CanvasGridProps, RangeStyle, SheetRangeBorderStyle, SpreadsheetTheme } from "../components/canvas-grid/typings";
+import type { CalculatedColumn, Column, TableView } from "../types";
+import type { useFlash } from "./use-flash";
+export type UseBorderStylesProps = {
+    activeCell?: CellInterface | null;
+    sheetId: number;
+    hoveredCell?: CellInterface | null;
+    tables?: CanvasGridProps["tables"];
+    pivotTables?: CanvasGridProps["pivotTables"];
+    basicFilter?: CanvasGridProps["basicFilter"];
+    users?: CanvasGridProps["users"];
+    userId?: CanvasGridProps["userId"];
+    renderCollaboratorCursor?: CanvasGridProps["renderCollaboratorCursor"];
+    borderStyles?: CanvasGridProps["borderStyles"];
+    flashingBorders?: ReturnType<typeof useFlash>["flashingBorders"];
+    copiedSelections?: SelectionArea[];
+    draggedSelection?: SelectionArea;
+    initialDraggedSelection?: SelectionArea;
+    tableBorderColor: string;
+    pivotTableBorderColor?: string;
+    selectionDragBorderColor: string;
+    selectionBorderColor?: string;
+    agentSuggestionBorderColor?: string;
+    theme: SpreadsheetTheme;
+    agentSuggestions: CanvasGridProps["agentSuggestions"];
+    quickEditValues: SheetRangeBorderStyle[];
+};
+export declare const getSelectedTableColumnFromSelection: (selection: SelectionArea<AreaStyle>, tables?: TableView[] | undefined | null) => readonly [TableView, (Column | CalculatedColumn)[], boolean] | readonly never[];
+export declare const useBorderStyles: ({ draggedSelection, initialDraggedSelection, users, userId: currentUserId, renderCollaboratorCursor, sheetId: currentSheetId, borderStyles, flashingBorders, copiedSelections, selectionDragBorderColor, selectionBorderColor, tableBorderColor, pivotTableBorderColor, tables, pivotTables, basicFilter, hoveredCell, activeCell, theme, agentSuggestions, quickEditValues, }: UseBorderStylesProps) => RangeStyle[];
+//# sourceMappingURL=use-border-styles.d.ts.map

package/dist/esm/hooks/use-border-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-border-styles.d.ts","sourceRoot":"","sources":["../../../hooks/use-border-styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,aAAa,EAEd,MAAM,oBAAoB,CAAC;AAS5B,OAAO,KAAK,EACV,eAAe,EACf,UAAU,EACV,qBAAqB,EACrB,gBAAgB,EACjB,MAAM,mCAAmC,CAAC;AAI3C,OAAO,KAAK,EAEV,gBAAgB,EAChB,MAAM,EAEN,SAAS,EACV,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG5C,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC7C,WAAW,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC7C,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IACnC,wBAAwB,CAAC,EAAE,eAAe,CAAC,0BAA0B,CAAC,CAAC;IACvE,YAAY,CAAC,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;IAC/C,eAAe,CAAC,EAAE,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,iBAAiB,CAAC,CAAC;IACjE,gBAAgB,CAAC,EAAE,aAAa,EAAE,CAAC;IACnC,gBAAgB,CAAC,EAAE,aAAa,CAAC;IACjC,uBAAuB,CAAC,EAAE,aAAa,CAAC;IACxC,gBAAgB,EAAE,MAAM,CAAC;IACzB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,wBAAwB,EAAE,MAAM,CAAC;IACjC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,KAAK,EAAE,gBAAgB,CAAC;IACxB,gBAAgB,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACtD,eAAe,EAAE,qBAAqB,EAAE,CAAC;CAC1C,CAAC;AA8BF,eAAO,MAAM,mCAAmC,GAC9C,WAAW,aAAa,CAAC,SAAS,CAAC,EACnC,SAAQ,SAAS,EAAE,GAAG,SAAS,GAAG,IAAS,oFAoC5C,CAAC;AAyCF,eAAO,MAAM,eAAe,GAAI,gXAsB7B,oBAAoB,iBAwYtB,CAAC"}

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

@@ -0,0 +1,423 @@
+import { Direction } from "@rowsncolumns/grid";
+import { areaInsideArea } from "@rowsncolumns/grid";
+import { cellToArea } from "@rowsncolumns/grid";
+import { isAreasEqual } from "@rowsncolumns/grid";
+import { getSelectionColorAtIndex, isNil } from "@rowsncolumns/utils";
+import { useMemo } from "react";
+import { useGetAddressFromSelection } from "../atoms";
+import { FROZEN_EMPTY_ARRAY, SELECTION_BORDER } from "../config";
+import { isHoveredCellsWithinBounds } from "../helpers";
+import { getStringifiedColor } from "../themes";
+import { useMemoCompare } from "./use-memo-compare";
+/**
+ * Checks if the user is dragging a table or basicFilter
+ * @param selection
+ * @param tables
+ * @param basicFilter
+ * @returns
+ */
+const getDraggedSelectionTitle = (selection, tables = [], basicFilter) => {
+    if (!selection) {
+        return undefined;
+    }
+    if (basicFilter && isAreasEqual(basicFilter.range, selection.range)) {
+        return basicFilter.title;
+    }
+    // Column selection
+    const [table, draggeedColumn, isDraggingTable] = getSelectedTableColumnFromSelection(selection, tables);
+    if (draggeedColumn && !isDraggingTable) {
+        return draggeedColumn.map((col) => col.name).join("-");
+    }
+    return isDraggingTable && table ? table.title : null;
+};
+export const getSelectedTableColumnFromSelection = (selection, tables = []) => {
+    if (tables) {
+        // Validate if the selection is inside a table
+        for (const table of tables) {
+            if (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) {
+                    const columns = [];
+                    const isFullTable = table.range.startColumnIndex === selection.range.startColumnIndex &&
+                        table.range.endColumnIndex === selection.range.endColumnIndex;
+                    if (isFullTable) {
+                        columns.push(...(table.columns ?? []));
+                    }
+                    else {
+                        for (let columnIndex = selection.range.startColumnIndex; columnIndex <= selection.range.endColumnIndex; columnIndex++) {
+                            const column = table.columns?.[columnIndex - table.range.startColumnIndex];
+                            if (column)
+                                columns.push(column);
+                        }
+                    }
+                    return [table, columns, isFullTable];
+                }
+            }
+        }
+    }
+    return FROZEN_EMPTY_ARRAY;
+};
+const getDraggedColumnStyle = (direction, borderColor) => {
+    switch (direction) {
+        case 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
+const getTableBorder = (properties) => {
+    if (properties.headerBorder) {
+        return properties.headerBorder.left?.color;
+    }
+    if (properties.firstBandBorder) {
+        return properties.firstBandBorder.bottom?.color;
+    }
+    if (properties.headerColor) {
+        return properties.headerColor;
+    }
+};
+export const useBorderStyles = ({ draggedSelection, initialDraggedSelection, users, userId: currentUserId, renderCollaboratorCursor, sheetId: currentSheetId, borderStyles, flashingBorders, copiedSelections, selectionDragBorderColor, selectionBorderColor = SELECTION_BORDER, tableBorderColor, pivotTableBorderColor = tableBorderColor, tables, pivotTables, basicFilter, hoveredCell, activeCell, theme, agentSuggestions, quickEditValues, }) => {
+    const getAddressFromSelection = useGetAddressFromSelection();
+    /**
+     * Calculate all area ids that is active
+     * This is used so that we dont re-calc
+     * borderStyles
+     */
+    const visibleIds = useMemo(() => {
+        // const ids: (number | string)[] = [];
+        const ids = new Set();
+        // Tables
+        tables?.forEach(({ range, id, sheetId }) => {
+            if (sheetId === currentSheetId &&
+                isHoveredCellsWithinBounds(range, activeCell, hoveredCell)) {
+                ids.add(id);
+            }
+        });
+        // Pivot Tables
+        pivotTables?.forEach(({ pivotId, targetPosition, pivotRange }) => {
+            if (targetPosition.sheetId === currentSheetId &&
+                pivotRange &&
+                isHoveredCellsWithinBounds(pivotRange, activeCell, hoveredCell)) {
+                ids.add(pivotId);
+            }
+        });
+        // Manual border styles
+        borderStyles?.forEach(({ range, id }) => {
+            if (isHoveredCellsWithinBounds(range, activeCell, hoveredCell)) {
+                ids.add(id);
+            }
+        });
+        // Manual border styles
+        flashingBorders?.forEach(({ range, id }) => {
+            if (range.sheetId === currentSheetId &&
+                isHoveredCellsWithinBounds(range, activeCell, hoveredCell)) {
+                ids.add(id);
+            }
+        });
+        // Manual border styles
+        users?.forEach(({ activeCell: userActiveCell, userId, selections }) => {
+            if (userActiveCell &&
+                isHoveredCellsWithinBounds(cellToArea(userActiveCell), activeCell, hoveredCell)) {
+                ids.add(userId);
+                return;
+            }
+            selections?.forEach((sel) => {
+                if (isHoveredCellsWithinBounds(sel.range, activeCell, hoveredCell)) {
+                    ids.add(userId);
+                }
+            });
+        });
+        // Agent suggestions
+        agentSuggestions?.forEach((suggestion) => {
+            if (suggestion.range.sheetId === currentSheetId &&
+                isHoveredCellsWithinBounds(suggestion.range, activeCell, hoveredCell)) {
+                ids.add(suggestion.id);
+            }
+        });
+        // Quick Edit
+        quickEditValues?.forEach((value) => {
+            if (value.range.sheetId === currentSheetId) {
+                ids.add(value.id);
+            }
+        });
+        // Auto filter
+        if (basicFilter) {
+            if (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
+    const cachedRangeIds = useMemoCompare(visibleIds);
+    return useMemo(() => {
+        const styles = [];
+        // Tables
+        tables?.forEach((table) => {
+            if (table.sheetId === currentSheetId) {
+                const { range, id } = table;
+                const isWithinBounds = cachedRangeIds.has(id);
+                const hasBorder = table.bandedRange?.rowProperties ||
+                    table.bandedRange?.columnProperties;
+                const tableBorder = hasBorder && table.bandedRange?.rowProperties
+                    ? getStringifiedColor(getTableBorder(table.bandedRange?.rowProperties), theme) ?? tableBorderColor
+                    : tableBorderColor;
+                styles.push({
+                    index: id,
+                    title: isWithinBounds ? table.title : undefined,
+                    type: "table",
+                    range,
+                    style: {
+                        strokeWidth: tableBorder || !hasBorder ? 1 : 0,
+                        stroke: tableBorder,
+                    },
+                    table,
+                    draggable: true,
+                });
+            }
+        });
+        // Tables
+        pivotTables?.forEach((pivotTable, idx) => {
+            if (pivotTable.targetPosition.sheetId === currentSheetId) {
+                const { pivotRange: range, pivotId: id } = pivotTable;
+                const isWithinBounds = cachedRangeIds.has(id);
+                if (range) {
+                    styles.push({
+                        index: id,
+                        title: isWithinBounds
+                            ? pivotTable.name ?? `PivotTable${idx + 1}`
+                            : undefined,
+                        type: "pivotTable",
+                        range,
+                        style: {
+                            strokeWidth: 1,
+                            stroke: pivotTableBorderColor,
+                        },
+                        pivotTable,
+                        draggable: true,
+                    });
+                }
+            }
+        });
+        // Cleanup border styles for displaying
+        borderStyles?.forEach((borderStyle) => {
+            const isWithinBounds = cachedRangeIds.has(borderStyle.id);
+            styles.push({
+                ...borderStyle,
+                index: borderStyle.id,
+                title: isWithinBounds ? borderStyle.title : undefined,
+            });
+        });
+        // Cleanup border styles for displaying
+        flashingBorders?.forEach((borderStyle) => {
+            // Ignore flashes that has already passed the start time
+            if (!isNil(borderStyle.startTime) && !isNil(borderStyle.duration)) {
+                if (borderStyle.startTime + borderStyle.duration < Date.now()) {
+                    return;
+                }
+            }
+            if (borderStyle.range.sheetId === currentSheetId) {
+                styles.push({
+                    ...borderStyle,
+                    index: borderStyle.id,
+                });
+            }
+        });
+        // Cleanup border styles for displaying
+        agentSuggestions?.forEach((agentSuggestion) => {
+            if (agentSuggestion.range.sheetId === currentSheetId) {
+                styles.push({
+                    agentSuggestion,
+                    range: agentSuggestion.range,
+                    type: "suggestion",
+                    style: {
+                        strokeWidth: 1,
+                        stroke: "#FF5F1F",
+                        strokeStyle: "dashed",
+                    },
+                    index: agentSuggestion.id,
+                    draggable: false,
+                });
+            }
+        });
+        // Create styles for copied selections
+        copiedSelections?.forEach((sel) => {
+            styles.push({
+                index: "copy",
+                type: "copy",
+                range: sel.range,
+                style: {
+                    strokeWidth: 2,
+                    stroke: selectionBorderColor,
+                    strokeStyle: "dashed",
+                    offset: -1,
+                },
+            });
+        });
+        // Collaborators
+        users?.forEach((collaborator, index) => {
+            const { activeCell, sheetId, userId, title, style, selections: collabSelections, kind, agentInitiator, } = collaborator;
+            if (userId === currentUserId || sheetId !== currentSheetId) {
+                return;
+            }
+            const isWithinBounds = cachedRangeIds.has(userId);
+            const defaultStyle = style ?? {
+                strokeWidth: 2,
+                stroke: getSelectionColorAtIndex(index),
+            };
+            const customStyle = renderCollaboratorCursor?.(collaborator);
+            const fallbackStyle = customStyle ?? defaultStyle;
+            const metadata = kind || agentInitiator
+                ? { kind, 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.
+            let hasTitledSelection = false;
+            collabSelections?.forEach((sel, selIndex) => {
+                const selSheetId = sel.range.sheetId;
+                if (selSheetId != null && selSheetId !== currentSheetId) {
+                    return;
+                }
+                styles.push({
+                    index: `${userId}:sel:${selIndex}`,
+                    range: sel.range,
+                    style: fallbackStyle,
+                    title: isWithinBounds && !hasTitledSelection ? title : undefined,
+                    type: "collaborator",
+                    metadata,
+                });
+                hasTitledSelection = true;
+            });
+            // activeCell pin — always rendered alongside any range selections.
+            if (activeCell) {
+                styles.push({
+                    index: userId,
+                    range: cellToArea(activeCell),
+                    style: fallbackStyle,
+                    title: isWithinBounds && !hasTitledSelection ? title : undefined,
+                    type: "collaborator",
+                    metadata,
+                });
+            }
+        });
+        // Create basicFilter styes
+        if (basicFilter) {
+            const { range, id } = basicFilter;
+            const isWithinBounds = cachedRangeIds.has(id);
+            if (range) {
+                styles.push({
+                    index: id,
+                    type: "table",
+                    range,
+                    style: {
+                        strokeWidth: 1,
+                        stroke: tableBorderColor,
+                    },
+                    title: isWithinBounds ? basicFilter.title ?? undefined : undefined,
+                    draggable: false,
+                });
+            }
+        }
+        // Quick Edit
+        quickEditValues?.forEach((value) => {
+            if (value.range.sheetId === currentSheetId) {
+                styles.push({
+                    index: value.id,
+                    type: "quickedit",
+                    range: value.range,
+                    style: {
+                        strokeWidth: 1,
+                        stroke: "#FFA500",
+                        strokeStyle: "dashed",
+                    },
+                });
+            }
+        });
+        const 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) {
+            const [_, draggedColumn, isDraggingTable] = getSelectedTableColumnFromSelection(draggedSelection, tables);
+            const draggingDirection = draggedSelection.range.startColumnIndex >
+                (initialDraggedSelection?.range.startColumnIndex ?? 0)
+                ? Direction.Right
+                : Direction.Left;
+            styles.push({
+                ...draggedSelection,
+                title: draggedSelectionTitle ??
+                    getAddressFromSelection?.(draggedSelection, undefined),
+                index: "drag",
+                isDragging: true,
+                style: {
+                    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,
+    ]);
+};

package/dist/esm/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/esm/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/esm/hooks/use-callback-ref.js

@@ -0,0 +1,15 @@
+import { useMemo, useRef } from "react";
+import { useIsomorphicLayoutEffect } from "./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
+export const useCallbackRef = (callback) => {
+    const callbackRef = useRef(callback);
+    useIsomorphicLayoutEffect(() => {
+        callbackRef.current = callback;
+    });
+    // https://github.com/facebook/react/issues/19240
+    return useMemo(() => ((...args) => callbackRef.current?.(...args)), []);
+};

package/dist/esm/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/esm/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/esm/hooks/use-cell-diff-highlight.js

@@ -0,0 +1,84 @@
+import { useCallback, useMemo } from "react";
+import { DEFAULT_DIFF_COLORS } from "@rowsncolumns/version-comparison";
+/**
+ * Hook for applying diff highlighting to cells
+ */
+export const useCellDiffHighlight = (getCellDiff, options) => {
+    // Merge colors with defaults
+    const colors = useMemo(() => ({
+        ...DEFAULT_DIFF_COLORS,
+        ...options?.colors,
+    }), [options?.colors]);
+    // Get background color for diff state
+    const getBackgroundColor = useCallback((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
+    const getDiffHighlightProps = useCallback((sheetId, rowIndex, columnIndex) => {
+        if (!getCellDiff)
+            return null;
+        const 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: diff.detail?.oldFormattedValue,
+            oldFormat: diff.detail?.oldFormat,
+            formatOnlyChange: diff.detail?.formatChanged && !diff.detail?.valueChanged,
+        };
+    }, [getCellDiff, getBackgroundColor, colors.deletedTextColor]);
+    // Merge cell format with diff highlighting
+    const mergeCellFormatWithDiff = useCallback((cellFormat, sheetId, rowIndex, columnIndex) => {
+        const diffProps = getDiffHighlightProps(sheetId, rowIndex, columnIndex);
+        if (!diffProps)
+            return cellFormat;
+        // Build text format with diff styling
+        const textFormat = {
+            ...(cellFormat?.textFormat ?? {}),
+        };
+        // 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 {
+            ...(cellFormat ?? {}),
+            backgroundColor: diffProps.backgroundColor,
+            textFormat,
+        };
+    }, [getDiffHighlightProps]);
+    // Get diff highlight info for tooltip
+    const getDiffHighlight = useCallback((sheetId, rowIndex, columnIndex) => {
+        if (!getCellDiff)
+            return null;
+        const diff = getCellDiff(sheetId, rowIndex, columnIndex);
+        if (!diff || diff.state === "unchanged")
+            return null;
+        return {
+            diffState: diff.state,
+            oldFormattedValue: diff.detail?.oldFormattedValue,
+            oldFormat: diff.detail?.oldFormat,
+            formatOnlyChange: diff.detail?.formatChanged && !diff.detail?.valueChanged,
+        };
+    }, [getCellDiff]);
+    return {
+        getDiffHighlightProps,
+        mergeCellFormatWithDiff,
+        getDiffHighlight,
+    };
+};

package/dist/esm/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