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

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

@@ -8,23 +8,29 @@ 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 { buildTargetOptions, findTargetOption, isDateTarget, isRuleComplete, newRule, targetIcon, targetLocalId, } from "./conditionalFormattingModel.js";
 import { ReorderList } from "./ReorderList.js";
+import { useCfDateFilterOptions } from "./useCfDateFilterOptions.js";
 const SECTION_ID = "conditionalFormatting_section";
 // 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 }) })
+function RuleChip({ rule, option, invalid, editable, 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, disabled: !editable, children: [
+                    _jsx("span", { className: `gd-cf-type-icon ${targetIcon(rule.target.kind, isDateTarget(option))}`, "aria-hidden": "true" }), _jsx("span", { className: "gd-cf-rule__title", children: option ? option.title : targetLocalId(rule.target) }), invalid ? (_jsx("span", { className: "gd-cf-rule__invalid", children: option ? labels.invalidValue : labels.invalid })) : null] }), _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, targetData, separators, isLoading, pushData, }) {
+export function ConditionalFormattingSection({ properties, propertiesMeta, insight, targetData, backend, workspace, dateSettings, 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, targetData) : [];
-    const canAddRule = !isLoading && targetOptions.length > 0;
+    // Only date pickers consume the catalog — skip the backend query when no target is date-eligible.
+    const dateFilterOptions = useCfDateFilterOptions(backend, workspace, targetOptions.some(isDateTarget));
+    // Completeness and authoring both need execution-resolved date metadata; before the first data view
+    // it's unknown — don't flash a false "Invalid" badge, don't author a plain-text rule on a date attr.
+    const targetDataReady = targetData?.dates !== undefined;
+    const canAddRule = !isLoading && targetOptions.length > 0 && targetDataReady;
     const commit = (rulesNext, enabledNext) => {
         // Spread the existing config so version (and any future cross-stack fields) survive an edit.
         const next = { ...config, enabled: enabledNext, rules: rulesNext };
@@ -44,11 +50,17 @@ export function ConditionalFormattingSection({ properties, propertiesMeta, insig
     const deleteRule = (id) => commit(rules.filter((rule) => rule.id !== id), enabled);
     const chipLabels = {
         invalid: intl.formatMessage(conditionalFormattingMessages.ruleInvalid),
+        invalidValue: intl.formatMessage(conditionalFormattingMessages.ruleInvalidValue),
         edit: intl.formatMessage(conditionalFormattingMessages.ruleEdit),
         delete: intl.formatMessage(conditionalFormattingMessages.ruleDelete),
     };
     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: _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] }));
+                    _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]), 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: _jsx(ReorderList, { items: rules, getKey: (rule) => rule.id, onReorder: (next) => commit(next, enabled), renderItem: (rule, slot) => {
+                        const option = findTargetOption(targetOptions, rule.target);
+                        // A missing target flags immediately; value validation waits for date metadata.
+                        const invalid = !option || (targetDataReady && !isRuleComplete(rule, option.date));
+                        return (_jsx(RuleChip, { rule: rule, option: option, invalid: invalid, editable: targetDataReady, 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, dateFilterOptions: dateFilterOptions, dateSettings: dateSettings, alignTo: ".s-cf-popover-anchor", onSave: (rule) => saveRule(rule, dialog.isNew), onClose: () => setDialog(null) }, dialog.rule.id)) : null] }));
 }

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

@@ -1,6 +1,20 @@
-import { type IInsightDefinition } from "@gooddata/sdk-model";
+import { type DateFilterGranularity, type IInsightDefinition, type WeekStart } from "@gooddata/sdk-model";
 import { type DataViewFacade } from "@gooddata/sdk-ui";
 import { type ConditionalFormattingOperator, type ConditionalFormattingTarget, type ConditionalFormattingValue, type IConditionalFormattingCondition, type IConditionalFormattingRule } from "@gooddata/sdk-ui-pivot/next";
+/**
+ * Date-attribute metadata date conditions author and validate against. Present only for granularities
+ * the evaluation engine supports (linear; fiscal joins once its labeling convention is verified).
+ */
+export interface ICfDateMeta {
+    granularity: DateFilterGranularity;
+    /** The column's timezone (descriptor `format.timezone`) — "today" resolves in it. */
+    timezone?: string;
+}
+/** Workspace date-display settings the date value picker honors (derived by the host from settings). */
+export interface ICfDateSettings {
+    dateFormat?: string;
+    weekStart?: WeekStart;
+}
 /** A selectable measure/attribute for the rule's "applies to" dropdown. */
 export interface ITargetOption {
     /** `measure:<localId>` | `attribute:<localId>` */
@@ -11,6 +25,8 @@ export interface ITargetOption {
     isPercent?: boolean;
     /** Element suggestions from the current (paged) result — a convenience over free text, never a constraint. */
     elements?: readonly string[];
+    /** Present iff the attribute is a date-condition-eligible date attribute; switches the condition set. */
+    date?: ICfDateMeta;
 }
 /** Execution-resolved data the CF UI needs per localId; flows as one object from the pluggable down. */
 export interface ICfTargetData {
@@ -20,6 +36,8 @@ export interface ICfTargetData {
     formats?: Record<string, string>;
     /** Distinct attribute element values by localId; drives value autocomplete. */
     elements?: Record<string, string[]>;
+    /** Date metadata by localId for date-condition-eligible attributes (descriptor granularity/timezone). */
+    dates?: Record<string, ICfDateMeta>;
 }
 /**
  * Extracts {@link ICfTargetData} from the executed data view. Titles must come from here — attribute
@@ -29,26 +47,41 @@ export interface ICfTargetData {
 export declare function buildCfTargetData(dataView: DataViewFacade): Required<ICfTargetData>;
 export declare function buildTargetOptions(insight: IInsightDefinition, data?: ICfTargetData): ITargetOption[];
 export declare const findTargetOption: (options: ITargetOption[], target: ConditionalFormattingTarget) => ITargetOption | undefined;
+/** Date-eligible target: the option carries execution-resolved date metadata. */
+export declare const isDateTarget: (option: ITargetOption | undefined) => boolean;
 export declare const targetLocalId: (target: ConditionalFormattingTarget) => string;
-export declare const operatorsForKind: (kind: "attribute" | "measure") => ConditionalFormattingOperator[];
+export declare const operatorsForTarget: (kind: "attribute" | "measure", isDate: boolean) => ConditionalFormattingOperator[];
 export declare const operatorIcon: (operator: ConditionalFormattingOperator) => string | undefined;
-export declare const targetIcon: (kind: "attribute" | "measure") => string;
+export declare const targetIcon: (kind: "attribute" | "measure", isDate?: boolean) => string;
 export type OperatorArity = "none" | "single" | "range";
 export declare const operatorArity: (operator: ConditionalFormattingOperator) => OperatorArity;
-export type ConditionValueEditor = "none" | "number" | "combobox" | "text" | "range";
+export type ConditionValueEditor = "none" | "number" | "combobox" | "text" | "range" | "date";
 /**
  * Which editor a condition's value renders with. Element suggestions apply only to attribute
- * Is / Is not (per design) — substring operators keep the plain text input.
+ * Is / Is not (per design) — substring operators keep the plain text input. A date target's single
+ * operand is always the period picker.
  */
-export declare const valueEditorKind: (condition: IConditionalFormattingCondition, kind: "attribute" | "measure", hasSuggestions: boolean) => ConditionValueEditor;
+export declare const valueEditorKind: (condition: IConditionalFormattingCondition, kind: "attribute" | "measure", hasSuggestions: boolean, isDate: boolean) => ConditionValueEditor;
 /** Fresh empty operand of the right shape for the operator. */
-export declare const emptyValueForOperator: (operator: ConditionalFormattingOperator) => ConditionalFormattingValue;
-export declare const newCondition: () => IConditionalFormattingCondition;
-export declare const newRule: (target: ConditionalFormattingTarget) => IConditionalFormattingRule;
+export declare const emptyValueForOperator: (operator: ConditionalFormattingOperator, isDate?: boolean) => ConditionalFormattingValue;
+/**
+ * An entered operand survives operator changes within the same shape (e.g. \> to \>=); a picked date
+ * period likewise survives switching among the single-operand date operators (Is on ↔ Is after…).
+ */
+export declare const valueForOperator: (operator: ConditionalFormattingOperator, previous: ConditionalFormattingValue, isDate: boolean) => ConditionalFormattingValue;
+/** The text a free-text/combobox editor shows for a literal operand. */
+export declare const literalText: (value: ConditionalFormattingValue) => string;
+/** The finite number a numeric editor shows for a literal operand, or null (blank input). */
+export declare const literalRaw: (value: ConditionalFormattingValue) => number | null;
+/** One finite bound of a range operand, or null (blank input). */
+export declare const rangeRaw: (value: ConditionalFormattingValue, bound: "from" | "to") => number | null;
+export declare const newCondition: (isDate?: boolean) => IConditionalFormattingCondition;
+export declare const newRule: (option: ITargetOption) => IConditionalFormattingRule;
 /**
- * Rule re-pointed at a new target. Crossing target kinds invalidates the operators, so conditions
- * reset; crossing the percent boundary within measures changes the value units out from under the
- * user, so operators stay but values clear (Save disables until re-entered).
+ * Rule re-pointed at a new target. Crossing target kinds — or the date/plain boundary within
+ * attributes — coerces operators to the new family and clears values (per-condition color/scope
+ * survive). Crossing the percent boundary, or a granularity change within dates, keeps operators
+ * but clears values. Either way Save disables until re-entered.
  */
 export declare const ruleWithTarget: (rule: IConditionalFormattingRule, next: ITargetOption, previous: ITargetOption | undefined) => IConditionalFormattingRule;
 /**
@@ -61,16 +94,18 @@ export declare const isPercentFormat: (format: string | undefined) => boolean;
 export declare const rawToDisplayNumber: (raw: number, percent: boolean) => number;
 /** Number entered in a percent input -> the raw number stored and compared (÷100). */
 export declare const displayToRawNumber: (display: number, percent: boolean) => number;
-export type ConditionalFormattingFieldError = "rangeOrder";
+export type ConditionalFormattingFieldError = "rangeOrder" | "dateUnresolvable";
 export interface IConditionErrors {
     range?: ConditionalFormattingFieldError;
+    date?: ConditionalFormattingFieldError;
 }
 /**
- * A non-numeric measure literal can only come from stored data (the number input cannot produce one)
- * and would render as an invisible value; coerce it to the empty sentinel the UI can actually show —
- * the disabled Save button then covers it like any other missing value.
+ * Coerces stored condition shapes the editor cannot represent so an AAC-authored rule opens editable
+ * instead of dead-ended (disabled Save then covers the cleared values). A non-numeric measure literal
+ * clears to empty; on a date target, operators/values outside the date set reset to an unpicked
+ * "Is on" (id and format survive). The engine keeps evaluating the stored original until Save.
  */
-export declare const sanitizeRuleForEditing: (rule: IConditionalFormattingRule) => IConditionalFormattingRule;
+export declare const sanitizeRuleForEditing: (rule: IConditionalFormattingRule, isDate?: boolean) => IConditionalFormattingRule;
 export interface IConditionValidation {
     /** A required operand is absent — gates Save, never shown as an error. */
     missing: boolean;
@@ -81,7 +116,7 @@ export interface IConditionValidation {
  * Single source for both validation surfaces, making "empty is incomplete, not invalid" structural:
  * {@link isRuleComplete} derives from the whole result, the editor renders only `errors`.
  */
-export declare const validateCondition: (condition: IConditionalFormattingCondition, kind: "attribute" | "measure") => IConditionValidation;
+export declare const validateCondition: (condition: IConditionalFormattingCondition, kind: "attribute" | "measure", date?: ICfDateMeta | undefined) => IConditionValidation;
 /** A rule is saveable when every condition has a valid operand for its operator. */
-export declare const isRuleComplete: (rule: IConditionalFormattingRule) => boolean;
+export declare const isRuleComplete: (rule: IConditionalFormattingRule, date?: ICfDateMeta | undefined) => boolean;
 //# sourceMappingURL=conditionalFormattingModel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"conditionalFormattingModel.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/configurationControls/conditionalFormatting/conditionalFormattingModel.ts"],"names":[],"mappings":"AAIA,OAAO,EACH,KAAK,kBAAkB,EAa1B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAe,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EACH,KAAK,6BAA6B,EAClC,KAAK,2BAA2B,EAChC,KAAK,0BAA0B,EAC/B,KAAK,+BAA+B,EACpC,KAAK,0BAA0B,EAClC,MAAM,6BAA6B,CAAC;AAIrC,2EAA2E;AAC3E,MAAM,WAAW,aAAa;IAC1B,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,2BAA2B,CAAC;IACpC,sGAAsG;IACtG,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gHAA8G;IAC9G,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAChC;AAUD,wGAAwG;AACxG,MAAM,WAAW,aAAa;IAC1B,6GAA6G;IAC7G,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,wFAAsF;IACtF,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;CACvC;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,CAcnF;AAiCD,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,kBAAkB,EAAE,IAAI,GAAE,aAAkB,GAAG,aAAa,EAAE,CAkCzG;AAED,eAAO,MAAM,gBAAgB,8FAGmE,CAAC;AAEjG,eAAO,MAAM,aAAa,iDAC2D,CAAC;AAwCtF,eAAO,MAAM,gBAAgB,oEAEuE,CAAC;AAgBrG,eAAO,MAAM,YAAY,iEAGxB,CAAC;AAIF,eAAO,MAAM,UAAU,2CAC0C,CAAC;AAElE,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,eAAO,MAAM,aAAa,4DAKzB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAKrF;;;GAGG;AACH,eAAO,MAAM,eAAe,8HAgB3B,CAAC;AAIF,+DAA+D;AAC/D,eAAO,MAAM,qBAAqB,yEAcjC,CAAC;AAEF,eAAO,MAAM,YAAY,uCAMvB,CAAC;AAEH,eAAO,MAAM,OAAO,qEAIlB,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,cAAc,4HAmB1B,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,eAAe,yCAKN,CAAC;AAKvB,gFAA+E;AAC/E,eAAO,MAAM,kBAAkB,2CACO,CAAC;AAEvC,uFAAsF;AACtF,eAAO,MAAM,kBAAkB,+CACe,CAAC;AAI/C,MAAM,MAAM,+BAA+B,GAAG,YAAY,CAAC;AAE3D,MAAM,WAAW,gBAAgB;IAC7B,KAAK,CAAC,EAAE,+BAA+B,CAAC;CAC3C;AAID;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,kEAclC,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACjC,4EAA0E;IAC1E,OAAO,EAAE,OAAO,CAAC;IACjB,yFAAuF;IACvF,MAAM,EAAE,gBAAgB,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,qGA0B7B,CAAC;AAEF,oFAAoF;AACpF,eAAO,MAAM,cAAc,+CAKrB,CAAC"}
+{"version":3,"file":"conditionalFormattingModel.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/configurationControls/conditionalFormatting/conditionalFormattingModel.ts"],"names":[],"mappings":"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"}

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

@@ -2,6 +2,7 @@
 import { v4 as uuid } from "uuid";
 import { attributeAlias, attributeLocalId, bucketAttributes, insightBucket, insightMeasures, isResultAttributeHeader, measureAlias, measureDoesComputeRatio, measureFormat, measureLocalId, measureTitle, resultHeaderName, } from "@gooddata/sdk-model";
 import { BucketNames } from "@gooddata/sdk-ui";
+import { isDateConditionValue, normalizeDateConditionGranularity, resolveDateConditionBounds, } from "@gooddata/sdk-ui-pivot/next";
 import { CF_DEFAULT_COLOR } from "./conditionalFormattingColors.js";
 // Cap suggestions so a high-cardinality attribute can't build a huge suggestion list.
 const MAX_ELEMENT_SUGGESTIONS = 200;
@@ -16,6 +17,7 @@ const targetToValue = (target) => target.kind === "measure"
 export function buildCfTargetData(dataView) {
     const titles = {};
     const formats = {};
+    const dates = {};
     for (const measure of dataView.meta().measureDescriptors()) {
         const { localIdentifier, name, format } = measure.measureHeaderItem;
         titles[localIdentifier] = name;
@@ -24,9 +26,18 @@ export function buildCfTargetData(dataView) {
         }
     }
     for (const attribute of dataView.meta().attributeDescriptors()) {
-        titles[attribute.attributeHeader.localIdentifier] = attribute.attributeHeader.formOf.name;
+        const { localIdentifier, formOf, granularity, format } = attribute.attributeHeader;
+        titles[localIdentifier] = formOf.name;
+        // Eligible date attributes (resolvable granularity) get date conditions; the rest keep plain text.
+        const normalizedGranularity = normalizeDateConditionGranularity(granularity);
+        if (normalizedGranularity) {
+            dates[localIdentifier] = {
+                granularity: normalizedGranularity,
+                ...(format?.timezone ? { timezone: format.timezone } : {}),
+            };
+        }
     }
-    return { titles, formats, elements: buildElementsByLocalId(dataView) };
+    return { titles, formats, elements: buildElementsByLocalId(dataView), dates };
 }
 // Attribute header groups align by index with the dimension's attribute descriptors; the collected
 // elements are only as complete as the loaded (paged) result.
@@ -59,7 +70,7 @@ function buildElementsByLocalId(dataView) {
     return elements;
 }
 export function buildTargetOptions(insight, data = {}) {
-    const { titles = {}, formats = {}, elements = {} } = data;
+    const { titles = {}, formats = {}, elements = {}, dates = {} } = data;
     const measures = insightMeasures(insight).map((measure) => {
         const localId = measureLocalId(measure);
         const target = { kind: "measure", measureIdentifier: localId };
@@ -89,11 +100,14 @@ export function buildTargetOptions(insight, data = {}) {
             title: titles[localId] ?? attributeAlias(attribute) ?? localId,
             target,
             elements: elements[localId],
+            date: dates[localId],
         };
     });
     return [...measures, ...attributes];
 }
 export const findTargetOption = (options, target) => options.find((option) => option.value === targetToValue(target));
+/** Date-eligible target: the option carries execution-resolved date metadata. */
+export const isDateTarget = (option) => option?.date !== undefined;
 export const targetLocalId = (target) => target.kind === "measure" ? target.measureIdentifier : target.attributeIdentifier;
 // --- Operators -------------------------------------------------------------------------------
 const NO_VALUE_OPERATORS = new Set([
@@ -128,7 +142,25 @@ const ATTRIBUTE_OPERATORS = [
     "IS_EMPTY",
     "IS_NOT_EMPTY",
 ];
-export const operatorsForKind = (kind) => (kind === "measure" ? MEASURE_OPERATORS : ATTRIBUTE_OPERATORS);
+// Same operator constants as measures, date-specific labels. The inclusive pair (on-or-after/before)
+// avoids the "Is after yesterday" off-by-one; no IS_NOT_EMPTY — on a date column it equals All time.
+const DATE_OPERATORS = [
+    "ALL",
+    "EQUAL_TO",
+    "NOT_EQUAL_TO",
+    "GREATER_THAN",
+    "GREATER_THAN_OR_EQUAL_TO",
+    "LESS_THAN",
+    "LESS_THAN_OR_EQUAL_TO",
+    "IS_EMPTY",
+];
+const DATE_OPERATOR_SET = new Set(DATE_OPERATORS);
+export const operatorsForTarget = (kind, isDate) => {
+    if (kind === "measure") {
+        return MEASURE_OPERATORS;
+    }
+    return isDate ? DATE_OPERATORS : ATTRIBUTE_OPERATORS;
+};
 // Shared operator glyphs from sdk-ui-kit (same icons the measure-value-filter uses). Numeric/common
 // operators have icons; text and empty operators render label-only (matching the attribute filter).
 const OPERATOR_ICON_NAMES = {
@@ -146,9 +178,14 @@ export const operatorIcon = (operator) => {
     const name = OPERATOR_ICON_NAMES[operator];
     return name ? `gd-icon-${name}` : undefined;
 };
-// Type icon distinguishing attribute (ABC) from measure (metric) targets — same icons AD uses
-// elsewhere for catalog/bucket items.
-export const targetIcon = (kind) => kind === "attribute" ? "gd-icon-attribute" : "gd-icon-metric";
+// Type icon distinguishing attribute (ABC), date (calendar), and measure (metric) targets — same
+// icons AD uses elsewhere for catalog/bucket items.
+export const targetIcon = (kind, isDate = false) => {
+    if (kind === "measure") {
+        return "gd-icon-metric";
+    }
+    return isDate ? "gd-icon-date" : "gd-icon-attribute";
+};
 export const operatorArity = (operator) => {
     if (NO_VALUE_OPERATORS.has(operator)) {
         return "none";
@@ -158,15 +195,19 @@ export const operatorArity = (operator) => {
 const isEqualityOperator = (operator) => operator === "EQUAL_TO" || operator === "NOT_EQUAL_TO";
 /**
  * Which editor a condition's value renders with. Element suggestions apply only to attribute
- * Is / Is not (per design) — substring operators keep the plain text input.
+ * Is / Is not (per design) — substring operators keep the plain text input. A date target's single
+ * operand is always the period picker.
  */
-export const valueEditorKind = (condition, kind, hasSuggestions) => {
+export const valueEditorKind = (condition, kind, hasSuggestions, isDate) => {
     switch (operatorArity(condition.operator)) {
         case "none":
             return "none";
         case "range":
             return "range";
         case "single":
+            if (isDate) {
+                return "date";
+            }
             if (kind === "measure") {
                 return "number";
             }
@@ -175,7 +216,7 @@ export const valueEditorKind = (condition, kind, hasSuggestions) => {
 };
 // --- Factories -------------------------------------------------------------------------------
 /** Fresh empty operand of the right shape for the operator. */
-export const emptyValueForOperator = (operator) => {
+export const emptyValueForOperator = (operator, isDate = false) => {
     switch (operatorArity(operator)) {
         case "none":
             return { kind: "none" };
@@ -185,37 +226,98 @@ export const emptyValueForOperator = (operator) => {
             // JSON-serialize to null); the contract type can stay a tight `{ from: number; to: number }`.
             return { kind: "literalRange", from: NaN, to: NaN };
         case "single":
-            return { kind: "literal", value: "" };
+            // A date operand starts unpicked ("none"); validation treats it as missing until picked.
+            return isDate ? { kind: "none" } : { kind: "literal", value: "" };
     }
 };
-export const newCondition = () => ({
+/**
+ * An entered operand survives operator changes within the same shape (e.g. \> to \>=); a picked date
+ * period likewise survives switching among the single-operand date operators (Is on ↔ Is after…).
+ */
+export const valueForOperator = (operator, previous, isDate) => {
+    const empty = emptyValueForOperator(operator, isDate);
+    // Single-operand only — no-operand operators (ALL, IS_EMPTY) must not retain a hidden period.
+    if (isDate &&
+        empty.kind === "none" &&
+        isDateConditionValue(previous) &&
+        operatorArity(operator) === "single") {
+        return previous;
+    }
+    return previous.kind === empty.kind ? previous : empty;
+};
+/** The text a free-text/combobox editor shows for a literal operand. */
+export const literalText = (value) => value.kind === "literal" ? String(value.value) : "";
+/** The finite number a numeric editor shows for a literal operand, or null (blank input). */
+export const literalRaw = (value) => {
+    if (value.kind !== "literal" || String(value.value).trim() === "") {
+        return null;
+    }
+    const n = Number(value.value);
+    return Number.isFinite(n) ? n : null;
+};
+/** One finite bound of a range operand, or null (blank input). */
+export const rangeRaw = (value, bound) => {
+    if (value.kind !== "literalRange") {
+        return null;
+    }
+    const n = value[bound];
+    return Number.isFinite(n) ? n : null;
+};
+// Date rules default to "Is on" with the period unpicked (per design); others to the catch-all.
+const defaultOperator = (isDate) => (isDate ? "EQUAL_TO" : "ALL");
+export const newCondition = (isDate = false) => ({
     id: uuid(),
-    operator: "ALL",
+    operator: defaultOperator(isDate),
     value: { kind: "none" },
     // Default: colored text on a transparent background (no fill).
     format: { color: CF_DEFAULT_COLOR, scope: "cell" },
 });
-export const newRule = (target) => ({
+export const newRule = (option) => ({
     id: uuid(),
-    target,
-    conditions: [newCondition()],
+    target: option.target,
+    conditions: [newCondition(isDateTarget(option))],
 });
 /**
- * Rule re-pointed at a new target. Crossing target kinds invalidates the operators, so conditions
- * reset; crossing the percent boundary within measures changes the value units out from under the
- * user, so operators stay but values clear (Save disables until re-entered).
+ * Rule re-pointed at a new target. Crossing target kinds — or the date/plain boundary within
+ * attributes — coerces operators to the new family and clears values (per-condition color/scope
+ * survive). Crossing the percent boundary, or a granularity change within dates, keeps operators
+ * but clears values. Either way Save disables until re-entered.
  */
 export const ruleWithTarget = (rule, next, previous) => {
-    if (next.target.kind !== rule.target.kind) {
-        return { ...rule, target: next.target, conditions: [newCondition()] };
+    const nextIsDate = isDateTarget(next);
+    // `previous` is undefined when retargeting an invalid rule (target already left the insight);
+    // sniff the rule's own values instead, so stale date values can't leak onto a non-date target.
+    // Shapes the sniff can't classify (ALL/IS_EMPTY-only) are valid in both families anyway.
+    const wasDate = previous
+        ? isDateTarget(previous)
+        : rule.conditions.some((condition) => isDateConditionValue(condition.value));
+    if (next.target.kind !== rule.target.kind || nextIsDate !== wasDate) {
+        const validOperators = new Set(operatorsForTarget(next.target.kind, nextIsDate));
+        return {
+            ...rule,
+            target: next.target,
+            // Explicit shape (no spread) so no future family-specific field rides across the boundary.
+            conditions: rule.conditions.map((condition) => {
+                const operator = validOperators.has(condition.operator)
+                    ? condition.operator
+                    : defaultOperator(nextIsDate);
+                return {
+                    id: condition.id,
+                    operator,
+                    value: emptyValueForOperator(operator, nextIsDate),
+                    format: condition.format,
+                };
+            }),
+        };
     }
-    if ((next.isPercent ?? false) !== (previous?.isPercent ?? false)) {
+    const granularityChanged = nextIsDate && next.date?.granularity !== previous?.date?.granularity;
+    if (granularityChanged || (next.isPercent ?? false) !== (previous?.isPercent ?? false)) {
         return {
             ...rule,
             target: next.target,
             conditions: rule.conditions.map((condition) => ({
                 ...condition,
-                value: emptyValueForOperator(condition.operator),
+                value: emptyValueForOperator(condition.operator, nextIsDate),
             })),
         };
     }
@@ -240,11 +342,31 @@ export const rawToDisplayNumber = (raw, percent) => percent ? denoise(raw * 100)
 export const displayToRawNumber = (display, percent) => percent ? denoise(display / 100) : display;
 const isBlank = (value) => String(value).trim() === "";
 /**
- * A non-numeric measure literal can only come from stored data (the number input cannot produce one)
- * and would render as an invisible value; coerce it to the empty sentinel the UI can actually show —
- * the disabled Save button then covers it like any other missing value.
+ * Coerces stored condition shapes the editor cannot represent so an AAC-authored rule opens editable
+ * instead of dead-ended (disabled Save then covers the cleared values). A non-numeric measure literal
+ * clears to empty; on a date target, operators/values outside the date set reset to an unpicked
+ * "Is on" (id and format survive). The engine keeps evaluating the stored original until Save.
  */
-export const sanitizeRuleForEditing = (rule) => {
+export const sanitizeRuleForEditing = (rule, isDate = false) => {
+    if (rule.target.kind === "attribute" && isDate) {
+        return {
+            ...rule,
+            conditions: rule.conditions.map((condition) => {
+                const operatorOk = DATE_OPERATOR_SET.has(condition.operator);
+                // A period is only a valid operand on single-operand operators.
+                const valueOk = condition.value.kind === "none" ||
+                    (operatorArity(condition.operator) === "single" && isDateConditionValue(condition.value));
+                if (operatorOk && valueOk) {
+                    return condition;
+                }
+                return {
+                    ...condition,
+                    operator: operatorOk ? condition.operator : "EQUAL_TO",
+                    value: { kind: "none" },
+                };
+            }),
+        };
+    }
     if (rule.target.kind !== "measure") {
         return rule;
     }
@@ -261,7 +383,7 @@ export const sanitizeRuleForEditing = (rule) => {
  * Single source for both validation surfaces, making "empty is incomplete, not invalid" structural:
  * {@link isRuleComplete} derives from the whole result, the editor renders only `errors`.
  */
-export const validateCondition = (condition, kind) => {
+export const validateCondition = (condition, kind, date) => {
     const { value } = condition;
     switch (operatorArity(condition.operator)) {
         case "none":
@@ -274,6 +396,14 @@ export const validateCondition = (condition, kind) => {
             return { missing, errors: !missing && value.from > value.to ? { range: "rangeOrder" } : {} };
         }
         case "single":
+            if (date) {
+                if (!isDateConditionValue(value)) {
+                    return { missing: true, errors: {} };
+                }
+                // Unresolvable (malformed value, fiscal granularity) never matches — block Save.
+                const resolvable = resolveDateConditionBounds(value, date.granularity, date.timezone) !== null;
+                return { missing: false, errors: resolvable ? {} : { date: "dateUnresolvable" } };
+            }
             if (value.kind !== "literal") {
                 return { missing: true, errors: {} };
             }
@@ -286,8 +416,8 @@ export const validateCondition = (condition, kind) => {
     }
 };
 /** A rule is saveable when every condition has a valid operand for its operator. */
-export const isRuleComplete = (rule) => rule.conditions.length > 0 &&
+export const isRuleComplete = (rule, date) => rule.conditions.length > 0 &&
     rule.conditions.every((condition) => {
-        const { missing, errors } = validateCondition(condition, rule.target.kind);
+        const { missing, errors } = validateCondition(condition, rule.target.kind, date);
         return !missing && Object.keys(errors).length === 0;
     });

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

@@ -0,0 +1,12 @@
+import { type IAnalyticalBackend } from "@gooddata/sdk-backend-spi";
+import { type IDateFilterOptionsByType } from "@gooddata/sdk-ui-filters";
+/**
+ * The workspace date-filter preset catalog for date-condition value pickers — the same catalog the
+ * dashboard date filter consumes. Undefined while loading (the picker degrades to its static form);
+ * falls back to platform defaults when backend/workspace is absent, the workspace has no custom
+ * config, the query fails, or the config yields nothing visible.
+ */
+export declare function useCfDateFilterOptions(backend: IAnalyticalBackend | undefined, workspace: string | undefined, 
+/** False = no consumer in sight (no date-eligible target) — skip the backend query entirely. */
+enabled: boolean): IDateFilterOptionsByType | undefined;
+//# sourceMappingURL=useCfDateFilterOptions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCfDateFilterOptions.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/configurationControls/conditionalFormatting/useCfDateFilterOptions.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,OAAO,EACH,KAAK,wBAAwB,EAIhC,MAAM,0BAA0B,CAAC;AAMlC;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAClC,OAAO,EAAE,kBAAkB,GAAG,SAAS,EACvC,SAAS,EAAE,MAAM,GAAG,SAAS;AAC7B,kGAAgG;AAChG,OAAO,EAAE,OAAO,GACjB,wBAAwB,GAAG,SAAS,CAkCtC"}

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

@@ -0,0 +1,44 @@
+// (C) 2026 GoodData Corporation
+import { useCancelablePromise } from "@gooddata/sdk-ui";
+import { convertDateFilterConfigToDateFilterOptions, defaultDateFilterConfig, flattenDateFilterOptions, } from "@gooddata/sdk-ui-filters";
+// Must match the catalog the dashboard degrades to (the rich default config), not sdk-ui-filters'
+// slim defaultDateFilterOptions — else this picker and the dashboard would show different presets.
+const FALLBACK_DATE_FILTER_OPTIONS = convertDateFilterConfigToDateFilterOptions(defaultDateFilterConfig);
+/**
+ * The workspace date-filter preset catalog for date-condition value pickers — the same catalog the
+ * dashboard date filter consumes. Undefined while loading (the picker degrades to its static form);
+ * falls back to platform defaults when backend/workspace is absent, the workspace has no custom
+ * config, the query fails, or the config yields nothing visible.
+ */
+export function useCfDateFilterOptions(backend, workspace, 
+/** False = no consumer in sight (no date-eligible target) — skip the backend query entirely. */
+enabled) {
+    const { result } = useCancelablePromise({
+        promise: enabled
+            ? async () => {
+                if (!backend || !workspace) {
+                    return FALLBACK_DATE_FILTER_OPTIONS;
+                }
+                try {
+                    const custom = await backend
+                        .workspace(workspace)
+                        .dateFilterConfigs()
+                        .withLimit(1)
+                        .queryCustomDateFilterConfig();
+                    const config = custom.items[0];
+                    if (config) {
+                        const options = convertDateFilterConfigToDateFilterOptions(config);
+                        if (flattenDateFilterOptions(options).some((option) => option.visible)) {
+                            return options;
+                        }
+                    }
+                }
+                catch (error) {
+                    console.warn("Loading the workspace date filter config failed; date conditions fall back to the default preset catalog.", error);
+                }
+                return FALLBACK_DATE_FILTER_OPTIONS;
+            }
+            : null,
+    }, [backend, workspace, enabled]);
+    return result;
+}

package/esm/internal/components/configurationPanels/PieChartConfigurationPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PieChartConfigurationPanel.d.ts","sourceRoot":"","sources":["../../../../src/internal/components/configurationPanels/PieChartConfigurationPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBvC,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAE3E,qBAAa,0BAA2B,SAAQ,yBAAyB;IACrE,SAAS,CAAC,wBAAwB,IAAI,SAAS,CAoC9C;IAED,OAAO,CAAC,mBAAmB;CAK9B"}
+{"version":3,"file":"PieChartConfigurationPanel.d.ts","sourceRoot":"","sources":["../../../../src/internal/components/configurationPanels/PieChartConfigurationPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBvC,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAE3E,qBAAa,0BAA2B,SAAQ,yBAAyB;IACrE,SAAS,CAAC,wBAAwB,IAAI,SAAS,CAsC9C;IAED,OAAO,CAAC,mBAAmB;CAK9B"}

package/esm/internal/components/configurationPanels/PieChartConfigurationPanel.js

@@ -9,10 +9,11 @@ import { DataLabelsControl } from "../configurationControls/DataLabelsControl.js
 import { ConfigurationPanelContent } from "./ConfigurationPanelContent.js";
 export class PieChartConfigurationPanel extends ConfigurationPanelContent {
     renderConfigurationPanel() {
-        const { propertiesMeta, properties, pushData } = this.props;
+        const { propertiesMeta, properties, pushData, featureFlags } = this.props;
         const controlsDisabled = this.isControlDisabled();
+        const donutDataLabelsEnabled = !!featureFlags?.enableDonutDataLabels;
         return (_jsxs(BubbleHoverTrigger, { showDelay: SHOW_DELAY_DEFAULT, hideDelay: HIDE_DELAY_DEFAULT, children: [
-                _jsxs("div", { children: [this.renderColorSection(), this.renderLegendSection(), this.renderInteractionsSection(), _jsx(ConfigSection, { id: "canvas_section", title: messages["canvasTitle"].id, propertiesMeta: propertiesMeta, properties: properties, pushData: pushData, children: _jsx(DataLabelsControl, { pushData: pushData, properties: properties, isDisabled: controlsDisabled, defaultValue: false }) }), this.renderCustomTooltipSection(), this.renderAdvancedSection()] }), _jsx(Bubble, { className: this.getBubbleClassNames(), arrowOffsets: { "tc bc": [BUBBLE_ARROW_OFFSET_X, BUBBLE_ARROW_OFFSET_Y] }, alignPoints: [{ align: "tc bc" }], children: _jsx(FormattedMessage, { id: "properties.config.not_applicable" }) })
+                _jsxs("div", { children: [this.renderColorSection(), this.renderLegendSection(), this.renderInteractionsSection(), _jsx(ConfigSection, { id: "canvas_section", title: messages["canvasTitle"].id, propertiesMeta: propertiesMeta, properties: properties, pushData: pushData, children: _jsx(DataLabelsControl, { pushData: pushData, properties: properties, isDisabled: controlsDisabled, defaultValue: false, enablePositionSelector: donutDataLabelsEnabled }) }), this.renderCustomTooltipSection(), this.renderAdvancedSection()] }), _jsx(Bubble, { className: this.getBubbleClassNames(), arrowOffsets: { "tc bc": [BUBBLE_ARROW_OFFSET_X, BUBBLE_ARROW_OFFSET_Y] }, alignPoints: [{ align: "tc bc" }], children: _jsx(FormattedMessage, { id: "properties.config.not_applicable" }) })
             ] }));
     }
     getBubbleClassNames() {