@rowsncolumns/spreadsheet-state 28.0.66

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

@@ -0,0 +1,608 @@
+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 const createBorderCSSFromBorder = (borders, theme) => {
+    if (!borders) {
+        return {};
+    }
+    const css = {};
+    const createBorder = (border) => {
+        const style = getCSSBorderStyleFromStyle(border.style ?? "solid");
+        const color = getStringifiedColor(border.color, theme);
+        const width = border.width;
+        return `${width}px ${color} ${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 const createRulePreviewStyle = (format, theme) => {
+    return {
+        color: getStringifiedColor(format?.textFormat?.color, theme),
+        backgroundColor: getStringifiedColor(format?.backgroundColor, theme),
+        fontWeight: format?.textFormat?.bold ? "bold" : "normal",
+        fontStyle: format?.textFormat?.italic ? "italic" : "normal",
+        textDecoration: (format?.textFormat?.underline ? "underline" : "") +
+            " " +
+            (format?.textFormat?.strikethrough ? "line-through" : ""),
+        ...createBorderCSSFromBorder(format?.borders, theme),
+    };
+};
+const ensureFormula = (value) => {
+    if (!value)
+        return undefined;
+    const trimmed = value.trim();
+    if (!trimmed)
+        return undefined;
+    return trimmed.startsWith("=") ? trimmed : `=${trimmed}`;
+};
+export const ConditionalFormatRuleEditor = ({ sheetId, conditionalFormatRule, theme, functionDescriptions, locale, idCreationStrategy, onSubmit, onCancel, onChange, }) => {
+    const [showToValue, setShowToValue] = useState(() => shouldShowToValue(conditionalFormatRule.booleanRule?.condition?.type ?? undefined));
+    const [showFromValue, setShowFromValue] = useState(() => shouldShowFromValue(conditionalFormatRule.booleanRule?.condition?.type ?? undefined));
+    const conditionLabelOptions = useMemo(() => CONDITION_LABELS.filter(({ condition }) => ![
+        "NUMBER_GREATER_THAN_PREVIOUS",
+        "NUMBER_GREATER_THAN_EQ_PREVIOUS",
+        "NUMBER_LESS_THAN_PREVIOUS",
+        "NUMBER_LESS_THAN_EQ_PREVIOUS",
+    ].includes(condition)), []);
+    const selectedTabRef = useRef("booleanRule");
+    // Helpers
+    const { rangeToFormula, formulaToRange } = useFormulaRangeHelpers({
+        sheetId,
+    });
+    const sanitizeRuleByTab = (rule, tab = selectedTabRef.current) => {
+        const allRuleKeys = [
+            "booleanRule",
+            "gradientRule",
+            "topBottomRule",
+            "distinctRule",
+            "iconSetRule",
+            "dataBarRule",
+        ];
+        const keep = tab;
+        return omit(rule, allRuleKeys.filter((k) => 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).
+    const dismissalRef = useRef({ settled: false, dirty: false });
+    const restorePreviewRef = useRef(() => { });
+    const { setFieldValue, resetForm, handleSubmit, values, initialValues } = useFormik({
+        initialValues: conditionalFormatRule,
+        enableReinitialize: false,
+        onSubmit: (values) => {
+            dismissalRef.current.settled = true;
+            onSubmit?.(sanitizeRuleByTab(values), sanitizeRuleByTab(initialValues));
+        },
+    });
+    const { booleanRule, gradientRule, topBottomRule, distinctRule, iconSetRule, dataBarRule, } = values;
+    const defaultTabValue = gradientRule
+        ? "gradientRule"
+        : topBottomRule
+            ? "topBottomRule"
+            : distinctRule
+                ? "distinctRule"
+                : iconSetRule
+                    ? "iconSetRule"
+                    : dataBarRule
+                        ? "dataBarRule"
+                        : "booleanRule";
+    const [selectedTab, onChangeSelectedTab] = useState(defaultTabValue);
+    useEffect(() => {
+        selectedTabRef.current = selectedTab;
+    }, [selectedTab]);
+    const { fromValue, toValue } = useMemo(() => {
+        return {
+            fromValue: booleanRule?.condition?.values?.[0]?.userEnteredValue,
+            toValue: booleanRule?.condition?.values?.[1]?.userEnteredValue,
+        };
+    }, [booleanRule]);
+    const updateBooleanRuleInputs = (nextFromValue, nextToValue, nextType = booleanRule?.condition?.type, includeToValue = showToValue, includeFromValue = showFromValue) => {
+        const shouldIncludeFrom = includeFromValue && nextFromValue !== undefined;
+        if (nextType === "CUSTOM_FORMULA") {
+            setFieldValue("booleanRule.condition.values", [
+                ...(shouldIncludeFrom
+                    ? [{ userEnteredValue: ensureFormula(nextFromValue) ?? "" }]
+                    : []),
+            ]);
+        }
+        else {
+            setFieldValue("booleanRule.condition.values", [
+                ...(shouldIncludeFrom ? [{ userEnteredValue: nextFromValue }] : []),
+                ...(includeToValue && nextToValue !== undefined
+                    ? [{ userEnteredValue: nextToValue }]
+                    : []),
+            ]);
+        }
+    };
+    // Cancel
+    const onCancelForm = () => {
+        dismissalRef.current.settled = true;
+        onChange?.(initialValues);
+        onCancel?.();
+        resetForm();
+    };
+    // Change event
+    useIsomorphicLayoutEffect(() => {
+        if (!isEqual(values, initialValues)) {
+            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(() => {
+        dismissalRef.current.dirty = !isEqual(values, initialValues);
+        restorePreviewRef.current = () => {
+            if (!dismissalRef.current.settled && dismissalRef.current.dirty) {
+                onChange?.(initialValues);
+            }
+        };
+    });
+    useEffect(() => () => {
+        restorePreviewRef.current();
+    }, []);
+    useIsomorphicLayoutEffect(() => {
+        const showTo = shouldShowToValue(booleanRule?.condition?.type ?? undefined);
+        const showFrom = shouldShowFromValue(booleanRule?.condition?.type ?? undefined);
+        setShowToValue(showTo);
+        setShowFromValue(showFrom);
+        updateBooleanRuleInputs(fromValue, toValue, booleanRule?.condition?.type ?? undefined, showTo, showFrom);
+    }, [booleanRule?.condition?.type]);
+    useIsomorphicLayoutEffect(() => {
+        if (selectedTab === "topBottomRule" && !values.topBottomRule) {
+            setFieldValue("topBottomRule", {
+                type: "TOP",
+                rank: 5,
+                isPercent: false,
+                format: {},
+            });
+        }
+    }, [selectedTab, values.topBottomRule]);
+    useIsomorphicLayoutEffect(() => {
+        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(() => {
+        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(() => {
+        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(() => {
+        if (selectedTab === "dataBarRule" && !values.dataBarRule) {
+            setFieldValue("dataBarRule", {
+                minpoint: { type: "MIN" },
+                maxpoint: { type: "MAX" },
+                color: "#638ec6",
+            });
+        }
+    }, [selectedTab, values.dataBarRule]);
+    const len = values.ranges.length;
+    // For id :(
+    // FormulaInput only supports defaultValue
+    // so a `value` change does not re-render it
+    const rangeValues = useMemo(() => values.ranges.map((range) => {
+        return {
+            ...range,
+            id: idCreationStrategy?.("conditional-format") ?? uuid(),
+        };
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [len, idCreationStrategy]);
+    const renderFormatControls = (pathPrefix, format) => (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: format?.textFormat?.bold, onClick: () => {
+                    setFieldValue(`${pathPrefix}.textFormat.bold`, !format?.textFormat?.bold);
+                } }),
+            React.createElement(ButtonItalic, { isActive: format?.textFormat?.italic, onClick: () => {
+                    setFieldValue(`${pathPrefix}.textFormat.italic`, !format?.textFormat?.italic);
+                } }),
+            React.createElement(ButtonUnderline, { isActive: format?.textFormat?.underline, onClick: () => {
+                    setFieldValue(`${pathPrefix}.textFormat.underline`, !format?.textFormat?.underline);
+                } }),
+            React.createElement(ButtonStrikethrough, { isActive: format?.textFormat?.strikethrough, onClick: () => {
+                    setFieldValue(`${pathPrefix}.textFormat.strikethrough`, !format?.textFormat?.strikethrough);
+                } }),
+            React.createElement(TextColorSelector, { color: format?.textFormat?.color, theme: theme, onChange: (value) => {
+                    setFieldValue(`${pathPrefix}.textFormat.color`, value);
+                } }),
+            React.createElement(BackgroundColorSelector, { color: format?.backgroundColor, theme: theme, onChange: (value) => {
+                    setFieldValue(`${pathPrefix}.backgroundColor`, value);
+                } }),
+            React.createElement(BorderSelector, { theme: theme, borders: format?.borders, disabledBorderLocations: ["all", "horizontal", "inner", "vertical"], onChange: (location, color, style) => {
+                    if (location === "all" && isNil(color) && isNil(style)) {
+                        setFieldValue(`${pathPrefix}.borders`, {});
+                    }
+                    else {
+                        const borderStyle = style ?? "solid";
+                        const selectedBorder = {
+                            color,
+                            style: borderStyle,
+                            width: getBorderWidthFromStyle(borderStyle),
+                        };
+                        const 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(`${pathPrefix}.borders`, {
+                            ...(format?.borders ?? {}),
+                            ...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(({ id }, idx) => {
+                const range = values.ranges[idx];
+                const 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: (value) => {
+                            const formulaValue = formulaToRange(value);
+                            if (formulaValue) {
+                                setFieldValue(`ranges[${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: () => {
+                            setFieldValue("ranges", values.ranges.filter((value, i) => 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: () => {
+                        setFieldValue("ranges", [
+                            ...values.ranges,
+                            {
+                                startRowIndex: 1,
+                                endRowIndex: 1,
+                                startColumnIndex: 1,
+                                endColumnIndex: 1,
+                                sheetId,
+                            },
+                        ]);
+                    }, 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: (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: booleanRule?.condition?.type ?? CONDITION_NONE, onValueChange: (value) => {
+                            const nextShowTo = shouldShowToValue(value);
+                            const 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(({ condition, label }) => {
+                                    return (React.createElement(SelectItem, { key: condition, value: condition }, label));
+                                }))))),
+                React.createElement(Stack, { direction: "vertical", className: "gap-1  pb-3" },
+                    showFromValue ? (values.booleanRule?.condition?.type === "CUSTOM_FORMULA" ? (React.createElement(FormulaInput, { onChange: (value) => updateBooleanRuleInputs(value, undefined, "CUSTOM_FORMULA", false), value: fromValue ?? "=", required: true, placeholder: "Enter a formula", autoFocus: true, functionDescriptions: functionDescriptions })) : (React.createElement(Input, { value: fromValue ?? "", type: "text", name: "fromValue", onChange: (e) => updateBooleanRuleInputs(e.target.value, toValue), className: "text-xs", placeholder: "Value or formula" }))) : null,
+                    showToValue ? (React.createElement(Input, { value: toValue ?? "", type: "text", name: "toValue", onChange: (e) => 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: booleanRule?.format?.textFormat?.bold, onClick: () => {
+                                setFieldValue("booleanRule.format.textFormat.bold", !booleanRule?.format?.textFormat?.bold);
+                            } }),
+                        React.createElement(ButtonItalic, { isActive: booleanRule?.format?.textFormat?.italic, onClick: () => {
+                                setFieldValue("booleanRule.format.textFormat.italic", !booleanRule?.format?.textFormat?.italic);
+                            } }),
+                        React.createElement(ButtonUnderline, { isActive: booleanRule?.format?.textFormat?.underline, onClick: () => {
+                                setFieldValue("booleanRule.format.textFormat.underline", !booleanRule?.format?.textFormat?.underline);
+                            } }),
+                        React.createElement(ButtonStrikethrough, { isActive: booleanRule?.format?.textFormat?.strikethrough, onClick: () => {
+                                setFieldValue("booleanRule.format.textFormat.strikethrough", !booleanRule?.format?.textFormat?.strikethrough);
+                            } }),
+                        React.createElement(TextColorSelector, { color: booleanRule?.format?.textFormat?.color, theme: theme, 
+                            // isDarkMode={isDarkMode}
+                            onChange: (value) => {
+                                setFieldValue("booleanRule.format.textFormat.color", value);
+                            } }),
+                        React.createElement(BackgroundColorSelector, { color: booleanRule?.format?.backgroundColor, theme: theme, onChange: (value) => {
+                                setFieldValue("booleanRule.format.backgroundColor", value);
+                            } }),
+                        React.createElement(BorderSelector, { theme: theme, borders: booleanRule?.format?.borders, disabledBorderLocations: [
+                                "all",
+                                "horizontal",
+                                "inner",
+                                "vertical",
+                            ], onChange: (location, color, style) => {
+                                // User is clearing
+                                if (location === "all" && isNil(color) && isNil(style)) {
+                                    setFieldValue("booleanRule.format.borders", {});
+                                }
+                                else {
+                                    const borderStyle = style ?? "solid";
+                                    // Selected border
+                                    const selectedBorder = {
+                                        color,
+                                        style: borderStyle,
+                                        width: getBorderWidthFromStyle(borderStyle),
+                                    };
+                                    const 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", {
+                                        ...booleanRule?.format?.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?.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: gradientRule?.minpoint?.type ?? "MIN", onValueChange: (value) => {
+                                setFieldValue("gradientRule.minpoint", {
+                                    ...gradientRule?.minpoint,
+                                    type: value,
+                                    value: value === "MIN" ? "" : gradientRule?.minpoint?.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: gradientRule?.minpoint?.value ?? "", onChange: (e) => setFieldValue("gradientRule.minpoint.value", e.target.value), disabled: !gradientRule?.minpoint?.type ||
+                                gradientRule?.minpoint?.type === "MIN" }),
+                        React.createElement(BackgroundColorSelector, { color: gradientRule?.minpoint?.color, theme: theme, onChange: (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: gradientRule?.midpoint?.type ?? CONDITION_NONE, onValueChange: (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: gradientRule?.midpoint?.value ?? "", onChange: (e) => setFieldValue("gradientRule.midpoint.value", e.target.value), disabled: !gradientRule?.midpoint?.type ||
+                                gradientRule?.midpoint?.type ===
+                                    CONDITION_NONE }),
+                        React.createElement(BackgroundColorSelector, { color: gradientRule?.midpoint?.color, theme: theme, onChange: (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: gradientRule?.maxpoint?.type ?? "MAX", onValueChange: (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: gradientRule?.maxpoint?.value ?? "", onChange: (e) => setFieldValue("gradientRule.maxpoint.value", e.target.value), disabled: !gradientRule?.maxpoint?.type ||
+                                gradientRule?.maxpoint?.type === "MAX" }),
+                        React.createElement(BackgroundColorSelector, { color: gradientRule?.maxpoint?.color, theme: theme, onChange: (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: topBottomRule?.type ?? "TOP", onValueChange: (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: topBottomRule?.rank ?? 5, onChange: (event) => {
+                                const 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?.isPercent), onChange: (event) => setFieldValue("topBottomRule.isPercent", event.target.checked) }),
+                            "Percent"))),
+                renderFormatControls("topBottomRule.format", 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?.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: distinctRule?.type ?? "DUPLICATE", onValueChange: (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?.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?.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: iconSetRule?.iconSet ?? "3TrafficLights1", onValueChange: (value) => {
+                        // Default thresholds at 33% / 67% to bucket the value range
+                        // into 3 equal slices when switching to a 3-icon set, etc.
+                        const familyDefaults = {
+                            "3": [{ value: 33 }, { value: 67 }],
+                            "4": [{ value: 25 }, { value: 50 }, { value: 75 }],
+                            "5": [
+                                { value: 20 },
+                                { value: 40 },
+                                { value: 60 },
+                                { value: 80 },
+                            ],
+                        };
+                        const count = value.startsWith("5")
+                            ? "5"
+                            : value.startsWith("4")
+                                ? "4"
+                                : "3";
+                        setFieldValue("iconSetRule.iconSet", value);
+                        if (!iconSetRule?.thresholds?.length) {
+                            setFieldValue("iconSetRule.thresholds", familyDefaults[count].map((t) => ({
+                                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(([family, label]) => {
+                            const glyphs = ICON_SET_GLYPHS[family];
+                            const 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((glyph, i) => (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?.reverse, onChange: (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?.color === "string"
+                        ? dataBarRule.color
+                        : "#638ec6", onChange: (e) => {
+                        setFieldValue("dataBarRule.color", e.target.value);
+                        if (!dataBarRule?.minpoint) {
+                            setFieldValue("dataBarRule.minpoint", { type: "MIN" });
+                        }
+                        if (!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?.negativeColor === "string"
+                        ? dataBarRule.negativeColor
+                        : "#dc2626", onChange: (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"))));
+};

package/dist/esm/components/editors/data-validation-editor.d.ts

@@ -0,0 +1,27 @@
+import type { CanvasGridProps, DataValidationRuleRecord } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import type { UseSpreadsheetProps, useSpreadsheetState } from "../../hooks/use-spreadsheet-state";
+type DataValidationEditorProps = {
+    dataValidations?: DataValidationRuleRecord[];
+    sheetId: number;
+    functionDescriptions?: CanvasGridProps["functionDescriptions"];
+    onDeleteRules: ReturnType<typeof useSpreadsheetState>["onDeleteDataValidationRules"];
+    onUpdateRule: ReturnType<typeof useSpreadsheetState>["onUpdateDataValidationRule"];
+    onCreateRule: ReturnType<typeof useSpreadsheetState>["onCreateDataValidationRule"];
+    onDeleteRule: ReturnType<typeof useSpreadsheetState>["onDeleteDataValidationRule"];
+    /**
+     * Id creation strategy
+     */
+    idCreationStrategy?: UseSpreadsheetProps["idCreationStrategy"];
+};
+/**
+ * Data validation Editor
+ * @param param0
+ * @returns
+ */
+export declare const DataValidationEditor: ({ sheetId, dataValidations, functionDescriptions, idCreationStrategy, onDeleteRules, onDeleteRule, onCreateRule, onUpdateRule, }: DataValidationEditorProps) => React.JSX.Element;
+export declare const DataValidationEditorDialog: ({ children, }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export {};
+//# sourceMappingURL=data-validation-editor.d.ts.map

package/dist/esm/components/editors/data-validation-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-validation-editor.d.ts","sourceRoot":"","sources":["../../../../components/editors/data-validation-editor.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,eAAe,EACf,wBAAwB,EACzB,MAAM,2BAA2B,CAAC;AAoBnC,OAAO,KAA4D,MAAM,OAAO,CAAC;AAIjF,OAAO,KAAK,EACV,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,mCAAmC,CAAC;AAQ3C,KAAK,yBAAyB,GAAG;IAC/B,eAAe,CAAC,EAAE,wBAAwB,EAAE,CAAC;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,oBAAoB,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IAC/D,aAAa,EAAE,UAAU,CACvB,OAAO,mBAAmB,CAC3B,CAAC,6BAA6B,CAAC,CAAC;IACjC,YAAY,EAAE,UAAU,CACtB,OAAO,mBAAmB,CAC3B,CAAC,4BAA4B,CAAC,CAAC;IAChC,YAAY,EAAE,UAAU,CACtB,OAAO,mBAAmB,CAC3B,CAAC,4BAA4B,CAAC,CAAC;IAChC,YAAY,EAAE,UAAU,CACtB,OAAO,mBAAmB,CAC3B,CAAC,4BAA4B,CAAC,CAAC;IAChC;;OAEG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;CAChE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,kIASlC,yBAAyB,sBA+O3B,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,eAExC;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,sBAyBA,CAAC"}