@rowsncolumns/spreadsheet 10.2.68

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CellFilter = void 0;
+var tslib_1 = require("tslib");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_konva_1 = require("react-konva");
+var config_1 = require("../../config");
+var helpers_1 = require("../../helpers");
+/**
+ * Filter icon
+ */
+var CellFilter = 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, rowIndex = _a.rowIndex, columnIndex = _a.columnIndex, scale = _a.scale, onClick = _a.onClick, isActive = _a.isActive, _f = _a.filterIconColor, filterIconColor = _f === void 0 ? "green" : _f, backgroundColor = _a.backgroundColor, verticalAlignment = _a.verticalAlignment;
+    var cellSpacing = config_1.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.
+    var interactive = !!onClick;
+    var _g = tslib_1.__read((0, react_1.useState)(false), 2), isHovered = _g[0], setIsHovered = _g[1];
+    var padding = (0, helpers_1.getIconSpacing)(verticalAlignment, height, config_1.FILTER_ICON_WIDTH, scale, 2 * scale);
+    var posX = x + width - (config_1.FILTER_ICON_WIDTH + cellSpacing) * 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: interactive ? handleMouseEnter : undefined, onMouseLeave: interactive ? handleMouseLeave : undefined, onPointerUp: function (event) {
+            event.evt.stopPropagation();
+        }, perfectDrawEnabled: false, onMouseDown: function (e) { return e.evt.preventDefault(); } },
+        react_1.default.createElement(react_konva_1.Rect, { x: posX, y: posY, width: config_1.FILTER_ICON_WIDTH * scale, height: config_1.FILTER_ICON_WIDTH * scale, fill: isHovered
+                ? (0, utils_1.lightenColor)(0.2, filterIconColor !== null && filterIconColor !== void 0 ? filterIconColor : "green")
+                : backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : undefined, cornerRadius: 0, perfectDrawEnabled: false, stroke: filterIconColor !== null && filterIconColor !== void 0 ? filterIconColor : undefined, strokeWidth: 1, hitStrokeWidth: 0 }),
+        react_1.default.createElement(react_konva_1.Path, { data: isActive ? config_1.FUNNEL_ICON_PATH : config_1.FITLER_ICON_PATH, x: posX + 0.5, y: posY + 0.5, fill: isHovered ? "white" : filterIconColor !== null && filterIconColor !== void 0 ? filterIconColor : undefined, scaleY: 0.6 * scale, scaleX: 0.6 * scale, perfectDrawEnabled: false })));
+};
+exports.CellFilter = CellFilter;

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CellGroup = 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 themes_1 = require("../../themes");
+var CellGroup = function (_a) {
+    var _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, _d = _a.height, height = _d === void 0 ? 0 : _d, scale = _a.scale, rowIndex = _a.rowIndex, columnIndex = _a.columnIndex, onClick = _a.onClick, expanded = _a.expanded, verticalAlignment = _a.verticalAlignment, theme = _a.theme;
+    var iconSpacing = config_1.DEFAULT_CELL_SPACING;
+    var _e = tslib_1.__read((0, react_1.useState)(false), 2), isHovered = _e[0], setIsHovered = _e[1];
+    var padding = (0, helpers_1.getIconSpacing)(verticalAlignment, height, config_1.EXPAND_COLLAPSE_ICON_WIDTH, scale, 2 * scale + 2);
+    var posX = x + iconSpacing * 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 });
+    };
+    var backgroundColor = (0, themes_1.getStringifiedColor)({ theme: 4 }, theme);
+    var hoverBackgroundColor = (0, themes_1.getStringifiedColor)({ theme: 4, tint: 0.2 }, theme);
+    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.EXPAND_COLLAPSE_ICON_WIDTH * scale, height: config_1.EXPAND_COLLAPSE_ICON_WIDTH * scale, fill: isHovered ? hoverBackgroundColor : backgroundColor, cornerRadius: 2, perfectDrawEnabled: false }),
+        react_1.default.createElement(react_konva_1.Path, { data: expanded ? config_1.COLLAPSE_ICON_PATH : config_1.EXPAND_ICON_PATH, x: posX, y: posY, fill: "white", scaleY: 0.5 * scale, scaleX: 0.5 * scale, listening: true, perfectDrawEnabled: false })));
+};
+exports.CellGroup = CellGroup;

package/dist/cjs/components/cell-input/cell-input.d.ts

@@ -0,0 +1,123 @@
+import type { CalculatorFunction } from "@rowsncolumns/common-types";
+import type { Direction } from "@rowsncolumns/grid";
+import type { OptionItem, ProseMirrorEditorProps, RichTextEditorAttribues, TextEditorRef, TextFormatRun } from "@rowsncolumns/ui";
+import React from "react";
+import type { CanvasGridProps } from "../canvas-grid/typings";
+export type CellInputProps = RichTextEditorAttribues & {
+    error?: string;
+    fontFamily?: string;
+    fontSize?: number;
+    lineHeight?: number;
+    onSubmit?(value: string, textFormatRuns?: TextFormatRun[], direction?: Direction): void;
+    onChange: ProseMirrorEditorProps["onChange"];
+    onCancel?(e?: React.KeyboardEvent<HTMLDivElement>): void;
+    persistFocus?: boolean;
+    editorClassName?: string;
+    value: string;
+    textFormatRuns?: TextFormatRun[] | null;
+    formulaMode?: boolean;
+    defaultFontSizePoint?: number;
+    /**
+     * All calculator functions
+     */
+    functionDescriptions?: CalculatorFunction[] | null;
+    /**
+     * Customize suggestions dropdown
+     */
+    SuggestionsDropdown?: ProseMirrorEditorProps["SuggestionsDropdown"];
+    /**
+     * Get all table names
+     */
+    getTableNames?(): OptionItem[] | undefined;
+    /**
+     * Get names of all named range
+     */
+    getNamedRanges?(): OptionItem[] | undefined;
+    /**
+     * Get column names of a table
+     * @param tableName
+     */
+    getTableColumnNames?(tableName: string | undefined): OptionItem[] | undefined;
+    /**
+     * Get structured properties from cell
+     * @param tableName
+     */
+    getStructuredProperties?(sheetName: string | undefined, rowIndex: number, columnIndex: number): OptionItem[] | undefined;
+    /**
+     * Get mentions
+     */
+    getMentions?: CanvasGridProps["getMentions"];
+    /**
+     * Get function parameters
+     */
+    getFunctionParameterSuggestions?: CanvasGridProps["getFunctionParameterSuggestions"];
+    /**
+     * Predicate
+     */
+    shouldFetchFunctionParameters?: CanvasGridProps["shouldFetchFunctionParameters"];
+    /**
+     * Enable continuous cell selection mode during formula editing
+     */
+    enableContinuousSelection?: boolean;
+};
+export type CellInputRefAttribute = {
+    ref?: React.Ref<TextEditorRef>;
+};
+export declare const CellInput: React.NamedExoticComponent<RichTextEditorAttribues & {
+    error?: string;
+    fontFamily?: string;
+    fontSize?: number;
+    lineHeight?: number;
+    onSubmit?(value: string, textFormatRuns?: TextFormatRun[], direction?: Direction): void;
+    onChange: ProseMirrorEditorProps["onChange"];
+    onCancel?(e?: React.KeyboardEvent<HTMLDivElement>): void;
+    persistFocus?: boolean;
+    editorClassName?: string;
+    value: string;
+    textFormatRuns?: TextFormatRun[] | null;
+    formulaMode?: boolean;
+    defaultFontSizePoint?: number;
+    /**
+     * All calculator functions
+     */
+    functionDescriptions?: CalculatorFunction[] | null;
+    /**
+     * Customize suggestions dropdown
+     */
+    SuggestionsDropdown?: ProseMirrorEditorProps["SuggestionsDropdown"];
+    /**
+     * Get all table names
+     */
+    getTableNames?(): OptionItem[] | undefined;
+    /**
+     * Get names of all named range
+     */
+    getNamedRanges?(): OptionItem[] | undefined;
+    /**
+     * Get column names of a table
+     * @param tableName
+     */
+    getTableColumnNames?(tableName: string | undefined): OptionItem[] | undefined;
+    /**
+     * Get structured properties from cell
+     * @param tableName
+     */
+    getStructuredProperties?(sheetName: string | undefined, rowIndex: number, columnIndex: number): OptionItem[] | undefined;
+    /**
+     * Get mentions
+     */
+    getMentions?: CanvasGridProps["getMentions"];
+    /**
+     * Get function parameters
+     */
+    getFunctionParameterSuggestions?: CanvasGridProps["getFunctionParameterSuggestions"];
+    /**
+     * Predicate
+     */
+    shouldFetchFunctionParameters?: CanvasGridProps["shouldFetchFunctionParameters"];
+    /**
+     * Enable continuous cell selection mode during formula editing
+     */
+    enableContinuousSelection?: boolean;
+} & CellInputRefAttribute>;
+//# sourceMappingURL=cell-input.d.ts.map

package/dist/cjs/components/cell-input/cell-input.d.ts.map

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

package/dist/cjs/components/cell-input/cell-input.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CellInput = void 0;
+var tslib_1 = require("tslib");
+var ui_1 = require("@rowsncolumns/ui");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = require("react");
+var react_2 = tslib_1.__importStar(require("react"));
+var active_editor_atom_1 = require("../../atoms/active-editor.atom");
+var formula_selection_state_atom_1 = require("../../atoms/formula-selection-state.atom");
+var sheet_context_atom_1 = require("../../atoms/sheet-context.atom");
+var show_formula_help_atom_1 = require("../../atoms/show-formula-help.atom");
+var config_1 = require("../../config");
+var helpers_1 = require("../../helpers");
+var helpers_2 = require("../cell-editor/helpers");
+var style_1 = require("./style");
+exports.CellInput = (0, react_2.memo)((0, react_2.forwardRef)(function (_a, forwardedRef) {
+    var fontFamily = _a.fontFamily, _b = _a.defaultFontSizePoint, defaultFontSizePoint = _b === void 0 ? config_1.DEFAULT_FONT_SIZE_PT : _b, _c = _a.fontSize, fontSize = _c === void 0 ? (0, helpers_1.pointToPixel)(defaultFontSizePoint) : _c, _d = _a.lineHeight, lineHeight = _d === void 0 ? config_1.DEFAULT_CELL_INPUT_LINE_HEIGHT : _d, onSubmit = _a.onSubmit, onChange = _a.onChange, onCancel = _a.onCancel, onFocus = _a.onFocus, onBlur = _a.onBlur, value = _a.value, disabled = _a.disabled, functionDescriptions = _a.functionDescriptions, className = _a.className, editorClassName = _a.editorClassName, _e = _a.persistFocus, persistFocus = _e === void 0 ? true : _e, error = _a.error, SuggestionsDropdown = _a.SuggestionsDropdown, textFormatRuns = _a.textFormatRuns, getMentions = _a.getMentions, getStructuredProperties = _a.getStructuredProperties, props = tslib_1.__rest(_a, ["fontFamily", "defaultFontSizePoint", "fontSize", "lineHeight", "onSubmit", "onChange", "onCancel", "onFocus", "onBlur", "value", "disabled", "functionDescriptions", "className", "editorClassName", "persistFocus", "error", "SuggestionsDropdown", "textFormatRuns", "getMentions", "getStructuredProperties"]);
+    var formulaMode = (0, utils_1.isAFormula)(value);
+    var editorRef = (0, react_2.useRef)(null);
+    var isActiveEditor = editorRef.current === (0, active_editor_atom_1.useActiveEditor)();
+    var setActiveEditor = (0, active_editor_atom_1.useSetActiveEditor)();
+    var setFormulaState = (0, formula_selection_state_atom_1.useSetFormulaSelectionState)();
+    // Show formula help dropdown
+    var showFormulaHelp = (0, show_formula_help_atom_1.useShowFormulaHelpValue)();
+    var onHideFormulaHelp = (0, show_formula_help_atom_1.useOnHideFormulaHelp)();
+    var onShowFormulaHelp = (0, show_formula_help_atom_1.useOnShowFormulaHelp)();
+    var tokenizer = (0, sheet_context_atom_1.useTokenizer)();
+    var inputStyles = (0, react_2.useMemo)(function () { return ({
+        fontFamily: formulaMode ? config_1.FORMULA_FONT_CONFIG.fontFamily : fontFamily,
+        fontSize: formulaMode ? config_1.FORMULA_FONT_CONFIG.fontSize : fontSize,
+        lineHeight: lineHeight,
+        height: "100%",
+        flex: 1,
+    }); }, [formulaMode, fontFamily, fontSize, lineHeight]);
+    (0, react_1.useImperativeHandle)(forwardedRef, function () { return editorRef.current; }, [editorRef]);
+    // Reset active editor
+    var handleEditorTeardown = (0, react_2.useCallback)(function () {
+        setActiveEditor(undefined);
+    }, [setActiveEditor]);
+    // Handle focus
+    var handleFocus = (0, react_2.useCallback)(function (e) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+        if (editorRef.current) {
+            setActiveEditor(editorRef.current);
+        }
+    }, [onFocus, setActiveEditor]);
+    // Keydown handler
+    var handleSubmit = (0, react_2.useCallback)(function (newValue, textFormatRuns, e) {
+        var direction = e && (0, helpers_2.getDirectionFromKey)(e.key, e.shiftKey);
+        // Submit value
+        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(newValue, textFormatRuns, direction);
+        // Reset active editor
+        setActiveEditor(undefined);
+    }, [onSubmit, setActiveEditor]);
+    var handleCancel = (0, react_2.useCallback)(function (e) {
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel(e);
+        // Reset active editor
+        setActiveEditor(undefined);
+    }, [onCancel, setActiveEditor]);
+    // Handle formula state change
+    var handleFormulaStateChange = (0, react_2.useCallback)(function (canSelectCells, selectionMode, selectionIndex) {
+        setFormulaState({ canSelectCells: canSelectCells, selectionMode: selectionMode, selectionIndex: selectionIndex });
+    }, [setFormulaState]);
+    return (react_2.default.createElement(style_1.StyledInputWrapper, { style: inputStyles, className: (0, ui_1.cn)(className, error && "border-rnc-warning") },
+        react_2.default.createElement(ui_1.ProseMirrorEditor, tslib_1.__assign({ ref: editorRef, className: (0, ui_1.cn)("pl-[6px] min-h-full", editorClassName), dropdownStyles: style_1.dropdownStyles, formulaMode: formulaMode, value: value, disabled: disabled, onChange: onChange, onSubmit: handleSubmit, onCancel: handleCancel, onFocus: handleFocus, onBlur: onBlur, tokenizer: tokenizer, name: "formula", onFormulaStateChange: handleFormulaStateChange, showDropdown: isActiveEditor, isActive: isActiveEditor, functionDescriptions: functionDescriptions, onTeardown: handleEditorTeardown, persistFocus: persistFocus, showFormulaHelp: showFormulaHelp, onShowFormulaHelp: onShowFormulaHelp, onHideFormulaHelp: onHideFormulaHelp, editorZeroOutline: true, SuggestionsDropdown: SuggestionsDropdown, textFormatRuns: textFormatRuns, getMentions: getMentions, getStructuredProperties: getStructuredProperties }, props))));
+}));
+exports.CellInput.displayName = "CellInput";

package/dist/cjs/components/cell-input/formula-bar-cell-input.d.ts

@@ -0,0 +1,21 @@
+import type { CalculatorFunction } from "@rowsncolumns/common-types";
+import type { CellInterface } from "@rowsncolumns/grid";
+import React from "react";
+import type { CellInputProps } from "./cell-input";
+type FormulaBarInputProps = Omit<CellInputProps, "value" | "onChange"> & {
+    /**
+     * Active cell
+     */
+    activeCell?: CellInterface | null;
+    /**
+     * List of function descriptions that should appear in teh dropdown
+     */
+    functionDescriptions?: CalculatorFunction[];
+    /**
+     * ID of the active sheet
+     */
+    sheetId: number;
+};
+export declare const FormulaBarInput: React.MemoExoticComponent<({ activeCell, functionDescriptions, onKeyDown, sheetId, SuggestionsDropdown, editorClassName, ...props }: FormulaBarInputProps) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=formula-bar-cell-input.d.ts.map

package/dist/cjs/components/cell-input/formula-bar-cell-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formula-bar-cell-input.d.ts","sourceRoot":"","sources":["../../../../components/cell-input/formula-bar-cell-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,KAAK,EAAE,aAAa,EAAa,MAAM,oBAAoB,CAAC;AAGnE,OAAO,KAA6C,MAAM,OAAO,CAAC;AAUlE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGnD,KAAK,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACvE;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAClC;;OAEG;IACH,oBAAoB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC5C;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,eAAe,uIASvB,oBAAoB,uBAiHxB,CAAC"}

package/dist/cjs/components/cell-input/formula-bar-cell-input.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormulaBarInput = void 0;
+var tslib_1 = require("tslib");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importStar(require("react"));
+var cell_input_context_atom_1 = require("../../atoms/cell-input-context.atom");
+var editing_cell_atom_1 = require("../../atoms/editing-cell.atom");
+var formula_bar_editor_value_atom_1 = require("../../atoms/formula-bar-editor-value.atom");
+var use_merge_refs_1 = require("../../hooks/use-merge.refs");
+var cell_input_1 = require("./cell-input");
+exports.FormulaBarInput = (0, react_1.memo)(function (_a) {
+    var _b;
+    var activeCell = _a.activeCell, functionDescriptions = _a.functionDescriptions, onKeyDown = _a.onKeyDown, sheetId = _a.sheetId, SuggestionsDropdown = _a.SuggestionsDropdown, editorClassName = _a.editorClassName, props = tslib_1.__rest(_a, ["activeCell", "functionDescriptions", "onKeyDown", "sheetId", "SuggestionsDropdown", "editorClassName"]);
+    var editorRef = (0, react_1.useRef)(null);
+    var _c = tslib_1.__read((0, formula_bar_editor_value_atom_1.useFormulabarEditorValue)(), 1), value = _c[0];
+    var _d = tslib_1.__read((0, formula_bar_editor_value_atom_1.useFormulaBarTextFormatRuns)(), 1), textFormatRuns = _d[0];
+    var setFormulaBarEditorInstance = (0, formula_bar_editor_value_atom_1.useSetFormulaBarEditorInstance)();
+    var mergedEditorRef = (0, use_merge_refs_1.useMergeRefs)(editorRef, setFormulaBarEditorInstance);
+    var editingCellCoordinate = (0, editing_cell_atom_1.useEditingCellCoordinate)();
+    var isEditInProgress = Boolean(editingCellCoordinate);
+    var editingCell = editingCellCoordinate !== null && editingCellCoordinate !== void 0 ? editingCellCoordinate : activeCell;
+    var editingSheetId = (_b = editingCellCoordinate === null || editingCellCoordinate === void 0 ? void 0 : editingCellCoordinate.sheetId) !== null && _b !== void 0 ? _b : sheetId;
+    var _e = (0, cell_input_context_atom_1.useCellInputContext)(), makeEditable = _e.makeEditable, getNextFocusableCell = _e.getNextFocusableCell, submitEditor = _e.submitEditor, cancelEditor = _e.cancelEditor, onEditorKeyDown = _e.onEditorKeyDown, canEditCell = _e.canEditCell, setEditorValue = _e.setEditorValue, getTableNames = _e.getTableNames, getNamedRanges = _e.getNamedRanges, getTableColumnNames = _e.getTableColumnNames, getStructuredProperties = _e.getStructuredProperties, getMentions = _e.getMentions;
+    var isProtected = (0, react_1.useMemo)(function () {
+        var canEdit = editingSheetId && editingCell
+            ? canEditCell === null || canEditCell === void 0 ? void 0 : canEditCell(editingSheetId, editingCell)
+            : true;
+        return !canEdit;
+    }, [editingCell, editingSheetId, canEditCell]);
+    var handleChange = (0, react_1.useCallback)(function (value, textFormatRuns) {
+        if (editingCell) {
+            // This will update formula bar editor value too
+            setEditorValue === null || setEditorValue === void 0 ? void 0 : setEditorValue(value, textFormatRuns, editingSheetId, editingCell);
+        }
+    }, [setEditorValue, editingSheetId, editingCell]);
+    // Focus, show cell editor
+    var handleFocus = (0, react_1.useCallback)(function () {
+        if (editingCell && !isEditInProgress) {
+            makeEditable === null || makeEditable === void 0 ? void 0 : makeEditable(sheetId, editingCell, undefined, { autoFocus: false });
+        }
+    }, [sheetId, editingCell, makeEditable, isEditInProgress]);
+    // User submits a value
+    var handleSubmit = (0, react_1.useCallback)(function (value, textFormatRuns, direction) {
+        if (editingCell) {
+            submitEditor === null || submitEditor === void 0 ? void 0 : submitEditor(value, textFormatRuns, editingSheetId, editingCell, getNextFocusableCell === null || getNextFocusableCell === void 0 ? void 0 : getNextFocusableCell(editingSheetId, editingCell, direction));
+        }
+    }, [getNextFocusableCell, submitEditor, editingSheetId, editingCell]);
+    // Keydown event
+    var handleKeyDown = (0, react_1.useCallback)(function (e) {
+        // Pass it on to main editor, for cell navigation
+        onEditorKeyDown === null || onEditorKeyDown === void 0 ? void 0 : onEditorKeyDown(e);
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    }, [onEditorKeyDown, onKeyDown]);
+    return (react_1.default.createElement(cell_input_1.CellInput, tslib_1.__assign({ ref: mergedEditorRef, value: value, onChange: handleChange, onFocus: handleFocus, onSubmit: handleSubmit, onCancel: cancelEditor, onKeyDown: handleKeyDown, disabled: isProtected, functionDescriptions: functionDescriptions, getNamedRanges: getNamedRanges, getTableNames: getTableNames, getTableColumnNames: getTableColumnNames, SuggestionsDropdown: SuggestionsDropdown, 
+        // Excel parity: the formula bar always renders plain-colored text —
+        // run color marks stay in the doc (and the in-cell editor) but must
+        // not paint here, where a light run color on the light bar background
+        // (e.g. a white banner title) reads as an empty formula bar. The
+        // `!important` class outranks the mark's inline `style="color: …"`.
+        editorClassName: (0, ui_1.cn)("[&_span]:!text-current", editorClassName), textFormatRuns: textFormatRuns, getMentions: getMentions, getStructuredProperties: getStructuredProperties, enableContinuousSelection: false }, props)));
+});
+exports.FormulaBarInput.displayName = "FormulaBarInput";

package/dist/cjs/components/cell-input/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./cell-input";
+export * from "./formula-bar-cell-input";
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/cell-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-input/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC"}

package/dist/cjs/components/cell-input/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./cell-input"), exports);
+tslib_1.__exportStar(require("./formula-bar-cell-input"), exports);

package/dist/cjs/components/cell-input/style.d.ts

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

package/dist/cjs/components/cell-input/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../components/cell-input/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,kBAAkB,GAAI,yBAGhC,cAAc,CAAC,OAAO,KAAK,CAAC,sBAQ9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAE5B,CAAC"}

package/dist/cjs/components/cell-input/style.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dropdownStyles = exports.StyledInputWrapper = void 0;
+var tslib_1 = require("tslib");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importDefault(require("react"));
+var StyledInputWrapper = 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)("m-0 box-border outline-none resize-none align-top bg-transparent whitespace-pre-wrap cursor-text flex-1 relative block font-system min-w-0", className) }, props)));
+};
+exports.StyledInputWrapper = StyledInputWrapper;
+exports.dropdownStyles = {
+    left: 3,
+};

package/dist/cjs/components/cell-overlay/index.d.ts

@@ -0,0 +1,25 @@
+import type { RendererProps } from "@rowsncolumns/grid";
+import React from "react";
+import type { BorderStyle } from "../../types";
+export type CellOverlayRendererProps = RendererProps & {
+    strokeTopStyle?: BorderStyle;
+    strokeBottomStyle?: BorderStyle;
+    strokeLeftStyle?: BorderStyle;
+    strokeRightStyle?: BorderStyle;
+    strokeDiagonalUpStyle?: BorderStyle;
+    strokeDiagonalDownStyle?: BorderStyle;
+    cellBackgroundColor: string;
+    strokeDoubleInsetWidth: number;
+};
+export type StrokeCellProps = Omit<CellOverlayRendererProps, "key" | "rowIndex" | "columnIndex">;
+/**
+ * Offset helps multiple borders to align properly
+ * @param width
+ */
+export declare const getOffsetFromWidth: (width: number) => number;
+/**
+ * Default CellRenderer
+ * @param props
+ */
+export declare const CellOverlayRenderer: (props: CellOverlayRendererProps) => React.JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/cell-overlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell-overlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,MAAM,wBAAwB,GAAG,aAAa,GAAG;IACrD,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,qBAAqB,CAAC,EAAE,WAAW,CAAC;IACpC,uBAAuB,CAAC,EAAE,WAAW,CAAC;IACtC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,sBAAsB,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,wBAAwB,EACxB,KAAK,GAAG,UAAU,GAAG,aAAa,CACnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,WAE/C,CAAC;AA6MF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,6BA+ElE,CAAC"}

package/dist/cjs/components/cell-overlay/index.js

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CellOverlayRenderer = exports.getOffsetFromWidth = 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");
+/**
+ * Offset helps multiple borders to align properly
+ * @param width
+ */
+var getOffsetFromWidth = function (width) {
+    return width / 2 - 0.5;
+};
+exports.getOffsetFromWidth = getOffsetFromWidth;
+/**
+ * Only used for strokes
+ */
+var CellOverlay = (0, react_1.memo)(function (props) {
+    var x = props.x, y = props.y, width = props.width, height = props.height, strokeDoubleInsetWidth = props.strokeDoubleInsetWidth, strokeTopColor = props.strokeTopColor, strokeRightColor = props.strokeRightColor, strokeBottomColor = props.strokeBottomColor, strokeLeftColor = props.strokeLeftColor, strokeDiagonalUpColor = props.strokeDiagonalUpColor, strokeDiagonalDownColor = props.strokeDiagonalDownColor, _a = props.strokeTopDash, strokeTopDash = _a === void 0 ? config_1.DEFAULT_ARRAY : _a, _b = props.strokeRightDash, strokeRightDash = _b === void 0 ? config_1.DEFAULT_ARRAY : _b, _c = props.strokeBottomDash, strokeBottomDash = _c === void 0 ? config_1.DEFAULT_ARRAY : _c, _d = props.strokeLeftDash, strokeLeftDash = _d === void 0 ? config_1.DEFAULT_ARRAY : _d, _e = props.strokeDiagonalUpDash, strokeDiagonalUpDash = _e === void 0 ? config_1.DEFAULT_ARRAY : _e, _f = props.strokeDiagonalDownDash, strokeDiagonalDownDash = _f === void 0 ? config_1.DEFAULT_ARRAY : _f, _g = props.strokeTopWidth, strokeTopWidth = _g === void 0 ? 0 : _g, _h = props.strokeRightWidth, strokeRightWidth = _h === void 0 ? 0 : _h, _j = props.strokeBottomWidth, strokeBottomWidth = _j === void 0 ? 0 : _j, _k = props.strokeLeftWidth, strokeLeftWidth = _k === void 0 ? 0 : _k, _l = props.strokeDiagonalUpWidth, strokeDiagonalUpWidth = _l === void 0 ? 0 : _l, _m = props.strokeDiagonalDownWidth, strokeDiagonalDownWidth = _m === void 0 ? 0 : _m, lineCap = props.lineCap, strokeTopStyle = props.strokeTopStyle, strokeBottomStyle = props.strokeBottomStyle, strokeLeftStyle = props.strokeLeftStyle, strokeRightStyle = props.strokeRightStyle, cellBackgroundColor = props.cellBackgroundColor;
+    var userStroke = strokeTopColor ||
+        strokeRightColor ||
+        strokeBottomColor ||
+        strokeLeftColor ||
+        strokeDiagonalUpColor ||
+        strokeDiagonalDownColor;
+    if (!userStroke) {
+        return null;
+    }
+    return (react_1.default.createElement(react_konva_1.Shape, { x: x, y: y, width: width, height: height, listening: false, perfectDrawEnabled: false, sceneFunc: function (context, shape) {
+            /* Top border */
+            if (strokeTopColor) {
+                context.beginPath();
+                context.moveTo(strokeLeftColor ? -(0, exports.getOffsetFromWidth)(strokeLeftWidth) : 0, 0.5);
+                context.lineTo(shape.width() +
+                    (strokeRightColor ? (0, exports.getOffsetFromWidth)(strokeRightWidth) + 1 : 1), 0.5);
+                context.setAttr("strokeStyle", strokeTopColor);
+                context.setAttr("lineWidth", strokeTopWidth);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeTopDash);
+                context.stroke();
+            }
+            /* Bottom border */
+            if (strokeBottomColor) {
+                context.beginPath();
+                context.moveTo(strokeLeftColor ? -(0, exports.getOffsetFromWidth)(strokeLeftWidth) : 0, shape.height() + 0.5);
+                context.lineTo(shape.width() +
+                    (strokeRightColor ? (0, exports.getOffsetFromWidth)(strokeRightWidth) + 1 : 1), shape.height() + 0.5);
+                context.setAttr("lineWidth", strokeBottomWidth);
+                context.setAttr("strokeStyle", strokeBottomColor);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeBottomDash);
+                context.stroke();
+            }
+            /* Left border */
+            if (strokeLeftColor) {
+                context.beginPath();
+                context.moveTo(0.5, strokeTopColor ? -(0, exports.getOffsetFromWidth)(strokeTopWidth) : 0);
+                context.lineTo(0.5, shape.height() +
+                    (strokeBottomColor
+                        ? (0, exports.getOffsetFromWidth)(strokeBottomWidth) + 1
+                        : 1));
+                context.setAttr("strokeStyle", strokeLeftColor);
+                context.setAttr("lineWidth", strokeLeftWidth);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeLeftDash);
+                context.stroke();
+            }
+            /* Right border */
+            if (strokeRightColor) {
+                context.beginPath();
+                context.moveTo(shape.width() + 0.5, strokeTopColor ? -(0, exports.getOffsetFromWidth)(strokeTopWidth) : 0);
+                context.lineTo(shape.width() + 0.5, shape.height() +
+                    (strokeBottomColor
+                        ? (0, exports.getOffsetFromWidth)(strokeBottomWidth) + 1
+                        : 1));
+                context.setAttr("strokeStyle", strokeRightColor);
+                context.setAttr("lineWidth", strokeRightWidth);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeRightDash);
+                context.stroke();
+            }
+            // Double borders
+            if (strokeTopStyle === "double" ||
+                strokeRightStyle === "double" ||
+                strokeBottomStyle === "double" ||
+                strokeLeftStyle === "double") {
+                context.beginPath();
+                if (strokeTopStyle === "double") {
+                    context.beginPath();
+                    context.moveTo(0, 0.5);
+                    context.lineTo(shape.width() + 1, 0.5);
+                    context.setAttr("lineWidth", strokeDoubleInsetWidth);
+                    context.setAttr("strokeStyle", cellBackgroundColor);
+                    context.stroke();
+                }
+                if (strokeBottomStyle === "double") {
+                    context.moveTo(0, shape.height() + 0.5);
+                    context.lineTo(shape.width() + 1, shape.height() + 0.5);
+                    context.setAttr("lineWidth", strokeDoubleInsetWidth);
+                    context.setAttr("strokeStyle", cellBackgroundColor);
+                    context.stroke();
+                }
+                if (strokeLeftStyle === "double") {
+                    context.moveTo(0.5, 0);
+                    context.lineTo(0.5, shape.height() + 1);
+                    context.setAttr("lineWidth", strokeDoubleInsetWidth);
+                    context.setAttr("strokeStyle", cellBackgroundColor);
+                    context.stroke();
+                }
+                if (strokeRightStyle === "double") {
+                    context.moveTo(shape.width() + 0.5, 0);
+                    context.lineTo(shape.width() + 0.5, shape.height() + 1);
+                    context.setAttr("lineWidth", strokeDoubleInsetWidth);
+                    context.setAttr("strokeStyle", cellBackgroundColor);
+                    context.stroke();
+                }
+                context.closePath();
+            }
+            /* Diagonal: top-left to bottom-right (diagonalDown) */
+            if (strokeDiagonalDownColor) {
+                context.beginPath();
+                context.moveTo(0, 0);
+                context.lineTo(shape.width(), shape.height());
+                context.setAttr("strokeStyle", strokeDiagonalDownColor);
+                context.setAttr("lineWidth", strokeDiagonalDownWidth);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeDiagonalDownDash);
+                context.stroke();
+            }
+            /* Diagonal: bottom-left to top-right (diagonalUp) */
+            if (strokeDiagonalUpColor) {
+                context.beginPath();
+                context.moveTo(0, shape.height());
+                context.lineTo(shape.width(), 0);
+                context.setAttr("strokeStyle", strokeDiagonalUpColor);
+                context.setAttr("lineWidth", strokeDiagonalUpWidth);
+                context.setAttr("lineCap", lineCap);
+                context.setLineDash(strokeDiagonalUpDash);
+                context.stroke();
+            }
+        } }));
+});
+/**
+ * Default CellRenderer
+ * @param props
+ */
+var CellOverlayRenderer = function (props) {
+    var x = props.x, y = props.y, width = props.width, height = props.height, stroke = props.stroke, _a = props.strokeTopColor, strokeTopColor = _a === void 0 ? stroke : _a, _b = props.strokeRightColor, strokeRightColor = _b === void 0 ? stroke : _b, _c = props.strokeBottomColor, strokeBottomColor = _c === void 0 ? stroke : _c, _d = props.strokeLeftColor, strokeLeftColor = _d === void 0 ? stroke : _d, strokeDiagonalUpColor = props.strokeDiagonalUpColor, strokeDiagonalDownColor = props.strokeDiagonalDownColor, _e = props.strokeDash, strokeDash = _e === void 0 ? config_1.DEFAULT_ARRAY : _e, _f = props.strokeTopDash, strokeTopDash = _f === void 0 ? config_1.DEFAULT_ARRAY : _f, _g = props.strokeRightDash, strokeRightDash = _g === void 0 ? config_1.DEFAULT_ARRAY : _g, _h = props.strokeBottomDash, strokeBottomDash = _h === void 0 ? config_1.DEFAULT_ARRAY : _h, _j = props.strokeLeftDash, strokeLeftDash = _j === void 0 ? config_1.DEFAULT_ARRAY : _j, _k = props.strokeDiagonalUpDash, strokeDiagonalUpDash = _k === void 0 ? config_1.DEFAULT_ARRAY : _k, _l = props.strokeDiagonalDownDash, strokeDiagonalDownDash = _l === void 0 ? config_1.DEFAULT_ARRAY : _l, _m = props.strokeWidth, strokeWidth = _m === void 0 ? 1 : _m, _o = props.strokeTopWidth, strokeTopWidth = _o === void 0 ? strokeWidth : _o, _p = props.strokeRightWidth, strokeRightWidth = _p === void 0 ? strokeWidth : _p, _q = props.strokeBottomWidth, strokeBottomWidth = _q === void 0 ? strokeWidth : _q, _r = props.strokeLeftWidth, strokeLeftWidth = _r === void 0 ? strokeWidth : _r, _s = props.strokeDiagonalUpWidth, strokeDiagonalUpWidth = _s === void 0 ? strokeWidth : _s, _t = props.strokeDiagonalDownWidth, strokeDiagonalDownWidth = _t === void 0 ? strokeWidth : _t, strokeTopStyle = props.strokeTopStyle, strokeBottomStyle = props.strokeBottomStyle, strokeLeftStyle = props.strokeLeftStyle, strokeRightStyle = props.strokeRightStyle, cellBackgroundColor = props.cellBackgroundColor, _u = props.lineCap, lineCap = _u === void 0 ? "butt" : _u, key = props.key, _v = props.strokeDoubleInsetWidth, strokeDoubleInsetWidth = _v === void 0 ? 1 : _v;
+    var userStroke = strokeTopColor ||
+        strokeRightColor ||
+        strokeBottomColor ||
+        strokeLeftColor ||
+        strokeDiagonalUpColor ||
+        strokeDiagonalDownColor;
+    if (!userStroke)
+        return null;
+    return (react_1.default.createElement(CellOverlay, { key: key, x: x, y: y, strokeDoubleInsetWidth: strokeDoubleInsetWidth, width: width, height: height, strokeTopColor: strokeTopColor, strokeRightColor: strokeRightColor, strokeBottomColor: strokeBottomColor, strokeLeftColor: strokeLeftColor, strokeDiagonalUpColor: strokeDiagonalUpColor, strokeDiagonalDownColor: strokeDiagonalDownColor, strokeDash: strokeDash, strokeTopDash: strokeTopDash, strokeRightDash: strokeRightDash, strokeBottomDash: strokeBottomDash, strokeLeftDash: strokeLeftDash, strokeDiagonalUpDash: strokeDiagonalUpDash, strokeDiagonalDownDash: strokeDiagonalDownDash, strokeTopWidth: strokeTopWidth, strokeRightWidth: strokeRightWidth, strokeBottomWidth: strokeBottomWidth, strokeLeftWidth: strokeLeftWidth, strokeDiagonalUpWidth: strokeDiagonalUpWidth, strokeDiagonalDownWidth: strokeDiagonalDownWidth, lineCap: lineCap, strokeTopStyle: strokeTopStyle, strokeBottomStyle: strokeBottomStyle, strokeLeftStyle: strokeLeftStyle, strokeRightStyle: strokeRightStyle, cellBackgroundColor: cellBackgroundColor }));
+};
+exports.CellOverlayRenderer = CellOverlayRenderer;
+CellOverlay.displayName = "CellOverlay";