@rowsncolumns/spreadsheet-state 28.0.66

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

@@ -0,0 +1,78 @@
+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 { useInsertImageDialogState, useSetInsertImageDialogState, } from "../../atoms/dialog-state.atom";
+import { useInsertImageOverCellsState } from "../../atoms/insert-image-state.atom";
+/**
+ * Insert image editor
+ * @param param0
+ */
+export var InsertImageEditor = function (_a) {
+    var sheetId = _a.sheetId, activeCell = _a.activeCell, onInsertImage = _a.onInsertImage;
+    var setInsertImageDialogState = useSetInsertImageDialogState();
+    var insertImageOverCells = useInsertImageOverCellsState();
+    var closeDialog = function () {
+        setInsertImageDialogState(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, {
+                insertOverCells: insertImageOverCells,
+            });
+            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 InsertImageDialog = function (_a) {
+    var children = _a.children;
+    var _b = __read(useInsertImageDialogState(), 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" }, "Insert image"),
+            React.createElement(DialogBody, null, children),
+            React.createElement(DialogCloseButton, { onClick: closeDialog },
+                React.createElement(Cross2Icon, null)))));
+};

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

package/dist/cjs/components/editors/insert-link-editor.js

@@ -0,0 +1,64 @@
+import { __read } from "tslib";
+import { Cross2Icon } from "@rowsncolumns/icons";
+import { useFocusSheet } from "@rowsncolumns/spreadsheet";
+import { Button, Dialog, DialogBody, DialogCloseButton, DialogContent, DialogTitle, Input, Stack, } from "@rowsncolumns/ui";
+import { useFormik } from "formik";
+import { useCallback } from "react";
+import React from "react";
+import { useInsertLinkDialogState, useSetInsertLinkDialogState, } from "../../atoms/dialog-state.atom";
+/**
+ * Insert image editor
+ * @param param0
+ */
+export var InsertLinkEditor = function (_a) {
+    var sheetId = _a.sheetId, activeCell = _a.activeCell, selections = _a.selections, onInsertLink = _a.onInsertLink;
+    var setInsertLinkDialogState = useSetInsertLinkDialogState();
+    var closeDialog = function () {
+        setInsertLinkDialogState(false);
+    };
+    var _b = useFormik({
+        initialValues: {
+            title: "",
+            url: "",
+        },
+        onSubmit: function (_a) {
+            var title = _a.title, url = _a.url;
+            onInsertLink === null || onInsertLink === void 0 ? void 0 : onInsertLink(sheetId, activeCell, selections, url, title);
+            // Close dialog
+            closeDialog();
+        },
+    }), handleSubmit = _b.handleSubmit, handleChange = _b.handleChange, resetForm = _b.resetForm, values = _b.values;
+    var onCancelForm = function () {
+        resetForm();
+        closeDialog();
+    };
+    return (React.createElement("form", { onSubmit: handleSubmit },
+        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, required: true, autoFocus: true })),
+        React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
+            React.createElement("label", { className: "font-system text-sm" }, "Title"),
+            React.createElement(Input, { type: "text", value: values.title, name: "title", onChange: handleChange })),
+        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 InsertLinkDialog = function (_a) {
+    var children = _a.children;
+    var _b = __read(useInsertLinkDialogState(), 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) {
+                e.preventDefault();
+                focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+            } },
+            React.createElement(DialogTitle, { className: "rnc-drag-handle cursor-move" }, "Insert link"),
+            React.createElement(DialogBody, null, children),
+            React.createElement(DialogCloseButton, { onClick: closeDialog },
+                React.createElement(Cross2Icon, null)))));
+};

package/dist/cjs/components/editors/named-range-editor.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { UseSpreadsheetProps, useSpreadsheetState } from "../../hooks/use-spreadsheet-state";
+export type NamedRangeEditorProps = {
+    sheetId: number;
+    onUpdateNamedRange?: ReturnType<typeof useSpreadsheetState>["onUpdateNamedRange"];
+    onCreateNamedRange?: ReturnType<typeof useSpreadsheetState>["onCreateNamedRange"];
+    /**
+     * Id creation strategy
+     */
+    idCreationStrategy?: UseSpreadsheetProps["idCreationStrategy"];
+};
+export declare const NamedRangeEditor: ({ sheetId, idCreationStrategy, onCreateNamedRange, onUpdateNamedRange, }: NamedRangeEditorProps) => React.JSX.Element;
+//# sourceMappingURL=named-range-editor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"named-range-editor.d.ts","sourceRoot":"","sources":["../../../../components/editors/named-range-editor.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,KAAK,EACV,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,mCAAmC,CAAC;AAE3C,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,UAAU,CAC7B,OAAO,mBAAmB,CAC3B,CAAC,oBAAoB,CAAC,CAAC;IACxB,kBAAkB,CAAC,EAAE,UAAU,CAC7B,OAAO,mBAAmB,CAC3B,CAAC,oBAAoB,CAAC,CAAC;IACxB;;OAEG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;CAChE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,0EAK9B,qBAAqB,sBAqEvB,CAAC"}

package/dist/cjs/components/editors/named-range-editor.js

@@ -0,0 +1,106 @@
+import { __assign, __read } from "tslib";
+import { Cross2Icon } from "@rowsncolumns/icons";
+import { FormulaInput, useFormulaRangeHelpers, useSetFormulaMode, useSetFormulaSelections, } from "@rowsncolumns/spreadsheet";
+import { Button, Dialog, DialogBody, DialogCloseButton, DialogContent, DialogTitle, Input, Stack, } from "@rowsncolumns/ui";
+import { isAFormula, uuid } from "@rowsncolumns/utils";
+import { useFormik } from "formik";
+import React, { useCallback } from "react";
+import { useEditNamedRangeDialogState } from "../../atoms/dialog-state.atom";
+import { useEditingNamedRange } from "../../atoms/named-range.atom";
+export var NamedRangeEditor = function (_a) {
+    var sheetId = _a.sheetId, idCreationStrategy = _a.idCreationStrategy, onCreateNamedRange = _a.onCreateNamedRange, onUpdateNamedRange = _a.onUpdateNamedRange;
+    var _b = __read(useEditNamedRangeDialogState(), 2), isOpen = _b[0], onOpenChange = _b[1];
+    var setFormulaMode = useSetFormulaMode();
+    var setFormulaSelections = useSetFormulaSelections();
+    // Close dialog, clear formula
+    var closeDialog = useCallback(function () {
+        setFormulaMode(false);
+        setFormulaSelections([]);
+        onOpenChange(false);
+    }, [setFormulaMode, setFormulaSelections, onOpenChange]);
+    var namedRange = useEditingNamedRange();
+    // Just a simple way to check if we are updating or creating new named range
+    var isCreatingNewNamedRange = (namedRange === null || namedRange === void 0 ? void 0 : namedRange.namedRangeId) === "new";
+    var handleSubmit = useCallback(function (sheetId, newNamedRange, previousNamedRange) {
+        var _a;
+        if (isCreatingNewNamedRange) {
+            onCreateNamedRange === null || onCreateNamedRange === void 0 ? void 0 : onCreateNamedRange(sheetId, __assign(__assign({}, newNamedRange), { namedRangeId: (_a = idCreationStrategy === null || idCreationStrategy === void 0 ? void 0 : idCreationStrategy("named-range")) !== null && _a !== void 0 ? _a : uuid() }));
+        }
+        else if (previousNamedRange) {
+            onUpdateNamedRange === null || onUpdateNamedRange === void 0 ? void 0 : onUpdateNamedRange(sheetId, newNamedRange, previousNamedRange);
+        }
+        closeDialog();
+    }, [
+        idCreationStrategy,
+        isCreatingNewNamedRange,
+        onCreateNamedRange,
+        onUpdateNamedRange,
+        closeDialog,
+    ]);
+    return (React.createElement(Dialog, { modal: false, open: isOpen },
+        React.createElement(DialogContent, { onEscapeKeyDown: closeDialog },
+            React.createElement(DialogTitle, { className: "rnc-drag-handle cursor-move" }, isCreatingNewNamedRange
+                ? "Define new named range"
+                : "Update named range"),
+            React.createElement(DialogBody, null, namedRange ? (React.createElement(NamedRangeEditorForm, { onSubmit: handleSubmit, namedRange: namedRange, sheetId: sheetId, onCancel: closeDialog })) : null),
+            React.createElement(DialogCloseButton, { onClick: function () {
+                    closeDialog();
+                } },
+                React.createElement(Cross2Icon, null)))));
+};
+var NamedRangeEditorForm = function (_a) {
+    var namedRange = _a.namedRange, sheetId = _a.sheetId, onSubmit = _a.onSubmit, onCancel = _a.onCancel;
+    var _b = useFormulaRangeHelpers({
+        sheetId: sheetId,
+    }), formulaToRange = _b.formulaToRange, rangeToAddress = _b.rangeToAddress;
+    var _c = useFormik({
+        initialValues: namedRange,
+        enableReinitialize: true,
+        onSubmit: function (values) {
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(sheetId, values, namedRange);
+        },
+    }), _d = _c.values, name = _d.name, range = _d.range, value = _d.value, handleChange = _c.handleChange, handleSubmit = _c.handleSubmit, setFieldValue = _c.setFieldValue, resetForm = _c.resetForm;
+    // Formula
+    var isFormula = !range && isAFormula(value);
+    var isStatic = !range && !isFormula;
+    var isRange = !!range;
+    return (React.createElement("form", { onSubmit: handleSubmit, className: "m-0 p-0" },
+        React.createElement(Stack, { direction: "vertical", className: "pb-2 gap-2" },
+            React.createElement(Stack, { direction: "vertical", className: "gap-1" },
+                React.createElement("label", { className: "font-system text-sm" }, "Name"),
+                React.createElement(Input, { value: name, required: true, name: "name", pattern: "[^\\s]+", onChange: handleChange, title: "Name should not contain spaces.", autoFocus: true })),
+            React.createElement(Stack, { direction: "vertical", className: "gap-1" },
+                React.createElement("label", { className: "font-system text-sm" }, "Type"),
+                React.createElement("div", { className: "flex gap-2" },
+                    React.createElement("label", { className: "font-system text-sm" },
+                        React.createElement("input", { type: "radio", name: "rangetype", checked: isRange, onChange: function (e) {
+                                setFieldValue("range", {
+                                    startRowIndex: 1,
+                                    endRowIndex: 1,
+                                    startColumnIndex: 1,
+                                    endColumnIndex: 1,
+                                    sheetId: sheetId,
+                                });
+                                setFieldValue("value", null);
+                            } }),
+                        "Range"),
+                    React.createElement("label", { className: "font-system text-sm" },
+                        React.createElement("input", { type: "radio", name: "rangetype", checked: isStatic || isFormula, onChange: function (e) {
+                                setFieldValue("range", null);
+                                setFieldValue("value", isFormula ? "=" : "");
+                            } }),
+                        "Text or Formula"))),
+            isRange ? (React.createElement(Stack, { direction: "vertical", className: "gap-1" },
+                React.createElement("label", { className: "font-system text-sm" }, "Where is the location of the named range?"),
+                React.createElement(FormulaInput, { onChange: function (value) {
+                        return setFieldValue("range", formulaToRange(value));
+                    }, value: rangeToAddress(range), required: true }))) : (React.createElement(Stack, { direction: "vertical", className: "gap-1" },
+                React.createElement("label", { className: "font-system text-sm" }, "Enter text or formula"),
+                React.createElement(FormulaInput, { onChange: function (value) { return setFieldValue("value", value); }, value: String(value), required: true })))),
+        React.createElement("div", { className: "flex gap-1 pt-2" },
+            React.createElement(Button, { type: "submit", variant: "primary", size: "xs" }, "Save"),
+            React.createElement(Button, { size: "xs", onClick: function () {
+                    resetForm();
+                    onCancel();
+                }, type: "button" }, "Cancel"))));
+};

package/dist/cjs/components/editors/resize-dimension-editor.d.ts

@@ -0,0 +1,9 @@
+import type { CanvasGridProps, CellData } from "@rowsncolumns/spreadsheet";
+import React from "react";
+type ResizeDimension<T extends CellData> = {
+    onResize: CanvasGridProps<T>["onResize"];
+    onAutoResize: CanvasGridProps<T>["onAutoResize"];
+};
+export declare const ResizeDimensionEditor: <T extends CellData>(props: ResizeDimension<T>) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=resize-dimension-editor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resize-dimension-editor.d.ts","sourceRoot":"","sources":["../../../../components/editors/resize-dimension-editor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAe3E,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,KAAK,eAAe,CAAC,CAAC,SAAS,QAAQ,IAAI;IACzC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IACzC,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;CAClD,CAAC;AAqGF,eAAO,MAAM,qBAAqB,GAAI,CAAC,SAAS,QAAQ,EACtD,OAAO,eAAe,CAAC,CAAC,CAAC,6BAO1B,CAAC"}

package/dist/cjs/components/editors/resize-dimension-editor.js

@@ -0,0 +1,62 @@
+import { __assign, __read } from "tslib";
+import { Cross2Icon } from "@rowsncolumns/icons";
+import { generateMultiDimTitle, } from "@rowsncolumns/spreadsheet";
+import { useSpreadsheetApi } from "@rowsncolumns/spreadsheet";
+import { Button, Dialog, DialogBody, DialogCloseButton, DialogContent, DialogTitle, Input, Stack, } from "@rowsncolumns/ui";
+import React from "react";
+import { useResizeDimensionDialogState } from "../../atoms/dialog-state.atom";
+import { useResizeDimensionValue } from "../../atoms/resize-dimension.atom";
+var ResizeDimensionWrapper = function (_a) {
+    var onResize = _a.onResize, onAutoResize = _a.onAutoResize, sheetId = _a.sheetId, indexes = _a.indexes, axis = _a.axis;
+    var _b = __read(useResizeDimensionDialogState(), 2), isOpen = _b[0], onOpenChange = _b[1];
+    var closeDialog = function () { return onOpenChange(false); };
+    var api = useSpreadsheetApi();
+    var defaultDimension = axis === "y"
+        ? api === null || api === void 0 ? void 0 : api.getSheet(sheetId).getColumnWidth(indexes[0])
+        : api === null || api === void 0 ? void 0 : api.getSheet(sheetId).getRowHeight(indexes[0]);
+    var onSubmit = function (event) {
+        event.preventDefault();
+        var formData = new FormData(event.target);
+        var option = formData.get("resize-option");
+        var customWidth = formData.get("width");
+        if (option === "autofit") {
+            onAutoResize === null || onAutoResize === void 0 ? void 0 : onAutoResize(sheetId, indexes, axis);
+        }
+        else {
+            onResize === null || onResize === void 0 ? void 0 : onResize(sheetId, indexes, customWidth, axis, option === "autofit");
+        }
+        closeDialog();
+    };
+    return (React.createElement(Dialog, { modal: false, open: isOpen, onOpenChange: onOpenChange },
+        React.createElement(DialogContent, null,
+            React.createElement(DialogTitle, { className: "rnc-drag-handle cursor-move" },
+                "Resize ",
+                axis === "y" ? "column" : "row",
+                " ",
+                generateMultiDimTitle(indexes, axis)),
+            React.createElement(DialogBody, null,
+                React.createElement("form", { onSubmit: onSubmit },
+                    React.createElement(Stack, { direction: "vertical", className: "pb-2 gap-4" },
+                        React.createElement("div", null,
+                            React.createElement("label", { className: "font-system text-sm flex items-center gap-1 mb-2" },
+                                React.createElement("input", { className: "m-0", type: "radio", name: "resize-option", value: "custom", defaultChecked: true }),
+                                axis === "y"
+                                    ? "Enter new column width in pixels"
+                                    : "Enter new row height in pixels"),
+                            React.createElement(Input, { type: "number", name: "width", autoFocus: true, defaultValue: defaultDimension })),
+                        React.createElement("label", { className: "font-system text-sm items-center flex gap-1" },
+                            React.createElement("input", { className: "m-0", type: "radio", name: "resize-option", value: "autofit" }),
+                            "Auto fit to data")),
+                    React.createElement("div", { className: "flex gap-1 pt-2" },
+                        React.createElement(Button, { type: "submit", variant: "primary", size: "xs" }, "Save"),
+                        React.createElement(Button, { size: "xs", onClick: closeDialog, type: "button" }, "Cancel")))),
+            React.createElement(DialogCloseButton, { onClick: closeDialog },
+                React.createElement(Cross2Icon, null)))));
+};
+export var ResizeDimensionEditor = function (props) {
+    var resizeDimension = useResizeDimensionValue();
+    if (resizeDimension) {
+        return React.createElement(ResizeDimensionWrapper, __assign({}, resizeDimension, props));
+    }
+    return null;
+};

package/dist/cjs/components/editors/sheet-filter.d.ts

@@ -0,0 +1,59 @@
+import React from "react";
+/**
+ * "all", or a specific sheet id a rule list is narrowed to.
+ */
+export type SheetFilter = number | "all";
+type RuleWithRanges = {
+    ranges?: {
+        sheetId?: number;
+    }[];
+};
+/**
+ * A rule belongs to a sheet when any of its ranges targets that sheet.
+ */
+export declare function filterRulesBySheet<T extends RuleWithRanges>(rules: T[], filter: SheetFilter): T[];
+/**
+ * Sheet ids that appear in at least one rule's ranges, in first-seen order.
+ */
+export declare function getSheetIdsWithRules(rules: RuleWithRanges[]): number[];
+/**
+ * Whether the rule list is worth offering a sheet filter for.
+ *
+ * Keyed off rules existing at all, NOT off how many sheets carry them: the latter made the control
+ * appear on some tabs and not others purely from where the rules happened to sit (all rules on the
+ * active sheet → one id → hidden; standing on a sheet with none → active sheet added → shown). That
+ * moved the dialog's contents between tabs and, because the list is scoped to the active sheet, it
+ * removed the only route to "All sheets" exactly when the user could not already see every rule.
+ *
+ * An empty workbook still gets no control — every choice would show the same nothing. Once the user
+ * has widened the view, it stays visible so they can get back.
+ */
+export declare function shouldShowSheetFilter({ ruleCount, sheetFilter, sheetId, }: {
+    ruleCount: number;
+    sheetFilter: SheetFilter;
+    sheetId: number;
+}): boolean;
+/**
+ * Rule lists (conditional formats, data validations) are scoped to the active
+ * sheet by default; the SheetFilterSelect widens the view to any sheet with
+ * rules, or all sheets. Follows the active sheet if the user switches sheets
+ * while the dialog is open.
+ */
+export declare function useSheetFilter<T extends RuleWithRanges>(sheetId: number, rules: T[]): {
+    sheetFilter: SheetFilter;
+    setSheetFilter: React.Dispatch<React.SetStateAction<SheetFilter>>;
+    filterableSheetIds: number[];
+    visibleRules: T[];
+    showFilter: boolean;
+};
+export declare const SheetFilterSelect: ({ value, sheetIds, onValueChange, }: {
+    value: SheetFilter;
+    sheetIds: number[];
+    onValueChange: (value: SheetFilter) => void;
+}) => React.JSX.Element;
+export declare const SheetFilterEmptyState: ({ sheetFilter, label, }: {
+    sheetFilter: SheetFilter;
+    label: string;
+}) => React.JSX.Element;
+export {};
+//# sourceMappingURL=sheet-filter.d.ts.map

package/dist/cjs/components/editors/sheet-filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-filter.d.ts","sourceRoot":"","sources":["../../../../components/editors/sheet-filter.tsx"],"names":[],"mappings":"AASA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,KAAK,CAAC;AAEzC,KAAK,cAAc,GAAG;IACpB,MAAM,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACjC,CAAC;AAEF;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,cAAc,EACzD,KAAK,EAAE,CAAC,EAAE,EACV,MAAM,EAAE,WAAW,GAClB,CAAC,EAAE,CAML;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,MAAM,EAAE,CAUtE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,WAAW,EACX,OAAO,GACR,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,WAAW,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB,GAAG,OAAO,CAEV;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,EACrD,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,CAAC,EAAE;;;;;;EA+BX;AAED,eAAO,MAAM,iBAAiB,GAAI,qCAI/B;IACD,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,aAAa,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CAC7C,sBA6BA,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,yBAGnC;IACD,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;CACf,sBAKA,CAAC"}

package/dist/cjs/components/editors/sheet-filter.js

@@ -0,0 +1,119 @@
+import { __read, __spreadArray, __values } from "tslib";
+import { useGetSheetName } from "@rowsncolumns/spreadsheet";
+import { Select, SelectContent, SelectItem, SelectPortal, SelectTrigger, SelectValue, } from "@rowsncolumns/ui";
+import React, { useEffect, useMemo, useState } from "react";
+/**
+ * A rule belongs to a sheet when any of its ranges targets that sheet.
+ */
+export function filterRulesBySheet(rules, filter) {
+    return filter === "all"
+        ? rules
+        : rules.filter(function (rule) { var _a; return (_a = rule.ranges) === null || _a === void 0 ? void 0 : _a.some(function (range) { return range.sheetId === filter; }); });
+}
+/**
+ * Sheet ids that appear in at least one rule's ranges, in first-seen order.
+ */
+export function getSheetIdsWithRules(rules) {
+    var e_1, _a, e_2, _b;
+    var _c;
+    var ids = new Set();
+    try {
+        for (var rules_1 = __values(rules), rules_1_1 = rules_1.next(); !rules_1_1.done; rules_1_1 = rules_1.next()) {
+            var rule = rules_1_1.value;
+            try {
+                for (var _d = (e_2 = void 0, __values((_c = rule.ranges) !== null && _c !== void 0 ? _c : [])), _e = _d.next(); !_e.done; _e = _d.next()) {
+                    var range = _e.value;
+                    if (typeof range.sheetId === "number") {
+                        ids.add(range.sheetId);
+                    }
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_e && !_e.done && (_b = _d.return)) _b.call(_d);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (rules_1_1 && !rules_1_1.done && (_a = rules_1.return)) _a.call(rules_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return Array.from(ids);
+}
+/**
+ * Whether the rule list is worth offering a sheet filter for.
+ *
+ * Keyed off rules existing at all, NOT off how many sheets carry them: the latter made the control
+ * appear on some tabs and not others purely from where the rules happened to sit (all rules on the
+ * active sheet → one id → hidden; standing on a sheet with none → active sheet added → shown). That
+ * moved the dialog's contents between tabs and, because the list is scoped to the active sheet, it
+ * removed the only route to "All sheets" exactly when the user could not already see every rule.
+ *
+ * An empty workbook still gets no control — every choice would show the same nothing. Once the user
+ * has widened the view, it stays visible so they can get back.
+ */
+export function shouldShowSheetFilter(_a) {
+    var ruleCount = _a.ruleCount, sheetFilter = _a.sheetFilter, sheetId = _a.sheetId;
+    return ruleCount > 0 || sheetFilter !== sheetId;
+}
+/**
+ * Rule lists (conditional formats, data validations) are scoped to the active
+ * sheet by default; the SheetFilterSelect widens the view to any sheet with
+ * rules, or all sheets. Follows the active sheet if the user switches sheets
+ * while the dialog is open.
+ */
+export function useSheetFilter(sheetId, rules) {
+    var _a = __read(useState(sheetId), 2), sheetFilter = _a[0], setSheetFilter = _a[1];
+    useEffect(function () {
+        setSheetFilter(sheetId);
+    }, [sheetId]);
+    var filterableSheetIds = useMemo(function () {
+        var ids = getSheetIdsWithRules(rules);
+        // The active sheet is always offered, even before it has rules.
+        return ids.includes(sheetId) ? ids : __spreadArray([sheetId], __read(ids), false);
+    }, [rules, sheetId]);
+    var visibleRules = useMemo(function () { return filterRulesBySheet(rules, sheetFilter); }, [rules, sheetFilter]);
+    var showFilter = shouldShowSheetFilter({
+        ruleCount: rules.length,
+        sheetFilter: sheetFilter,
+        sheetId: sheetId,
+    });
+    return {
+        sheetFilter: sheetFilter,
+        setSheetFilter: setSheetFilter,
+        filterableSheetIds: filterableSheetIds,
+        visibleRules: visibleRules,
+        showFilter: showFilter,
+    };
+}
+export var SheetFilterSelect = function (_a) {
+    var value = _a.value, sheetIds = _a.sheetIds, onValueChange = _a.onValueChange;
+    var getSheetName = useGetSheetName();
+    return (React.createElement("div", { className: "flex items-center gap-2 p-2 text-sm border-0 border-solid border-b border-rnc-border" },
+        React.createElement("label", { className: "text-rnc-muted-foreground whitespace-nowrap" }, "Show rules for"),
+        React.createElement(Select, { value: value === "all" ? "all" : String(value), onValueChange: function (next) {
+                onValueChange(next === "all" ? "all" : Number(next));
+            } },
+            React.createElement(SelectTrigger, { className: "text-sm" },
+                React.createElement(SelectValue, null)),
+            React.createElement(SelectPortal, null,
+                React.createElement(SelectContent, null,
+                    React.createElement(SelectItem, { value: "all" }, "All sheets"),
+                    sheetIds.map(function (id) {
+                        var _a;
+                        return (React.createElement(SelectItem, { key: id, value: String(id) }, (_a = getSheetName === null || getSheetName === void 0 ? void 0 : getSheetName(id)) !== null && _a !== void 0 ? _a : "Sheet ".concat(id)));
+                    }))))));
+};
+export var SheetFilterEmptyState = function (_a) {
+    var sheetFilter = _a.sheetFilter, label = _a.label;
+    return (React.createElement("div", { className: "p-4 text-sm text-rnc-muted-foreground text-center" },
+        "No ",
+        label,
+        sheetFilter === "all" ? "" : " in this sheet"));
+};

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

@@ -0,0 +1,12 @@
+import type { SpreadsheetTheme } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import type { useSpreadsheetState } from "../../hooks/use-spreadsheet-state";
+type TableEditorProps = {
+    sheetId: number;
+    theme: SpreadsheetTheme;
+    onSubmit: ReturnType<typeof useSpreadsheetState>["onUpdateTable"];
+    onRemoveTable?: ReturnType<typeof useSpreadsheetState>["onRemoveTable"];
+};
+export declare const TableEditor: ({ sheetId, theme, onSubmit, onRemoveTable, }: TableEditorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=table-editor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-editor.d.ts","sourceRoot":"","sources":["../../../../components/editors/table-editor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAa,MAAM,2BAA2B,CAAC;AAqB7E,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAG7E,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,eAAe,CAAC,CAAC;IAClE,aAAa,CAAC,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,eAAe,CAAC,CAAC;CACzE,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,8CAKzB,gBAAgB,sBA2DlB,CAAC"}