@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/components/cell-structured/sparkline-math.js

@@ -0,0 +1,80 @@
+const isNumber = (item) => typeof item === "number" && !isNaN(item);
+/**
+ * Resolve raw sparkline data into paintable x slots, applying the
+ * `emptycells` (displayEmptyCellsAs) and `rtl` (rightToLeft) options.
+ *
+ * - no `emptycells` option: empty cells are compacted out — the legacy
+ *   behavior, byte-identical for existing sparklines.
+ * - `"zero"`: empty cells become 0-valued slots.
+ * - `"gap"` / `"span"`: empty cells keep their x slot as `value: null`;
+ *   the painter breaks the line at gaps and draws through for span.
+ * - `rtl`: slots are painted right-to-left (data order is reversed).
+ */
+export const resolveSparklineSeries = (data, options) => {
+    const emptyMode = options?.emptycells === "gap" ||
+        options?.emptycells === "zero" ||
+        options?.emptycells === "span"
+        ? options.emptycells
+        : undefined;
+    const slots = [];
+    let dataIndex = 0;
+    for (const item of data) {
+        if (isNumber(item)) {
+            slots.push({ value: item, dataIndex: dataIndex++ });
+        }
+        else if (emptyMode === "zero") {
+            slots.push({ value: 0, dataIndex: -1 });
+        }
+        else if (emptyMode === "gap" || emptyMode === "span") {
+            slots.push({ value: null, dataIndex: -1 });
+        }
+        // No emptycells option → drop empty cells entirely (legacy shape).
+    }
+    if (options?.rtl) {
+        slots.reverse();
+    }
+    return slots;
+};
+/**
+ * Resolve the vertical axis extents, mirroring Excel's x14 semantics:
+ * - `minaxistype`/`maxaxistype` `"custom"` → use the manual `min`/`max`
+ *   value.
+ * - A bare `min`/`max` with no axis type also counts as custom (that's
+ *   how Sheets' SPARKLINE options behave).
+ * - `"group"` has no meaning for a single cell (we have no group
+ *   context at paint time) and `"individual"` is the default — both
+ *   fall back to the data extents.
+ * - winloss always includes 0 in the range (the zero baseline).
+ */
+export const resolveSparklineExtents = (slots, options, isWinLoss) => {
+    let min = Infinity;
+    let max = -Infinity;
+    for (const slot of slots) {
+        if (slot.value == null)
+            continue;
+        if (slot.value < min)
+            min = slot.value;
+        if (slot.value > max)
+            max = slot.value;
+    }
+    if (isWinLoss) {
+        min = Math.min(min, 0);
+        max = Math.max(max, 0);
+    }
+    const useManualMin = isNumber(options?.min) &&
+        (options?.minaxistype === "custom" || options?.minaxistype == null);
+    const useManualMax = isNumber(options?.max) &&
+        (options?.maxaxistype === "custom" || options?.maxaxistype == null);
+    if (useManualMin)
+        min = options.min;
+    if (useManualMax)
+        max = options.max;
+    if (max < min)
+        max = min;
+    return { min, max };
+};
+/**
+ * Clamp a value into the axis extents — values outside a manual
+ * min/max are drawn pinned at the axis edge, like Excel.
+ */
+export const clampToExtents = (value, min, max) => Math.min(Math.max(value, min), max);

package/dist/esm/components/cell-structured/sparkline.d.ts

@@ -0,0 +1,6 @@
+import type { SparkLineResult } from "@rowsncolumns/common-types";
+import React from "react";
+import type { StructuredResultProps } from "./types";
+export type SparklineProps = StructuredResultProps & SparkLineResult;
+export declare const Sparkline: ({ x, y, width, height, data, options, color, }: SparklineProps) => React.JSX.Element;
+//# sourceMappingURL=sparkline.d.ts.map

package/dist/esm/components/cell-structured/sparkline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sparkline.d.ts","sourceRoot":"","sources":["../../../../components/cell-structured/sparkline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAGlE,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,MAAM,MAAM,cAAc,GAAG,qBAAqB,GAAG,eAAe,CAAC;AAoBrE,eAAO,MAAM,SAAS,GAAI,gDAQvB,cAAc,sBA8QhB,CAAC"}

package/dist/esm/components/cell-structured/sparkline.js

@@ -0,0 +1,246 @@
+import React from "react";
+import { useCallback } from "react";
+import { Shape } from "react-konva";
+import { clampToExtents, resolveSparklineSeries, resolveSparklineExtents, } from "./sparkline-math";
+// Draw a diamond marker at the specified position
+const drawDiamond = (ctx, x, y, size, fillColor) => {
+    ctx.beginPath();
+    ctx.moveTo(x, y - size); // Top
+    ctx.lineTo(x + size, y); // Right
+    ctx.lineTo(x, y + size); // Bottom
+    ctx.lineTo(x - size, y); // Left
+    ctx.closePath();
+    ctx.fillStyle = fillColor;
+    ctx.fill();
+};
+export const Sparkline = ({ x, y, width, height, data, options, color, }) => {
+    const sparkLineFunction = useCallback((ctx, shape) => {
+        // Guard against undefined data (formula not yet evaluated)
+        if (!data || !Array.isArray(data)) {
+            return;
+        }
+        const padding = 4;
+        const paddingTop = 4;
+        const lineColor = options?.color ?? color ?? "#000000";
+        const fillColor = options?.color ?? color ?? "#000000";
+        const lineWidth = typeof options?.lineweight === "number" && options.lineweight > 0
+            ? options.lineweight
+            : 1;
+        const width = shape.width();
+        const height = shape.height();
+        // Resolve raw data into paintable x slots — applies the
+        // `emptycells` (gap/zero/span) and `rtl` options. Without those
+        // options this compacts empties exactly like the legacy
+        // `data.filter(isNumber)` path did.
+        const slots = resolveSparklineSeries(data, options);
+        const type = options?.charttype ?? "line";
+        const minColumnHeight = 1;
+        // For winloss, we need to handle positive/negative differently
+        const isWinLoss = type === "winloss";
+        // Axis extents with Excel's manual-min/max semantics
+        // (minaxistype/maxaxistype "custom" → manual value).
+        const { min: effectiveMin, max: effectiveMax } = resolveSparklineExtents(slots, options, isWinLoss);
+        // Calculate scales. Gap/span slots keep their x position, so the
+        // slot count (not the numeric count) drives the x scale.
+        const xScale = (width - 2 * padding) / (slots.length - (type === "line" ? 1 : 0));
+        const availableHeight = height - 2 * paddingTop - minColumnHeight;
+        const yScale = availableHeight / (effectiveMax - effectiveMin || 1); // Avoid division by zero
+        // Calculate zero line position for winloss
+        const zeroY = isWinLoss
+            ? height - paddingTop - (0 - effectiveMin) * yScale
+            : height - paddingTop;
+        // Calculate min/max slot indices for marker highlighting
+        // (first occurrence wins, matching the legacy behavior)
+        let minSlotIndex = -1;
+        let maxSlotIndex = -1;
+        slots.forEach((slot, index) => {
+            if (slot.value == null)
+                return;
+            if (minSlotIndex === -1 || slot.value < slots[minSlotIndex].value) {
+                minSlotIndex = index;
+            }
+            if (maxSlotIndex === -1 || slot.value > slots[maxSlotIndex].value) {
+                maxSlotIndex = index;
+            }
+        });
+        // Highest data ordinal — `last` follows data order, which under
+        // `rtl` paints at the left edge.
+        const lastDataIndex = slots.reduce((m, slot) => (slot.dataIndex > m ? slot.dataIndex : m), -1);
+        // Store points for markers
+        const points = [];
+        // Per-column color resolution for "column" sparklines. Excel
+        // highlights individual columns when `high`/`low`/`first`/`last`/
+        // `negative` flags are on, painting the relevant column with its
+        // dedicated color override. We compute the fill per column rather
+        // than batching every rect into one fill so each column can have
+        // its own color.
+        const pickColumnColor = (value, slotIndex, dataIndex) => {
+            const isHigh = slotIndex === maxSlotIndex;
+            const isLow = slotIndex === minSlotIndex;
+            const isFirst = dataIndex === 0;
+            const isLast = dataIndex >= 0 && dataIndex === lastDataIndex;
+            const isNegative = value < 0;
+            if (options?.negative && isNegative) {
+                return options.colorNegative ?? "#FF0000";
+            }
+            if (options?.high && isHigh) {
+                return options.colorHigh ?? "#00B050";
+            }
+            if (options?.low && isLow) {
+                return options.colorLow ?? "#FF0000";
+            }
+            if (options?.first && isFirst) {
+                return options.colorFirst ?? fillColor;
+            }
+            if (options?.last && isLast) {
+                return options.colorLast ?? fillColor;
+            }
+            return fillColor;
+        };
+        // Draw the horizontal (zero) axis when requested via the `axis`
+        // (displayXAxis) option. Only meaningful when zero falls inside
+        // the vertical extents; winloss already anchors bars on zeroY.
+        if (options?.axis) {
+            const axisY = isWinLoss
+                ? zeroY
+                : effectiveMin <= 0 && effectiveMax >= 0
+                    ? height -
+                        paddingTop -
+                        ((0 - effectiveMin) * yScale + minColumnHeight)
+                    : undefined;
+            if (axisY !== undefined) {
+                ctx.beginPath();
+                ctx.strokeStyle = "#808080";
+                ctx.lineWidth = 1;
+                ctx.moveTo(padding, axisY);
+                ctx.lineTo(width - padding, axisY);
+                ctx.stroke();
+            }
+        }
+        ctx.beginPath();
+        ctx.strokeStyle = lineColor;
+        ctx.lineWidth = lineWidth;
+        // Draw the sparkline. `penDown` tracks line continuity across
+        // empty slots: `emptycells: "gap"` lifts the pen (breaking the
+        // line) while `"span"` keeps it down so the next point connects
+        // straight across the gap.
+        let penDown = false;
+        slots.forEach((slot, index) => {
+            const pointX = padding + index * xScale;
+            if (slot.value == null) {
+                // Empty slot: nothing painted. Gap breaks the line; span
+                // leaves the pen down so the line bridges the gap. Column
+                // and winloss types simply leave the slot blank.
+                if (options?.emptycells === "gap") {
+                    penDown = false;
+                }
+                return;
+            }
+            const value = slot.value;
+            // Pin values outside a manual min/max to the axis edge.
+            const clamped = clampToExtents(value, effectiveMin, effectiveMax);
+            const columnHeight = (clamped - effectiveMin) * yScale + minColumnHeight;
+            const pointY = height - paddingTop - columnHeight;
+            if (type === "line") {
+                if (!penDown) {
+                    ctx.moveTo(pointX, pointY);
+                    penDown = true;
+                }
+                else {
+                    ctx.lineTo(pointX, pointY);
+                }
+                points.push({
+                    x: pointX,
+                    y: pointY,
+                    value,
+                    slotIndex: index,
+                    dataIndex: slot.dataIndex,
+                });
+            }
+            else if (type === "column") {
+                const columnWidth = xScale * 0.8;
+                const columnX = pointX + (xScale - columnWidth) / 2;
+                ctx.fillStyle = pickColumnColor(value, index, slot.dataIndex);
+                ctx.fillRect(columnX, pointY, columnWidth, columnHeight);
+            }
+            else if (type === "winloss") {
+                // Win/loss shows bars above/below zero line
+                const columnWidth = xScale * 0.8;
+                const columnX = pointX + (xScale - columnWidth) / 2;
+                const barHeight = Math.abs(clamped) * yScale;
+                const barY = clamped >= 0 ? zeroY - barHeight : zeroY;
+                // Use different colors for positive/negative
+                ctx.fillStyle =
+                    value >= 0
+                        ? options?.color ?? "#00B050"
+                        : options?.colorNegative ?? "#FF0000";
+                ctx.fillRect(columnX, barY, columnWidth, Math.max(barHeight, 2));
+                // Store points for diamond markers
+                const markerY = clamped >= 0 ? zeroY - barHeight : zeroY + barHeight;
+                points.push({
+                    x: pointX + xScale / 2,
+                    y: markerY,
+                    value,
+                    slotIndex: index,
+                    dataIndex: slot.dataIndex,
+                });
+            }
+        });
+        // Stroke the line for 'line' type. Column sparklines are filled
+        // per-column inline above so each rect can carry its own color.
+        if (type === "line") {
+            ctx.stroke();
+        }
+        // Draw markers - enabled by default for line sparklines, always for winloss
+        // Can be disabled with markers: false
+        const showMarkers = options?.markers !== false && (type === "line" || isWinLoss);
+        if (showMarkers && points.length > 0) {
+            const markerSize = isWinLoss ? 4 : 3;
+            points.forEach((point) => {
+                let markerColor;
+                // Determine marker color based on value and position.
+                // First/last follow the data order (dataIndex), so under
+                // `rtl` the "first" marker paints at the right edge.
+                const isFirst = point.dataIndex === 0;
+                const isLast = point.dataIndex >= 0 && point.dataIndex === lastDataIndex;
+                const isHigh = point.slotIndex === maxSlotIndex;
+                const isLow = point.slotIndex === minSlotIndex;
+                const isNegative = point.value < 0;
+                if (isWinLoss) {
+                    // Win/loss: green for positive, red for negative
+                    markerColor = isNegative
+                        ? options?.colorNegative ?? "#FF0000"
+                        : options?.colorHigh ?? options?.color ?? "#00B050";
+                }
+                else {
+                    // Line sparkline: use high/low colors for min/max points
+                    if (isHigh && isLow) {
+                        // Same point is both high and low (single point or all same)
+                        markerColor = options?.colorHigh ?? options?.color ?? lineColor;
+                    }
+                    else if (isHigh) {
+                        markerColor = options?.colorHigh ?? "#00B050";
+                    }
+                    else if (isLow) {
+                        markerColor = options?.colorLow ?? "#FF0000";
+                    }
+                    else if (isFirst && options?.colorFirst) {
+                        markerColor = options.colorFirst;
+                    }
+                    else if (isLast && options?.colorLast) {
+                        markerColor = options.colorLast;
+                    }
+                    else if (isNegative) {
+                        markerColor = options?.colorNegative ?? "#FF0000";
+                    }
+                    else {
+                        markerColor =
+                            options?.colorMarkers ?? options?.color ?? lineColor;
+                    }
+                }
+                drawDiamond(ctx, point.x, point.y, markerSize, markerColor);
+            });
+        }
+    }, [data, options, color]);
+    return (React.createElement(Shape, { x: x, y: y, width: width, height: height, sceneFunc: sparkLineFunction, listening: false }));
+};

package/dist/esm/components/cell-structured/types.d.ts

@@ -0,0 +1,23 @@
+import type { StructuredResult } from "@rowsncolumns/common-types";
+import type { CellProps } from "../cell/typings";
+export type StructuredResultProps<S extends StructuredResult = StructuredResult> = Pick<CellProps<S>, "structuredValue"> & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color?: string;
+    textX?: number;
+    textY?: number;
+    textWidth?: number;
+    textFill?: string;
+    textVerticalAlign?: string;
+    textAlign?: string;
+    textFontFamily?: string;
+    textFontStyle?: string;
+    textFontSize?: number;
+    textDecoration?: string;
+    textPadding?: number;
+    textWrap?: string;
+    textLineHeight?: number;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/components/cell-structured/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../components/cell-structured/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,MAAM,qBAAqB,CAC/B,CAAC,SAAS,gBAAgB,GAAG,gBAAgB,IAC3C,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,iBAAiB,CAAC,GAAG;IAC1C,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC"}

package/dist/esm/components/cell-structured/types.js

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

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

@@ -0,0 +1,28 @@
+import type { CellInterface } from "@rowsncolumns/grid";
+import type { CellTooltipVariants } from "@rowsncolumns/ui";
+import type { ReactNode } from "react";
+import React from "react";
+import type { DefaultTooltipProps } from "../../hooks/use-tooltip";
+import type { CellData, SheetCoordinate } from "../../types";
+import type { CanvasGridProps } from "../canvas-grid/typings";
+export type CellTooltipProps<T extends CellData = CellData> = DefaultTooltipProps & CellTooltipVariants & {
+    sheetId: number;
+    position?: "top" | "bottom" | "right" | "left";
+    title?: string;
+    content?: string;
+    customContent?: ReactNode | string;
+    hyperlink?: T["hyperlink"];
+    cell: CellInterface;
+    note?: string;
+    noteEditorCell?: SheetCoordinate;
+    onRequestShowNote?(cell: CellInterface | undefined): void;
+    onRequestUpdateNote?(value: string | undefined): void;
+    onRequestCloseNote?(): void;
+    onRemoveLink?: CanvasGridProps["onRemoveLink"];
+    onSelectLink?: CanvasGridProps["onSelectLink"];
+    onRequestPinTooltip(cell: CellInterface): void;
+    onRequestUnpinTooltip(): void;
+    errorResolutionComponent?: (sheetId: number, rowIndex: number, columnIndex: number) => ReactNode;
+};
+export declare const CellTooltip: React.MemoExoticComponent<({ x, y, width, height, scrollLeft, scrollTop, position, variant, content, customContent, title, note, noteEditorCell, hyperlink, cell, sheetId, onRemoveLink, onSelectLink, onRequestShowNote, onRequestUpdateNote, onRequestCloseNote, errorResolutionComponent, onRequestUnpinTooltip, onRequestPinTooltip, }: CellTooltipProps) => React.JSX.Element>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,IACxD,mBAAmB,GACjB,mBAAmB,GAAG;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IACnC,SAAS,CAAC,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC;IAC3B,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC,iBAAiB,CAAC,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1D,mBAAmB,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACtD,kBAAkB,CAAC,IAAI,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;IAC/C,YAAY,CAAC,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;IAC/C,mBAAmB,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;IAC/C,qBAAqB,IAAI,IAAI,CAAC;IAC9B,wBAAwB,CAAC,EAAE,CACzB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,KAChB,SAAS,CAAC;CAChB,CAAC;AAEN,eAAO,MAAM,WAAW,8UA4BnB,gBAAgB,uBA4FpB,CAAC"}

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

@@ -0,0 +1,50 @@
+import { Cross1Icon } from "@rowsncolumns/icons";
+import { ConditionalWrapper, IconButton } from "@rowsncolumns/ui";
+import { CellTooltip as CellTooltipUI, CellTooltipTitle as CellTooltipTitleUI, } from "@rowsncolumns/ui";
+import { normalizeExternalUrl } from "@rowsncolumns/utils";
+import React, { memo } from "react";
+import { NoteEditor } from "./note-editor";
+export const CellTooltip = memo(({ x = 0, y = 0, width = 0, height = 0, scrollLeft = 0, scrollTop = 0, position = "right", variant, content, customContent, title, note, noteEditorCell, hyperlink, cell, sheetId, onRemoveLink, onSelectLink, onRequestShowNote, onRequestUpdateNote, onRequestCloseNote, errorResolutionComponent, 
+// Pin
+onRequestUnpinTooltip, onRequestPinTooltip, }) => {
+    const posX = position === "right" ? x + width - scrollLeft : x - scrollLeft;
+    const posY = position === "bottom" ? y + height - scrollTop : y - scrollTop;
+    const tooltipTitle = variant === "error" ? "Error" : variant === "invalid" ? "Invalid" : title;
+    const shouldShowErrorResolution = variant === "error" || variant === "invalid";
+    const errorResolution = shouldShowErrorResolution
+        ? errorResolutionComponent?.(sheetId, cell.rowIndex, cell.columnIndex)
+        : undefined;
+    return (React.createElement(CellTooltipUI, { style: {
+            transform: `translate(${posX}px, ${posY}px)`,
+        }, variant: variant, onMouseMove: (e) => e.stopPropagation(), onContextMenu: (e) => e.stopPropagation() },
+        note || noteEditorCell ? (React.createElement(NoteEditor, { initialValue: note, onFocus: () => onRequestShowNote?.(cell), onRequestUpdateNote: onRequestUpdateNote, onRequestCloseNote: onRequestCloseNote, noteEditorCell: noteEditorCell })) : null,
+        hyperlink &&
+            typeof hyperlink !== "string" &&
+            hyperlink.tooltip ? (React.createElement("div", { className: "py-1 text-xs font-system" }, hyperlink.tooltip)) : null,
+        React.createElement(ConditionalWrapper, { condition: Boolean(hyperlink), wrapper: (children) => {
+                if (!hyperlink) {
+                    return null;
+                }
+                const kind = typeof hyperlink === "string" ? "external" : hyperlink.kind;
+                const url = typeof hyperlink === "string"
+                    ? normalizeExternalUrl(hyperlink)
+                    : hyperlink.kind === "external"
+                        ? normalizeExternalUrl(hyperlink.url)
+                        : `#range=${hyperlink.location}`;
+                return (React.createElement("div", { className: "flex align-top break-all items-start gap-2" },
+                    React.createElement("a", { target: kind === "external" ? "_blank" : undefined, href: url, rel: "noopener noreferrer", className: "flex-1 text-xs", onClick: (event) => {
+                            if (onSelectLink) {
+                                onSelectLink(sheetId, cell, hyperlink);
+                                event.preventDefault();
+                            }
+                        } }, children),
+                    React.createElement(IconButton, { size: "sm", onClick: () => {
+                            onRemoveLink?.(sheetId, cell);
+                        } },
+                        React.createElement(Cross1Icon, null))));
+            } }, tooltipTitle ? (React.createElement(CellTooltipTitleUI, { variant: variant }, tooltipTitle)) : null),
+        content ? (React.createElement("div", { className: "py-2 text-xs font-system" }, content)) : null,
+        customContent ? (React.createElement("div", { className: "py-2 text-xs font-system" }, customContent)) : null,
+        errorResolution));
+});
+CellTooltip.displayName = "CellTooltip";

package/dist/esm/components/cell-tooltip/note-editor.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { SheetCoordinate } from "../../types";
+type NoteEditorProps = {
+    initialValue?: string;
+    noteEditorCell?: SheetCoordinate;
+    onFocus?(): void;
+    onRequestUpdateNote?(value: string | undefined, previousValue?: string | undefined): void;
+    onRequestCloseNote?(): void;
+};
+export declare const NoteEditor: ({ initialValue, noteEditorCell, onFocus, onRequestUpdateNote, onRequestCloseNote, }: NoteEditorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=note-editor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"note-editor.d.ts","sourceRoot":"","sources":["../../../../components/cell-tooltip/note-editor.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGnD,KAAK,eAAe,GAAG;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,mBAAmB,CAAC,CAClB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,GACjC,IAAI,CAAC;IACR,kBAAkB,CAAC,IAAI,IAAI,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,qFAMxB,eAAe,sBA0BjB,CAAC"}

package/dist/esm/components/cell-tooltip/note-editor.js

@@ -0,0 +1,19 @@
+import { useIsomorphicLayoutEffect } from "@rowsncolumns/ui";
+import React, { useRef, useState } from "react";
+import { StyledNoteTextarea } from "./style";
+export const NoteEditor = ({ initialValue, noteEditorCell, onFocus, onRequestUpdateNote, onRequestCloseNote, }) => {
+    const [value, setValue] = useState(initialValue ?? "");
+    const inputRef = useRef(null);
+    useIsomorphicLayoutEffect(() => {
+        if (noteEditorCell) {
+            inputRef.current?.focus();
+        }
+    }, [noteEditorCell]);
+    return (React.createElement(StyledNoteTextarea, { ref: inputRef, rows: 3, value: value, onFocus: onFocus, placeholder: "Type a note.", onBlur: () => {
+            onRequestUpdateNote?.(value, initialValue);
+        }, onKeyDown: (e) => {
+            if (e.key === "Escape") {
+                onRequestCloseNote?.();
+            }
+        }, onChange: (e) => setValue(e.target.value) }));
+};

package/dist/esm/components/cell-tooltip/style.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const StyledNoteTextarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=style.d.ts.map

package/dist/esm/components/cell-tooltip/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../components/cell-tooltip/style.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,kBAAkB,0LAY7B,CAAC"}

package/dist/esm/components/cell-tooltip/style.js

@@ -0,0 +1,4 @@
+import { cn } from "@rowsncolumns/ui";
+import React from "react";
+export const StyledNoteTextarea = React.forwardRef(({ className, ...props }, ref) => (React.createElement("textarea", { ref: ref, className: cn("p-1 border-none font-system text-xs rounded-none w-full bg-rnc-background text-rnc-foreground", className), ...props })));
+StyledNoteTextarea.displayName = "StyledNoteTextarea";

package/dist/esm/components/context-menu/index.d.ts

@@ -0,0 +1,80 @@
+import type { CellInterface, SelectionArea } from "@rowsncolumns/grid";
+import React from "react";
+import type { PasteSpecialType } from "../../hooks/use-copy-paste-cut";
+import type { SheetRange } from "../../types";
+import type { CanvasGridProps, SelectionAttributes } from "../canvas-grid/typings";
+export type ContextMenuProps = {
+    activeCell: CellInterface;
+    selections: SelectionArea<SelectionAttributes>[];
+    isRowHeader: boolean;
+    isColumnHeader: boolean;
+    selectedRowHeadersIds: number[];
+    selectedColumnHeadersIds: number[];
+    sheetId: number;
+    frozenRows: number;
+    frozenColumns: number;
+    basicFilter?: CanvasGridProps["basicFilter"];
+    tables: CanvasGridProps["tables"];
+    pivotTables: CanvasGridProps["pivotTables"];
+    protectedRanges: CanvasGridProps["protectedRanges"];
+    onClearContents: CanvasGridProps["onClearContents"];
+    onHideColumn: CanvasGridProps["onHideColumn"];
+    onShowColumn: CanvasGridProps["onShowColumn"];
+    onHideRow: CanvasGridProps["onHideRow"];
+    onShowRow: CanvasGridProps["onShowRow"];
+    onGroupRows?: CanvasGridProps["onGroupRows"];
+    onUngroupRows?: CanvasGridProps["onUngroupRows"];
+    onGroupColumns?: CanvasGridProps["onGroupColumns"];
+    onUngroupColumns?: CanvasGridProps["onUngroupColumns"];
+    onDeleteColumn: CanvasGridProps["onDeleteColumn"];
+    onDeleteRow: CanvasGridProps["onDeleteRow"];
+    onInsertRow: CanvasGridProps["onInsertRow"];
+    onInsertColumn: CanvasGridProps["onInsertColumn"];
+    onInsertCellsShiftDown: CanvasGridProps["onInsertCellsShiftDown"];
+    onInsertCellsShiftRight: CanvasGridProps["onInsertCellsShiftRight"];
+    onDeleteCellsShiftLeft: CanvasGridProps["onDeleteCellsShiftLeft"];
+    onDeleteCellsShiftUp: CanvasGridProps["onDeleteCellsShiftUp"];
+    onRequestResize: CanvasGridProps["onRequestResize"];
+    onFreezeColumn: CanvasGridProps["onFreezeColumn"];
+    onFreezeRow: CanvasGridProps["onFreezeRow"];
+    onProtectRange: CanvasGridProps["onProtectRange"];
+    onUnProtectRange: CanvasGridProps["onUnProtectRange"];
+    onSortRange: CanvasGridProps["onSortRange"];
+    onRequestDefineNamedRange: CanvasGridProps["onRequestDefineNamedRange"];
+    onRequestConditionalFormat: CanvasGridProps["onRequestConditionalFormat"];
+    onRequestDataValidation: CanvasGridProps["onRequestDataValidation"];
+    onRequestFormatCells: CanvasGridProps["onRequestFormatCells"];
+    onInsertNote: (sheetId: number, cell: CellInterface) => void;
+    onSortColumn: CanvasGridProps["onSortColumn"];
+    onRequestEditTable: CanvasGridProps["onRequestEditTable"];
+    onRequestEditPivotTable: CanvasGridProps["onRequestEditPivotTable"];
+    onRequestDeletePivotTable: CanvasGridProps["onRequestDeletePivotTable"];
+    onPivotDrillDown?: CanvasGridProps["onPivotDrillDown"];
+    onRemoveTable: CanvasGridProps["onRemoveTable"];
+    onClearFormatting: CanvasGridProps["onClearFormatting"];
+    onCreateBasicFilter: CanvasGridProps["onCreateBasicFilter"];
+    onCreateTable: CanvasGridProps["onCreateTable"];
+    onInsertTableColumn: CanvasGridProps["onInsertTableColumn"];
+    onInsertTableRow: CanvasGridProps["onInsertTableRow"];
+    onDeleteTableColumn: CanvasGridProps["onDeleteTableColumn"];
+    onDeleteTableRow: CanvasGridProps["onDeleteTableRow"];
+    onFilterTable: CanvasGridProps["onFilterTable"];
+    onSortTable: CanvasGridProps["onSortTable"];
+    onSplitTextToColumns: CanvasGridProps["onSplitTextToColumns"];
+    onRemoveDuplicates: CanvasGridProps["onRemoveDuplicates"];
+    isHiddenColumn(columnIndex: number): boolean;
+    isHiddenRow(rowIndex: number): boolean;
+    getFormattedValue: (sheetId: number, rowIndex: number, columnIndex: number) => string | undefined;
+    getFormattedValuesFromRange(sheetId: number, selections: SelectionArea<SelectionAttributes>[]): string[];
+    isSheetFocused(): boolean;
+    isTableHeader(rowIndex: number, columnIndex: number): boolean;
+    focusSheet(): void;
+    onCopy?(): void;
+    onPaste?(pasteSpecialType?: PasteSpecialType): void;
+    onCut?(): void;
+    readonly?: boolean;
+    onAddQuickEdit(range: SheetRange): void;
+    enableMagicFill?: boolean;
+};
+export declare const ContextMenu: ({ isRowHeader, isColumnHeader, activeCell, selections, basicFilter, isTableHeader, onClearContents, onHideColumn, onHideRow, onGroupRows, onUngroupRows, onGroupColumns, onUngroupColumns, onDeleteRow, onDeleteColumn, onInsertColumn, onInsertRow, onInsertCellsShiftDown, onInsertCellsShiftRight, onDeleteCellsShiftLeft, onDeleteCellsShiftUp, onFreezeRow, onFreezeColumn, onCopy, onCut, onPaste, onInsertNote, onProtectRange, onUnProtectRange, onSortRange, onSortColumn, onRequestDefineNamedRange, onRequestResize, onRequestEditTable, onRequestEditPivotTable, onRequestDeletePivotTable, onPivotDrillDown, onRequestFormatCells, onRequestConditionalFormat, onRequestDataValidation, onRemoveTable, onClearFormatting, onCreateTable, onCreateBasicFilter, onFilterTable, onSortTable, getFormattedValuesFromRange, focusSheet, isSheetFocused, getFormattedValue, onInsertTableColumn, onDeleteTableColumn, onInsertTableRow, onDeleteTableRow, onSplitTextToColumns, onRemoveDuplicates, isHiddenColumn, isHiddenRow, onShowColumn, onShowRow, tables, pivotTables, protectedRanges, sheetId, frozenRows, frozenColumns, selectedRowHeadersIds, selectedColumnHeadersIds, readonly, onAddQuickEdit, enableMagicFill, }: ContextMenuProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/context-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/context-menu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EAEb,aAAa,EACd,MAAM,oBAAoB,CAAC;AA6C5B,OAAO,KAAuC,MAAM,OAAO,CAAC;AAM5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EAAE,UAAU,EAAa,MAAM,aAAa,CAAC;AACzD,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAEhC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,UAAU,EAAE,aAAa,CAAC;IAC1B,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACjD,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,qBAAqB,EAAE,MAAM,EAAE,CAAC;IAChC,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC7C,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,WAAW,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC5C,eAAe,EAAE,eAAe,CAAC,iBAAiB,CAAC,CAAC;IACpD,eAAe,EAAE,eAAe,CAAC,iBAAiB,CAAC,CAAC;IACpD,YAAY,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;IAC9C,YAAY,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;IAC9C,SAAS,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACxC,SAAS,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACjD,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IACnD,gBAAgB,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACvD,cAAc,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAClD,WAAW,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC5C,WAAW,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC5C,cAAc,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAClD,sBAAsB,EAAE,eAAe,CAAC,wBAAwB,CAAC,CAAC;IAClE,uBAAuB,EAAE,eAAe,CAAC,yBAAyB,CAAC,CAAC;IACpE,sBAAsB,EAAE,eAAe,CAAC,wBAAwB,CAAC,CAAC;IAClE,oBAAoB,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IAC9D,eAAe,EAAE,eAAe,CAAC,iBAAiB,CAAC,CAAC;IACpD,cAAc,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAClD,WAAW,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC5C,cAAc,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAClD,gBAAgB,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACtD,WAAW,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC5C,yBAAyB,EAAE,eAAe,CAAC,2BAA2B,CAAC,CAAC;IACxE,0BAA0B,EAAE,eAAe,CAAC,4BAA4B,CAAC,CAAC;IAC1E,uBAAuB,EAAE,eAAe,CAAC,yBAAyB,CAAC,CAAC;IACpE,oBAAoB,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IAC9D,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,YAAY,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;IAC9C,kBAAkB,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;IAC1D,uBAAuB,EAAE,eAAe,CAAC,yBAAyB,CAAC,CAAC;IACpE,yBAAyB,EAAE,eAAe,CAAC,2BAA2B,CAAC,CAAC;IACxE,gBAAgB,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACvD,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAChD,iBAAiB,EAAE,eAAe,CAAC,mBAAmB,CAAC,CAAC;IACxD,mBAAmB,EAAE,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAC5D,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAChD,mBAAmB,EAAE,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAC5D,gBAAgB,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACtD,mBAAmB,EAAE,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAC5D,gBAAgB,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACtD,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAChD,WAAW,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC5C,oBAAoB,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IAC9D,kBAAkB,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;IAC1D,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7C,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IACvC,iBAAiB,EAAE,CACjB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,KAChB,MAAM,GAAG,SAAS,CAAC;IACxB,2BAA2B,CACzB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,GAC/C,MAAM,EAAE,CAAC;IACZ,cAAc,IAAI,OAAO,CAAC;IAC1B,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;IAC9D,UAAU,IAAI,IAAI,CAAC;IACnB,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,OAAO,CAAC,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACpD,KAAK,CAAC,IAAI,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,0qCAwEzB,gBAAgB,sBA4tClB,CAAC"}