@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/components/floating-cell-editor/index.js

@@ -0,0 +1,180 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingCellEditor = void 0;
+var tslib_1 = require("tslib");
+var grid_1 = require("@rowsncolumns/grid");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var use_selection_aware_formatting_1 = require("../../hooks/use-selection-aware-formatting");
+var react_1 = require("react");
+var react_2 = tslib_1.__importDefault(require("react"));
+var atoms_1 = require("../../atoms");
+var config_1 = require("../../config");
+var hooks_1 = require("../../hooks");
+var formula_input_1 = require("../formula-input");
+var toolbar_1 = require("../toolbar");
+exports.FloatingCellEditor = (0, react_1.memo)(function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var initialValue = _a.initialValue, initialTextFormatRuns = _a.initialTextFormatRuns, className = _a.className, activeCell = _a.activeCell, sheetId = _a.sheetId, cellFormat = _a.cellFormat, theme = _a.theme, isDarkMode = _a.isDarkMode, functionDescriptions = _a.functionDescriptions, _j = _a.selections, selections = _j === void 0 ? config_1.DEFAULT_ARRAY : _j, onChange = _a.onChange, onChangeFormattingProp = _a.onChangeFormatting, onInsertRow = _a.onInsertRow, onInsertColumn = _a.onInsertColumn, ColorSelector = _a.ColorSelector, props = tslib_1.__rest(_a, ["initialValue", "initialTextFormatRuns", "className", "activeCell", "sheetId", "cellFormat", "theme", "isDarkMode", "functionDescriptions", "selections", "onChange", "onChangeFormatting", "onInsertRow", "onInsertColumn", "ColorSelector"]);
+    var formulaInputRef = (0, react_1.useRef)(null);
+    var _k = tslib_1.__read((0, react_1.useState)(initialValue !== null && initialValue !== void 0 ? initialValue : ""), 2), value = _k[0], setValue = _k[1];
+    var _l = tslib_1.__read((0, react_1.useState)(initialTextFormatRuns), 2), textFormatRuns = _l[0], setTextFormatRuns = _l[1];
+    var setFormulaMode = (0, atoms_1.useSetFormulaMode)();
+    var formulaMode = (0, atoms_1.useFormulaModeValue)();
+    var setFormulaSelections = (0, atoms_1.useSetFormulaSelections)();
+    var _m = tslib_1.__read((0, atoms_1.useEditingCell)(), 2), editingCellCoordinate = _m[0], setEditingCellCoordiniate = _m[1];
+    var focusSheet = (0, atoms_1.useFocusSheet)();
+    var setActiveEditor = (0, atoms_1.useSetActiveEditor)();
+    var _o = (0, atoms_1.useSpreadsheet)(), setActiveCell = _o.setActiveCell, canEditCell = _o.canEditCell, getMentions = _o.getMentions;
+    var isEditing = (0, react_1.useDeferredValue)(Boolean(editingCellCoordinate), false);
+    var onChangeFormatting = (0, use_selection_aware_formatting_1.useSelectionAwareChangeFormatting)(onChangeFormattingProp);
+    var isProtected = (0, react_1.useMemo)(function () {
+        var _a;
+        var editingSheetId = (_a = editingCellCoordinate === null || editingCellCoordinate === void 0 ? void 0 : editingCellCoordinate.sheetId) !== null && _a !== void 0 ? _a : sheetId;
+        var editingCell = editingCellCoordinate !== null && editingCellCoordinate !== void 0 ? editingCellCoordinate : activeCell;
+        var canEdit = canEditCell === null || canEditCell === void 0 ? void 0 : canEditCell(editingSheetId, editingCell);
+        return !canEdit;
+    }, [editingCellCoordinate, activeCell, sheetId, canEditCell]);
+    var closeFormulaMode = (0, react_1.useCallback)(function () {
+        setFormulaMode(false);
+        setFormulaSelections([]);
+    }, [setFormulaMode, setFormulaSelections]);
+    var startEditing = (0, react_1.useCallback)(function () {
+        var _a;
+        setEditingCellCoordiniate(tslib_1.__assign({ sheetId: sheetId }, activeCell));
+        (_a = formulaInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(true);
+    }, [sheetId, activeCell, setEditingCellCoordiniate]);
+    var stopEditing = (0, react_1.useCallback)(function () {
+        setEditingCellCoordiniate(undefined);
+        closeFormulaMode();
+        setActiveEditor(undefined);
+        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+    }, [
+        closeFormulaMode,
+        setEditingCellCoordiniate,
+        setActiveEditor,
+        focusSheet,
+    ]);
+    (0, hooks_1.useIsomorphicLayoutEffect)(function () {
+        var _a;
+        // Set value when not editing, or when editing but not in formula mode
+        if (!isEditing || !formulaMode) {
+            var currentValue = (_a = formulaInputRef.current) === null || _a === void 0 ? void 0 : _a.getValue();
+            var newValue = initialValue !== null && initialValue !== void 0 ? initialValue : "";
+            if (currentValue !== newValue && (currentValue || newValue)) {
+                setValue(newValue);
+            }
+        }
+    }, [initialValue, isEditing, formulaMode]);
+    var handleSubmit = (0, react_1.useCallback)(function (value, textFormatRuns) {
+        if (editingCellCoordinate) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(editingCellCoordinate.sheetId, editingCellCoordinate, value, textFormatRuns, initialValue, initialValue !== value, initialTextFormatRuns);
+            if (!(0, grid_1.isEqualCells)(editingCellCoordinate, activeCell)) {
+                setActiveCell === null || setActiveCell === void 0 ? void 0 : setActiveCell(editingCellCoordinate.sheetId, editingCellCoordinate, false);
+            }
+        }
+        stopEditing();
+        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+    }, [
+        editingCellCoordinate,
+        activeCell,
+        setActiveCell,
+        stopEditing,
+        focusSheet,
+        onChange,
+    ]);
+    var onFocus = (0, react_1.useCallback)(function () {
+        if (!isEditing) {
+            startEditing();
+        }
+    }, [isEditing, startEditing]);
+    // noop onBlur
+    var onBlur = (0, react_1.useCallback)(function () { }, []);
+    return (react_2.default.createElement("form", { className: "".concat((0, ui_1.cn)("flex flex-col pr-2 border-rnc-border border-[1px] border-solid border-t-0 bg-rnc-background", className)), onSubmit: function (e) {
+            e.preventDefault();
+            handleSubmit(value);
+        } },
+        react_2.default.createElement("div", { className: "flex items-center gap-2 " },
+            react_2.default.createElement("div", { className: "flex-grow min-w-0" },
+                react_2.default.createElement(formula_input_1.FormulaInput, tslib_1.__assign({ ref: formulaInputRef, value: value, textFormatRuns: textFormatRuns, onChange: function (value, textFormatRuns) {
+                        setValue(value);
+                        setTextFormatRuns(textFormatRuns);
+                    }, className: "mb-0", cellInputClassName: "border-none rounded-none", onSubmit: handleSubmit, editorClassName: "py-3 px-2 rounded-none", placeholder: "Enter text or formula", onFocus: onFocus, onBlur: onBlur, onCancel: stopEditing, disabled: isProtected, style: {
+                        lineHeight: "normal",
+                        fontSize: "1rem",
+                        minHeight: 44,
+                    }, functionDescriptions: functionDescriptions, getMentions: getMentions }, props))),
+            isEditing ? (react_2.default.createElement(react_2.default.Fragment, null,
+                react_2.default.createElement(ui_1.IconButton, { tooltip: "Save", variant: "primary", type: "submit", className: "min-w-8 min-h-8" },
+                    react_2.default.createElement(icons_1.CheckIcon, null)),
+                react_2.default.createElement(ui_1.IconButton, { tooltip: "Cancel", variant: "ghost", type: "button", className: "min-w-8 min-h-8", onClick: function (e) {
+                        e.preventDefault();
+                        stopEditing();
+                    } },
+                    react_2.default.createElement(icons_1.Cross1Icon, null)))) : (react_2.default.createElement(ui_1.IconButton, { variant: "ghost", type: "button", tooltip: "Edit", className: "min-w-8 min-h-8", disabled: isProtected, onClick: function (e) {
+                    e.preventDefault();
+                    startEditing();
+                } },
+                react_2.default.createElement(icons_1.Pencil1Icon, null)))),
+        react_2.default.createElement("div", { className: "flex py-1 px-2 gap-2 min-h-8" },
+            react_2.default.createElement(toolbar_1.ButtonBold, { isActive: (_b = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.textFormat) === null || _b === void 0 ? void 0 : _b.bold, disabled: isProtected, onClick: function () {
+                    var _a;
+                    onChangeFormatting === null || onChangeFormatting === void 0 ? void 0 : onChangeFormatting(sheetId, activeCell, selections, "textFormat", {
+                        bold: !((_a = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.textFormat) === null || _a === void 0 ? void 0 : _a.bold),
+                    });
+                } }),
+            react_2.default.createElement(toolbar_1.ButtonItalic, { isActive: (_c = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.textFormat) === null || _c === void 0 ? void 0 : _c.italic, disabled: isProtected, onClick: function () {
+                    var _a;
+                    onChangeFormatting === null || onChangeFormatting === void 0 ? void 0 : onChangeFormatting(sheetId, activeCell, selections, "textFormat", {
+                        italic: !((_a = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.textFormat) === null || _a === void 0 ? void 0 : _a.italic),
+                    });
+                } }),
+            react_2.default.createElement(toolbar_1.ButtonUnderline, { isActive: (_d = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.textFormat) === null || _d === void 0 ? void 0 : _d.underline, disabled: isProtected, onClick: function () {
+                    var _a;
+                    onChangeFormatting === null || onChangeFormatting === void 0 ? void 0 : onChangeFormatting(sheetId, activeCell, selections, "textFormat", {
+                        underline: !((_a = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.textFormat) === null || _a === void 0 ? void 0 : _a.underline),
+                    });
+                } }),
+            react_2.default.createElement(toolbar_1.ButtonStrikethrough, { isActive: (_e = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.textFormat) === null || _e === void 0 ? void 0 : _e.strikethrough, disabled: isProtected, onClick: function () {
+                    var _a;
+                    onChangeFormatting === null || onChangeFormatting === void 0 ? void 0 : onChangeFormatting(sheetId, activeCell, selections, "textFormat", {
+                        strikethrough: !((_a = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.textFormat) === null || _a === void 0 ? void 0 : _a.strikethrough),
+                    });
+                } }),
+            react_2.default.createElement(toolbar_1.ButtonSuperscript, { isActive: ((_f = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.textFormat) === null || _f === void 0 ? void 0 : _f.baselineOffset) === "superscript", disabled: isProtected, onClick: function () {
+                    var _a;
+                    onChangeFormatting === null || onChangeFormatting === void 0 ? void 0 : onChangeFormatting(sheetId, activeCell, selections, "textFormat", {
+                        baselineOffset: ((_a = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.textFormat) === null || _a === void 0 ? void 0 : _a.baselineOffset) === "superscript"
+                            ? undefined
+                            : "superscript",
+                    });
+                } }),
+            react_2.default.createElement(toolbar_1.ButtonSubscript, { isActive: ((_g = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.textFormat) === null || _g === void 0 ? void 0 : _g.baselineOffset) === "subscript", disabled: isProtected, onClick: function () {
+                    var _a;
+                    onChangeFormatting === null || onChangeFormatting === void 0 ? void 0 : onChangeFormatting(sheetId, activeCell, selections, "textFormat", {
+                        baselineOffset: ((_a = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.textFormat) === null || _a === void 0 ? void 0 : _a.baselineOffset) === "subscript"
+                            ? undefined
+                            : "subscript",
+                    });
+                } }),
+            react_2.default.createElement(toolbar_1.TextHorizontalAlignSelector, { value: cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.horizontalAlignment, disabled: isProtected, onChange: function (value) {
+                    onChangeFormatting === null || onChangeFormatting === void 0 ? void 0 : onChangeFormatting(sheetId, activeCell, selections, "horizontalAlignment", value);
+                } }),
+            react_2.default.createElement(toolbar_1.ToolbarSeparator, null),
+            react_2.default.createElement(toolbar_1.TextColorSelector, { color: (_h = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.textFormat) === null || _h === void 0 ? void 0 : _h.color, disabled: isProtected, theme: theme, isDarkMode: isDarkMode, ColorSelector: ColorSelector, onChange: function (color) {
+                    onChangeFormatting === null || onChangeFormatting === void 0 ? void 0 : onChangeFormatting(sheetId, activeCell, selections, "textFormat", {
+                        color: color,
+                    });
+                } }),
+            react_2.default.createElement(toolbar_1.BackgroundColorSelector, { color: cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.backgroundColor, disabled: isProtected, theme: theme, ColorSelector: ColorSelector, onChange: function (color) {
+                    onChangeFormatting === null || onChangeFormatting === void 0 ? void 0 : onChangeFormatting(sheetId, activeCell, selections, "backgroundColor", color);
+                } }),
+            react_2.default.createElement(toolbar_1.ToolbarSeparator, null),
+            react_2.default.createElement(toolbar_1.ButtonInsertRowBelow, { disabled: isProtected, onClick: function () {
+                    onInsertRow === null || onInsertRow === void 0 ? void 0 : onInsertRow(sheetId, activeCell.rowIndex + 1, 1);
+                } }),
+            react_2.default.createElement(toolbar_1.ButtonInsertColumnRight, { disabled: isProtected, onClick: function () {
+                    onInsertColumn === null || onInsertColumn === void 0 ? void 0 : onInsertColumn(sheetId, activeCell.columnIndex + 1, 1);
+                } }))));
+});
+exports.FloatingCellEditor.displayName = "FloatingCellEditor";

package/dist/cjs/components/formula-bar/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+type RefAttribute = {
+    ref?: React.Ref<HTMLDivElement>;
+};
+export declare const FormulaBar: React.NamedExoticComponent<RefAttribute & {
+    children: React.ReactNode;
+    className?: string;
+}>;
+export declare const FormulaBarLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/formula-bar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAM1D,KAAK,YAAY,GAAG;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,UAAU;cACM,KAAK,CAAC,SAAS;gBAAc,MAAM;EAmB/D,CAAC;AAEF,eAAO,MAAM,eAAe,mKAAwB,CAAC"}

package/dist/cjs/components/formula-bar/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormulaBarLabel = exports.FormulaBar = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var config_1 = require("../../config");
+var resizer_1 = require("../resizer");
+var style_1 = require("./style");
+exports.FormulaBar = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, forwardedRef) {
+    var children = _a.children, className = _a.className;
+    var _b = tslib_1.__read((0, react_1.useState)(config_1.FORMULA_BAR_HEIGHT), 2), height = _b[0], setHeight = _b[1];
+    return (react_1.default.createElement(style_1.StyledFormulaBarWrapper, { ref: forwardedRef, className: className },
+        react_1.default.createElement("div", { className: "flex", style: {
+                height: height,
+            } }, children),
+        react_1.default.createElement(resizer_1.Resizer, { value: height, min: config_1.FORMULA_BAR_HEIGHT, onChange: setHeight })));
+}));
+exports.FormulaBarLabel = style_1.StyledFormulaBarLabel;
+exports.FormulaBar.displayName = "FormulaBar";

package/dist/cjs/components/formula-bar/style.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const StyledFormulaBarWrapper: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const StyledFormulaBarLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=style.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../components/formula-bar/style.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,uBAAuB,mKAYlC,CAAC;AAIH,eAAO,MAAM,qBAAqB,mKAYhC,CAAC"}

package/dist/cjs/components/formula-bar/style.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledFormulaBarLabel = exports.StyledFormulaBarWrapper = void 0;
+var tslib_1 = require("tslib");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importDefault(require("react"));
+exports.StyledFormulaBarWrapper = react_1.default.forwardRef(function (_a, ref) {
+    var className = _a.className, props = tslib_1.__rest(_a, ["className"]);
+    return (react_1.default.createElement("div", tslib_1.__assign({ ref: ref, className: (0, ui_1.cn)("relative border-b-0 bg-rnc-background text-rnc-foreground border-rnc-border border-solid border-t-[1px] border-r-[1px] border-l-[1px] print:hidden", className) }, props)));
+});
+exports.StyledFormulaBarWrapper.displayName = "StyledFormulaBarWrapper";
+exports.StyledFormulaBarLabel = react_1.default.forwardRef(function (_a, ref) {
+    var className = _a.className, props = tslib_1.__rest(_a, ["className"]);
+    return (react_1.default.createElement("div", tslib_1.__assign({ ref: ref, className: (0, ui_1.cn)("text-xs py-1 px-2 border-l-0 border-t-0 border-b-0 italic opacity-80 text-rnc-foreground h-full border-r-[1px] border-rnc-border border-solid flex place-items-center select-none box-border font-system", className) }, props)));
+});
+exports.StyledFormulaBarLabel.displayName = "StyledFormulaBarLabel";

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

@@ -0,0 +1,17 @@
+import type { TextEditorRef } from "@rowsncolumns/ui";
+import type { ComponentProps } from "react";
+import React from "react";
+import { CellInput } from "../cell-input";
+type FormulaInputProps = ComponentProps<typeof CellInput> & {
+    placeholder?: string;
+    value?: string;
+    cellInputClassName?: string;
+};
+/**
+ * Controller cells selection input
+ * @param param0
+ * @returns
+ */
+export declare const FormulaInput: React.ForwardRefExoticComponent<Omit<FormulaInputProps, "ref"> & React.RefAttributes<TextEditorRef>>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/formula-input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,kBAAkB,CAAC;AAGrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAiB,MAAM,OAAO,CAAC;AAatC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,sGAiIxB,CAAC"}

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

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormulaInput = 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 atoms_1 = require("../../atoms");
+var cell_input_context_atom_1 = require("../../atoms/cell-input-context.atom");
+var use_merge_refs_1 = require("../../hooks/use-merge.refs");
+var cell_input_1 = require("../cell-input");
+/**
+ * Controller cells selection input
+ * @param param0
+ * @returns
+ */
+exports.FormulaInput = (0, react_1.forwardRef)(function (_a, forwardedRef) {
+    var _b = _a.value, value = _b === void 0 ? "" : _b, onChange = _a.onChange, onCancel = _a.onCancel, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.placeholder, placeholder = _c === void 0 ? "Add a formula" : _c, className = _a.className, cellInputClassName = _a.cellInputClassName, rest = tslib_1.__rest(_a, ["value", "onChange", "onCancel", "onBlur", "onFocus", "placeholder", "className", "cellInputClassName"]);
+    var getGridRef = (0, atoms_1.useGetGridRef)();
+    var editorRef = (0, react_2.useRef)(null);
+    var _d = tslib_1.__read((0, atoms_1.useFormulaMode)(), 2), isFormulaMode = _d[0], setFormulaMode = _d[1];
+    var setFormulaSelections = (0, atoms_1.useSetFormulaSelections)();
+    var activeEditor = (0, atoms_1.useActiveEditor)();
+    var setActiveEditor = (0, atoms_1.useSetActiveEditor)();
+    var getSelectionsFromFormula = (0, atoms_1.useGetSelectionsFromFormula)();
+    var onEditorKeyDown = (0, atoms_1.useOnEditorKeyDown)();
+    var _e = (0, cell_input_context_atom_1.useCellInputContext)(), getTableNames = _e.getTableNames, getTableColumnNames = _e.getTableColumnNames, getNamedRanges = _e.getNamedRanges;
+    var closeFormulaMode = (0, react_1.useCallback)(function () {
+        setFormulaMode(false);
+        setFormulaSelections([]);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    }, [onCancel, setFormulaMode, setFormulaSelections]);
+    var handleFocus = (0, react_1.useCallback)(function (e) {
+        var _a;
+        // Set formula mode
+        setFormulaMode((0, utils_1.isAFormula)(value));
+        // Get selections from formula
+        var selections = getSelectionsFromFormula === null || getSelectionsFromFormula === void 0 ? void 0 : getSelectionsFromFormula(value);
+        if (selections) {
+            setFormulaSelections(selections);
+        }
+        // Move to end of input
+        (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.moveCursorToEnd();
+        // Trigger change
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    }, [
+        setFormulaMode,
+        setFormulaSelections,
+        getSelectionsFromFormula,
+        value,
+        onChange,
+        onFocus,
+    ]);
+    var handleBlur = (0, react_1.useCallback)(function (e) {
+        var _a;
+        if (isFormulaMode && e.relatedTarget === ((_a = getGridRef === null || getGridRef === void 0 ? void 0 : getGridRef()) === null || _a === void 0 ? void 0 : _a.container)) {
+            (0, utils_1.debug)("Related target is null, hence formula mode is still active");
+            return;
+        }
+        closeFormulaMode();
+        // Resetting active editor will
+        // cause the dropdown to close if open
+        setActiveEditor(undefined);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    }, [closeFormulaMode, isFormulaMode, setActiveEditor, onCancel, getGridRef, onBlur]);
+    var handleChange = (0, react_1.useCallback)(function (value, textFormatRuns) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(value, textFormatRuns);
+        // Prevent selecting when there is no active editor
+        if (!activeEditor || activeEditor !== editorRef.current) {
+            return;
+        }
+        // Set formula mode
+        setFormulaMode((0, utils_1.isAFormula)(value));
+        // Get selections from formula
+        var selections = getSelectionsFromFormula === null || getSelectionsFromFormula === void 0 ? void 0 : getSelectionsFromFormula(value);
+        if (selections) {
+            setFormulaSelections(selections);
+        }
+    }, [
+        activeEditor,
+        onChange,
+        setFormulaMode,
+        setFormulaSelections,
+        getSelectionsFromFormula,
+    ]);
+    var mergedEditorRef = (0, use_merge_refs_1.useMergeRefs)(editorRef, forwardedRef);
+    return (react_2.default.createElement("div", { className: (0, ui_1.cn)("flex flex-row items-center mb-1", className) },
+        react_2.default.createElement(cell_input_1.CellInput, tslib_1.__assign({ ref: mergedEditorRef, className: (0, ui_1.cn)("text-rnc-foreground pt-0.5 pb-0.5 flex-1 border-rnc-input border border-solid rounded-sm", "focus-within:ring-1 focus-within:ring-ring focus-within:ring-offset-0", cellInputClassName), placeholder: placeholder, onSubmit: closeFormulaMode, onCancel: closeFormulaMode, value: value, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, getTableNames: getTableNames, getTableColumnNames: getTableColumnNames, getNamedRanges: getNamedRanges, onKeyDown: onEditorKeyDown }, rest))));
+});

package/dist/cjs/components/grid-footer/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type GridFooterProps = {
+    sheetId: number;
+    onRequestAddRows?: (sheetId: number, additionalRows: number) => void;
+};
+/**
+ * Default grid footer
+ * Usage
+ * footerComponent={<GridFooter onRequestAddRows={} />}
+ * @param param0
+ * @returns
+ */
+export declare const GridFooter: ({ sheetId, onRequestAddRows }: GridFooterProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/grid-footer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/grid-footer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;CACtE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,GAAI,+BAA+B,eAAe,sBA2CxE,CAAC"}

package/dist/cjs/components/grid-footer/index.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridFooter = 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 config_1 = require("../../config");
+/**
+ * Default grid footer
+ * Usage
+ * footerComponent={<GridFooter onRequestAddRows={} />}
+ * @param param0
+ * @returns
+ */
+var GridFooter = function (_a) {
+    var sheetId = _a.sheetId, onRequestAddRows = _a.onRequestAddRows;
+    var numberInputRef = (0, react_1.useRef)(null);
+    var scrollToBottom = (0, atoms_1.useSpreadsheet)().scrollToBottom;
+    return (react_1.default.createElement("div", { className: "flex flex-1 flex-row items-start bg-rnc-muted/30 p-2 border-rnc-border border-solid border-l border-r border-t border-b", style: {
+            paddingLeft: config_1.ROW_HEADER_WIDTH,
+        } },
+        react_1.default.createElement("div", { className: "flex flex-row items-center gap-2 pt-2", style: {
+                marginBottom: config_1.SCROLLBAR_SIZE,
+            } },
+            react_1.default.createElement(ui_1.Button, { type: "button", variant: "primary", onClick: function () {
+                    var _a;
+                    var numRows = (_a = numberInputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+                    if (!(0, utils_1.isNil)(numRows) && !isNaN(Number(numRows))) {
+                        onRequestAddRows === null || onRequestAddRows === void 0 ? void 0 : onRequestAddRows(sheetId, Number(numRows));
+                    }
+                    queueMicrotask(function () {
+                        scrollToBottom === null || scrollToBottom === void 0 ? void 0 : scrollToBottom();
+                    });
+                } }, "Add"),
+            react_1.default.createElement(ui_1.Input, { ref: numberInputRef, type: "number", className: "flex-shrink w-20", defaultValue: 1000 }),
+            react_1.default.createElement("div", { className: "text-sm font-system text-rnc-foreground" }, "more rows at the bottom"))));
+};
+exports.GridFooter = GridFooter;

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

@@ -0,0 +1,10 @@
+import type { RendererProps } from "@rowsncolumns/grid";
+import React from "react";
+export type HeaderCellProps = RendererProps & {
+    scale?: number;
+    backgroundColor?: string;
+    color?: string;
+    value: string;
+};
+export declare const HeaderCell: React.MemoExoticComponent<(props: HeaderCellProps) => React.JSX.Element>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/header-cell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,UAAU,oCAAgB,eAAe,uBA2EpD,CAAC"}

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderCell = void 0;
+var tslib_1 = require("tslib");
+var grid_1 = require("@rowsncolumns/grid");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_konva_1 = require("react-konva");
+exports.HeaderCell = (0, react_1.memo)(function (props) {
+    var rowIndex = props.rowIndex, columnIndex = props.columnIndex, _a = props.scale, scale = _a === void 0 ? 1 : _a, _b = props.backgroundColor, backgroundColor = _b === void 0 ? "#eee" : _b, _c = props.color, color = _c === void 0 ? "#333" : _c, width = props.width, height = props.height, x = props.x, y = props.y, stroke = props.stroke, _d = props.strokeWidth, strokeWidth = _d === void 0 ? 1 : _d, value = props.value;
+    var isCorner = rowIndex === columnIndex;
+    var fontSize = 10 * scale;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_konva_1.Rect, { x: x + 0.5, y: y + 0.5, height: height, width: width, fill: backgroundColor, stroke: stroke, strokeWidth: strokeWidth, shadowForStrokeEnabled: false, strokeScaleEnabled: false, hitStrokeWidth: 0, listening: false }),
+        (0, grid_1.isNull)(value) ? null : (react_1.default.createElement(react_konva_1.Group, { clipY: y + strokeWidth, clipHeight: height, clipX: x + strokeWidth, clipWidth: width, listening: false },
+            react_1.default.createElement(react_konva_1.Text, { x: x + 0.5, y: y + 0.5, height: height, width: width, text: value, fill: color, fontSize: fontSize, hitStrokeWidth: 0, align: "center", verticalAlign: "middle", wrap: "none", listening: false }))),
+        isCorner ? (react_1.default.createElement(react_konva_1.Shape, { x: x, y: y, width: width, height: height, sceneFunc: function (ctx) {
+                ctx.beginPath();
+                ctx.lineTo(34.5 * scale, 22.5 * scale);
+                ctx.lineTo(44.5 * scale, 22.5 * scale);
+                ctx.lineTo(44.5 * scale, 12.5 * scale);
+                ctx.setAttr("fillStyle", "rgb(183,183,183)");
+                ctx.fill();
+            }, listening: false })) : null));
+});
+exports.HeaderCell.displayName = "HeaderCell";

package/dist/cjs/components/header-menu/index.d.ts

@@ -0,0 +1,13 @@
+import { IconButton } from "@rowsncolumns/ui";
+import type { ComponentProps } from "react";
+import React from "react";
+type HeadermenuProps = {
+    left: number;
+    top: number;
+    dimension: number;
+    isSelected?: boolean;
+    scale?: number;
+};
+export declare const Headermenu: ({ left, top, dimension, className, isSelected, scale, ...props }: HeadermenuProps & ComponentProps<typeof IconButton>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/header-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/header-menu/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,kEAQxB,eAAe,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,sBAsBrD,CAAC"}

package/dist/cjs/components/header-menu/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Headermenu = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importDefault(require("react"));
+var config_1 = require("../../config");
+var Headermenu = function (_a) {
+    var left = _a.left, top = _a.top, dimension = _a.dimension, className = _a.className, isSelected = _a.isSelected, _b = _a.scale, scale = _b === void 0 ? 1 : _b, props = tslib_1.__rest(_a, ["left", "top", "dimension", "className", "isSelected", "scale"]);
+    return (react_1.default.createElement(ui_1.IconButton, tslib_1.__assign({ className: (0, ui_1.cn)("absolute top-0 left-0 min-w-0 min-h-0 p-0 pointer-events-auto hover:bg-rnc-background active:bg-rnc-background focus:bg-rnc-background", isSelected ? "text-background" : undefined, className), style: {
+            left: left,
+            top: top,
+            width: dimension,
+            height: dimension,
+        } }, props),
+        react_1.default.createElement(icons_1.TriangleDownIcon, { width: config_1.HEADER_MENU_DIM * scale, height: config_1.HEADER_MENU_DIM * scale })));
+};
+exports.Headermenu = Headermenu;

package/dist/cjs/components/header-move/index.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import type { AXIS } from "./../../types";
+export interface DragComponentProps extends React.HTMLAttributes<HTMLDivElement> {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    isDragging: boolean;
+    offset?: number;
+    dragOffset?: number;
+    axis?: AXIS;
+    containerHeight: number;
+    containerWidth: number;
+}
+/**
+ * Drag entire row and column
+ * using this component
+ *
+ * Only displayed when user selects
+ * full column or row
+ */
+export declare const HeaderMoveDragComponent: React.MemoExoticComponent<({ x, y, width, height, isDragging, offset, dragOffset, axis, containerHeight, containerWidth, ...rest }: DragComponentProps) => React.JSX.Element>;
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/header-move/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/header-move/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1C,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,sIAa/B,kBAAkB,uBA2DtB,CAAC"}

package/dist/cjs/components/header-move/index.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderMoveDragComponent = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+/**
+ * Drag entire row and column
+ * using this component
+ *
+ * Only displayed when user selects
+ * full column or row
+ */
+exports.HeaderMoveDragComponent = (0, react_1.memo)(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, isDragging = _a.isDragging, _f = _a.offset, offset = _f === void 0 ? 0 : _f, _g = _a.dragOffset, dragOffset = _g === void 0 ? 0 : _g, _h = _a.axis, axis = _h === void 0 ? "x" : _h, containerHeight = _a.containerHeight, containerWidth = _a.containerWidth, rest = tslib_1.__rest(_a, ["x", "y", "width", "height", "isDragging", "offset", "dragOffset", "axis", "containerHeight", "containerWidth"]);
+    return (react_1.default.createElement("div", { className: "rnc-drag-container absolute inset-0 overflow-hidden pointer-events-none" },
+        react_1.default.createElement("div", tslib_1.__assign({ style: {
+                transform: "translate3d(".concat(x, "px, ").concat(y, "px, 0)"),
+                width: width,
+                cursor: isDragging ? "grabbing" : "grab",
+                height: height,
+            }, className: "rowcol-drag-handle pointer-events-auto select-none absolute left-0 top-0" }, rest)),
+        isDragging ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: "rowcol-drag-highlight absolute top-0 left-0", style: tslib_1.__assign(tslib_1.__assign({}, (axis === "x"
+                    ? {
+                        transform: "translate3d(".concat(dragOffset, "px, ").concat(y + height, "px, 0)"),
+                        width: width,
+                        height: containerHeight - height,
+                    }
+                    : {
+                        transform: "translate3d(".concat(x + width, "px, ").concat(dragOffset, "px, 0)"),
+                        height: height,
+                        width: containerWidth - width,
+                    })), { background: "#777", opacity: 0.2 }) }),
+            react_1.default.createElement("div", { className: "rowcol-drag-border absolute top-0 left-0", style: tslib_1.__assign(tslib_1.__assign({}, (axis === "x"
+                    ? {
+                        transform: "translate3d(".concat(offset, "px, ").concat(y + height, "px, 0)"),
+                        height: containerHeight - height,
+                        width: 2,
+                    }
+                    : {
+                        transform: "translate3d(".concat(x + width, "px, ").concat(offset, "px, 0)"),
+                        height: 2,
+                        width: containerWidth - width,
+                    })), { background: "#777" }) }))) : null));
+});
+exports.HeaderMoveDragComponent.displayName = "HeaderDragMove";

package/dist/cjs/components/header-resizer/index.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { AXIS } from "./../../types";
+type HeaderResizerProps = React.HTMLAttributes<HTMLDivElement> & {
+    axis: AXIS;
+    left?: number;
+    top?: number;
+    width?: number;
+    height?: number;
+    isDragging?: boolean;
+    dimension?: number;
+    index?: number;
+    backgroundColor?: string;
+    containerWidth: number;
+    containerHeight: number;
+    onAutoFit?: (index: number, axis: AXIS) => void;
+};
+export declare const HeaderResizer: React.FC<HeaderResizerProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/header-resizer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/header-resizer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1C,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAC/D,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACjD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqEtD,CAAC"}