@rowsncolumns/spreadsheet-state 28.0.66

package/dist/cjs/components/editors/data-validation-editor.d.ts

@@ -0,0 +1,27 @@
+import type { CanvasGridProps, DataValidationRuleRecord } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import type { UseSpreadsheetProps, useSpreadsheetState } from "../../hooks/use-spreadsheet-state";
+type DataValidationEditorProps = {
+    dataValidations?: DataValidationRuleRecord[];
+    sheetId: number;
+    functionDescriptions?: CanvasGridProps["functionDescriptions"];
+    onDeleteRules: ReturnType<typeof useSpreadsheetState>["onDeleteDataValidationRules"];
+    onUpdateRule: ReturnType<typeof useSpreadsheetState>["onUpdateDataValidationRule"];
+    onCreateRule: ReturnType<typeof useSpreadsheetState>["onCreateDataValidationRule"];
+    onDeleteRule: ReturnType<typeof useSpreadsheetState>["onDeleteDataValidationRule"];
+    /**
+     * Id creation strategy
+     */
+    idCreationStrategy?: UseSpreadsheetProps["idCreationStrategy"];
+};
+/**
+ * Data validation Editor
+ * @param param0
+ * @returns
+ */
+export declare const DataValidationEditor: ({ sheetId, dataValidations, functionDescriptions, idCreationStrategy, onDeleteRules, onDeleteRule, onCreateRule, onUpdateRule, }: DataValidationEditorProps) => React.JSX.Element;
+export declare const DataValidationEditorDialog: ({ children, }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export {};
+//# sourceMappingURL=data-validation-editor.d.ts.map

package/dist/cjs/components/editors/data-validation-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-validation-editor.d.ts","sourceRoot":"","sources":["../../../../components/editors/data-validation-editor.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,eAAe,EACf,wBAAwB,EACzB,MAAM,2BAA2B,CAAC;AAoBnC,OAAO,KAA4D,MAAM,OAAO,CAAC;AAIjF,OAAO,KAAK,EACV,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,mCAAmC,CAAC;AAQ3C,KAAK,yBAAyB,GAAG;IAC/B,eAAe,CAAC,EAAE,wBAAwB,EAAE,CAAC;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,oBAAoB,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IAC/D,aAAa,EAAE,UAAU,CACvB,OAAO,mBAAmB,CAC3B,CAAC,6BAA6B,CAAC,CAAC;IACjC,YAAY,EAAE,UAAU,CACtB,OAAO,mBAAmB,CAC3B,CAAC,4BAA4B,CAAC,CAAC;IAChC,YAAY,EAAE,UAAU,CACtB,OAAO,mBAAmB,CAC3B,CAAC,4BAA4B,CAAC,CAAC;IAChC,YAAY,EAAE,UAAU,CACtB,OAAO,mBAAmB,CAC3B,CAAC,4BAA4B,CAAC,CAAC;IAChC;;OAEG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;CAChE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,kIASlC,yBAAyB,sBA+O3B,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,eAExC;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,sBAyBA,CAAC"}

package/dist/cjs/components/editors/data-validation-editor.js

@@ -0,0 +1,163 @@
+import { __assign, __read } from "tslib";
+import { CopyIcon, Cross2Icon, Pencil2Icon, PlusIcon, TrashIcon, } from "@rowsncolumns/icons";
+import { CONDITION_LABELS, getUserSelections, useFocusSheet, useFormulaRangeHelpers, useSpreadsheetApi, } from "@rowsncolumns/spreadsheet";
+import { Button, Dialog, DialogBody, DialogCloseButton, DialogContent, DialogTitle, IconButton, Separator, Stack, } from "@rowsncolumns/ui";
+import { uuid } from "@rowsncolumns/utils";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useDataValidationDialogState } from "../../atoms/dialog-state.atom";
+import { useEditingDataValidationIdState } from "../../atoms/editing-data-validation-id.atom";
+import { DataValidationRuleEditor } from "./data-validation-rule-editor";
+import { SheetFilterEmptyState, SheetFilterSelect, useSheetFilter, } from "./sheet-filter";
+/**
+ * Data validation Editor
+ * @param param0
+ * @returns
+ */
+export var DataValidationEditor = function (_a) {
+    var sheetId = _a.sheetId, dataValidations = _a.dataValidations, functionDescriptions = _a.functionDescriptions, idCreationStrategy = _a.idCreationStrategy, onDeleteRules = _a.onDeleteRules, onDeleteRule = _a.onDeleteRule, onCreateRule = _a.onCreateRule, onUpdateRule = _a.onUpdateRule;
+    var _b = __read(useEditingDataValidationIdState(), 2), editingId = _b[0], setEditingId = _b[1];
+    // Deferred create: "Add rule" holds the new rule as a local draft and only persists
+    // it on Save — Excel's dialog is transactional (no rule exists until OK), and an
+    // eagerly-created stub would survive Cancel/close as a blank, conditionless rule.
+    var _c = __read(useState(), 2), draftRule = _c[0], setDraftRule = _c[1];
+    var api = useSpreadsheetApi();
+    var rangeToFormula = useFormulaRangeHelpers({
+        sheetId: sheetId,
+    }).rangeToFormula;
+    var _d = useSheetFilter(sheetId, dataValidations !== null && dataValidations !== void 0 ? dataValidations : []), sheetFilter = _d.sheetFilter, setSheetFilter = _d.setSheetFilter, filterableSheetIds = _d.filterableSheetIds, visibleRules = _d.visibleRules, showFilter = _d.showFilter;
+    var onNewRule = function () {
+        var _a, _b, _c;
+        var id = (_a = idCreationStrategy === null || idCreationStrategy === void 0 ? void 0 : idCreationStrategy("data-validation")) !== null && _a !== void 0 ? _a : uuid();
+        var activeCell = (_b = api === null || api === void 0 ? void 0 : api.getActiveSheet()) === null || _b === void 0 ? void 0 : _b.getActiveCell();
+        var selections = (_c = api === null || api === void 0 ? void 0 : api.getActiveSheet()) === null || _c === void 0 ? void 0 : _c.getSelections();
+        var finalSelections = getUserSelections(activeCell, selections);
+        setDraftRule({
+            condition: {},
+            // Excel parity: the dialog's "Ignore blank" starts checked for new
+            // rules. Only rules whose file/author explicitly cleared it block blanks.
+            allowBlank: true,
+            id: id,
+            ranges: finalSelections.map(function (sel) { return (__assign(__assign({}, sel.range), { sheetId: sheetId })); }),
+        });
+        setEditingId(id);
+    };
+    var onDuplicateRule = function (rule) {
+        var _a;
+        var id = (_a = idCreationStrategy === null || idCreationStrategy === void 0 ? void 0 : idCreationStrategy("data-validation")) !== null && _a !== void 0 ? _a : uuid();
+        onCreateRule === null || onCreateRule === void 0 ? void 0 : onCreateRule(__assign(__assign({}, rule), { id: id }));
+    };
+    var onSave = function (rule, previousRule) {
+        var _a;
+        var isDraft = draftRule && rule.id === draftRule.id;
+        // Excel's "Any value": no condition type means no validation — a draft saved as
+        // NONE is discarded, an existing rule switched to NONE is removed. The rule
+        // editor's "Any value" option surfaces as the untyped "NONE" sentinel, which the
+        // ConditionType union doesn't carry.
+        var conditionType = (_a = rule.condition) === null || _a === void 0 ? void 0 : _a.type;
+        var isNoneRule = !conditionType || conditionType === "NONE";
+        if (isDraft) {
+            if (!isNoneRule) {
+                onCreateRule === null || onCreateRule === void 0 ? void 0 : onCreateRule(rule);
+            }
+            setDraftRule(undefined);
+        }
+        else if (isNoneRule) {
+            onDeleteRule(rule);
+        }
+        else {
+            onUpdateRule === null || onUpdateRule === void 0 ? void 0 : onUpdateRule(rule, previousRule);
+        }
+        setEditingId(undefined);
+    };
+    var activeRule = useMemo(function () {
+        return draftRule && draftRule.id === editingId
+            ? draftRule
+            : dataValidations === null || dataValidations === void 0 ? void 0 : dataValidations.find(function (rule) { return rule.id === editingId; });
+    }, [dataValidations, editingId, draftRule]);
+    // The editing id lives in a shared atom that outlives this editor. If the dialog
+    // closes while a draft is being edited, clear it on unmount — otherwise reopening
+    // the dialog resolves an id with no rule, hiding the Add rule / Remove all footer.
+    var unmountCleanupRef = useRef({ editingId: undefined, draftId: undefined });
+    useEffect(function () {
+        unmountCleanupRef.current = { editingId: editingId, draftId: draftRule === null || draftRule === void 0 ? void 0 : draftRule.id };
+    }, [editingId, draftRule]);
+    useEffect(function () { return function () {
+        var _a = unmountCleanupRef.current, editingId = _a.editingId, draftId = _a.draftId;
+        if (draftId !== undefined && editingId === draftId) {
+            setEditingId(undefined);
+        }
+    }; }, [setEditingId]);
+    var unMark = function () {
+        api === null || api === void 0 ? void 0 : api.unmark();
+    };
+    return (React.createElement(React.Fragment, null,
+        editingId && activeRule ? (React.createElement(DataValidationRuleEditor, { sheetId: sheetId, dataValidationRule: activeRule, key: editingId, onCancel: function () {
+                setDraftRule(undefined);
+                setEditingId(undefined);
+            }, onSubmit: onSave, functionDescriptions: functionDescriptions, idCreationStrategy: idCreationStrategy })) : (React.createElement("div", { className: "flex flex-col overflow-auto max-h-[600px]" },
+            showFilter ? (React.createElement(SheetFilterSelect, { value: sheetFilter, sheetIds: filterableSheetIds, onValueChange: setSheetFilter })) : null,
+            visibleRules.length === 0 ? (React.createElement(SheetFilterEmptyState, { sheetFilter: sheetFilter, label: "data validation rules" })) : null,
+            visibleRules.map(function (rule) {
+                var _a, _b, _c, _d, _e;
+                var label = (_b = (_a = CONDITION_LABELS.find(function (condition) { var _a; return condition.condition === ((_a = rule.condition) === null || _a === void 0 ? void 0 : _a.type); })) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = rule.condition) === null || _c === void 0 ? void 0 : _c.type;
+                var values = (_e = (_d = rule.condition) === null || _d === void 0 ? void 0 : _d.values) === null || _e === void 0 ? void 0 : _e.map(function (value) { return value.userEnteredValue; }).join(",");
+                return (React.createElement("div", { className: "border-0 border-solid border-b border-rnc-border p-2 text-sm grid grid-cols-[1fr_auto] gap-2 pr-0", key: rule.id, tabIndex: 0, onMouseEnter: function () {
+                        var _a;
+                        (_a = api === null || api === void 0 ? void 0 : api.mark) === null || _a === void 0 ? void 0 : _a.call(api, rule.ranges);
+                    }, onMouseLeave: function () {
+                        unMark();
+                    }, onFocusCapture: function () {
+                        var _a;
+                        (_a = api === null || api === void 0 ? void 0 : api.mark) === null || _a === void 0 ? void 0 : _a.call(api, rule.ranges);
+                    }, onBlurCapture: function () {
+                        unMark();
+                    } },
+                    React.createElement("div", { className: "flex flex-col justify-center" },
+                        React.createElement("div", null, label),
+                        React.createElement("div", { className: "flex gap-1 text-rnc-muted-foreground flex-wrap text-xs pb-2 break-words" }, values),
+                        React.createElement("div", { className: "flex gap-1 text-rnc-muted-foreground flex-wrap text-xs" },
+                            "Applies to:",
+                            rule.ranges.map(function (range) {
+                                var address = rangeToFormula(range);
+                                return (React.createElement("div", { key: address, className: "whitespace-nowrap" }, address));
+                            }))),
+                    React.createElement("div", null,
+                        React.createElement(IconButton, { tooltip: "Duplicate", onClick: function () { return onDuplicateRule(rule); } },
+                            React.createElement(CopyIcon, null)),
+                        React.createElement(IconButton, { tooltip: "Edit", onClick: function () {
+                                unMark();
+                                setEditingId(rule.id);
+                            } },
+                            React.createElement(Pencil2Icon, null)),
+                        React.createElement(IconButton, { tooltip: "Delete", onClick: function () {
+                                unMark();
+                                onDeleteRule(rule);
+                            } },
+                            React.createElement(TrashIcon, null)))));
+            }))),
+        editingId ? null : (React.createElement(React.Fragment, null,
+            React.createElement(Separator, { className: "mb-2 border-none bg-transparent" }),
+            React.createElement(Stack, null,
+                React.createElement(Button, { variant: "link", size: "xs", className: "py-2 cursor-pointer hover:bg-rnc-muted rounded-none px-2", onClick: onNewRule },
+                    React.createElement(PlusIcon, null),
+                    "Add rule"),
+                React.createElement(Button, { variant: "link", size: "xs", className: "py-2 cursor-pointer hover:bg-rnc-muted rounded-none px-2", 
+                    // Scoped to the filtered view — "Remove all" must not delete
+                    // rules the sheet filter is hiding.
+                    disabled: !visibleRules.length, onClick: function () { return onDeleteRules(visibleRules); } }, "Remove all"))))));
+};
+export var DataValidationEditorDialog = function (_a) {
+    var children = _a.children;
+    var _b = __read(useDataValidationDialogState(), 2), isOpen = _b[0], onOpenChange = _b[1];
+    var focusSheet = useFocusSheet();
+    var closeDialog = useCallback(function () {
+        onOpenChange(false);
+        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+    }, [onOpenChange, focusSheet]);
+    return (React.createElement(Dialog, { modal: false, open: isOpen },
+        React.createElement(DialogContent, { onEscapeKeyDown: closeDialog, onCloseAutoFocus: function (e) { return e.preventDefault(); } },
+            React.createElement(DialogTitle, { className: "rnc-drag-handle cursor-move" }, "Data validation rules"),
+            React.createElement(DialogBody, null, children),
+            React.createElement(DialogCloseButton, { onClick: closeDialog },
+                React.createElement(Cross2Icon, null)))));
+};

package/dist/cjs/components/editors/data-validation-rule-editor.d.ts

@@ -0,0 +1,17 @@
+import type { CanvasGridProps, DataValidationRuleRecord } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import type { UseSpreadsheetProps } from "../../hooks/use-spreadsheet-state";
+type DataValidationRuleEditorProps = {
+    sheetId: number;
+    dataValidationRule: DataValidationRuleRecord;
+    functionDescriptions?: CanvasGridProps["functionDescriptions"];
+    /**
+     * Id creation strategy
+     */
+    idCreationStrategy?: UseSpreadsheetProps["idCreationStrategy"];
+    onSubmit?(rule: DataValidationRuleRecord, previousRule: DataValidationRuleRecord): void;
+    onCancel?(): void;
+};
+export declare const DataValidationRuleEditor: ({ sheetId, dataValidationRule, functionDescriptions, idCreationStrategy, onCancel, onSubmit, }: DataValidationRuleEditorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=data-validation-rule-editor.d.ts.map

package/dist/cjs/components/editors/data-validation-rule-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-validation-rule-editor.d.ts","sourceRoot":"","sources":["../../../../components/editors/data-validation-rule-editor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,eAAe,EAEf,wBAAwB,EAEzB,MAAM,2BAA2B,CAAC;AAyBnC,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAE7E,KAAK,6BAA6B,GAAG;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,kBAAkB,EAAE,wBAAwB,CAAC;IAC7C,oBAAoB,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IAC/D;;OAEG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;IAC/D,QAAQ,CAAC,CACP,IAAI,EAAE,wBAAwB,EAC9B,YAAY,EAAE,wBAAwB,GACrC,IAAI,CAAC;IACR,QAAQ,CAAC,IAAI,IAAI,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,gGAOtC,6BAA6B,sBA+W/B,CAAC"}

package/dist/cjs/components/editors/data-validation-rule-editor.js

@@ -0,0 +1,217 @@
+import { __assign, __read, __spreadArray } from "tslib";
+import { CrossCircledIcon } from "@rowsncolumns/icons";
+import { CONDITION_NONE, FormulaInput, shouldShowFromValue, shouldShowToValue, useFormulaInputState, useGetNamedRanges, VALIDATION_CONDITION_LABELS, } from "@rowsncolumns/spreadsheet";
+import { Button, IconButton, Input, Select, SelectContent, SelectItem, SelectPortal, SelectTrigger, SelectValue, Stack, useIsomorphicLayoutEffect, } from "@rowsncolumns/ui";
+import { uuid } from "@rowsncolumns/utils";
+import { useFormik } from "formik";
+import React, { useMemo, useState } from "react";
+export var DataValidationRuleEditor = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+    var sheetId = _a.sheetId, dataValidationRule = _a.dataValidationRule, functionDescriptions = _a.functionDescriptions, idCreationStrategy = _a.idCreationStrategy, onCancel = _a.onCancel, onSubmit = _a.onSubmit;
+    var ensureFormula = function (value) {
+        if (!value)
+            return undefined;
+        var trimmed = value.trim();
+        if (!trimmed)
+            return undefined;
+        return trimmed.startsWith("=") ? trimmed : "=".concat(trimmed);
+    };
+    var getNamedRanges = useGetNamedRanges();
+    var _1 = useFormik({
+        initialValues: dataValidationRule,
+        onSubmit: function (values) {
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(values, dataValidationRule);
+        },
+    }), values = _1.values, handleSubmit = _1.handleSubmit, resetForm = _1.resetForm, setFieldValue = _1.setFieldValue;
+    // Cancel
+    var onCancelForm = function () {
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        resetForm();
+    };
+    var _2 = __read(useState(function () { var _a, _b; return shouldShowToValue((_b = (_a = values.condition) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : undefined); }), 2), showToValue = _2[0], setShowToValue = _2[1];
+    var _3 = __read(useState(function () { var _a, _b; return shouldShowFromValue((_b = (_a = values === null || values === void 0 ? void 0 : values.condition) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : undefined); }), 2), showFromValue = _3[0], setShowFromValue = _3[1];
+    var fromValue = (_d = (_c = (_b = values === null || values === void 0 ? void 0 : values.condition) === null || _b === void 0 ? void 0 : _b.values) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.userEnteredValue;
+    var toValue = (_g = (_f = (_e = values === null || values === void 0 ? void 0 : values.condition) === null || _e === void 0 ? void 0 : _e.values) === null || _f === void 0 ? void 0 : _f[1]) === null || _g === void 0 ? void 0 : _g.userEnteredValue;
+    var updateDataValidationInputs = function (nextFromValue, nextToValue, nextType, includeToValue, includeFromValue) {
+        var _a, _b;
+        if (nextType === void 0) { nextType = (_a = values === null || values === void 0 ? void 0 : values.condition) === null || _a === void 0 ? void 0 : _a.type; }
+        if (includeToValue === void 0) { includeToValue = showToValue; }
+        if (includeFromValue === void 0) { includeFromValue = showFromValue; }
+        var shouldIncludeFrom = includeFromValue && nextFromValue !== undefined;
+        if (nextType === "CUSTOM_FORMULA") {
+            setFieldValue("condition.values", __spreadArray([], __read((shouldIncludeFrom
+                ? [{ userEnteredValue: (_b = ensureFormula(nextFromValue)) !== null && _b !== void 0 ? _b : "" }]
+                : [])), false));
+        }
+        else {
+            setFieldValue("condition.values", __spreadArray(__spreadArray([], __read((shouldIncludeFrom
+                ? [{ userEnteredValue: nextFromValue }]
+                : [])), false), __read((includeToValue && nextToValue !== undefined
+                ? [{ userEnteredValue: nextToValue }]
+                : [])), false));
+        }
+    };
+    useIsomorphicLayoutEffect(function () {
+        var _a, _b, _c, _d, _e;
+        var showTo = shouldShowToValue((_b = (_a = values === null || values === void 0 ? void 0 : values.condition) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : undefined);
+        var showFrom = shouldShowFromValue((_d = (_c = values === null || values === void 0 ? void 0 : values.condition) === null || _c === void 0 ? void 0 : _c.type) !== null && _d !== void 0 ? _d : undefined);
+        setShowToValue(showTo);
+        setShowFromValue(showFrom);
+        updateDataValidationInputs(fromValue, toValue, (_e = values === null || values === void 0 ? void 0 : values.condition) === null || _e === void 0 ? void 0 : _e.type, showTo, showFrom);
+    }, [(_h = values === null || values === void 0 ? void 0 : values.condition) === null || _h === void 0 ? void 0 : _h.type]);
+    var len = values.ranges.length;
+    // For id :(
+    // FormulaInput only supports defaultValue
+    // so a `value` change does not re-render it
+    var rangeValues = useMemo(function () {
+        return values.ranges.map(function (range) {
+            var _a;
+            return __assign(__assign({}, range), { id: (_a = idCreationStrategy === null || idCreationStrategy === void 0 ? void 0 : idCreationStrategy("data-validation")) !== null && _a !== void 0 ? _a : uuid() });
+        });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [len, idCreationStrategy]);
+    return (React.createElement("form", { onSubmit: handleSubmit },
+        React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
+            React.createElement("label", { className: "font-system text-sm" }, "Apply to range"),
+            rangeValues.map(function (_a, idx) {
+                var id = _a.id;
+                var range = values.ranges[idx];
+                var canRemove = values.ranges.length !== 1;
+                return (React.createElement(Stack, { direction: "horizontal", className: "grid grid-cols-[1fr_auto] gap-2", key: id },
+                    React.createElement(DataValidationRangeInput, { sheetId: sheetId, range: range, autoFocus: idx === values.ranges.length - 1, onValidRange: function (parsed) {
+                            setFieldValue("ranges[".concat(idx, "]"), parsed);
+                        } }),
+                    React.createElement(IconButton, { type: "button", onClick: function () {
+                            setFieldValue("ranges", values.ranges.filter(function (value, i) { return i !== idx; }));
+                        }, tooltip: canRemove ? "Remove range" : "You need atleast one range", disabled: !canRemove },
+                        React.createElement(CrossCircledIcon, null))));
+            }),
+            React.createElement("div", { className: "py-1" },
+                React.createElement(Button, { variant: "link", onClick: function () {
+                        setFieldValue("ranges", __spreadArray(__spreadArray([], __read(values.ranges), false), [
+                            {
+                                startRowIndex: 1,
+                                endRowIndex: 1,
+                                startColumnIndex: 1,
+                                endColumnIndex: 1,
+                                sheetId: sheetId,
+                            },
+                        ], false));
+                    }, type: "button", className: "cursor-pointer" }, "Add range"))),
+        React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-1" },
+            React.createElement("label", { className: "font-system text-sm" }, "Format rules"),
+            React.createElement(Select, { value: (_k = (_j = values === null || values === void 0 ? void 0 : values.condition) === null || _j === void 0 ? void 0 : _j.type) !== null && _k !== void 0 ? _k : CONDITION_NONE, onValueChange: function (value) {
+                    var _a, _b, _c, _d;
+                    var nextShowTo = shouldShowToValue(value);
+                    var nextShowFrom = shouldShowFromValue(value);
+                    setFieldValue("condition.type", value);
+                    var initialValues = getInitialDataValidationValues(value, (_b = (_a = values === null || values === void 0 ? void 0 : values.condition) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : []);
+                    if (!(initialValues === null || initialValues === void 0 ? void 0 : initialValues.length)) {
+                        updateDataValidationInputs(undefined, undefined, value, false, false);
+                        return;
+                    }
+                    updateDataValidationInputs((_c = initialValues === null || initialValues === void 0 ? void 0 : initialValues[0]) === null || _c === void 0 ? void 0 : _c.userEnteredValue, (_d = initialValues === null || initialValues === void 0 ? void 0 : initialValues[1]) === null || _d === void 0 ? void 0 : _d.userEnteredValue, value, nextShowTo, nextShowFrom);
+                } },
+                React.createElement(SelectTrigger, { className: "mb-1 text-sm" },
+                    React.createElement(SelectValue, { placeholder: "None" })),
+                React.createElement(SelectPortal, null,
+                    React.createElement(SelectContent, null,
+                        React.createElement(SelectItem, { value: CONDITION_NONE }, "None"),
+                        VALIDATION_CONDITION_LABELS.map(function (_a) {
+                            var condition = _a.condition, label = _a.label;
+                            return (React.createElement(SelectItem, { key: condition, value: condition }, label));
+                        }))))),
+        React.createElement(Stack, { direction: "vertical", className: "gap-1  pb-3" },
+            showFromValue ? (((_l = values.condition) === null || _l === void 0 ? void 0 : _l.type) === "CUSTOM_FORMULA" ||
+                ((_m = values.condition) === null || _m === void 0 ? void 0 : _m.type) === "ONE_OF_RANGE" ? (React.createElement(FormulaInput, { onChange: function (value) {
+                    var _a, _b;
+                    return updateDataValidationInputs(value, undefined, (_b = (_a = values.condition) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : undefined, false, true);
+                }, value: fromValue !== null && fromValue !== void 0 ? fromValue : "=", required: true, placeholder: "Enter a formula", autoFocus: true, functionDescriptions: functionDescriptions, getNamedRanges: getNamedRanges })) : (React.createElement(Input, { value: fromValue, type: "text", name: "fromValue", onChange: function (e) {
+                    return updateDataValidationInputs(e.target.value, toValue);
+                }, className: "text-xs", placeholder: "Value or formula" }))) : null,
+            showToValue ? (React.createElement(Input, { value: toValue, type: "text", name: "toValue", onChange: function (e) {
+                    return updateDataValidationInputs(fromValue, e.target.value);
+                }, className: "text-xs", placeholder: "Value or formula" })) : null),
+        React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-1 flex-row" },
+            React.createElement("input", { type: "checkbox", checked: (_o = values.allowBlank) !== null && _o !== void 0 ? _o : undefined, onChange: function (e) {
+                    setFieldValue("allowBlank", e.target.checked);
+                }, id: "validationAllowBlank" }),
+            React.createElement("label", { htmlFor: "validationAllowBlank", className: "font-system text-sm" }, "Allow blank")),
+        React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-1 flex-row" },
+            React.createElement("input", { type: "checkbox", checked: Boolean(values.inputMessage), onChange: function (e) {
+                    var _a;
+                    setFieldValue("inputMessage", e.target.checked ? (_a = values.inputMessage) !== null && _a !== void 0 ? _a : {} : undefined);
+                }, id: "validationShowInputMessage" }),
+            React.createElement("label", { htmlFor: "validationShowInputMessage", className: "font-system text-sm" }, "Show input message when cell is selected")),
+        values.inputMessage ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
+            React.createElement(Input, { value: (_q = (_p = values.inputMessage) === null || _p === void 0 ? void 0 : _p.title) !== null && _q !== void 0 ? _q : "", type: "text", name: "inputMessageTitle", onChange: function (e) {
+                    return setFieldValue("inputMessage.title", e.target.value);
+                }, className: "text-xs", placeholder: "Title" }),
+            React.createElement(Input, { value: (_s = (_r = values.inputMessage) === null || _r === void 0 ? void 0 : _r.message) !== null && _s !== void 0 ? _s : "", type: "text", name: "inputMessageBody", onChange: function (e) {
+                    return setFieldValue("inputMessage.message", e.target.value);
+                }, className: "text-xs", placeholder: "Input message" }))) : null,
+        React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-1 flex-row" },
+            React.createElement("input", { type: "checkbox", checked: Boolean(values.alert), onChange: function (e) {
+                    var _a;
+                    setFieldValue("alert", e.target.checked ? (_a = values.alert) !== null && _a !== void 0 ? _a : { style: "stop" } : undefined);
+                }, id: "validationShowErrorAlert" }),
+            React.createElement("label", { htmlFor: "validationShowErrorAlert", className: "font-system text-sm" }, "Show error alert after invalid data is entered")),
+        values.alert ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
+            React.createElement(Select, { value: (_u = (_t = values.alert) === null || _t === void 0 ? void 0 : _t.style) !== null && _u !== void 0 ? _u : "stop", onValueChange: function (value) {
+                    return setFieldValue("alert.style", value);
+                } },
+                React.createElement(SelectTrigger, { className: "mb-1 text-sm" },
+                    React.createElement(SelectValue, { placeholder: "Stop" })),
+                React.createElement(SelectPortal, null,
+                    React.createElement(SelectContent, null,
+                        React.createElement(SelectItem, { value: "stop" }, "Stop"),
+                        React.createElement(SelectItem, { value: "warning" }, "Warning"),
+                        React.createElement(SelectItem, { value: "information" }, "Information")))),
+            React.createElement(Input, { value: (_x = (_w = (_v = values.alert) === null || _v === void 0 ? void 0 : _v.message) === null || _w === void 0 ? void 0 : _w.title) !== null && _x !== void 0 ? _x : "", type: "text", name: "alertTitle", onChange: function (e) { return setFieldValue("alert.message.title", e.target.value); }, className: "text-xs", placeholder: "Title" }),
+            React.createElement(Input, { value: (_0 = (_z = (_y = values.alert) === null || _y === void 0 ? void 0 : _y.message) === null || _z === void 0 ? void 0 : _z.message) !== null && _0 !== void 0 ? _0 : "", type: "text", name: "alertBody", onChange: function (e) {
+                    return setFieldValue("alert.message.message", e.target.value);
+                }, className: "text-xs", placeholder: "Error message" }))) : null,
+        React.createElement("div", { className: "flex gap-1 py-2" },
+            React.createElement(Button, { type: "submit", variant: "primary", size: "xs" }, "Save"),
+            React.createElement(Button, { size: "xs", onClick: onCancelForm, type: "button" }, "Cancel"))));
+};
+var DataValidationRangeInput = function (_a) {
+    var sheetId = _a.sheetId, range = _a.range, autoFocus = _a.autoFocus, onValidRange = _a.onValidRange;
+    var formulaInput = useFormulaInputState(sheetId, range);
+    return (React.createElement(FormulaInput, { onChange: function (value) {
+            formulaInput.onChange(value, onValidRange);
+        }, value: formulaInput.value, required: true, placeholder: "Select a range", autoFocus: autoFocus, className: "mb-0" }));
+};
+/**
+ * Get initial data validation values
+ * @param type
+ * @param currentValues
+ */
+var getInitialDataValidationValues = function (type, currentValues) {
+    switch (type) {
+        case "BOOLEAN":
+        case "BLANK":
+        case "NOT_BLANK":
+        case "ERROR":
+        case "NOT_ERROR":
+        case "NUMBER_ABOVE_AVERAGE":
+        case "NUMBER_BELOW_AVERAGE":
+        case "TEXT_IS_EMAIL":
+        case "TEXT_IS_URL":
+        case "DATE_IS_VALID":
+        case "DATE_TODAY":
+        case "DATE_YESTERDAY":
+        case "DATE_TOMORROW":
+        case "DATE_LAST_7_DAYS":
+        case "DATE_LAST_WEEK":
+        case "DATE_THIS_WEEK":
+        case "DATE_NEXT_WEEK":
+        case "DATE_LAST_MONTH":
+        case "DATE_THIS_MONTH":
+        case "DATE_NEXT_MONTH":
+            return [];
+        default:
+            return currentValues;
+    }
+};

package/dist/cjs/components/editors/embed-editor.d.ts

@@ -0,0 +1,19 @@
+import type { CellInterface, SelectionArea } from "@rowsncolumns/common-types";
+import type { SelectionAttributes } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import type { useSpreadsheetState } from "../../hooks/use-spreadsheet-state";
+export type EmbedEditorProps = {
+    sheetId: number;
+    activeCell: CellInterface;
+    selections: SelectionArea<SelectionAttributes>[];
+    onInsertImage: ReturnType<typeof useSpreadsheetState>["onInsertImage"];
+};
+/**
+ * Insert image editor
+ * @param param0
+ */
+export declare const EmbedEditor: ({ sheetId, activeCell, onInsertImage, }: EmbedEditorProps) => React.JSX.Element;
+export declare const EmbedEditorDialog: ({ children, }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+//# sourceMappingURL=embed-editor.d.ts.map

package/dist/cjs/components/editors/embed-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"embed-editor.d.ts","sourceRoot":"","sources":["../../../../components/editors/embed-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE/E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAkBrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAE7E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,aAAa,CAAC;IAC1B,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACjD,aAAa,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,eAAe,CAAC,CAAC;CACxE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,yCAIzB,gBAAgB,sBAyElB,CAAC;AAGF,eAAO,MAAM,iBAAiB,GAAI,eAE/B;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,sBA4BA,CAAC"}

package/dist/cjs/components/editors/embed-editor.js

@@ -0,0 +1,80 @@
+import { __read } from "tslib";
+import { Cross2Icon } from "@rowsncolumns/icons";
+import { useFocusSheet } from "@rowsncolumns/spreadsheet";
+import { Button, Dialog, DialogBody, DialogCloseButton, DialogContent, DialogTitle, Input, Stack, Tabs, TabsContent, TabsList, TabsTrigger, } from "@rowsncolumns/ui";
+import { useFormik } from "formik";
+import { useCallback } from "react";
+import React from "react";
+import { useEditingEmbed } from "../../atoms";
+import { useEditEmbedDialogState, useSetEditEmbedDialogState, } from "../../atoms/dialog-state.atom";
+/**
+ * Insert image editor
+ * @param param0
+ */
+export var EmbedEditor = function (_a) {
+    var sheetId = _a.sheetId, activeCell = _a.activeCell, onInsertImage = _a.onInsertImage;
+    var setEditDialogState = useSetEditEmbedDialogState();
+    var editingEmbed = useEditingEmbed();
+    var insertOverCells = true;
+    var closeDialog = function () {
+        setEditDialogState(false);
+    };
+    var _b = useFormik({
+        initialValues: {
+            file: undefined,
+            url: "",
+        },
+        onSubmit: function (_a) {
+            var file = _a.file, url = _a.url;
+            onInsertImage === null || onInsertImage === void 0 ? void 0 : onInsertImage(file !== null && file !== void 0 ? file : url, sheetId, activeCell, {
+                embedId: editingEmbed === null || editingEmbed === void 0 ? void 0 : editingEmbed.embedId,
+                insertOverCells: insertOverCells,
+            });
+            closeDialog();
+        },
+    }), handleSubmit = _b.handleSubmit, setFieldValue = _b.setFieldValue, handleChange = _b.handleChange, resetForm = _b.resetForm, values = _b.values;
+    var onCancelForm = function () {
+        resetForm();
+        closeDialog();
+    };
+    return (React.createElement("form", { onSubmit: handleSubmit },
+        React.createElement(Tabs, { defaultValue: "upload" },
+            React.createElement(TabsList, null,
+                React.createElement(TabsTrigger, { value: "upload" }, "Upload"),
+                React.createElement(TabsTrigger, { value: "link" }, "Link")),
+            React.createElement(TabsContent, { value: "upload" },
+                React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
+                    React.createElement("label", { className: "font-system text-sm" }, "Upload image"),
+                    React.createElement("input", { type: "file", accept: "image/*", title: "", onChange: function (e) {
+                            var _a;
+                            var file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+                            if (file)
+                                setFieldValue("file", file);
+                        } }))),
+            React.createElement(TabsContent, { value: "link" },
+                React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
+                    React.createElement("label", { className: "font-system text-sm" }, "URL"),
+                    React.createElement(Input, { type: "text", value: values.url, name: "url", onChange: handleChange, autoFocus: true })))),
+        React.createElement("div", { className: "flex gap-1 py-2" },
+            React.createElement(Button, { type: "submit", variant: "primary", size: "xs" }, "Save"),
+            React.createElement(Button, { size: "xs", onClick: onCancelForm, type: "button" }, "Cancel"))));
+};
+// Dialog
+export var EmbedEditorDialog = function (_a) {
+    var children = _a.children;
+    var _b = __read(useEditEmbedDialogState(), 2), isOpen = _b[0], onOpenChange = _b[1];
+    var focusSheet = useFocusSheet();
+    var closeDialog = useCallback(function () {
+        onOpenChange(false);
+    }, [onOpenChange]);
+    return (React.createElement(Dialog, { modal: false, open: isOpen },
+        React.createElement(DialogContent, { onEscapeKeyDown: closeDialog, onCloseAutoFocus: function (e) {
+                e.preventDefault();
+                // Todo. Why focus in closeDialog does not work?
+                focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+            } },
+            React.createElement(DialogTitle, { className: "rnc-drag-handle cursor-move" }, "Replace image"),
+            React.createElement(DialogBody, null, children),
+            React.createElement(DialogCloseButton, { onClick: closeDialog },
+                React.createElement(Cross2Icon, null)))));
+};

package/dist/cjs/components/editors/insert-image-editor.d.ts

@@ -0,0 +1,20 @@
+import type { CellInterface, SelectionArea } from "@rowsncolumns/common-types";
+import type { SelectionAttributes } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import type { useSpreadsheetState } from "../../hooks/use-spreadsheet-state";
+type InsertImageEditorProps = {
+    sheetId: number;
+    activeCell: CellInterface;
+    selections: SelectionArea<SelectionAttributes>[];
+    onInsertImage: ReturnType<typeof useSpreadsheetState>["onInsertImage"];
+};
+/**
+ * Insert image editor
+ * @param param0
+ */
+export declare const InsertImageEditor: ({ sheetId, activeCell, onInsertImage, }: InsertImageEditorProps) => React.JSX.Element;
+export declare const InsertImageDialog: ({ children, }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export {};
+//# sourceMappingURL=insert-image-editor.d.ts.map

package/dist/cjs/components/editors/insert-image-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"insert-image-editor.d.ts","sourceRoot":"","sources":["../../../../components/editors/insert-image-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE/E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAkBrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAE7E,KAAK,sBAAsB,GAAG;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,aAAa,CAAC;IAC1B,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACjD,aAAa,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,eAAe,CAAC,CAAC;CACxE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,yCAI/B,sBAAsB,sBAuExB,CAAC;AAGF,eAAO,MAAM,iBAAiB,GAAI,eAE/B;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,sBA4BA,CAAC"}