@rowsncolumns/spreadsheet-state 28.0.66

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

@@ -0,0 +1,640 @@
+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, 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";
+import isEqual from "lodash/isEqual";
+import omit from "lodash/omit";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { getBorderWidthFromStyle, getCSSBorderStyleFromStyle, } from "../../api/border";
+export var createBorderCSSFromBorder = function (borders, theme) {
+    if (!borders) {
+        return {};
+    }
+    var css = {};
+    var createBorder = function (border) {
+        var _a;
+        var style = getCSSBorderStyleFromStyle((_a = border.style) !== null && _a !== void 0 ? _a : "solid");
+        var color = getStringifiedColor(border.color, theme);
+        var width = border.width;
+        return "".concat(width, "px ").concat(color, " ").concat(style);
+    };
+    if (borders.top) {
+        css["borderTop"] = createBorder(borders.top);
+    }
+    if (borders.left) {
+        css["borderLeft"] = createBorder(borders.left);
+    }
+    if (borders.bottom) {
+        css["borderBottom"] = createBorder(borders.bottom);
+    }
+    if (borders.right) {
+        css["borderRight"] = createBorder(borders.right);
+    }
+    return css;
+};
+export var createRulePreviewStyle = function (format, theme) {
+    var _a, _b, _c, _d, _e;
+    return __assign({ color: getStringifiedColor((_a = format === null || format === void 0 ? void 0 : format.textFormat) === null || _a === void 0 ? void 0 : _a.color, theme), backgroundColor: getStringifiedColor(format === null || format === void 0 ? void 0 : format.backgroundColor, theme), fontWeight: ((_b = format === null || format === void 0 ? void 0 : format.textFormat) === null || _b === void 0 ? void 0 : _b.bold) ? "bold" : "normal", fontStyle: ((_c = format === null || format === void 0 ? void 0 : format.textFormat) === null || _c === void 0 ? void 0 : _c.italic) ? "italic" : "normal", textDecoration: (((_d = format === null || format === void 0 ? void 0 : format.textFormat) === null || _d === void 0 ? void 0 : _d.underline) ? "underline" : "") +
+            " " +
+            (((_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));
+};
+var ensureFormula = function (value) {
+    if (!value)
+        return undefined;
+    var trimmed = value.trim();
+    if (!trimmed)
+        return undefined;
+    return trimmed.startsWith("=") ? trimmed : "=".concat(trimmed);
+};
+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 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 _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 () {
+        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];
+    var conditionLabelOptions = useMemo(function () {
+        return CONDITION_LABELS.filter(function (_a) {
+            var condition = _a.condition;
+            return ![
+                "NUMBER_GREATER_THAN_PREVIOUS",
+                "NUMBER_GREATER_THAN_EQ_PREVIOUS",
+                "NUMBER_LESS_THAN_PREVIOUS",
+                "NUMBER_LESS_THAN_EQ_PREVIOUS",
+            ].includes(condition);
+        });
+    }, []);
+    var selectedTabRef = useRef("booleanRule");
+    // Helpers
+    var _21 = useFormulaRangeHelpers({
+        sheetId: sheetId,
+    }), rangeToFormula = _21.rangeToFormula, formulaToRange = _21.formulaToRange;
+    var sanitizeRuleByTab = function (rule, tab) {
+        if (tab === void 0) { tab = selectedTabRef.current; }
+        var allRuleKeys = [
+            "booleanRule",
+            "gradientRule",
+            "topBottomRule",
+            "distinctRule",
+            "iconSetRule",
+            "dataBarRule",
+        ];
+        var keep = tab;
+        return omit(rule, allRuleKeys.filter(function (k) { return k !== keep; }));
+    };
+    // Tracks whether the editor was dismissed through Save/Cancel; any other unmount
+    // (dialog X / Esc / programmatic close) restores the pre-edit rule below so live
+    // preview changes don't outlive the editor (the preview writes into committed
+    // state on some hosts).
+    var dismissalRef = useRef({ settled: false, dirty: false });
+    var restorePreviewRef = useRef(function () { });
+    var _22 = 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;
+    var booleanRule = values.booleanRule, gradientRule = values.gradientRule, topBottomRule = values.topBottomRule, distinctRule = values.distinctRule, iconSetRule = values.iconSetRule, dataBarRule = values.dataBarRule;
+    var defaultTabValue = gradientRule
+        ? "gradientRule"
+        : topBottomRule
+            ? "topBottomRule"
+            : distinctRule
+                ? "distinctRule"
+                : iconSetRule
+                    ? "iconSetRule"
+                    : dataBarRule
+                        ? "dataBarRule"
+                        : "booleanRule";
+    var _23 = __read(useState(defaultTabValue), 2), selectedTab = _23[0], onChangeSelectedTab = _23[1];
+    useEffect(function () {
+        selectedTabRef.current = selectedTab;
+    }, [selectedTab]);
+    var _24 = 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;
+    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; }
+        if (includeToValue === void 0) { includeToValue = showToValue; }
+        if (includeFromValue === void 0) { includeFromValue = showFromValue; }
+        var shouldIncludeFrom = includeFromValue && nextFromValue !== undefined;
+        if (nextType === "CUSTOM_FORMULA") {
+            setFieldValue("booleanRule.condition.values", __spreadArray([], __read((shouldIncludeFrom
+                ? [{ userEnteredValue: (_b = ensureFormula(nextFromValue)) !== null && _b !== void 0 ? _b : "" }]
+                : [])), false));
+        }
+        else {
+            setFieldValue("booleanRule.condition.values", __spreadArray(__spreadArray([], __read((shouldIncludeFrom ? [{ userEnteredValue: nextFromValue }] : [])), false), __read((includeToValue && nextToValue !== undefined
+                ? [{ userEnteredValue: nextToValue }]
+                : [])), false));
+        }
+    };
+    // Cancel
+    var onCancelForm = function () {
+        dismissalRef.current.settled = true;
+        onChange === null || onChange === void 0 ? void 0 : onChange(initialValues);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        resetForm();
+    };
+    // Change event
+    useIsomorphicLayoutEffect(function () {
+        if (!isEqual(values, initialValues)) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(sanitizeRuleByTab(values));
+        }
+    }, [values, initialValues, selectedTab]);
+    // Restore the pre-edit rule when the editor unmounts without Save/Cancel having
+    // run (dialog X button, Esc, programmatic close) — otherwise the last previewed
+    // edit keeps rendering on the grid while the persisted rule still holds the old
+    // definition.
+    useIsomorphicLayoutEffect(function () {
+        dismissalRef.current.dirty = !isEqual(values, initialValues);
+        restorePreviewRef.current = function () {
+            if (!dismissalRef.current.settled && dismissalRef.current.dirty) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(initialValues);
+            }
+        };
+    });
+    useEffect(function () { return function () {
+        restorePreviewRef.current();
+    }; }, []);
+    useIsomorphicLayoutEffect(function () {
+        var _a, _b, _c, _d, _e, _f;
+        var showTo = shouldShowToValue((_b = (_a = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.condition) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : undefined);
+        var showFrom = shouldShowFromValue((_d = (_c = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.condition) === null || _c === void 0 ? void 0 : _c.type) !== null && _d !== void 0 ? _d : undefined);
+        setShowToValue(showTo);
+        setShowFromValue(showFrom);
+        updateBooleanRuleInputs(fromValue, toValue, (_f = (_e = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.condition) === null || _e === void 0 ? void 0 : _e.type) !== null && _f !== void 0 ? _f : undefined, showTo, showFrom);
+    }, [(_b = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.condition) === null || _b === void 0 ? void 0 : _b.type]);
+    useIsomorphicLayoutEffect(function () {
+        if (selectedTab === "topBottomRule" && !values.topBottomRule) {
+            setFieldValue("topBottomRule", {
+                type: "TOP",
+                rank: 5,
+                isPercent: false,
+                format: {},
+            });
+        }
+    }, [selectedTab, values.topBottomRule]);
+    useIsomorphicLayoutEffect(function () {
+        if (selectedTab === "distinctRule" && !values.distinctRule) {
+            setFieldValue("distinctRule", {
+                type: "DUPLICATE",
+                format: {},
+            });
+        }
+    }, [selectedTab, values.distinctRule]);
+    // Lazily seed gradientRule on tab select so a "Color scale" rule saved without
+    // touching the pickers carries a complete default 2-color gradient — Excel
+    // pre-seeds min/max the moment the type is chosen. Without this the sanitized
+    // save has no rule kind at all, and engines that require every gradient point
+    // to carry a color reject mid-edit previews.
+    useIsomorphicLayoutEffect(function () {
+        if (selectedTab === "gradientRule" && !values.gradientRule) {
+            setFieldValue("gradientRule", {
+                minpoint: { type: "MIN", color: "#ffffff" },
+                maxpoint: { type: "MAX", color: "#63be7b" },
+            });
+        }
+    }, [selectedTab, values.gradientRule]);
+    // Lazily seed iconSetRule on tab select for the same reason — an untouched
+    // "Icon set" save otherwise sanitizes to a rule with no kind at all. Mirrors the
+    // 3-icon defaults the iconSet select applies (33% / 67% percent thresholds).
+    useIsomorphicLayoutEffect(function () {
+        if (selectedTab === "iconSetRule" && !values.iconSetRule) {
+            setFieldValue("iconSetRule", {
+                iconSet: "3TrafficLights1",
+                thresholds: [
+                    { type: "PERCENT", value: 33 },
+                    { type: "PERCENT", value: 67 },
+                ],
+            });
+        }
+    }, [selectedTab, values.iconSetRule]);
+    // Lazily seed dataBarRule on tab select so a "Data bar" rule saved without
+    // touching the color picker isn't stripped to an empty rule (and mislabeled
+    // "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",
+            });
+        }
+    }, [selectedTab, values.dataBarRule]);
+    var len = values.ranges.length;
+    // For id :(
+    // FormulaInput only supports defaultValue
+    // so a `value` change does not re-render it
+    var rangeValues = useMemo(function () {
+        return values.ranges.map(function (range) {
+            var _a;
+            return __assign(__assign({}, range), { id: (_a = idCreationStrategy === null || idCreationStrategy === void 0 ? void 0 : idCreationStrategy("conditional-format")) !== null && _a !== void 0 ? _a : uuid() });
+        });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [len, idCreationStrategy]);
+    var renderFormatControls = function (pathPrefix, format) {
+        var _a, _b, _c, _d, _e;
+        return (React.createElement(Stack, { direction: "vertical", className: "gap-1  pb-3" },
+            React.createElement("label", { className: "font-system text-sm" }, "Formatting style"),
+            React.createElement(Stack, { direction: "horizontal", className: "gap-1 py-1" },
+                React.createElement(ButtonBold, { isActive: (_a = format === null || format === void 0 ? void 0 : format.textFormat) === null || _a === void 0 ? void 0 : _a.bold, onClick: function () {
+                        var _a;
+                        setFieldValue("".concat(pathPrefix, ".textFormat.bold"), !((_a = format === null || format === void 0 ? void 0 : format.textFormat) === null || _a === void 0 ? void 0 : _a.bold));
+                    } }),
+                React.createElement(ButtonItalic, { isActive: (_b = format === null || format === void 0 ? void 0 : format.textFormat) === null || _b === void 0 ? void 0 : _b.italic, onClick: function () {
+                        var _a;
+                        setFieldValue("".concat(pathPrefix, ".textFormat.italic"), !((_a = format === null || format === void 0 ? void 0 : format.textFormat) === null || _a === void 0 ? void 0 : _a.italic));
+                    } }),
+                React.createElement(ButtonUnderline, { isActive: (_c = format === null || format === void 0 ? void 0 : format.textFormat) === null || _c === void 0 ? void 0 : _c.underline, onClick: function () {
+                        var _a;
+                        setFieldValue("".concat(pathPrefix, ".textFormat.underline"), !((_a = format === null || format === void 0 ? void 0 : format.textFormat) === null || _a === void 0 ? void 0 : _a.underline));
+                    } }),
+                React.createElement(ButtonStrikethrough, { isActive: (_d = format === null || format === void 0 ? void 0 : format.textFormat) === null || _d === void 0 ? void 0 : _d.strikethrough, onClick: function () {
+                        var _a;
+                        setFieldValue("".concat(pathPrefix, ".textFormat.strikethrough"), !((_a = format === null || format === void 0 ? void 0 : format.textFormat) === null || _a === void 0 ? void 0 : _a.strikethrough));
+                    } }),
+                React.createElement(TextColorSelector, { color: (_e = format === null || format === void 0 ? void 0 : format.textFormat) === null || _e === void 0 ? void 0 : _e.color, theme: theme, onChange: function (value) {
+                        setFieldValue("".concat(pathPrefix, ".textFormat.color"), value);
+                    } }),
+                React.createElement(BackgroundColorSelector, { color: format === null || format === void 0 ? void 0 : format.backgroundColor, theme: theme, onChange: function (value) {
+                        setFieldValue("".concat(pathPrefix, ".backgroundColor"), value);
+                    } }),
+                React.createElement(BorderSelector, { theme: theme, borders: format === null || format === void 0 ? void 0 : format.borders, disabledBorderLocations: ["all", "horizontal", "inner", "vertical"], onChange: function (location, color, style) {
+                        var _a;
+                        if (location === "all" && isNil(color) && isNil(style)) {
+                            setFieldValue("".concat(pathPrefix, ".borders"), {});
+                        }
+                        else {
+                            var borderStyle = style !== null && style !== void 0 ? style : "solid";
+                            var selectedBorder = {
+                                color: color,
+                                style: borderStyle,
+                                width: getBorderWidthFromStyle(borderStyle),
+                            };
+                            var borders = {};
+                            if (location === "outer" || location === "top") {
+                                borders.top = selectedBorder;
+                            }
+                            if (location === "outer" || location === "bottom") {
+                                borders.bottom = selectedBorder;
+                            }
+                            if (location === "outer" || location === "left") {
+                                borders.left = selectedBorder;
+                            }
+                            if (location === "outer" || location === "right") {
+                                borders.right = selectedBorder;
+                            }
+                            setFieldValue("".concat(pathPrefix, ".borders"), __assign(__assign({}, ((_a = format === null || format === void 0 ? void 0 : format.borders) !== null && _a !== void 0 ? _a : {})), borders));
+                        }
+                    } }))));
+    };
+    return (React.createElement("form", { onSubmit: handleSubmit },
+        React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-3" },
+            React.createElement("label", { className: "font-system text-sm" }, "Apply to range"),
+            rangeValues.map(function (_a, idx) {
+                var id = _a.id;
+                var range = values.ranges[idx];
+                var canRemove = values.ranges.length !== 1;
+                return (React.createElement(Stack, { direction: "horizontal", className: "grid grid-cols-[1fr_auto] gap-2", key: id },
+                    React.createElement(FormulaInput, { onChange: function (value) {
+                            var formulaValue = formulaToRange(value);
+                            if (formulaValue) {
+                                setFieldValue("ranges[".concat(idx, "]"), formulaValue);
+                            }
+                        }, value: rangeToFormula(range), required: true, placeholder: "Select a range", autoFocus: idx === values.ranges.length - 1, className: "mb-0" }),
+                    React.createElement(IconButton, { type: "button", onClick: function () {
+                            setFieldValue("ranges", values.ranges.filter(function (value, i) { return i !== idx; }));
+                        }, tooltip: canRemove ? "Remove range" : "You need atleast one range", disabled: !canRemove },
+                        React.createElement(CrossCircledIcon, null))));
+            }),
+            React.createElement("div", { className: "py-1" },
+                React.createElement(Button, { variant: "link", onClick: function () {
+                        setFieldValue("ranges", __spreadArray(__spreadArray([], __read(values.ranges), false), [
+                            {
+                                startRowIndex: 1,
+                                endRowIndex: 1,
+                                startColumnIndex: 1,
+                                endColumnIndex: 1,
+                                sheetId: sheetId,
+                            },
+                        ], false));
+                    }, type: "button", className: "cursor-pointer" }, "Add range"))),
+        React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
+            React.createElement("label", { className: "font-system text-sm" }, "Rule type"),
+            React.createElement(Select, { value: selectedTab, onValueChange: function (value) {
+                    onChangeSelectedTab(value);
+                } },
+                React.createElement(SelectTrigger, { className: "text-sm" },
+                    React.createElement(SelectValue, null)),
+                React.createElement(SelectPortal, null,
+                    React.createElement(SelectContent, null,
+                        React.createElement(SelectItem, { value: "booleanRule" }, "Single color"),
+                        React.createElement(SelectItem, { value: "gradientRule" }, "Color scale"),
+                        React.createElement(SelectItem, { value: "topBottomRule" }, "Top / Bottom"),
+                        React.createElement(SelectItem, { value: "distinctRule" }, "Unique / Duplicate"),
+                        React.createElement(SelectItem, { value: "iconSetRule" }, "Icon set"),
+                        React.createElement(SelectItem, { value: "dataBarRule" }, "Data bar"))))),
+        React.createElement("div", null,
+            selectedTab === "booleanRule" && (React.createElement(React.Fragment, null,
+                React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-1" },
+                    React.createElement("label", { className: "font-system text-sm" }, "Format rules"),
+                    React.createElement(Select, { value: (_d = (_c = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.condition) === null || _c === void 0 ? void 0 : _c.type) !== null && _d !== void 0 ? _d : CONDITION_NONE, onValueChange: function (value) {
+                            var nextShowTo = shouldShowToValue(value);
+                            var nextShowFrom = shouldShowFromValue(value);
+                            setFieldValue("booleanRule.condition.type", value);
+                            updateBooleanRuleInputs(fromValue, toValue, value, nextShowTo, nextShowFrom);
+                        } },
+                        React.createElement(SelectTrigger, { className: "mb-1 text-sm" },
+                            React.createElement(SelectValue, { placeholder: "None" })),
+                        React.createElement(SelectPortal, null,
+                            React.createElement(SelectContent, null,
+                                React.createElement(SelectItem, { value: CONDITION_NONE }, "None"),
+                                conditionLabelOptions.map(function (_a) {
+                                    var condition = _a.condition, label = _a.label;
+                                    return (React.createElement(SelectItem, { key: condition, value: condition }, label));
+                                }))))),
+                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) {
+                            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);
+                        }, className: "text-xs", placeholder: "Value or formula" }))) : null,
+                    showToValue ? (React.createElement(Input, { value: toValue !== null && toValue !== void 0 ? toValue : "", type: "text", name: "toValue", onChange: function (e) {
+                            return updateBooleanRuleInputs(fromValue, e.target.value);
+                        }, className: "text-xs", placeholder: "Value or formula" })) : null),
+                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 () {
+                                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 () {
+                                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 () {
+                                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 () {
+                                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, 
+                            // 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) {
+                                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: [
+                                "all",
+                                "horizontal",
+                                "inner",
+                                "vertical",
+                            ], onChange: function (location, color, style) {
+                                var _a;
+                                // User is clearing
+                                if (location === "all" && isNil(color) && isNil(style)) {
+                                    setFieldValue("booleanRule.format.borders", {});
+                                }
+                                else {
+                                    var borderStyle = style !== null && style !== void 0 ? style : "solid";
+                                    // Selected border
+                                    var selectedBorder = {
+                                        color: color,
+                                        style: borderStyle,
+                                        width: getBorderWidthFromStyle(borderStyle),
+                                    };
+                                    var borders = {};
+                                    if (location === "outer" || location === "top") {
+                                        borders.top = selectedBorder;
+                                    }
+                                    if (location === "outer" || location === "bottom") {
+                                        borders.bottom = selectedBorder;
+                                    }
+                                    if (location === "outer" || location === "left") {
+                                        borders.left = selectedBorder;
+                                    }
+                                    if (location === "outer" || location === "right") {
+                                        borders.right = selectedBorder;
+                                    }
+                                    setFieldValue("booleanRule.format.borders", __assign(__assign({}, (_a = booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.format) === null || _a === void 0 ? void 0 : _a.borders), borders));
+                                }
+                            } }))),
+                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(booleanRule === null || booleanRule === void 0 ? void 0 : booleanRule.format, theme) }, "AaBbCcYyZz")))),
+            selectedTab === "gradientRule" && (React.createElement(React.Fragment, null,
+                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) {
+                                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 }));
+                            } },
+                            React.createElement(SelectTrigger, { className: "text-xs mb-0" },
+                                React.createElement(SelectValue, { placeholder: "Min value" })),
+                            React.createElement(SelectPortal, null,
+                                React.createElement(SelectContent, null,
+                                    React.createElement(SelectItem, { value: "MIN" }, "Min value"),
+                                    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) {
+                                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) {
+                                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) {
+                                setFieldValue("gradientRule.midpoint.type", value);
+                                if (value === "MIN") {
+                                    setFieldValue("gradientRule.midpoint.value", "");
+                                }
+                            } },
+                            React.createElement(SelectTrigger, { className: "text-xs mb-0" },
+                                React.createElement(SelectValue, { placeholder: CONDITION_NONE })),
+                            React.createElement(SelectPortal, null,
+                                React.createElement(SelectContent, null,
+                                    React.createElement(SelectItem, { value: CONDITION_NONE }, "None"),
+                                    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) {
+                                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) ===
+                                    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) {
+                                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) {
+                                setFieldValue("gradientRule.maxpoint.type", value);
+                                if (value === "MIN") {
+                                    setFieldValue("gradientRule.maxpoint.value", "");
+                                }
+                            } },
+                            React.createElement(SelectTrigger, { className: "text-xs mb-0" },
+                                React.createElement(SelectValue, { placeholder: "MAX" })),
+                            React.createElement(SelectPortal, null,
+                                React.createElement(SelectContent, null,
+                                    React.createElement(SelectItem, { value: "MAX" }, "Max value"),
+                                    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) {
+                                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) {
+                                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) {
+                                setFieldValue("topBottomRule.type", value);
+                            } },
+                            React.createElement(SelectTrigger, { className: "text-sm" },
+                                React.createElement(SelectValue, null)),
+                            React.createElement(SelectPortal, null,
+                                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) {
+                                var value = Number(event.target.value);
+                                setFieldValue("topBottomRule.rank", Number.isNaN(value) ? 1 : Math.max(1, value));
+                            } }),
+                        React.createElement("label", { className: "flex items-center gap-2 text-xs" },
+                            React.createElement("input", { type: "checkbox", checked: Boolean(topBottomRule === null || topBottomRule === void 0 ? void 0 : topBottomRule.isPercent), onChange: function (event) {
+                                    return setFieldValue("topBottomRule.isPercent", event.target.checked);
+                                } }),
+                            "Percent"))),
+                renderFormatControls("topBottomRule.format", topBottomRule === null || topBottomRule === void 0 ? void 0 : topBottomRule.format),
+                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(topBottomRule === null || topBottomRule === void 0 ? void 0 : topBottomRule.format, theme) }, "AaBbCcYyZz")))),
+            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) {
+                            setFieldValue("distinctRule.type", value);
+                        } },
+                        React.createElement(SelectTrigger, { className: "text-sm mb-0 w-40" },
+                            React.createElement(SelectValue, { placeholder: "Duplicate" })),
+                        React.createElement(SelectPortal, null,
+                            React.createElement(SelectContent, null,
+                                React.createElement(SelectItem, { value: "DUPLICATE" }, "Duplicate values"),
+                                React.createElement(SelectItem, { value: "UNIQUE" }, "Unique values"))))),
+                renderFormatControls("distinctRule.format", distinctRule === null || distinctRule === void 0 ? void 0 : distinctRule.format),
+                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" })))),
+        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"))));
+};