@gooddata/sdk-ui-ext 11.50.0-alpha.1 → 11.50.0-alpha.3

package/esm/internal/components/configurationControls/DataLabelsControl.d.ts

@@ -9,6 +9,7 @@ export interface IDataLabelsControlProps {
     enableSeparateTotalLabels?: boolean;
     enablePercentLabels?: boolean;
     enableStyleSelector?: boolean;
+    enablePositionSelector?: boolean;
 }
-export declare function DataLabelsControl({ pushData, properties, isDisabled, showDisabledMessage, defaultValue, isTotalsDisabled, enableSeparateTotalLabels, enablePercentLabels, enableStyleSelector }: IDataLabelsControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function DataLabelsControl({ pushData, properties, isDisabled, showDisabledMessage, defaultValue, isTotalsDisabled, enableSeparateTotalLabels, enablePercentLabels, enableStyleSelector, enablePositionSelector }: IDataLabelsControlProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DataLabelsControl.d.ts.map

package/esm/internal/components/configurationControls/DataLabelsControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataLabelsControl.d.ts","sourceRoot":"","sources":["../../../../src/internal/components/configurationControls/DataLabelsControl.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,mCAAmC,CAAC;AAMlF,MAAM,WAAW,uBAAuB;IACpC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IAC9B,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,wBAAgB,iBAAiB,CAAC,EAC9B,QAAQ,EACR,UAAU,EACV,UAAU,EACV,mBAA2B,EAC3B,YAAqB,EACrB,gBAAuB,EACvB,yBAAiC,EACjC,mBAAmB,EACnB,mBAA0B,EAC7B,EAAE,uBAAuB,2CAoEzB"}
+{"version":3,"file":"DataLabelsControl.d.ts","sourceRoot":"","sources":["../../../../src/internal/components/configurationControls/DataLabelsControl.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,mCAAmC,CAAC;AAOlF,MAAM,WAAW,uBAAuB;IACpC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IAC9B,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,wBAAgB,iBAAiB,CAAC,EAC9B,QAAQ,EACR,UAAU,EACV,UAAU,EACV,mBAA2B,EAC3B,YAAqB,EACrB,gBAAuB,EACvB,yBAAiC,EACjC,mBAAmB,EACnB,mBAA0B,EAC1B,sBAA8B,EACjC,EAAE,uBAAuB,2CAmFzB"}

package/esm/internal/components/configurationControls/DataLabelsControl.js

@@ -2,15 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // (C) 2019-2026 GoodData Corporation
 import { useIntl } from "react-intl";
 import { messages } from "../../../locales.js";
-import { dataLabelStyleDropdownItems, dataLabelsDropdownItems } from "../../constants/dropdowns.js";
+import { dataLabelPositionDropdownItems, dataLabelStyleDropdownItems, dataLabelsDropdownItems, } from "../../constants/dropdowns.js";
 import { getTranslatedDropdownItems } from "../../utils/translations.js";
 import { CheckboxControl } from "../configurationControls/CheckboxControl.js";
+import { ConfigSubsection } from "./ConfigSubsection.js";
 import { DropdownControl } from "./DropdownControl.js";
-export function DataLabelsControl({ pushData, properties, isDisabled, showDisabledMessage = false, defaultValue = "auto", isTotalsDisabled = true, enableSeparateTotalLabels = false, enablePercentLabels, enableStyleSelector = true, }) {
+export function DataLabelsControl({ pushData, properties, isDisabled, showDisabledMessage = false, defaultValue = "auto", isTotalsDisabled = true, enableSeparateTotalLabels = false, enablePercentLabels, enableStyleSelector = true, enablePositionSelector = false, }) {
     const intl = useIntl();
     const dataLabels = properties?.controls?.["dataLabels"]?.visible ?? defaultValue;
     const totalLabels = properties?.controls?.["dataLabels"]?.totalsVisible ?? defaultValue;
     const dataLabelStyle = properties?.controls?.["dataLabels"]?.style ?? "auto";
+    const dataLabelPosition = properties?.controls?.["dataLabels"]?.position ?? "auto";
     const percentLabels = properties?.controls?.["dataLabels"]?.percentsVisible ?? true;
     const percentLabelsDisabled = isDisabled || !dataLabels;
     // Decide about percents tooltip message: show info variant when not disabled,
@@ -23,6 +25,6 @@ export function DataLabelsControl({ pushData, properties, isDisabled, showDisabl
     else if (!percentLabelsDisabled) {
         percentLabelsMessageId = messages["canvasLabelsPercentagesInfo"].id;
     }
-    return (_jsxs("div", { className: "s-data-labels-config", children: [
-            _jsx(DropdownControl, { value: dataLabels, valuePath: "dataLabels.visible", labelText: messages["dataLabels"].id, disabled: isDisabled, properties: properties, pushData: pushData, items: getTranslatedDropdownItems(dataLabelsDropdownItems, intl), showDisabledMessage: showDisabledMessage }), enableSeparateTotalLabels ? (_jsx(DropdownControl, { value: totalLabels, valuePath: "dataLabels.totalsVisible", labelText: messages["totalLabels"].id, disabled: isTotalsDisabled, properties: properties, pushData: pushData, items: getTranslatedDropdownItems(dataLabelsDropdownItems, intl), showDisabledMessage: isTotalsDisabled })) : null, enableStyleSelector ? (_jsx(DropdownControl, { value: dataLabelStyle, valuePath: "dataLabels.style", labelText: messages["dataLabelStyle"].id, disabled: isDisabled, properties: properties, pushData: pushData, items: getTranslatedDropdownItems(dataLabelStyleDropdownItems, intl), showDisabledMessage: showDisabledMessage })) : null, enablePercentLabels ? (_jsx(CheckboxControl, { valuePath: "dataLabels.percentsVisible", labelText: messages["canvasLabelsPercentages"].id, properties: properties, checked: percentLabels, disabled: percentLabelsDisabled, disabledMessageId: percentLabelsMessageId, showDisabledMessage: !!percentLabelsMessageId, pushData: pushData })) : null] }));
+    return (_jsx("div", { className: "s-data-labels-config", children: _jsxs(ConfigSubsection, { title: messages["labelsSubsectionTitle"].id, children: [
+                _jsx(DropdownControl, { value: dataLabels, valuePath: "dataLabels.visible", labelText: messages["dataLabelDisplay"].id, disabled: isDisabled, properties: properties, pushData: pushData, items: getTranslatedDropdownItems(dataLabelsDropdownItems, intl), showDisabledMessage: showDisabledMessage }), enableSeparateTotalLabels ? (_jsx(DropdownControl, { value: totalLabels, valuePath: "dataLabels.totalsVisible", labelText: messages["totalLabels"].id, disabled: isTotalsDisabled, properties: properties, pushData: pushData, items: getTranslatedDropdownItems(dataLabelsDropdownItems, intl), showDisabledMessage: isTotalsDisabled })) : null, enableStyleSelector ? (_jsx(DropdownControl, { value: dataLabelStyle, valuePath: "dataLabels.style", labelText: messages["dataLabelStyle"].id, disabled: isDisabled, properties: properties, pushData: pushData, items: getTranslatedDropdownItems(dataLabelStyleDropdownItems, intl), showDisabledMessage: showDisabledMessage })) : null, enablePositionSelector ? (_jsx(DropdownControl, { value: dataLabelPosition, valuePath: "dataLabels.position", labelText: messages["dataLabelPosition"].id, disabled: isDisabled, properties: properties, pushData: pushData, items: getTranslatedDropdownItems(dataLabelPositionDropdownItems, intl), showDisabledMessage: showDisabledMessage })) : null, enablePercentLabels ? (_jsx(CheckboxControl, { valuePath: "dataLabels.percentsVisible", labelText: messages["canvasLabelsPercentages"].id, properties: properties, checked: percentLabels, disabled: percentLabelsDisabled, disabledMessageId: percentLabelsMessageId, showDisabledMessage: !!percentLabelsMessageId, pushData: pushData })) : null] }) }));
 }

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

@@ -0,0 +1,25 @@
+import { type IDateFilterOptionsByType } from "@gooddata/sdk-ui-filters";
+import { type ConditionalFormattingValue } from "@gooddata/sdk-ui-pivot/next";
+import { type ICfDateMeta, type ICfDateSettings } from "./conditionalFormattingModel.js";
+export interface ICfDateValueDropdownProps {
+    value: ConditionalFormattingValue;
+    date: ICfDateMeta;
+    /** Workspace preset catalog (shared with the dashboard date filter); undefined = static only. */
+    catalogOptions?: IDateFilterOptionsByType;
+    /** Workspace date-display settings (format, week start). */
+    dateSettings?: ICfDateSettings;
+    /** Id of the rendered inline error, associated with the trigger for assistive tech. */
+    errorId?: string;
+    onChange: (value: ConditionalFormattingValue) => void;
+}
+/**
+ * The value picker of a date condition: the standard DateFilter embedded with a dialog-styled
+ * trigger. Offers the static period form plus the workspace preset catalog and relative form,
+ * scoped to the target column's granularity.
+ *
+ * Exclude-current-period follows the dashboard's persistence exactly: the stored offsets are the
+ * already-shifted range (no flag), and reopening reconstructs the preset + checked toggle by
+ * matching the stored range against "preset shifted by one".
+ */
+export declare function CfDateValueDropdown({ value, date, catalogOptions, dateSettings, errorId, onChange }: ICfDateValueDropdownProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CfDateValueDropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CfDateValueDropdown.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/configurationControls/conditionalFormatting/CfDateValueDropdown.tsx"],"names":[],"mappings":"AAQA,OAAO,EAKH,KAAK,wBAAwB,EAIhC,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACH,KAAK,0BAA0B,EAKlC,MAAM,6BAA6B,CAAC;AAIrC,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,iCAAiC,CAAC;AA6GzF,MAAM,WAAW,yBAAyB;IACtC,KAAK,EAAE,0BAA0B,CAAC;IAClC,IAAI,EAAE,WAAW,CAAC;IAClB,iGAAiG;IACjG,cAAc,CAAC,EAAE,wBAAwB,CAAC;IAC1C,4DAA4D;IAC5D,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,uFAAuF;IACvF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,IAAI,CAAC;CACzD;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,EAChC,KAAK,EACL,IAAI,EACJ,cAAc,EACd,YAAY,EACZ,OAAO,EACP,QAAQ,EACX,EAAE,yBAAyB,2CA4E3B"}

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

@@ -0,0 +1,140 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { createContext, useContext, useState } from "react";
+import cx from "classnames";
+import { useIntl } from "react-intl";
+import { DateFilter, excludeCurrentPeriodFromRange, matchDateFilterToDateFilterOptionWithPreference, } from "@gooddata/sdk-ui-filters";
+import { DropdownButton } from "@gooddata/sdk-ui-kit";
+import { allowedValueGranularities, snapPlatformRangeToPeriodBounds, snapToPeriodBounds, usesTimeResolution, } from "@gooddata/sdk-ui-pivot/next";
+import { conditionalFormattingMessages } from "../../../../locales.js";
+const ABSOLUTE_FORM_ID = "ABSOLUTE_FORM";
+/**
+ * The workspace catalog scoped down to what the column's granularity can honor (granularity
+ * applicability is column-driven; the preset catalog is workspace-shared). The "All time" and
+ * empty-values entries never show — the All time and Is empty operators cover those.
+ */
+function scopeCatalogToColumn(catalog, absoluteForm, granularity) {
+    const allowed = allowedValueGranularities(granularity);
+    const relativePresetEntries = Object.entries(catalog?.relativePreset ?? {}).flatMap(([presetGranularity, presets]) => {
+        if (!allowed.some((candidate) => candidate === presetGranularity)) {
+            return [];
+        }
+        // Bounded ("… to date") presets are not offered: the stored value cannot carry the
+        // bound, so applying one would silently persist the whole unbounded period.
+        const offerable = (presets ?? []).filter((preset) => preset.boundedFilter === undefined);
+        return offerable.length > 0 ? [[presetGranularity, offerable]] : [];
+    });
+    return {
+        absoluteForm,
+        ...(catalog?.relativeForm ? { relativeForm: catalog.relativeForm } : {}),
+        ...(catalog?.absolutePreset ? { absolutePreset: catalog.absolutePreset } : {}),
+        ...(relativePresetEntries.length > 0
+            ? { relativePreset: Object.fromEntries(relativePresetEntries) }
+            : {}),
+    };
+}
+// The stored condition value expressed as the dashboard filter shape the option matcher speaks.
+function toDashboardDateFilter(value, columnGranularity) {
+    if (value.kind === "absoluteDate") {
+        return {
+            dateFilter: {
+                type: "absolute",
+                granularity: columnGranularity,
+                from: value.from,
+                to: value.to,
+            },
+        };
+    }
+    if (value.kind === "relativeDate") {
+        return {
+            dateFilter: {
+                type: "relative",
+                granularity: value.granularity,
+                from: value.from,
+                to: value.to,
+            },
+        };
+    }
+    return undefined;
+}
+// The option (and reconstructed exclude-toggle state) the picker opens on for a stored value.
+function matchStoredValue(value, absoluteForm, filterOptions, granularity) {
+    const storedFilter = toDashboardDateFilter(value, granularity);
+    if (!storedFilter) {
+        return { dateFilterOption: absoluteForm, excludeCurrentPeriod: false };
+    }
+    return matchDateFilterToDateFilterOptionWithPreference(storedFilter, filterOptions, undefined);
+}
+// DateFilter's button contract is fixed, so the error association travels via context.
+const CfDateButtonA11yContext = createContext({});
+// Rendered through DateFilter's button slot. Module-level so its identity is stable across renders.
+// Deliberately NOT wiring props.onClick: DateFilterCore's wrapping span already toggles the dropdown,
+// so wiring both toggles it twice per click (open → instantly closed).
+function CfDateButton({ customFilterName, textSubtitle, isOpen, buttonRef, dropdownId, }) {
+    // describedBy is only set while the value has an inline error — it doubles as the error state.
+    const { describedBy } = useContext(CfDateButtonA11yContext);
+    return (_jsx(DropdownButton, { className: cx("gd-cf-date-value", { "gd-cf-date-value--error": describedBy !== undefined }), value: customFilterName ?? textSubtitle, isOpen: isOpen, isFullWidth: true, buttonRef: buttonRef, dropdownId: dropdownId, accessibilityConfig: describedBy ? { ariaDescribedBy: describedBy } : undefined }));
+}
+/**
+ * The value picker of a date condition: the standard DateFilter embedded with a dialog-styled
+ * trigger. Offers the static period form plus the workspace preset catalog and relative form,
+ * scoped to the target column's granularity.
+ *
+ * Exclude-current-period follows the dashboard's persistence exactly: the stored offsets are the
+ * already-shifted range (no flag), and reopening reconstructs the preset + checked toggle by
+ * matching the stored range against "preset shifted by one".
+ */
+export function CfDateValueDropdown({ value, date, catalogOptions, dateSettings, errorId, onChange, }) {
+    const intl = useIntl();
+    const stored = value.kind === "absoluteDate" ? { from: value.from, to: value.to } : undefined;
+    // The static form needs bounds to open on; pin the current period at mount (recomputing "now"
+    // every render would tick across minute boundaries and reset in-progress state). A granularity
+    // change while mounted keeps the stale template — harmless, applying always snaps against current.
+    const [pristineTemplate] = useState(() => snapToPeriodBounds(new Date(), new Date(), date.granularity));
+    const template = stored ?? pristineTemplate ?? undefined;
+    const absoluteForm = {
+        localIdentifier: ABSOLUTE_FORM_ID,
+        type: "absoluteForm",
+        name: "",
+        visible: true,
+        from: template?.from,
+        to: template?.to,
+    };
+    const filterOptions = scopeCatalogToColumn(catalogOptions, absoluteForm, date.granularity);
+    const matched = matchStoredValue(value, absoluteForm, filterOptions, date.granularity);
+    const handleApply = (option, excludeCurrentPeriod) => {
+        if (option.type === "absoluteForm" || option.type === "absolutePreset") {
+            if (option.from === undefined || option.to === undefined) {
+                return;
+            }
+            // Store the range as picked (overlap semantics resolve it against any column
+            // granularity per render); snapping at the value's own precision only validates and
+            // normalizes ordering.
+            const from = String(option.from);
+            const to = String(option.to);
+            const precision = from.length > 10 || to.length > 10 ? "GDC.time.minute" : "GDC.time.date";
+            const snapped = snapPlatformRangeToPeriodBounds(from, to, precision);
+            if (snapped) {
+                onChange({ kind: "absoluteDate", from: snapped.from, to: snapped.to });
+            }
+            return;
+        }
+        if (option.type === "relativeForm" || option.type === "relativePreset") {
+            const { granularity, from, to } = option;
+            if (granularity === undefined || from === undefined || to === undefined) {
+                return;
+            }
+            // Bake exclude-current-period into the offsets (dashboard parity): the shared helper
+            // shifts a current-period-ending range back by one, exactly what the filter bar persists.
+            const range = excludeCurrentPeriodFromRange({ from, to }, excludeCurrentPeriod);
+            onChange({ kind: "relativeDate", granularity, from: range.from, to: range.to });
+        }
+        // allTime/emptyValues never appear among the options (the All time / Is empty operators cover them).
+    };
+    return (_jsx(CfDateButtonA11yContext.Provider, { value: { describedBy: errorId }, children: _jsx(DateFilter, { dateFilterMode: "active", filterOptions: filterOptions, availableGranularities: filterOptions.relativeForm ? [...allowedValueGranularities(date.granularity)] : [], selectedFilterOption: matched.dateFilterOption, excludeCurrentPeriod: matched.excludeCurrentPeriod, isTimeForAbsoluteRangeEnabled: usesTimeResolution(date.granularity), dateFormat: dateSettings?.dateFormat, 
+            // Week columns pin Monday: the resolver snaps ISO weeks, and a Sunday-start calendar
+            // would let a selection straddle the snap boundary.
+            weekStart: date.granularity === "GDC.time.week_us" ? "Monday" : dateSettings?.weekStart, locale: intl.locale, onApply: handleApply, overlayPositionType: "sameAsTarget", ButtonComponent: CfDateButton, customFilterName: value.kind === "none"
+                ? intl.formatMessage(conditionalFormattingMessages.dialogSelectPeriod)
+                : undefined }) }));
+}

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

@@ -1 +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"}
+{"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;AAoCD,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

@@ -9,7 +9,7 @@ function CfListItem({ item, isSelected, isFocused, onSelect, }) {
                 if (typeof ic !== "string" || !ic) {
                     return null;
                 }
-                const isTypeIcon = ic === "gd-icon-attribute" || ic === "gd-icon-metric";
+                const isTypeIcon = ic === "gd-icon-attribute" || ic === "gd-icon-metric" || ic === "gd-icon-date";
                 return (_jsx("span", { "aria-hidden": "true", className: cx("gd-list-icon", ic, { "gd-cf-type-icon": isTypeIcon }) }));
             }, isSelected: isSelected, isFocused: isFocused, onClick: onSelect }) }));
 }

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

@@ -1,6 +1,7 @@
-import { type IntlShape } from "react-intl";
 import { type ISeparators } from "@gooddata/sdk-model";
+import { type IDateFilterOptionsByType } from "@gooddata/sdk-ui-filters";
 import { type ConditionalFormattingTarget, type IConditionalFormattingCondition } from "@gooddata/sdk-ui-pivot/next";
+import { type ICfDateMeta, type ICfDateSettings } from "./conditionalFormattingModel.js";
 import { type IReorderSlot } from "./ReorderList.js";
 export interface IConditionEditorProps {
     condition: IConditionalFormattingCondition;
@@ -8,11 +9,13 @@ export interface IConditionEditorProps {
     isPercent: boolean;
     separators: ISeparators | undefined;
     suggestions: readonly string[];
+    date: ICfDateMeta | undefined;
+    dateFilterOptions: IDateFilterOptionsByType | undefined;
+    dateSettings: ICfDateSettings | undefined;
     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;
+export declare function ConditionEditor({ condition, kind, isPercent, separators, suggestions, date, dateFilterOptions, dateSettings, removable, slot, onChange, onRemove }: IConditionEditorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ConditionEditor.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"ConditionEditor.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/configurationControls/conditionalFormatting/ConditionEditor.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAiBzE,OAAO,EACH,KAAK,2BAA2B,EAEhC,KAAK,+BAA+B,EAEvC,MAAM,6BAA6B,CAAC;AAYrC,OAAO,EAEH,KAAK,WAAW,EAChB,KAAK,eAAe,EAWvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAsTrD,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,IAAI,EAAE,WAAW,GAAG,SAAS,CAAC;IAC9B,iBAAiB,EAAE,wBAAwB,GAAG,SAAS,CAAC;IACxD,YAAY,EAAE,eAAe,GAAG,SAAS,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,YAAY,CAAC;IACnB,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,IAAI,EACJ,iBAAiB,EACjB,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,QAAQ,EACX,EAAE,qBAAqB,2CAiFvB"}

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

@@ -2,33 +2,16 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // (C) 2026 GoodData Corporation
 import { useId } from "react";
 import cx from "classnames";
+import { useIntl } from "react-intl";
 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 { conditionalFormattingDateOperatorMessages, conditionalFormattingMessages, conditionalFormattingOperatorMessages, } from "../../../../locales.js";
 import { ColorDropdown } from "../colors/colorDropdown/ColorDropdown.js";
+import { CfDateValueDropdown } from "./CfDateValueDropdown.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, }) {
+import { displayToRawNumber, literalRaw, literalText, operatorIcon, operatorsForTarget, rangeRaw, rawToDisplayNumber, validateCondition, valueEditorKind, valueForOperator, } from "./conditionalFormattingModel.js";
+function CfMeasureValueInput({ raw, isPercent, separators, placeholder, onChangeRaw, hasError, accessibilityConfig, }) {
+    const intl = useIntl();
     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
@@ -53,21 +36,33 @@ function CfValueCombobox({ value, suggestions, placeholder, onChangeText }) {
 }
 const FIELD_ERROR_MESSAGE = {
     rangeOrder: conditionalFormattingMessages.dialogErrorRangeOrder,
+    dateUnresolvable: conditionalFormattingMessages.dialogErrorDateUnresolvable,
 };
-function CfFieldError({ id, error, intl, }) {
+function CfFieldError({ id, error }) {
+    const intl = useIntl();
     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, }) {
+function ConditionValueInput({ condition, kind, isPercent, separators, suggestions, date, dateFilterOptions, dateSettings, onChange, }) {
+    const intl = useIntl();
     const errorId = useId();
     const setValue = (value) => onChange({ ...condition, value });
-    switch (valueEditorKind(condition, kind, suggestions.length > 0)) {
+    switch (valueEditorKind(condition, kind, suggestions.length > 0, date !== undefined)) {
         case "none":
             return null;
+        case "date": {
+            if (!date) {
+                return null;
+            }
+            const { errors } = validateCondition(condition, kind, date);
+            return (_jsxs(_Fragment, { children: [
+                    _jsx(CfDateValueDropdown, { value: condition.value, date: date, catalogOptions: dateFilterOptions, dateSettings: dateSettings, errorId: errors.date ? errorId : undefined, onChange: setValue }), _jsx(CfFieldError, { id: errorId, error: errors.date })
+                ] }));
+        }
         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 ?? "" }) }));
+            return (_jsx(CfMeasureValueInput, { raw: literalRaw(condition.value), isPercent: isPercent, separators: separators, placeholder: intl.formatMessage(conditionalFormattingMessages.dialogValuePlaceholder), 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":
@@ -81,8 +76,8 @@ function ConditionValueInput({ condition, kind, isPercent, separators, suggestio
                 : {};
             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 })
+                            _jsx(CfMeasureValueInput, { raw: rangeRaw(condition.value, "from"), isPercent: isPercent, separators: separators, placeholder: intl.formatMessage(conditionalFormattingMessages.dialogFromPlaceholder), 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), onChangeRaw: (raw) => setRange(range.from, raw ?? NaN), ...invalidInputProps(errors.range) })
+                        ] }), _jsx(CfFieldError, { id: errorId, error: errors.range })
                 ] }));
         }
     }
@@ -101,7 +96,8 @@ const PREVIEW_SAMPLE = {
 };
 // 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 }) {
+function FormatEditor({ format, onChange }) {
+    const intl = useIntl();
     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),
@@ -111,11 +107,15 @@ function FormatEditor({ format, intl, onChange }) {
                     ] })
             ] })) }));
 }
-export function ConditionEditor({ condition, kind, isPercent, separators, suggestions, removable, slot, intl, onChange, onRemove, }) {
-    const operatorItems = operatorsForKind(kind).map((operator) => ({
+export function ConditionEditor({ condition, kind, isPercent, separators, suggestions, date, dateFilterOptions, dateSettings, removable, slot, onChange, onRemove, }) {
+    const intl = useIntl();
+    const isDate = date !== undefined;
+    // Date operators render label-only (per design), so no icon lookup on that path.
+    const operatorItems = operatorsForTarget(kind, isDate).map((operator) => ({
         value: operator,
-        title: intl.formatMessage(conditionalFormattingOperatorMessages[operator]),
-        icon: operatorIcon(operator),
+        title: intl.formatMessage((isDate ? conditionalFormattingDateOperatorMessages[operator] : undefined) ??
+            conditionalFormattingOperatorMessages[operator]),
+        icon: isDate ? undefined : operatorIcon(operator),
     }));
     const setFormat = (format) => onChange({ ...condition, format });
     const previewStyle = {
@@ -125,8 +125,12 @@ export function ConditionEditor({ condition, kind, isPercent, separators, sugges
     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 })
+                        }, onClick: onRemove })) : null] }), _jsx(CfSelect, { value: condition.operator, items: operatorItems, onSelect: (operator) => onChange({
+                    ...condition,
+                    operator,
+                    value: valueForOperator(operator, condition.value, isDate),
+                }) }), _jsx(ConditionValueInput, { condition: condition, kind: kind, isPercent: isPercent, separators: separators, suggestions: suggestions, date: date, dateFilterOptions: dateFilterOptions, dateSettings: dateSettings, 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, onChange: setFormat })
                 ] })
         ] }));
 }

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

@@ -1,16 +1,21 @@
 import { type ISeparators } from "@gooddata/sdk-model";
+import { type IDateFilterOptionsByType } from "@gooddata/sdk-ui-filters";
 import { type IConditionalFormattingRule } from "@gooddata/sdk-ui-pivot/next";
-import { type ITargetOption } from "./conditionalFormattingModel.js";
+import { type ICfDateSettings, 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;
+    /** Workspace date-filter preset catalog; date value pickers offer it (undefined = static only). */
+    dateFilterOptions?: IDateFilterOptionsByType;
+    /** Workspace date-display settings (format, week start) for the date value pickers. */
+    dateSettings?: ICfDateSettings;
     /** 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, separators, alignTo, onSave, onClose }: IConditionalFormattingDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConditionalFormattingDialog({ rule: initialRule, isNew, targetOptions, separators, dateFilterOptions, dateSettings, 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":"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"}
+{"version":3,"file":"ConditionalFormattingDialog.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/configurationControls/conditionalFormatting/ConditionalFormattingDialog.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAEzE,OAAO,EAEH,KAAK,0BAA0B,EAClC,MAAM,6BAA6B,CAAC;AAKrC,OAAO,EACH,KAAK,eAAe,EACpB,KAAK,aAAa,EAQrB,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,mGAAmG;IACnG,iBAAiB,CAAC,EAAE,wBAAwB,CAAC;IAC7C,uFAAuF;IACvF,YAAY,CAAC,EAAE,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,UAAU,EACV,iBAAiB,EACjB,YAAY,EACZ,OAAO,EACP,MAAM,EACN,OAAO,EACV,EAAE,iCAAiC,2CAgInC"}

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // (C) 2026 GoodData Corporation
 import { useState } from "react";
+import { isEqual } from "lodash-es";
 import { useIntl } from "react-intl";
 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 { findTargetOption, isDateTarget, 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
@@ -14,9 +15,10 @@ 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, separators, alignTo, onSave, onClose, }) {
+export function ConditionalFormattingDialog({ rule: initialRule, isNew, targetOptions, separators, dateFilterOptions, dateSettings, alignTo, onSave, onClose, }) {
     const intl = useIntl();
-    const [rule, setRule] = useState(() => sanitizeRuleForEditing(initialRule));
+    const initial = sanitizeRuleForEditing(initialRule, isDateTarget(findTargetOption(targetOptions, initialRule.target)));
+    const [rule, setRule] = useState(initial);
     const updateCondition = (id, next) => setRule((current) => ({
         ...current,
         conditions: current.conditions.map((condition) => (condition.id === id ? next : condition)),
@@ -25,7 +27,13 @@ export function ConditionalFormattingDialog({ rule: initialRule, isNew, targetOp
         ...current,
         conditions: current.conditions.filter((condition) => condition.id !== id),
     }));
-    const addCondition = () => setRule((current) => ({ ...current, conditions: [...current.conditions, newCondition()] }));
+    const addCondition = () => setRule((current) => ({
+        ...current,
+        conditions: [
+            ...current.conditions,
+            newCondition(isDateTarget(findTargetOption(targetOptions, current.target))),
+        ],
+    }));
     const reorderConditions = (conditions) => setRule((current) => ({ ...current, conditions }));
     const changeTarget = (value) => {
         const option = targetOptions.find((candidate) => candidate.value === value);
@@ -37,7 +45,8 @@ export function ConditionalFormattingDialog({ rule: initialRule, isNew, targetOp
     const selectedTarget = findTargetOption(targetOptions, rule.target);
     const isPercent = selectedTarget?.isPercent ?? false;
     const suggestions = selectedTarget?.elements ?? [];
-    const complete = isRuleComplete(rule);
+    const complete = isRuleComplete(rule, selectedTarget?.date);
+    const isDirty = isNew || !isEqual(rule, initial);
     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: [
                 _jsxs("div", { className: "gd-cf-dialog__header", children: [
@@ -48,10 +57,10 @@ export function ConditionalFormattingDialog({ rule: initialRule, isNew, targetOp
                         _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) }), _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 })
+                                icon: targetIcon(option.target.kind, isDateTarget(option)),
+                            })), 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, date: selectedTarget?.date, dateFilterOptions: dateFilterOptions, dateSettings: dateSettings, removable: rule.conditions.length > 1, slot: slot, 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) })
+                        _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 || !isDirty, onClick: () => onSave(rule) })
                     ] })
             ] }) }));
 }

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

@@ -1,14 +1,19 @@
+import { type IAnalyticalBackend } from "@gooddata/sdk-backend-spi";
 import { type IInsightDefinition, type ISeparators } from "@gooddata/sdk-model";
 import { type IVisualizationProperties } from "../../../interfaces/Visualization.js";
-import { type ICfTargetData } from "./conditionalFormattingModel.js";
+import { type ICfDateSettings, type ICfTargetData } from "./conditionalFormattingModel.js";
 export interface IConditionalFormattingSectionProps {
     properties?: IVisualizationProperties;
     propertiesMeta?: Record<string, unknown>;
     insight?: IInsightDefinition;
     targetData?: ICfTargetData;
+    /** Backend + workspace for fetching the date-filter preset catalog (date conditions). */
+    backend?: IAnalyticalBackend;
+    workspace?: string;
+    dateSettings?: ICfDateSettings;
     separators?: ISeparators;
     isLoading?: boolean;
     pushData?: (data: unknown) => void;
 }
-export declare function ConditionalFormattingSection({ properties, propertiesMeta, insight, targetData, separators, isLoading, pushData }: IConditionalFormattingSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConditionalFormattingSection({ properties, propertiesMeta, insight, targetData, backend, workspace, dateSettings, 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":"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"}
+{"version":3,"file":"ConditionalFormattingSection.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/configurationControls/conditionalFormatting/ConditionalFormattingSection.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAKhF,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAIrF,OAAO,EACH,KAAK,eAAe,EACpB,KAAK,aAAa,EASrB,MAAM,iCAAiC,CAAC;AAWzC,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,yFAAyF;IACzF,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AA0DD,wBAAgB,4BAA4B,CAAC,EACzC,UAAU,EACV,cAAc,EACd,OAAO,EACP,UAAU,EACV,OAAO,EACP,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAS,EACT,QAAQ,EACX,EAAE,kCAAkC,2CA4HpC"}