@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/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/cjs/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/cjs/components/cell/typings.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/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/cjs/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/cjs/components/cell-arrow/index.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CellArrow = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_konva_1 = require("react-konva");
+var config_1 = require("../../config");
+var helpers_1 = require("../../helpers");
+var CellArrow = function (_a) {
+    var _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, _d = _a.width, width = _d === void 0 ? 0 : _d, _e = _a.height, height = _e === void 0 ? 0 : _e, scale = _a.scale, rowIndex = _a.rowIndex, columnIndex = _a.columnIndex, onClick = _a.onClick, verticalAlignment = _a.verticalAlignment;
+    var _f = tslib_1.__read((0, react_1.useState)(false), 2), isHovered = _f[0], setIsHovered = _f[1];
+    var padding = (0, helpers_1.getIconSpacing)(verticalAlignment, height, config_1.ARROW_DOWN_WIDTH, scale, 2 * scale);
+    var posX = x + width - config_1.ARROW_DOWN_WIDTH * scale - 2 * scale;
+    var posY = y + padding + 0.5;
+    var handleMouseEnter = (0, react_1.useCallback)(function () {
+        setIsHovered(true);
+    }, []);
+    var handleMouseLeave = (0, react_1.useCallback)(function () {
+        setIsHovered(false);
+    }, []);
+    var handleClick = function () {
+        onClick === null || onClick === void 0 ? void 0 : onClick({ rowIndex: rowIndex, columnIndex: columnIndex });
+    };
+    return (react_1.default.createElement(react_konva_1.Group, { onClick: handleClick, onTap: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, perfectDrawEnabled: false },
+        react_1.default.createElement(react_konva_1.Rect, { x: posX, y: posY, width: config_1.ARROW_DOWN_WIDTH * scale, height: config_1.ARROW_DOWN_WIDTH * scale, fill: isHovered ? config_1.ARROW_DOWN_COLOR : "transparent", cornerRadius: 2, perfectDrawEnabled: false }),
+        react_1.default.createElement(react_konva_1.Path, { data: config_1.ARROW_DOWN_ICON_PATH, x: posX - 1.5 * scale, y: posY - 1.5 * scale, fill: isHovered ? "white" : config_1.ARROW_DOWN_COLOR, scaleY: 0.8 * scale, scaleX: 0.8 * scale, listening: true, perfectDrawEnabled: false })));
+};
+exports.CellArrow = CellArrow;

package/dist/cjs/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/cjs/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/cjs/components/cell-calculated/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CellCalculated = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var react_konva_1 = require("react-konva");
+var config_1 = require("../../config");
+var helpers_1 = require("../../helpers");
+var CALCULATED_ICON_PATH = "M9 21.5L17.5 13L13 10L15 2.5L6.5 11L11 14L9 21.5Z";
+/**
+ * Cell Error
+ */
+var CellCalculated = function (_a) {
+    var x = _a.x, y = _a.y, _b = _a.color, color = _b === void 0 ? "#008000" : _b, _c = _a.scale, scale = _c === void 0 ? 1 : _c, height = _a.height, verticalAlignment = _a.verticalAlignment;
+    var padding = (0, helpers_1.getIconSpacing)(verticalAlignment, height, config_1.CALCULATED_ICON_HEIGHT, scale, 2 * scale);
+    var posX = x;
+    var posY = y + padding;
+    return (react_1.default.createElement(react_konva_1.Path, { data: CALCULATED_ICON_PATH, x: posX, y: posY, scaleY: 0.7 * scale, scaleX: 0.7 * scale, fill: color, listening: false, perfectDrawEnabled: false }));
+};
+exports.CellCalculated = CellCalculated;

package/dist/cjs/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/cjs/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/cjs/components/cell-checkbox/index.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CellCheckbox = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_konva_1 = require("react-konva");
+var config_1 = require("../../config");
+var helpers_1 = require("../../helpers");
+var CellCheckbox = function (_a) {
+    var _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, _d = _a.width, width = _d === void 0 ? 0 : _d, _e = _a.height, height = _e === void 0 ? 0 : _e, _f = _a.checked, checked = _f === void 0 ? false : _f, onChange = _a.onChange, scale = _a.scale, rowIndex = _a.rowIndex, columnIndex = _a.columnIndex, verticalAlignment = _a.verticalAlignment, horizontalAlignment = _a.horizontalAlignment;
+    var _g = tslib_1.__read((0, react_1.useState)(false), 2), isHovered = _g[0], setIsHovered = _g[1];
+    var padding = (0, helpers_1.getIconSpacing)(verticalAlignment, height, config_1.CHECKBOX_ICON_WIDTH, scale, 3 * scale);
+    var horizontalPadding = (0, helpers_1.getHorizontalSpacing)(horizontalAlignment, width, config_1.CHECKBOX_ICON_WIDTH, scale, 3 * scale);
+    var posX = x + horizontalPadding;
+    var posY = y + padding;
+    var handleMouseEnter = (0, react_1.useCallback)(function () {
+        setIsHovered(true);
+    }, []);
+    var handleMouseLeave = (0, react_1.useCallback)(function () {
+        setIsHovered(false);
+    }, []);
+    var handleClick = (0, react_1.useCallback)(function () {
+        onChange === null || onChange === void 0 ? void 0 : onChange({ rowIndex: rowIndex, columnIndex: columnIndex }, !checked);
+    }, [checked, rowIndex, columnIndex, onChange]);
+    return (react_1.default.createElement(react_konva_1.Group, { onClick: handleClick, onTap: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+        react_1.default.createElement(react_konva_1.Rect, { x: posX, y: posY, width: config_1.CHECKBOX_ICON_WIDTH * scale, height: config_1.CHECKBOX_ICON_WIDTH * scale, cornerRadius: 2, perfectDrawEnabled: false }),
+        react_1.default.createElement(react_konva_1.Path, { data: checked ? config_1.CHECKBOX_CHECKED_ICON_PATH : config_1.CHECKBOX_ICON_PATH, x: posX, y: posY, scaleY: 0.8 * scale, scaleX: 0.8 * scale, listening: true, fill: isHovered ? config_1.CHECKBOX_ICON_ACTIVE_COLOR : config_1.CHECKBOX_ICON_COLOR, perfectDrawEnabled: false })));
+};
+exports.CellCheckbox = CellCheckbox;

package/dist/cjs/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/cjs/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/cjs/components/cell-diff/index.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CellDiff = void 0;
+var tslib_1 = require("tslib");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_konva_1 = require("react-konva");
+var config_1 = require("../../config");
+var helpers_1 = require("../../helpers");
+// Diff colors
+var DIFF_DELETED_BG = "#ffdbdb";
+var DIFF_DELETED_TEXT = "#b21313";
+var DIFF_ADDED_BG = "#d0fae1";
+var 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
+ */
+exports.CellDiff = (0, react_1.memo)(function (props) {
+    var _a, _b, _c, _d, _e, _f;
+    var x = props.x, y = props.y, width = props.width, height = props.height, value = props.value, diffHighlight = props.diffHighlight, measuredOldValueWidth = props.oldValueWidth, _g = props.scale, scale = _g === void 0 ? 1 : _g, _h = props.padding, padding = _h === void 0 ? 2 : _h, _j = props.fontSizePt, fontSizePt = _j === void 0 ? 11 : _j, fontFamily = props.fontFamily, bold = props.bold, italic = props.italic, verticalAlignment = props.verticalAlignment;
+    // Handle null values with nullish coalescing (default destructuring doesn't work with null)
+    var finalVerticalAlignment = verticalAlignment !== null && verticalAlignment !== void 0 ? verticalAlignment : config_1.CELL_VERTICAL_ALIGNMENT;
+    var diffState = diffHighlight.diffState, oldFormattedValue = diffHighlight.oldFormattedValue, oldFormat = diffHighlight.oldFormat, formatOnlyChange = diffHighlight.formatOnlyChange;
+    var fontSize = (0, helpers_1.pointToPixel)(fontSizePt) * scale;
+    var textStyle = "".concat(bold ? "bold" : "normal", " ").concat(italic ? "italic" : "normal");
+    // Old format styling (for modified cells showing old value)
+    var oldBold = (_a = oldFormat === null || oldFormat === void 0 ? void 0 : oldFormat.textFormat) === null || _a === void 0 ? void 0 : _a.bold;
+    var oldItalic = (_b = oldFormat === null || oldFormat === void 0 ? void 0 : oldFormat.textFormat) === null || _b === void 0 ? void 0 : _b.italic;
+    var oldFontSizePt = (_d = (_c = oldFormat === null || oldFormat === void 0 ? void 0 : oldFormat.textFormat) === null || _c === void 0 ? void 0 : _c.fontSize) !== null && _d !== void 0 ? _d : fontSizePt;
+    var oldFontFamily = (_f = (_e = oldFormat === null || oldFormat === void 0 ? void 0 : oldFormat.textFormat) === null || _e === void 0 ? void 0 : _e.fontFamily) !== null && _f !== void 0 ? _f : fontFamily;
+    var oldFontSize = (0, helpers_1.pointToPixel)(oldFontSizePt) * scale;
+    var oldTextStyle = "".concat(oldBold ? "bold" : "normal", " ").concat(oldItalic ? "italic" : "normal");
+    var borderWidth = 1;
+    // Determine what to render based on diff state
+    var isDeleted = diffState === "deleted";
+    var isAdded = diffState === "added";
+    var isModified = diffState === "modified";
+    var 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)
+    var hasFormatOnlyChange = isModified && formatOnlyChange && !hasValueChange;
+    // Nothing to render
+    if (!isDeleted && !isAdded && !isModified) {
+        return null;
+    }
+    // For deleted cells, we need old value
+    if (isDeleted && (0, utils_1.isNil)(oldFormattedValue)) {
+        return null;
+    }
+    // For added/modified cells, we need current value
+    if ((isAdded || isModified) && (0, utils_1.isNil)(value)) {
+        return null;
+    }
+    // Calculate label Y position based on vertical alignment
+    var labelY = finalVerticalAlignment === "top"
+        ? y + padding
+        : finalVerticalAlignment === "bottom"
+            ? y + height - fontSize - padding * 2
+            : y + (height - fontSize) / 2 - padding; // middle
+    var labelX = x + padding + borderWidth;
+    var 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
+        var displayOldValue = oldFormattedValue !== null && oldFormattedValue !== void 0 ? oldFormattedValue : value;
+        var oldValueWidth = measuredOldValueWidth !== null && measuredOldValueWidth !== void 0 ? measuredOldValueWidth : displayOldValue.length * fontSize * 0.5 + padding * 2;
+        return (react_1.default.createElement(react_konva_1.Group, { clipY: y + borderWidth, clipHeight: height, clipX: x + padding, clipWidth: width - padding * 2 },
+            react_1.default.createElement(react_konva_1.Label, { x: labelX, y: labelY },
+                react_1.default.createElement(react_konva_1.Tag, { fill: DIFF_DELETED_BG, cornerRadius: 2 * scale, perfectDrawEnabled: false, hitStrokeWidth: 0 }),
+                react_1.default.createElement(react_konva_1.Text, { text: displayOldValue, fill: DIFF_DELETED_TEXT, fontFamily: oldFontFamily !== null && oldFontFamily !== void 0 ? oldFontFamily : undefined, fontStyle: oldTextStyle, fontSize: oldFontSize, padding: padding, wrap: "none", lineHeight: 1, hitStrokeWidth: 0, perfectDrawEnabled: false })),
+            react_1.default.createElement(react_konva_1.Label, { x: labelX + oldValueWidth + spacing, y: labelY },
+                react_1.default.createElement(react_konva_1.Tag, { fill: DIFF_ADDED_BG, cornerRadius: 2 * scale, perfectDrawEnabled: false, hitStrokeWidth: 0 }),
+                react_1.default.createElement(react_konva_1.Text, { text: value, fill: DIFF_ADDED_TEXT, fontFamily: fontFamily !== null && fontFamily !== void 0 ? 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)
+    var backgroundColor = isDeleted ? DIFF_DELETED_BG : DIFF_ADDED_BG;
+    var textColor = isDeleted ? DIFF_DELETED_TEXT : DIFF_ADDED_TEXT;
+    var text = isDeleted ? oldFormattedValue : value;
+    var textDecoration = isDeleted ? "line-through" : "";
+    // For deleted cells, use old formatting; for added/modified, use current
+    var singleValueFontFamily = isDeleted ? oldFontFamily : fontFamily;
+    var singleValueTextStyle = isDeleted ? oldTextStyle : textStyle;
+    var singleValueFontSize = isDeleted ? oldFontSize : fontSize;
+    return (react_1.default.createElement(react_konva_1.Group, { clipY: y + borderWidth, clipHeight: height, clipX: x + padding, clipWidth: width - padding * 2 },
+        react_1.default.createElement(react_konva_1.Label, { x: labelX, y: labelY },
+            react_1.default.createElement(react_konva_1.Tag, { fill: backgroundColor, cornerRadius: 2 * scale, perfectDrawEnabled: false, hitStrokeWidth: 0 }),
+            react_1.default.createElement(react_konva_1.Text, { text: text, fill: textColor, fontFamily: singleValueFontFamily !== null && singleValueFontFamily !== void 0 ? singleValueFontFamily : undefined, fontStyle: singleValueTextStyle, fontSize: singleValueFontSize, textDecoration: textDecoration, padding: padding, wrap: "none", lineHeight: 1, hitStrokeWidth: 0, perfectDrawEnabled: false }))));
+});
+exports.CellDiff.displayName = "CellDiff";

package/dist/cjs/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/cjs/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/cjs/components/cell-editor/calendar-popup.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarPopup = void 0;
+var tslib_1 = require("tslib");
+var ui_1 = require("@rowsncolumns/ui");
+var utils_1 = require("@rowsncolumns/utils");
+var isNil_1 = tslib_1.__importDefault(require("lodash/isNil"));
+var react_1 = tslib_1.__importDefault(require("react"));
+var style_1 = require("../context-menu/style");
+var CalendarPopup = function (_a) {
+    var onEscapeKeyDown = _a.onEscapeKeyDown, onSubmit = _a.onSubmit, _b = _a.value, value = _b === void 0 ? (0, utils_1.toSerial)(new Date()) : _b;
+    return (react_1.default.createElement(ui_1.PopoverDelayed, null,
+        react_1.default.createElement(ui_1.PopoverTrigger, { asChild: true },
+            react_1.default.createElement(style_1.StyledFakeTriggerButton, { className: "top-0 h-full left-0" })),
+        react_1.default.createElement(ui_1.PopoverContent, { align: "start", onEscapeKeyDown: onEscapeKeyDown },
+            react_1.default.createElement(ui_1.Calendar, { mode: "single", required: true, fixedWeeks: true, selected: (0, utils_1.toDate)(value), defaultMonth: (0, utils_1.toDate)(value), onSelect: function (newValue) {
+                    if (newValue && !(0, isNil_1.default)(value)) {
+                        var currentDate = (0, utils_1.toDate)(value);
+                        // Reset to
+                        newValue.setHours(currentDate.getHours(), currentDate.getMinutes(), currentDate.getSeconds(), 0);
+                        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(newValue);
+                    }
+                } }))));
+};
+exports.CalendarPopup = CalendarPopup;

package/dist/cjs/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/cjs/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/cjs/components/cell-editor/formula-result-preview.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormulaResultPreview = void 0;
+var tslib_1 = require("tslib");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = tslib_1.__importStar(require("react"));
+var atoms_1 = require("../../atoms");
+var use_async_1 = require("../../hooks/use-async");
+var style_1 = require("./style");
+var FormulaResultPreview = function (_a) {
+    var value = _a.value, onRequestCalculate = _a.onRequestCalculate;
+    var editingCellCoordinate = (0, atoms_1.useEditingCellCoordinate)();
+    var formula = (0, utils_1.balanceFormula)(value);
+    var result = (0, use_async_1.useAsync)((0, react_1.useCallback)(function () {
+        if (editingCellCoordinate) {
+            return onRequestCalculate === null || onRequestCalculate === void 0 ? void 0 : onRequestCalculate(formula, editingCellCoordinate.sheetId, editingCellCoordinate.rowIndex, editingCellCoordinate.columnIndex, { isArray: true });
+        }
+    }, [formula, editingCellCoordinate, onRequestCalculate]));
+    if ((0, utils_1.isNil)(result) ||
+        typeof result === "object" ||
+        typeof result === "boolean") {
+        return null;
+    }
+    return react_1.default.createElement(style_1.StyledResultPreview, null, result);
+};
+exports.FormulaResultPreview = FormulaResultPreview;

package/dist/cjs/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/cjs/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/cjs/components/cell-editor/helpers.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDirectionFromKey = exports.shouldShowCalendarPopup = void 0;
+var grid_1 = require("@rowsncolumns/grid");
+var utils_1 = require("@rowsncolumns/utils");
+var shouldShowCalendarPopup = function (numberFormat) {
+    return (numberFormat === null || numberFormat === void 0 ? void 0 : numberFormat.type) === "DATE" ||
+        ((numberFormat === null || numberFormat === void 0 ? void 0 : numberFormat.type) === "DATE_TIME" &&
+            (0, utils_1.isDatePattern)(numberFormat.pattern));
+};
+exports.shouldShowCalendarPopup = shouldShowCalendarPopup;
+/**
+ * Get next cell direction from key code
+ * @param code
+ * @param isShift
+ * @returns
+ */
+var getDirectionFromKey = function (code, isShift) {
+    if (code === "Enter") {
+        if (isShift) {
+            return grid_1.Direction.Up;
+        }
+        return grid_1.Direction.Down;
+    }
+    if (code === "Tab") {
+        if (isShift) {
+            return grid_1.Direction.Left;
+        }
+        return grid_1.Direction.Right;
+    }
+    if (code === "ArrowRight")
+        return grid_1.Direction.Right;
+    if (code === "ArrowLeft")
+        return grid_1.Direction.Left;
+    if (code === "ArrowUp")
+        return grid_1.Direction.Up;
+    if (code === "ArrowDown")
+        return grid_1.Direction.Down;
+    return grid_1.Direction.Down;
+};
+exports.getDirectionFromKey = getDirectionFromKey;

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

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

package/dist/cjs/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":""}