@rowsncolumns/spreadsheet-state 28.0.66

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

@@ -0,0 +1,160 @@
+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 const DataValidationEditor = ({ sheetId, dataValidations, functionDescriptions, idCreationStrategy, onDeleteRules, onDeleteRule, onCreateRule, onUpdateRule, }) => {
+    const [editingId, setEditingId] = useEditingDataValidationIdState();
+    // 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.
+    const [draftRule, setDraftRule] = useState();
+    const api = useSpreadsheetApi();
+    const { rangeToFormula } = useFormulaRangeHelpers({
+        sheetId,
+    });
+    const { sheetFilter, setSheetFilter, filterableSheetIds, visibleRules, showFilter, } = useSheetFilter(sheetId, dataValidations ?? []);
+    const onNewRule = () => {
+        const id = idCreationStrategy?.("data-validation") ?? uuid();
+        const activeCell = api?.getActiveSheet()?.getActiveCell();
+        const selections = api?.getActiveSheet()?.getSelections();
+        const 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,
+            ranges: finalSelections.map((sel) => ({
+                ...sel.range,
+                sheetId,
+            })),
+        });
+        setEditingId(id);
+    };
+    const onDuplicateRule = (rule) => {
+        const id = idCreationStrategy?.("data-validation") ?? uuid();
+        onCreateRule?.({
+            ...rule,
+            id,
+        });
+    };
+    const onSave = (rule, previousRule) => {
+        const 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.
+        const conditionType = rule.condition?.type;
+        const isNoneRule = !conditionType || conditionType === "NONE";
+        if (isDraft) {
+            if (!isNoneRule) {
+                onCreateRule?.(rule);
+            }
+            setDraftRule(undefined);
+        }
+        else if (isNoneRule) {
+            onDeleteRule(rule);
+        }
+        else {
+            onUpdateRule?.(rule, previousRule);
+        }
+        setEditingId(undefined);
+    };
+    const activeRule = useMemo(() => draftRule && draftRule.id === editingId
+        ? draftRule
+        : dataValidations?.find((rule) => 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.
+    const unmountCleanupRef = useRef({ editingId: undefined, draftId: undefined });
+    useEffect(() => {
+        unmountCleanupRef.current = { editingId, draftId: draftRule?.id };
+    }, [editingId, draftRule]);
+    useEffect(() => () => {
+        const { editingId, draftId } = unmountCleanupRef.current;
+        if (draftId !== undefined && editingId === draftId) {
+            setEditingId(undefined);
+        }
+    }, [setEditingId]);
+    const unMark = () => {
+        api?.unmark();
+    };
+    return (React.createElement(React.Fragment, null,
+        editingId && activeRule ? (React.createElement(DataValidationRuleEditor, { sheetId: sheetId, dataValidationRule: activeRule, key: editingId, onCancel: () => {
+                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((rule) => {
+                const label = CONDITION_LABELS.find((condition) => condition.condition === rule.condition?.type)?.label ?? rule.condition?.type;
+                const values = rule.condition?.values
+                    ?.map((value) => 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: () => {
+                        api?.mark?.(rule.ranges);
+                    }, onMouseLeave: () => {
+                        unMark();
+                    }, onFocusCapture: () => {
+                        api?.mark?.(rule.ranges);
+                    }, onBlurCapture: () => {
+                        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((range) => {
+                                const address = rangeToFormula(range);
+                                return (React.createElement("div", { key: address, className: "whitespace-nowrap" }, address));
+                            }))),
+                    React.createElement("div", null,
+                        React.createElement(IconButton, { tooltip: "Duplicate", onClick: () => onDuplicateRule(rule) },
+                            React.createElement(CopyIcon, null)),
+                        React.createElement(IconButton, { tooltip: "Edit", onClick: () => {
+                                unMark();
+                                setEditingId(rule.id);
+                            } },
+                            React.createElement(Pencil2Icon, null)),
+                        React.createElement(IconButton, { tooltip: "Delete", onClick: () => {
+                                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: () => onDeleteRules(visibleRules) }, "Remove all"))))));
+};
+export const DataValidationEditorDialog = ({ children, }) => {
+    const [isOpen, onOpenChange] = useDataValidationDialogState();
+    const focusSheet = useFocusSheet();
+    const closeDialog = useCallback(() => {
+        onOpenChange(false);
+        focusSheet?.();
+    }, [onOpenChange, focusSheet]);
+    return (React.createElement(Dialog, { modal: false, open: isOpen },
+        React.createElement(DialogContent, { onEscapeKeyDown: closeDialog, onCloseAutoFocus: (e) => 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/esm/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/esm/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/esm/components/editors/data-validation-rule-editor.js

@@ -0,0 +1,194 @@
+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 const DataValidationRuleEditor = ({ sheetId, dataValidationRule, functionDescriptions, idCreationStrategy, onCancel, onSubmit, }) => {
+    const ensureFormula = (value) => {
+        if (!value)
+            return undefined;
+        const trimmed = value.trim();
+        if (!trimmed)
+            return undefined;
+        return trimmed.startsWith("=") ? trimmed : `=${trimmed}`;
+    };
+    const getNamedRanges = useGetNamedRanges();
+    const { values, handleSubmit, resetForm, setFieldValue } = useFormik({
+        initialValues: dataValidationRule,
+        onSubmit(values) {
+            onSubmit?.(values, dataValidationRule);
+        },
+    });
+    // Cancel
+    const onCancelForm = () => {
+        onCancel?.();
+        resetForm();
+    };
+    const [showToValue, setShowToValue] = useState(() => shouldShowToValue(values.condition?.type ?? undefined));
+    const [showFromValue, setShowFromValue] = useState(() => shouldShowFromValue(values?.condition?.type ?? undefined));
+    const fromValue = values?.condition?.values?.[0]?.userEnteredValue;
+    const toValue = values?.condition?.values?.[1]?.userEnteredValue;
+    const updateDataValidationInputs = (nextFromValue, nextToValue, nextType = values?.condition?.type, includeToValue = showToValue, includeFromValue = showFromValue) => {
+        const shouldIncludeFrom = includeFromValue && nextFromValue !== undefined;
+        if (nextType === "CUSTOM_FORMULA") {
+            setFieldValue("condition.values", [
+                ...(shouldIncludeFrom
+                    ? [{ userEnteredValue: ensureFormula(nextFromValue) ?? "" }]
+                    : []),
+            ]);
+        }
+        else {
+            setFieldValue("condition.values", [
+                ...(shouldIncludeFrom
+                    ? [{ userEnteredValue: nextFromValue }]
+                    : []),
+                ...(includeToValue && nextToValue !== undefined
+                    ? [{ userEnteredValue: nextToValue }]
+                    : []),
+            ]);
+        }
+    };
+    useIsomorphicLayoutEffect(() => {
+        const showTo = shouldShowToValue(values?.condition?.type ?? undefined);
+        const showFrom = shouldShowFromValue(values?.condition?.type ?? undefined);
+        setShowToValue(showTo);
+        setShowFromValue(showFrom);
+        updateDataValidationInputs(fromValue, toValue, values?.condition?.type, showTo, showFrom);
+    }, [values?.condition?.type]);
+    const len = values.ranges.length;
+    // For id :(
+    // FormulaInput only supports defaultValue
+    // so a `value` change does not re-render it
+    const rangeValues = useMemo(() => values.ranges.map((range) => {
+        return {
+            ...range,
+            id: idCreationStrategy?.("data-validation") ?? 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(({ id }, idx) => {
+                const range = values.ranges[idx];
+                const 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: (parsed) => {
+                            setFieldValue(`ranges[${idx}]`, parsed);
+                        } }),
+                    React.createElement(IconButton, { type: "button", onClick: () => {
+                            setFieldValue("ranges", values.ranges.filter((value, i) => 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: () => {
+                        setFieldValue("ranges", [
+                            ...values.ranges,
+                            {
+                                startRowIndex: 1,
+                                endRowIndex: 1,
+                                startColumnIndex: 1,
+                                endColumnIndex: 1,
+                                sheetId,
+                            },
+                        ]);
+                    }, 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: values?.condition?.type ?? CONDITION_NONE, onValueChange: (value) => {
+                    const nextShowTo = shouldShowToValue(value);
+                    const nextShowFrom = shouldShowFromValue(value);
+                    setFieldValue("condition.type", value);
+                    const initialValues = getInitialDataValidationValues(value, values?.condition?.values ?? []);
+                    if (!initialValues?.length) {
+                        updateDataValidationInputs(undefined, undefined, value, false, false);
+                        return;
+                    }
+                    updateDataValidationInputs(initialValues?.[0]?.userEnteredValue, initialValues?.[1]?.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(({ condition, label }) => {
+                            return (React.createElement(SelectItem, { key: condition, value: condition }, label));
+                        }))))),
+        React.createElement(Stack, { direction: "vertical", className: "gap-1  pb-3" },
+            showFromValue ? (values.condition?.type === "CUSTOM_FORMULA" ||
+                values.condition?.type === "ONE_OF_RANGE" ? (React.createElement(FormulaInput, { onChange: (value) => updateDataValidationInputs(value, undefined, values.condition?.type ?? undefined, false, true), value: fromValue ?? "=", required: true, placeholder: "Enter a formula", autoFocus: true, functionDescriptions: functionDescriptions, getNamedRanges: getNamedRanges })) : (React.createElement(Input, { value: fromValue, type: "text", name: "fromValue", onChange: (e) => updateDataValidationInputs(e.target.value, toValue), className: "text-xs", placeholder: "Value or formula" }))) : null,
+            showToValue ? (React.createElement(Input, { value: toValue, type: "text", name: "toValue", onChange: (e) => 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: values.allowBlank ?? undefined, onChange: (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: (e) => {
+                    setFieldValue("inputMessage", e.target.checked ? values.inputMessage ?? {} : 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: values.inputMessage?.title ?? "", type: "text", name: "inputMessageTitle", onChange: (e) => setFieldValue("inputMessage.title", e.target.value), className: "text-xs", placeholder: "Title" }),
+            React.createElement(Input, { value: values.inputMessage?.message ?? "", type: "text", name: "inputMessageBody", onChange: (e) => 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: (e) => {
+                    setFieldValue("alert", e.target.checked ? values.alert ?? { 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: values.alert?.style ?? "stop", onValueChange: (value) => 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: values.alert?.message?.title ?? "", type: "text", name: "alertTitle", onChange: (e) => setFieldValue("alert.message.title", e.target.value), className: "text-xs", placeholder: "Title" }),
+            React.createElement(Input, { value: values.alert?.message?.message ?? "", type: "text", name: "alertBody", onChange: (e) => 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"))));
+};
+const DataValidationRangeInput = ({ sheetId, range, autoFocus, onValidRange, }) => {
+    const formulaInput = useFormulaInputState(sheetId, range);
+    return (React.createElement(FormulaInput, { onChange: (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
+ */
+const getInitialDataValidationValues = (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/esm/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/esm/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/esm/components/editors/embed-editor.js

@@ -0,0 +1,75 @@
+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 const EmbedEditor = ({ sheetId, activeCell, onInsertImage, }) => {
+    const setEditDialogState = useSetEditEmbedDialogState();
+    const editingEmbed = useEditingEmbed();
+    const insertOverCells = true;
+    const closeDialog = () => {
+        setEditDialogState(false);
+    };
+    const { handleSubmit, setFieldValue, handleChange, resetForm, values } = useFormik({
+        initialValues: {
+            file: undefined,
+            url: "",
+        },
+        onSubmit({ file, url }) {
+            onInsertImage?.(file ?? url, sheetId, activeCell, {
+                embedId: editingEmbed?.embedId,
+                insertOverCells,
+            });
+            closeDialog();
+        },
+    });
+    const onCancelForm = () => {
+        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: (e) => {
+                            const file = e.target.files?.[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 const EmbedEditorDialog = ({ children, }) => {
+    const [isOpen, onOpenChange] = useEditEmbedDialogState();
+    const focusSheet = useFocusSheet();
+    const closeDialog = useCallback(() => {
+        onOpenChange(false);
+    }, [onOpenChange]);
+    return (React.createElement(Dialog, { modal: false, open: isOpen },
+        React.createElement(DialogContent, { onEscapeKeyDown: closeDialog, onCloseAutoFocus: (e) => {
+                e.preventDefault();
+                // Todo. Why focus in closeDialog does not work?
+                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/esm/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/esm/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"}

package/dist/esm/components/editors/insert-image-editor.js

@@ -0,0 +1,73 @@
+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 { useInsertImageDialogState, useSetInsertImageDialogState, } from "../../atoms/dialog-state.atom";
+import { useInsertImageOverCellsState } from "../../atoms/insert-image-state.atom";
+/**
+ * Insert image editor
+ * @param param0
+ */
+export const InsertImageEditor = ({ sheetId, activeCell, onInsertImage, }) => {
+    const setInsertImageDialogState = useSetInsertImageDialogState();
+    const insertImageOverCells = useInsertImageOverCellsState();
+    const closeDialog = () => {
+        setInsertImageDialogState(false);
+    };
+    const { handleSubmit, setFieldValue, handleChange, resetForm, values } = useFormik({
+        initialValues: {
+            file: undefined,
+            url: "",
+        },
+        onSubmit({ file, url }) {
+            onInsertImage?.(file ?? url, sheetId, activeCell, {
+                insertOverCells: insertImageOverCells,
+            });
+            closeDialog();
+        },
+    });
+    const onCancelForm = () => {
+        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: (e) => {
+                            const file = e.target.files?.[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 const InsertImageDialog = ({ children, }) => {
+    const [isOpen, onOpenChange] = useInsertImageDialogState();
+    const focusSheet = useFocusSheet();
+    const closeDialog = useCallback(() => {
+        onOpenChange(false);
+    }, [onOpenChange]);
+    return (React.createElement(Dialog, { modal: false, open: isOpen },
+        React.createElement(DialogContent, { onEscapeKeyDown: closeDialog, onCloseAutoFocus: (e) => {
+                e.preventDefault();
+                // Todo. Why focus in closeDialog does not work?
+                focusSheet?.();
+            } },
+            React.createElement(DialogTitle, { className: "rnc-drag-handle cursor-move" }, "Insert image"),
+            React.createElement(DialogBody, null, children),
+            React.createElement(DialogCloseButton, { onClick: closeDialog },
+                React.createElement(Cross2Icon, null)))));
+};

package/dist/esm/components/editors/insert-link-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 InsertLinkEditorProps = {
+    sheetId: number;
+    activeCell: CellInterface;
+    selections: SelectionArea<SelectionAttributes>[];
+    onInsertLink: ReturnType<typeof useSpreadsheetState>["onInsertLink"];
+};
+/**
+ * Insert image editor
+ * @param param0
+ */
+export declare const InsertLinkEditor: ({ sheetId, activeCell, selections, onInsertLink, }: InsertLinkEditorProps) => React.JSX.Element;
+export declare const InsertLinkDialog: ({ children, }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export {};
+//# sourceMappingURL=insert-link-editor.d.ts.map

package/dist/esm/components/editors/insert-link-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"insert-link-editor.d.ts","sourceRoot":"","sources":["../../../../components/editors/insert-link-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;AAcrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAE7E,KAAK,qBAAqB,GAAG;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,aAAa,CAAC;IAC1B,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACjD,YAAY,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,cAAc,CAAC,CAAC;CACtE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,oDAK9B,qBAAqB,sBAwDvB,CAAC;AAGF,eAAO,MAAM,gBAAgB,GAAI,eAE9B;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,sBA4BA,CAAC"}