@rowsncolumns/spreadsheet-state 29.2.0 → 29.3.3

package/dist/esm/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/esm/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/esm/components/editors/conditional-format-data-bar-options.js

@@ -0,0 +1,145 @@
+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 const 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,
+};
+const 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" },
+];
+const defaultBoundValue = (type, bound) => type === "NUMBER" || type === "FORMULA"
+    ? bound === "min"
+        ? "0"
+        : "100"
+    : type === "PERCENT" || type === "PERCENTILE"
+        ? bound === "min"
+            ? "10"
+            : "90"
+        : undefined;
+const colorInputValue = (color, theme, fallback) => {
+    const 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 const ConditionalFormatDataBarOptions = ({ rule, theme, onChange, }) => {
+    const value = rule ?? DEFAULT_DATA_BAR_RULE;
+    const update = (patch) => onChange({ ...value, ...patch });
+    const boundEditor = (bound) => {
+        const key = bound === "min" ? "minpoint" : "maxpoint";
+        const threshold = value[key];
+        const 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: (type) => {
+                    const nextType = type === "MIN" && bound === "max"
+                        ? "MAX"
+                        : type;
+                    update({
+                        [key]: {
+                            type: nextType,
+                            value: defaultBoundValue(nextType, bound),
+                        },
+                    });
+                } },
+                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((option) => (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(threshold.value ?? ""), onChange: (e) => update({ [key]: { ...threshold, value: e.target.value } }) })) : null));
+    };
+    const negativeSameFill = !value.negativeColor;
+    const negativeSameBorder = !value.negativeBorderColor;
+    const 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: (fill) => 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: (e) => update({ color: e.target.value }) })),
+        React.createElement(Stack, { direction: "horizontal", className: "gap-2 items-center" },
+            React.createElement(Select, { value: hasBorder ? "solid" : "none", onValueChange: (border) => update({
+                    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: (e) => 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: value.direction ?? "context", onValueChange: (direction) => 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: (e) => 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: (e) => 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: (e) => 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: (e) => 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: (e) => 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: value.axisPosition ?? "none", onValueChange: (axis) => 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: (e) => update({ axisColor: e.target.value }) })) : null)));
+};

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

@@ -1,14 +1,14 @@
 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";
 import { useConditionalFormatDialogState } from "../../atoms/dialog-state.atom";
 import { ConditionalFormatRuleEditor, createRulePreviewStyle, } from "./conditional-format-rule-editor";
 import { SheetFilterEmptyState, SheetFilterSelect, useSheetFilter, } from "./sheet-filter";
-export const ConditionalFormatEditor = ({ sheets, sheetId, theme, conditionalFormats, functionDescriptions, locale, idCreationStrategy, onCreateRule, onDeleteRule, onUpdateRule, onPreviewRule, }) => {
+export const ConditionalFormatEditor = ({ sheets, sheetId, theme, conditionalFormats, functionDescriptions, locale, idCreationStrategy, onCreateRule, onDeleteRule, onUpdateRule, onPreviewRule, onReorderRules, }) => {
     const [editingId, setEditingId] = useState();
     // 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
@@ -20,7 +20,32 @@ export const ConditionalFormatEditor = ({ sheets, sheetId, theme, conditionalFor
         sheetId,
     });
     const workbookSheetIds = useMemo(() => sheets?.map((sheet) => sheet.sheetId), [sheets]);
-    const { sheetFilter, setSheetFilter, filterableSheetIds, visibleRules, showFilter, } = useSheetFilter(sheetId, conditionalFormats, workbookSheetIds);
+    // Excel lists rules in precedence order: the first rule wins a conflicting format.
+    const rulesInPrecedenceOrder = useMemo(() => sortConditionalFormatRules(conditionalFormats), [conditionalFormats]);
+    const { sheetFilter, setSheetFilter, filterableSheetIds, visibleRules, showFilter, } = useSheetFilter(sheetId, rulesInPrecedenceOrder, workbookSheetIds, () => {
+        const activeSheet = api?.getActiveSheet();
+        const selections = activeSheet?.getSelections();
+        const activeCell = activeSheet?.getActiveCell();
+        if (!selections?.length && !activeCell)
+            return [];
+        const ranges = (selections?.length
+            ? selections
+            : selectionFromActiveCell(activeCell)).map((selection) => selection.range);
+        return ranges.map((range) => ({ ...range, sheetId }));
+    });
+    // Move Up / Move Down among the rules the list shows ("Show formatting rules for" may hide some).
+    const moveRule = (rule, direction) => {
+        const updates = planConditionalFormatMove(conditionalFormats, rule.id, direction, visibleRules);
+        if (!updates.length)
+            return;
+        if (onReorderRules) {
+            onReorderRules(updates);
+            return;
+        }
+        for (const { rule: target, priority } of updates) {
+            onUpdateRule?.({ ...target, priority }, target);
+        }
+    };
     const onNewRule = () => {
         const activeCell = api?.getActiveSheet()?.getActiveCell();
         const selections = api?.getActiveSheet()?.getSelections();
@@ -59,9 +84,11 @@ export const ConditionalFormatEditor = ({ sheets, sheetId, theme, conditionalFor
     // Duplicate a rule
     const onDuplicate = (rule) => {
         const id = idCreationStrategy?.("conditional-format") ?? uuid();
-        // Create a new rule
+        // 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.
+        const { priority: _priority, ...copy } = rule;
         onCreateRule?.({
-            ...rule,
+            ...copy,
             id,
         });
     };
@@ -88,9 +115,9 @@ export const ConditionalFormatEditor = ({ sheets, sheetId, theme, conditionalFor
                 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((rule) => {
+            visibleRules.map((rule, ruleIndex) => {
                 const title = rule.gradientRule
                     ? "Color scale"
                     : rule.topBottomRule
@@ -136,6 +163,10 @@ export const ConditionalFormatEditor = ({ sheets, sheetId, theme, conditionalFor
                             React.createElement("input", { type: "checkbox", checked: Boolean(rule.stopIfTrue), onChange: (event) => toggleStopIfTrue(rule.id, event.target.checked) }),
                             "Stop if true")),
                     React.createElement("div", null,
+                        React.createElement(IconButton, { tooltip: "Move up", "aria-label": "Move up", disabled: ruleIndex === 0, onClick: () => moveRule(rule, -1) },
+                            React.createElement(ArrowUpIcon, null)),
+                        React.createElement(IconButton, { tooltip: "Move down", "aria-label": "Move down", disabled: ruleIndex === visibleRules.length - 1, onClick: () => moveRule(rule, 1) },
+                            React.createElement(ArrowDownIcon, null)),
                         React.createElement(IconButton, { tooltip: `${enabled ? "Disable" : "Enable"} this rule`, onClick: () => toggleEnable(rule.id, !enabled), className: "relative" },
                             React.createElement(BoxIcon, null),
                             enabled ? (React.createElement(CheckIcon, { className: "left-[4px] top-[5px] absolute" })) : null),

package/dist/esm/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/esm/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/esm/components/editors/conditional-format-icon-set-options.js

@@ -0,0 +1,139 @@
+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 const 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"],
+];
+const NO_ICON = "NoIcons:0";
+/** Excel's default thresholds for an n-icon set: equal percent slices. */
+export const defaultIconThresholds = (count) => Array.from({ length: count - 1 }, (_, i) => ({
+    type: "PERCENT",
+    value: Math.round(((i + 1) * 100) / count),
+}));
+const iconCount = (iconSet) => CF_ICON_SETS[iconSet]?.length ?? 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 const ConditionalFormatIconSetOptions = ({ rule, onChange, }) => {
+    const value = rule ?? {
+        iconSet: "3TrafficLights1",
+        thresholds: defaultIconThresholds(3),
+    };
+    const count = iconCount(value.iconSet);
+    const update = (patch) => onChange({ ...value, ...patch });
+    // The icon each bucket shows, lowest bucket first — the custom list when
+    // set, else the style's icons (reversed when asked).
+    const bucketIcons = Array.from({ length: count }, (_, bucket) => {
+        const custom = value.icons?.[bucket];
+        if (custom)
+            return custom;
+        const iconId = value.reverse ? count - 1 - bucket : bucket;
+        return { iconSet: value.iconSet, iconId };
+    });
+    const setBucketIcon = (bucket, key) => {
+        const [iconSet, id] = key.split(":");
+        const icons = bucketIcons.map((icon, i) => i === bucket
+            ? { iconSet: iconSet, iconId: Number(id) }
+            : icon);
+        update({ icons, reverse: undefined });
+    };
+    const setThreshold = (index, patch) => {
+        const thresholds = value.thresholds.slice();
+        thresholds[index] = { ...thresholds[index], ...patch };
+        update({ thresholds });
+    };
+    // Rows top-down from the highest bucket, like Excel's dialog.
+    const rows = Array.from({ length: count }, (_, i) => 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: (next) => {
+                const 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(([family, label]) => (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((_, iconId) => (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: (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: (e) => update({ showValue: e.target.checked ? false : undefined }) }),
+                "Show Icon Only")),
+        rows.map((bucket) => {
+            const icon = bucketIcons[bucket];
+            const 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: `${icon.iconSet}:${icon.iconId}`, onValueChange: (key) => setBucketIcon(bucket, key) },
+                    React.createElement(SelectTrigger, { className: "text-sm w-16", "aria-label": `Icon ${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(([family]) => CF_ICON_SETS[family].map((_, iconId) => (React.createElement(SelectItem, { key: `${family}:${iconId}`, value: `${family}:${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: (op) => setThreshold(bucket - 1, {
+                            gte: op === ">" ? false : undefined,
+                        }) },
+                        React.createElement(SelectTrigger, { className: "text-sm w-14", "aria-label": `Operator ${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 ${count - bucket}`, value: String(threshold.value ?? ""), onChange: (e) => setThreshold(bucket - 1, { value: e.target.value }) }),
+                    React.createElement(Select, { value: threshold.type, onValueChange: (type) => setThreshold(bucket - 1, {
+                            type: type,
+                        }) },
+                        React.createElement(SelectTrigger, { className: "text-sm w-28", "aria-label": `Type ${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/esm/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/esm/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"}