@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/components/cell/typings.d.ts

@@ -0,0 +1,190 @@
+import type { StructuredResult } from "@rowsncolumns/common-types";
+import type { CellInterface, RendererProps } from "@rowsncolumns/grid";
+import type { TextFormatRun } from "@rowsncolumns/ui";
+import type { CellFormat, Color, SortOrder, WrapStrategy } from "../../types";
+import type { CanvasGridProps, SpreadsheetTheme } from "../canvas-grid/typings";
+import { CellRendererProps } from "../../hooks/use-cell-renderer";
+export type CellProps<S extends StructuredResult = StructuredResult> = RendererProps & {
+    /**
+     * StructuredValue value of a cell
+     */
+    structuredValue?: S;
+    /**
+     * Displayed value
+     */
+    value?: string;
+    /**
+     * Text format
+     */
+    cellFormat: CellFormat | undefined | null;
+    /**
+     * Cell padding
+     */
+    padding?: number;
+    /**
+     * Text line height
+     */
+    lineHeight?: number;
+    /**
+     * Wrap strategy
+     */
+    wrapStrategy?: WrapStrategy;
+    /**
+     * Scale factor
+     */
+    scale?: number;
+    /**
+     * Image url
+     */
+    imageUrl?: string;
+    /**
+     * Background color of chip
+     */
+    chipBackgroundColor?: string;
+    /**
+     * Default color of the text
+     */
+    defaultColor?: string;
+    /**
+     * Default font family
+     */
+    defaultFontfamily?: string;
+    /**
+     * Default background color of the cell
+     */
+    defaultBackgroundColor?: string;
+    /**
+     * Color of the filter icon
+     */
+    filterIconColor?: string;
+    /**
+     * Show a checkbox
+     */
+    showCheckbox?: boolean;
+    /**
+     * Is the checkbox checked
+     */
+    isChecked?: boolean;
+    /**
+     * Data validation failures
+     */
+    isInvalid?: boolean;
+    /**
+     * Formula errors
+     */
+    isError?: boolean;
+    /**
+     * Show dropdown arrow
+     */
+    showArrow?: boolean;
+    /**
+     * Show filter icon
+     */
+    showFilter?: boolean | null;
+    /**
+     * Show note
+     */
+    showNote?: boolean;
+    /**
+     * Show comment
+     */
+    showComment?: boolean;
+    /**
+     * Is this a calculated column cell
+     */
+    isCalculatedColumn?: boolean;
+    /**
+     * Show calculated column icon
+     */
+    showCalculatedColumnIcon?: boolean;
+    /**
+     * Show text as chip
+     */
+    showChip?: boolean;
+    /**
+     * Is this column is being filtered
+     */
+    isFilterActive?: boolean | null;
+    /**
+     * Sort order of the table of filter column
+     */
+    sortOrder?: SortOrder | null;
+    /**
+     * Can text overflow
+     */
+    enableOverflow?: boolean;
+    /**
+     * Width of the cell
+     */
+    cellWidth?: number;
+    showGridLines?: boolean | null;
+    /**
+     * Width of the text in the cell
+     * For right aligned text only
+     */
+    textWidth: number;
+    columnSpans: [
+        columnIndex: number,
+        columnOffset: number,
+        columnWidth: number,
+        cellBackground?: Color | null
+    ][];
+    /**
+     * Spreadsheet theme
+     */
+    theme: SpreadsheetTheme;
+    /**
+     * Can this cell be expanded
+     * Used to pivots
+     */
+    expandable?: boolean;
+    /**
+     * Current status of the expansion
+     */
+    expanded?: boolean;
+    overflowRight?: boolean;
+    defaultFontSizePoint: number;
+    /**
+     * Text formatting options of a cell
+     */
+    textFormatRuns?: TextFormatRun[] | null;
+    /**
+     * Structured result
+     */
+    StructuredResult: NonNullable<CanvasGridProps["StructuredResult"]>;
+    /**
+     * Callback when filter icon is clicked
+     * @param cell
+     */
+    onFilterClick?(cell: CellInterface): void;
+    /**
+     * Callback when checkbox is checked
+     * @param cell
+     * @param checked
+     */
+    onCheckboxClick?(cell: CellInterface, checked: boolean): void;
+    /**
+     * Trigger cell editing
+     * @param cell
+     */
+    onRequestEdit?(cell: CellInterface): void;
+    /**
+     * Is the sheet readonly
+     */
+    readonly?: boolean;
+    /**
+     * Expand collapse in cells
+     * @param expandedState
+     * @returns
+     */
+    onExpandCollapse?: (cell: CellInterface, expandedState: boolean) => void;
+    /**
+     * Default cell horizontal alignment
+     */
+    getDefaultHorizontalAlignment: CellRendererProps["getDefaultHorizontalAlignment"];
+    /**
+     * Current sheet id
+     */
+    sheetId: number;
+};
+//# sourceMappingURL=typings.d.ts.map

package/dist/esm/components/cell/typings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typings.d.ts","sourceRoot":"","sources":["../../../../components/cell/typings.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/cell/typings.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/cell-arrow/index.d.ts

@@ -0,0 +1,14 @@
+import type { CellInterface } from "@rowsncolumns/grid";
+import type { ShapeConfig } from "konva/lib/Shape";
+import React from "react";
+import type { VerticalAlign } from "../../types";
+type CellArrowProps = Omit<ShapeConfig, "scale"> & {
+    rowIndex: number;
+    columnIndex: number;
+    scale: number;
+    onClick?(cell: CellInterface): void;
+    verticalAlignment: VerticalAlign;
+};
+export declare const CellArrow: ({ x, y, width, height, scale, rowIndex, columnIndex, onClick, verticalAlignment, }: CellArrowProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/cell-arrow/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-arrow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAgC,MAAM,OAAO,CAAC;AASrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,KAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG;IACjD,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;IACpC,iBAAiB,EAAE,aAAa,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,oFAUvB,cAAc,sBAiDhB,CAAC"}

package/dist/esm/components/cell-arrow/index.js

@@ -0,0 +1,22 @@
+import React, { useCallback, useState } from "react";
+import { Group, Path, Rect } from "react-konva";
+import { ARROW_DOWN_COLOR, ARROW_DOWN_ICON_PATH, ARROW_DOWN_WIDTH, } from "../../config";
+import { getIconSpacing } from "../../helpers";
+export const CellArrow = ({ x = 0, y = 0, width = 0, height = 0, scale, rowIndex, columnIndex, onClick, verticalAlignment, }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const padding = getIconSpacing(verticalAlignment, height, ARROW_DOWN_WIDTH, scale, 2 * scale);
+    const posX = x + width - ARROW_DOWN_WIDTH * scale - 2 * scale;
+    const posY = y + padding + 0.5;
+    const handleMouseEnter = useCallback(() => {
+        setIsHovered(true);
+    }, []);
+    const handleMouseLeave = useCallback(() => {
+        setIsHovered(false);
+    }, []);
+    const handleClick = () => {
+        onClick?.({ rowIndex, columnIndex });
+    };
+    return (React.createElement(Group, { onClick: handleClick, onTap: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, perfectDrawEnabled: false },
+        React.createElement(Rect, { x: posX, y: posY, width: ARROW_DOWN_WIDTH * scale, height: ARROW_DOWN_WIDTH * scale, fill: isHovered ? ARROW_DOWN_COLOR : "transparent", cornerRadius: 2, perfectDrawEnabled: false }),
+        React.createElement(Path, { data: ARROW_DOWN_ICON_PATH, x: posX - 1.5 * scale, y: posY - 1.5 * scale, fill: isHovered ? "white" : ARROW_DOWN_COLOR, scaleY: 0.8 * scale, scaleX: 0.8 * scale, listening: true, perfectDrawEnabled: false })));
+};

package/dist/esm/components/cell-calculated/index.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { VerticalAlign } from "../../types";
+type CellCalculatedProps = {
+    x: number;
+    y: number;
+    height: number;
+    width: number;
+    color?: string;
+    scale: number;
+    verticalAlignment: VerticalAlign;
+};
+/**
+ * Cell Error
+ */
+export declare const CellCalculated: ({ x, y, color, scale, height, verticalAlignment, }: CellCalculatedProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/cell-calculated/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-calculated/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAKjD,KAAK,mBAAmB,GAAG;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,aAAa,CAAC;CAClC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,oDAO5B,mBAAmB,sBAsBrB,CAAC"}

package/dist/esm/components/cell-calculated/index.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Path } from "react-konva";
+import { CALCULATED_ICON_HEIGHT } from "../../config";
+import { getIconSpacing } from "../../helpers";
+const CALCULATED_ICON_PATH = "M9 21.5L17.5 13L13 10L15 2.5L6.5 11L11 14L9 21.5Z";
+/**
+ * Cell Error
+ */
+export const CellCalculated = ({ x, y, color = "#008000", scale = 1, height, verticalAlignment, }) => {
+    const padding = getIconSpacing(verticalAlignment, height, CALCULATED_ICON_HEIGHT, scale, 2 * scale);
+    const posX = x;
+    const posY = y + padding;
+    return (React.createElement(Path, { data: CALCULATED_ICON_PATH, x: posX, y: posY, scaleY: 0.7 * scale, scaleX: 0.7 * scale, fill: color, listening: false, perfectDrawEnabled: false }));
+};

package/dist/esm/components/cell-checkbox/index.d.ts

@@ -0,0 +1,14 @@
+import type { CellInterface } from "@rowsncolumns/grid";
+import type { ShapeConfig } from "konva/lib/Shape";
+import React from "react";
+import type { HorizontalAlign, VerticalAlign } from "../../types";
+export type CheckboxProps = Omit<ShapeConfig, "scale"> & {
+    checked?: boolean;
+    rowIndex: number;
+    columnIndex: number;
+    onChange?(cell: CellInterface, checked: boolean): void;
+    verticalAlignment: VerticalAlign;
+    horizontalAlignment: HorizontalAlign;
+};
+export declare const CellCheckbox: React.FC<CheckboxProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/cell-checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-checkbox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAgC,MAAM,OAAO,CAAC;AAWrD,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAElE,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,CAAC,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACvD,iBAAiB,EAAE,aAAa,CAAC;IACjC,mBAAmB,EAAE,eAAe,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmEhD,CAAC"}

package/dist/esm/components/cell-checkbox/index.js

@@ -0,0 +1,23 @@
+import React, { useCallback, useState } from "react";
+import { Group, Path, Rect } from "react-konva";
+import { CHECKBOX_CHECKED_ICON_PATH, CHECKBOX_ICON_ACTIVE_COLOR, CHECKBOX_ICON_COLOR, CHECKBOX_ICON_PATH, CHECKBOX_ICON_WIDTH, } from "../../config";
+import { getHorizontalSpacing, getIconSpacing } from "../../helpers";
+export const CellCheckbox = ({ x = 0, y = 0, width = 0, height = 0, checked = false, onChange, scale, rowIndex, columnIndex, verticalAlignment, horizontalAlignment, }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const padding = getIconSpacing(verticalAlignment, height, CHECKBOX_ICON_WIDTH, scale, 3 * scale);
+    const horizontalPadding = getHorizontalSpacing(horizontalAlignment, width, CHECKBOX_ICON_WIDTH, scale, 3 * scale);
+    const posX = x + horizontalPadding;
+    const posY = y + padding;
+    const handleMouseEnter = useCallback(() => {
+        setIsHovered(true);
+    }, []);
+    const handleMouseLeave = useCallback(() => {
+        setIsHovered(false);
+    }, []);
+    const handleClick = useCallback(() => {
+        onChange?.({ rowIndex, columnIndex }, !checked);
+    }, [checked, rowIndex, columnIndex, onChange]);
+    return (React.createElement(Group, { onClick: handleClick, onTap: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+        React.createElement(Rect, { x: posX, y: posY, width: CHECKBOX_ICON_WIDTH * scale, height: CHECKBOX_ICON_WIDTH * scale, cornerRadius: 2, perfectDrawEnabled: false }),
+        React.createElement(Path, { data: checked ? CHECKBOX_CHECKED_ICON_PATH : CHECKBOX_ICON_PATH, x: posX, y: posY, scaleY: 0.8 * scale, scaleX: 0.8 * scale, listening: true, fill: isHovered ? CHECKBOX_ICON_ACTIVE_COLOR : CHECKBOX_ICON_COLOR, perfectDrawEnabled: false })));
+};

package/dist/esm/components/cell-diff/index.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import type { CellDiffHighlight } from "@rowsncolumns/version-comparison";
+export type CellDiffProps = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** Current formatted value */
+    value?: string;
+    /** Diff highlight information */
+    diffHighlight: CellDiffHighlight;
+    /** Measured width of old value text (from sizer) */
+    oldValueWidth?: number;
+    /** Default text color */
+    defaultColor?: string;
+    /** Scale factor */
+    scale?: number;
+    /** Line height */
+    lineHeight?: number;
+    /** Padding */
+    padding?: number;
+    /** Font size in points */
+    fontSizePt?: number;
+    /** Font family */
+    fontFamily?: string | null;
+    /** Bold */
+    bold?: boolean | null;
+    /** Italic */
+    italic?: boolean | null;
+    /** Horizontal alignment */
+    horizontalAlignment?: "left" | "center" | "right" | null;
+    /** Vertical alignment */
+    verticalAlignment?: "top" | "middle" | "bottom" | null;
+};
+/**
+ * Renders cell content with diff highlighting
+ * - Deleted: light red background, old value with strikethrough
+ * - Added: light green background, current value
+ * - Modified: light green background, shows old and new values
+ */
+export declare const CellDiff: React.MemoExoticComponent<(props: CellDiffProps) => React.JSX.Element | null>;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/cell-diff/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-diff/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAW1E,MAAM,MAAM,aAAa,GAAG;IAC1B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,aAAa,EAAE,iBAAiB,CAAC;IACjC,oDAAoD;IACpD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW;IACX,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACtB,aAAa;IACb,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACxB,2BAA2B;IAC3B,mBAAmB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI,CAAC;IACzD,yBAAyB;IACzB,iBAAiB,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC;CACxD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,oCAAgB,aAAa,8BAqLhD,CAAC"}

package/dist/esm/components/cell-diff/index.js

@@ -0,0 +1,90 @@
+import { isNil } from "@rowsncolumns/utils";
+import React, { memo } from "react";
+import { Group, Label, Tag, Text } from "react-konva";
+import { CELL_VERTICAL_ALIGNMENT } from "../../config";
+import { pointToPixel } from "../../helpers";
+// Diff colors
+const DIFF_DELETED_BG = "#ffdbdb";
+const DIFF_DELETED_TEXT = "#b21313";
+const DIFF_ADDED_BG = "#d0fae1";
+const DIFF_ADDED_TEXT = "#046e38";
+/**
+ * Renders cell content with diff highlighting
+ * - Deleted: light red background, old value with strikethrough
+ * - Added: light green background, current value
+ * - Modified: light green background, shows old and new values
+ */
+export const CellDiff = memo((props) => {
+    const { x, y, width, height, value, diffHighlight, oldValueWidth: measuredOldValueWidth, scale = 1, padding = 2, fontSizePt = 11, fontFamily, bold, italic, verticalAlignment, } = props;
+    // Handle null values with nullish coalescing (default destructuring doesn't work with null)
+    const finalVerticalAlignment = verticalAlignment ?? CELL_VERTICAL_ALIGNMENT;
+    const { diffState, oldFormattedValue, oldFormat, formatOnlyChange } = diffHighlight;
+    const fontSize = pointToPixel(fontSizePt) * scale;
+    const textStyle = `${bold ? "bold" : "normal"} ${italic ? "italic" : "normal"}`;
+    // Old format styling (for modified cells showing old value)
+    const oldBold = oldFormat?.textFormat?.bold;
+    const oldItalic = oldFormat?.textFormat?.italic;
+    const oldFontSizePt = oldFormat?.textFormat?.fontSize ?? fontSizePt;
+    const oldFontFamily = oldFormat?.textFormat?.fontFamily ?? fontFamily;
+    const oldFontSize = pointToPixel(oldFontSizePt) * scale;
+    const oldTextStyle = `${oldBold ? "bold" : "normal"} ${oldItalic ? "italic" : "normal"}`;
+    const borderWidth = 1;
+    // Determine what to render based on diff state
+    const isDeleted = diffState === "deleted";
+    const isAdded = diffState === "added";
+    const isModified = diffState === "modified";
+    const hasValueChange = isModified && oldFormattedValue && oldFormattedValue !== value;
+    // For format-only changes, we also want to show old and new side by side
+    // so the user can see the formatting difference (e.g., "Banana" normal vs "Banana" bold)
+    const hasFormatOnlyChange = isModified && formatOnlyChange && !hasValueChange;
+    // Nothing to render
+    if (!isDeleted && !isAdded && !isModified) {
+        return null;
+    }
+    // For deleted cells, we need old value
+    if (isDeleted && isNil(oldFormattedValue)) {
+        return null;
+    }
+    // For added/modified cells, we need current value
+    if ((isAdded || isModified) && isNil(value)) {
+        return null;
+    }
+    // Calculate label Y position based on vertical alignment
+    const labelY = finalVerticalAlignment === "top"
+        ? y + padding
+        : finalVerticalAlignment === "bottom"
+            ? y + height - fontSize - padding * 2
+            : y + (height - fontSize) / 2 - padding; // middle
+    const labelX = x + padding + borderWidth;
+    const spacing = 2 * scale; // Space between old and new values
+    // For modified cells with value changes OR format-only changes, render two separate labels
+    // This shows the old value with old formatting next to new value with new formatting
+    if (hasValueChange || hasFormatOnlyChange) {
+        // Use measured width if available, otherwise estimate
+        // For format-only changes, use value since oldFormattedValue might be same
+        const displayOldValue = oldFormattedValue ?? value;
+        const oldValueWidth = measuredOldValueWidth ??
+            displayOldValue.length * fontSize * 0.5 + padding * 2;
+        return (React.createElement(Group, { clipY: y + borderWidth, clipHeight: height, clipX: x + padding, clipWidth: width - padding * 2 },
+            React.createElement(Label, { x: labelX, y: labelY },
+                React.createElement(Tag, { fill: DIFF_DELETED_BG, cornerRadius: 2 * scale, perfectDrawEnabled: false, hitStrokeWidth: 0 }),
+                React.createElement(Text, { text: displayOldValue, fill: DIFF_DELETED_TEXT, fontFamily: oldFontFamily ?? undefined, fontStyle: oldTextStyle, fontSize: oldFontSize, padding: padding, wrap: "none", lineHeight: 1, hitStrokeWidth: 0, perfectDrawEnabled: false })),
+            React.createElement(Label, { x: labelX + oldValueWidth + spacing, y: labelY },
+                React.createElement(Tag, { fill: DIFF_ADDED_BG, cornerRadius: 2 * scale, perfectDrawEnabled: false, hitStrokeWidth: 0 }),
+                React.createElement(Text, { text: value, fill: DIFF_ADDED_TEXT, fontFamily: fontFamily ?? undefined, fontStyle: textStyle, fontSize: fontSize, padding: padding, wrap: "none", lineHeight: 1, hitStrokeWidth: 0, perfectDrawEnabled: false }))));
+    }
+    // Single value rendering (deleted, added, or format-only modified)
+    const backgroundColor = isDeleted ? DIFF_DELETED_BG : DIFF_ADDED_BG;
+    const textColor = isDeleted ? DIFF_DELETED_TEXT : DIFF_ADDED_TEXT;
+    const text = isDeleted ? oldFormattedValue : value;
+    const textDecoration = isDeleted ? "line-through" : "";
+    // For deleted cells, use old formatting; for added/modified, use current
+    const singleValueFontFamily = isDeleted ? oldFontFamily : fontFamily;
+    const singleValueTextStyle = isDeleted ? oldTextStyle : textStyle;
+    const singleValueFontSize = isDeleted ? oldFontSize : fontSize;
+    return (React.createElement(Group, { clipY: y + borderWidth, clipHeight: height, clipX: x + padding, clipWidth: width - padding * 2 },
+        React.createElement(Label, { x: labelX, y: labelY },
+            React.createElement(Tag, { fill: backgroundColor, cornerRadius: 2 * scale, perfectDrawEnabled: false, hitStrokeWidth: 0 }),
+            React.createElement(Text, { text: text, fill: textColor, fontFamily: singleValueFontFamily ?? undefined, fontStyle: singleValueTextStyle, fontSize: singleValueFontSize, textDecoration: textDecoration, padding: padding, wrap: "none", lineHeight: 1, hitStrokeWidth: 0, perfectDrawEnabled: false }))));
+});
+CellDiff.displayName = "CellDiff";

package/dist/esm/components/cell-editor/calendar-popup.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type CalendarPopupProps = {
+    value?: number;
+    onEscapeKeyDown?(): void;
+    onSubmit?(value: Date): void;
+};
+export declare const CalendarPopup: ({ onEscapeKeyDown, onSubmit, value, }: CalendarPopupProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=calendar-popup.d.ts.map

package/dist/esm/components/cell-editor/calendar-popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-popup.d.ts","sourceRoot":"","sources":["../../../../components/cell-editor/calendar-popup.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,IAAI,IAAI,CAAC;IACzB,QAAQ,CAAC,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,uCAI3B,kBAAkB,sBA8BpB,CAAC"}

package/dist/esm/components/cell-editor/calendar-popup.js

@@ -0,0 +1,19 @@
+import { Calendar, PopoverContent, PopoverDelayed, PopoverTrigger, } from "@rowsncolumns/ui";
+import { toDate, toSerial } from "@rowsncolumns/utils";
+import isNil from "lodash/isNil";
+import React from "react";
+import { StyledFakeTriggerButton } from "../context-menu/style";
+export const CalendarPopup = ({ onEscapeKeyDown, onSubmit, value = toSerial(new Date()), }) => {
+    return (React.createElement(PopoverDelayed, null,
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(StyledFakeTriggerButton, { className: "top-0 h-full left-0" })),
+        React.createElement(PopoverContent, { align: "start", onEscapeKeyDown: onEscapeKeyDown },
+            React.createElement(Calendar, { mode: "single", required: true, fixedWeeks: true, selected: toDate(value), defaultMonth: toDate(value), onSelect: (newValue) => {
+                    if (newValue && !isNil(value)) {
+                        const currentDate = toDate(value);
+                        // Reset to
+                        newValue.setHours(currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds(), 0);
+                        onSubmit?.(newValue);
+                    }
+                } }))));
+};

package/dist/esm/components/cell-editor/formula-result-preview.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { CanvasGridProps } from "../canvas-grid/typings";
+type FormulaResultPreviewProps = {
+    value: string;
+    onRequestCalculate: CanvasGridProps["onRequestCalculate"];
+};
+export declare const FormulaResultPreview: ({ value, onRequestCalculate, }: FormulaResultPreviewProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=formula-result-preview.d.ts.map

package/dist/esm/components/cell-editor/formula-result-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formula-result-preview.d.ts","sourceRoot":"","sources":["../../../../components/cell-editor/formula-result-preview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAG9D,KAAK,yBAAyB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,gCAGlC,yBAAyB,6BAmC3B,CAAC"}

package/dist/esm/components/cell-editor/formula-result-preview.js

@@ -0,0 +1,20 @@
+import { balanceFormula, isNil } from "@rowsncolumns/utils";
+import React, { useCallback } from "react";
+import { useEditingCellCoordinate } from "../../atoms";
+import { useAsync } from "../../hooks/use-async";
+import { StyledResultPreview } from "./style";
+export const FormulaResultPreview = ({ value, onRequestCalculate, }) => {
+    const editingCellCoordinate = useEditingCellCoordinate();
+    const formula = balanceFormula(value);
+    const result = useAsync(useCallback(() => {
+        if (editingCellCoordinate) {
+            return onRequestCalculate?.(formula, editingCellCoordinate.sheetId, editingCellCoordinate.rowIndex, editingCellCoordinate.columnIndex, { isArray: true });
+        }
+    }, [formula, editingCellCoordinate, onRequestCalculate]));
+    if (isNil(result) ||
+        typeof result === "object" ||
+        typeof result === "boolean") {
+        return null;
+    }
+    return React.createElement(StyledResultPreview, null, result);
+};

package/dist/esm/components/cell-editor/helpers.d.ts

@@ -0,0 +1,11 @@
+import { Direction } from "@rowsncolumns/grid";
+import type { NumberFormat } from "../../types";
+export declare const shouldShowCalendarPopup: (numberFormat: NumberFormat | null | undefined) => boolean;
+/**
+ * Get next cell direction from key code
+ * @param code
+ * @param isShift
+ * @returns
+ */
+export declare const getDirectionFromKey: (code: string, isShift: boolean) => Direction;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/esm/components/cell-editor/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../components/cell-editor/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,eAAO,MAAM,uBAAuB,GAClC,cAAc,YAAY,GAAG,IAAI,GAAG,SAAS,YAIP,CAAC;AAEzC;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,MAAM,MAAM,EAAE,SAAS,OAAO,cAkBjE,CAAC"}

package/dist/esm/components/cell-editor/helpers.js

@@ -0,0 +1,34 @@
+import { Direction } from "@rowsncolumns/grid";
+import { isDatePattern } from "@rowsncolumns/utils";
+export const shouldShowCalendarPopup = (numberFormat) => numberFormat?.type === "DATE" ||
+    (numberFormat?.type === "DATE_TIME" &&
+        isDatePattern(numberFormat.pattern));
+/**
+ * Get next cell direction from key code
+ * @param code
+ * @param isShift
+ * @returns
+ */
+export const getDirectionFromKey = (code, isShift) => {
+    if (code === "Enter") {
+        if (isShift) {
+            return Direction.Up;
+        }
+        return Direction.Down;
+    }
+    if (code === "Tab") {
+        if (isShift) {
+            return Direction.Left;
+        }
+        return Direction.Right;
+    }
+    if (code === "ArrowRight")
+        return Direction.Right;
+    if (code === "ArrowLeft")
+        return Direction.Left;
+    if (code === "ArrowUp")
+        return Direction.Up;
+    if (code === "ArrowDown")
+        return Direction.Down;
+    return Direction.Down;
+};

package/dist/esm/components/cell-editor/helpers.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=helpers.spec.d.ts.map

package/dist/esm/components/cell-editor/helpers.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.spec.d.ts","sourceRoot":"","sources":["../../../../components/cell-editor/helpers.spec.ts"],"names":[],"mappings":""}

package/dist/esm/components/cell-editor/helpers.spec.js

@@ -0,0 +1,16 @@
+import { shouldShowCalendarPopup } from "./helpers";
+describe("shouldShowCalendarPopup", () => {
+    it("does not show a calendar for a time-only DATE_TIME format", () => {
+        expect(shouldShowCalendarPopup({
+            type: "DATE_TIME",
+            pattern: "[$-en-us]h:mm AM/PM;@",
+        })).toBe(false);
+    });
+    it("shows a calendar for DATE and date-time formats", () => {
+        expect(shouldShowCalendarPopup({ type: "DATE", pattern: "m/d/yyyy" })).toBe(true);
+        expect(shouldShowCalendarPopup({
+            type: "DATE_TIME",
+            pattern: "m/d/yyyy h:mm AM/PM",
+        })).toBe(true);
+    });
+});