@rowsncolumns/spreadsheet-state 29.2.0 → 29.3.2

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

@@ -1,7 +1,7 @@
 import { __assign, __read, __spreadArray } from "tslib";
 import { useIsomorphicLayoutEffect } from "@rowsncolumns/grid";
 import { CrossCircledIcon } from "@rowsncolumns/icons";
-import { BackgroundColorSelector, BorderSelector, ButtonBold, ButtonItalic, ButtonStrikethrough, ButtonUnderline, CONDITION_LABELS, CONDITION_NONE, FormulaInput, getStringifiedColor, ICON_SET_COLORS, ICON_SET_GLYPHS, shouldShowFromValue, shouldShowToValue, TextColorSelector, useFormulaInputState, useFormulaRangeHelpers, } from "@rowsncolumns/spreadsheet";
+import { BackgroundColorSelector, BorderSelector, ButtonBold, ButtonItalic, ButtonStrikethrough, ButtonUnderline, CONDITION_LABELS, CONDITION_NONE, FormulaInput, getStringifiedColor, shouldShowFromValue, shouldShowToValue, TextColorSelector, useFormulaInputState, useFormulaRangeHelpers, } from "@rowsncolumns/spreadsheet";
 import { Button, IconButton, Input, Select, SelectContent, SelectItem, SelectPortal, SelectTrigger, SelectValue, Stack, } from "@rowsncolumns/ui";
 import { isNil, uuid } from "@rowsncolumns/utils";
 import { useFormik } from "formik";
@@ -9,6 +9,8 @@ import isEqual from "lodash/isEqual";
 import omit from "lodash/omit";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { getBorderWidthFromStyle, getCSSBorderStyleFromStyle, } from "../../api/border";
+import { ConditionalFormatDataBarOptions, DEFAULT_DATA_BAR_RULE, } from "./conditional-format-data-bar-options";
+import { ConditionalFormatIconSetOptions, defaultIconThresholds, } from "./conditional-format-icon-set-options";
 export var createBorderCSSFromBorder = function (borders, theme) {
     if (!borders) {
         return {};
@@ -41,6 +43,43 @@ export var createRulePreviewStyle = function (format, theme) {
             " " +
             (((_e = format === null || format === void 0 ? void 0 : format.textFormat) === null || _e === void 0 ? void 0 : _e.strikethrough) ? "line-through" : "") }, createBorderCSSFromBorder(format === null || format === void 0 ? void 0 : format.borders, theme));
 };
+/** Excel's "Format only values that are above or below average" choices. */
+export var AVERAGE_OPTIONS = __spreadArray(__spreadArray([
+    { key: "above", label: "above", type: "NUMBER_ABOVE_AVERAGE" },
+    { key: "below", label: "below", type: "NUMBER_BELOW_AVERAGE" },
+    {
+        key: "equalAbove",
+        label: "equal or above",
+        type: "NUMBER_ABOVE_AVERAGE",
+        equalAverage: true,
+    },
+    {
+        key: "equalBelow",
+        label: "equal or below",
+        type: "NUMBER_BELOW_AVERAGE",
+        equalAverage: true,
+    }
+], __read([1, 2, 3].map(function (stdDev) { return ({
+    key: "above".concat(stdDev),
+    label: "".concat(stdDev, " std dev above"),
+    type: "NUMBER_ABOVE_AVERAGE",
+    stdDev: stdDev,
+}); })), false), __read([1, 2, 3].map(function (stdDev) { return ({
+    key: "below".concat(stdDev),
+    label: "".concat(stdDev, " std dev below"),
+    type: "NUMBER_BELOW_AVERAGE",
+    stdDev: stdDev,
+}); })), false);
+export var averageOptionKey = function (rule) {
+    var _a;
+    var above = ((_a = rule === null || rule === void 0 ? void 0 : rule.condition) === null || _a === void 0 ? void 0 : _a.type) !== "NUMBER_BELOW_AVERAGE";
+    if (rule === null || rule === void 0 ? void 0 : rule.stdDev) {
+        return "".concat(above ? "above" : "below").concat(rule.stdDev);
+    }
+    if (rule === null || rule === void 0 ? void 0 : rule.equalAverage)
+        return above ? "equalAbove" : "equalBelow";
+    return above ? "above" : "below";
+};
 var ensureFormula = function (value) {
     if (!value)
         return undefined;
@@ -65,16 +104,16 @@ var ConditionalFormatRangeInput = function (_a) {
         }, value: formulaInput.value, required: true, placeholder: "Select a range", autoFocus: autoFocus, className: "mb-0" }));
 };
 export var ConditionalFormatRuleEditor = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19;
     var sheetId = _a.sheetId, conditionalFormatRule = _a.conditionalFormatRule, theme = _a.theme, functionDescriptions = _a.functionDescriptions, locale = _a.locale, idCreationStrategy = _a.idCreationStrategy, onSubmit = _a.onSubmit, onCancel = _a.onCancel, onChange = _a.onChange;
-    var _19 = __read(useState(function () {
+    var _20 = __read(useState(function () {
         var _a, _b, _c;
         return shouldShowToValue((_c = (_b = (_a = conditionalFormatRule.booleanRule) === null || _a === void 0 ? void 0 : _a.condition) === null || _b === void 0 ? void 0 : _b.type) !== null && _c !== void 0 ? _c : undefined);
-    }), 2), showToValue = _19[0], setShowToValue = _19[1];
-    var _20 = __read(useState(function () {
+    }), 2), showToValue = _20[0], setShowToValue = _20[1];
+    var _21 = __read(useState(function () {
         var _a, _b, _c;
         return shouldShowFromValue((_c = (_b = (_a = conditionalFormatRule.booleanRule) === null || _a === void 0 ? void 0 : _a.condition) === null || _b === void 0 ? void 0 : _b.type) !== null && _c !== void 0 ? _c : undefined);
-    }), 2), showFromValue = _20[0], setShowFromValue = _20[1];
+    }), 2), showFromValue = _21[0], setShowFromValue = _21[1];
     var conditionLabelOptions = useMemo(function () {
         return CONDITION_LABELS.filter(function (_a) {
             var condition = _a.condition;
@@ -88,9 +127,9 @@ export var ConditionalFormatRuleEditor = function (_a) {
     }, []);
     var selectedTabRef = useRef("booleanRule");
     // Helpers
-    var _21 = useFormulaRangeHelpers({
+    var _22 = useFormulaRangeHelpers({
         sheetId: sheetId,
-    }), rangeToFormula = _21.rangeToFormula, formulaToRange = _21.formulaToRange;
+    }), rangeToFormula = _22.rangeToFormula, formulaToRange = _22.formulaToRange;
     var sanitizeRuleByTab = function (rule, tab) {
         if (tab === void 0) { tab = selectedTabRef.current; }
         var allRuleKeys = [
@@ -110,14 +149,14 @@ export var ConditionalFormatRuleEditor = function (_a) {
     // state on some hosts).
     var dismissalRef = useRef({ settled: false, dirty: false });
     var restorePreviewRef = useRef(function () { });
-    var _22 = useFormik({
+    var _23 = useFormik({
         initialValues: conditionalFormatRule,
         enableReinitialize: false,
         onSubmit: function (values) {
             dismissalRef.current.settled = true;
             onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(sanitizeRuleByTab(values), sanitizeRuleByTab(initialValues));
         },
-    }), setFieldValue = _22.setFieldValue, resetForm = _22.resetForm, handleSubmit = _22.handleSubmit, values = _22.values, initialValues = _22.initialValues;
+    }), setFieldValue = _23.setFieldValue, resetForm = _23.resetForm, handleSubmit = _23.handleSubmit, values = _23.values, initialValues = _23.initialValues;
     var booleanRule = values.booleanRule, gradientRule = values.gradientRule, topBottomRule = values.topBottomRule, distinctRule = values.distinctRule, iconSetRule = values.iconSetRule, dataBarRule = values.dataBarRule;
     var defaultTabValue = gradientRule
         ? "gradientRule"
@@ -130,17 +169,17 @@ export var ConditionalFormatRuleEditor = function (_a) {
                     : dataBarRule
                         ? "dataBarRule"
                         : "booleanRule";
-    var _23 = __read(useState(defaultTabValue), 2), selectedTab = _23[0], onChangeSelectedTab = _23[1];
+    var _24 = __read(useState(defaultTabValue), 2), selectedTab = _24[0], onChangeSelectedTab = _24[1];
     useEffect(function () {
         selectedTabRef.current = selectedTab;
     }, [selectedTab]);
-    var _24 = useMemo(function () {
+    var _25 = useMemo(function () {
         var _a, _b, _c, _d, _e, _f;
         return {
             fromValue: (_c = (_b = (_a = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.condition) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.userEnteredValue,
             toValue: (_f = (_e = (_d = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.condition) === null || _d === void 0 ? void 0 : _d.values) === null || _e === void 0 ? void 0 : _e[1]) === null || _f === void 0 ? void 0 : _f.userEnteredValue,
         };
-    }, [booleanRule]), fromValue = _24.fromValue, toValue = _24.toValue;
+    }, [booleanRule]), fromValue = _25.fromValue, toValue = _25.toValue;
     var updateBooleanRuleInputs = function (nextFromValue, nextToValue, nextType, includeToValue, includeFromValue) {
         var _a, _b;
         if (nextType === void 0) { nextType = (_a = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.condition) === null || _a === void 0 ? void 0 : _a.type; }
@@ -232,10 +271,7 @@ export var ConditionalFormatRuleEditor = function (_a) {
         if (selectedTab === "iconSetRule" && !values.iconSetRule) {
             setFieldValue("iconSetRule", {
                 iconSet: "3TrafficLights1",
-                thresholds: [
-                    { type: "PERCENT", value: 33 },
-                    { type: "PERCENT", value: 67 },
-                ],
+                thresholds: defaultIconThresholds(3),
             });
         }
     }, [selectedTab, values.iconSetRule]);
@@ -244,11 +280,7 @@ export var ConditionalFormatRuleEditor = function (_a) {
     // "Single color" on reopen). Mirrors the topBottomRule/distinctRule effects.
     useIsomorphicLayoutEffect(function () {
         if (selectedTab === "dataBarRule" && !values.dataBarRule) {
-            setFieldValue("dataBarRule", {
-                minpoint: { type: "MIN" },
-                maxpoint: { type: "MAX" },
-                color: "#638ec6",
-            });
+            setFieldValue("dataBarRule", DEFAULT_DATA_BAR_RULE);
         }
     }, [selectedTab, values.dataBarRule]);
     var len = values.ranges.length;
@@ -381,8 +413,23 @@ export var ConditionalFormatRuleEditor = function (_a) {
                                     var condition = _a.condition, label = _a.label;
                                     return (React.createElement(SelectItem, { key: condition, value: condition }, label));
                                 }))))),
+                ((_e = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.condition) === null || _e === void 0 ? void 0 : _e.type) === "NUMBER_ABOVE_AVERAGE" ||
+                    ((_f = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.condition) === null || _f === void 0 ? void 0 : _f.type) === "NUMBER_BELOW_AVERAGE" ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
+                    React.createElement("label", { className: "font-system text-sm" }, "Format values that are"),
+                    React.createElement(Select, { value: averageOptionKey(booleanRule), onValueChange: function (key) {
+                            var option = AVERAGE_OPTIONS.find(function (o) { return o.key === key; });
+                            if (!option)
+                                return;
+                            setFieldValue("booleanRule.condition.type", option.type);
+                            setFieldValue("booleanRule.equalAverage", option.equalAverage || undefined);
+                            setFieldValue("booleanRule.stdDev", option.stdDev);
+                        } },
+                        React.createElement(SelectTrigger, { className: "text-sm", "aria-label": "Average option" },
+                            React.createElement(SelectValue, null)),
+                        React.createElement(SelectPortal, null,
+                            React.createElement(SelectContent, null, AVERAGE_OPTIONS.map(function (option) { return (React.createElement(SelectItem, { key: option.key, value: option.key }, option.label)); })))))) : null,
                 React.createElement(Stack, { direction: "vertical", className: "gap-1  pb-3" },
-                    showFromValue ? (((_f = (_e = values.booleanRule) === null || _e === void 0 ? void 0 : _e.condition) === null || _f === void 0 ? void 0 : _f.type) === "CUSTOM_FORMULA" ? (React.createElement(FormulaInput, { onChange: function (value) {
+                    showFromValue ? (((_h = (_g = values.booleanRule) === null || _g === void 0 ? void 0 : _g.condition) === null || _h === void 0 ? void 0 : _h.type) === "CUSTOM_FORMULA" ? (React.createElement(FormulaInput, { onChange: function (value) {
                             return updateBooleanRuleInputs(value, undefined, "CUSTOM_FORMULA", false);
                         }, value: fromValue !== null && fromValue !== void 0 ? fromValue : "=", required: true, placeholder: "Enter a formula", autoFocus: true, functionDescriptions: functionDescriptions })) : (React.createElement(Input, { value: fromValue !== null && fromValue !== void 0 ? fromValue : "", type: "text", name: "fromValue", onChange: function (e) {
                             return updateBooleanRuleInputs(e.target.value, toValue);
@@ -393,31 +440,31 @@ export var ConditionalFormatRuleEditor = function (_a) {
                 React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
                     React.createElement("label", { className: "font-system text-sm" }, "Format"),
                     React.createElement(Stack, { direction: "horizontal", className: "gap-1" },
-                        React.createElement(ButtonBold, { type: "button", isActive: (_h = (_g = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.format) === null || _g === void 0 ? void 0 : _g.textFormat) === null || _h === void 0 ? void 0 : _h.bold, onClick: function () {
+                        React.createElement(ButtonBold, { type: "button", isActive: (_k = (_j = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.format) === null || _j === void 0 ? void 0 : _j.textFormat) === null || _k === void 0 ? void 0 : _k.bold, onClick: function () {
                                 var _a, _b;
                                 setFieldValue("booleanRule.format.textFormat.bold", !((_b = (_a = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.format) === null || _a === void 0 ? void 0 : _a.textFormat) === null || _b === void 0 ? void 0 : _b.bold));
                             } }),
-                        React.createElement(ButtonItalic, { isActive: (_k = (_j = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.format) === null || _j === void 0 ? void 0 : _j.textFormat) === null || _k === void 0 ? void 0 : _k.italic, onClick: function () {
+                        React.createElement(ButtonItalic, { isActive: (_m = (_l = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.format) === null || _l === void 0 ? void 0 : _l.textFormat) === null || _m === void 0 ? void 0 : _m.italic, onClick: function () {
                                 var _a, _b;
                                 setFieldValue("booleanRule.format.textFormat.italic", !((_b = (_a = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.format) === null || _a === void 0 ? void 0 : _a.textFormat) === null || _b === void 0 ? void 0 : _b.italic));
                             } }),
-                        React.createElement(ButtonUnderline, { isActive: (_m = (_l = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.format) === null || _l === void 0 ? void 0 : _l.textFormat) === null || _m === void 0 ? void 0 : _m.underline, onClick: function () {
+                        React.createElement(ButtonUnderline, { isActive: (_p = (_o = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.format) === null || _o === void 0 ? void 0 : _o.textFormat) === null || _p === void 0 ? void 0 : _p.underline, onClick: function () {
                                 var _a, _b;
                                 setFieldValue("booleanRule.format.textFormat.underline", !((_b = (_a = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.format) === null || _a === void 0 ? void 0 : _a.textFormat) === null || _b === void 0 ? void 0 : _b.underline));
                             } }),
-                        React.createElement(ButtonStrikethrough, { isActive: (_p = (_o = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.format) === null || _o === void 0 ? void 0 : _o.textFormat) === null || _p === void 0 ? void 0 : _p.strikethrough, onClick: function () {
+                        React.createElement(ButtonStrikethrough, { isActive: (_r = (_q = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.format) === null || _q === void 0 ? void 0 : _q.textFormat) === null || _r === void 0 ? void 0 : _r.strikethrough, onClick: function () {
                                 var _a, _b;
                                 setFieldValue("booleanRule.format.textFormat.strikethrough", !((_b = (_a = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.format) === null || _a === void 0 ? void 0 : _a.textFormat) === null || _b === void 0 ? void 0 : _b.strikethrough));
                             } }),
-                        React.createElement(TextColorSelector, { color: (_r = (_q = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.format) === null || _q === void 0 ? void 0 : _q.textFormat) === null || _r === void 0 ? void 0 : _r.color, theme: theme, 
+                        React.createElement(TextColorSelector, { color: (_t = (_s = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.format) === null || _s === void 0 ? void 0 : _s.textFormat) === null || _t === void 0 ? void 0 : _t.color, theme: theme, 
                             // isDarkMode={isDarkMode}
                             onChange: function (value) {
                                 setFieldValue("booleanRule.format.textFormat.color", value);
                             } }),
-                        React.createElement(BackgroundColorSelector, { color: (_s = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.format) === null || _s === void 0 ? void 0 : _s.backgroundColor, theme: theme, onChange: function (value) {
+                        React.createElement(BackgroundColorSelector, { color: (_u = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.format) === null || _u === void 0 ? void 0 : _u.backgroundColor, theme: theme, onChange: function (value) {
                                 setFieldValue("booleanRule.format.backgroundColor", value);
                             } }),
-                        React.createElement(BorderSelector, { theme: theme, borders: (_t = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.format) === null || _t === void 0 ? void 0 : _t.borders, disabledBorderLocations: [
+                        React.createElement(BorderSelector, { theme: theme, borders: (_v = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.format) === null || _v === void 0 ? void 0 : _v.borders, disabledBorderLocations: [
                                 "all",
                                 "horizontal",
                                 "inner",
@@ -459,7 +506,7 @@ export var ConditionalFormatRuleEditor = function (_a) {
                 React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
                     React.createElement("label", { className: "font-system text-sm" }, "Minpoint"),
                     React.createElement(Stack, { direction: "horizontal", className: "gap-2 items-center" },
-                        React.createElement(Select, { value: (_v = (_u = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.minpoint) === null || _u === void 0 ? void 0 : _u.type) !== null && _v !== void 0 ? _v : "MIN", onValueChange: function (value) {
+                        React.createElement(Select, { value: (_x = (_w = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.minpoint) === null || _w === void 0 ? void 0 : _w.type) !== null && _x !== void 0 ? _x : "MIN", onValueChange: function (value) {
                                 var _a;
                                 setFieldValue("gradientRule.minpoint", __assign(__assign({}, gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.minpoint), { type: value, value: value === "MIN" ? "" : (_a = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.minpoint) === null || _a === void 0 ? void 0 : _a.value }));
                             } },
@@ -471,17 +518,17 @@ export var ConditionalFormatRuleEditor = function (_a) {
                                     React.createElement(SelectItem, { value: "NUMBER" }, "Number"),
                                     React.createElement(SelectItem, { value: "PERCENT" }, "Percent"),
                                     React.createElement(SelectItem, { value: "PERCENTILE" }, "Percentile")))),
-                        React.createElement(Input, { value: (_x = (_w = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.minpoint) === null || _w === void 0 ? void 0 : _w.value) !== null && _x !== void 0 ? _x : "", onChange: function (e) {
+                        React.createElement(Input, { value: (_z = (_y = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.minpoint) === null || _y === void 0 ? void 0 : _y.value) !== null && _z !== void 0 ? _z : "", onChange: function (e) {
                                 return setFieldValue("gradientRule.minpoint.value", e.target.value);
-                            }, disabled: !((_y = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.minpoint) === null || _y === void 0 ? void 0 : _y.type) ||
-                                ((_z = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.minpoint) === null || _z === void 0 ? void 0 : _z.type) === "MIN" }),
-                        React.createElement(BackgroundColorSelector, { color: (_0 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.minpoint) === null || _0 === void 0 ? void 0 : _0.color, theme: theme, onChange: function (value) {
+                            }, disabled: !((_0 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.minpoint) === null || _0 === void 0 ? void 0 : _0.type) ||
+                                ((_1 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.minpoint) === null || _1 === void 0 ? void 0 : _1.type) === "MIN" }),
+                        React.createElement(BackgroundColorSelector, { color: (_2 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.minpoint) === null || _2 === void 0 ? void 0 : _2.color, theme: theme, onChange: function (value) {
                                 setFieldValue("gradientRule.minpoint.color", value);
                             } }))),
                 React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
                     React.createElement("label", { className: "font-system text-sm" }, "Midpoint"),
                     React.createElement(Stack, { direction: "horizontal", className: "gap-2 items-center" },
-                        React.createElement(Select, { value: (_2 = (_1 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.midpoint) === null || _1 === void 0 ? void 0 : _1.type) !== null && _2 !== void 0 ? _2 : CONDITION_NONE, onValueChange: function (value) {
+                        React.createElement(Select, { value: (_4 = (_3 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.midpoint) === null || _3 === void 0 ? void 0 : _3.type) !== null && _4 !== void 0 ? _4 : CONDITION_NONE, onValueChange: function (value) {
                                 setFieldValue("gradientRule.midpoint.type", value);
                                 if (value === "MIN") {
                                     setFieldValue("gradientRule.midpoint.value", "");
@@ -495,18 +542,18 @@ export var ConditionalFormatRuleEditor = function (_a) {
                                     React.createElement(SelectItem, { value: "NUMBER" }, "Number"),
                                     React.createElement(SelectItem, { value: "PERCENT" }, "Percent"),
                                     React.createElement(SelectItem, { value: "PERCENTILE" }, "Percentile")))),
-                        React.createElement(Input, { value: (_4 = (_3 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.midpoint) === null || _3 === void 0 ? void 0 : _3.value) !== null && _4 !== void 0 ? _4 : "", onChange: function (e) {
+                        React.createElement(Input, { value: (_6 = (_5 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.midpoint) === null || _5 === void 0 ? void 0 : _5.value) !== null && _6 !== void 0 ? _6 : "", onChange: function (e) {
                                 return setFieldValue("gradientRule.midpoint.value", e.target.value);
-                            }, disabled: !((_5 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.midpoint) === null || _5 === void 0 ? void 0 : _5.type) ||
-                                ((_6 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.midpoint) === null || _6 === void 0 ? void 0 : _6.type) ===
+                            }, disabled: !((_7 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.midpoint) === null || _7 === void 0 ? void 0 : _7.type) ||
+                                ((_8 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.midpoint) === null || _8 === void 0 ? void 0 : _8.type) ===
                                     CONDITION_NONE }),
-                        React.createElement(BackgroundColorSelector, { color: (_7 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.midpoint) === null || _7 === void 0 ? void 0 : _7.color, theme: theme, onChange: function (value) {
+                        React.createElement(BackgroundColorSelector, { color: (_9 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.midpoint) === null || _9 === void 0 ? void 0 : _9.color, theme: theme, onChange: function (value) {
                                 setFieldValue("gradientRule.midpoint.color", value);
                             } }))),
                 React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
                     React.createElement("label", { className: "font-system text-sm" }, "Maxpoint"),
                     React.createElement(Stack, { direction: "horizontal", className: "gap-2 items-center" },
-                        React.createElement(Select, { value: (_9 = (_8 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.maxpoint) === null || _8 === void 0 ? void 0 : _8.type) !== null && _9 !== void 0 ? _9 : "MAX", onValueChange: function (value) {
+                        React.createElement(Select, { value: (_11 = (_10 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.maxpoint) === null || _10 === void 0 ? void 0 : _10.type) !== null && _11 !== void 0 ? _11 : "MAX", onValueChange: function (value) {
                                 setFieldValue("gradientRule.maxpoint.type", value);
                                 if (value === "MIN") {
                                     setFieldValue("gradientRule.maxpoint.value", "");
@@ -520,18 +567,18 @@ export var ConditionalFormatRuleEditor = function (_a) {
                                     React.createElement(SelectItem, { value: "NUMBER" }, "Number"),
                                     React.createElement(SelectItem, { value: "PERCENT" }, "Percent"),
                                     React.createElement(SelectItem, { value: "PERCENTILE" }, "Percentile")))),
-                        React.createElement(Input, { value: (_11 = (_10 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.maxpoint) === null || _10 === void 0 ? void 0 : _10.value) !== null && _11 !== void 0 ? _11 : "", onChange: function (e) {
+                        React.createElement(Input, { value: (_13 = (_12 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.maxpoint) === null || _12 === void 0 ? void 0 : _12.value) !== null && _13 !== void 0 ? _13 : "", onChange: function (e) {
                                 return setFieldValue("gradientRule.maxpoint.value", e.target.value);
-                            }, disabled: !((_12 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.maxpoint) === null || _12 === void 0 ? void 0 : _12.type) ||
-                                ((_13 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.maxpoint) === null || _13 === void 0 ? void 0 : _13.type) === "MAX" }),
-                        React.createElement(BackgroundColorSelector, { color: (_14 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.maxpoint) === null || _14 === void 0 ? void 0 : _14.color, theme: theme, onChange: function (value) {
+                            }, disabled: !((_14 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.maxpoint) === null || _14 === void 0 ? void 0 : _14.type) ||
+                                ((_15 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.maxpoint) === null || _15 === void 0 ? void 0 : _15.type) === "MAX" }),
+                        React.createElement(BackgroundColorSelector, { color: (_16 = gradientRule === null || gradientRule === void 0 ? void 0 : gradientRule.maxpoint) === null || _16 === void 0 ? void 0 : _16.color, theme: theme, onChange: function (value) {
                                 setFieldValue("gradientRule.maxpoint.color", value);
                             } }))))),
             selectedTab === "topBottomRule" && (React.createElement(React.Fragment, null,
                 React.createElement(Stack, { direction: "vertical", className: "gap-2 pb-3" },
                     React.createElement("label", { className: "font-system text-sm" }, "Rule"),
                     React.createElement(Stack, { direction: "horizontal", className: "gap-2 items-center" },
-                        React.createElement(Select, { value: (_15 = topBottomRule === null || topBottomRule === void 0 ? void 0 : topBottomRule.type) !== null && _15 !== void 0 ? _15 : "TOP", onValueChange: function (value) {
+                        React.createElement(Select, { value: (_17 = topBottomRule === null || topBottomRule === void 0 ? void 0 : topBottomRule.type) !== null && _17 !== void 0 ? _17 : "TOP", onValueChange: function (value) {
                                 setFieldValue("topBottomRule.type", value);
                             } },
                             React.createElement(SelectTrigger, { className: "text-sm" },
@@ -540,7 +587,7 @@ export var ConditionalFormatRuleEditor = function (_a) {
                                 React.createElement(SelectContent, null,
                                     React.createElement(SelectItem, { value: "TOP" }, "Top"),
                                     React.createElement(SelectItem, { value: "BOTTOM" }, "Bottom")))),
-                        React.createElement(Input, { className: "text-xs", type: "number", min: 1, value: (_16 = topBottomRule === null || topBottomRule === void 0 ? void 0 : topBottomRule.rank) !== null && _16 !== void 0 ? _16 : 5, onChange: function (event) {
+                        React.createElement(Input, { className: "text-xs", type: "number", min: 1, value: (_18 = topBottomRule === null || topBottomRule === void 0 ? void 0 : topBottomRule.rank) !== null && _18 !== void 0 ? _18 : 5, onChange: function (event) {
                                 var value = Number(event.target.value);
                                 setFieldValue("topBottomRule.rank", Number.isNaN(value) ? 1 : Math.max(1, value));
                             } }),
@@ -556,7 +603,7 @@ export var ConditionalFormatRuleEditor = function (_a) {
             selectedTab === "distinctRule" && (React.createElement(React.Fragment, null,
                 React.createElement(Stack, { direction: "vertical", className: "gap-2 pb-3" },
                     React.createElement("label", { className: "font-system text-sm" }, "Rule"),
-                    React.createElement(Select, { value: (_17 = distinctRule === null || distinctRule === void 0 ? void 0 : distinctRule.type) !== null && _17 !== void 0 ? _17 : "DUPLICATE", onValueChange: function (value) {
+                    React.createElement(Select, { value: (_19 = distinctRule === null || distinctRule === void 0 ? void 0 : distinctRule.type) !== null && _19 !== void 0 ? _19 : "DUPLICATE", onValueChange: function (value) {
                             setFieldValue("distinctRule.type", value);
                         } },
                         React.createElement(SelectTrigger, { className: "text-sm mb-0 w-40" },
@@ -569,83 +616,8 @@ export var ConditionalFormatRuleEditor = function (_a) {
                 React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
                     React.createElement("label", { className: "font-system text-sm" }, "Preview"),
                     React.createElement("div", { className: "p-2 text-center shadow-lg", style: createRulePreviewStyle(distinctRule === null || distinctRule === void 0 ? void 0 : distinctRule.format, theme) }, "AaBbCcYyZz")))),
-            selectedTab === "iconSetRule" && (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-1" },
-                React.createElement("label", { className: "font-system text-sm" }, "Icon set"),
-                React.createElement(Select, { value: (_18 = iconSetRule === null || iconSetRule === void 0 ? void 0 : iconSetRule.iconSet) !== null && _18 !== void 0 ? _18 : "3TrafficLights1", onValueChange: function (value) {
-                        var _a;
-                        // Default thresholds at 33% / 67% to bucket the value range
-                        // into 3 equal slices when switching to a 3-icon set, etc.
-                        var familyDefaults = {
-                            "3": [{ value: 33 }, { value: 67 }],
-                            "4": [{ value: 25 }, { value: 50 }, { value: 75 }],
-                            "5": [
-                                { value: 20 },
-                                { value: 40 },
-                                { value: 60 },
-                                { value: 80 },
-                            ],
-                        };
-                        var count = value.startsWith("5")
-                            ? "5"
-                            : value.startsWith("4")
-                                ? "4"
-                                : "3";
-                        setFieldValue("iconSetRule.iconSet", value);
-                        if (!((_a = iconSetRule === null || iconSetRule === void 0 ? void 0 : iconSetRule.thresholds) === null || _a === void 0 ? void 0 : _a.length)) {
-                            setFieldValue("iconSetRule.thresholds", familyDefaults[count].map(function (t) { return ({
-                                type: "PERCENT",
-                                value: t.value,
-                            }); }));
-                        }
-                    } },
-                    React.createElement(SelectTrigger, { className: "text-sm mb-0 w-64" },
-                        React.createElement(SelectValue, { placeholder: "3 Traffic Lights" })),
-                    React.createElement(SelectPortal, null,
-                        React.createElement(SelectContent, null, [
-                            ["3Arrows", "3 Arrows"],
-                            ["3TrafficLights1", "3 Traffic Lights"],
-                            ["3Signs", "3 Signs"],
-                            ["3Symbols", "3 Symbols"],
-                            ["3Flags", "3 Flags"],
-                            ["4Arrows", "4 Arrows"],
-                            ["4Rating", "4 Rating"],
-                            ["4TrafficLights", "4 Traffic Lights"],
-                            ["5Arrows", "5 Arrows"],
-                            ["5Rating", "5 Rating"],
-                            ["5Quarters", "5 Quarters"],
-                        ].map(function (_a) {
-                            var _b = __read(_a, 2), family = _b[0], label = _b[1];
-                            var glyphs = ICON_SET_GLYPHS[family];
-                            var colors = ICON_SET_COLORS[family];
-                            return (React.createElement(SelectItem, { key: family, value: family },
-                                React.createElement("span", { className: "inline-flex items-center gap-2" },
-                                    React.createElement("span", null, label),
-                                    React.createElement("span", { className: "inline-flex gap-0.5" }, glyphs.map(function (glyph, i) { return (React.createElement("span", { key: i, style: { color: colors[i] } }, glyph)); })))));
-                        })))),
-                React.createElement("label", { className: "font-system text-sm mt-2 inline-flex items-center gap-2" },
-                    React.createElement("input", { type: "checkbox", checked: !!(iconSetRule === null || iconSetRule === void 0 ? void 0 : iconSetRule.reverse), onChange: function (e) {
-                            setFieldValue("iconSetRule.reverse", e.target.checked);
-                        } }),
-                    "Reverse icon order"))),
-            selectedTab === "dataBarRule" && (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-1" },
-                React.createElement("label", { className: "font-system text-sm" }, "Bar color"),
-                React.createElement(Input, { type: "color", value: typeof (dataBarRule === null || dataBarRule === void 0 ? void 0 : dataBarRule.color) === "string"
-                        ? dataBarRule.color
-                        : "#638ec6", onChange: function (e) {
-                        setFieldValue("dataBarRule.color", e.target.value);
-                        if (!(dataBarRule === null || dataBarRule === void 0 ? void 0 : dataBarRule.minpoint)) {
-                            setFieldValue("dataBarRule.minpoint", { type: "MIN" });
-                        }
-                        if (!(dataBarRule === null || dataBarRule === void 0 ? void 0 : dataBarRule.maxpoint)) {
-                            setFieldValue("dataBarRule.maxpoint", { type: "MAX" });
-                        }
-                    }, className: "w-24 h-8" }),
-                React.createElement("label", { className: "font-system text-sm mt-2" }, "Negative color (optional)"),
-                React.createElement(Input, { type: "color", value: typeof (dataBarRule === null || dataBarRule === void 0 ? void 0 : dataBarRule.negativeColor) === "string"
-                        ? dataBarRule.negativeColor
-                        : "#dc2626", onChange: function (e) {
-                        setFieldValue("dataBarRule.negativeColor", e.target.value);
-                    }, className: "w-24 h-8" })))),
+            selectedTab === "iconSetRule" && (React.createElement(ConditionalFormatIconSetOptions, { rule: iconSetRule, onChange: function (next) { return setFieldValue("iconSetRule", next); } })),
+            selectedTab === "dataBarRule" && (React.createElement(ConditionalFormatDataBarOptions, { rule: dataBarRule, theme: theme, onChange: function (next) { return setFieldValue("dataBarRule", next); } }))),
         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"))));

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

@@ -1,17 +1,24 @@
 import React from "react";
 /**
- * "all", or a specific sheet id a rule list is narrowed to.
+ * "all", "selection" (Excel's "Show formatting rules for: Current Selection"), or a specific sheet
+ * id a rule list is narrowed to.
  */
-export type SheetFilter = number | "all";
+export type SheetFilter = number | "all" | "selection";
+type FilterRange = {
+    sheetId?: number;
+    startRowIndex?: number;
+    endRowIndex?: number;
+    startColumnIndex?: number;
+    endColumnIndex?: number;
+};
 type RuleWithRanges = {
-    ranges?: {
-        sheetId?: number;
-    }[];
+    ranges?: FilterRange[];
 };
 /**
- * A rule belongs to a sheet when any of its ranges targets that sheet.
+ * A rule belongs to a sheet when any of its ranges targets that sheet, and to the current selection
+ * when any of its ranges overlaps a selected range.
  */
-export declare function filterRulesBySheet<T extends RuleWithRanges>(rules: T[], filter: SheetFilter): T[];
+export declare function filterRulesBySheet<T extends RuleWithRanges>(rules: T[], filter: SheetFilter, selectionRanges?: readonly FilterRange[]): T[];
 /**
  * Sheet ids that appear in at least one rule's ranges, in first-seen order.
  */
@@ -51,17 +58,21 @@ export declare function getFilterableSheetIds(rules: RuleWithRanges[], sheetId:
  *
  * `workbookSheetIds` is the workbook's sheets in tab order; see getFilterableSheetIds.
  */
-export declare function useSheetFilter<T extends RuleWithRanges>(sheetId: number, rules: T[], workbookSheetIds?: readonly number[]): {
+export declare function useSheetFilter<T extends RuleWithRanges>(sheetId: number, rules: T[], workbookSheetIds?: readonly number[], 
+/** The selected ranges (with `sheetId`), read when "Current selection" is chosen. */
+getSelectionRanges?: () => readonly FilterRange[]): {
     sheetFilter: SheetFilter;
     setSheetFilter: React.Dispatch<React.SetStateAction<SheetFilter>>;
     filterableSheetIds: number[];
     visibleRules: T[];
     showFilter: boolean;
 };
-export declare const SheetFilterSelect: ({ value, sheetIds, onValueChange, }: {
+export declare const SheetFilterSelect: ({ value, sheetIds, onValueChange, offerSelection, }: {
     value: SheetFilter;
     sheetIds: number[];
     onValueChange: (value: SheetFilter) => void;
+    /** Offer "Current selection" (the Conditional Formatting Rules Manager does). */
+    offerSelection?: boolean;
 }) => React.JSX.Element;
 export declare const SheetFilterEmptyState: ({ sheetFilter, label, }: {
     sheetFilter: SheetFilter;

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

@@ -1 +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;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,cAAc,EAAE,EACvB,OAAO,EAAE,MAAM,EACf,gBAAgB,CAAC,EAAE,SAAS,MAAM,EAAE,GACnC,MAAM,EAAE,CAKV;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,EACrD,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,CAAC,EAAE,EACV,gBAAgB,CAAC,EAAE,SAAS,MAAM,EAAE;;;;;;EA8BrC;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"}
+{"version":3,"file":"sheet-filter.d.ts","sourceRoot":"","sources":["../../../../components/editors/sheet-filter.tsx"],"names":[],"mappings":"AASA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,KAAK,GAAG,WAAW,CAAC;AAEvD,KAAK,WAAW,GAAG;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;CACxB,CAAC;AASF;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,cAAc,EACzD,KAAK,EAAE,CAAC,EAAE,EACV,MAAM,EAAE,WAAW,EACnB,eAAe,GAAE,SAAS,WAAW,EAAO,GAC3C,CAAC,EAAE,CAYL;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;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,cAAc,EAAE,EACvB,OAAO,EAAE,MAAM,EACf,gBAAgB,CAAC,EAAE,SAAS,MAAM,EAAE,GACnC,MAAM,EAAE,CAKV;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,EACrD,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,CAAC,EAAE,EACV,gBAAgB,CAAC,EAAE,SAAS,MAAM,EAAE;AACpC,qFAAqF;AACrF,kBAAkB,CAAC,EAAE,MAAM,SAAS,WAAW,EAAE;;;;;;EAoClD;AAED,eAAO,MAAM,iBAAiB,GAAI,qDAK/B;IACD,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,aAAa,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,iFAAiF;IACjF,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,sBAkCA,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,yBAGnC;IACD,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;CACf,sBASA,CAAC"}

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

@@ -2,13 +2,31 @@ import { __read, __spreadArray, __values } from "tslib";
 import { useGetSheetName } from "@rowsncolumns/spreadsheet";
 import { Select, SelectContent, SelectItem, SelectPortal, SelectTrigger, SelectValue, } from "@rowsncolumns/ui";
 import React, { useEffect, useMemo, useState } from "react";
+var rangesIntersect = function (a, b) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return a.sheetId === b.sheetId &&
+        ((_a = a.startRowIndex) !== null && _a !== void 0 ? _a : 0) <= ((_b = b.endRowIndex) !== null && _b !== void 0 ? _b : Number.MAX_SAFE_INTEGER) &&
+        ((_c = b.startRowIndex) !== null && _c !== void 0 ? _c : 0) <= ((_d = a.endRowIndex) !== null && _d !== void 0 ? _d : Number.MAX_SAFE_INTEGER) &&
+        ((_e = a.startColumnIndex) !== null && _e !== void 0 ? _e : 0) <= ((_f = b.endColumnIndex) !== null && _f !== void 0 ? _f : Number.MAX_SAFE_INTEGER) &&
+        ((_g = b.startColumnIndex) !== null && _g !== void 0 ? _g : 0) <= ((_h = a.endColumnIndex) !== null && _h !== void 0 ? _h : Number.MAX_SAFE_INTEGER);
+};
 /**
- * A rule belongs to a sheet when any of its ranges targets that sheet.
+ * A rule belongs to a sheet when any of its ranges targets that sheet, and to the current selection
+ * when any of its ranges overlaps a selected range.
  */
-export function filterRulesBySheet(rules, filter) {
-    return filter === "all"
-        ? rules
-        : rules.filter(function (rule) { var _a; return (_a = rule.ranges) === null || _a === void 0 ? void 0 : _a.some(function (range) { return range.sheetId === filter; }); });
+export function filterRulesBySheet(rules, filter, selectionRanges) {
+    if (selectionRanges === void 0) { selectionRanges = []; }
+    if (filter === "all")
+        return rules;
+    if (filter === "selection") {
+        return rules.filter(function (rule) {
+            var _a;
+            return (_a = rule.ranges) === null || _a === void 0 ? void 0 : _a.some(function (range) {
+                return selectionRanges.some(function (selected) { return rangesIntersect(range, selected); });
+            });
+        });
+    }
+    return rules.filter(function (rule) { var _a; return (_a = rule.ranges) === null || _a === void 0 ? void 0 : _a.some(function (range) { return range.sheetId === filter; }); });
 }
 /**
  * Sheet ids that appear in at least one rule's ranges, in first-seen order.
@@ -85,13 +103,22 @@ export function getFilterableSheetIds(rules, sheetId, workbookSheetIds) {
  *
  * `workbookSheetIds` is the workbook's sheets in tab order; see getFilterableSheetIds.
  */
-export function useSheetFilter(sheetId, rules, workbookSheetIds) {
-    var _a = __read(useState(sheetId), 2), sheetFilter = _a[0], setSheetFilter = _a[1];
+export function useSheetFilter(sheetId, rules, workbookSheetIds, 
+/** The selected ranges (with `sheetId`), read when "Current selection" is chosen. */
+getSelectionRanges) {
+    var _a;
+    var _b = __read(useState(sheetId), 2), sheetFilter = _b[0], setSheetFilter = _b[1];
     useEffect(function () {
         setSheetFilter(sheetId);
     }, [sheetId]);
     var filterableSheetIds = useMemo(function () { return getFilterableSheetIds(rules, sheetId, workbookSheetIds); }, [rules, sheetId, workbookSheetIds]);
-    var visibleRules = useMemo(function () { return filterRulesBySheet(rules, sheetFilter); }, [rules, sheetFilter]);
+    var sheetRules = useMemo(function () {
+        return sheetFilter === "selection" ? rules : filterRulesBySheet(rules, sheetFilter);
+    }, [rules, sheetFilter]);
+    // The selection can move while the (non-modal) dialog is open, so it is read on every render.
+    var visibleRules = sheetFilter === "selection"
+        ? filterRulesBySheet(rules, "selection", (_a = getSelectionRanges === null || getSelectionRanges === void 0 ? void 0 : getSelectionRanges()) !== null && _a !== void 0 ? _a : [])
+        : sheetRules;
     var showFilter = shouldShowSheetFilter({
         ruleCount: rules.length,
         sheetFilter: sheetFilter,
@@ -106,17 +133,18 @@ export function useSheetFilter(sheetId, rules, workbookSheetIds) {
     };
 }
 export var SheetFilterSelect = function (_a) {
-    var value = _a.value, sheetIds = _a.sheetIds, onValueChange = _a.onValueChange;
+    var value = _a.value, sheetIds = _a.sheetIds, onValueChange = _a.onValueChange, _b = _a.offerSelection, offerSelection = _b === void 0 ? false : _b;
     var getSheetName = useGetSheetName();
     return (React.createElement("div", { className: "flex items-center gap-2 p-2 text-sm border-0 border-solid border-b border-rnc-border" },
         React.createElement("label", { className: "text-rnc-muted-foreground whitespace-nowrap" }, "Show rules for"),
-        React.createElement(Select, { value: value === "all" ? "all" : String(value), onValueChange: function (next) {
-                onValueChange(next === "all" ? "all" : Number(next));
+        React.createElement(Select, { value: typeof value === "number" ? String(value) : value, onValueChange: function (next) {
+                onValueChange(next === "all" || next === "selection" ? next : Number(next));
             } },
             React.createElement(SelectTrigger, { className: "text-sm" },
                 React.createElement(SelectValue, null)),
             React.createElement(SelectPortal, null,
                 React.createElement(SelectContent, null,
+                    offerSelection ? (React.createElement(SelectItem, { value: "selection" }, "Current selection")) : null,
                     React.createElement(SelectItem, { value: "all" }, "All sheets"),
                     sheetIds.map(function (id) {
                         var _a;
@@ -128,5 +156,9 @@ export var SheetFilterEmptyState = function (_a) {
     return (React.createElement("div", { className: "p-4 text-sm text-rnc-muted-foreground text-center" },
         "No ",
         label,
-        sheetFilter === "all" ? "" : " in this sheet"));
+        sheetFilter === "all"
+            ? ""
+            : sheetFilter === "selection"
+                ? " in the current selection"
+                : " in this sheet"));
 };

package/dist/cjs/hooks/use-conditional-formatting-rules.d.ts

@@ -1,4 +1,5 @@
 import type { ConditionalFormatRule } from "@rowsncolumns/spreadsheet";
+import { type ConditionalFormatPriorityUpdate } from "../interface/conditional-formatting-rules";
 import type { useCalculation } from "./use-calculation";
 import type { SpreadsheetPatch } from "./use-undo-redo";
 export type UseConditionalFormattingRulesProps = {
@@ -17,6 +18,7 @@ export declare const useConditionalFormattingRules: ({ enqueueCalculation, creat
     onCreateConditionalFormattingRule: (rule: ConditionalFormatRule) => void;
     onUpdateConditionalFormattingRule: (updatedRule: ConditionalFormatRule, previousRule: ConditionalFormatRule) => void;
     onDeleteConditionalFormattingRule: (rule: ConditionalFormatRule) => void;
+    onReorderConditionalFormattingRules: (updates: ConditionalFormatPriorityUpdate[]) => void;
     onPreviewConditionalFormattingRule: (rule: ConditionalFormatRule) => void;
 };
 //# sourceMappingURL=use-conditional-formatting-rules.d.ts.map

package/dist/cjs/hooks/use-conditional-formatting-rules.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-conditional-formatting-rules.d.ts","sourceRoot":"","sources":["../../../hooks/use-conditional-formatting-rules.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAUvE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAcxD,MAAM,MAAM,kCAAkC,GAAG;IAC/C,kBAAkB,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,oBAAoB,CAAC,CAAC;IAC5E;;;OAGG;IACH,aAAa,EAAE,MAAM,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,0BAA0B,CAAC,EAAE,KAAK,CAAC,QAAQ,CACzC,KAAK,CAAC,cAAc,CAAC,qBAAqB,EAAE,CAAC,CAC9C,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,6BAA6B,GAAI,oEAI3C,kCAAkC;8CAK1B,qBAAqB;qDAwBb,qBAAqB,gBACpB,qBAAqB;8CA2B9B,qBAAqB;+CAuBrB,qBAAqB;CAgB/B,CAAC"}
+{"version":3,"file":"use-conditional-formatting-rules.d.ts","sourceRoot":"","sources":["../../../hooks/use-conditional-formatting-rules.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAGvE,OAAO,EAGL,KAAK,+BAA+B,EAIrC,MAAM,2CAA2C,CAAC;AAEnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAcxD,MAAM,MAAM,kCAAkC,GAAG;IAC/C,kBAAkB,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,oBAAoB,CAAC,CAAC;IAC5E;;;OAGG;IACH,aAAa,EAAE,MAAM,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,0BAA0B,CAAC,EAAE,KAAK,CAAC,QAAQ,CACzC,KAAK,CAAC,cAAc,CAAC,qBAAqB,EAAE,CAAC,CAC9C,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,6BAA6B,GAAI,oEAI3C,kCAAkC;8CAK1B,qBAAqB;qDAwBb,qBAAqB,gBACpB,qBAAqB;8CA2B9B,qBAAqB;mDAuBlB,+BAA+B,EAAE;+CAyBpC,qBAAqB;CAiB/B,CAAC"}