@rowsncolumns/spreadsheet-state 28.0.66

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

@@ -0,0 +1,60 @@
+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 const InsertLinkEditor = ({ sheetId, activeCell, selections, onInsertLink, }) => {
+    const setInsertLinkDialogState = useSetInsertLinkDialogState();
+    const closeDialog = () => {
+        setInsertLinkDialogState(false);
+    };
+    const { handleSubmit, handleChange, resetForm, values } = useFormik({
+        initialValues: {
+            title: "",
+            url: "",
+        },
+        onSubmit({ title, url }) {
+            onInsertLink?.(sheetId, activeCell, selections, url, title);
+            // Close dialog
+            closeDialog();
+        },
+    });
+    const onCancelForm = () => {
+        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 const InsertLinkDialog = ({ children, }) => {
+    const [isOpen, onOpenChange] = useInsertLinkDialogState();
+    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();
+                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/esm/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/esm/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/esm/components/editors/named-range-editor.js

@@ -0,0 +1,103 @@
+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 const NamedRangeEditor = ({ sheetId, idCreationStrategy, onCreateNamedRange, onUpdateNamedRange, }) => {
+    const [isOpen, onOpenChange] = useEditNamedRangeDialogState();
+    const setFormulaMode = useSetFormulaMode();
+    const setFormulaSelections = useSetFormulaSelections();
+    // Close dialog, clear formula
+    const closeDialog = useCallback(() => {
+        setFormulaMode(false);
+        setFormulaSelections([]);
+        onOpenChange(false);
+    }, [setFormulaMode, setFormulaSelections, onOpenChange]);
+    const namedRange = useEditingNamedRange();
+    // Just a simple way to check if we are updating or creating new named range
+    const isCreatingNewNamedRange = namedRange?.namedRangeId === "new";
+    const handleSubmit = useCallback((sheetId, newNamedRange, previousNamedRange) => {
+        if (isCreatingNewNamedRange) {
+            onCreateNamedRange?.(sheetId, {
+                ...newNamedRange,
+                namedRangeId: idCreationStrategy?.("named-range") ?? uuid(),
+            });
+        }
+        else if (previousNamedRange) {
+            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: () => {
+                    closeDialog();
+                } },
+                React.createElement(Cross2Icon, null)))));
+};
+const NamedRangeEditorForm = ({ namedRange, sheetId, onSubmit, onCancel, }) => {
+    const { formulaToRange, rangeToAddress } = useFormulaRangeHelpers({
+        sheetId,
+    });
+    const { values: { name, range, value }, handleChange, handleSubmit, setFieldValue, resetForm, } = useFormik({
+        initialValues: namedRange,
+        enableReinitialize: true,
+        onSubmit(values) {
+            onSubmit?.(sheetId, values, namedRange);
+        },
+    });
+    // Formula
+    const isFormula = !range && isAFormula(value);
+    const isStatic = !range && !isFormula;
+    const 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: (e) => {
+                                setFieldValue("range", {
+                                    startRowIndex: 1,
+                                    endRowIndex: 1,
+                                    startColumnIndex: 1,
+                                    endColumnIndex: 1,
+                                    sheetId,
+                                });
+                                setFieldValue("value", null);
+                            } }),
+                        "Range"),
+                    React.createElement("label", { className: "font-system text-sm" },
+                        React.createElement("input", { type: "radio", name: "rangetype", checked: isStatic || isFormula, onChange: (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: (value) => 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: (value) => 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: () => {
+                    resetForm();
+                    onCancel();
+                }, type: "button" }, "Cancel"))));
+};

package/dist/esm/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/esm/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/esm/components/editors/resize-dimension-editor.js

@@ -0,0 +1,60 @@
+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";
+const ResizeDimensionWrapper = ({ onResize, onAutoResize, sheetId, indexes, axis, }) => {
+    const [isOpen, onOpenChange] = useResizeDimensionDialogState();
+    const closeDialog = () => onOpenChange(false);
+    const api = useSpreadsheetApi();
+    const defaultDimension = axis === "y"
+        ? api?.getSheet(sheetId).getColumnWidth(indexes[0])
+        : api?.getSheet(sheetId).getRowHeight(indexes[0]);
+    const onSubmit = (event) => {
+        event.preventDefault();
+        const formData = new FormData(event.target);
+        const option = formData.get("resize-option");
+        const customWidth = formData.get("width");
+        if (option === "autofit") {
+            onAutoResize?.(sheetId, indexes, axis);
+        }
+        else {
+            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 const ResizeDimensionEditor = (props) => {
+    const resizeDimension = useResizeDimensionValue();
+    if (resizeDimension) {
+        return React.createElement(ResizeDimensionWrapper, { ...resizeDimension, ...props });
+    }
+    return null;
+};

package/dist/esm/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/esm/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/esm/components/editors/sheet-filter.js

@@ -0,0 +1,88 @@
+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((rule) => rule.ranges?.some((range) => range.sheetId === filter));
+}
+/**
+ * Sheet ids that appear in at least one rule's ranges, in first-seen order.
+ */
+export function getSheetIdsWithRules(rules) {
+    const ids = new Set();
+    for (const rule of rules) {
+        for (const range of rule.ranges ?? []) {
+            if (typeof range.sheetId === "number") {
+                ids.add(range.sheetId);
+            }
+        }
+    }
+    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({ ruleCount, sheetFilter, 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) {
+    const [sheetFilter, setSheetFilter] = useState(sheetId);
+    useEffect(() => {
+        setSheetFilter(sheetId);
+    }, [sheetId]);
+    const filterableSheetIds = useMemo(() => {
+        const ids = getSheetIdsWithRules(rules);
+        // The active sheet is always offered, even before it has rules.
+        return ids.includes(sheetId) ? ids : [sheetId, ...ids];
+    }, [rules, sheetId]);
+    const visibleRules = useMemo(() => filterRulesBySheet(rules, sheetFilter), [rules, sheetFilter]);
+    const showFilter = shouldShowSheetFilter({
+        ruleCount: rules.length,
+        sheetFilter,
+        sheetId,
+    });
+    return {
+        sheetFilter,
+        setSheetFilter,
+        filterableSheetIds,
+        visibleRules,
+        showFilter,
+    };
+}
+export const SheetFilterSelect = ({ value, sheetIds, onValueChange, }) => {
+    const 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: (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((id) => (React.createElement(SelectItem, { key: id, value: String(id) }, getSheetName?.(id) ?? `Sheet ${id}`))))))));
+};
+export const SheetFilterEmptyState = ({ sheetFilter, label, }) => (React.createElement("div", { className: "p-4 text-sm text-rnc-muted-foreground text-center" },
+    "No ",
+    label,
+    sheetFilter === "all" ? "" : " in this sheet"));

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

package/dist/esm/components/editors/table-editor.js

@@ -0,0 +1,106 @@
+import { Cross2Icon } from "@rowsncolumns/icons";
+import { findMatchingBandProperty, FormulaInput, useFocusSheet, useFormulaInputState, useSetFormulaMode, useSetFormulaSelections, } from "@rowsncolumns/spreadsheet";
+import { Button, Dialog, DialogBody, DialogCloseButton, DialogContent, DialogDescription, DialogTitle, Input, Stack, } from "@rowsncolumns/ui";
+import { useFormik } from "formik";
+import React, { useCallback } from "react";
+import { useEditTableDialogState } from "../../atoms/dialog-state.atom";
+import { useEditingTable } from "../../atoms/editing-table.atom";
+import { tableSchema } from "../../validation-schema/table.schema";
+export const TableEditor = ({ sheetId, theme, onSubmit, onRemoveTable, }) => {
+    const [isOpen, onOpenChange] = useEditTableDialogState();
+    const setFormulaMode = useSetFormulaMode();
+    const setFormulaSelections = useSetFormulaSelections();
+    const focusSheet = useFocusSheet();
+    const closeDialog = useCallback(() => {
+        setFormulaMode(false);
+        setFormulaSelections([]);
+        onOpenChange(false);
+    }, [setFormulaMode, setFormulaSelections, onOpenChange]);
+    const table = useEditingTable();
+    // Submit
+    const handleSubmit = useCallback((sheetId, tableId, table) => {
+        onSubmit?.(sheetId, tableId, table);
+        closeDialog();
+    }, [onSubmit, closeDialog]);
+    return (React.createElement(Dialog, { modal: false, open: isOpen },
+        React.createElement(DialogContent, { onEscapeKeyDown: closeDialog, onCloseAutoFocus: (e) => {
+                e.preventDefault();
+                focusSheet?.();
+            } },
+            React.createElement(DialogTitle, { className: "rnc-drag-handle cursor-move" }, "Edit table"),
+            React.createElement(DialogDescription, null, "Update data range and table properties"),
+            React.createElement(DialogBody, null, table ? (React.createElement(TableEditorForm, { onSubmit: handleSubmit, table: table, sheetId: sheetId, theme: theme, onCancel: closeDialog, onRemoveTable: onRemoveTable })) : null),
+            React.createElement(DialogCloseButton, { onClick: () => {
+                    closeDialog();
+                } },
+                React.createElement(Cross2Icon, null)))));
+};
+const TableEditorForm = ({ table, sheetId, theme, onSubmit, onCancel, onRemoveTable, }) => {
+    const { values: { title, showRowStripes = true, showColumnStripes = false, filterButton = true, range,
+    // totalRow = false,
+     }, errors, handleChange, handleSubmit, setFieldValue, resetForm, } = useFormik({
+        initialValues: table,
+        enableReinitialize: true,
+        validationSchema: tableSchema,
+        onSubmit(values) {
+            const tableTheme = values.theme ?? "TableStyleLight1";
+            let bandedRange = values.bandedRange;
+            // Get new rowProperties
+            if (tableTheme) {
+                if (table.showRowStripes !== showRowStripes ||
+                    table.showColumnStripes !== showColumnStripes) {
+                    bandedRange = findMatchingBandProperty(tableTheme, showRowStripes ?? undefined, showColumnStripes ?? undefined);
+                    // Remove column style
+                    if (!showColumnStripes) {
+                        delete bandedRange?.columnProperties;
+                    }
+                }
+                const newTable = {
+                    ...values,
+                    bandedRange,
+                };
+                onSubmit?.(sheetId, newTable.id, newTable);
+            }
+        },
+    });
+    // Formula input helper
+    const formulaInput = useFormulaInputState(sheetId, { ...range, sheetId });
+    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" }, "Table name"),
+                React.createElement(Input, { value: title, name: "title", required: true, onChange: handleChange, error: errors.title })),
+            React.createElement(Stack, { direction: "vertical", className: "gap-1" },
+                React.createElement("label", { className: "font-system text-sm" }, "Where is the data for your table?"),
+                React.createElement(FormulaInput, { onChange: (value) => {
+                        formulaInput.onChange(value, (parsed) => {
+                            setFieldValue("range", parsed);
+                        });
+                    }, value: formulaInput.value, required: true })),
+            React.createElement(Stack, { direction: "horizontal", className: "grid grid-cols-2 gap-2" },
+                React.createElement("label", { className: "font-system text-sm flex items-center gap-1" },
+                    React.createElement("input", { type: "checkbox", checked: showRowStripes ?? undefined, name: "showRowStripes", onChange: (e) => {
+                            setFieldValue("showRowStripes", e.target.checked);
+                        } }),
+                    "Banded rows"),
+                React.createElement("label", { className: "font-system text-sm flex items-center gap-1" },
+                    React.createElement("input", { type: "checkbox", checked: showColumnStripes ?? undefined, name: "showColumnStripes", onChange: (e) => {
+                            setFieldValue("showColumnStripes", e.target.checked);
+                        } }),
+                    "Banded columns"),
+                React.createElement("label", { className: "font-system text-sm flex items-center gap-1" },
+                    React.createElement("input", { type: "checkbox", id: "rnc-filter-button-element", checked: filterButton ?? undefined, name: "filterButton", onChange: (e) => {
+                            setFieldValue("filterButton", e.target.checked);
+                        } }),
+                    "Show filter button"))),
+        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: () => {
+                    resetForm();
+                    onCancel();
+                }, type: "button" }, "Cancel"),
+            React.createElement(Button, { type: "button", variant: "warning", size: "xs", onClick: () => {
+                    onRemoveTable?.(table);
+                    onCancel();
+                }, className: "ml-auto" }, "Convert table to range"))));
+};

package/dist/esm/components/index.d.ts

@@ -0,0 +1,13 @@
+export * from "./dialogs/delete-sheet-confirmation";
+export * from "./dialogs/error-state";
+export * from "./editors/table-editor";
+export * from "./editors/named-range-editor";
+export * from "./editors/resize-dimension-editor";
+export * from "./editors/cell-format-editor";
+export * from "./editors/conditional-format-rule-editor";
+export * from "./editors/conditional-format-editor";
+export * from "./editors/insert-image-editor";
+export * from "./editors/insert-link-editor";
+export * from "./editors/data-validation-editor";
+export * from "./editors/embed-editor";
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0CAA0C,CAAC;AACzD,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,wBAAwB,CAAC"}

package/dist/esm/components/index.js

@@ -0,0 +1,12 @@
+export * from "./dialogs/delete-sheet-confirmation";
+export * from "./dialogs/error-state";
+export * from "./editors/table-editor";
+export * from "./editors/named-range-editor";
+export * from "./editors/resize-dimension-editor";
+export * from "./editors/cell-format-editor";
+export * from "./editors/conditional-format-rule-editor";
+export * from "./editors/conditional-format-editor";
+export * from "./editors/insert-image-editor";
+export * from "./editors/insert-link-editor";
+export * from "./editors/data-validation-editor";
+export * from "./editors/embed-editor";

package/dist/esm/generated-names.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Formatters for auto-generated names such as "Sheet1", "Table 1",
+ * "Column1" and "Copy of Sheet1".
+ *
+ * Pass `generatedNames` to `useSpreadsheetState` to customize or
+ * localize these labels, e.g.
+ *
+ * ```ts
+ * useSpreadsheetState({
+ *   generatedNames: {
+ *     tableColumn: (index) => `Столбец${index}`,
+ *     sheetCopy: (title) => `Копия ${title}`,
+ *   },
+ * })
+ * ```
+ *
+ * Every formatter is optional. A formatter may also return `undefined`
+ * to fall back to the English default for that name.
+ *
+ * Inline object/arrow-function literals are safe: `useSpreadsheetState`
+ * stabilizes the identities internally (latest-ref pattern), so passing
+ * a fresh object every render does not break memoization.
+ */
+export interface GeneratedNames {
+    /**
+     * Title for a newly created sheet. Default: `Sheet${index}`
+     */
+    sheet?: (index: number) => string | undefined;
+    /**
+     * Title for a duplicated sheet. Default: `Copy of ${title}`
+     */
+    sheetCopy?: (title: string) => string | undefined;
+    /**
+     * Title for a newly created table. Default: `Table ${index}`
+     */
+    table?: (index: number) => string | undefined;
+    /**
+     * Title for a pasted (copied) table. Default: `Copy of ${title}`
+     */
+    tableCopy?: (title: string) => string | undefined;
+    /**
+     * Name for a generated table column. Default: `Column${index}`
+     */
+    tableColumn?: (index: number) => string | undefined;
+}
+export declare const getGeneratedSheetName: (index: number, generatedNames?: GeneratedNames) => string;
+export declare const getGeneratedSheetCopyName: (title: string, generatedNames?: GeneratedNames) => string;
+export declare const getGeneratedTableName: (index: number, generatedNames?: GeneratedNames) => string;
+export declare const getGeneratedTableCopyName: (title: string, generatedNames?: GeneratedNames) => string;
+export declare const getGeneratedTableColumnName: (index: number, generatedNames?: GeneratedNames) => string;
+//# sourceMappingURL=generated-names.d.ts.map

package/dist/esm/generated-names.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generated-names.d.ts","sourceRoot":"","sources":["../../generated-names.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAC9C;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAClD;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAC9C;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAClD;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;CACrD;AAED,eAAO,MAAM,qBAAqB,GAChC,OAAO,MAAM,EACb,iBAAiB,cAAc,KAC9B,MAA2D,CAAC;AAE/D,eAAO,MAAM,yBAAyB,GACpC,OAAO,MAAM,EACb,iBAAiB,cAAc,KAC9B,MAAkE,CAAC;AAEtE,eAAO,MAAM,qBAAqB,GAChC,OAAO,MAAM,EACb,iBAAiB,cAAc,KAC9B,MAA4D,CAAC;AAEhE,eAAO,MAAM,yBAAyB,GACpC,OAAO,MAAM,EACb,iBAAiB,cAAc,KAC9B,MAAkE,CAAC;AAEtE,eAAO,MAAM,2BAA2B,GACtC,OAAO,MAAM,EACb,iBAAiB,cAAc,KAC9B,MAAkE,CAAC"}

package/dist/esm/generated-names.js

@@ -0,0 +1,5 @@
+export const getGeneratedSheetName = (index, generatedNames) => generatedNames?.sheet?.(index) ?? `Sheet${index}`;
+export const getGeneratedSheetCopyName = (title, generatedNames) => generatedNames?.sheetCopy?.(title) ?? `Copy of ${title}`;
+export const getGeneratedTableName = (index, generatedNames) => generatedNames?.table?.(index) ?? `Table ${index}`;
+export const getGeneratedTableCopyName = (title, generatedNames) => generatedNames?.tableCopy?.(title) ?? `Copy of ${title}`;
+export const getGeneratedTableColumnName = (index, generatedNames) => generatedNames?.tableColumn?.(index) ?? `Column${index}`;

package/dist/esm/helpers/iterative-calculation.d.ts

@@ -0,0 +1,4 @@
+import type { FormulaResultArray } from "@rowsncolumns/fast-formula-parser";
+import type { CalculationResult } from "../hooks/use-calculation";
+export declare const computeDelta: (prev: CalculationResult | FormulaResultArray | undefined, next: CalculationResult | FormulaResultArray | undefined) => number;
+//# sourceMappingURL=iterative-calculation.d.ts.map

package/dist/esm/helpers/iterative-calculation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iterative-calculation.d.ts","sourceRoot":"","sources":["../../../helpers/iterative-calculation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAE5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAgClE,eAAO,MAAM,YAAY,GACvB,MAAM,iBAAiB,GAAG,kBAAkB,GAAG,SAAS,EACxD,MAAM,iBAAiB,GAAG,kBAAkB,GAAG,SAAS,WAoBzD,CAAC"}