@rowsncolumns/spreadsheet-state 28.0.66

package/dist/cjs/components/editors/conditional-format-editor.d.ts

@@ -0,0 +1,43 @@
+import type { CanvasGridProps, ConditionalFormatRule, SpreadsheetTheme } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import type { UseSpreadsheetProps, useSpreadsheetState } from "../../hooks/use-spreadsheet-state";
+export type ConditionalFormatEditorProps = {
+    theme: SpreadsheetTheme;
+    sheetId: number;
+    functionDescriptions?: CanvasGridProps["functionDescriptions"];
+    conditionalFormats: ConditionalFormatRule[];
+    /**
+     * Locale for number parsing (e.g., "de-DE" for German)
+     */
+    locale?: string;
+    /**
+     * Callback when user creates a new rule
+     * @param rule
+     */
+    onCreateRule: ReturnType<typeof useSpreadsheetState>["onCreateConditionalFormattingRule"];
+    /**
+     * Callback when user updates a rule
+     * @param rule
+     * @param previousRule
+     */
+    onUpdateRule: ReturnType<typeof useSpreadsheetState>["onUpdateConditionalFormattingRule"];
+    /**
+     * Callback when a rule is deleted
+     * @param rule
+     */
+    onDeleteRule: ReturnType<typeof useSpreadsheetState>["onDeleteConditionalFormattingRule"];
+    /**
+     * When user updates rule
+     * @param rule
+     */
+    onPreviewRule: ReturnType<typeof useSpreadsheetState>["onPreviewConditionalFormattingRule"];
+    /**
+     * Id creation strategy
+     */
+    idCreationStrategy?: UseSpreadsheetProps["idCreationStrategy"];
+};
+export declare const ConditionalFormatEditor: ({ sheetId, theme, conditionalFormats, functionDescriptions, locale, idCreationStrategy, onCreateRule, onDeleteRule, onUpdateRule, onPreviewRule, }: ConditionalFormatEditorProps) => React.JSX.Element;
+export declare const ConditionalFormatDialog: ({ children, }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+//# sourceMappingURL=conditional-format-editor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"conditional-format-editor.d.ts","sourceRoot":"","sources":["../../../../components/editors/conditional-format-editor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,eAAe,EACf,qBAAqB,EACrB,gBAAgB,EACjB,MAAM,2BAA2B,CAAC;AAkBnC,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D,OAAO,KAAK,EACV,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,mCAAmC,CAAC;AAW3C,MAAM,MAAM,4BAA4B,GAAG;IACzC,KAAK,EAAE,gBAAgB,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,oBAAoB,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IAC/D,kBAAkB,EAAE,qBAAqB,EAAE,CAAC;IAC5C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,YAAY,EAAE,UAAU,CACtB,OAAO,mBAAmB,CAC3B,CAAC,mCAAmC,CAAC,CAAC;IACvC;;;;OAIG;IACH,YAAY,EAAE,UAAU,CACtB,OAAO,mBAAmB,CAC3B,CAAC,mCAAmC,CAAC,CAAC;IACvC;;;OAGG;IACH,YAAY,EAAE,UAAU,CACtB,OAAO,mBAAmB,CAC3B,CAAC,mCAAmC,CAAC,CAAC;IACvC;;;OAGG;IACH,aAAa,EAAE,UAAU,CACvB,OAAO,mBAAmB,CAC3B,CAAC,oCAAoC,CAAC,CAAC;IACxC;;OAEG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;CAChE,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,oJAWrC,4BAA4B,sBAiR9B,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,eAErC;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,sBAyBA,CAAC"}

package/dist/cjs/components/editors/conditional-format-editor.js

@@ -0,0 +1,176 @@
+import { __assign, __read, __spreadArray } from "tslib";
+import { selectionFromActiveCell } from "@rowsncolumns/grid";
+import { CopyIcon, Pencil2Icon, TrashIcon } from "@rowsncolumns/icons";
+import { BoxIcon, CheckIcon, Cross2Icon, PlusIcon } from "@rowsncolumns/icons";
+import { getGradientColors, useFocusSheet, useFormulaRangeHelpers, useSpreadsheetApi, } from "@rowsncolumns/spreadsheet";
+import { Button, Dialog, DialogBody, DialogCloseButton, DialogContent, DialogTitle, IconButton, Separator, } from "@rowsncolumns/ui";
+import { uuid } from "@rowsncolumns/utils";
+import React, { useCallback, useMemo, useState } from "react";
+import { useConditionalFormatDialogState } from "../../atoms/dialog-state.atom";
+import { ConditionalFormatRuleEditor, createRulePreviewStyle, } from "./conditional-format-rule-editor";
+import { SheetFilterEmptyState, SheetFilterSelect, useSheetFilter, } from "./sheet-filter";
+export var ConditionalFormatEditor = function (_a) {
+    var sheetId = _a.sheetId, theme = _a.theme, conditionalFormats = _a.conditionalFormats, functionDescriptions = _a.functionDescriptions, locale = _a.locale, idCreationStrategy = _a.idCreationStrategy, onCreateRule = _a.onCreateRule, onDeleteRule = _a.onDeleteRule, onUpdateRule = _a.onUpdateRule, onPreviewRule = _a.onPreviewRule;
+    var _b = __read(useState(), 2), editingId = _b[0], setEditingId = _b[1];
+    // Deferred create: "Add another rule" holds the new rule as a local draft and only
+    // persists it on Save — Excel/Google Sheets create the rule on OK/Done, and an
+    // eagerly-created stub would survive Cancel/close as a permanent empty rule.
+    var _c = __read(useState(), 2), draftRule = _c[0], setDraftRule = _c[1];
+    var api = useSpreadsheetApi();
+    // Helpers
+    var rangeToFormula = useFormulaRangeHelpers({
+        sheetId: sheetId,
+    }).rangeToFormula;
+    var _d = useSheetFilter(sheetId, conditionalFormats), sheetFilter = _d.sheetFilter, setSheetFilter = _d.setSheetFilter, filterableSheetIds = _d.filterableSheetIds, visibleRules = _d.visibleRules, showFilter = _d.showFilter;
+    var onNewRule = function () {
+        var _a, _b, _c;
+        var activeCell = (_a = api === null || api === void 0 ? void 0 : api.getActiveSheet()) === null || _a === void 0 ? void 0 : _a.getActiveCell();
+        var selections = (_b = api === null || api === void 0 ? void 0 : api.getActiveSheet()) === null || _b === void 0 ? void 0 : _b.getSelections();
+        var finalSelections = (selections === null || selections === void 0 ? void 0 : selections.length)
+            ? selections
+            : selectionFromActiveCell(activeCell);
+        var id = (_c = idCreationStrategy === null || idCreationStrategy === void 0 ? void 0 : idCreationStrategy("conditional-format")) !== null && _c !== void 0 ? _c : uuid();
+        var newRule = {
+            id: id,
+            ranges: finalSelections.map(function (sel) {
+                return __assign(__assign({}, sel.range), { sheetId: sheetId });
+            }),
+            booleanRule: {
+                condition: {},
+                format: {},
+            },
+        };
+        // Hold as a draft — persisted by onSave, dropped by Cancel/close.
+        setDraftRule(newRule);
+        // Editing id
+        setEditingId(newRule.id);
+    };
+    var onSave = function (rule, previousRule) {
+        if (draftRule && rule.id === draftRule.id) {
+            onCreateRule === null || onCreateRule === void 0 ? void 0 : onCreateRule(rule);
+            setDraftRule(undefined);
+        }
+        else {
+            onUpdateRule === null || onUpdateRule === void 0 ? void 0 : onUpdateRule(rule, previousRule);
+        }
+        setEditingId(undefined);
+    };
+    // Duplicate a rule
+    var onDuplicate = function (rule) {
+        var _a;
+        var id = (_a = idCreationStrategy === null || idCreationStrategy === void 0 ? void 0 : idCreationStrategy("conditional-format")) !== null && _a !== void 0 ? _a : uuid();
+        // Create a new rule
+        onCreateRule === null || onCreateRule === void 0 ? void 0 : onCreateRule(__assign(__assign({}, rule), { id: id }));
+    };
+    var toggleEnable = function (id, enabled) {
+        var rule = conditionalFormats.find(function (rule) { return rule.id === id; });
+        if (rule) {
+            onUpdateRule === null || onUpdateRule === void 0 ? void 0 : onUpdateRule(__assign(__assign({}, rule), { enabled: enabled }), rule);
+        }
+    };
+    var toggleStopIfTrue = function (id, stopIfTrue) {
+        var rule = conditionalFormats.find(function (rule) { return rule.id === id; });
+        if (rule) {
+            onUpdateRule === null || onUpdateRule === void 0 ? void 0 : onUpdateRule(__assign(__assign({}, rule), { stopIfTrue: stopIfTrue }), rule);
+        }
+    };
+    var activeRule = useMemo(function () {
+        return draftRule && draftRule.id === editingId
+            ? draftRule
+            : conditionalFormats.find(function (rule) { return rule.id === editingId; });
+    }, [conditionalFormats, editingId, draftRule]);
+    var unMark = function () {
+        api === null || api === void 0 ? void 0 : api.unmark();
+    };
+    return (React.createElement(React.Fragment, null,
+        editingId && activeRule ? (React.createElement(ConditionalFormatRuleEditor, { sheetId: sheetId, theme: theme, conditionalFormatRule: activeRule, key: editingId, functionDescriptions: functionDescriptions, locale: locale, onCancel: function () {
+                setDraftRule(undefined);
+                setEditingId(undefined);
+            }, onSubmit: onSave, onChange: onPreviewRule, 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: "conditional format rules" })) : null,
+            visibleRules.map(function (rule) {
+                var _a, _b, _c, _d, _e, _f, _g;
+                var title = rule.gradientRule
+                    ? "Color scale"
+                    : rule.topBottomRule
+                        ? "".concat(rule.topBottomRule.type === "BOTTOM" ? "Bottom" : "Top", " ").concat((_a = rule.topBottomRule.rank) !== null && _a !== void 0 ? _a : 5).concat(rule.topBottomRule.isPercent ? "%" : "")
+                        : rule.distinctRule
+                            ? rule.distinctRule.type === "UNIQUE"
+                                ? "Unique values"
+                                : "Duplicate values"
+                            : rule.iconSetRule
+                                ? "Icon set"
+                                : rule.dataBarRule
+                                    ? "Data bar"
+                                    : "Single color";
+                var enabled = (_b = rule.enabled) !== null && _b !== void 0 ? _b : true;
+                var sampleGradientColors = (rule === null || rule === void 0 ? void 0 : rule.gradientRule)
+                    ? getGradientColors([__spreadArray([], __read(Array(5)), false).map(function (_, idx) { return [idx * 20]; })], rule.gradientRule, theme).flat(2)
+                    : [];
+                return (React.createElement("div", { className: "border-0 border-solid border-b border-rnc-border p-2 text-sm grid grid-cols-[auto_1fr_auto] gap-2 pr-0", key: rule.id, tabIndex: 0, onMouseEnter: function () {
+                        var _a;
+                        (_a = api === null || api === void 0 ? void 0 : api.mark) === null || _a === void 0 ? void 0 : _a.call(api, rule.ranges);
+                    }, onMouseLeave: function () {
+                        unMark();
+                    }, onFocusCapture: function () {
+                        var _a;
+                        (_a = api === null || api === void 0 ? void 0 : api.mark) === null || _a === void 0 ? void 0 : _a.call(api, rule.ranges);
+                    }, onBlurCapture: function () {
+                        unMark();
+                    } },
+                    React.createElement("div", { className: "w-12 h-12 justify-center grid relative grid-cols-5 border border-rnc-border border-solid", style: createRulePreviewStyle((_f = (_d = (_c = rule.booleanRule) === null || _c === void 0 ? void 0 : _c.format) !== null && _d !== void 0 ? _d : (_e = rule.topBottomRule) === null || _e === void 0 ? void 0 : _e.format) !== null && _f !== void 0 ? _f : (_g = rule.distinctRule) === null || _g === void 0 ? void 0 : _g.format, theme) },
+                        sampleGradientColors.map(function (backgroundColor, idx) {
+                            return (React.createElement("div", { key: idx, style: {
+                                    backgroundColor: backgroundColor,
+                                } }));
+                        }),
+                        React.createElement("span", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" }, "123")),
+                    React.createElement("div", { className: "flex flex-col justify-center" },
+                        title,
+                        React.createElement("div", { className: "flex gap-1 text-rnc-muted-foreground flex-wrap text-xs" }, rule.ranges.map(function (range) {
+                            var address = rangeToFormula(range);
+                            return (React.createElement("div", { key: address, className: "whitespace-nowrap" }, address));
+                        })),
+                        React.createElement("label", { className: "flex items-center gap-2 text-xs mt-1" },
+                            React.createElement("input", { type: "checkbox", checked: Boolean(rule.stopIfTrue), onChange: function (event) {
+                                    return toggleStopIfTrue(rule.id, event.target.checked);
+                                } }),
+                            "Stop if true")),
+                    React.createElement("div", null,
+                        React.createElement(IconButton, { tooltip: "".concat(enabled ? "Disable" : "Enable", " this rule"), onClick: function () { return toggleEnable(rule.id, !enabled); }, className: "relative" },
+                            React.createElement(BoxIcon, null),
+                            enabled ? (React.createElement(CheckIcon, { className: "left-[4px] top-[5px] absolute" })) : null),
+                        React.createElement(IconButton, { tooltip: "Duplicate", onClick: function () { return onDuplicate(rule); } },
+                            React.createElement(CopyIcon, null)),
+                        React.createElement(IconButton, { tooltip: "Edit", onClick: function () {
+                                unMark();
+                                setEditingId(rule.id);
+                            } },
+                            React.createElement(Pencil2Icon, null)),
+                        React.createElement(IconButton, { tooltip: "Delete", onClick: function () {
+                                unMark();
+                                onDeleteRule === null || onDeleteRule === void 0 ? void 0 : onDeleteRule(rule);
+                            } },
+                            React.createElement(TrashIcon, null)))));
+            }))),
+        React.createElement(Separator, { className: "mb-2 border-none bg-transparent" }),
+        React.createElement(Button, { variant: "link", size: "xs", className: "py-2 cursor-pointer hover:bg-rnc-muted rounded-none px-2 w-full", onClick: onNewRule },
+            React.createElement(PlusIcon, null),
+            "Add another rule")));
+};
+export var ConditionalFormatDialog = function (_a) {
+    var children = _a.children;
+    var _b = __read(useConditionalFormatDialogState(), 2), isOpen = _b[0], onOpenChange = _b[1];
+    var focusSheet = useFocusSheet();
+    var closeDialog = useCallback(function () {
+        onOpenChange(false);
+        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+    }, [onOpenChange, focusSheet]);
+    return (React.createElement(Dialog, { modal: false, open: isOpen },
+        React.createElement(DialogContent, { onEscapeKeyDown: closeDialog, onCloseAutoFocus: function (e) { return e.preventDefault(); } },
+            React.createElement(DialogTitle, { className: "rnc-drag-handle cursor-move" }, "Conditional format"),
+            React.createElement(DialogBody, null, children),
+            React.createElement(DialogCloseButton, { onClick: closeDialog },
+                React.createElement(Cross2Icon, null)))));
+};

package/dist/cjs/components/editors/conditional-format-rule-editor.d.ts

@@ -0,0 +1,27 @@
+import type { CellFormat } from "@rowsncolumns/common-types";
+import type { Borders, CanvasGridProps, ConditionalFormatRule, SpreadsheetTheme } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import type { UseSpreadsheetProps } from "../../hooks/use-spreadsheet-state";
+export type ConditionalFormatRuleEditorProps = {
+    conditionalFormatRule: ConditionalFormatRule;
+    theme: SpreadsheetTheme;
+    sheetId: number;
+    functionDescriptions?: CanvasGridProps["functionDescriptions"];
+    /**
+     * Locale for number parsing (e.g., "de-DE" for German)
+     * Used when evaluating the rule values
+     */
+    locale?: string;
+    /**
+     * Id creation strategy
+     * @param rule
+     */
+    idCreationStrategy?: UseSpreadsheetProps["idCreationStrategy"];
+    onSubmit?(conditionalFormatRule: ConditionalFormatRule, previousRule: ConditionalFormatRule): void;
+    onChange?(conditionalFormatRule: ConditionalFormatRule): void;
+    onCancel?(): void;
+};
+export declare const createBorderCSSFromBorder: (borders: Borders | undefined | null, theme: SpreadsheetTheme) => React.CSSProperties;
+export declare const createRulePreviewStyle: (format: CellFormat | undefined, theme: SpreadsheetTheme) => React.CSSProperties;
+export declare const ConditionalFormatRuleEditor: ({ sheetId, conditionalFormatRule, theme, functionDescriptions, locale, idCreationStrategy, onSubmit, onCancel, onChange, }: ConditionalFormatRuleEditorProps) => React.JSX.Element;
+//# sourceMappingURL=conditional-format-rule-editor.d.ts.map

package/dist/cjs/components/editors/conditional-format-rule-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conditional-format-rule-editor.d.ts","sourceRoot":"","sources":["../../../../components/editors/conditional-format-rule-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAiB,MAAM,4BAA4B,CAAC;AAG5E,OAAO,KAAK,EAEV,OAAO,EACP,eAAe,EACf,qBAAqB,EAGrB,gBAAgB,EACjB,MAAM,2BAA2B,CAAC;AAoCnC,OAAO,KAA+C,MAAM,OAAO,CAAC;AAMpE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAE7E,MAAM,MAAM,gCAAgC,GAAG;IAC7C,qBAAqB,EAAE,qBAAqB,CAAC;IAC7C,KAAK,EAAE,gBAAgB,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,oBAAoB,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IAC/D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;IAC/D,QAAQ,CAAC,CACP,qBAAqB,EAAE,qBAAqB,EAC5C,YAAY,EAAE,qBAAqB,GAClC,IAAI,CAAC;IACR,QAAQ,CAAC,CAAC,qBAAqB,EAAE,qBAAqB,GAAG,IAAI,CAAC;IAC9D,QAAQ,CAAC,IAAI,IAAI,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,yBAAyB,GACpC,SAAS,OAAO,GAAG,SAAS,GAAG,IAAI,EACnC,OAAO,gBAAgB,KACtB,KAAK,CAAC,aA0BR,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,QAAQ,UAAU,GAAG,SAAS,EAC9B,OAAO,gBAAgB,KACtB,KAAK,CAAC,aAYR,CAAC;AASF,eAAO,MAAM,2BAA2B,GAAI,4HAUzC,gCAAgC,sBA2gClC,CAAC"}