@rowsncolumns/spreadsheet 10.2.68

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var helpers_1 = require("./helpers");
+describe("shouldShowCalendarPopup", function () {
+    it("does not show a calendar for a time-only DATE_TIME format", function () {
+        expect((0, helpers_1.shouldShowCalendarPopup)({
+            type: "DATE_TIME",
+            pattern: "[$-en-us]h:mm AM/PM;@",
+        })).toBe(false);
+    });
+    it("shows a calendar for DATE and date-time formats", function () {
+        expect((0, helpers_1.shouldShowCalendarPopup)({ type: "DATE", pattern: "m/d/yyyy" })).toBe(true);
+        expect((0, helpers_1.shouldShowCalendarPopup)({
+            type: "DATE_TIME",
+            pattern: "m/d/yyyy h:mm AM/PM",
+        })).toBe(true);
+    });
+});

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

@@ -0,0 +1,268 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CellEditor = void 0;
+var tslib_1 = require("tslib");
+var ui_1 = require("@rowsncolumns/ui");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = tslib_1.__importStar(require("react"));
+var atoms_1 = require("../../atoms");
+var active_editor_atom_1 = require("../../atoms/active-editor.atom");
+var formula_mode_atom_1 = require("../../atoms/formula-mode.atom");
+var formula_selection_state_atom_1 = require("../../atoms/formula-selection-state.atom");
+var config_1 = require("../../config");
+var helpers_1 = require("../../helpers");
+var use_isomorphic_layout_effect_1 = require("../../hooks/use-isomorphic-layout-effect");
+var use_merge_refs_1 = require("../../hooks/use-merge.refs");
+var use_text_dimensions_1 = require("../../hooks/use-text-dimensions");
+var themes_1 = require("../../themes");
+var calendar_popup_1 = require("./calendar-popup");
+var formula_result_preview_1 = require("./formula-result-preview");
+var helpers_2 = require("./helpers");
+var style_1 = require("./style");
+exports.CellEditor = (0, react_1.memo)(function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var _j = _a.value, value = _j === void 0 ? "" : _j, effectiveValue = _a.effectiveValue, isNewValue = _a.isNewValue, onChange = _a.onChange, sheetId = _a.sheetId, editingSheetId = _a.editingSheetId, cell = _a.cell, position = _a.position, format = _a.format, locale = _a.locale, _k = _a.scale, scale = _k === void 0 ? 1 : _k, autoFocus = _a.autoFocus, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, containerWidth = _a.containerWidth, onSubmit = _a.onSubmit, onCancel = _a.onCancel, getNextFocusableCell = _a.getNextFocusableCell, dataValidation = _a.dataValidation, getRangeValues = _a.getRangeValues, getRangeValuesAsync = _a.getRangeValuesAsync, horizontalAlignment = _a.horizontalAlignment, editingSheetName = _a.editingSheetName, address = _a.address, isScrolling = _a.isScrolling, showFormulaHelp = _a.showFormulaHelp, onHideFormulaHelp = _a.onHideFormulaHelp, onShowFormulaHelp = _a.onShowFormulaHelp, onKeyDown = _a.onKeyDown, tokenizer = _a.tokenizer, defaultBackgroundColor = _a.defaultBackgroundColor, defaultTextColor = _a.defaultTextColor, theme = _a.theme, functionDescriptions = _a.functionDescriptions, getNamedRanges = _a.getNamedRanges, getTableNames = _a.getTableNames, getTableColumnNames = _a.getTableColumnNames, getStructuredProperties = _a.getStructuredProperties, onRequestCalculate = _a.onRequestCalculate, editorBorderColor = _a.editorBorderColor, isPointerDevice = _a.isPointerDevice, SuggestionsDropdown = _a.SuggestionsDropdown, stickyEditor = _a.stickyEditor, defaultFontSizePoint = _a.defaultFontSizePoint, textFormatRuns = _a.textFormatRuns, getMentions = _a.getMentions, getFunctionParameterSuggestions = _a.getFunctionParameterSuggestions, shouldFetchFunctionParameters = _a.shouldFetchFunctionParameters, MentionTagComponent = _a.MentionTagComponent, MentionDropdownItemComponent = _a.MentionDropdownItemComponent, navigationMode = _a.navigationMode, onCopy = _a.onCopy, onPaste = _a.onPaste, onCut = _a.onCut, onBlur = _a.onBlur;
+    var editorBorderOutlineColor = editorBorderColor
+        ? (0, utils_1.lightenColor)(0.5, editorBorderColor)
+        : undefined;
+    var _l = position.x, x = _l === void 0 ? 0 : _l, _m = position.y, y = _m === void 0 ? 0 : _m, cellWidth = position.width, cellHeight = position.height;
+    var formulaMode = (0, formula_mode_atom_1.useFormulaModeValue)();
+    var editorRef = (0, react_1.useRef)(null);
+    var setCellEditorInstance = (0, atoms_1.useSetCellEditorInstance)();
+    var mergedEditorRef = (0, use_merge_refs_1.useMergeRefs)(editorRef, setCellEditorInstance);
+    var setActiveEditor = (0, active_editor_atom_1.useSetActiveEditor)();
+    var setFormulaState = (0, formula_selection_state_atom_1.useSetFormulaSelectionState)();
+    var activeEditor = (0, active_editor_atom_1.useActiveEditor)();
+    var isActiveEditor = editorRef.current === activeEditor;
+    var isMounted = (0, react_1.useRef)(false);
+    var textFormat = format === null || format === void 0 ? void 0 : format.textFormat;
+    var numberFormat = format === null || format === void 0 ? void 0 : format.numberFormat;
+    var backgroundColor = format === null || format === void 0 ? void 0 : format.backgroundColor;
+    var indent = ((_b = format === null || format === void 0 ? void 0 : format.indent) !== null && _b !== void 0 ? _b : 0) + ((_c = format === null || format === void 0 ? void 0 : format.relativeIndent) !== null && _c !== void 0 ? _c : 0);
+    var _o = textFormat !== null && textFormat !== void 0 ? textFormat : {}, color = _o.color, cellfontFamily = _o.fontFamily, italic = _o.italic, bold = _o.bold, underline = _o.underline;
+    var fontSizePt = (_d = textFormat === null || textFormat === void 0 ? void 0 : textFormat.fontSize) !== null && _d !== void 0 ? _d : defaultFontSizePoint;
+    var fontFamily = formulaMode
+        ? config_1.FORMULA_FONT_CONFIG.fontFamily
+        : cellfontFamily !== null && cellfontFamily !== void 0 ? cellfontFamily : undefined;
+    var fontSize = formulaMode
+        ? config_1.FORMULA_FONT_CONFIG.fontSize
+        : (0, helpers_1.pointToPixel)(fontSizePt);
+    var justifyContent = formulaMode
+        ? config_1.EDITOR_FORMULA_VERTICAL_ALIGNMENT
+        : config_1.EDITOR_VERTICAL_ALIGNMENT;
+    var fontWeight = formulaMode ? "normal" : bold ? "bold" : "normal";
+    var fontStyle = formulaMode ? "normal" : italic ? "italic" : "normal";
+    var editorColor = (0, themes_1.getStringifiedColor)(color, theme);
+    // Theme-reference run colors ({ theme, tint }) must resolve against the
+    // live spreadsheet theme before the editor can paint them.
+    var resolveRunColor = (0, react_1.useCallback)(function (runColor) {
+        return (0, themes_1.getStringifiedColor)(runColor, theme);
+    }, [theme]);
+    var editorBackgroundColor = formulaMode
+        ? defaultBackgroundColor
+        : (_e = (0, themes_1.getStringifiedColor)(backgroundColor, theme)) !== null && _e !== void 0 ? _e : defaultBackgroundColor;
+    var isTransparent = editorBackgroundColor
+        ? ((_f = (0, utils_1.normalizeColor)(editorBackgroundColor)) === null || _f === void 0 ? void 0 : _f.a) === 0
+        : false;
+    var finalEditorBackgroundColor = isTransparent
+        ? defaultBackgroundColor
+        : editorBackgroundColor;
+    var textDecoration = formulaMode
+        ? "none"
+        : underline
+            ? "underline"
+            : "none";
+    var finalHorizontalAlignment = formulaMode
+        ? "left"
+        : horizontalAlignment;
+    // Get dimension of the text value
+    var isInvisible = cellWidth === 0 && cellHeight === 0;
+    var borderWidth = 2;
+    var _p = tslib_1.__read((0, use_text_dimensions_1.useTextDimension)({
+        value: value,
+        fontSize: fontSize,
+        fontFamily: fontFamily,
+        italic: italic,
+        bold: bold,
+        scale: scale,
+        width: cellWidth,
+        height: cellHeight,
+        borderWidth: borderWidth,
+    }), 2), width = _p[0], height = _p[1];
+    // Mounted ref
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
+        isMounted.current = true;
+    }, []);
+    // Handle formula state change
+    var handleFormulaStateChange = (0, react_1.useCallback)(function (canSelectCells, selectionMode, selectionIndex) {
+        setFormulaState({ canSelectCells: canSelectCells, selectionMode: selectionMode, selectionIndex: selectionIndex });
+    }, [setFormulaState]);
+    // Handle focus
+    var handleFocus = (0, react_1.useCallback)(function () {
+        if (editorRef.current) {
+            setActiveEditor(editorRef.current);
+        }
+    }, [setActiveEditor]);
+    // Change handler
+    var handleChange = (0, react_1.useCallback)(function (newValue, textFormatRuns) {
+        if (!cell || (0, utils_1.isNil)(editingSheetId)) {
+            return;
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue, textFormatRuns, editingSheetId, cell);
+    }, [onChange, editingSheetId, cell]);
+    // Submit handler
+    var handleSubmit = (0, react_1.useCallback)(function (newValue, textFormatRuns, e) {
+        if (!cell || (0, utils_1.isNil)(editingSheetId)) {
+            return;
+        }
+        var direction = e && (0, helpers_2.getDirectionFromKey)(e.key, e.shiftKey);
+        var nextActiveCell = direction
+            ? getNextFocusableCell === null || getNextFocusableCell === void 0 ? void 0 : getNextFocusableCell(editingSheetId, cell, direction)
+            : undefined;
+        // Submit value
+        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(newValue, textFormatRuns, editingSheetId, cell, nextActiveCell);
+        // Reset active editor
+        setActiveEditor(undefined);
+    }, [onSubmit, editingSheetId, cell, getNextFocusableCell, setActiveEditor]);
+    // Prevent grid contextmenu from popping up
+    var onContextMenu = (0, react_1.useCallback)(function (e) { return e.stopPropagation(); }, []);
+    // Dropdown options
+    var _q = tslib_1.__read((0, react_1.useState)(undefined), 2), options = _q[0], setOptions = _q[1];
+    (0, react_1.useEffect)(function () {
+        var _a, _b, _c;
+        var isActive = true;
+        var type = (_a = dataValidation === null || dataValidation === void 0 ? void 0 : dataValidation.condition) === null || _a === void 0 ? void 0 : _a.type;
+        var allowBlank = dataValidation === null || dataValidation === void 0 ? void 0 : dataValidation.allowBlank;
+        var values = (_b = dataValidation === null || dataValidation === void 0 ? void 0 : dataValidation.condition) === null || _b === void 0 ? void 0 : _b.values;
+        var maptoName = function (value) { return ({
+            title: value.userEnteredValue,
+        }); };
+        var blankValue = { userEnteredValue: "" };
+        var updateOptions = function (rangeValues) {
+            var _a;
+            var mapped = (_a = rangeValues === null || rangeValues === void 0 ? void 0 : rangeValues.map(maptoName)) !== null && _a !== void 0 ? _a : [];
+            // A list whose entries already include empty text (Excel's bare `'`
+            // text-prefix entry) must not gain a second blank row from allowBlank.
+            var hasBlankOption = mapped.some(function (option) { return !option.title; });
+            var nextOptions = tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(mapped), false), tslib_1.__read((allowBlank && !hasBlankOption ? [maptoName(blankValue)] : [])), false);
+            if (isActive) {
+                setOptions(nextOptions);
+            }
+        };
+        if (type !== "ONE_OF_LIST" && type !== "ONE_OF_RANGE") {
+            setOptions(undefined);
+            return function () {
+                isActive = false;
+            };
+        }
+        var firstValue = (_c = values === null || values === void 0 ? void 0 : values[0]) === null || _c === void 0 ? void 0 : _c.userEnteredValue;
+        var isAddress = type === "ONE_OF_RANGE" ? true : (0, helpers_1.checkIfStringIsReference)(firstValue);
+        if (!isAddress) {
+            updateOptions((0, helpers_1.splitDataValidationListValues)(firstValue));
+            return function () {
+                isActive = false;
+            };
+        }
+        if (!firstValue || !cell) {
+            updateOptions([]);
+            return function () {
+                isActive = false;
+            };
+        }
+        var targetSheetId = editingSheetId !== null && editingSheetId !== void 0 ? editingSheetId : sheetId;
+        var run = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+            var rangeValues, _a;
+            return tslib_1.__generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!getRangeValuesAsync) return [3 /*break*/, 2];
+                        return [4 /*yield*/, getRangeValuesAsync(firstValue, targetSheetId, cell.rowIndex, cell.columnIndex)];
+                    case 1:
+                        _a = _b.sent();
+                        return [3 /*break*/, 3];
+                    case 2:
+                        _a = getRangeValues === null || getRangeValues === void 0 ? void 0 : getRangeValues(firstValue);
+                        _b.label = 3;
+                    case 3:
+                        rangeValues = _a;
+                        updateOptions(rangeValues);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        run();
+        return function () {
+            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.
+     */
+    var isOptionSelected = (0, react_1.useCallback)(function (item) {
+        var _a, _b;
+        return (0, utils_1.dataValidationOptionMatchesCellValue)((_b = (_a = item === null || item === void 0 ? void 0 : item.value) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.title) !== null && _b !== void 0 ? _b : "", 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.
+     */
+    var isCrossSheet = !(0, utils_1.isNil)(editingSheetId) && editingSheetId !== sheetId;
+    var 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.
+    var showCellAddress = isCrossSheet ? isSheetChanged : isScrolling;
+    var minWidth = Math.min(width, maxWidth !== null && maxWidth !== void 0 ? maxWidth : width);
+    var minHeight = Math.min(height, maxHeight !== null && maxHeight !== void 0 ? maxHeight : height);
+    // Alignment
+    var isRightAligned = finalHorizontalAlignment === "right";
+    return (react_1.default.createElement(style_1.StyledEditor, { style: tslib_1.__assign({ top: y, left: isRightAligned ? "auto" : x, right: isRightAligned
+                ? containerWidth - (x + cellWidth + borderWidth / 2)
+                : "auto", minWidth: minWidth, minHeight: minHeight, paddingLeft: finalHorizontalAlignment === "left"
+                ? config_1.INDENT_SPACING * indent + 1
+                : 0, paddingRight: finalHorizontalAlignment === "right"
+                ? config_1.INDENT_SPACING * indent + 1
+                : 0, maxWidth: maxWidth, maxHeight: maxHeight, backgroundColor: finalEditorBackgroundColor, borderColor: editorBorderColor, outlineColor: editorBorderOutlineColor, outlineWidth: 2, color: formulaMode ? defaultTextColor : editorColor, fontSize: fontSize * scale, fontFamily: fontFamily, textAlign: finalHorizontalAlignment, fontWeight: fontWeight, fontStyle: fontStyle, textDecoration: textDecoration, justifyContent: justifyContent, lineHeight: "normal" }, (isInvisible
+            ? {
+                width: 0,
+                height: 0,
+                opacity: 0,
+                pointerEvents: "none",
+            }
+            : {})), 
+        // Prevent grid c
+        onContextMenu: onContextMenu },
+        showCellAddress || formulaMode ? (react_1.default.createElement(style_1.StyledAddressContainer, null,
+            showCellAddress ? (react_1.default.createElement(style_1.StyledAddress, null,
+                isSheetChanged && editingSheetName
+                    ? "".concat(editingSheetName, "!")
+                    : "",
+                address)) : null,
+            formulaMode && onRequestCalculate ? (react_1.default.createElement(formula_result_preview_1.FormulaResultPreview, { value: value, onRequestCalculate: onRequestCalculate })) : null)) : null,
+        react_1.default.createElement(ui_1.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: style_1.dropdownStyles, options: options, isOptionSelected: (options === null || options === void 0 ? void 0 : 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 !== null && cellfontFamily !== void 0 ? cellfontFamily : undefined }),
+        !formulaMode &&
+            isPointerDevice &&
+            (0, helpers_2.shouldShowCalendarPopup)(numberFormat) ? (react_1.default.createElement(calendar_popup_1.CalendarPopup, { value: (_h = (_g = effectiveValue === null || effectiveValue === void 0 ? void 0 : effectiveValue.nv) !== null && _g !== void 0 ? _g : effectiveValue === null || effectiveValue === void 0 ? void 0 : effectiveValue.numberValue) !== null && _h !== void 0 ? _h : undefined, onEscapeKeyDown: function () { var _a; return (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, onSubmit: function (value) {
+                return handleSubmit((0, utils_1.ssfFormat)((0, utils_1.getDefaultDateFormat)(locale), value));
+            } })) : null));
+});
+exports.CellEditor.displayName = "CellEditor";

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dropdownStyles = exports.StyledResultPreview = exports.StyledAddress = exports.StyledAddressContainer = exports.StyledEditor = void 0;
+var tslib_1 = require("tslib");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importDefault(require("react"));
+var StyledEditor = function (_a) {
+    var className = _a.className, props = tslib_1.__rest(_a, ["className"]);
+    return (react_1.default.createElement(ui_1.Stack, tslib_1.__assign({ className: (0, ui_1.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)));
+};
+exports.StyledEditor = StyledEditor;
+var StyledAddressContainer = function (_a) {
+    var className = _a.className, props = tslib_1.__rest(_a, ["className"]);
+    return (react_1.default.createElement(ui_1.Stack, tslib_1.__assign({ className: (0, ui_1.cn)("absolute -left-[2px] mb-1 text-xs leading-[14px] shadow-sm bottom-full whitespace-nowrap font-system flex items-center", className) }, props)));
+};
+exports.StyledAddressContainer = StyledAddressContainer;
+var StyledAddress = function (_a) {
+    var className = _a.className, props = tslib_1.__rest(_a, ["className"]);
+    return (react_1.default.createElement(ui_1.Stack, tslib_1.__assign({ className: (0, ui_1.cn)("p-[6px] pt-1 pb-1 bg-[#4589eb] text-[white]", className) }, props)));
+};
+exports.StyledAddress = StyledAddress;
+var StyledResultPreview = function (_a) {
+    var className = _a.className, props = tslib_1.__rest(_a, ["className"]);
+    return (react_1.default.createElement(ui_1.Stack, tslib_1.__assign({ className: (0, ui_1.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)));
+};
+exports.StyledResultPreview = StyledResultPreview;
+exports.dropdownStyles = {
+    left: -2,
+    minWidth: "calc(100px)",
+    marginRight: -2,
+};

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CellError = exports.ERROR_TAG_WIDTH = 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");
+exports.ERROR_TAG_WIDTH = 6.5;
+/**
+ * Cell Error
+ */
+var CellError = function (_a) {
+    var x = _a.x, y = _a.y, scale = _a.scale, _b = _a.color, color = _b === void 0 ? config_1.INVALID_COLOR : _b;
+    return (react_1.default.createElement(react_konva_1.Shape, { x: x, y: y, sceneFunc: function (context) {
+            context.beginPath();
+            context.setAttr("fillStyle", color);
+            context.moveTo(0, 0);
+            context.lineTo(exports.ERROR_TAG_WIDTH * scale, 0);
+            context.lineTo(exports.ERROR_TAG_WIDTH * scale, exports.ERROR_TAG_WIDTH * scale);
+            context.closePath();
+            context.fill();
+        }, listening: false, perfectDrawEnabled: false }));
+};
+exports.CellError = CellError;

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CellExpand = 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 CellExpand = 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, horizontalAlignment = _a.horizontalAlignment;
+    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 isRightAligned = horizontalAlignment === "right";
+    var posX = isRightAligned
+        ? x + 3
+        : 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: "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: config_1.ARROW_DOWN_WIDTH, height: config_1.ARROW_DOWN_WIDTH, fill: isHovered ? "white" : config_1.ARROW_DOWN_COLOR, scaleY: 0.7 * scale, scaleX: 0.7 * scale, listening: true, perfectDrawEnabled: false })));
+};
+exports.CellExpand = CellExpand;

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