@pega/cosmos-react-condition-builder 3.0.0-dev.9.0 → 3.0.0-rc.2

package/lib/components/ConditionBuilder/ConditionBuilder.types.d.ts

@@ -1,4 +1,5 @@
-import type { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { Ref } from 'react';
+import type { BaseProps, NoChildrenProp, MenuItemProps } from '@pega/cosmos-react-core';
 import { FieldType, Comparator, ComparatorsByType, DateFunction, RHSType, TimePeriod, DatePart } from './core/types';
 /** RHS object with a Date function */
 export interface RhsWithDateFunction {
@@ -25,6 +26,10 @@ export interface RhsWithRelativeDate {
         datePart: DatePart;
     };
 }
+/** RHS object with PARAMETER type */
+export interface RhsWithParameter {
+    parameterId: string;
+}
 /** Type definition for the leaf-level nodes in nested conditions */
 export interface LeafCondition {
     comparator: Comparator;
@@ -37,7 +42,10 @@ export interface LeafCondition {
         value: string | number;
     } | {
         values: string[] | number[];
-    } | RhsWithDateFunction | RhsWithRelativeDate;
+    } | {
+        start: string | number;
+        end: string | number;
+    } | RhsWithDateFunction | RhsWithRelativeDate | RhsWithParameter;
 }
 /** Type definition for objects representing condition-rows in the builder UI */
 export interface ConditionRow extends LeafCondition {
@@ -58,11 +66,23 @@ export declare type Condition = {
     condition: LeafCondition;
 };
 /** Type definition for the input Field objects for the ConditionBuilder */
-export interface Field {
-    /** Name of the Field. Saved as part of the output condition */
-    name: string;
-    /** (Optional) Display label for the Field. If none passed, the `name` itself will be used */
-    label?: string;
+export declare type ParameterValue = Pick<MenuItemProps, 'id' | 'primary'>;
+export declare type ReferenceValue = Pick<MenuItemProps, 'id' | 'primary'>;
+export declare type ValueSelection<F> = string[] | ReferenceValue[] | (({ searchString, comparator, lhs }: {
+    searchString?: string;
+    comparator?: string;
+    lhs?: F;
+}) => Promise<string[] | ReferenceValue[]>);
+interface BasicField extends Pick<MenuItemProps, 'id' | 'primary'> {
+}
+export declare type Field = BasicField & ({
+    parameters?: ParameterValue[];
+    /**
+     * For TEXT fields, if a list of possible values is known ahead of time, they can be passed.
+     * Otherwise we fetch data from api and pass a promise which returns list of values
+     * This enables users to select from those values instead of manually typing them
+     */
+    possibleValues?: ValueSelection<Field>;
     /**
      * Data-type for the field.
      * Has to be one of these values. Convert where necessary
@@ -70,14 +90,10 @@ export interface Field {
      * e.g. Text(single value)/Picklist/... should be used as `TEXT`
      */
     type: FieldType;
-    /** (Optional) Used to add the field to a group during field-selection */
-    groupLabel?: string;
-    /**
-     * For TEXT fields, if a list of possible values is known ahead of time, they can be passed.
-     * This enables users to select from those values instead of manually typing them
-     */
-    possibleValues?: string[];
-}
+} | {
+    /** An array of type Field to represent the child items. */
+    items: Field[];
+});
 /** Valid date functions by field type */
 export interface DateFunctionsByType {
     /** Date functions to enable for DATE_TIME fields */
@@ -85,15 +101,17 @@ export interface DateFunctionsByType {
     /** Date functions to enable for DATE_ONLY fields */
     DATE_ONLY: DateFunction[];
 }
+export interface HandleValue {
+    /**
+     * Returns condition validity and condition or undefined if valid.
+     * Undefined indicates no condition.
+     */
+    getCondition: () => [valid: false] | [valid: true, condition: Condition | undefined];
+}
 /** Type definition for the input props of ConditionBuilder */
 export default interface ConditionBuilderProps extends BaseProps, NoChildrenProp {
     /** Metadata (data-model) for the Fields to use in the builder */
     fields: Field[];
-    /**
-     * Callback used from the builder's `Submit` button
-     * Called with undefined when an empty condition is submitted (useful for clearing a previous condition)
-     */
-    onConditionSubmit: (condition: Condition | undefined) => void;
     /** (Optional) A seed condition for the builder. To use when editing an existing condition */
     condition?: Condition;
     /** (Optional) Used to limit the Comparators allowed in the builder. */
@@ -108,5 +126,8 @@ export default interface ConditionBuilderProps extends BaseProps, NoChildrenProp
     dateFunctions?: DateFunctionsByType;
     /** (Optional) Pass this if the `NOT` operator should be considered as invalid */
     disallowNOT?: boolean;
+    /** Imperative handle for the component. */
+    handle?: Ref<HandleValue>;
 }
+export {};
 //# sourceMappingURL=ConditionBuilder.types.d.ts.map

package/lib/components/ConditionBuilder/ConditionBuilder.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionBuilder.types.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/ConditionBuilder.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,EACL,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,YAAY,EACZ,OAAO,EACP,UAAU,EACV,QAAQ,EACT,MAAM,cAAc,CAAC;AAEtB,sCAAsC;AACtC,MAAM,WAAW,mBAAmB;IAClC;;;;;;;;;;;OAWG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,sCAAsC;AACtC,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE;QACZ,UAAU,EAAE,UAAU,CAAC;QACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,QAAQ,CAAC;KACpB,CAAC;CACH;AAED,oEAAoE;AACpE,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,UAAU,CAAC;IAEvB,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IAGF,GAAG,CAAC,EACA;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GACjB;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAC1B;QAAE,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;KAAE,GAC/B,mBAAmB,GACnB,mBAAmB,CAAC;CACzB;AAED,gFAAgF;AAChF,MAAM,WAAW,YAAa,SAAQ,aAAa;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,oBAAY,SAAS,GACjB;IAAE,GAAG,EAAE,SAAS,EAAE,CAAA;CAAE,GACpB;IAAE,EAAE,EAAE,SAAS,EAAE,CAAA;CAAE,GACnB;IAAE,GAAG,EAAE,SAAS,CAAA;CAAE,GAClB;IAAE,SAAS,EAAE,aAAa,CAAA;CAAE,CAAC;AAEjC,2EAA2E;AAC3E,MAAM,WAAW,KAAK;IACpB,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IAEb,6FAA6F;IAC7F,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,IAAI,EAAE,SAAS,CAAC;IAEhB,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,yCAAyC;AACzC,MAAM,WAAW,mBAAmB;IAClC,oDAAoD;IACpD,SAAS,EAAE,YAAY,EAAE,CAAC;IAC1B,oDAAoD;IACpD,SAAS,EAAE,YAAY,EAAE,CAAC;CAC3B;AAED,8DAA8D;AAC9D,MAAM,CAAC,OAAO,WAAW,qBAAsB,SAAQ,SAAS,EAAE,cAAc;IAC9E,iEAAiE;IACjE,MAAM,EAAE,KAAK,EAAE,CAAC;IAEhB;;;OAGG;IACH,iBAAiB,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAE9D,6FAA6F;IAC7F,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAEvC;;;;OAIG;IACH,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IAE7B,iJAAiJ;IACjJ,aAAa,CAAC,EAAE,mBAAmB,CAAC;IAEpC,iFAAiF;IACjF,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB"}
+{"version":3,"file":"ConditionBuilder.types.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/ConditionBuilder.types.ts"],"names":[],"mappings":"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"}

package/lib/components/ConditionBuilder/ConditionBuilder.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionBuilder.types.js","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/ConditionBuilder.types.ts"],"names":[],"mappings":"","sourcesContent":["// cspell:ignore words DDTHH\nimport type { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport {\n  FieldType,\n  Comparator,\n  ComparatorsByType,\n  DateFunction,\n  RHSType,\n  TimePeriod,\n  DatePart\n} from './core/types';\n\n/** RHS object with a Date function */\nexport interface RhsWithDateFunction {\n  /**\n   * Output format for the value varies based on the dateFunction:\n   * YEARS: First day of year as YYYY-MM-DD\n   * QUARTERS: First day of quarter as YYYY-MM-DD\n   * MONTHS: First day of month as YYYY-MM-DD\n   * WEEKS: First day of week as YYYY-MM-DD\n   * DAYS: Date as YYYY-MM-DD\n   * HOURS: YYYY-MM-DDTHH:mm:ss\n   * MONTHS_OF_YEAR: 1-12\n   * DAYS_OF_MONTH: 1-31\n   * DAYS_OF_WEEK: 1-7\n   */\n  value: string | number;\n  dateFunction: DateFunction;\n}\n\n/** RHS object with a Relative Date */\nexport interface RhsWithRelativeDate {\n  relativeDate: {\n    timePeriod: TimePeriod;\n    interval?: number;\n    datePart: DatePart;\n  };\n}\n\n/** Type definition for the leaf-level nodes in nested conditions */\nexport interface LeafCondition {\n  comparator: Comparator;\n\n  lhs: {\n    field: string;\n  };\n\n  // Optional for some of the comparators like IS_TRUE, IS_NULL, etc.\n  rhs?:\n    | { field: string } // When comparing the LHS with another field\n    | { value: string | number } // When comparing the LHS with a single literal value (for comparators like EQ, GTE etc.)\n    | { values: string[] | number[] } // When comparing the LHS with a list of literal values (for comparators like IN, NOT_IN etc.)\n    | RhsWithDateFunction // When comparing a date field with a date function on RHS\n    | RhsWithRelativeDate; // When comparing a date field with a symbolic date on RHS\n}\n\n/** Type definition for objects representing condition-rows in the builder UI */\nexport interface ConditionRow extends LeafCondition {\n  id: string; // To use as `key` prop when rendering a list of rows\n  label: string; // Used to refer the row from a logic-string\n}\n\n/**\n * Type definition for simple/complex conditions\n * At a given node in the condition tree, it can have exactly one of the keys AND/OR/NOT/condition\n */\nexport type Condition =\n  | { AND: Condition[] }\n  | { OR: Condition[] }\n  | { NOT: Condition }\n  | { condition: LeafCondition };\n\n/** Type definition for the input Field objects for the ConditionBuilder */\nexport interface Field {\n  /** Name of the Field. Saved as part of the output condition */\n  name: string;\n\n  /** (Optional) Display label for the Field. If none passed, the `name` itself will be used */\n  label?: string;\n\n  /**\n   * Data-type for the field.\n   * Has to be one of these values. Convert where necessary\n   * e.g. Integer/Decimal/... should be used as `NUMBER`\n   * e.g. Text(single value)/Picklist/... should be used as `TEXT`\n   */\n  type: FieldType;\n\n  /** (Optional) Used to add the field to a group during field-selection */\n  groupLabel?: string;\n\n  /**\n   * For TEXT fields, if a list of possible values is known ahead of time, they can be passed.\n   * This enables users to select from those values instead of manually typing them\n   */\n  possibleValues?: string[];\n}\n\n/** Valid date functions by field type */\nexport interface DateFunctionsByType {\n  /** Date functions to enable for DATE_TIME fields */\n  DATE_TIME: DateFunction[];\n  /** Date functions to enable for DATE_ONLY fields */\n  DATE_ONLY: DateFunction[];\n}\n\n/** Type definition for the input props of ConditionBuilder */\nexport default interface ConditionBuilderProps extends BaseProps, NoChildrenProp {\n  /** Metadata (data-model) for the Fields to use in the builder */\n  fields: Field[];\n\n  /**\n   * Callback used from the builder's `Submit` button\n   * Called with undefined when an empty condition is submitted (useful for clearing a previous condition)\n   */\n  onConditionSubmit: (condition: Condition | undefined) => void;\n\n  /** (Optional) A seed condition for the builder. To use when editing an existing condition */\n  condition?: Condition;\n\n  /** (Optional) Used to limit the Comparators allowed in the builder. */\n  validComparators?: ComparatorsByType[];\n\n  /**\n   * (Optional) Pass this to control which all types of RHS are enabled in the component\n   * DEFAULT: Set(['LITERAL', 'FIELD'])\n   * NOTE: If enabling `DATE_FUNCTION`s, additionally pass a `dateFunctions` prop to specify which functions are enabled\n   */\n  validRhsTypes?: Set<RHSType>;\n\n  /** (Optional) When enabling 'DATE_FUNCTION's via `validRhsTypes`, pass this to specify which all date functions are applicable per field type */\n  dateFunctions?: DateFunctionsByType;\n\n  /** (Optional) Pass this if the `NOT` operator should be considered as invalid */\n  disallowNOT?: boolean;\n}\n"]}
+{"version":3,"file":"ConditionBuilder.types.js","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/ConditionBuilder.types.ts"],"names":[],"mappings":"","sourcesContent":["// cspell:ignore words DDTHH\nimport { Ref } from 'react';\n\nimport type { BaseProps, NoChildrenProp, MenuItemProps } from '@pega/cosmos-react-core';\n\nimport {\n  FieldType,\n  Comparator,\n  ComparatorsByType,\n  DateFunction,\n  RHSType,\n  TimePeriod,\n  DatePart\n} from './core/types';\n\n/** RHS object with a Date function */\nexport interface RhsWithDateFunction {\n  /**\n   * Output format for the value varies based on the dateFunction:\n   * YEARS: First day of year as YYYY-MM-DD\n   * QUARTERS: First day of quarter as YYYY-MM-DD\n   * MONTHS: First day of month as YYYY-MM-DD\n   * WEEKS: First day of week as YYYY-MM-DD\n   * DAYS: Date as YYYY-MM-DD\n   * HOURS: YYYY-MM-DDTHH:mm:ss\n   * MONTHS_OF_YEAR: 1-12\n   * DAYS_OF_MONTH: 1-31\n   * DAYS_OF_WEEK: 1-7\n   */\n  value: string | number;\n  dateFunction: DateFunction;\n}\n\n/** RHS object with a Relative Date */\nexport interface RhsWithRelativeDate {\n  relativeDate: {\n    timePeriod: TimePeriod;\n    interval?: number;\n    datePart: DatePart;\n  };\n}\n\n/** RHS object with PARAMETER type */\nexport interface RhsWithParameter {\n  parameterId: string;\n}\n\n/** Type definition for the leaf-level nodes in nested conditions */\nexport interface LeafCondition {\n  comparator: Comparator;\n\n  lhs: {\n    field: string;\n  };\n\n  // Optional for some of the comparators like IS_TRUE, IS_NULL, etc.\n  rhs?:\n    | { field: string } // When comparing the LHS with another field\n    | { value: string | number } // When comparing the LHS with a single literal value (for comparators like EQ, GTE etc.)\n    | { values: string[] | number[] } // When comparing the LHS with a list of literal values (for comparators like IN, NOT_IN etc.)\n    | { start: string | number; end: string | number } // When comparing numeric or date field with two values that determine range\n    | RhsWithDateFunction // When comparing a date field with a date function on RHS\n    | RhsWithRelativeDate // When comparing a date field with a symbolic date on RHS\n    | RhsWithParameter; //  When comparing the LHS with PARAMETER type\n}\n\n/** Type definition for objects representing condition-rows in the builder UI */\nexport interface ConditionRow extends LeafCondition {\n  id: string; // To use as `key` prop when rendering a list of rows\n  label: string; // Used to refer the row from a logic-string\n}\n\n/**\n * Type definition for simple/complex conditions\n * At a given node in the condition tree, it can have exactly one of the keys AND/OR/NOT/condition\n */\nexport type Condition =\n  | { AND: Condition[] }\n  | { OR: Condition[] }\n  | { NOT: Condition }\n  | { condition: LeafCondition };\n\n/** Type definition for the input Field objects for the ConditionBuilder */\n\nexport type ParameterValue = Pick<MenuItemProps, 'id' | 'primary'>;\n\nexport type ReferenceValue = Pick<MenuItemProps, 'id' | 'primary'>;\n\nexport type ValueSelection<F> =\n  | string[]\n  | ReferenceValue[]\n  | (({\n      searchString,\n      comparator,\n      lhs\n    }: {\n      searchString?: string;\n      comparator?: string;\n      lhs?: F;\n    }) => Promise<string[] | ReferenceValue[]>);\n\ninterface BasicField extends Pick<MenuItemProps, 'id' | 'primary'> {}\n\nexport type Field = BasicField &\n  (\n    | {\n        parameters?: ParameterValue[];\n\n        /**\n         * For TEXT fields, if a list of possible values is known ahead of time, they can be passed.\n         * Otherwise we fetch data from api and pass a promise which returns list of values\n         * This enables users to select from those values instead of manually typing them\n         */\n        possibleValues?: ValueSelection<Field>;\n\n        /**\n         * Data-type for the field.\n         * Has to be one of these values. Convert where necessary\n         * e.g. Integer/Decimal/... should be used as `NUMBER`\n         * e.g. Text(single value)/Picklist/... should be used as `TEXT`\n         */\n        type: FieldType;\n      }\n    | {\n        /** An array of type Field to represent the child items. */\n        items: Field[];\n      }\n  );\n\n/** Valid date functions by field type */\nexport interface DateFunctionsByType {\n  /** Date functions to enable for DATE_TIME fields */\n  DATE_TIME: DateFunction[];\n  /** Date functions to enable for DATE_ONLY fields */\n  DATE_ONLY: DateFunction[];\n}\n\nexport interface HandleValue {\n  /**\n   * Returns condition validity and condition or undefined if valid.\n   * Undefined indicates no condition.\n   */\n  getCondition: () => [valid: false] | [valid: true, condition: Condition | undefined];\n}\n\n/** Type definition for the input props of ConditionBuilder */\nexport default interface ConditionBuilderProps extends BaseProps, NoChildrenProp {\n  /** Metadata (data-model) for the Fields to use in the builder */\n  fields: Field[];\n\n  /** (Optional) A seed condition for the builder. To use when editing an existing condition */\n  condition?: Condition;\n\n  /** (Optional) Used to limit the Comparators allowed in the builder. */\n  validComparators?: ComparatorsByType[];\n\n  /**\n   * (Optional) Pass this to control which all types of RHS are enabled in the component\n   * DEFAULT: Set(['LITERAL', 'FIELD'])\n   * NOTE: If enabling `DATE_FUNCTION`s, additionally pass a `dateFunctions` prop to specify which functions are enabled\n   */\n  validRhsTypes?: Set<RHSType>;\n\n  /** (Optional) When enabling 'DATE_FUNCTION's via `validRhsTypes`, pass this to specify which all date functions are applicable per field type */\n  dateFunctions?: DateFunctionsByType;\n\n  /** (Optional) Pass this if the `NOT` operator should be considered as invalid */\n  disallowNOT?: boolean;\n\n  /** Imperative handle for the component. */\n  handle?: Ref<HandleValue>;\n}\n"]}

package/lib/components/ConditionBuilder/FieldCondition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldCondition.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/FieldCondition.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAyB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE9E,OAAO,mBAAmB,MAAM,wBAAwB,CAAC;AAIzD,kEAAkE;AAClE,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA2DzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FieldCondition.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/FieldCondition.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,OAAO,mBAAoC,MAAM,wBAAwB,CAAC;AAI1E,kEAAkE;AAClE,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA0DzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/ConditionBuilder/FieldCondition.js

@@ -1,26 +1,26 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Flex, Button, useI18n } from '@pega/cosmos-react-core';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useImperativeHandle, useState } from 'react';
 import AtomicCondition, { getInitConditionForLhs, isValidCondition } from './AtomicCondition';
 /** Component for building an atomic condition on a given field */
 const FieldCondition = (props) => {
-    const { targetField, fields, onSubmit, condition: seedCondition, validComparators, validRhsTypes = new Set(['LITERAL', 'FIELD']), dateFunctions } = props;
+    const { targetField, fields, condition: seedCondition, validComparators, validRhsTypes = new Set(['LITERAL', 'FIELD']), dateFunctions, handle } = props;
     const [condition, setCondition] = useState(
     // If editing use the seedCondition, otherwise, determine an initial condition based on the targetField
     () => seedCondition ||
         getInitConditionForLhs({ field: targetField }, fields, validRhsTypes, validComparators, dateFunctions));
     const [showErrorIndicators, setErrorIndicators] = useState(false); // Used to enable inline error indicators on the controls
-    const t = useI18n();
-    const handleSubmission = () => {
-        setErrorIndicators(false); // Reset any previous flag
+    const getCondition = () => {
+        setErrorIndicators(false);
         if (isValidCondition(condition, fields, true)) {
-            onSubmit(condition); // If it's a valid condition, submit it
-        }
-        else {
-            setErrorIndicators(true); // Otherwise, indicate errors
+            return [true, condition];
         }
+        setErrorIndicators(true);
+        return [false];
     };
-    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(AtomicCondition, { condition: condition, fields: fields, indicateErrors: showErrorIndicators, validComparators: validComparators, dateFunctions: dateFunctions, onChange: c => setCondition(c), itemDirection: 'column', validRhsTypes: validRhsTypes, showLhsAsLabel: true }), _jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { name: 'field-condition-submit', variant: 'primary', onClick: handleSubmission, children: t('condition_builder_submit_button_label') }) })] }));
+    useImperativeHandle(handle, () => ({
+        getCondition
+    }), [getCondition]);
+    return (_jsx(AtomicCondition, { condition: condition, fields: fields, indicateErrors: showErrorIndicators, validComparators: validComparators, dateFunctions: dateFunctions, onChange: c => setCondition(c), itemDirection: 'column', validRhsTypes: validRhsTypes, lhsMode: 'label' }));
 };
 export default FieldCondition;
 //# sourceMappingURL=FieldCondition.js.map

package/lib/components/ConditionBuilder/FieldCondition.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldCondition.js","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/FieldCondition.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAgB,MAAM,yBAAyB,CAAC;AAG9E,OAAO,eAAe,EAAE,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG9F,kEAAkE;AAClE,MAAM,cAAc,GAA0D,CAC5E,KAA0B,EAC1B,EAAE;IACF,MAAM,EACJ,WAAW,EACX,MAAM,EACN,QAAQ,EACR,SAAS,EAAE,aAAa,EACxB,gBAAgB,EAChB,aAAa,GAAG,IAAI,GAAG,CAAU,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,EACtD,aAAa,EACd,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ;IACxC,uGAAuG;IACvG,GAAG,EAAE,CACH,aAAa;QACb,sBAAsB,CACpB,EAAE,KAAK,EAAE,WAAW,EAAE,EACtB,MAAM,EACN,aAAa,EACb,gBAAgB,EAChB,aAAa,CACd,CACJ,CAAC;IACF,MAAM,CAAC,mBAAmB,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,yDAAyD;IAC5H,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC,0BAA0B;QAErD,IAAI,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;YAC7C,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,uCAAuC;SAC7D;aAAM;YACL,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,6BAA6B;SACxD;IACH,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,eAAe,IACd,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,mBAAmB,EACnC,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAC9B,aAAa,EAAC,QAAQ,EACtB,aAAa,EAAE,aAAa,EAC5B,cAAc,SACd,EAGF,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,KAAC,MAAM,IAAC,IAAI,EAAC,wBAAwB,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,gBAAgB,YAC9E,CAAC,CAAC,uCAAuC,CAAC,GACpC,GACJ,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, useState } from 'react';\n\nimport { Flex, Button, useI18n, ForwardProps } from '@pega/cosmos-react-core';\n\nimport FieldConditionProps from './FieldCondition.types';\nimport AtomicCondition, { getInitConditionForLhs, isValidCondition } from './AtomicCondition';\nimport { RHSType } from './core/types';\n\n/** Component for building an atomic condition on a given field */\nconst FieldCondition: FunctionComponent<FieldConditionProps & ForwardProps> = (\n  props: FieldConditionProps\n) => {\n  const {\n    targetField,\n    fields,\n    onSubmit,\n    condition: seedCondition,\n    validComparators,\n    validRhsTypes = new Set<RHSType>(['LITERAL', 'FIELD']),\n    dateFunctions\n  } = props;\n  const [condition, setCondition] = useState(\n    // If editing use the seedCondition, otherwise, determine an initial condition based on the targetField\n    () =>\n      seedCondition ||\n      getInitConditionForLhs(\n        { field: targetField },\n        fields,\n        validRhsTypes,\n        validComparators,\n        dateFunctions\n      )\n  );\n  const [showErrorIndicators, setErrorIndicators] = useState(false); // Used to enable inline error indicators on the controls\n  const t = useI18n();\n\n  const handleSubmission = () => {\n    setErrorIndicators(false); // Reset any previous flag\n\n    if (isValidCondition(condition, fields, true)) {\n      onSubmit(condition); // If it's a valid condition, submit it\n    } else {\n      setErrorIndicators(true); // Otherwise, indicate errors\n    }\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <AtomicCondition\n        condition={condition}\n        fields={fields}\n        indicateErrors={showErrorIndicators}\n        validComparators={validComparators}\n        dateFunctions={dateFunctions}\n        onChange={c => setCondition(c)}\n        itemDirection='column'\n        validRhsTypes={validRhsTypes}\n        showLhsAsLabel\n      />\n\n      {/* Submit block */}\n      <Flex container={{ justify: 'end' }}>\n        <Button name='field-condition-submit' variant='primary' onClick={handleSubmission}>\n          {t('condition_builder_submit_button_label')}\n        </Button>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default FieldCondition;\n"]}
+{"version":3,"file":"FieldCondition.js","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/FieldCondition.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,mBAAmB,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAKzE,OAAO,eAAe,EAAE,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG9F,kEAAkE;AAClE,MAAM,cAAc,GAA0D,CAC5E,KAA0B,EAC1B,EAAE;IACF,MAAM,EACJ,WAAW,EACX,MAAM,EACN,SAAS,EAAE,aAAa,EACxB,gBAAgB,EAChB,aAAa,GAAG,IAAI,GAAG,CAAU,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,EACtD,aAAa,EACb,MAAM,EACP,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ;IACxC,uGAAuG;IACvG,GAAG,EAAE,CACH,aAAa;QACb,sBAAsB,CACpB,EAAE,KAAK,EAAE,WAAW,EAAE,EACtB,MAAM,EACN,aAAa,EACb,gBAAgB,EAChB,aAAa,CACd,CACJ,CAAC;IACF,MAAM,CAAC,mBAAmB,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,yDAAyD;IAE5H,MAAM,YAAY,GAAgC,GAAG,EAAE;QACrD,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAE1B,IAAI,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;YAC7C,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;SAC1B;QAED,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,mBAAmB,CACjB,MAAM,EACN,GAAG,EAAE,CAAC,CAAC;QACL,YAAY;KACb,CAAC,EACF,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,OAAO,CACL,KAAC,eAAe,IACd,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,mBAAmB,EACnC,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAC9B,aAAa,EAAC,QAAQ,EACtB,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAC,OAAO,GACf,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, useImperativeHandle, useState } from 'react';\n\nimport { ForwardProps } from '@pega/cosmos-react-core';\n\nimport FieldConditionProps, { HandleValue } from './FieldCondition.types';\nimport AtomicCondition, { getInitConditionForLhs, isValidCondition } from './AtomicCondition';\nimport { RHSType } from './core/types';\n\n/** Component for building an atomic condition on a given field */\nconst FieldCondition: FunctionComponent<FieldConditionProps & ForwardProps> = (\n  props: FieldConditionProps\n) => {\n  const {\n    targetField,\n    fields,\n    condition: seedCondition,\n    validComparators,\n    validRhsTypes = new Set<RHSType>(['LITERAL', 'FIELD']),\n    dateFunctions,\n    handle\n  } = props;\n  const [condition, setCondition] = useState(\n    // If editing use the seedCondition, otherwise, determine an initial condition based on the targetField\n    () =>\n      seedCondition ||\n      getInitConditionForLhs(\n        { field: targetField },\n        fields,\n        validRhsTypes,\n        validComparators,\n        dateFunctions\n      )\n  );\n  const [showErrorIndicators, setErrorIndicators] = useState(false); // Used to enable inline error indicators on the controls\n\n  const getCondition: HandleValue['getCondition'] = () => {\n    setErrorIndicators(false);\n\n    if (isValidCondition(condition, fields, true)) {\n      return [true, condition];\n    }\n\n    setErrorIndicators(true);\n    return [false];\n  };\n\n  useImperativeHandle(\n    handle,\n    () => ({\n      getCondition\n    }),\n    [getCondition]\n  );\n\n  return (\n    <AtomicCondition\n      condition={condition}\n      fields={fields}\n      indicateErrors={showErrorIndicators}\n      validComparators={validComparators}\n      dateFunctions={dateFunctions}\n      onChange={c => setCondition(c)}\n      itemDirection='column'\n      validRhsTypes={validRhsTypes}\n      lhsMode='label'\n    />\n  );\n};\n\nexport default FieldCondition;\n"]}

package/lib/components/ConditionBuilder/FieldCondition.types.d.ts

@@ -1,14 +1,19 @@
+import { Ref } from 'react';
 import { BaseProps } from '@pega/cosmos-react-core';
 import { ComparatorsByType, RHSType } from './core/types';
 import { Field, LeafCondition, DateFunctionsByType } from './ConditionBuilder.types';
+export interface HandleValue {
+    /**
+     * Returns condition validity and condition if valid.
+     */
+    getCondition: () => [valid: false] | [valid: true, condition: LeafCondition];
+}
 /** Type definition for the input props of FieldCondition */
 export default interface FieldConditionProps extends BaseProps {
-    /** Name of the field on which the condition should be constructed */
-    targetField: Field['name'];
+    /** Id of the field on which the condition should be constructed */
+    targetField: Field['id'];
     /** Metadata (data-model) for the Fields to use in the RHS field-selector etc. */
     fields: Field[];
-    /** Callback used from the component's `Submit` button */
-    onSubmit: (condition: LeafCondition) => void;
     /** (Optional) Passed when editing an existing condition */
     condition?: LeafCondition;
     /** (Optional) Used to limit the Comparators allowed in the component. */
@@ -21,5 +26,7 @@ export default interface FieldConditionProps extends BaseProps {
     validRhsTypes?: Set<RHSType>;
     /** (Optional) When enabling 'DATE_FUNCTION's via `validRhsTypes`, pass this to specify which all date functions are applicable per field type */
     dateFunctions?: DateFunctionsByType;
+    /** Imperative handle for the component. */
+    handle?: Ref<HandleValue>;
 }
 //# sourceMappingURL=FieldCondition.types.d.ts.map

package/lib/components/ConditionBuilder/FieldCondition.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldCondition.types.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/FieldCondition.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAErF,4DAA4D;AAC5D,MAAM,CAAC,OAAO,WAAW,mBAAoB,SAAQ,SAAS;IAC5D,qEAAqE;IACrE,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAE3B,iFAAiF;IACjF,MAAM,EAAE,KAAK,EAAE,CAAC;IAEhB,yDAAyD;IACzD,QAAQ,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAE7C,2DAA2D;IAC3D,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAEvC;;;;OAIG;IACH,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IAE7B,iJAAiJ;IACjJ,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACrC"}
+{"version":3,"file":"FieldCondition.types.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/FieldCondition.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAErF,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC;CAC9E;AAED,4DAA4D;AAC5D,MAAM,CAAC,OAAO,WAAW,mBAAoB,SAAQ,SAAS;IAC5D,mEAAmE;IACnE,WAAW,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IAEzB,iFAAiF;IACjF,MAAM,EAAE,KAAK,EAAE,CAAC;IAEhB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAEvC;;;;OAIG;IACH,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IAE7B,iJAAiJ;IACjJ,aAAa,CAAC,EAAE,mBAAmB,CAAC;IAEpC,2CAA2C;IAC3C,MAAM,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CAC3B"}

package/lib/components/ConditionBuilder/FieldCondition.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldCondition.types.js","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/FieldCondition.types.ts"],"names":[],"mappings":"","sourcesContent":["import { BaseProps } from '@pega/cosmos-react-core';\n\nimport { ComparatorsByType, RHSType } from './core/types';\nimport { Field, LeafCondition, DateFunctionsByType } from './ConditionBuilder.types';\n\n/** Type definition for the input props of FieldCondition */\nexport default interface FieldConditionProps extends BaseProps {\n  /** Name of the field on which the condition should be constructed */\n  targetField: Field['name'];\n\n  /** Metadata (data-model) for the Fields to use in the RHS field-selector etc. */\n  fields: Field[];\n\n  /** Callback used from the component's `Submit` button */\n  onSubmit: (condition: LeafCondition) => void;\n\n  /** (Optional) Passed when editing an existing condition */\n  condition?: LeafCondition;\n\n  /** (Optional) Used to limit the Comparators allowed in the component. */\n  validComparators?: ComparatorsByType[];\n\n  /**\n   * (Optional) Pass this to control which all types of RHS are enabled in the component\n   * DEFAULT: Set(['LITERAL', 'FIELD'])\n   * NOTE: If enabling `DATE_FUNCTION`s, additionally pass a `dateFunctions` prop to specify which functions are enabled\n   */\n  validRhsTypes?: Set<RHSType>;\n\n  /** (Optional) When enabling 'DATE_FUNCTION's via `validRhsTypes`, pass this to specify which all date functions are applicable per field type */\n  dateFunctions?: DateFunctionsByType;\n}\n"]}
+{"version":3,"file":"FieldCondition.types.js","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/FieldCondition.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport { BaseProps } from '@pega/cosmos-react-core';\n\nimport { ComparatorsByType, RHSType } from './core/types';\nimport { Field, LeafCondition, DateFunctionsByType } from './ConditionBuilder.types';\n\nexport interface HandleValue {\n  /**\n   * Returns condition validity and condition if valid.\n   */\n  getCondition: () => [valid: false] | [valid: true, condition: LeafCondition];\n}\n\n/** Type definition for the input props of FieldCondition */\nexport default interface FieldConditionProps extends BaseProps {\n  /** Id of the field on which the condition should be constructed */\n  targetField: Field['id'];\n\n  /** Metadata (data-model) for the Fields to use in the RHS field-selector etc. */\n  fields: Field[];\n\n  /** (Optional) Passed when editing an existing condition */\n  condition?: LeafCondition;\n\n  /** (Optional) Used to limit the Comparators allowed in the component. */\n  validComparators?: ComparatorsByType[];\n\n  /**\n   * (Optional) Pass this to control which all types of RHS are enabled in the component\n   * DEFAULT: Set(['LITERAL', 'FIELD'])\n   * NOTE: If enabling `DATE_FUNCTION`s, additionally pass a `dateFunctions` prop to specify which functions are enabled\n   */\n  validRhsTypes?: Set<RHSType>;\n\n  /** (Optional) When enabling 'DATE_FUNCTION's via `validRhsTypes`, pass this to specify which all date functions are applicable per field type */\n  dateFunctions?: DateFunctionsByType;\n\n  /** Imperative handle for the component. */\n  handle?: Ref<HandleValue>;\n}\n"]}

package/lib/components/ConditionBuilder/RhsControls/FieldSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/FieldSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,iBAAiB,EAAqB,MAAM,OAAO,CAAC;AAE1E,OAAO,EAIL,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACf,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AA4BlD,UAAU,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IAC5D,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IAEd,qBAAqB;IACrB,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,kEAAkE;IAClE,MAAM,EAAE,KAAK,EAAE,CAAC;IAEhB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAEpC,4BAA4B;IAC5B,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CACjC;AAED,+EAA+E;AAC/E,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAwDvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"FieldSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/FieldSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,iBAAiB,EAAqB,MAAM,OAAO,CAAC;AAE1E,OAAO,EAIL,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,cAAc,EAGf,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAiBlD,UAAU,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IAC5D,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IAEd,qBAAqB;IACrB,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,kEAAkE;IAClE,MAAM,EAAE,KAAK,EAAE,CAAC;IAEhB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAEpC,4BAA4B;IAC5B,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CACjC;AAED,+EAA+E;AAC/E,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA0DvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/ConditionBuilder/RhsControls/FieldSelector.js

@@ -1,32 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import { ComboBox, menuHelpers } from '@pega/cosmos-react-core';
+import { ComboBox, menuHelpers, hasProp, useI18n } from '@pega/cosmos-react-core';
 /** Convert input Fields to use as ComboBox options */
 function getMenuItemsFromFields(fields, selection) {
-    const items = [];
-    const itemsByGroupLabel = {};
-    fields.forEach(field => {
-        const item = {
-            id: field.name,
-            primary: field.label ?? field.name,
-            selected: field.name === selection // set Selected field to selection
+    return fields.map(field => {
+        const { id, primary } = field;
+        let childitems;
+        if (hasProp(field, 'items'))
+            childitems = getMenuItemsFromFields(field.items, selection);
+        return {
+            id,
+            primary,
+            selected: childitems ? undefined : id === selection,
+            items: childitems
         };
-        if (field.groupLabel) {
-            itemsByGroupLabel[field.groupLabel] = itemsByGroupLabel[field.groupLabel] || [];
-            itemsByGroupLabel[field.groupLabel].push(item);
-        }
-        else {
-            items.push(item);
-        }
     });
-    Object.entries(itemsByGroupLabel).forEach(([label, childItems]) => {
-        items.push({ id: label, primary: label, items: childItems });
-    });
-    return items;
 }
 /** Sets up a ComboBox to select a Field. Handles grouping and autocomplete. */
 const FieldSelector = (props) => {
     const { value, onChange, fields, status, info } = props;
+    const t = useI18n();
     // Determine ComboBox menu items from the fields
     const items = useMemo(() => getMenuItemsFromFields(fields, value), [fields, value]);
     const selected = useMemo(() => {
@@ -47,7 +40,7 @@ const FieldSelector = (props) => {
             ? menuHelpers.flatten(items).filter(({ primary }) => filterRegex.test(primary))
             : items;
     }, [filterRegex, items]);
-    return (_jsx(ComboBox, { label: 'field', labelHidden: true, status: status, info: info, placeholder: 'Select\u2026', mode: 'single-select', value: filterValue, onChange: (ev) => {
+    return (_jsx(ComboBox, { label: t('condition_builder_field_label'), labelHidden: true, status: status, info: info, placeholder: t('select_placeholder_default'), mode: 'single-select', value: filterValue, onChange: (ev) => {
             setFilterValue(ev.target.value);
             if (!ev.target.value)
                 onChange('');

package/lib/components/ConditionBuilder/RhsControls/FieldSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldSelector.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/FieldSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, FunctionComponent, useMemo, useState } from 'react';\n\nimport {\n  ComboBox,\n  MenuProps,\n  menuHelpers,\n  BaseProps,\n  ForwardProps,\n  FormControlProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { Selected } from '@pega/cosmos-react-core/lib/components/ComboBox/ComboBox.types';\n\nimport { Field } from '../ConditionBuilder.types';\n\n/** Convert input Fields to use as ComboBox options */\nfunction getMenuItemsFromFields(fields: Field[], selection: string): MenuProps['items'] {\n  const items: MenuProps['items'] = [];\n  const itemsByGroupLabel: { [label: string]: MenuProps['items'] } = {};\n\n  fields.forEach(field => {\n    const item = {\n      id: field.name,\n      primary: field.label ?? field.name, // field.label is optional\n      selected: field.name === selection // set Selected field to selection\n    };\n    if (field.groupLabel) {\n      itemsByGroupLabel[field.groupLabel] = itemsByGroupLabel[field.groupLabel] || [];\n      itemsByGroupLabel[field.groupLabel].push(item);\n    } else {\n      items.push(item);\n    }\n  });\n\n  Object.entries(itemsByGroupLabel).forEach(([label, childItems]) => {\n    items.push({ id: label, primary: label, items: childItems });\n  });\n\n  return items;\n}\n\ninterface FieldSelectorProps extends BaseProps, NoChildrenProp {\n  /** Current selection */\n  value: string;\n\n  /** Change handler */\n  onChange: (selection: string) => void;\n\n  /** Metadata (data-model) for the Fields to use in the selector */\n  fields: Field[];\n\n  /** Status for the ComboBox */\n  status?: FormControlProps['status'];\n\n  /** Info for the ComboBox */\n  info?: FormControlProps['info'];\n}\n\n/** Sets up a ComboBox to select a Field. Handles grouping and autocomplete. */\nconst FieldSelector: FunctionComponent<FieldSelectorProps & ForwardProps> = (\n  props: FieldSelectorProps\n) => {\n  const { value, onChange, fields, status, info } = props;\n\n  // Determine ComboBox menu items from the fields\n  const items = useMemo(() => getMenuItemsFromFields(fields, value), [fields, value]);\n  const selected: Selected | undefined = useMemo(() => {\n    const selectedItem = menuHelpers.getItem(items, value);\n    return selectedItem ? { id: selectedItem.id, text: selectedItem.primary } : undefined;\n  }, [items]);\n\n  // Set up autocomplete input\n  const [filterValue, setFilterValue] = useState<string>(''); // NOTE: `''` is needed to show the current selection\n  const filterRegex = useMemo(() => {\n    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Escaping\n    // Literal string match from input, not user regex input.\n    return filterValue\n      ? new RegExp(filterValue.replace(/[.*+\\-?^${}()|[\\]\\\\]/g, '\\\\$&'), 'i')\n      : undefined;\n  }, [filterValue]);\n\n  const filteredItems = useMemo(() => {\n    return filterRegex\n      ? menuHelpers.flatten(items).filter(({ primary }) => filterRegex.test(primary))\n      : items;\n  }, [filterRegex, items]);\n\n  return (\n    <ComboBox\n      label='field'\n      labelHidden\n      status={status}\n      info={info}\n      placeholder='Select…'\n      mode='single-select'\n      value={filterValue}\n      onChange={(ev: ChangeEvent<HTMLInputElement>) => {\n        setFilterValue(ev.target.value);\n        if (!ev.target.value) onChange('');\n      }}\n      onBlur={() => {\n        setFilterValue('');\n      }}\n      selected={{ items: selected }}\n      menu={{\n        items: filteredItems,\n        mode: 'single-select',\n        accent: filterRegex,\n        onItemClick: id => {\n          onChange(id);\n          setFilterValue(''); // To show the selected value in the input\n        }\n      }}\n    />\n  );\n};\n\nexport default FieldSelector;\n"]}
+{"version":3,"file":"FieldSelector.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/FieldSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, FunctionComponent, useMemo, useState } from 'react';\n\nimport {\n  ComboBox,\n  MenuProps,\n  menuHelpers,\n  BaseProps,\n  ForwardProps,\n  FormControlProps,\n  NoChildrenProp,\n  hasProp,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { Selected } from '@pega/cosmos-react-core/lib/components/ComboBox/ComboBox.types';\n\nimport { Field } from '../ConditionBuilder.types';\n\n/** Convert input Fields to use as ComboBox options */\nfunction getMenuItemsFromFields(fields: Field[], selection: string): MenuProps['items'] {\n  return fields.map(field => {\n    const { id, primary } = field;\n    let childitems;\n    if (hasProp(field, 'items')) childitems = getMenuItemsFromFields(field.items, selection);\n    return {\n      id,\n      primary,\n      selected: childitems ? undefined : id === selection, // set Selected field to selection\n      items: childitems\n    };\n  });\n}\n\ninterface FieldSelectorProps extends BaseProps, NoChildrenProp {\n  /** Current selection */\n  value: string;\n\n  /** Change handler */\n  onChange: (selection: string) => void;\n\n  /** Metadata (data-model) for the Fields to use in the selector */\n  fields: Field[];\n\n  /** Status for the ComboBox */\n  status?: FormControlProps['status'];\n\n  /** Info for the ComboBox */\n  info?: FormControlProps['info'];\n}\n\n/** Sets up a ComboBox to select a Field. Handles grouping and autocomplete. */\nconst FieldSelector: FunctionComponent<FieldSelectorProps & ForwardProps> = (\n  props: FieldSelectorProps\n) => {\n  const { value, onChange, fields, status, info } = props;\n\n  const t = useI18n();\n\n  // Determine ComboBox menu items from the fields\n  const items = useMemo(() => getMenuItemsFromFields(fields, value), [fields, value]);\n  const selected: Selected | undefined = useMemo(() => {\n    const selectedItem = menuHelpers.getItem(items, value);\n    return selectedItem ? { id: selectedItem.id, text: selectedItem.primary } : undefined;\n  }, [items]);\n\n  // Set up autocomplete input\n  const [filterValue, setFilterValue] = useState<string>(''); // NOTE: `''` is needed to show the current selection\n  const filterRegex = useMemo(() => {\n    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Escaping\n    // Literal string match from input, not user regex input.\n    return filterValue\n      ? new RegExp(filterValue.replace(/[.*+\\-?^${}()|[\\]\\\\]/g, '\\\\$&'), 'i')\n      : undefined;\n  }, [filterValue]);\n\n  const filteredItems = useMemo(() => {\n    return filterRegex\n      ? menuHelpers.flatten(items).filter(({ primary }) => filterRegex.test(primary))\n      : items;\n  }, [filterRegex, items]);\n\n  return (\n    <ComboBox\n      label={t('condition_builder_field_label')}\n      labelHidden\n      status={status}\n      info={info}\n      placeholder={t('select_placeholder_default')}\n      mode='single-select'\n      value={filterValue}\n      onChange={(ev: ChangeEvent<HTMLInputElement>) => {\n        setFilterValue(ev.target.value);\n        if (!ev.target.value) onChange('');\n      }}\n      onBlur={() => {\n        setFilterValue('');\n      }}\n      selected={{ items: selected }}\n      menu={{\n        items: filteredItems,\n        mode: 'single-select',\n        accent: filterRegex,\n        onItemClick: id => {\n          onChange(id);\n          setFilterValue(''); // To show the selected value in the input\n        }\n      }}\n    />\n  );\n};\n\nexport default FieldSelector;\n"]}

package/lib/components/ConditionBuilder/RhsControls/NumericInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumericInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/NumericInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAwB,MAAM,yBAAyB,CAAC;AAE1F,UAAU,iBAAkB,SAAQ,SAAS,EAAE,cAAc;IAC3D,4BAA4B;IAC5B,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAEhC,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAEpD,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,4IAA4I;AAC5I,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAwBtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"NumericInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/NumericInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAEpD,OAAO,EACL,SAAS,EACT,cAAc,EAIf,MAAM,yBAAyB,CAAC;AAEjC,UAAU,iBAAkB,SAAQ,SAAS,EAAE,cAAc;IAC3D,4BAA4B;IAC5B,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAEhC,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAEpD,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,4IAA4I;AAC5I,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CA4BtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/ConditionBuilder/RhsControls/NumericInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { NumberInput, useI18n } from '@pega/cosmos-react-core';
+import { NumberInput, useAfterInitialEffect, useI18n } from '@pega/cosmos-react-core';
 /** Wrapper over the NumberInput to parse values as Numbers, while still allowing the user to type partial values like `12.`, `12.0`, ... */
 const NumericInput = (props) => {
     const { rhs, onChange, status } = props;
@@ -9,6 +9,9 @@ const NumericInput = (props) => {
     // if we parse values like `12.`, `12.0`, etc., the decimals will be lost leading to bad UX
     // Using a local state to avoid that
     const [localValue, setLocalValue] = useState(rhs.value.toString());
+    useAfterInitialEffect(() => {
+        setLocalValue(rhs.value.toString());
+    }, [rhs.value]);
     const handleInputChange = (newValue) => {
         setLocalValue(newValue);
         onChange({ value: newValue.trim() ? Number(newValue) : '' }); // Save as a number unless the input is empty

package/lib/components/ConditionBuilder/RhsControls/NumericInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumericInput.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/NumericInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAA6B,WAAW,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAa1F,4IAA4I;AAC5I,MAAM,YAAY,GAAyC,CAAC,KAAwB,EAAE,EAAE;IACtF,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACxC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,6DAA6D;IAC7D,2FAA2F;IAC3F,oCAAoC;IACpC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IAEnE,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC7C,aAAa,CAAC,QAAQ,CAAC,CAAC;QACxB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,6CAA6C;IAC7G,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,WAAW,IACV,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,iBAAiB,EAC3B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC5E,KAAK,EAAE,CAAC,CAAC,8CAA8C,CAAC,EACxD,WAAW,SACX,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FunctionComponent, useState } from 'react';\n\nimport { BaseProps, NoChildrenProp, NumberInput, useI18n } from '@pega/cosmos-react-core';\n\ninterface NumericInputProps extends BaseProps, NoChildrenProp {\n  /** Rhs for the condition */\n  rhs: { value: string | number };\n\n  /** Callback for any modifications to the Rhs */\n  onChange: (rhs: { value: string | number }) => void;\n\n  /** Used to indicate any errors on the control */\n  status?: 'error';\n}\n\n/** Wrapper over the NumberInput to parse values as Numbers, while still allowing the user to type partial values like `12.`, `12.0`, ... */\nconst NumericInput: FunctionComponent<NumericInputProps> = (props: NumericInputProps) => {\n  const { rhs, onChange, status } = props;\n  const t = useI18n();\n\n  // Since we want to always call onChange with parsed Numbers,\n  // if we parse values like `12.`, `12.0`, etc., the decimals will be lost leading to bad UX\n  // Using a local state to avoid that\n  const [localValue, setLocalValue] = useState(rhs.value.toString());\n\n  const handleInputChange = (newValue: string) => {\n    setLocalValue(newValue);\n    onChange({ value: newValue.trim() ? Number(newValue) : '' }); // Save as a number unless the input is empty\n  };\n\n  return (\n    <NumberInput\n      value={localValue}\n      onChange={handleInputChange}\n      status={status}\n      info={status === 'error' ? t('condition_builder_invalid_number') : undefined}\n      label={t('condition_builder_compare_with_numeric_value')}\n      labelHidden\n    />\n  );\n};\n\nexport default NumericInput;\n"]}
+{"version":3,"file":"NumericInput.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/NumericInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAGL,WAAW,EACX,qBAAqB,EACrB,OAAO,EACR,MAAM,yBAAyB,CAAC;AAajC,4IAA4I;AAC5I,MAAM,YAAY,GAAyC,CAAC,KAAwB,EAAE,EAAE;IACtF,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACxC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,6DAA6D;IAC7D,2FAA2F;IAC3F,oCAAoC;IACpC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IAEnE,qBAAqB,CAAC,GAAG,EAAE;QACzB,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;IAEhB,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC7C,aAAa,CAAC,QAAQ,CAAC,CAAC;QACxB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,6CAA6C;IAC7G,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,WAAW,IACV,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,iBAAiB,EAC3B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC5E,KAAK,EAAE,CAAC,CAAC,8CAA8C,CAAC,EACxD,WAAW,SACX,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FunctionComponent, useState } from 'react';\n\nimport {\n  BaseProps,\n  NoChildrenProp,\n  NumberInput,\n  useAfterInitialEffect,\n  useI18n\n} from '@pega/cosmos-react-core';\n\ninterface NumericInputProps extends BaseProps, NoChildrenProp {\n  /** Rhs for the condition */\n  rhs: { value: string | number };\n\n  /** Callback for any modifications to the Rhs */\n  onChange: (rhs: { value: string | number }) => void;\n\n  /** Used to indicate any errors on the control */\n  status?: 'error';\n}\n\n/** Wrapper over the NumberInput to parse values as Numbers, while still allowing the user to type partial values like `12.`, `12.0`, ... */\nconst NumericInput: FunctionComponent<NumericInputProps> = (props: NumericInputProps) => {\n  const { rhs, onChange, status } = props;\n  const t = useI18n();\n\n  // Since we want to always call onChange with parsed Numbers,\n  // if we parse values like `12.`, `12.0`, etc., the decimals will be lost leading to bad UX\n  // Using a local state to avoid that\n  const [localValue, setLocalValue] = useState(rhs.value.toString());\n\n  useAfterInitialEffect(() => {\n    setLocalValue(rhs.value.toString());\n  }, [rhs.value]);\n\n  const handleInputChange = (newValue: string) => {\n    setLocalValue(newValue);\n    onChange({ value: newValue.trim() ? Number(newValue) : '' }); // Save as a number unless the input is empty\n  };\n\n  return (\n    <NumberInput\n      value={localValue}\n      onChange={handleInputChange}\n      status={status}\n      info={status === 'error' ? t('condition_builder_invalid_number') : undefined}\n      label={t('condition_builder_compare_with_numeric_value')}\n      labelHidden\n    />\n  );\n};\n\nexport default NumericInput;\n"]}

package/lib/components/ConditionBuilder/RhsControls/RhsModeSwitch.d.ts

@@ -1,16 +1,18 @@
 import { FunctionComponent } from 'react';
 import { BaseProps, ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
 import { Comparator, FieldType, RHSType } from '../core/types';
-import { DateFunctionsByType, LeafCondition } from '../ConditionBuilder.types';
+import { DateFunctionsByType, LeafCondition, ParameterValue } from '../ConditionBuilder.types';
 interface RhsMenuButtonProps extends BaseProps, NoChildrenProp {
+    /** Passed Parameters array for Rhstype PARAMETER */
+    parameters: ParameterValue[];
     /** Type of field on the LHS */
     fieldType: FieldType;
     /** Comparator for the condition */
     comparator: Comparator;
     /** Rhs for the condition */
-    rhs: LeafCondition['rhs'];
+    rhs: NonNullable<LeafCondition['rhs']>;
     /** Callback for any modifications to the Rhs */
-    onChange: (rhs: LeafCondition['rhs']) => void;
+    onChange: (rhs: NonNullable<LeafCondition['rhs']>) => void;
     /** Display mode */
     mode: 'combo-box' | 'menu-button';
     /** Restricts RHS values to only specified RHS types */

package/lib/components/ConditionBuilder/RhsControls/RhsModeSwitch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RhsModeSwitch.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/RhsModeSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAEnD,OAAO,EACL,SAAS,EAET,YAAY,EAKZ,cAAc,EAGf,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AA6B/E,UAAU,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IAC5D,+BAA+B;IAC/B,SAAS,EAAE,SAAS,CAAC;IAErB,mCAAmC;IACnC,UAAU,EAAE,UAAU,CAAC;IAEvB,4BAA4B;IAC5B,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAE1B,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAE9C,mBAAmB;IACnB,IAAI,EAAE,WAAW,GAAG,aAAa,CAAC;IAElC,uDAAuD;IACvD,aAAa,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IAE5B,oHAAoH;IACpH,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACrC;AAED,6DAA6D;AAC7D,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAqHvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"RhsModeSwitch.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/RhsModeSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAEnD,OAAO,EACL,SAAS,EAET,YAAY,EAKZ,cAAc,EAGf,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAyC/F,UAAU,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IAC5D,oDAAoD;IACpD,UAAU,EAAE,cAAc,EAAE,CAAC;IAE7B,+BAA+B;IAC/B,SAAS,EAAE,SAAS,CAAC;IAErB,mCAAmC;IACnC,UAAU,EAAE,UAAU,CAAC;IAEvB,4BAA4B;IAC5B,GAAG,EAAE,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;IAEvC,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC;IAE3D,mBAAmB;IACnB,IAAI,EAAE,WAAW,GAAG,aAAa,CAAC;IAElC,uDAAuD;IACvD,aAAa,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IAE5B,oHAAoH;IACpH,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACrC;AAED,6DAA6D;AAC7D,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAkJvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/ConditionBuilder/RhsControls/RhsModeSwitch.js

@@ -7,34 +7,46 @@ var ItemID;
     ItemID["DATE_PART"] = "DATE_PART";
     ItemID["RELATIVE_DATE"] = "RELATIVE_DATE";
     ItemID["ANOTHER_FIELD"] = "ANOTHER_FIELD";
+    ItemID["PARAMETER"] = "PARAMETER";
 })(ItemID || (ItemID = {}));
+function isRangeComparator(comparator) {
+    return comparator === 'BTW' || comparator === 'NOT_BTW';
+}
 // Label for the `Enter <value>` option on the gear-menu
-function getValueOptionLabel(fieldType, t) {
+function getValueOptionLabel(fieldType, t, comparator) {
     switch (fieldType) {
         case 'TEXT':
             return t('condition_builder_compare_with_text_value');
         case 'NUMBER':
-            return t('condition_builder_compare_with_numeric_value');
+            return isRangeComparator(comparator)
+                ? t('condition_builder_compare_with_numeric_range_value')
+                : t('condition_builder_compare_with_numeric_value');
         case 'DATE_TIME':
         case 'DATE_ONLY':
-            return t('condition_builder_compare_with_date_value');
+            return isRangeComparator(comparator)
+                ? t('condition_builder_compare_with_date_range_value')
+                : t('condition_builder_compare_with_date_value');
         case 'TIME_ONLY':
-            return t('condition_builder_compare_with_time_value');
+            return isRangeComparator(comparator)
+                ? t('condition_builder_compare_with_time_range_value')
+                : t('condition_builder_compare_with_time_value');
         default:
             return t('condition_builder_value_label'); // Not needed (BOOLEAN is not expected to be passed to the function)
     }
 }
 /** Renders a Gear MenuButton on the RHS (when applicable) */
-const RhsModeSwitch = (props) => {
-    const { fieldType, comparator, rhs, onChange, mode, validRhsTypes, dateFunctions } = props;
+const RhsModeSwitch = ({ parameters, fieldType, comparator, rhs, onChange, mode, validRhsTypes, dateFunctions }) => {
     const t = useI18n();
     // Identify current mode
     const currentMode = useMemo(() => {
-        // rhs should already be defined if this component is being rendered. Indicating the same to TS using `!`
+        if (hasProp(rhs, 'field'))
+            return ItemID.ANOTHER_FIELD;
         if (hasProp(rhs, 'field'))
             return ItemID.ANOTHER_FIELD;
         if (hasProp(rhs, 'value') && hasProp(rhs, 'dateFunction'))
             return ItemID.DATE_PART;
+        if (hasProp(rhs, 'parameterId'))
+            return ItemID.PARAMETER;
         if (hasProp(rhs, 'relativeDate'))
             return ItemID.RELATIVE_DATE;
         return ItemID.LITERAL_VALUE;
@@ -50,12 +62,13 @@ const RhsModeSwitch = (props) => {
                 // Literal Value inputs
                 items.push({
                     id: ItemID.LITERAL_VALUE,
-                    primary: getValueOptionLabel(fieldType, t),
+                    primary: getValueOptionLabel(fieldType, t, comparator),
                     onClick: id => {
                         if (id === currentMode)
                             return; // Ignore if already in that mode
-                        onChange({ value: '' }); // Submit a new RHS to re-render with the new mode
-                    }
+                        onChange(isRangeComparator(comparator) ? { start: '', end: '' } : { value: '' }); // Submit a new RHS to re-render with the new mode
+                    },
+                    selected: currentMode === ItemID.LITERAL_VALUE
                 });
             }
             // Field selector
@@ -67,7 +80,26 @@ const RhsModeSwitch = (props) => {
                         if (id === currentMode)
                             return; // Ignore if already in that mode
                         onChange({ field: '' }); // Submit a new RHS to re-render with the new mode
-                    }
+                    },
+                    selected: currentMode === ItemID.ANOTHER_FIELD
+                });
+            }
+            // Rhs of PARAMETER type
+            if (validRhsTypes.has('PARAMETER') &&
+                ['EQ', 'NEQ'].includes(comparator) &&
+                parameters.length > 0) {
+                items.push({
+                    id: ItemID.PARAMETER,
+                    primary: t('condition_builder_compare_with_parameter'),
+                    onClick: id => {
+                        if (id === currentMode)
+                            return; // Ignore if already in that mode
+                        if (parameters.length === 1)
+                            onChange({ parameterId: parameters[0].id });
+                        else
+                            onChange({ parameterId: '' }); // Submit a new RHS to re-render with the new mode
+                    },
+                    selected: currentMode === ItemID.PARAMETER
                 });
             }
             // Relative Date value input
@@ -85,7 +117,8 @@ const RhsModeSwitch = (props) => {
                                 datePart: 'DAYS'
                             }
                         });
-                    }
+                    },
+                    selected: currentMode === ItemID.RELATIVE_DATE
                 });
             }
             // Date Part value input
@@ -99,11 +132,12 @@ const RhsModeSwitch = (props) => {
                         if (id === currentMode)
                             return; // Ignore if already in that mode
                         onChange({ value: '', dateFunction: dateFunctions[fieldType][0] }); // Submit a new RHS to re-render with the new mode. Initializing with the first available date function
-                    }
+                    },
+                    selected: currentMode === ItemID.DATE_PART
                 });
             }
         }
-        return { items, mode: 'action' };
+        return { items, mode: 'single-select' };
     }, [fieldType, comparator, onChange, validRhsTypes, dateFunctions, currentMode, t]);
     // Identify current selection for ComboBox
     const selected = useMemo(() => {