@rowsncolumns/spreadsheet 10.2.68

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

@@ -0,0 +1,146 @@
+import type { CalculatorFunction } from "@rowsncolumns/common-types";
+import type { OptionItem, ProseMirrorEditorProps, TextFormatRun } from "@rowsncolumns/ui";
+import React from "react";
+import type { SharedEditorProps } from "../../hooks/use-editable";
+import type { CellData, CellFormat, ConditionValue, DataValidationRule, HorizontalAlign, ParsedToken } from "../../types";
+import type { CanvasGridProps, SpreadsheetTheme } from "../canvas-grid/typings";
+export type CellEditorProps = SharedEditorProps & {
+    locale?: string;
+    /**
+     * Effective value of currently editing cell
+     * To get date from serial number
+     */
+    effectiveValue?: CellData["effectiveValue"];
+    /**
+     * Cell format
+     */
+    format?: CellFormat | null;
+    /**
+     * Scale value
+     */
+    scale?: number;
+    /**
+     * Spreadsheet theme
+     */
+    theme: SpreadsheetTheme;
+    /**
+     * Data validation rules
+     */
+    dataValidation?: DataValidationRule | null;
+    /**
+     * Horizontal alignment
+     */
+    horizontalAlignment?: HorizontalAlign;
+    /**
+     * Get values from a range
+     */
+    getRangeValues?: (range: string) => ConditionValue[] | undefined;
+    /**
+     * Get values from a range asynchronously (used for formula-based ranges)
+     */
+    getRangeValuesAsync?: (range: string, sheetId: number, rowIndex: number, columnIndex: number) => Promise<ConditionValue[]>;
+    /**
+     * Sheet name of the active cell
+     */
+    sheetName?: string;
+    /**
+     * Active sheet ID
+     */
+    sheetId: number;
+    /**
+     * Selected sheetname
+     */
+    editingSheetName?: string;
+    /**
+     * Address of the cell
+     */
+    address: string | null;
+    /**
+     * Tokenzier function
+     * @param value
+     */
+    tokenizer(value: string): ParsedToken[];
+    /**
+     * Default cell background color
+     */
+    defaultBackgroundColor?: string;
+    /**
+     * Default text color
+     */
+    defaultTextColor?: string;
+    /**
+     * Show formula help dropdown
+     */
+    showFormulaHelp: boolean;
+    /**
+     * Enable sticky editor
+     */
+    stickyEditor?: boolean;
+    defaultFontSizePoint: number;
+    /**
+     * Customize SuggestionsDropdown
+     */
+    SuggestionsDropdown?: ProseMirrorEditorProps["SuggestionsDropdown"];
+    /**
+     * Callback to hide formula help
+     */
+    onHideFormulaHelp?(): void;
+    /**
+     * Shows the formula help
+     */
+    onShowFormulaHelp?(): void;
+    /**
+     * Calculator functions for autosuggestions
+     */
+    functionDescriptions?: CalculatorFunction[];
+    /**
+     * Named ranges
+     */
+    getNamedRanges(): OptionItem[] | undefined;
+    /**
+     * Get all table names
+     */
+    getTableNames(): OptionItem[] | undefined;
+    /**
+     * Get column names of a table
+     * @param tableName
+     */
+    getTableColumnNames(tableName: string | undefined): OptionItem[] | undefined;
+    /**
+     * get property names from cell
+     * @param sheetName
+     * @param rowIndex
+     * @param columnIndex
+     */
+    getStructuredProperties(sheetName: string | undefined, rowIndex: number, columnIndex: number): OptionItem[] | undefined;
+    /**
+     * Preview formula results
+     */
+    onRequestCalculate: CanvasGridProps["onRequestCalculate"];
+    /**
+     * Text formatting runs
+     */
+    textFormatRuns?: TextFormatRun[] | null;
+    /**
+     * Mention getter
+     */
+    getMentions: CanvasGridProps["getMentions"];
+    /**
+     * Get function parameters
+     */
+    getFunctionParameterSuggestions: CanvasGridProps["getFunctionParameterSuggestions"];
+    /**
+     * Predicate
+     */
+    shouldFetchFunctionParameters: CanvasGridProps["shouldFetchFunctionParameters"];
+    /**
+     * Mention component
+     */
+    MentionTagComponent?: CanvasGridProps["MentionTagComponent"];
+    /**
+     * Mention dropdown component
+     */
+    MentionDropdownItemComponent?: CanvasGridProps["MentionDropdownItemComponent"];
+};
+export declare const CellEditor: React.MemoExoticComponent<({ value, effectiveValue, isNewValue, onChange, sheetId, editingSheetId, cell, position, format, locale, scale, autoFocus, maxWidth, maxHeight, containerWidth, onSubmit, onCancel, getNextFocusableCell, dataValidation, getRangeValues, getRangeValuesAsync, horizontalAlignment, editingSheetName, address, isScrolling, showFormulaHelp, onHideFormulaHelp, onShowFormulaHelp, onKeyDown, tokenizer, defaultBackgroundColor, defaultTextColor, theme, functionDescriptions, getNamedRanges, getTableNames, getTableColumnNames, getStructuredProperties, onRequestCalculate, editorBorderColor, isPointerDevice, SuggestionsDropdown, stickyEditor, defaultFontSizePoint, textFormatRuns, getMentions, getFunctionParameterSuggestions, shouldFetchFunctionParameters, MentionTagComponent, MentionDropdownItemComponent, navigationMode, onCopy, onPaste, onCut, onBlur, }: CellEditorProps) => React.JSX.Element>;
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,266 @@
+import { ProseMirrorEditor } from "@rowsncolumns/ui";
+import { dataValidationOptionMatchesCellValue, getDefaultDateFormat, isNil, lightenColor, normalizeColor, ssfFormat, } from "@rowsncolumns/utils";
+import React, { memo, useCallback, useEffect, useRef, useState } from "react";
+import { useSetCellEditorInstance } from "../../atoms";
+import { useActiveEditor, useSetActiveEditor, } from "../../atoms/active-editor.atom";
+import { useFormulaModeValue } from "../../atoms/formula-mode.atom";
+import { useSetFormulaSelectionState } from "../../atoms/formula-selection-state.atom";
+import { EDITOR_FORMULA_VERTICAL_ALIGNMENT, EDITOR_VERTICAL_ALIGNMENT, FORMULA_FONT_CONFIG, INDENT_SPACING, } from "../../config";
+import { checkIfStringIsReference, pointToPixel, splitDataValidationListValues, } from "../../helpers";
+import { useIsomorphicLayoutEffect } from "../../hooks/use-isomorphic-layout-effect";
+import { useMergeRefs } from "../../hooks/use-merge.refs";
+import { useTextDimension } from "../../hooks/use-text-dimensions";
+import { getStringifiedColor } from "../../themes";
+import { CalendarPopup } from "./calendar-popup";
+import { FormulaResultPreview } from "./formula-result-preview";
+import { getDirectionFromKey, shouldShowCalendarPopup } from "./helpers";
+import { dropdownStyles, StyledAddress, StyledAddressContainer, StyledEditor, } from "./style";
+export const CellEditor = memo(({ value = "", effectiveValue, isNewValue, onChange, sheetId, editingSheetId, cell, position, format, locale, scale = 1, autoFocus, maxWidth, maxHeight, containerWidth, onSubmit, onCancel, getNextFocusableCell, dataValidation, getRangeValues, getRangeValuesAsync, horizontalAlignment, editingSheetName, address, isScrolling, showFormulaHelp, onHideFormulaHelp, onShowFormulaHelp, onKeyDown, tokenizer, defaultBackgroundColor, defaultTextColor, theme, functionDescriptions, getNamedRanges, getTableNames, getTableColumnNames, getStructuredProperties, onRequestCalculate, editorBorderColor, isPointerDevice, SuggestionsDropdown, stickyEditor, defaultFontSizePoint, textFormatRuns, getMentions, getFunctionParameterSuggestions, shouldFetchFunctionParameters, MentionTagComponent, MentionDropdownItemComponent, navigationMode, onCopy, onPaste, onCut, onBlur, }) => {
+    const editorBorderOutlineColor = editorBorderColor
+        ? lightenColor(0.5, editorBorderColor)
+        : undefined;
+    const { x = 0, y = 0, width: cellWidth, height: cellHeight } = position;
+    const formulaMode = useFormulaModeValue();
+    const editorRef = useRef(null);
+    const setCellEditorInstance = useSetCellEditorInstance();
+    const mergedEditorRef = useMergeRefs(editorRef, setCellEditorInstance);
+    const setActiveEditor = useSetActiveEditor();
+    const setFormulaState = useSetFormulaSelectionState();
+    const activeEditor = useActiveEditor();
+    const isActiveEditor = editorRef.current === activeEditor;
+    const isMounted = useRef(false);
+    const textFormat = format?.textFormat;
+    const numberFormat = format?.numberFormat;
+    const backgroundColor = format?.backgroundColor;
+    const indent = (format?.indent ?? 0) + (format?.relativeIndent ?? 0);
+    const { color, fontFamily: cellfontFamily, italic, bold, underline, } = textFormat ?? {};
+    const fontSizePt = textFormat?.fontSize ?? defaultFontSizePoint;
+    const fontFamily = formulaMode
+        ? FORMULA_FONT_CONFIG.fontFamily
+        : cellfontFamily ?? undefined;
+    const fontSize = formulaMode
+        ? FORMULA_FONT_CONFIG.fontSize
+        : pointToPixel(fontSizePt);
+    const justifyContent = formulaMode
+        ? EDITOR_FORMULA_VERTICAL_ALIGNMENT
+        : EDITOR_VERTICAL_ALIGNMENT;
+    const fontWeight = formulaMode ? "normal" : bold ? "bold" : "normal";
+    const fontStyle = formulaMode ? "normal" : italic ? "italic" : "normal";
+    const editorColor = getStringifiedColor(color, theme);
+    // Theme-reference run colors ({ theme, tint }) must resolve against the
+    // live spreadsheet theme before the editor can paint them.
+    const resolveRunColor = useCallback((runColor) => getStringifiedColor(runColor, theme), [theme]);
+    const editorBackgroundColor = formulaMode
+        ? defaultBackgroundColor
+        : getStringifiedColor(backgroundColor, theme) ?? defaultBackgroundColor;
+    const isTransparent = editorBackgroundColor
+        ? normalizeColor(editorBackgroundColor)?.a === 0
+        : false;
+    const finalEditorBackgroundColor = isTransparent
+        ? defaultBackgroundColor
+        : editorBackgroundColor;
+    const textDecoration = formulaMode
+        ? "none"
+        : underline
+            ? "underline"
+            : "none";
+    const finalHorizontalAlignment = formulaMode
+        ? "left"
+        : horizontalAlignment;
+    // Get dimension of the text value
+    const isInvisible = cellWidth === 0 && cellHeight === 0;
+    const borderWidth = 2;
+    const [width, height] = useTextDimension({
+        value,
+        fontSize,
+        fontFamily,
+        italic,
+        bold,
+        scale,
+        width: cellWidth,
+        height: cellHeight,
+        borderWidth,
+    });
+    // Mounted ref
+    useIsomorphicLayoutEffect(() => {
+        isMounted.current = true;
+    }, []);
+    // Handle formula state change
+    const handleFormulaStateChange = useCallback((canSelectCells, selectionMode, selectionIndex) => {
+        setFormulaState({ canSelectCells, selectionMode, selectionIndex });
+    }, [setFormulaState]);
+    // Handle focus
+    const handleFocus = useCallback(() => {
+        if (editorRef.current) {
+            setActiveEditor(editorRef.current);
+        }
+    }, [setActiveEditor]);
+    // Change handler
+    const handleChange = useCallback((newValue, textFormatRuns) => {
+        if (!cell || isNil(editingSheetId)) {
+            return;
+        }
+        onChange?.(newValue, textFormatRuns, editingSheetId, cell);
+    }, [onChange, editingSheetId, cell]);
+    // Submit handler
+    const handleSubmit = useCallback((newValue, textFormatRuns, e) => {
+        if (!cell || isNil(editingSheetId)) {
+            return;
+        }
+        const direction = e && getDirectionFromKey(e.key, e.shiftKey);
+        const nextActiveCell = direction
+            ? getNextFocusableCell?.(editingSheetId, cell, direction)
+            : undefined;
+        // Submit value
+        onSubmit?.(newValue, textFormatRuns, editingSheetId, cell, nextActiveCell);
+        // Reset active editor
+        setActiveEditor(undefined);
+    }, [onSubmit, editingSheetId, cell, getNextFocusableCell, setActiveEditor]);
+    // Prevent grid contextmenu from popping up
+    const onContextMenu = useCallback((e) => e.stopPropagation(), []);
+    // Dropdown options
+    const [options, setOptions] = useState(undefined);
+    useEffect(() => {
+        let isActive = true;
+        const type = dataValidation?.condition?.type;
+        const allowBlank = dataValidation?.allowBlank;
+        const values = dataValidation?.condition?.values;
+        const maptoName = (value) => ({
+            title: value.userEnteredValue,
+        });
+        const blankValue = { userEnteredValue: "" };
+        const updateOptions = (rangeValues) => {
+            const mapped = rangeValues?.map(maptoName) ?? [];
+            // A list whose entries already include empty text (Excel's bare `'`
+            // text-prefix entry) must not gain a second blank row from allowBlank.
+            const hasBlankOption = mapped.some((option) => !option.title);
+            const nextOptions = [
+                ...mapped,
+                ...(allowBlank && !hasBlankOption ? [maptoName(blankValue)] : []),
+            ];
+            if (isActive) {
+                setOptions(nextOptions);
+            }
+        };
+        if (type !== "ONE_OF_LIST" && type !== "ONE_OF_RANGE") {
+            setOptions(undefined);
+            return () => {
+                isActive = false;
+            };
+        }
+        const firstValue = values?.[0]?.userEnteredValue;
+        const isAddress = type === "ONE_OF_RANGE" ? true : checkIfStringIsReference(firstValue);
+        if (!isAddress) {
+            updateOptions(splitDataValidationListValues(firstValue));
+            return () => {
+                isActive = false;
+            };
+        }
+        if (!firstValue || !cell) {
+            updateOptions([]);
+            return () => {
+                isActive = false;
+            };
+        }
+        const targetSheetId = editingSheetId ?? sheetId;
+        const run = async () => {
+            const rangeValues = getRangeValuesAsync
+                ? await getRangeValuesAsync(firstValue, targetSheetId, cell.rowIndex, cell.columnIndex)
+                : getRangeValues?.(firstValue);
+            updateOptions(rangeValues);
+        };
+        run();
+        return () => {
+            isActive = false;
+        };
+    }, [
+        cell,
+        sheetId,
+        dataValidation,
+        editingSheetId,
+        getRangeValues,
+        getRangeValuesAsync,
+    ]);
+    /**
+     * Excel parity: the data-validation dropdown opens with the entry
+     * matching the cell's current value highlighted. Text-prefix semantics
+     * apply on both sides — a blank cell (or one storing the lone `'`
+     * text-prefix apostrophe) selects the list's empty entry.
+     */
+    const isOptionSelected = useCallback((item) => dataValidationOptionMatchesCellValue(item?.value ?? item?.title ?? "", value), [value]);
+    /**
+     * The editor is open on one sheet while the user is looking at another.
+     * Only formula mode can legitimately stay in that state (picking a
+     * cross-sheet range) — every other sheet change commits and tears the
+     * editor down, so a cross-sheet editor outside formula mode is simply
+     * mid-teardown.
+     *
+     * Both of these are derived during render rather than written from a
+     * passive effect. The effect version lagged a frame behind the sheet
+     * change, which is what flashed the address badge over the new sheet
+     * before the teardown landed.
+     */
+    const isCrossSheet = !isNil(editingSheetId) && editingSheetId !== sheetId;
+    const isSheetChanged = isCrossSheet && formulaMode;
+    // Condition to show cell address. While mid-teardown nothing should show —
+    // suppressing the whole badge here (not just the sheet-name prefix) is
+    // what keeps the sheet-change scroll, which flips `isScrolling`, from
+    // flashing it for a frame.
+    const showCellAddress = isCrossSheet ? isSheetChanged : isScrolling;
+    const minWidth = Math.min(width, maxWidth ?? width);
+    const minHeight = Math.min(height, maxHeight ?? height);
+    // Alignment
+    const isRightAligned = finalHorizontalAlignment === "right";
+    return (React.createElement(StyledEditor, { style: {
+            top: y,
+            left: isRightAligned ? "auto" : x,
+            right: isRightAligned
+                ? containerWidth - (x + cellWidth + borderWidth / 2)
+                : "auto",
+            minWidth,
+            minHeight,
+            paddingLeft: finalHorizontalAlignment === "left"
+                ? INDENT_SPACING * indent + 1
+                : 0,
+            paddingRight: finalHorizontalAlignment === "right"
+                ? INDENT_SPACING * indent + 1
+                : 0,
+            maxWidth,
+            maxHeight,
+            backgroundColor: finalEditorBackgroundColor,
+            borderColor: editorBorderColor,
+            outlineColor: editorBorderOutlineColor,
+            outlineWidth: 2,
+            color: formulaMode ? defaultTextColor : editorColor,
+            fontSize: fontSize * scale,
+            fontFamily,
+            textAlign: finalHorizontalAlignment,
+            fontWeight,
+            fontStyle,
+            textDecoration,
+            justifyContent,
+            lineHeight: "normal",
+            ...(isInvisible
+                ? {
+                    width: 0,
+                    height: 0,
+                    opacity: 0,
+                    pointerEvents: "none",
+                }
+                : {}),
+        }, 
+        // Prevent grid c
+        onContextMenu: onContextMenu },
+        showCellAddress || formulaMode ? (React.createElement(StyledAddressContainer, null,
+            showCellAddress ? (React.createElement(StyledAddress, null,
+                isSheetChanged && editingSheetName
+                    ? `${editingSheetName}!`
+                    : "",
+                address)) : null,
+            formulaMode && onRequestCalculate ? (React.createElement(FormulaResultPreview, { value: value, onRequestCalculate: onRequestCalculate })) : null)) : null,
+        React.createElement(ProseMirrorEditor, { ref: mergedEditorRef, formulaMode: formulaMode, autoFocus: autoFocus, value: value, isNewValue: isNewValue, onFocus: handleFocus, onBlur: onBlur, onChange: handleChange, onKeyDown: onKeyDown, onSubmit: handleSubmit, onCancel: onCancel, tokenizer: tokenizer, onFormulaStateChange: handleFormulaStateChange, name: "celleditor", showDropdown: isActiveEditor, isActive: isActiveEditor, dropdownStyles: dropdownStyles, options: options, isOptionSelected: options?.length ? isOptionSelected : undefined, functionDescriptions: functionDescriptions, getNamedRanges: getNamedRanges, getTableNames: getTableNames, getTableColumnNames: getTableColumnNames, showFormulaHelp: showFormulaHelp, onHideFormulaHelp: onHideFormulaHelp, onShowFormulaHelp: onShowFormulaHelp, SuggestionsDropdown: SuggestionsDropdown, stickyEditor: stickyEditor, textFormatRuns: textFormatRuns, resolveRunColor: resolveRunColor, getMentions: getMentions, getFunctionParameterSuggestions: getFunctionParameterSuggestions, shouldFetchFunctionParameters: shouldFetchFunctionParameters, MentionTagComponent: MentionTagComponent, MentionDropdownItemComponent: MentionDropdownItemComponent, getStructuredProperties: getStructuredProperties, navigationMode: navigationMode, onCopy: onCopy, onCut: onCut, onPaste: onPaste, cellFontFamily: formulaMode ? undefined : cellfontFamily ?? undefined }),
+        !formulaMode &&
+            isPointerDevice &&
+            shouldShowCalendarPopup(numberFormat) ? (React.createElement(CalendarPopup, { value: effectiveValue?.nv ?? effectiveValue?.numberValue ?? undefined, onEscapeKeyDown: () => editorRef.current?.focus(), onSubmit: (value) => handleSubmit(ssfFormat(getDefaultDateFormat(locale), value)) })) : null));
+});
+CellEditor.displayName = "CellEditor";

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

@@ -0,0 +1,9 @@
+import { Stack } from "@rowsncolumns/ui";
+import type { ComponentProps, CSSProperties } from "react";
+import React from "react";
+export declare const StyledEditor: ({ className, ...props }: ComponentProps<typeof Stack>) => React.JSX.Element;
+export declare const StyledAddressContainer: ({ className, ...props }: ComponentProps<typeof Stack>) => React.JSX.Element;
+export declare const StyledAddress: ({ className, ...props }: ComponentProps<typeof Stack>) => React.JSX.Element;
+export declare const StyledResultPreview: ({ className, ...props }: ComponentProps<typeof Stack>) => React.JSX.Element;
+export declare const dropdownStyles: CSSProperties;
+//# sourceMappingURL=style.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../components/cell-editor/style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,YAAY,GAAI,yBAG1B,cAAc,CAAC,OAAO,KAAK,CAAC,sBAQ9B,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,yBAGpC,cAAc,CAAC,OAAO,KAAK,CAAC,sBAQ9B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,yBAG3B,cAAc,CAAC,OAAO,KAAK,CAAC,sBAK9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,yBAGjC,cAAc,CAAC,OAAO,KAAK,CAAC,sBAQ9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAI5B,CAAC"}

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

@@ -0,0 +1,11 @@
+import { cn, Stack } from "@rowsncolumns/ui";
+import React from "react";
+export const StyledEditor = ({ className, ...props }) => (React.createElement(Stack, { className: cn("absolute p-px shadow-sm border-solid border-2 bg-rnc-background flex flex-col left-0 top-0 pointer-events-auto outline will-change-transform", className), ...props }));
+export const StyledAddressContainer = ({ className, ...props }) => (React.createElement(Stack, { className: cn("absolute -left-[2px] mb-1 text-xs leading-[14px] shadow-sm bottom-full whitespace-nowrap font-system flex items-center", className), ...props }));
+export const StyledAddress = ({ className, ...props }) => (React.createElement(Stack, { className: cn("p-[6px] pt-1 pb-1 bg-[#4589eb] text-[white]", className), ...props }));
+export const StyledResultPreview = ({ className, ...props }) => (React.createElement(Stack, { className: cn("bg-rnc-background p-[6px] pt-1 pb-1 font-formula text-xs text-blue-700 shadow-md min-w-[20px] leading-none", className), ...props }));
+export const dropdownStyles = {
+    left: -2,
+    minWidth: "calc(100px)",
+    marginRight: -2,
+};

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

@@ -0,0 +1,14 @@
+import React from "react";
+export declare const ERROR_TAG_WIDTH = 6.5;
+type CellErrorProps = {
+    x: number;
+    y: number;
+    color: string;
+    scale: number;
+};
+/**
+ * Cell Error
+ */
+export declare const CellError: ({ x, y, scale, color, }: CellErrorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-error/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,KAAK,cAAc,GAAG;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,yBAKvB,cAAc,sBAkBhB,CAAC"}

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { Shape } from "react-konva";
+import { INVALID_COLOR } from "../../config";
+export const ERROR_TAG_WIDTH = 6.5;
+/**
+ * Cell Error
+ */
+export const CellError = ({ x, y, scale, color = INVALID_COLOR, }) => {
+    return (React.createElement(Shape, { x: x, y: y, sceneFunc: (context) => {
+            context.beginPath();
+            context.setAttr("fillStyle", color);
+            context.moveTo(0, 0);
+            context.lineTo(ERROR_TAG_WIDTH * scale, 0);
+            context.lineTo(ERROR_TAG_WIDTH * scale, ERROR_TAG_WIDTH * scale);
+            context.closePath();
+            context.fill();
+        }, listening: false, perfectDrawEnabled: false }));
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-expand/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;AAKrD,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAElE,KAAK,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG;IAClD,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;IACjC,mBAAmB,EAAE,eAAe,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,yGAWxB,eAAe,sBAwDjB,CAAC"}

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

@@ -0,0 +1,25 @@
+import React, { useCallback, useState } from "react";
+import { Group, Path, Rect } from "react-konva";
+import { ARROW_DOWN_COLOR, ARROW_DOWN_WIDTH } from "../../config";
+import { getIconSpacing } from "../../helpers";
+export const CellExpand = ({ x = 0, y = 0, width = 0, height = 0, scale, rowIndex, columnIndex, onClick, verticalAlignment, horizontalAlignment, }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const padding = getIconSpacing(verticalAlignment, height, ARROW_DOWN_WIDTH, scale, 2 * scale);
+    const isRightAligned = horizontalAlignment === "right";
+    const posX = isRightAligned
+        ? x + 3
+        : 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: "M17.5858 5H14V3H21V10H19V6.41421L14.7071 10.7071L13.2929 9.29289L17.5858 5ZM3 14H5V17.5858L9.29289 13.2929L10.7071 14.7071L6.41421 19H10V21H3V14Z", x: posX - 0.5 * scale, y: posY - 0.5 * scale, width: ARROW_DOWN_WIDTH, height: ARROW_DOWN_WIDTH, fill: isHovered ? "white" : ARROW_DOWN_COLOR, scaleY: 0.7 * scale, scaleX: 0.7 * scale, listening: true, perfectDrawEnabled: false })));
+};

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

@@ -0,0 +1,21 @@
+import type { CellInterface } from "@rowsncolumns/grid";
+import type { ShapeConfig } from "konva/lib/Shape";
+import React from "react";
+import type { SortOrder, VerticalAlign } from "../../types";
+type FilterIconProps = Omit<ShapeConfig, "scale"> & {
+    rowIndex: number;
+    columnIndex: number;
+    scale: number;
+    isActive?: boolean | null;
+    filterIconColor?: string | null;
+    verticalAlignment: VerticalAlign;
+    backgroundColor?: string | null;
+    sortOrder?: SortOrder | null;
+    onClick?(cell: CellInterface): void;
+};
+/**
+ * Filter icon
+ */
+export declare const CellFilter: React.FC<FilterIconProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-filter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAgC,MAAM,OAAO,CAAC;AAUrD,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D,KAAK,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG;IAClD,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,iBAAiB,EAAE,aAAa,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC7B,OAAO,CAAC,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4EhD,CAAC"}

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

@@ -0,0 +1,34 @@
+import { lightenColor } from "@rowsncolumns/utils";
+import React, { useCallback, useState } from "react";
+import { Group, Path, Rect } from "react-konva";
+import { DEFAULT_CELL_SPACING, FILTER_ICON_WIDTH, FITLER_ICON_PATH, FUNNEL_ICON_PATH, } from "../../config";
+import { getIconSpacing } from "../../helpers";
+/**
+ * Filter icon
+ */
+export const CellFilter = ({ x = 0, y = 0, width = 0, height = 0, rowIndex, columnIndex, scale, onClick, isActive, filterIconColor = "green", backgroundColor, verticalAlignment, }) => {
+    const cellSpacing = DEFAULT_CELL_SPACING;
+    // Without a click handler (a readonly grid) the icon is a pure state indicator —
+    // no hover highlight, or it reads as clickable.
+    const interactive = !!onClick;
+    const [isHovered, setIsHovered] = useState(false);
+    const padding = getIconSpacing(verticalAlignment, height, FILTER_ICON_WIDTH, scale, 2 * scale);
+    const posX = x + width - (FILTER_ICON_WIDTH + cellSpacing) * 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: interactive ? handleMouseEnter : undefined, onMouseLeave: interactive ? handleMouseLeave : undefined, onPointerUp: (event) => {
+            event.evt.stopPropagation();
+        }, perfectDrawEnabled: false, onMouseDown: (e) => e.evt.preventDefault() },
+        React.createElement(Rect, { x: posX, y: posY, width: FILTER_ICON_WIDTH * scale, height: FILTER_ICON_WIDTH * scale, fill: isHovered
+                ? lightenColor(0.2, filterIconColor ?? "green")
+                : backgroundColor ?? undefined, cornerRadius: 0, perfectDrawEnabled: false, stroke: filterIconColor ?? undefined, strokeWidth: 1, hitStrokeWidth: 0 }),
+        React.createElement(Path, { data: isActive ? FUNNEL_ICON_PATH : FITLER_ICON_PATH, x: posX + 0.5, y: posY + 0.5, fill: isHovered ? "white" : filterIconColor ?? undefined, scaleY: 0.6 * scale, scaleX: 0.6 * scale, perfectDrawEnabled: false })));
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-group/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,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,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;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,8FAWvB,cAAc,sBAwDhB,CAAC"}

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

@@ -0,0 +1,26 @@
+import React, { useCallback, useState } from "react";
+import { Group, Path, Rect } from "react-konva";
+import { COLLAPSE_ICON_PATH, DEFAULT_CELL_SPACING, EXPAND_COLLAPSE_ICON_WIDTH, EXPAND_ICON_PATH, } from "../../config";
+import { getIconSpacing } from "../../helpers";
+import { getStringifiedColor } from "../../themes";
+export const CellGroup = ({ x = 0, y = 0, height = 0, scale, rowIndex, columnIndex, onClick, expanded, verticalAlignment, theme, }) => {
+    const iconSpacing = DEFAULT_CELL_SPACING;
+    const [isHovered, setIsHovered] = useState(false);
+    const padding = getIconSpacing(verticalAlignment, height, EXPAND_COLLAPSE_ICON_WIDTH, scale, 2 * scale + 2);
+    const posX = x + iconSpacing * scale;
+    const posY = y + padding + 0.5;
+    const handleMouseEnter = useCallback(() => {
+        setIsHovered(true);
+    }, []);
+    const handleMouseLeave = useCallback(() => {
+        setIsHovered(false);
+    }, []);
+    const handleClick = () => {
+        onClick?.({ rowIndex, columnIndex });
+    };
+    const backgroundColor = getStringifiedColor({ theme: 4 }, theme);
+    const hoverBackgroundColor = getStringifiedColor({ theme: 4, tint: 0.2 }, theme);
+    return (React.createElement(Group, { onClick: handleClick, onTap: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, perfectDrawEnabled: false },
+        React.createElement(Rect, { x: posX, y: posY, width: EXPAND_COLLAPSE_ICON_WIDTH * scale, height: EXPAND_COLLAPSE_ICON_WIDTH * scale, fill: isHovered ? hoverBackgroundColor : backgroundColor, cornerRadius: 2, perfectDrawEnabled: false }),
+        React.createElement(Path, { data: expanded ? COLLAPSE_ICON_PATH : EXPAND_ICON_PATH, x: posX, y: posY, fill: "white", scaleY: 0.5 * scale, scaleX: 0.5 * scale, listening: true, perfectDrawEnabled: false })));
+};