@gooddata/sdk-ui-ext 11.47.0-alpha.3 → 11.47.0-alpha.4

package/NOTICE

@@ -7,9 +7,9 @@
 
 The following 3rd-party software packages may be used by or distributed with gooddata-ui-sdk. Any information relevant to third-party vendors listed below are collected using common, reasonable means.
 
-Date generated: 2026-7-10
+Date generated: 2026-7-14
 
-Revision ID: 49e9a8adde3ee1f908b34090cae5065e788ef0dd
+Revision ID: 2ce9ab6aef1d6be52eb66b2f005add0bb3b08196
 
 ================================================================================
 ================================================================================
@@ -29272,4 +29272,4 @@ POSSIBILITY OF SUCH DAMAGE.
 --------------------------------------------------------------------------------
 --------------------------------------------------------------------------------
 
-Report Generated by FOSSA on 2026-7-10
+Report Generated by FOSSA on 2026-7-14

package/esm/internal/components/configurationControls/conditionalFormatting/CfSelect.d.ts

@@ -0,0 +1,14 @@
+interface ISelectItem<T extends string> {
+    value: T;
+    title: string;
+    icon?: string;
+}
+interface ICfSelectProps<T extends string> {
+    value?: T;
+    items: readonly ISelectItem<T>[];
+    onSelect: (value: T) => void;
+    placeholder?: string;
+}
+export declare function CfSelect<T extends string>({ value, items, onSelect, placeholder }: ICfSelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CfSelect.d.ts.map

package/esm/internal/components/configurationControls/conditionalFormatting/CfSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CfSelect.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/configurationControls/conditionalFormatting/CfSelect.tsx"],"names":[],"mappings":"AAaA,UAAU,WAAW,CAAC,CAAC,SAAS,MAAM;IAClC,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,cAAc,CAAC,CAAC,SAAS,MAAM;IACrC,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,KAAK,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAmCD,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,2CAyCpG"}

package/esm/internal/components/configurationControls/conditionalFormatting/CfSelect.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import cx from "classnames";
+import { DropdownButton, SingleSelectListItem, UiDropdown, UiListbox, } from "@gooddata/sdk-ui-kit";
+// One listbox option; the iconRenderer sizes the type (attribute/metric) and wide operator glyphs.
+function CfListItem({ item, isSelected, isFocused, onSelect, }) {
+    const { title, icon } = item.data;
+    return (_jsx("div", { className: "gd-cf-select__option", children: _jsx(SingleSelectListItem, { title: title, icon: icon, iconRenderer: (ic) => {
+                if (typeof ic !== "string" || !ic) {
+                    return null;
+                }
+                const isTypeIcon = ic === "gd-icon-attribute" || ic === "gd-icon-metric";
+                return (_jsx("span", { "aria-hidden": "true", className: cx("gd-list-icon", ic, { "gd-cf-type-icon": isTypeIcon }) }));
+            }, isSelected: isSelected, isFocused: isFocused, onClick: onSelect }) }));
+}
+export function CfSelect({ value, items, onSelect, placeholder }) {
+    const selected = items.find((item) => item.value === value);
+    const listItems = items.map((item) => ({
+        type: "interactive",
+        id: item.value,
+        stringTitle: item.title,
+        data: item,
+    }));
+    return (_jsx(UiDropdown, { width: "same-as-anchor", fullWidthButton: true, closeOnParentScroll: true, closeOnMouseDrag: true, closeOnEscape: true, autofocusOnOpen: true, accessibilityConfig: { triggerRole: "combobox", popupRole: "listbox" }, renderButton: ({ isOpen, toggleDropdown, ref, dropdownId }) => (_jsx(DropdownButton, { value: selected?.title ?? placeholder ?? "", iconLeft: selected?.icon, isOpen: isOpen, isFullWidth: true, onClick: toggleDropdown, buttonRef: ref, dropdownId: dropdownId, accessibilityConfig: { popupType: "listbox" } })), renderBody: ({ closeDropdown, ariaAttributes }) => (_jsx(UiListbox, { items: listItems, selectedItemId: value, ariaAttributes: ariaAttributes, InteractiveItemComponent: CfListItem, onClose: closeDropdown, onSelect: (listItem) => onSelect(listItem.data.value) })) }));
+}

package/esm/internal/components/configurationControls/conditionalFormatting/ConditionEditor.d.ts

@@ -0,0 +1,18 @@
+import { type IntlShape } from "react-intl";
+import { type ISeparators } from "@gooddata/sdk-model";
+import { type ConditionalFormattingTarget, type IConditionalFormattingCondition } from "@gooddata/sdk-ui-pivot/next";
+import { type IReorderSlot } from "./ReorderList.js";
+export interface IConditionEditorProps {
+    condition: IConditionalFormattingCondition;
+    kind: ConditionalFormattingTarget["kind"];
+    isPercent: boolean;
+    separators: ISeparators | undefined;
+    suggestions: readonly string[];
+    removable: boolean;
+    slot: IReorderSlot;
+    intl: IntlShape;
+    onChange: (condition: IConditionalFormattingCondition) => void;
+    onRemove: () => void;
+}
+export declare function ConditionEditor({ condition, kind, isPercent, separators, suggestions, removable, slot, intl, onChange, onRemove }: IConditionEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ConditionEditor.d.ts.map

package/esm/internal/components/configurationControls/conditionalFormatting/ConditionEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionEditor.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/configurationControls/conditionalFormatting/ConditionEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAA0B,MAAM,YAAY,CAAC;AAEpE,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAiBpE,OAAO,EAEH,KAAK,2BAA2B,EAEhC,KAAK,+BAA+B,EAEvC,MAAM,6BAA6B,CAAC;AAiBrC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAoUrD,MAAM,WAAW,qBAAqB;IAClC,SAAS,EAAE,+BAA+B,CAAC;IAC3C,IAAI,EAAE,2BAA2B,CAAC,MAAM,CAAC,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;IACpC,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,YAAY,CAAC;IACnB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,CAAC,SAAS,EAAE,+BAA+B,KAAK,IAAI,CAAC;IAC/D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,eAAe,CAAC,EAC5B,SAAS,EACT,IAAI,EACJ,SAAS,EACT,UAAU,EACV,WAAW,EACX,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACX,EAAE,qBAAqB,2CAqEvB"}

package/esm/internal/components/configurationControls/conditionalFormatting/ConditionEditor.js

@@ -0,0 +1,132 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { useId } from "react";
+import cx from "classnames";
+import { Button, Dropdown, Input, InputWithNumberFormat, UiButton, UiButtonSegmentedControl, UiCombobox, UiComboboxInput, UiComboboxList, UiComboboxListItem, UiComboboxListItemLabel, UiComboboxPopup, } from "@gooddata/sdk-ui-kit";
+import { conditionalFormattingMessages, conditionalFormattingOperatorMessages } from "../../../../locales.js";
+import { ColorDropdown } from "../colors/colorDropdown/ColorDropdown.js";
+import { CfSelect } from "./CfSelect.js";
+import { CF_COLOR_PALETTE, colorToHex, hexToColor } from "./conditionalFormattingColors.js";
+import { displayToRawNumber, emptyValueForOperator, operatorIcon, operatorsForKind, rawToDisplayNumber, validateCondition, valueEditorKind, } from "./conditionalFormattingModel.js";
+// An entered operand survives operator changes within the same shape (e.g. > to >=).
+const valueForOperator = (operator, previous) => {
+    const empty = emptyValueForOperator(operator);
+    return previous.kind === empty.kind ? previous : empty;
+};
+const literalText = (value) => value.kind === "literal" ? String(value.value) : "";
+const literalRaw = (value) => {
+    if (value.kind !== "literal" || String(value.value).trim() === "") {
+        return null;
+    }
+    const n = Number(value.value);
+    return Number.isFinite(n) ? n : null;
+};
+const rangeRaw = (value, bound) => {
+    if (value.kind !== "literalRange") {
+        return null;
+    }
+    const n = value[bound];
+    return Number.isFinite(n) ? n : null;
+};
+function CfMeasureValueInput({ raw, isPercent, separators, placeholder, intl, onChangeRaw, hasError, accessibilityConfig, }) {
+    return (_jsx(InputWithNumberFormat, { value: raw === null ? undefined : rawToDisplayNumber(raw, isPercent), suffix: isPercent ? "%" : undefined, separators: separators, placeholder: placeholder, onChange: (display) => onChangeRaw(display === null ? null : displayToRawNumber(display, isPercent)), hasError: hasError, accessibilityConfig: {
+            // InputPure renders the suffix aria-hidden; this is its accessible name.
+            ...(isPercent
+                ? {
+                    suffixAriaLabel: intl.formatMessage(conditionalFormattingMessages.dialogUnitPercent),
+                }
+                : {}),
+            ...accessibilityConfig,
+        } }));
+}
+// Free-text combobox suggesting current-result element values; `creatable` = typed text is a valid value.
+function CfValueCombobox({ value, suggestions, placeholder, onChangeText }) {
+    const idPrefix = useId();
+    const options = suggestions.map((suggestion, index) => ({
+        // aria-activedescendant needs a valid, document-unique DOM id (element values aren't); matching is by label.
+        id: `${idPrefix}-${index}`,
+        label: suggestion,
+    }));
+    return (_jsxs(UiCombobox, { options: options, value: value, creatable: true, onValueChange: onChangeText, children: [
+            _jsx(UiComboboxInput, { placeholder: placeholder, accessibilityConfig: { ariaLabel: placeholder } }), _jsx(UiComboboxPopup, { children: _jsx(UiComboboxList, { children: (option, index) => (_jsx(UiComboboxListItem, { option: option, index: index, children: _jsx(UiComboboxListItemLabel, { children: option.label }) })) }) })
+        ] }));
+}
+const FIELD_ERROR_MESSAGE = {
+    rangeOrder: conditionalFormattingMessages.dialogErrorRangeOrder,
+};
+function CfFieldError({ id, error, intl, }) {
+    if (!error) {
+        return null;
+    }
+    return (_jsx("span", { id: id, role: "alert", className: "gd-cf-condition__error", children: intl.formatMessage(FIELD_ERROR_MESSAGE[error]) }));
+}
+function ConditionValueInput({ condition, kind, isPercent, separators, suggestions, intl, onChange, }) {
+    const errorId = useId();
+    const setValue = (value) => onChange({ ...condition, value });
+    switch (valueEditorKind(condition, kind, suggestions.length > 0)) {
+        case "none":
+            return null;
+        case "number":
+            return (_jsx(CfMeasureValueInput, { raw: literalRaw(condition.value), isPercent: isPercent, separators: separators, placeholder: intl.formatMessage(conditionalFormattingMessages.dialogValuePlaceholder), intl: intl, onChangeRaw: (raw) => setValue({ kind: "literal", value: raw ?? "" }) }));
+        case "combobox":
+            return (_jsx(CfValueCombobox, { value: literalText(condition.value), suggestions: suggestions, placeholder: intl.formatMessage(conditionalFormattingMessages.dialogValuePlaceholder), onChangeText: (v) => setValue({ kind: "literal", value: v }) }));
+        case "text":
+            return (_jsx(Input, { type: "text", value: literalText(condition.value), placeholder: intl.formatMessage(conditionalFormattingMessages.dialogValuePlaceholder), onChange: (v) => setValue({ kind: "literal", value: String(v) }) }));
+        case "range": {
+            const range = condition.value.kind === "literalRange" ? condition.value : { from: NaN, to: NaN };
+            const setRange = (from, to) => setValue({ kind: "literalRange", from, to });
+            const { errors } = validateCondition(condition, kind);
+            const invalidInputProps = (error) => error
+                ? { hasError: true, accessibilityConfig: { ariaDescribedBy: errorId, ariaInvalid: true } }
+                : {};
+            return (_jsxs(_Fragment, { children: [
+                    _jsxs("div", { className: "gd-cf-condition__range", children: [
+                            _jsx(CfMeasureValueInput, { raw: rangeRaw(condition.value, "from"), isPercent: isPercent, separators: separators, placeholder: intl.formatMessage(conditionalFormattingMessages.dialogFromPlaceholder), intl: intl, onChangeRaw: (raw) => setRange(raw ?? NaN, range.to), ...invalidInputProps(errors.range) }), _jsx(CfMeasureValueInput, { raw: rangeRaw(condition.value, "to"), isPercent: isPercent, separators: separators, placeholder: intl.formatMessage(conditionalFormattingMessages.dialogToPlaceholder), intl: intl, onChangeRaw: (raw) => setRange(range.from, raw ?? NaN), ...invalidInputProps(errors.range) })
+                        ] }), _jsx(CfFieldError, { id: errorId, error: errors.range, intl: intl })
+                ] }));
+        }
+    }
+}
+// The ColorDropdown trigger swatch. ColorDropdown clones it with selectable-child props the swatch
+// ignores. No color renders a "none" slash rather than a misleading white.
+function CfSwatch({ hex }) {
+    return (_jsx("span", { className: `gd-cf-swatch${hex ? "" : " gd-cf-swatch--none"}`, style: hex ? { backgroundColor: hex } : undefined }));
+}
+function CfColorPick({ hex, noneColorLabel, onChange }) {
+    return (_jsx(ColorDropdown, { colorPalette: CF_COLOR_PALETTE, selectedColorItem: hexToColor(hex), onColorSelected: (color) => onChange(colorToHex(color)), onClear: () => onChange(undefined), noneColorAriaLabel: noneColorLabel, children: _jsx(CfSwatch, { hex: hex }) }));
+}
+const PREVIEW_SAMPLE = {
+    measure: "1,234.56",
+    attribute: "Abc",
+};
+// Row scope shows two sample cells to convey that the whole row is formatted.
+const ROW_PREVIEW_SAMPLE = ["Abc", "123"];
+function FormatEditor({ format, intl, onChange }) {
+    return (_jsx(Dropdown, { closeOnParentScroll: true, closeOnMouseDrag: true, closeOnEscape: true, renderButton: ({ toggleDropdown, accessibilityConfig }) => (_jsx(Button, { className: "gd-button-link gd-button-icon-only gd-icon-pencil gd-cf-condition__edit", accessibilityConfig: {
+                ...accessibilityConfig,
+                ariaLabel: intl.formatMessage(conditionalFormattingMessages.dialogFormat),
+            }, onClick: toggleDropdown })), renderBody: () => (_jsxs("div", { className: "gd-cf-format", children: [
+                _jsx("span", { className: "gd-cf-format__label", children: intl.formatMessage(conditionalFormattingMessages.dialogTextColor) }), _jsx(CfColorPick, { hex: format.color, noneColorLabel: intl.formatMessage(conditionalFormattingMessages.dialogNoColor), onChange: (color) => onChange({ ...format, color }) }), _jsx("span", { className: "gd-cf-format__label", children: intl.formatMessage(conditionalFormattingMessages.dialogFillColor) }), _jsx(CfColorPick, { hex: format.backgroundColor, noneColorLabel: intl.formatMessage(conditionalFormattingMessages.dialogNoColor), onChange: (backgroundColor) => onChange({ ...format, backgroundColor }) }), _jsxs(UiButtonSegmentedControl, { children: [
+                        _jsx(UiButton, { size: "small", variant: "secondary", label: intl.formatMessage(conditionalFormattingMessages.dialogScopeCell), isSelected: format.scope === "cell", onClick: () => onChange({ ...format, scope: "cell" }) }), _jsx(UiButton, { size: "small", variant: "secondary", label: intl.formatMessage(conditionalFormattingMessages.dialogScopeRow), isSelected: format.scope === "row", onClick: () => onChange({ ...format, scope: "row" }) })
+                    ] })
+            ] })) }));
+}
+export function ConditionEditor({ condition, kind, isPercent, separators, suggestions, removable, slot, intl, onChange, onRemove, }) {
+    const operatorItems = operatorsForKind(kind).map((operator) => ({
+        value: operator,
+        title: intl.formatMessage(conditionalFormattingOperatorMessages[operator]),
+        icon: operatorIcon(operator),
+    }));
+    const setFormat = (format) => onChange({ ...condition, format });
+    const previewStyle = {
+        ...(condition.format.color ? { color: condition.format.color } : {}),
+        ...(condition.format.backgroundColor ? { backgroundColor: condition.format.backgroundColor } : {}),
+    };
+    return (_jsxs("div", { className: cx("gd-cf-condition", slot.className), ...slot.rootProps, children: [slot.handle, _jsxs("div", { className: "gd-cf-condition__header", children: [
+                    _jsx("span", { className: "gd-cf-condition__title", children: intl.formatMessage(conditionalFormattingMessages.dialogCondition) }), removable ? (_jsx(Button, { className: "gd-button-link gd-button-icon-only gd-icon-cross", accessibilityConfig: {
+                            ariaLabel: intl.formatMessage(conditionalFormattingMessages.dialogRemoveCondition),
+                        }, onClick: onRemove })) : null] }), _jsx(CfSelect, { value: condition.operator, items: operatorItems, onSelect: (operator) => onChange({ ...condition, operator, value: valueForOperator(operator, condition.value) }) }), _jsx(ConditionValueInput, { condition: condition, kind: kind, isPercent: isPercent, separators: separators, suggestions: suggestions, intl: intl, onChange: onChange }), _jsxs("div", { className: "gd-cf-condition__format-row", children: [
+                    _jsx("span", { className: "gd-cf-dialog__label", children: intl.formatMessage(conditionalFormattingMessages.dialogFormat) }), _jsx("div", { className: "gd-cf-preview", children: condition.format.scope === "row" ? (ROW_PREVIEW_SAMPLE.map((sample, index) => (_jsx("span", { className: "gd-cf-preview__cell", style: previewStyle, children: sample }, index)))) : (_jsx("span", { className: "gd-cf-preview__cell", style: previewStyle, children: PREVIEW_SAMPLE[kind] })) }), _jsx(FormatEditor, { format: condition.format, intl: intl, onChange: setFormat })
+                ] })
+        ] }));
+}

package/esm/internal/components/configurationControls/conditionalFormatting/ConditionalFormattingDialog.d.ts

@@ -1,13 +1,16 @@
+import { type ISeparators } from "@gooddata/sdk-model";
 import { type IConditionalFormattingRule } from "@gooddata/sdk-ui-pivot/next";
 import { type ITargetOption } from "./conditionalFormattingModel.js";
 export interface IConditionalFormattingDialogProps {
     rule: IConditionalFormattingRule;
     isNew: boolean;
     targetOptions: ITargetOption[];
+    /** Workspace number separators; measure value inputs validate and format with them. */
+    separators?: ISeparators;
     /** CSS selector of a small, stable element the popover anchors to. */
     alignTo: string;
     onSave: (rule: IConditionalFormattingRule) => void;
     onClose: () => void;
 }
-export declare function ConditionalFormattingDialog({ rule: initialRule, isNew, targetOptions, alignTo, onSave, onClose }: IConditionalFormattingDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConditionalFormattingDialog({ rule: initialRule, isNew, targetOptions, separators, alignTo, onSave, onClose }: IConditionalFormattingDialogProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ConditionalFormattingDialog.d.ts.map

package/esm/internal/components/configurationControls/conditionalFormatting/ConditionalFormattingDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionalFormattingDialog.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/configurationControls/conditionalFormatting/ConditionalFormattingDialog.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAMH,KAAK,0BAA0B,EAClC,MAAM,6BAA6B,CAAC;AAMrC,OAAO,EACH,KAAK,aAAa,EAQrB,MAAM,iCAAiC,CAAC;AA0UzC,MAAM,WAAW,iCAAiC;IAC9C,IAAI,EAAE,0BAA0B,CAAC;IACjC,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,aAAa,EAAE,CAAC;IAC/B,sEAAsE;IACtE,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,IAAI,CAAC;IACnD,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,2BAA2B,CAAC,EACxC,IAAI,EAAE,WAAW,EACjB,KAAK,EACL,aAAa,EACb,OAAO,EACP,MAAM,EACN,OAAO,EACV,EAAE,iCAAiC,2CA0GnC"}
+{"version":3,"file":"ConditionalFormattingDialog.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/configurationControls/conditionalFormatting/ConditionalFormattingDialog.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,EAEH,KAAK,0BAA0B,EAClC,MAAM,6BAA6B,CAAC;AAKrC,OAAO,EACH,KAAK,aAAa,EAOrB,MAAM,iCAAiC,CAAC;AAWzC,MAAM,WAAW,iCAAiC;IAC9C,IAAI,EAAE,0BAA0B,CAAC;IACjC,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,aAAa,EAAE,CAAC;IAC/B,uFAAuF;IACvF,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,sEAAsE;IACtE,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,IAAI,CAAC;IACnD,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,2BAA2B,CAAC,EACxC,IAAI,EAAE,WAAW,EACjB,KAAK,EACL,aAAa,EACb,UAAU,EACV,OAAO,EACP,MAAM,EACN,OAAO,EACV,EAAE,iCAAiC,2CAmHnC"}

package/esm/internal/components/configurationControls/conditionalFormatting/ConditionalFormattingDialog.js

@@ -1,121 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // (C) 2026 GoodData Corporation
-import { useId, useState } from "react";
-import cx from "classnames";
+import { useState } from "react";
 import { useIntl } from "react-intl";
-import { Button, Dropdown, DropdownButton, Input, Overlay, SingleSelectListItem, UiButton, UiButtonSegmentedControl, UiListbox, } from "@gooddata/sdk-ui-kit";
-import { conditionalFormattingMessages, conditionalFormattingOperatorMessages } from "../../../../locales.js";
-import { ColorDropdown } from "../colors/colorDropdown/ColorDropdown.js";
-import { CF_COLOR_PALETTE, colorToHex, hexToColor } from "./conditionalFormattingColors.js";
-import { findTargetOption, isRuleComplete, newCondition, operatorArity, operatorIcon, operatorsForKind, targetIcon, } from "./conditionalFormattingModel.js";
-// One listbox option; the iconRenderer sizes the type (attribute/metric) and wide operator glyphs.
-function CfListItem({ item, isSelected, isFocused, onSelect, }) {
-    const { title, icon } = item.data;
-    return (_jsx(SingleSelectListItem, { title: title, icon: icon, iconRenderer: (ic) => {
-            if (typeof ic !== "string" || !ic) {
-                return null;
-            }
-            const isTypeIcon = ic === "gd-icon-attribute" || ic === "gd-icon-metric";
-            return (_jsx("span", { "aria-hidden": "true", className: cx("gd-list-icon", ic, { "gd-cf-type-icon": isTypeIcon }) }));
-        }, isSelected: isSelected, isFocused: isFocused, onClick: onSelect }));
-}
-function CfSelect({ value, items, onSelect, placeholder, width = 200 }) {
-    const listboxId = useId();
-    const selected = items.find((item) => item.value === value);
-    const listItems = items.map((item) => ({
-        type: "interactive",
-        id: item.value,
-        stringTitle: item.title,
-        data: { title: item.title, icon: item.icon },
-    }));
-    return (_jsx(Dropdown, { closeOnParentScroll: true, closeOnMouseDrag: true, renderButton: ({ isOpen, toggleDropdown }) => (_jsx(DropdownButton, { value: selected?.title ?? placeholder ?? "", iconLeft: selected?.icon, isOpen: isOpen, onClick: toggleDropdown })), renderBody: ({ closeDropdown }) => (_jsx(UiListbox, { items: listItems, width: width, maxHeight: 300, selectedItemId: value, ariaAttributes: { id: listboxId }, InteractiveItemComponent: CfListItem, onClose: closeDropdown, onSelect: (listItem) => {
-                const original = items.find((candidate) => candidate.value === listItem.id);
-                if (original) {
-                    onSelect(original.value);
-                }
-                closeDropdown();
-            } })) }));
-}
-const valueForOperator = (operator, previous) => {
-    switch (operatorArity(operator)) {
-        case "none":
-            return { kind: "none" };
-        case "range":
-            // NaN = a bound not yet entered (rendered blank by rangeText). isRuleComplete blocks Save
-            // until both bounds are finite, so NaN stays dialog-local and never persists (it would
-            // JSON-serialize to null); the contract type can stay a tight `{ from: number; to: number }`.
-            return previous.kind === "literalRange" ? previous : { kind: "literalRange", from: NaN, to: NaN };
-        case "single":
-            return previous.kind === "literal" ? previous : { kind: "literal", value: "" };
-    }
-};
-const literalText = (value) => value.kind === "literal" ? String(value.value) : "";
-const rangeText = (value, bound) => {
-    if (value.kind !== "literalRange") {
-        return "";
-    }
-    const n = value[bound];
-    return Number.isFinite(n) ? String(n) : "";
-};
-// The ColorDropdown trigger swatch. ColorDropdown clones it with selectable-child props the swatch
-// ignores. No color renders a "none" slash rather than a misleading white.
-function CfSwatch({ hex }) {
-    return (_jsx("span", { className: `gd-cf-swatch${hex ? "" : " gd-cf-swatch--none"}`, style: hex ? { backgroundColor: hex } : undefined }));
-}
-function CfColorPick({ hex, noneColorLabel, onChange }) {
-    return (_jsx(ColorDropdown, { colorPalette: CF_COLOR_PALETTE, selectedColorItem: hexToColor(hex), onColorSelected: (color) => onChange(colorToHex(color)), onClear: () => onChange(undefined), noneColorAriaLabel: noneColorLabel, children: _jsx(CfSwatch, { hex: hex }) }));
-}
-const PREVIEW_SAMPLE = {
-    measure: "1,234.56",
-    attribute: "Abc",
-};
-// Row scope shows two sample cells to convey that the whole row is formatted.
-const ROW_PREVIEW_SAMPLE = ["Abc", "123"];
-function FormatEditor({ format, intl, onChange }) {
-    return (_jsx(Dropdown, { closeOnParentScroll: true, closeOnMouseDrag: true, renderButton: ({ toggleDropdown }) => (_jsx(Button, { className: "gd-button-link gd-button-icon-only gd-icon-pencil gd-cf-condition__edit", accessibilityConfig: {
-                ariaLabel: intl.formatMessage(conditionalFormattingMessages.dialogFormat),
-            }, onClick: toggleDropdown })), renderBody: () => (_jsxs("div", { className: "gd-cf-format", children: [
-                _jsx("span", { className: "gd-cf-format__label", children: intl.formatMessage(conditionalFormattingMessages.dialogTextColor) }), _jsx(CfColorPick, { hex: format.color, noneColorLabel: intl.formatMessage(conditionalFormattingMessages.dialogNoColor), onChange: (color) => onChange({ ...format, color }) }), _jsx("span", { className: "gd-cf-format__label", children: intl.formatMessage(conditionalFormattingMessages.dialogFillColor) }), _jsx(CfColorPick, { hex: format.backgroundColor, noneColorLabel: intl.formatMessage(conditionalFormattingMessages.dialogNoColor), onChange: (backgroundColor) => onChange({ ...format, backgroundColor }) }), _jsxs(UiButtonSegmentedControl, { children: [
-                        _jsx(UiButton, { size: "small", variant: "secondary", label: intl.formatMessage(conditionalFormattingMessages.dialogScopeCell), isSelected: format.scope === "cell", onClick: () => onChange({ ...format, scope: "cell" }) }), _jsx(UiButton, { size: "small", variant: "secondary", label: intl.formatMessage(conditionalFormattingMessages.dialogScopeRow), isSelected: format.scope === "row", onClick: () => onChange({ ...format, scope: "row" }) })
-                    ] })
-            ] })) }));
-}
-function ConditionEditor({ condition, kind, removable, intl, onChange, onRemove }) {
-    const operatorItems = operatorsForKind(kind).map((operator) => ({
-        value: operator,
-        title: intl.formatMessage(conditionalFormattingOperatorMessages[operator]),
-        icon: operatorIcon(operator),
-    }));
-    const arity = operatorArity(condition.operator);
-    const setValue = (value) => onChange({ ...condition, value });
-    const setFormat = (format) => onChange({ ...condition, format });
-    const parseBound = (v) => (v === "" ? NaN : Number(v));
-    const range = condition.value.kind === "literalRange" ? condition.value : { from: NaN, to: NaN };
-    const setRange = (from, to) => setValue({ kind: "literalRange", from, to });
-    const previewStyle = {
-        ...(condition.format.color ? { color: condition.format.color } : {}),
-        ...(condition.format.backgroundColor ? { backgroundColor: condition.format.backgroundColor } : {}),
-    };
-    return (_jsxs("div", { className: "gd-cf-condition", children: [
-            _jsxs("div", { className: "gd-cf-condition__header", children: [
-                    _jsx("span", { className: "gd-cf-condition__title", children: intl.formatMessage(conditionalFormattingMessages.dialogCondition) }), removable ? (_jsx(Button, { className: "gd-button-link gd-button-icon-only gd-icon-cross", accessibilityConfig: {
-                            ariaLabel: intl.formatMessage(conditionalFormattingMessages.dialogRemoveCondition),
-                        }, onClick: onRemove })) : null] }), _jsx(CfSelect, { value: condition.operator, items: operatorItems, onSelect: (operator) => onChange({ ...condition, operator, value: valueForOperator(operator, condition.value) }) }), arity === "single" ? (_jsx(Input, { type: kind === "measure" ? "number" : "text", value: literalText(condition.value), placeholder: intl.formatMessage(conditionalFormattingMessages.dialogValuePlaceholder), onChange: (v) => setValue({ kind: "literal", value: String(v) }) })) : null, arity === "range" ? (_jsxs("div", { className: "gd-cf-condition__range", children: [
-                    _jsx(Input, { type: "number", value: rangeText(condition.value, "from"), placeholder: intl.formatMessage(conditionalFormattingMessages.dialogFromPlaceholder), onChange: (v) => setRange(parseBound(v), range.to) }), _jsx(Input, { type: "number", value: rangeText(condition.value, "to"), placeholder: intl.formatMessage(conditionalFormattingMessages.dialogToPlaceholder), onChange: (v) => setRange(range.from, parseBound(v)) })
-                ] })) : null, _jsxs("div", { className: "gd-cf-condition__format-row", children: [
-                    _jsx("span", { className: "gd-cf-dialog__label", children: intl.formatMessage(conditionalFormattingMessages.dialogFormat) }), _jsx("div", { className: "gd-cf-preview", children: condition.format.scope === "row" ? (ROW_PREVIEW_SAMPLE.map((sample, index) => (_jsx("span", { className: "gd-cf-preview__cell", style: previewStyle, children: sample }, index)))) : (_jsx("span", { className: "gd-cf-preview__cell", style: previewStyle, children: PREVIEW_SAMPLE[kind] })) }), _jsx(FormatEditor, { format: condition.format, intl: intl, onChange: setFormat })
-                ] })
-        ] }));
-}
+import { Button, Overlay } from "@gooddata/sdk-ui-kit";
+import { conditionalFormattingMessages } from "../../../../locales.js";
+import { CfSelect } from "./CfSelect.js";
+import { findTargetOption, isRuleComplete, newCondition, ruleWithTarget, sanitizeRuleForEditing, targetIcon, } from "./conditionalFormattingModel.js";
+import { ConditionEditor } from "./ConditionEditor.js";
+import { ReorderList } from "./ReorderList.js";
 // The config panel sits on the right edge of the screen, so open the popover to the LEFT of the
 // anchor (self's right edge to the anchor's left edge); fall back to the right when there's no room.
 const POPOVER_ALIGN_POINTS = [
     { align: "cl cr", offset: { x: -5, y: 0 } },
     { align: "cr cl", offset: { x: 5, y: 0 } },
 ];
-export function ConditionalFormattingDialog({ rule: initialRule, isNew, targetOptions, alignTo, onSave, onClose, }) {
+export function ConditionalFormattingDialog({ rule: initialRule, isNew, targetOptions, separators, alignTo, onSave, onClose, }) {
     const intl = useIntl();
-    const [rule, setRule] = useState(initialRule);
+    const [rule, setRule] = useState(() => sanitizeRuleForEditing(initialRule));
     const updateCondition = (id, next) => setRule((current) => ({
         ...current,
         conditions: current.conditions.map((condition) => (condition.id === id ? next : condition)),
@@ -125,19 +26,17 @@ export function ConditionalFormattingDialog({ rule: initialRule, isNew, targetOp
         conditions: current.conditions.filter((condition) => condition.id !== id),
     }));
     const addCondition = () => setRule((current) => ({ ...current, conditions: [...current.conditions, newCondition()] }));
+    const reorderConditions = (conditions) => setRule((current) => ({ ...current, conditions }));
     const changeTarget = (value) => {
         const option = targetOptions.find((candidate) => candidate.value === value);
         if (!option) {
             return;
         }
-        setRule((current) => 
-        // Switching target kind (measure <-> attribute) invalidates the operators, so reset the
-        // conditions; same-kind switches keep the existing conditions.
-        option.target.kind === current.target.kind
-            ? { ...current, target: option.target }
-            : { ...current, target: option.target, conditions: [newCondition()] });
+        setRule((current) => ruleWithTarget(current, option, findTargetOption(targetOptions, current.target)));
     };
     const selectedTarget = findTargetOption(targetOptions, rule.target);
+    const isPercent = selectedTarget?.isPercent ?? false;
+    const suggestions = selectedTarget?.elements ?? [];
     const complete = isRuleComplete(rule);
     const title = intl.formatMessage(isNew ? conditionalFormattingMessages.dialogAddTitle : conditionalFormattingMessages.dialogEditTitle);
     return (_jsx(Overlay, { alignTo: alignTo, alignPoints: POPOVER_ALIGN_POINTS, closeOnParentScroll: true, closeOnMouseDrag: true, onClose: onClose, children: _jsxs("div", { className: "gd-cf-dialog", "aria-label": title, children: [
@@ -146,11 +45,11 @@ export function ConditionalFormattingDialog({ rule: initialRule, isNew, targetOp
                                 ariaLabel: intl.formatMessage(conditionalFormattingMessages.dialogCancel),
                             }, onClick: onClose })
                     ] }), _jsxs("div", { className: "gd-cf-dialog__body", children: [
-                        _jsx("span", { className: "gd-cf-dialog__label", children: intl.formatMessage(conditionalFormattingMessages.dialogTarget) }), _jsx(CfSelect, { value: selectedTarget?.value ?? "", items: targetOptions.map((option) => ({
+                        _jsx("span", { className: "gd-cf-dialog__label", children: intl.formatMessage(conditionalFormattingMessages.dialogTarget) }), _jsx(CfSelect, { value: selectedTarget?.value, items: targetOptions.map((option) => ({
                                 value: option.value,
                                 title: option.title,
                                 icon: targetIcon(option.target.kind),
-                            })), onSelect: changeTarget, placeholder: intl.formatMessage(conditionalFormattingMessages.dialogSelectTarget) }), rule.conditions.map((condition) => (_jsx(ConditionEditor, { condition: condition, kind: rule.target.kind, removable: rule.conditions.length > 1, intl: intl, onChange: (next) => updateCondition(condition.id, next), onRemove: () => removeCondition(condition.id) }, condition.id))), _jsx(Button, { className: "gd-button-secondary gd-cf-dialog__add-condition", iconLeft: "gd-icon-plus", value: intl.formatMessage(conditionalFormattingMessages.dialogAddCondition), onClick: addCondition })
+                            })), onSelect: changeTarget, placeholder: intl.formatMessage(conditionalFormattingMessages.dialogSelectTarget) }), _jsx(ReorderList, { items: rule.conditions, getKey: (condition) => condition.id, onReorder: reorderConditions, renderItem: (condition, slot) => (_jsx(ConditionEditor, { condition: condition, kind: rule.target.kind, isPercent: isPercent, separators: separators, suggestions: suggestions, removable: rule.conditions.length > 1, slot: slot, intl: intl, onChange: (next) => updateCondition(condition.id, next), onRemove: () => removeCondition(condition.id) })) }), _jsx(Button, { className: "gd-button-secondary gd-cf-dialog__add-condition", iconLeft: "gd-icon-plus", value: intl.formatMessage(conditionalFormattingMessages.dialogAddCondition), onClick: addCondition })
                     ] }), _jsxs("div", { className: "gd-cf-dialog__footer", children: [
                         _jsx(Button, { className: "gd-button-secondary", value: intl.formatMessage(conditionalFormattingMessages.dialogCancel), onClick: onClose }), _jsx(Button, { className: "gd-button-action", value: intl.formatMessage(conditionalFormattingMessages.dialogSave), disabled: !complete, onClick: () => onSave(rule) })
                     ] })

package/esm/internal/components/configurationControls/conditionalFormatting/ConditionalFormattingSection.d.ts

@@ -1,12 +1,14 @@
-import { type IInsightDefinition } from "@gooddata/sdk-model";
+import { type IInsightDefinition, type ISeparators } from "@gooddata/sdk-model";
 import { type IVisualizationProperties } from "../../../interfaces/Visualization.js";
+import { type ICfTargetData } from "./conditionalFormattingModel.js";
 export interface IConditionalFormattingSectionProps {
     properties?: IVisualizationProperties;
     propertiesMeta?: Record<string, unknown>;
     insight?: IInsightDefinition;
-    titlesByLocalId?: Record<string, string>;
+    targetData?: ICfTargetData;
+    separators?: ISeparators;
     isLoading?: boolean;
     pushData?: (data: unknown) => void;
 }
-export declare function ConditionalFormattingSection({ properties, propertiesMeta, insight, titlesByLocalId, isLoading, pushData }: IConditionalFormattingSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConditionalFormattingSection({ properties, propertiesMeta, insight, targetData, separators, isLoading, pushData }: IConditionalFormattingSectionProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ConditionalFormattingSection.d.ts.map

package/esm/internal/components/configurationControls/conditionalFormatting/ConditionalFormattingSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionalFormattingSection.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/configurationControls/conditionalFormatting/ConditionalFormattingSection.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAK9D,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAoBrF,MAAM,WAAW,kCAAkC;IAC/C,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAmCD,wBAAgB,4BAA4B,CAAC,EACzC,UAAU,EACV,cAAc,EACd,OAAO,EACP,eAAe,EACf,SAAS,EACT,QAAQ,EACX,EAAE,kCAAkC,2CAsGpC"}
+{"version":3,"file":"ConditionalFormattingSection.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/configurationControls/conditionalFormatting/ConditionalFormattingSection.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAKhF,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAIrF,OAAO,EACH,KAAK,aAAa,EAOrB,MAAM,iCAAiC,CAAC;AAUzC,MAAM,WAAW,kCAAkC;IAC/C,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAyCD,wBAAgB,4BAA4B,CAAC,EACzC,UAAU,EACV,cAAc,EACd,OAAO,EACP,UAAU,EACV,UAAU,EACV,SAAS,EACT,QAAQ,EACX,EAAE,kCAAkC,2CA4GpC"}

package/esm/internal/components/configurationControls/conditionalFormatting/ConditionalFormattingSection.js

@@ -1,29 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // (C) 2026 GoodData Corporation
 import { useState } from "react";
+import cx from "classnames";
 import { cloneDeep, set } from "lodash-es";
 import { useIntl } from "react-intl";
-import { Button } from "@gooddata/sdk-ui-kit";
+import { Button, UiIconButton } from "@gooddata/sdk-ui-kit";
 import { conditionalFormattingMessages } from "../../../../locales.js";
 import { ConfigSection } from "../ConfigSection.js";
 import { ConditionalFormattingDialog } from "./ConditionalFormattingDialog.js";
 import { buildTargetOptions, findTargetOption, newRule, targetIcon, targetLocalId, } from "./conditionalFormattingModel.js";
+import { ReorderList } from "./ReorderList.js";
 const SECTION_ID = "conditionalFormatting_section";
-// A saved rule: its target type icon (ABC / metric) + title; the delete (trash) appears on hover.
-// Reorder is preserved as rules-array order (first-match-wins) — drag-to-reorder UI is deferred.
-function RuleChip({ rule, option, labels, onEdit, onDelete }) {
-    return (_jsxs("div", { className: "gd-cf-rule", children: [
-            _jsxs("button", { type: "button", className: "gd-cf-rule__body", onClick: onEdit, title: labels.edit, children: [
-                    _jsx("span", { className: `gd-cf-type-icon ${targetIcon(rule.target.kind)}`, "aria-hidden": "true" }), _jsx("span", { className: "gd-cf-rule__title", children: option ? option.title : targetLocalId(rule.target) }), option ? null : _jsx("span", { className: "gd-cf-rule__invalid", children: labels.invalid })] }), _jsx(Button, { className: "gd-button-link gd-button-icon-only gd-icon-trash gd-cf-rule__delete", accessibilityConfig: { ariaLabel: labels.delete }, onClick: onDelete })
+// Array order = evaluation order (first-match-wins).
+function RuleChip({ rule, option, labels, slot, onEdit, onDelete }) {
+    return (_jsxs("div", { className: cx("gd-cf-rule", slot.className), ...slot.rootProps, children: [slot.handle, _jsxs("button", { type: "button", className: "gd-cf-rule__body", onClick: onEdit, title: labels.edit, children: [
+                    _jsx("span", { className: `gd-cf-type-icon ${targetIcon(rule.target.kind)}`, "aria-hidden": "true" }), _jsx("span", { className: "gd-cf-rule__title", children: option ? option.title : targetLocalId(rule.target) }), option ? null : _jsx("span", { className: "gd-cf-rule__invalid", children: labels.invalid })] }), _jsx("span", { className: "gd-cf-rule__delete", children: _jsx(UiIconButton, { icon: "trash", size: "small", variant: "tertiary", isDesctructive: true, label: labels.delete, onClick: onDelete }) })
         ] }));
 }
-export function ConditionalFormattingSection({ properties, propertiesMeta, insight, titlesByLocalId, isLoading, pushData, }) {
+export function ConditionalFormattingSection({ properties, propertiesMeta, insight, targetData, separators, isLoading, pushData, }) {
     const intl = useIntl();
     const [dialog, setDialog] = useState(null);
     const config = properties?.controls?.["conditionalFormatting"];
     const rules = config?.rules ?? [];
     const enabled = config?.enabled ?? false;
-    const targetOptions = insight ? buildTargetOptions(insight, titlesByLocalId) : [];
+    const targetOptions = insight ? buildTargetOptions(insight, targetData) : [];
     const canAddRule = !isLoading && targetOptions.length > 0;
     const commit = (rulesNext, enabledNext) => {
         // Spread the existing config so version (and any future cross-stack fields) survive an edit.
@@ -50,5 +50,5 @@ export function ConditionalFormattingSection({ properties, propertiesMeta, insig
     return (_jsxs(ConfigSection, { id: SECTION_ID, className: "gd-cf-section", title: conditionalFormattingMessages.sectionTitle.id, propertiesMeta: propertiesMeta, properties: properties, pushData: pushData, canBeToggled: true, toggledOn: enabled, toggleDisabled: isLoading, onToggle: (checked) => commit(rules, checked), children: [
             _jsx("span", { className: "s-cf-popover-anchor gd-cf-section__anchor" }), _jsxs("div", { className: "gd-cf-section__subcategory", children: [
                     _jsx("span", { className: "gd-cf-section__rules-label", children: intl.formatMessage(conditionalFormattingMessages.rulesLabel) }), _jsx("span", { className: "gd-cf-section__divider" }), _jsx(Button, { className: "gd-button-link gd-cf-section__add", iconLeft: "gd-icon-plus", value: intl.formatMessage(conditionalFormattingMessages.addRule), disabled: !canAddRule, onClick: () => setDialog({ rule: newRule(targetOptions[0].target), isNew: true }) })
-                ] }), rules.length === 0 ? (_jsx("div", { className: "gd-cf-section__empty", children: intl.formatMessage(conditionalFormattingMessages.empty) })) : (_jsx("div", { className: "gd-cf-section__rules", children: rules.map((rule) => (_jsx(RuleChip, { rule: rule, option: findTargetOption(targetOptions, rule.target), labels: chipLabels, onEdit: () => setDialog({ rule, isNew: false }), onDelete: () => deleteRule(rule.id) }, rule.id))) })), dialog ? (_jsx(ConditionalFormattingDialog, { rule: dialog.rule, isNew: dialog.isNew, targetOptions: targetOptions, alignTo: ".s-cf-popover-anchor", onSave: (rule) => saveRule(rule, dialog.isNew), onClose: () => setDialog(null) }, dialog.rule.id)) : null] }));
+                ] }), rules.length === 0 ? (_jsx("div", { className: "gd-cf-section__empty", children: intl.formatMessage(conditionalFormattingMessages.empty) })) : (_jsx("div", { className: "gd-cf-section__rules", children: _jsx(ReorderList, { items: rules, getKey: (rule) => rule.id, onReorder: (next) => commit(next, enabled), renderItem: (rule, slot) => (_jsx(RuleChip, { rule: rule, option: findTargetOption(targetOptions, rule.target), labels: chipLabels, slot: slot, onEdit: () => setDialog({ rule, isNew: false }), onDelete: () => deleteRule(rule.id) })) }) })), dialog ? (_jsx(ConditionalFormattingDialog, { rule: dialog.rule, isNew: dialog.isNew, targetOptions: targetOptions, separators: separators, alignTo: ".s-cf-popover-anchor", onSave: (rule) => saveRule(rule, dialog.isNew), onClose: () => setDialog(null) }, dialog.rule.id)) : null] }));
 }

package/esm/internal/components/configurationControls/conditionalFormatting/ReorderList.d.ts

@@ -0,0 +1,25 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+type IReorderRootProps = Pick<HTMLAttributes<HTMLElement>, "draggable" | "onPointerDown" | "onDragStart" | "onDragEnter" | "onDragOver" | "onDragLeave" | "onDrop" | "onDragEnd">;
+export interface IReorderSlot {
+    /** Grip element to render inside the row; null when the list is not reorderable. */
+    handle: ReactNode;
+    /** Spread onto the row root element. */
+    rootProps: IReorderRootProps;
+    /** Reorder classes to merge into the row's own className. */
+    className: string;
+}
+export interface IReorderListProps<T> {
+    items: readonly T[];
+    getKey: (item: T) => string;
+    /** Receives the full reordered array. */
+    onReorder: (items: T[]) => void;
+    renderItem: (item: T, slot: IReorderSlot, index: number) => ReactNode;
+}
+/**
+ * Drag-to-reorder for a small vertical list, on native HTML5 DnD (no dependency, no provider).
+ * The render prop keeps the consumer's own row markup; the whole row drags (the grip is a hover
+ * affordance). Pointer-only — no keyboard reorder yet.
+ */
+export declare function ReorderList<T>({ items, getKey, onReorder, renderItem }: IReorderListProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ReorderList.d.ts.map

package/esm/internal/components/configurationControls/conditionalFormatting/ReorderList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReorderList.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/configurationControls/conditionalFormatting/ReorderList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,cAAc,EAAE,KAAK,SAAS,EAAoB,MAAM,OAAO,CAAC;AAMxF,KAAK,iBAAiB,GAAG,IAAI,CACzB,cAAc,CAAC,WAAW,CAAC,EACzB,WAAW,GACX,eAAe,GACf,aAAa,GACb,aAAa,GACb,YAAY,GACZ,aAAa,GACb,QAAQ,GACR,WAAW,CAChB,CAAC;AAEF,MAAM,WAAW,YAAY;IACzB,oFAAoF;IACpF,MAAM,EAAE,SAAS,CAAC;IAClB,wCAAwC;IACxC,SAAS,EAAE,iBAAiB,CAAC;IAC7B,6DAA6D;IAC7D,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAChC,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC5B,yCAAyC;IACzC,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;CACzE;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CA6F5F"}