@rowsncolumns/spreadsheet-state 29.2.0 → 29.3.3

package/dist/cjs/components/editors/conditional-format-data-bar-options.d.ts

@@ -0,0 +1,16 @@
+import type { DataBarRule, SpreadsheetTheme } from "@rowsncolumns/spreadsheet";
+import React from "react";
+/**
+ * Excel's "New Formatting Rule ▸ Data Bar" defaults: Automatic bounds,
+ * gradient fill in blue with a matching solid border, red negative bars,
+ * an automatic black axis and full-width (0–100 %) bars.
+ */
+export declare const DEFAULT_DATA_BAR_RULE: DataBarRule;
+export type ConditionalFormatDataBarOptionsProps = {
+    rule: DataBarRule | null | undefined;
+    theme: SpreadsheetTheme;
+    onChange(next: DataBarRule): void;
+};
+/** Excel-depth data-bar options: bounds, fill, border, direction, negatives and axis, bar only. */
+export declare const ConditionalFormatDataBarOptions: ({ rule, theme, onChange, }: ConditionalFormatDataBarOptionsProps) => React.JSX.Element;
+//# sourceMappingURL=conditional-format-data-bar-options.d.ts.map

package/dist/cjs/components/editors/conditional-format-data-bar-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conditional-format-data-bar-options.d.ts","sourceRoot":"","sources":["../../../../components/editors/conditional-format-data-bar-options.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,WAAW,EACX,gBAAgB,EACjB,MAAM,2BAA2B,CAAC;AAYnC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,WAanC,CAAC;AAwCF,MAAM,MAAM,oCAAoC,GAAG;IACjD,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACrC,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;CACnC,CAAC;AAEF,mGAAmG;AACnG,eAAO,MAAM,+BAA+B,GAAI,4BAI7C,oCAAoC,sBAuPtC,CAAC"}

package/dist/cjs/components/editors/conditional-format-data-bar-options.js

@@ -0,0 +1,166 @@
+import { __assign } from "tslib";
+import { getStringifiedColor } from "@rowsncolumns/spreadsheet";
+import { Input, Select, SelectContent, SelectItem, SelectPortal, SelectTrigger, SelectValue, Stack, } from "@rowsncolumns/ui";
+import React from "react";
+/**
+ * Excel's "New Formatting Rule ▸ Data Bar" defaults: Automatic bounds,
+ * gradient fill in blue with a matching solid border, red negative bars,
+ * an automatic black axis and full-width (0–100 %) bars.
+ */
+export var DEFAULT_DATA_BAR_RULE = {
+    minpoint: { type: "AUTOMATIC" },
+    maxpoint: { type: "AUTOMATIC" },
+    color: "#638EC6",
+    borderColor: "#638EC6",
+    gradient: true,
+    negativeColor: "#FF0000",
+    negativeBorderColor: "#FF0000",
+    axisPosition: "automatic",
+    axisColor: "#000000",
+    direction: "context",
+    minLength: 0,
+    maxLength: 100,
+};
+var BOUND_TYPES = [
+    { value: "AUTOMATIC", min: "Automatic", max: "Automatic" },
+    { value: "MIN", min: "Lowest Value", max: "Highest Value" },
+    { value: "NUMBER", min: "Number", max: "Number" },
+    { value: "PERCENT", min: "Percent", max: "Percent" },
+    { value: "FORMULA", min: "Formula", max: "Formula" },
+    { value: "PERCENTILE", min: "Percentile", max: "Percentile" },
+];
+var defaultBoundValue = function (type, bound) {
+    return type === "NUMBER" || type === "FORMULA"
+        ? bound === "min"
+            ? "0"
+            : "100"
+        : type === "PERCENT" || type === "PERCENTILE"
+            ? bound === "min"
+                ? "10"
+                : "90"
+            : undefined;
+};
+var colorInputValue = function (color, theme, fallback) {
+    var css = color ? getStringifiedColor(color, theme) : undefined;
+    return typeof css === "string" && /^#[0-9a-f]{6}$/i.test(css)
+        ? css
+        : fallback;
+};
+/** Excel-depth data-bar options: bounds, fill, border, direction, negatives and axis, bar only. */
+export var ConditionalFormatDataBarOptions = function (_a) {
+    var _b, _c;
+    var rule = _a.rule, theme = _a.theme, onChange = _a.onChange;
+    var value = rule !== null && rule !== void 0 ? rule : DEFAULT_DATA_BAR_RULE;
+    var update = function (patch) {
+        return onChange(__assign(__assign({}, value), patch));
+    };
+    var boundEditor = function (bound) {
+        var _a;
+        var key = bound === "min" ? "minpoint" : "maxpoint";
+        var threshold = value[key];
+        var showValue = threshold.type !== "AUTOMATIC" &&
+            threshold.type !== "MIN" &&
+            threshold.type !== "MAX";
+        return (React.createElement(Stack, { direction: "vertical", className: "gap-1 flex-1" },
+            React.createElement("label", { className: "font-system text-sm" }, bound === "min" ? "Minimum" : "Maximum"),
+            React.createElement(Select, { value: threshold.type === "MAX" ? "MIN" : threshold.type, onValueChange: function (type) {
+                    var _a;
+                    var nextType = type === "MIN" && bound === "max"
+                        ? "MAX"
+                        : type;
+                    update((_a = {},
+                        _a[key] = {
+                            type: nextType,
+                            value: defaultBoundValue(nextType, bound),
+                        },
+                        _a));
+                } },
+                React.createElement(SelectTrigger, { className: "text-sm", "aria-label": bound === "min" ? "Minimum type" : "Maximum type" },
+                    React.createElement(SelectValue, null)),
+                React.createElement(SelectPortal, null,
+                    React.createElement(SelectContent, null, BOUND_TYPES.map(function (option) { return (React.createElement(SelectItem, { key: option.value, value: option.value }, bound === "min" ? option.min : option.max)); })))),
+            showValue ? (React.createElement(Input, { "aria-label": bound === "min" ? "Minimum value" : "Maximum value", className: "text-xs", value: String((_a = threshold.value) !== null && _a !== void 0 ? _a : ""), onChange: function (e) {
+                    var _a;
+                    return update((_a = {}, _a[key] = __assign(__assign({}, threshold), { value: e.target.value }), _a));
+                } })) : null));
+    };
+    var negativeSameFill = !value.negativeColor;
+    var negativeSameBorder = !value.negativeBorderColor;
+    var hasBorder = !!value.borderColor;
+    return (React.createElement(Stack, { direction: "vertical", className: "gap-2 pb-1" },
+        React.createElement(Stack, { direction: "horizontal", className: "gap-2" },
+            boundEditor("min"),
+            boundEditor("max")),
+        React.createElement("label", { className: "font-system text-sm" }, "Bar appearance"),
+        React.createElement(Stack, { direction: "horizontal", className: "gap-2 items-center" },
+            React.createElement(Select, { value: value.gradient === false ? "solid" : "gradient", onValueChange: function (fill) { return update({ gradient: fill === "gradient" }); } },
+                React.createElement(SelectTrigger, { className: "text-sm w-36", "aria-label": "Fill" },
+                    React.createElement(SelectValue, null)),
+                React.createElement(SelectPortal, null,
+                    React.createElement(SelectContent, null,
+                        React.createElement(SelectItem, { value: "solid" }, "Solid Fill"),
+                        React.createElement(SelectItem, { value: "gradient" }, "Gradient Fill")))),
+            React.createElement(Input, { type: "color", "aria-label": "Fill color", className: "w-16 h-8", value: colorInputValue(value.color, theme, "#638ec6"), onChange: function (e) { return update({ color: e.target.value }); } })),
+        React.createElement(Stack, { direction: "horizontal", className: "gap-2 items-center" },
+            React.createElement(Select, { value: hasBorder ? "solid" : "none", onValueChange: function (border) {
+                    return update(__assign({ borderColor: border === "solid"
+                            ? colorInputValue(value.color, theme, "#638ec6")
+                            : undefined }, (border === "none" ? { negativeBorderColor: undefined } : {})));
+                } },
+                React.createElement(SelectTrigger, { className: "text-sm w-36", "aria-label": "Border" },
+                    React.createElement(SelectValue, null)),
+                React.createElement(SelectPortal, null,
+                    React.createElement(SelectContent, null,
+                        React.createElement(SelectItem, { value: "none" }, "No Border"),
+                        React.createElement(SelectItem, { value: "solid" }, "Solid Border")))),
+            hasBorder ? (React.createElement(Input, { type: "color", "aria-label": "Border color", className: "w-16 h-8", value: colorInputValue(value.borderColor, theme, "#638ec6"), onChange: function (e) { return update({ borderColor: e.target.value }); } })) : null),
+        React.createElement(Stack, { direction: "horizontal", className: "gap-2 items-center" },
+            React.createElement("label", { className: "font-system text-sm w-24" }, "Bar direction"),
+            React.createElement(Select, { value: (_b = value.direction) !== null && _b !== void 0 ? _b : "context", onValueChange: function (direction) {
+                    return update({ direction: direction });
+                } },
+                React.createElement(SelectTrigger, { className: "text-sm w-36", "aria-label": "Bar direction" },
+                    React.createElement(SelectValue, null)),
+                React.createElement(SelectPortal, null,
+                    React.createElement(SelectContent, null,
+                        React.createElement(SelectItem, { value: "context" }, "Context"),
+                        React.createElement(SelectItem, { value: "leftToRight" }, "Left-to-Right"),
+                        React.createElement(SelectItem, { value: "rightToLeft" }, "Right-to-Left"))))),
+        React.createElement("label", { className: "font-system text-sm inline-flex items-center gap-2" },
+            React.createElement("input", { type: "checkbox", checked: value.showValue === false, onChange: function (e) {
+                    return update({ showValue: e.target.checked ? false : undefined });
+                } }),
+            "Show Bar Only"),
+        React.createElement("label", { className: "font-system text-sm mt-1" }, "Negative value and axis"),
+        React.createElement(Stack, { direction: "horizontal", className: "gap-2 items-center" },
+            React.createElement("label", { className: "font-system text-xs inline-flex items-center gap-1" },
+                React.createElement("input", { type: "checkbox", checked: negativeSameFill, onChange: function (e) {
+                        return update({
+                            negativeColor: e.target.checked ? undefined : "#FF0000",
+                        });
+                    } }),
+                "Same fill color as positive bar"),
+            !negativeSameFill ? (React.createElement(Input, { type: "color", "aria-label": "Negative fill color", className: "w-16 h-8", value: colorInputValue(value.negativeColor, theme, "#ff0000"), onChange: function (e) { return update({ negativeColor: e.target.value }); } })) : null),
+        hasBorder ? (React.createElement(Stack, { direction: "horizontal", className: "gap-2 items-center" },
+            React.createElement("label", { className: "font-system text-xs inline-flex items-center gap-1" },
+                React.createElement("input", { type: "checkbox", checked: negativeSameBorder, onChange: function (e) {
+                        return update({
+                            negativeBorderColor: e.target.checked ? undefined : "#FF0000",
+                        });
+                    } }),
+                "Same border color as positive bar"),
+            !negativeSameBorder ? (React.createElement(Input, { type: "color", "aria-label": "Negative border color", className: "w-16 h-8", value: colorInputValue(value.negativeBorderColor, theme, "#ff0000"), onChange: function (e) { return update({ negativeBorderColor: e.target.value }); } })) : null)) : null,
+        React.createElement(Stack, { direction: "horizontal", className: "gap-2 items-center" },
+            React.createElement("label", { className: "font-system text-sm w-24" }, "Axis"),
+            React.createElement(Select, { value: (_c = value.axisPosition) !== null && _c !== void 0 ? _c : "none", onValueChange: function (axis) {
+                    return update({ axisPosition: axis });
+                } },
+                React.createElement(SelectTrigger, { className: "text-sm w-36", "aria-label": "Axis position" },
+                    React.createElement(SelectValue, null)),
+                React.createElement(SelectPortal, null,
+                    React.createElement(SelectContent, null,
+                        React.createElement(SelectItem, { value: "automatic" }, "Automatic"),
+                        React.createElement(SelectItem, { value: "middle" }, "Cell midpoint"),
+                        React.createElement(SelectItem, { value: "none" }, "None")))),
+            value.axisPosition && value.axisPosition !== "none" ? (React.createElement(Input, { type: "color", "aria-label": "Axis color", className: "w-16 h-8", value: colorInputValue(value.axisColor, theme, "#000000"), onChange: function (e) { return update({ axisColor: e.target.value }); } })) : null)));
+};

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

@@ -36,12 +36,18 @@ export type ConditionalFormatEditorProps = {
      * @param rule
      */
     onPreviewRule: ReturnType<typeof useSpreadsheetState>["onPreviewConditionalFormattingRule"];
+    /**
+     * Move Up / Move Down: the `priority` updates that realise the new order, applied as ONE undoable
+     * change (`onReorderConditionalFormattingRules`). Without it each update goes through
+     * `onUpdateRule`.
+     */
+    onReorderRules?: ReturnType<typeof useSpreadsheetState>["onReorderConditionalFormattingRules"];
     /**
      * Id creation strategy
      */
     idCreationStrategy?: UseSpreadsheetProps["idCreationStrategy"];
 };
-export declare const ConditionalFormatEditor: ({ sheets, sheetId, theme, conditionalFormats, functionDescriptions, locale, idCreationStrategy, onCreateRule, onDeleteRule, onUpdateRule, onPreviewRule, }: ConditionalFormatEditorProps) => React.JSX.Element;
+export declare const ConditionalFormatEditor: ({ sheets, sheetId, theme, conditionalFormats, functionDescriptions, locale, idCreationStrategy, onCreateRule, onDeleteRule, onUpdateRule, onPreviewRule, onReorderRules, }: ConditionalFormatEditorProps) => React.JSX.Element;
 export declare const ConditionalFormatDialog: ({ children, }: {
     children: React.ReactNode;
 }) => React.JSX.Element;

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

@@ -1 +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,KAAK,EACL,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;;;OAGG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAC/C;;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,4JAYrC,4BAA4B,sBAqR9B,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,eAErC;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,sBAyBA,CAAC"}
+{"version":3,"file":"conditional-format-editor.d.ts","sourceRoot":"","sources":["../../../../components/editors/conditional-format-editor.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,eAAe,EACf,qBAAqB,EACrB,KAAK,EACL,gBAAgB,EACjB,MAAM,2BAA2B,CAAC;AAoBnC,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;;;OAGG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAC/C;;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;;;;OAIG;IACH,cAAc,CAAC,EAAE,UAAU,CACzB,OAAO,mBAAmB,CAC3B,CAAC,qCAAqC,CAAC,CAAC;IACzC;;OAEG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;CAChE,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,4KAarC,4BAA4B,sBA+U9B,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

@@ -1,8 +1,8 @@
-import { __assign, __read, __spreadArray } from "tslib";
+import { __assign, __read, __rest, __spreadArray, __values } from "tslib";
 import { selectionFromActiveCell } from "@rowsncolumns/grid";
-import { CopyIcon, Pencil2Icon, TrashIcon } from "@rowsncolumns/icons";
+import { ArrowDownIcon, ArrowUpIcon, CopyIcon, Pencil2Icon, TrashIcon, } from "@rowsncolumns/icons";
 import { BoxIcon, CheckIcon, Cross2Icon, PlusIcon } from "@rowsncolumns/icons";
-import { getGradientColors, useFocusSheet, useFormulaRangeHelpers, useSpreadsheetApi, } from "@rowsncolumns/spreadsheet";
+import { getGradientColors, planConditionalFormatMove, sortConditionalFormatRules, 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";
@@ -10,7 +10,7 @@ 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 sheets = _a.sheets, 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 sheets = _a.sheets, 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, onReorderRules = _a.onReorderRules;
     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
@@ -22,7 +22,43 @@ export var ConditionalFormatEditor = function (_a) {
         sheetId: sheetId,
     }).rangeToFormula;
     var workbookSheetIds = useMemo(function () { return sheets === null || sheets === void 0 ? void 0 : sheets.map(function (sheet) { return sheet.sheetId; }); }, [sheets]);
-    var _d = useSheetFilter(sheetId, conditionalFormats, workbookSheetIds), sheetFilter = _d.sheetFilter, setSheetFilter = _d.setSheetFilter, filterableSheetIds = _d.filterableSheetIds, visibleRules = _d.visibleRules, showFilter = _d.showFilter;
+    // Excel lists rules in precedence order: the first rule wins a conflicting format.
+    var rulesInPrecedenceOrder = useMemo(function () { return sortConditionalFormatRules(conditionalFormats); }, [conditionalFormats]);
+    var _d = useSheetFilter(sheetId, rulesInPrecedenceOrder, workbookSheetIds, function () {
+        var activeSheet = api === null || api === void 0 ? void 0 : api.getActiveSheet();
+        var selections = activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.getSelections();
+        var activeCell = activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.getActiveCell();
+        if (!(selections === null || selections === void 0 ? void 0 : selections.length) && !activeCell)
+            return [];
+        var ranges = ((selections === null || selections === void 0 ? void 0 : selections.length)
+            ? selections
+            : selectionFromActiveCell(activeCell)).map(function (selection) { return selection.range; });
+        return ranges.map(function (range) { return (__assign(__assign({}, range), { sheetId: sheetId })); });
+    }), sheetFilter = _d.sheetFilter, setSheetFilter = _d.setSheetFilter, filterableSheetIds = _d.filterableSheetIds, visibleRules = _d.visibleRules, showFilter = _d.showFilter;
+    // Move Up / Move Down among the rules the list shows ("Show formatting rules for" may hide some).
+    var moveRule = function (rule, direction) {
+        var e_1, _a;
+        var updates = planConditionalFormatMove(conditionalFormats, rule.id, direction, visibleRules);
+        if (!updates.length)
+            return;
+        if (onReorderRules) {
+            onReorderRules(updates);
+            return;
+        }
+        try {
+            for (var updates_1 = __values(updates), updates_1_1 = updates_1.next(); !updates_1_1.done; updates_1_1 = updates_1.next()) {
+                var _b = updates_1_1.value, target = _b.rule, priority = _b.priority;
+                onUpdateRule === null || onUpdateRule === void 0 ? void 0 : onUpdateRule(__assign(__assign({}, target), { priority: priority }), target);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (updates_1_1 && !updates_1_1.done && (_a = updates_1.return)) _a.call(updates_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    };
     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();
@@ -60,8 +96,10 @@ export var ConditionalFormatEditor = function (_a) {
     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 }));
+        // A copy is a new rule: drop the source's priority so it lands at the top of the list, as every
+        // new rule does in Excel, instead of tying with the source.
+        var _priority = rule.priority, copy = __rest(rule, ["priority"]);
+        onCreateRule === null || onCreateRule === void 0 ? void 0 : onCreateRule(__assign(__assign({}, copy), { id: id }));
     };
     var toggleEnable = function (id, enabled) {
         var rule = conditionalFormats.find(function (rule) { return rule.id === id; });
@@ -88,9 +126,9 @@ export var ConditionalFormatEditor = function (_a) {
                 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,
+            showFilter ? (React.createElement(SheetFilterSelect, { offerSelection: true, value: sheetFilter, sheetIds: filterableSheetIds, onValueChange: setSheetFilter })) : null,
             visibleRules.length === 0 ? (React.createElement(SheetFilterEmptyState, { sheetFilter: sheetFilter, label: "conditional format rules" })) : null,
-            visibleRules.map(function (rule) {
+            visibleRules.map(function (rule, ruleIndex) {
                 var _a, _b, _c, _d, _e, _f, _g;
                 var title = rule.gradientRule
                     ? "Color scale"
@@ -139,6 +177,10 @@ export var ConditionalFormatEditor = function (_a) {
                                 } }),
                             "Stop if true")),
                     React.createElement("div", null,
+                        React.createElement(IconButton, { tooltip: "Move up", "aria-label": "Move up", disabled: ruleIndex === 0, onClick: function () { return moveRule(rule, -1); } },
+                            React.createElement(ArrowUpIcon, null)),
+                        React.createElement(IconButton, { tooltip: "Move down", "aria-label": "Move down", disabled: ruleIndex === visibleRules.length - 1, onClick: function () { return moveRule(rule, 1); } },
+                            React.createElement(ArrowDownIcon, 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),

package/dist/cjs/components/editors/conditional-format-icon-set-options.d.ts

@@ -0,0 +1,17 @@
+import type { CfThreshold, IconSetFamily, IconSetRule } from "@rowsncolumns/spreadsheet";
+import React from "react";
+/** Excel's 20 icon styles, in the order of its Icon Style list. */
+export declare const ICON_SET_OPTIONS: Array<[IconSetFamily, string]>;
+/** Excel's default thresholds for an n-icon set: equal percent slices. */
+export declare const defaultIconThresholds: (count: number) => CfThreshold[];
+export type ConditionalFormatIconSetOptionsProps = {
+    rule: IconSetRule | null | undefined;
+    onChange(next: IconSetRule): void;
+};
+/**
+ * Excel-depth icon-set options: icon style, reverse order, icon only, and
+ * one row per icon with its own icon (custom mixes), operator (>= / >),
+ * value and type.
+ */
+export declare const ConditionalFormatIconSetOptions: ({ rule, onChange, }: ConditionalFormatIconSetOptionsProps) => React.JSX.Element;
+//# sourceMappingURL=conditional-format-icon-set-options.d.ts.map

package/dist/cjs/components/editors/conditional-format-icon-set-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conditional-format-icon-set-options.d.ts","sourceRoot":"","sources":["../../../../components/editors/conditional-format-icon-set-options.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,aAAa,EACb,WAAW,EACZ,MAAM,2BAA2B,CAAC;AAYnC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,mEAAmE;AACnE,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,CAAC,aAAa,EAAE,MAAM,CAAC,CAqB3D,CAAC;AAIF,0EAA0E;AAC1E,eAAO,MAAM,qBAAqB,GAAI,OAAO,MAAM,KAAG,WAAW,EAI5D,CAAC;AAKN,MAAM,MAAM,oCAAoC,GAAG;IACjD,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;CACnC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,+BAA+B,GAAI,qBAG7C,oCAAoC,sBA6MtC,CAAC"}

package/dist/cjs/components/editors/conditional-format-icon-set-options.js

@@ -0,0 +1,163 @@
+import { __assign, __read } from "tslib";
+import { CF_ICON_SETS, CfIconPreview } from "@rowsncolumns/spreadsheet";
+import { Input, Select, SelectContent, SelectItem, SelectPortal, SelectTrigger, SelectValue, Stack, } from "@rowsncolumns/ui";
+import React from "react";
+/** Excel's 20 icon styles, in the order of its Icon Style list. */
+export var ICON_SET_OPTIONS = [
+    ["3Arrows", "3 Arrows (Colored)"],
+    ["3ArrowsGray", "3 Arrows (Gray)"],
+    ["3Triangles", "3 Triangles"],
+    ["4Arrows", "4 Arrows (Colored)"],
+    ["4ArrowsGray", "4 Arrows (Gray)"],
+    ["5Arrows", "5 Arrows (Colored)"],
+    ["5ArrowsGray", "5 Arrows (Gray)"],
+    ["3TrafficLights1", "3 Traffic Lights (Unrimmed)"],
+    ["3TrafficLights2", "3 Traffic Lights (Rimmed)"],
+    ["3Signs", "3 Signs"],
+    ["4TrafficLights", "4 Traffic Lights"],
+    ["4RedToBlack", "Red To Black"],
+    ["3Symbols", "3 Symbols (Circled)"],
+    ["3Symbols2", "3 Symbols (Uncircled)"],
+    ["3Flags", "3 Flags"],
+    ["3Stars", "3 Stars"],
+    ["4Rating", "4 Ratings"],
+    ["5Quarters", "5 Quarters"],
+    ["5Rating", "5 Ratings"],
+    ["5Boxes", "5 Boxes"],
+];
+var NO_ICON = "NoIcons:0";
+/** Excel's default thresholds for an n-icon set: equal percent slices. */
+export var defaultIconThresholds = function (count) {
+    return Array.from({ length: count - 1 }, function (_, i) { return ({
+        type: "PERCENT",
+        value: Math.round(((i + 1) * 100) / count),
+    }); });
+};
+var iconCount = function (iconSet) { var _a, _b; return (_b = (_a = CF_ICON_SETS[iconSet]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 3; };
+/**
+ * Excel-depth icon-set options: icon style, reverse order, icon only, and
+ * one row per icon with its own icon (custom mixes), operator (>= / >),
+ * value and type.
+ */
+export var ConditionalFormatIconSetOptions = function (_a) {
+    var rule = _a.rule, onChange = _a.onChange;
+    var value = rule !== null && rule !== void 0 ? rule : {
+        iconSet: "3TrafficLights1",
+        thresholds: defaultIconThresholds(3),
+    };
+    var count = iconCount(value.iconSet);
+    var update = function (patch) {
+        return onChange(__assign(__assign({}, value), patch));
+    };
+    // The icon each bucket shows, lowest bucket first — the custom list when
+    // set, else the style's icons (reversed when asked).
+    var bucketIcons = Array.from({ length: count }, function (_, bucket) {
+        var _a;
+        var custom = (_a = value.icons) === null || _a === void 0 ? void 0 : _a[bucket];
+        if (custom)
+            return custom;
+        var iconId = value.reverse ? count - 1 - bucket : bucket;
+        return { iconSet: value.iconSet, iconId: iconId };
+    });
+    var setBucketIcon = function (bucket, key) {
+        var _a = __read(key.split(":"), 2), iconSet = _a[0], id = _a[1];
+        var icons = bucketIcons.map(function (icon, i) {
+            return i === bucket
+                ? { iconSet: iconSet, iconId: Number(id) }
+                : icon;
+        });
+        update({ icons: icons, reverse: undefined });
+    };
+    var setThreshold = function (index, patch) {
+        var thresholds = value.thresholds.slice();
+        thresholds[index] = __assign(__assign({}, thresholds[index]), patch);
+        update({ thresholds: thresholds });
+    };
+    // Rows top-down from the highest bucket, like Excel's dialog.
+    var rows = Array.from({ length: count }, function (_, i) { return count - 1 - i; });
+    return (React.createElement(Stack, { direction: "vertical", className: "gap-2 pb-1" },
+        React.createElement("label", { className: "font-system text-sm" }, "Icon style"),
+        React.createElement(Select, { value: value.iconSet, onValueChange: function (next) {
+                var family = next;
+                update({
+                    iconSet: family,
+                    icons: undefined,
+                    thresholds: iconCount(family) === count
+                        ? value.thresholds
+                        : defaultIconThresholds(iconCount(family)),
+                });
+            } },
+            React.createElement(SelectTrigger, { className: "text-sm w-72", "aria-label": "Icon style" },
+                React.createElement(SelectValue, null)),
+            React.createElement(SelectPortal, null,
+                React.createElement(SelectContent, null, ICON_SET_OPTIONS.map(function (_a) {
+                    var _b = __read(_a, 2), family = _b[0], label = _b[1];
+                    return (React.createElement(SelectItem, { key: family, value: family },
+                        React.createElement("span", { className: "inline-flex items-center gap-2" },
+                            React.createElement("span", { className: "inline-flex gap-0.5" }, CF_ICON_SETS[family].map(function (_, iconId) { return (React.createElement(CfIconPreview, { key: iconId, iconSet: family, iconId: iconId })); })),
+                            React.createElement("span", null, label))));
+                })))),
+        React.createElement(Stack, { direction: "horizontal", className: "gap-4" },
+            React.createElement("label", { className: "font-system text-sm inline-flex items-center gap-2" },
+                React.createElement("input", { type: "checkbox", checked: !!value.reverse, onChange: function (e) {
+                        // Reversing a custom mix reverses the list itself (Excel).
+                        if (value.icons) {
+                            update({ icons: value.icons.slice().reverse() });
+                        }
+                        else {
+                            update({ reverse: e.target.checked || undefined });
+                        }
+                    } }),
+                "Reverse Icon Order"),
+            React.createElement("label", { className: "font-system text-sm inline-flex items-center gap-2" },
+                React.createElement("input", { type: "checkbox", checked: value.showValue === false, onChange: function (e) {
+                        return update({ showValue: e.target.checked ? false : undefined });
+                    } }),
+                "Show Icon Only")),
+        rows.map(function (bucket) {
+            var _a;
+            var icon = bucketIcons[bucket];
+            var threshold = bucket > 0 ? value.thresholds[bucket - 1] : undefined;
+            return (React.createElement(Stack, { key: bucket, direction: "horizontal", className: "gap-1 items-center" },
+                React.createElement(Select, { value: "".concat(icon.iconSet, ":").concat(icon.iconId), onValueChange: function (key) { return setBucketIcon(bucket, key); } },
+                    React.createElement(SelectTrigger, { className: "text-sm w-16", "aria-label": "Icon ".concat(count - bucket) },
+                        React.createElement(SelectValue, null)),
+                    React.createElement(SelectPortal, null,
+                        React.createElement(SelectContent, null,
+                            React.createElement(SelectItem, { value: NO_ICON }, "No Cell Icon"),
+                            ICON_SET_OPTIONS.flatMap(function (_a) {
+                                var _b = __read(_a, 1), family = _b[0];
+                                return CF_ICON_SETS[family].map(function (_, iconId) { return (React.createElement(SelectItem, { key: "".concat(family, ":").concat(iconId), value: "".concat(family, ":").concat(iconId) },
+                                    React.createElement(CfIconPreview, { iconSet: family, iconId: iconId }))); });
+                            })))),
+                threshold ? (React.createElement(React.Fragment, null,
+                    React.createElement("span", { className: "font-system text-xs" }, "when value is"),
+                    React.createElement(Select, { value: threshold.gte === false ? ">" : ">=", onValueChange: function (op) {
+                            return setThreshold(bucket - 1, {
+                                gte: op === ">" ? false : undefined,
+                            });
+                        } },
+                        React.createElement(SelectTrigger, { className: "text-sm w-14", "aria-label": "Operator ".concat(count - bucket) },
+                            React.createElement(SelectValue, null)),
+                        React.createElement(SelectPortal, null,
+                            React.createElement(SelectContent, null,
+                                React.createElement(SelectItem, { value: ">=" }, ">="),
+                                React.createElement(SelectItem, { value: ">" }, ">")))),
+                    React.createElement(Input, { className: "text-xs w-20", "aria-label": "Value ".concat(count - bucket), value: String((_a = threshold.value) !== null && _a !== void 0 ? _a : ""), onChange: function (e) {
+                            return setThreshold(bucket - 1, { value: e.target.value });
+                        } }),
+                    React.createElement(Select, { value: threshold.type, onValueChange: function (type) {
+                            return setThreshold(bucket - 1, {
+                                type: type,
+                            });
+                        } },
+                        React.createElement(SelectTrigger, { className: "text-sm w-28", "aria-label": "Type ".concat(count - bucket) },
+                            React.createElement(SelectValue, null)),
+                        React.createElement(SelectPortal, null,
+                            React.createElement(SelectContent, null,
+                                React.createElement(SelectItem, { value: "NUMBER" }, "Number"),
+                                React.createElement(SelectItem, { value: "PERCENT" }, "Percent"),
+                                React.createElement(SelectItem, { value: "FORMULA" }, "Formula"),
+                                React.createElement(SelectItem, { value: "PERCENTILE" }, "Percentile")))))) : (React.createElement("span", { className: "font-system text-xs" }, "otherwise"))));
+        })));
+};

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

@@ -23,5 +23,14 @@ export type ConditionalFormatRuleEditorProps = {
 };
 export declare const createBorderCSSFromBorder: (borders: Borders | undefined | null, theme: SpreadsheetTheme) => React.CSSProperties;
 export declare const createRulePreviewStyle: (format: CellFormat | undefined, theme: SpreadsheetTheme) => React.CSSProperties;
+/** Excel's "Format only values that are above or below average" choices. */
+export declare const AVERAGE_OPTIONS: Array<{
+    key: string;
+    label: string;
+    type: "NUMBER_ABOVE_AVERAGE" | "NUMBER_BELOW_AVERAGE";
+    equalAverage?: boolean;
+    stdDev?: number;
+}>;
+export declare const averageOptionKey: (rule: ConditionalFormatRule["booleanRule"]) => string;
 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

@@ -1 +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;AAqCnC,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;AA6CF,eAAO,MAAM,2BAA2B,GAAI,4HAUzC,gCAAgC,sBAsgClC,CAAC"}
+{"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;AAkCnC,OAAO,KAA+C,MAAM,OAAO,CAAC;AAMpE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAU7E,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;AAEF,4EAA4E;AAC5E,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,sBAAsB,GAAG,sBAAsB,CAAC;IACtD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CA2BA,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,MAAM,qBAAqB,CAAC,aAAa,CAAC,KACzC,MAOF,CAAC;AA6CF,eAAO,MAAM,2BAA2B,GAAI,4HAUzC,gCAAgC,sBAk7BlC,CAAC"}