@pega/cosmos-react-condition-builder 3.0.0-dev.9.1 → 3.0.0-rc.1

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

@@ -1 +1 @@
-{"version":3,"file":"RhsModeSwitch.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/RhsModeSwitch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useMemo } from 'react';\n\nimport {\n  BaseProps,\n  ComboBox,\n  ForwardProps,\n  hasProp,\n  MenuButton,\n  menuHelpers,\n  MenuProps,\n  NoChildrenProp,\n  TranslationPack,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { TranslationFunction } from '@pega/cosmos-react-core/lib/i18n/translate';\nimport { Selected } from '@pega/cosmos-react-core/lib/components/ComboBox/ComboBox.types';\n\nimport { Comparator, FieldType, RHSType } from '../core/types';\nimport { DateFunctionsByType, LeafCondition } from '../ConditionBuilder.types';\n\nenum ItemID {\n  LITERAL_VALUE = 'LITERAL_VALUE',\n  DATE_PART = 'DATE_PART',\n  RELATIVE_DATE = 'RELATIVE_DATE',\n  ANOTHER_FIELD = 'ANOTHER_FIELD'\n}\n\n// Label for the `Enter <value>` option on the gear-menu\nfunction getValueOptionLabel(\n  fieldType: FieldType,\n  t: TranslationFunction<TranslationPack>\n): string {\n  switch (fieldType) {\n    case 'TEXT':\n      return t('condition_builder_compare_with_text_value');\n    case 'NUMBER':\n      return t('condition_builder_compare_with_numeric_value');\n    case 'DATE_TIME':\n    case 'DATE_ONLY':\n      return t('condition_builder_compare_with_date_value');\n    case 'TIME_ONLY':\n      return t('condition_builder_compare_with_time_value');\n    default:\n      return t('condition_builder_value_label'); // Not needed (BOOLEAN is not expected to be passed to the function)\n  }\n}\n\ninterface RhsMenuButtonProps extends BaseProps, NoChildrenProp {\n  /** Type of field on the LHS */\n  fieldType: FieldType;\n\n  /** Comparator for the condition */\n  comparator: Comparator;\n\n  /** Rhs for the condition */\n  rhs: LeafCondition['rhs'];\n\n  /** Callback for any modifications to the Rhs */\n  onChange: (rhs: LeafCondition['rhs']) => void;\n\n  /** Display mode */\n  mode: 'combo-box' | 'menu-button';\n\n  /** Restricts RHS values to only specified RHS types */\n  validRhsTypes: Set<RHSType>;\n\n  /** Passed to enable additional date controls on the RHS, when a DATE_TIME/DATE_ONLY field is selected on the LHS */\n  dateFunctions?: DateFunctionsByType;\n}\n\n/** Renders a Gear MenuButton on the RHS (when applicable) */\nconst RhsModeSwitch: FunctionComponent<RhsMenuButtonProps & ForwardProps> = (\n  props: RhsMenuButtonProps\n) => {\n  const { fieldType, comparator, rhs, onChange, mode, validRhsTypes, dateFunctions } = props;\n  const t = useI18n();\n\n  // Identify current mode\n  const currentMode = useMemo(() => {\n    // rhs should already be defined if this component is being rendered. Indicating the same to TS using `!`\n    if (hasProp(rhs!, 'field')) return ItemID.ANOTHER_FIELD;\n    if (hasProp(rhs!, 'value') && hasProp(rhs!, 'dateFunction')) return ItemID.DATE_PART;\n    if (hasProp(rhs!, 'relativeDate')) return ItemID.RELATIVE_DATE;\n    return ItemID.LITERAL_VALUE;\n  }, [rhs]);\n\n  // Determine actions for the menu\n  const menu = useMemo<MenuProps>(() => {\n    const items: MenuProps['items'] = [];\n\n    // Boolean conditions either don't use an rhs or always use the field-selector\n    // For IN/NOT_IN comparators, only one mode is possible for a given case - CSV Input or a Value-selector\n    if (fieldType !== 'BOOLEAN' && !['IN', 'NOT_IN'].includes(comparator)) {\n      // Literal value input\n      if (validRhsTypes.has('LITERAL')) {\n        // Literal Value inputs\n        items.push({\n          id: ItemID.LITERAL_VALUE,\n          primary: getValueOptionLabel(fieldType, t),\n          onClick: id => {\n            if (id === currentMode) return; // Ignore if already in that mode\n            onChange({ value: '' }); // Submit a new RHS to re-render with the new mode\n          }\n        });\n      }\n\n      // Field selector\n      if (validRhsTypes.has('FIELD')) {\n        items.push({\n          id: ItemID.ANOTHER_FIELD,\n          primary: t('condition_builder_compare_with_another_field'),\n          onClick: id => {\n            if (id === currentMode) return; // Ignore if already in that mode\n            onChange({ field: '' }); // Submit a new RHS to re-render with the new mode\n          }\n        });\n      }\n\n      // Relative Date value input\n      if (\n        validRhsTypes.has('RELATIVE_DATE') &&\n        (fieldType === 'DATE_TIME' || fieldType === 'DATE_ONLY')\n      ) {\n        items.push({\n          id: ItemID.RELATIVE_DATE,\n          primary: t('condition_builder_compare_with_relative_date'),\n          onClick: id => {\n            if (id === currentMode) return; // Ignore if already in that mode\n            onChange({\n              relativeDate: {\n                timePeriod: 'CURRENT',\n                datePart: 'DAYS'\n              }\n            });\n          }\n        });\n      }\n\n      // Date Part value input\n      if (\n        validRhsTypes.has('DATE_FUNCTION') &&\n        dateFunctions &&\n        (fieldType === 'DATE_TIME' || fieldType === 'DATE_ONLY')\n      ) {\n        items.push({\n          id: ItemID.DATE_PART,\n          primary: t('condition_builder_date_part'),\n          onClick: id => {\n            if (id === currentMode) return; // Ignore if already in that mode\n            onChange({ value: '', dateFunction: dateFunctions[fieldType][0] }); // Submit a new RHS to re-render with the new mode. Initializing with the first available date function\n          }\n        });\n      }\n    }\n\n    return { items, mode: 'action' };\n  }, [fieldType, comparator, onChange, validRhsTypes, dateFunctions, currentMode, t]);\n\n  // Identify current selection for ComboBox\n  const selected = useMemo<Selected | undefined>(() => {\n    const selectedItem = menuHelpers.getItem(menu.items, currentMode);\n    return selectedItem ? { id: selectedItem.id, text: selectedItem.primary } : undefined;\n  }, [menu, currentMode]);\n\n  // Render the button only when there are multiple options in the menu\n  if (menu.items.length < 2) return null;\n\n  if (mode === 'combo-box') {\n    return (\n      <ComboBox\n        label={t('condition_builder_compare_with')}\n        labelHidden\n        mode='single-select'\n        selected={{ items: selected }}\n        menu={menu}\n      />\n    );\n  }\n\n  return (\n    <MenuButton\n      text={t('condition_builder_compare_with')}\n      icon='gear'\n      iconOnly\n      variant='simple'\n      menu={menu}\n    />\n  );\n};\n\nexport default RhsModeSwitch;\n"]}
+{"version":3,"file":"RhsModeSwitch.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/RhsModeSwitch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,OAAO,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAEL,QAAQ,EAER,OAAO,EACP,UAAU,EACV,WAAW,EAIX,OAAO,EACR,MAAM,yBAAyB,CAAC;AAOjC,IAAK,MAMJ;AAND,WAAK,MAAM;IACT,yCAA+B,CAAA;IAC/B,iCAAuB,CAAA;IACvB,yCAA+B,CAAA;IAC/B,yCAA+B,CAAA;IAC/B,iCAAuB,CAAA;AACzB,CAAC,EANI,MAAM,KAAN,MAAM,QAMV;AAED,SAAS,iBAAiB,CAAC,UAAkC;IAC3D,OAAO,UAAU,KAAK,KAAK,IAAI,UAAU,KAAK,SAAS,CAAC;AAC1D,CAAC;AAED,wDAAwD;AACxD,SAAS,mBAAmB,CAC1B,SAAoB,EACpB,CAAuC,EACvC,UAAuB;IAEvB,QAAQ,SAAS,EAAE;QACjB,KAAK,MAAM;YACT,OAAO,CAAC,CAAC,2CAA2C,CAAC,CAAC;QACxD,KAAK,QAAQ;YACX,OAAO,iBAAiB,CAAC,UAAU,CAAC;gBAClC,CAAC,CAAC,CAAC,CAAC,oDAAoD,CAAC;gBACzD,CAAC,CAAC,CAAC,CAAC,8CAA8C,CAAC,CAAC;QACxD,KAAK,WAAW,CAAC;QACjB,KAAK,WAAW;YACd,OAAO,iBAAiB,CAAC,UAAU,CAAC;gBAClC,CAAC,CAAC,CAAC,CAAC,iDAAiD,CAAC;gBACtD,CAAC,CAAC,CAAC,CAAC,2CAA2C,CAAC,CAAC;QACrD,KAAK,WAAW;YACd,OAAO,iBAAiB,CAAC,UAAU,CAAC;gBAClC,CAAC,CAAC,CAAC,CAAC,iDAAiD,CAAC;gBACtD,CAAC,CAAC,CAAC,CAAC,2CAA2C,CAAC,CAAC;QACrD;YACE,OAAO,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,oEAAoE;KAClH;AACH,CAAC;AA4BD,6DAA6D;AAC7D,MAAM,aAAa,GAAyD,CAAC,EAC3E,UAAU,EACV,SAAS,EACT,UAAU,EACV,GAAG,EACH,QAAQ,EACR,IAAI,EACJ,aAAa,EACb,aAAa,EACM,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,wBAAwB;IACxB,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,IAAI,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC;YAAE,OAAO,MAAM,CAAC,aAAa,CAAC;QACvD,IAAI,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC;YAAE,OAAO,MAAM,CAAC,aAAa,CAAC;QACvD,IAAI,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,IAAI,OAAO,CAAC,GAAG,EAAE,cAAc,CAAC;YAAE,OAAO,MAAM,CAAC,SAAS,CAAC;QACnF,IAAI,OAAO,CAAC,GAAG,EAAE,aAAa,CAAC;YAAE,OAAO,MAAM,CAAC,SAAS,CAAC;QACzD,IAAI,OAAO,CAAC,GAAG,EAAE,cAAc,CAAC;YAAE,OAAO,MAAM,CAAC,aAAa,CAAC;QAC9D,OAAO,MAAM,CAAC,aAAa,CAAC;IAC9B,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,iCAAiC;IACjC,MAAM,IAAI,GAAG,OAAO,CAAY,GAAG,EAAE;QACnC,MAAM,KAAK,GAAuB,EAAE,CAAC;QAErC,8EAA8E;QAC9E,wGAAwG;QACxG,IAAI,SAAS,KAAK,SAAS,IAAI,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;YACrE,sBAAsB;YACtB,IAAI,aAAa,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;gBAChC,uBAAuB;gBACvB,KAAK,CAAC,IAAI,CAAC;oBACT,EAAE,EAAE,MAAM,CAAC,aAAa;oBACxB,OAAO,EAAE,mBAAmB,CAAC,SAAS,EAAE,CAAC,EAAE,UAAU,CAAC;oBACtD,OAAO,EAAE,EAAE,CAAC,EAAE;wBACZ,IAAI,EAAE,KAAK,WAAW;4BAAE,OAAO,CAAC,iCAAiC;wBACjE,QAAQ,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,kDAAkD;oBACtI,CAAC;oBACD,QAAQ,EAAE,WAAW,KAAK,MAAM,CAAC,aAAa;iBAC/C,CAAC,CAAC;aACJ;YAED,iBAAiB;YACjB,IAAI,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;gBAC9B,KAAK,CAAC,IAAI,CAAC;oBACT,EAAE,EAAE,MAAM,CAAC,aAAa;oBACxB,OAAO,EAAE,CAAC,CAAC,8CAA8C,CAAC;oBAC1D,OAAO,EAAE,EAAE,CAAC,EAAE;wBACZ,IAAI,EAAE,KAAK,WAAW;4BAAE,OAAO,CAAC,iCAAiC;wBACjE,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,kDAAkD;oBAC7E,CAAC;oBACD,QAAQ,EAAE,WAAW,KAAK,MAAM,CAAC,aAAa;iBAC/C,CAAC,CAAC;aACJ;YAED,wBAAwB;YACxB,IACE,aAAa,CAAC,GAAG,CAAC,WAAW,CAAC;gBAC9B,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC;gBAClC,UAAU,CAAC,MAAM,GAAG,CAAC,EACrB;gBACA,KAAK,CAAC,IAAI,CAAC;oBACT,EAAE,EAAE,MAAM,CAAC,SAAS;oBACpB,OAAO,EAAE,CAAC,CAAC,0CAA0C,CAAC;oBACtD,OAAO,EAAE,EAAE,CAAC,EAAE;wBACZ,IAAI,EAAE,KAAK,WAAW;4BAAE,OAAO,CAAC,iCAAiC;wBACjE,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;4BAAE,QAAQ,CAAC,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;;4BACpE,QAAQ,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,kDAAkD;oBACxF,CAAC;oBACD,QAAQ,EAAE,WAAW,KAAK,MAAM,CAAC,SAAS;iBAC3C,CAAC,CAAC;aACJ;YAED,4BAA4B;YAC5B,IACE,aAAa,CAAC,GAAG,CAAC,eAAe,CAAC;gBAClC,CAAC,SAAS,KAAK,WAAW,IAAI,SAAS,KAAK,WAAW,CAAC,EACxD;gBACA,KAAK,CAAC,IAAI,CAAC;oBACT,EAAE,EAAE,MAAM,CAAC,aAAa;oBACxB,OAAO,EAAE,CAAC,CAAC,8CAA8C,CAAC;oBAC1D,OAAO,EAAE,EAAE,CAAC,EAAE;wBACZ,IAAI,EAAE,KAAK,WAAW;4BAAE,OAAO,CAAC,iCAAiC;wBACjE,QAAQ,CAAC;4BACP,YAAY,EAAE;gCACZ,UAAU,EAAE,SAAS;gCACrB,QAAQ,EAAE,MAAM;6BACjB;yBACF,CAAC,CAAC;oBACL,CAAC;oBACD,QAAQ,EAAE,WAAW,KAAK,MAAM,CAAC,aAAa;iBAC/C,CAAC,CAAC;aACJ;YAED,wBAAwB;YACxB,IACE,aAAa,CAAC,GAAG,CAAC,eAAe,CAAC;gBAClC,aAAa;gBACb,CAAC,SAAS,KAAK,WAAW,IAAI,SAAS,KAAK,WAAW,CAAC,EACxD;gBACA,KAAK,CAAC,IAAI,CAAC;oBACT,EAAE,EAAE,MAAM,CAAC,SAAS;oBACpB,OAAO,EAAE,CAAC,CAAC,6BAA6B,CAAC;oBACzC,OAAO,EAAE,EAAE,CAAC,EAAE;wBACZ,IAAI,EAAE,KAAK,WAAW;4BAAE,OAAO,CAAC,iCAAiC;wBACjE,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,YAAY,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,uGAAuG;oBAC7K,CAAC;oBACD,QAAQ,EAAE,WAAW,KAAK,MAAM,CAAC,SAAS;iBAC3C,CAAC,CAAC;aACJ;SACF;QAED,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC;IAC1C,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;IAEpF,0CAA0C;IAC1C,MAAM,QAAQ,GAAG,OAAO,CAAuB,GAAG,EAAE;QAClD,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;QAClE,OAAO,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,YAAY,CAAC,EAAE,EAAE,IAAI,EAAE,YAAY,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IACxF,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IAExB,qEAAqE;IACrE,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,IAAI,CAAC;IAEvC,IAAI,IAAI,KAAK,WAAW,EAAE;QACxB,OAAO,CACL,KAAC,QAAQ,IACP,KAAK,EAAE,CAAC,CAAC,gCAAgC,CAAC,EAC1C,WAAW,QACX,IAAI,EAAC,eAAe,EACpB,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAC7B,IAAI,EAAE,IAAI,GACV,CACH,CAAC;KACH;IAED,OAAO,CACL,KAAC,UAAU,IACT,IAAI,EAAE,CAAC,CAAC,gCAAgC,CAAC,EACzC,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,IAAI,GACV,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, useMemo } from 'react';\n\nimport {\n  BaseProps,\n  ComboBox,\n  ForwardProps,\n  hasProp,\n  MenuButton,\n  menuHelpers,\n  MenuProps,\n  NoChildrenProp,\n  TranslationPack,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { TranslationFunction } from '@pega/cosmos-react-core/lib/i18n/translate';\nimport { Selected } from '@pega/cosmos-react-core/lib/components/ComboBox/ComboBox.types';\n\nimport { Comparator, FieldType, RHSType } from '../core/types';\nimport { DateFunctionsByType, LeafCondition, ParameterValue } from '../ConditionBuilder.types';\n\nenum ItemID {\n  LITERAL_VALUE = 'LITERAL_VALUE',\n  DATE_PART = 'DATE_PART',\n  RELATIVE_DATE = 'RELATIVE_DATE',\n  ANOTHER_FIELD = 'ANOTHER_FIELD',\n  PARAMETER = 'PARAMETER'\n}\n\nfunction isRangeComparator(comparator: Comparator | undefined): boolean {\n  return comparator === 'BTW' || comparator === 'NOT_BTW';\n}\n\n// Label for the `Enter <value>` option on the gear-menu\nfunction getValueOptionLabel(\n  fieldType: FieldType,\n  t: TranslationFunction<TranslationPack>,\n  comparator?: Comparator\n): string {\n  switch (fieldType) {\n    case 'TEXT':\n      return t('condition_builder_compare_with_text_value');\n    case 'NUMBER':\n      return isRangeComparator(comparator)\n        ? t('condition_builder_compare_with_numeric_range_value')\n        : t('condition_builder_compare_with_numeric_value');\n    case 'DATE_TIME':\n    case 'DATE_ONLY':\n      return isRangeComparator(comparator)\n        ? t('condition_builder_compare_with_date_range_value')\n        : t('condition_builder_compare_with_date_value');\n    case 'TIME_ONLY':\n      return isRangeComparator(comparator)\n        ? t('condition_builder_compare_with_time_range_value')\n        : t('condition_builder_compare_with_time_value');\n    default:\n      return t('condition_builder_value_label'); // Not needed (BOOLEAN is not expected to be passed to the function)\n  }\n}\n\ninterface RhsMenuButtonProps extends BaseProps, NoChildrenProp {\n  /** Passed Parameters array for Rhstype PARAMETER */\n  parameters: ParameterValue[];\n\n  /** Type of field on the LHS */\n  fieldType: FieldType;\n\n  /** Comparator for the condition */\n  comparator: Comparator;\n\n  /** Rhs for the condition */\n  rhs: NonNullable<LeafCondition['rhs']>;\n\n  /** Callback for any modifications to the Rhs */\n  onChange: (rhs: NonNullable<LeafCondition['rhs']>) => void;\n\n  /** Display mode */\n  mode: 'combo-box' | 'menu-button';\n\n  /** Restricts RHS values to only specified RHS types */\n  validRhsTypes: Set<RHSType>;\n\n  /** Passed to enable additional date controls on the RHS, when a DATE_TIME/DATE_ONLY field is selected on the LHS */\n  dateFunctions?: DateFunctionsByType;\n}\n\n/** Renders a Gear MenuButton on the RHS (when applicable) */\nconst RhsModeSwitch: FunctionComponent<RhsMenuButtonProps & ForwardProps> = ({\n  parameters,\n  fieldType,\n  comparator,\n  rhs,\n  onChange,\n  mode,\n  validRhsTypes,\n  dateFunctions\n}: RhsMenuButtonProps) => {\n  const t = useI18n();\n\n  // Identify current mode\n  const currentMode = useMemo(() => {\n    if (hasProp(rhs, 'field')) return ItemID.ANOTHER_FIELD;\n    if (hasProp(rhs, 'field')) return ItemID.ANOTHER_FIELD;\n    if (hasProp(rhs, 'value') && hasProp(rhs, 'dateFunction')) return ItemID.DATE_PART;\n    if (hasProp(rhs, 'parameterId')) return ItemID.PARAMETER;\n    if (hasProp(rhs, 'relativeDate')) return ItemID.RELATIVE_DATE;\n    return ItemID.LITERAL_VALUE;\n  }, [rhs]);\n\n  // Determine actions for the menu\n  const menu = useMemo<MenuProps>(() => {\n    const items: MenuProps['items'] = [];\n\n    // Boolean conditions either don't use an rhs or always use the field-selector\n    // For IN/NOT_IN comparators, only one mode is possible for a given case - CSV Input or a Value-selector\n    if (fieldType !== 'BOOLEAN' && !['IN', 'NOT_IN'].includes(comparator)) {\n      // Literal value input\n      if (validRhsTypes.has('LITERAL')) {\n        // Literal Value inputs\n        items.push({\n          id: ItemID.LITERAL_VALUE,\n          primary: getValueOptionLabel(fieldType, t, comparator),\n          onClick: id => {\n            if (id === currentMode) return; // Ignore if already in that mode\n            onChange(isRangeComparator(comparator) ? { start: '', end: '' } : { value: '' }); // Submit a new RHS to re-render with the new mode\n          },\n          selected: currentMode === ItemID.LITERAL_VALUE\n        });\n      }\n\n      // Field selector\n      if (validRhsTypes.has('FIELD')) {\n        items.push({\n          id: ItemID.ANOTHER_FIELD,\n          primary: t('condition_builder_compare_with_another_field'),\n          onClick: id => {\n            if (id === currentMode) return; // Ignore if already in that mode\n            onChange({ field: '' }); // Submit a new RHS to re-render with the new mode\n          },\n          selected: currentMode === ItemID.ANOTHER_FIELD\n        });\n      }\n\n      // Rhs of PARAMETER type\n      if (\n        validRhsTypes.has('PARAMETER') &&\n        ['EQ', 'NEQ'].includes(comparator) &&\n        parameters.length > 0\n      ) {\n        items.push({\n          id: ItemID.PARAMETER,\n          primary: t('condition_builder_compare_with_parameter'),\n          onClick: id => {\n            if (id === currentMode) return; // Ignore if already in that mode\n            if (parameters.length === 1) onChange({ parameterId: parameters[0].id });\n            else onChange({ parameterId: '' }); // Submit a new RHS to re-render with the new mode\n          },\n          selected: currentMode === ItemID.PARAMETER\n        });\n      }\n\n      // Relative Date value input\n      if (\n        validRhsTypes.has('RELATIVE_DATE') &&\n        (fieldType === 'DATE_TIME' || fieldType === 'DATE_ONLY')\n      ) {\n        items.push({\n          id: ItemID.RELATIVE_DATE,\n          primary: t('condition_builder_compare_with_relative_date'),\n          onClick: id => {\n            if (id === currentMode) return; // Ignore if already in that mode\n            onChange({\n              relativeDate: {\n                timePeriod: 'CURRENT',\n                datePart: 'DAYS'\n              }\n            });\n          },\n          selected: currentMode === ItemID.RELATIVE_DATE\n        });\n      }\n\n      // Date Part value input\n      if (\n        validRhsTypes.has('DATE_FUNCTION') &&\n        dateFunctions &&\n        (fieldType === 'DATE_TIME' || fieldType === 'DATE_ONLY')\n      ) {\n        items.push({\n          id: ItemID.DATE_PART,\n          primary: t('condition_builder_date_part'),\n          onClick: id => {\n            if (id === currentMode) return; // Ignore if already in that mode\n            onChange({ value: '', dateFunction: dateFunctions[fieldType][0] }); // Submit a new RHS to re-render with the new mode. Initializing with the first available date function\n          },\n          selected: currentMode === ItemID.DATE_PART\n        });\n      }\n    }\n\n    return { items, mode: 'single-select' };\n  }, [fieldType, comparator, onChange, validRhsTypes, dateFunctions, currentMode, t]);\n\n  // Identify current selection for ComboBox\n  const selected = useMemo<Selected | undefined>(() => {\n    const selectedItem = menuHelpers.getItem(menu.items, currentMode);\n    return selectedItem ? { id: selectedItem.id, text: selectedItem.primary } : undefined;\n  }, [menu, currentMode]);\n\n  // Render the button only when there are multiple options in the menu\n  if (menu.items.length < 2) return null;\n\n  if (mode === 'combo-box') {\n    return (\n      <ComboBox\n        label={t('condition_builder_compare_with')}\n        labelHidden\n        mode='single-select'\n        selected={{ items: selected }}\n        menu={menu}\n      />\n    );\n  }\n\n  return (\n    <MenuButton\n      text={t('condition_builder_compare_with')}\n      icon='gear'\n      iconOnly\n      variant='simple'\n      menu={menu}\n    />\n  );\n};\n\nexport default RhsModeSwitch;\n"]}

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

@@ -0,0 +1,38 @@
+import { BaseProps, NoChildrenProp, ComboBoxProps } from '@pega/cosmos-react-core';
+import { LeafCondition, ParameterValue, ValueSelection } from '../ConditionBuilder.types';
+import { Comparator } from '../core/types';
+interface ValueSelectorProps<T extends {
+    possibleValues?: ValueSelection<T>;
+}> extends BaseProps, NoChildrenProp {
+    mode: ComboBoxProps['mode'];
+    /** Previous selection */
+    values: string[] | string;
+    /** Current selected LHS */
+    selectedField: T;
+    /** Current selected comparator */
+    comparator: Comparator;
+    /** Rhs for the condition */
+    rhs: NonNullable<LeafCondition['rhs']>;
+    /** Passed Parameters array for Rhstype PARAMETER */
+    parameters: ParameterValue[];
+    /** Callback for changes */
+    onChange: (selection: string[] | string) => void;
+    /** Callback for blur */
+    onBlur?: (selection?: string[] | string) => void;
+    /** Callback for clear */
+    onClear?: () => void;
+    /** Used to indicate any errors on the control */
+    status?: 'error';
+    /** Placeholder text to display in empty control */
+    placeholder?: ComboBoxProps['placeholder'];
+    /** Custom label for input. Makes label visible if provided. */
+    label?: ComboBoxProps['label'];
+    /** Guidance text that apppears below the input. */
+    info?: ComboBoxProps['info'];
+}
+/** A control for selecting multiple values using checkboxes in an overlay */
+declare const ValueSelector: <F extends object & {
+    possibleValues?: ValueSelection<F> | undefined;
+}>({ values, selectedField, comparator, rhs, onChange, onBlur, onClear, status, mode, parameters, placeholder, label, info }: ValueSelectorProps<F>) => JSX.Element;
+export default ValueSelector;
+//# sourceMappingURL=ValueSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ValueSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/ValueSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,SAAS,EAIT,cAAc,EACd,aAAa,EAId,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,aAAa,EACb,cAAc,EAEd,cAAc,EACf,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,UAAU,kBAAkB,CAAC,CAAC,SAAS;IAAE,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAA;CAAE,CAC3E,SAAQ,SAAS,EACf,cAAc;IAChB,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5B,yBAAyB;IACzB,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;IAC1B,2BAA2B;IAC3B,aAAa,EAAE,CAAC,CAAC;IACjB,kCAAkC;IAClC,UAAU,EAAE,UAAU,CAAC;IACvB,4BAA4B;IAC5B,GAAG,EAAE,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;IACvC,oDAAoD;IACpD,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,2BAA2B;IAC3B,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,wBAAwB;IACxB,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,+DAA+D;IAC/D,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,mDAAmD;IACnD,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED,6EAA6E;AAC7E,QAAA,MAAM,aAAa;;mKAoLlB,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,133 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useMemo, useEffect, useRef } from 'react';
+import { useI18n, ComboBox, createStringMatcher, useAfterInitialEffect, hasProp, Button, Icon } from '@pega/cosmos-react-core';
+/** A control for selecting multiple values using checkboxes in an overlay */
+const ValueSelector = ({ values, selectedField, comparator, rhs, onChange, onBlur, onClear, status, mode, parameters, placeholder, label, info }) => {
+    const t = useI18n();
+    const inputRef = useRef(null);
+    const [selections, setSelections] = useState(values);
+    const [filterValue, setFilterValue] = useState('');
+    const [options, setOptions] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const itemsToRender = useMemo(() => {
+        let opts = options;
+        if (filterValue) {
+            const matcher = createStringMatcher(filterValue, 'boundary');
+            opts = opts.filter(option => {
+                if (typeof option === 'object')
+                    return matcher.test(option.primary);
+                return matcher.test(option);
+            });
+        }
+        return opts.map(option => {
+            if (typeof option === 'object') {
+                return {
+                    ...option,
+                    selected: selections.includes(option.id)
+                };
+            }
+            return {
+                id: option,
+                primary: option,
+                selected: selections.includes(option)
+            };
+        });
+    }, [options, filterValue, selections]);
+    useAfterInitialEffect(() => {
+        onChange(selections);
+    }, [selections]);
+    useEffect(() => {
+        if (!selectedField) {
+            return;
+        }
+        let subscribed = true;
+        if (hasProp(rhs, 'parameterId')) {
+            setOptions(parameters);
+        }
+        else if (hasProp(selectedField, 'possibleValues')) {
+            const { possibleValues } = selectedField;
+            if (typeof possibleValues === 'function') {
+                setLoading(true);
+                setOptions([]);
+                possibleValues({ searchString: filterValue, comparator, lhs: selectedField }).then(response => {
+                    if (!subscribed)
+                        return;
+                    setOptions(response);
+                    setLoading(false);
+                });
+            }
+            else if (Array.isArray(possibleValues)) {
+                setOptions(possibleValues);
+            }
+            else {
+                setOptions([]);
+            }
+        }
+        return () => {
+            subscribed = false;
+        };
+    }, [filterValue, selectedField, comparator]);
+    useEffect(() => setFilterValue(''), [selectedField, comparator]);
+    const getSelections = () => {
+        if (typeof selections === 'string') {
+            let itemLabel;
+            if (hasProp(rhs, 'parameterId')) {
+                const selectedItem = parameters.find(item => item.id === selections);
+                itemLabel = selectedItem !== undefined ? selectedItem.primary : selections;
+            }
+            else
+                itemLabel = selections;
+            return {
+                items: { id: selections, text: itemLabel }
+            };
+        }
+        if (selections.length > 0) {
+            return {
+                items: selections.map(s => {
+                    const optionLabel = options.find(opt => typeof opt === 'object' && opt.id === s);
+                    return { id: s, text: optionLabel?.primary ?? s };
+                }),
+                onRemove: (value) => {
+                    setSelections(cur => {
+                        const current = cur;
+                        return current.filter(selection => selection !== value);
+                    });
+                }
+            };
+        }
+        return undefined;
+    };
+    return (_jsx(ComboBox, { ref: inputRef, mode: mode, label: label ?? t('condition_builder_possible_values_label'), labelHidden: !label, placeholder: placeholder ??
+            (mode === 'single-select'
+                ? t('condition_builder_single_selection_text_default')
+                : t('condition_builder_multi_selection_text_default')), value: filterValue, onChange: e => {
+            setFilterValue(e.target.value);
+        }, onBlur: () => onBlur?.(selections), menu: {
+            items: itemsToRender,
+            onItemClick: id => {
+                setFilterValue('');
+                if (mode === 'single-select') {
+                    setSelections(id);
+                }
+                else {
+                    setSelections(cur => {
+                        const current = cur;
+                        return current.includes(id)
+                            ? current.filter(selection => selection !== id)
+                            : [...cur, id];
+                    });
+                }
+            },
+            loading
+        }, selected: getSelections(), status: status, info: status === 'error' ? t('condition_builder_empty_selection_error_text') : info, actions: onClear &&
+            selections.length > 0 && (_jsx(Button, { icon: true, variant: 'simple', label: t('clear'), onClick: () => {
+                setSelections([]);
+                onClear();
+                if (inputRef.current) {
+                    const inputEl = inputRef.current.querySelector('input');
+                    inputEl?.focus();
+                }
+            }, children: _jsx(Icon, { name: 'times' }) })) }));
+};
+export default ValueSelector;
+//# sourceMappingURL=ValueSelector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ValueSelector.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/ValueSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useMemo, useEffect, useRef } from 'react';\n\nimport {\n  useI18n,\n  BaseProps,\n  ComboBox,\n  createStringMatcher,\n  useAfterInitialEffect,\n  NoChildrenProp,\n  ComboBoxProps,\n  hasProp,\n  Button,\n  Icon\n} from '@pega/cosmos-react-core';\n\nimport {\n  LeafCondition,\n  ParameterValue,\n  ReferenceValue,\n  ValueSelection\n} from '../ConditionBuilder.types';\nimport { Comparator } from '../core/types';\n\ninterface ValueSelectorProps<T extends { possibleValues?: ValueSelection<T> }>\n  extends BaseProps,\n    NoChildrenProp {\n  mode: ComboBoxProps['mode'];\n  /** Previous selection */\n  values: string[] | string;\n  /** Current selected LHS */\n  selectedField: T;\n  /** Current selected comparator */\n  comparator: Comparator;\n  /** Rhs for the condition */\n  rhs: NonNullable<LeafCondition['rhs']>;\n  /** Passed Parameters array for Rhstype PARAMETER */\n  parameters: ParameterValue[];\n  /** Callback for changes */\n  onChange: (selection: string[] | string) => void;\n  /** Callback for blur */\n  onBlur?: (selection?: string[] | string) => void;\n  /** Callback for clear */\n  onClear?: () => void;\n  /** Used to indicate any errors on the control */\n  status?: 'error';\n  /** Placeholder text to display in empty control */\n  placeholder?: ComboBoxProps['placeholder'];\n  /** Custom label for input. Makes label visible if provided. */\n  label?: ComboBoxProps['label'];\n  /** Guidance text that apppears below the input. */\n  info?: ComboBoxProps['info'];\n}\n\n/** A control for selecting multiple values using checkboxes in an overlay */\nconst ValueSelector = <F extends object & { possibleValues?: ValueSelection<F> }>({\n  values,\n  selectedField,\n  comparator,\n  rhs,\n  onChange,\n  onBlur,\n  onClear,\n  status,\n  mode,\n  parameters,\n  placeholder,\n  label,\n  info\n}: ValueSelectorProps<F>) => {\n  const t = useI18n();\n\n  const inputRef = useRef<HTMLDivElement>(null);\n\n  const [selections, setSelections] = useState<string[] | string>(values);\n  const [filterValue, setFilterValue] = useState('');\n  const [options, setOptions] = useState<(string | ParameterValue | ReferenceValue)[]>([]);\n  const [loading, setLoading] = useState(false);\n\n  const itemsToRender = useMemo(() => {\n    let opts = options;\n\n    if (filterValue) {\n      const matcher = createStringMatcher(filterValue, 'boundary');\n      opts = opts.filter(option => {\n        if (typeof option === 'object') return matcher.test(option.primary);\n        return matcher.test(option);\n      });\n    }\n\n    return opts.map(option => {\n      if (typeof option === 'object') {\n        return {\n          ...option,\n          selected: selections.includes(option.id)\n        };\n      }\n      return {\n        id: option,\n        primary: option,\n        selected: selections.includes(option)\n      };\n    });\n  }, [options, filterValue, selections]);\n\n  useAfterInitialEffect(() => {\n    onChange(selections);\n  }, [selections]);\n\n  useEffect(() => {\n    if (!selectedField) {\n      return;\n    }\n    let subscribed = true;\n\n    if (hasProp(rhs, 'parameterId')) {\n      setOptions(parameters);\n    } else if (hasProp(selectedField, 'possibleValues')) {\n      const { possibleValues } = selectedField;\n      if (typeof possibleValues === 'function') {\n        setLoading(true);\n        setOptions([]);\n        possibleValues({ searchString: filterValue, comparator, lhs: selectedField }).then(\n          response => {\n            if (!subscribed) return;\n            setOptions(response);\n            setLoading(false);\n          }\n        );\n      } else if (Array.isArray(possibleValues)) {\n        setOptions(possibleValues);\n      } else {\n        setOptions([]);\n      }\n    }\n\n    return () => {\n      subscribed = false;\n    };\n  }, [filterValue, selectedField, comparator]);\n\n  useEffect(() => setFilterValue(''), [selectedField, comparator]);\n\n  const getSelections = () => {\n    if (typeof selections === 'string') {\n      let itemLabel;\n      if (hasProp(rhs, 'parameterId')) {\n        const selectedItem = parameters.find(item => item.id === selections);\n        itemLabel = selectedItem !== undefined ? selectedItem.primary : selections;\n      } else itemLabel = selections;\n\n      return {\n        items: { id: selections, text: itemLabel }\n      };\n    }\n    if (selections.length > 0) {\n      return {\n        items: selections.map(s => {\n          const optionLabel = options.find(opt => typeof opt === 'object' && opt.id === s) as\n            | ParameterValue\n            | ReferenceValue\n            | undefined;\n          return { id: s, text: optionLabel?.primary ?? s };\n        }),\n        onRemove: (value: string) => {\n          setSelections(cur => {\n            const current = cur as string[];\n            return current.filter(selection => selection !== value);\n          });\n        }\n      };\n    }\n\n    return undefined;\n  };\n\n  return (\n    <ComboBox\n      ref={inputRef}\n      mode={mode}\n      label={label ?? t('condition_builder_possible_values_label')}\n      labelHidden={!label}\n      placeholder={\n        placeholder ??\n        (mode === 'single-select'\n          ? t('condition_builder_single_selection_text_default')\n          : t('condition_builder_multi_selection_text_default'))\n      }\n      value={filterValue}\n      onChange={e => {\n        setFilterValue(e.target.value);\n      }}\n      onBlur={() => onBlur?.(selections)}\n      menu={{\n        items: itemsToRender,\n        onItemClick: id => {\n          setFilterValue('');\n          if (mode === 'single-select') {\n            setSelections(id);\n          } else {\n            setSelections(cur => {\n              const current = cur as string[];\n              return current.includes(id)\n                ? current.filter(selection => selection !== id)\n                : [...cur, id];\n            });\n          }\n        },\n        loading\n      }}\n      selected={getSelections()}\n      status={status}\n      info={status === 'error' ? t('condition_builder_empty_selection_error_text') : info}\n      actions={\n        onClear &&\n        selections.length > 0 && (\n          <Button\n            icon\n            variant='simple'\n            label={t('clear')}\n            onClick={() => {\n              setSelections([]);\n              onClear();\n              if (inputRef.current) {\n                const inputEl = inputRef.current.querySelector('input');\n                inputEl?.focus();\n              }\n            }}\n          >\n            <Icon name='times' />\n          </Button>\n        )\n      }\n    />\n  );\n};\n\nexport default ValueSelector;\n"]}

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

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
-import { BaseProps, ForwardProps } from '@pega/cosmos-react-core';
+import { BaseProps, ForwardProps, FormControlProps } from '@pega/cosmos-react-core';
 import { FieldType, Comparator, RHSType } from '../core/types';
 import { LeafCondition, Field, DateFunctionsByType } from '../ConditionBuilder.types';
 /**
@@ -9,9 +9,10 @@ import { LeafCondition, Field, DateFunctionsByType } from '../ConditionBuilder.t
  * - If a condition is manually constructed outside these components, this utility could miss some malformed conditions.
  * - Also, this does not try to validate if the given `rhs` matches the `lhs`/`comparator`/`validRhsTypes`. Instead, it assumes that the appropriate LHS/Comparator/validRhsTypes must have been already in place for this rhs to be generated.
  */
-export declare function isValidRhs(rhs: LeafCondition['rhs'], fieldType?: FieldType, trimValues?: boolean): boolean;
+export declare function isValidRhs(rhs: LeafCondition['rhs'], lhs: LeafCondition['lhs'], fields: Field[], fieldType?: FieldType, trimValues?: boolean): boolean;
 /** For a condition with the given comparator and lhs-field-type, determines an appropriate default value for the Rhs */
 export declare function getDefaultRhs(fieldType: FieldType, comparator: Comparator, validRhsTypes: Set<RHSType>, dateFunctions?: DateFunctionsByType): LeafCondition['rhs'];
+export declare function truncateISODateString(dateString: string, fieldType: FieldType): string;
 /** Type definition for the input props of RhsControls */
 interface RhsControlProps extends BaseProps {
     /** Lhs for the condition */
@@ -32,6 +33,8 @@ interface RhsControlProps extends BaseProps {
     validRhsTypes: Set<RHSType>;
     /** Passed to enable additional date controls on the RHS, when a DATE_TIME/DATE_ONLY field is selected on the LHS */
     dateFunctions?: DateFunctionsByType;
+    /** Visually hides the label region. */
+    labelHidden?: FormControlProps['labelHidden'];
 }
 /** A controlled component for controls on a Condition's RHS */
 declare const RhsControls: FunctionComponent<RhsControlProps & ForwardProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA6C,MAAM,OAAO,CAAC;AAErF,OAAO,EAQL,SAAS,EACT,YAAY,EACb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAUtF;;;;;;GAMG;AACH,wBAAgB,UAAU,CACxB,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,EACzB,SAAS,CAAC,EAAE,SAAS,EACrB,UAAU,GAAE,OAAe,GAC1B,OAAO,CA2DT;AAED,wHAAwH;AACxH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,GAAG,CAAC,OAAO,CAAC,EAC3B,aAAa,CAAC,EAAE,mBAAmB,GAClC,aAAa,CAAC,KAAK,CAAC,CAyCtB;AAqBD,yDAAyD;AACzD,UAAU,eAAgB,SAAQ,SAAS;IACzC,4BAA4B;IAC5B,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAE1B,mCAAmC;IACnC,UAAU,EAAE,UAAU,CAAC;IAEvB,4BAA4B;IAC5B,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAE1B,4EAA4E;IAC5E,MAAM,EAAE,KAAK,EAAE,CAAC;IAEhB,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAE9C,+DAA+D;IAC/D,cAAc,EAAE,OAAO,CAAC;IAExB,0BAA0B;IAC1B,aAAa,EAAE,KAAK,GAAG,QAAQ,CAAC;IAEhC,uDAAuD;IACvD,aAAa,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IAE5B,oHAAoH;IACpH,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACrC;AAED,+DAA+D;AAC/D,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAuQlE,CAAC;AACF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA6C,MAAM,OAAO,CAAC;AAErF,OAAO,EAML,SAAS,EACT,YAAY,EAKZ,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAMjC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAwCtF;;;;;;GAMG;AACH,wBAAgB,UAAU,CACxB,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,EACzB,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,EACzB,MAAM,EAAE,KAAK,EAAE,EACf,SAAS,CAAC,EAAE,SAAS,EACrB,UAAU,GAAE,OAAe,GAC1B,OAAO,CAqFT;AAED,wHAAwH;AACxH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,GAAG,CAAC,OAAO,CAAC,EAC3B,aAAa,CAAC,EAAE,mBAAmB,GAClC,aAAa,CAAC,KAAK,CAAC,CAgDtB;AAID,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,GAAG,MAAM,CAkBtF;AAED,yDAAyD;AACzD,UAAU,eAAgB,SAAQ,SAAS;IACzC,4BAA4B;IAC5B,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAE1B,mCAAmC;IACnC,UAAU,EAAE,UAAU,CAAC;IAEvB,4BAA4B;IAC5B,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAE1B,4EAA4E;IAC5E,MAAM,EAAE,KAAK,EAAE,CAAC;IAEhB,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAE9C,+DAA+D;IAC/D,cAAc,EAAE,OAAO,CAAC;IAExB,0BAA0B;IAC1B,aAAa,EAAE,KAAK,GAAG,QAAQ,CAAC;IAEhC,uDAAuD;IACvD,aAAa,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IAE5B,oHAAoH;IACpH,aAAa,CAAC,EAAE,mBAAmB,CAAC;IAEpC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;CAC/C;AAED,+DAA+D;AAC/D,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA+WlE,CAAC;AACF,eAAe,WAAW,CAAC"}

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

@@ -1,13 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useMemo } from 'react';
-import { DateInput, DateTimeInput, Flex, Input, Select, Option, hasProp } from '@pega/cosmos-react-core';
+import { DateInput, DateTimeInput, Flex, Input, hasProp, TimeInput, useI18n, DateRangeInput, TimeRangeInput, NumberRangeInput } from '@pega/cosmos-react-core';
 import { convertTimeValueToMs, convertMsToTimeValue } from '../core/time-utils';
-import MultiValueSelector from './MultiValueSelector';
+import { getItem } from '../core/utils';
+import ValueSelector from './ValueSelector';
 import FieldSelector from './FieldSelector';
 import RhsModeSwitch from './RhsModeSwitch';
 import TimePeriodInput from './TimePeriodInput';
 import TimePeriodMenu from './TimePeriodMenu';
 import NumericInput from './NumericInput';
+function isValidLiteralValue(value, fieldType, trimValues = false) {
+    // Identify any invalid numbers (e.g. when `-` is entered)
+    if (typeof value === 'number') {
+        return !Number.isNaN(value);
+    }
+    // NOTE: Not trimming the value in the change-handler so that users can freely type spaces between words
+    if (trimValues) {
+        value = value.trim();
+    }
+    // Can be empty on init and on clearing the value
+    if (value.trim() === '') {
+        return false;
+    }
+    // This check is needed to eliminate invalid dates like `Feb 31` (02/31/2020), which the input allows
+    if ((fieldType === 'DATE_TIME' || fieldType === 'DATE_ONLY') &&
+        Number.isNaN(new Date(value).getTime())) {
+        return false;
+    }
+    return true;
+}
 /**
  * Verifies if the condition has all valid values.
  * NOTES:
@@ -15,7 +36,15 @@ import NumericInput from './NumericInput';
  * - If a condition is manually constructed outside these components, this utility could miss some malformed conditions.
  * - Also, this does not try to validate if the given `rhs` matches the `lhs`/`comparator`/`validRhsTypes`. Instead, it assumes that the appropriate LHS/Comparator/validRhsTypes must have been already in place for this rhs to be generated.
  */
-export function isValidRhs(rhs, fieldType, trimValues = false) {
+export function isValidRhs(rhs, lhs, fields, fieldType, trimValues = false) {
+    // Find the field corresponding to the LHS
+    const matchingField = getItem(fields, lhs.field);
+    if (matchingField === undefined || !hasProp(matchingField, 'type')) {
+        // Check if the RHS has no defined values to select
+        return false;
+    }
+    // A ValueSelector in single/multiple mode is possible when these criteria are met
+    const isValueSelectorPossible = fieldType === 'TEXT' && matchingField.possibleValues !== undefined;
     // RHS would be `undefined` when no RHS is needed. Treat it as a valid value
     if (rhs === undefined) {
         return true;
@@ -25,6 +54,11 @@ export function isValidRhs(rhs, fieldType, trimValues = false) {
         // RHS is invalid if no field is selected
         return rhs.field !== '';
     }
+    // rhs of Parameter type
+    if (hasProp(rhs, 'parameterId')) {
+        // RHS is invalid if no id is returned
+        return !!rhs.parameterId;
+    }
     // List-input cases
     if (hasProp(rhs, 'values')) {
         // RHS is invalid if the list is empty
@@ -42,7 +76,7 @@ export function isValidRhs(rhs, fieldType, trimValues = false) {
             return !Number.isNaN(rhs.value);
         }
         // NOTE: Not trimming the value in the change-handler so that users can freely type spaces between words
-        if (trimValues) {
+        if (trimValues && !isValueSelectorPossible) {
             rhs.value = rhs.value.trim();
         }
         // Can be empty on init and on clearing the value
@@ -61,6 +95,11 @@ export function isValidRhs(rhs, fieldType, trimValues = false) {
                 (!rhs.relativeDate.interval || rhs.relativeDate.interval <= 0)))) {
         return false;
     }
+    if (hasProp(rhs, 'start') &&
+        (!isValidLiteralValue(rhs.start, fieldType, trimValues) ||
+            !isValidLiteralValue(rhs.end, fieldType, trimValues))) {
+        return false;
+    }
     return true;
 }
 /** For a condition with the given comparator and lhs-field-type, determines an appropriate default value for the Rhs */
@@ -74,6 +113,9 @@ export function getDefaultRhs(fieldType, comparator, validRhsTypes, dateFunction
         case 'IN':
         case 'NOT_IN':
             return { values: [] };
+        case 'BTW':
+        case 'NOT_BTW':
+            return { start: '', end: '' };
         default: {
             if (fieldType === 'BOOLEAN' && (comparator === 'EQ' || comparator === 'NEQ')) {
                 // For booleans, these comparators can only be used for comparing with other fields
@@ -81,6 +123,8 @@ export function getDefaultRhs(fieldType, comparator, validRhsTypes, dateFunction
             }
             if (validRhsTypes.has('LITERAL'))
                 return { value: '' };
+            if (validRhsTypes.has('PARAMETER'))
+                return { parameterId: '' };
             if (validRhsTypes.has('DATE_FUNCTION') &&
                 dateFunctions &&
                 (fieldType === 'DATE_TIME' || fieldType === 'DATE_ONLY'))
@@ -100,7 +144,7 @@ export function getDefaultRhs(fieldType, comparator, validRhsTypes, dateFunction
 }
 // Truncates output values from DateInput/DateTimeInput to return a wall time on the RHS
 // NOTE: This assumes that the input date is set up on the UTC timezone
-function truncateISODateString(dateString, fieldType) {
+export function truncateISODateString(dateString, fieldType) {
     const date = new Date(dateString);
     const YYYY = date.getUTCFullYear().toString().padStart(4, '0');
     const MM = (date.getUTCMonth() + 1).toString().padStart(2, '0');
@@ -110,21 +154,25 @@ function truncateISODateString(dateString, fieldType) {
         return `${YYYY}-${MM}-${DD}`;
     const hh = date.getUTCHours().toString().padStart(2, '0');
     const mm = date.getUTCMinutes().toString().padStart(2, '0');
+    const ss = date.getUTCSeconds().toString().padStart(2, '0');
+    if (fieldType === 'TIME_ONLY')
+        return `${hh}:${mm}:${ss}`;
     // cspell:disable-next-line
     // For DATE_TIME fields, returning a YYYY-MM-DDTHH:mm format and discarding the time-zone etc. to be consistent with the previous spec which was returning a wall time
     return `${YYYY}-${MM}-${DD}T${hh}:${mm}`;
 }
 /** A controlled component for controls on a Condition's RHS */
 const RhsControls = (props) => {
-    const { lhs, comparator, rhs, fields, onChange, indicateErrors, itemDirection, validRhsTypes, dateFunctions } = props;
+    const { lhs, comparator, rhs, fields, onChange, indicateErrors, itemDirection, validRhsTypes, dateFunctions, labelHidden = true } = props;
+    const t = useI18n();
     // Find the field corresponding to the LHS
-    const matchingField = fields.find(f => f.name === lhs.field);
+    const matchingField = getItem(fields, lhs.field);
     // Options for the Field-selector (if applicable)
     const fieldOptions = useMemo(() => {
-        if (!matchingField)
+        if (!matchingField || !hasProp(matchingField, 'type'))
             return [];
         // Show all other fields of the same data type as the LHS
-        return fields.filter(f => f.type === matchingField.type && f.name !== lhs.field);
+        return fields.filter(f => hasProp(f, 'type') && f.type === matchingField.type && f.id !== lhs.field);
     }, [fields, lhs]);
     // Set up a CSV input for IN/NOT_IN comparators
     const [csvInput, setCsvInput] = useState(rhs && hasProp(rhs, 'values') ? rhs.values.join(', ') : '');
@@ -139,27 +187,29 @@ const RhsControls = (props) => {
     if (rhs === undefined) {
         return _jsx("div", {}); // Rendering a placeholder div to keep the layout consistent
     }
-    if (matchingField === undefined) {
+    if (matchingField === undefined || !hasProp(matchingField, 'type')) {
         // For safety against any rare cases where the LHS from an input condition is not present in the input fields to the ConditionBuilder
         // In those cases, don't render an RHS and wait for a valid value to be picked on LHS
         return _jsx("div", {}); // Rendering a placeholder div to keep the layout consistent
     }
     const fieldType = matchingField.type;
+    const parameters = matchingField.parameters !== undefined ? matchingField.parameters : [];
     // If errors should be indicated inline, validate the current rhs
     let showError = false;
     if (indicateErrors) {
-        showError = !isValidRhs(rhs, fieldType, false);
+        showError = !isValidRhs(rhs, lhs, fields, fieldType, false);
     }
-    // Set up Value-selector (if applicable)
-    const { possibleValues } = matchingField; // These are passed when possible values are known ahead of time
     const isValueSelectorPossible = fieldType === 'TEXT' &&
-        possibleValues !== undefined &&
+        matchingField.possibleValues !== undefined &&
         ['EQ', 'NEQ', 'IN', 'NOT_IN'].includes(comparator); // A ValueSelector in single/multiple mode is possible when these criteria are met
-    const useValueSelector = isValueSelectorPossible && !hasProp(rhs, 'field'); // Use the ValueSelector component if it is applicable and if not in ANOTHER_FIELD mode
+    const useValueSelector = isValueSelectorPossible && !hasProp(rhs, 'field'); // Use the ValueSelector component if it is applicable and if not in ANOTHER_FIELD mode and if RHS is not PARAMETER type
     // Handle changes from the Value-selector
     const handleValueSelection = (selection) => {
         if (typeof selection === 'string') {
-            onChange({ value: selection }); // Submit a new RHS
+            if (hasProp(rhs, 'parameterId'))
+                onChange({ parameterId: selection });
+            else
+                onChange({ value: selection }); // Submit a new RHS
         }
         else {
             onChange({ values: selection }); // Submit a new RHS
@@ -174,21 +224,33 @@ const RhsControls = (props) => {
         // NOTE: Not trimming the value here so that users can freely type spaces between words. Trimming is done on Submit, via the isValidRhs call
         onChange({ value: e.target.value }); // Submit a new RHS
     };
-    // Handle changes from a Time-input
-    const handleTimeValueChange = (e) => {
-        let newValue = e.target.value;
-        if (newValue.length === 5) {
-            newValue += ':00'; // Enforce a fixed hh:mm:ss format
-        }
-        onChange({ value: convertTimeValueToMs(newValue) }); // Submit a new RHS
-    };
     // Handle changes from a DateInput
     const handleDateValueChange = ({ valueAsISOString, valueAsTimestamp, state }) => {
         // NOTE: Not relying fully on `state` since in some cases state and valueAsTimestamp as both undefined
         if (valueAsTimestamp === undefined || state === 'incomplete' || state === 'invalid')
             return;
         const truncatedValue = truncateISODateString(valueAsISOString, fieldType); // Truncate to return a wall time as per spec
-        onChange({ value: truncatedValue });
+        onChange({
+            value: fieldType === 'TIME_ONLY' ? convertTimeValueToMs(truncatedValue) : truncatedValue
+        });
+    };
+    const handleDateRangeValueChange = ({ start, end }) => {
+        if (start.valueAsISOString === '' || end.valueAsISOString === '')
+            return;
+        const [truncatedStartValue, truncatedEndValue] = [
+            truncateISODateString(start.valueAsISOString, fieldType),
+            truncateISODateString(end.valueAsISOString, fieldType)
+        ];
+        onChange({
+            start: fieldType === 'TIME_ONLY' ? convertTimeValueToMs(truncatedStartValue) : truncatedStartValue,
+            end: fieldType === 'TIME_ONLY' ? convertTimeValueToMs(truncatedEndValue) : truncatedEndValue
+        });
+    };
+    const handleNumberRangeValueChange = ({ start, end }) => {
+        onChange({
+            start: start.trim() ? Number(start) : '',
+            end: end.trim() ? Number(end) : ''
+        });
     };
     // Handle changes from a CSV-input
     const handleCSVChange = (e) => {
@@ -211,9 +273,8 @@ const RhsControls = (props) => {
             alignItems: itemDirection === 'column' ? 'stretch' : 'start',
             justify: 'between',
             gap: 0.5
-        }, children: [_jsx(RhsModeSwitch, { fieldType: fieldType, comparator: comparator, rhs: rhs, onChange: onChange, mode: itemDirection === 'column' ? 'combo-box' : 'menu-button', validRhsTypes: validRhsTypes, dateFunctions: dateFunctions }), hasProp(rhs, 'field') && (_jsx(Flex, { item: { grow: 1 }, children: _jsx(FieldSelector, { value: rhs.field, onChange: handleFieldChange, fields: fieldOptions, status: showError ? 'error' : undefined, info: showError ? 'No selection' : undefined }) })), hasProp(rhs, 'value') && !hasProp(rhs, 'dateFunction') && (_jsxs(Flex, { item: { grow: 1 }, children: [fieldType === 'TEXT' && useValueSelector && (_jsxs(Select, { value: rhs.value, onChange: (e) => handleValueSelection(e.target.value), status: showError ? 'error' : undefined, info: showError ? 'No selection' : undefined, label: '-', labelHidden: true, children: [_jsx(Option, { value: '', children: "Select value" }), possibleValues.map(value => (_jsx(Option, { value: value, children: value }, value)))] })), fieldType === 'TEXT' && !useValueSelector && (_jsx(Input, { value: rhs.value, onChange: handleValueChange, status: showError ? 'error' : undefined, info: showError ? 'Empty value' : undefined, name: 'rhs-text-literal-input', label: '-', labelHidden: true })), fieldType === 'NUMBER' && (_jsx(NumericInput, { rhs: rhs, onChange: onChange, status: showError ? 'error' : undefined })), fieldType === 'TIME_ONLY' && (_jsx(Input, { type: 'time', step: '1', value: typeof rhs.value === 'string' ? rhs.value : convertMsToTimeValue(rhs.value), onChange: handleTimeValueChange, status: showError ? 'error' : undefined, info: showError ? 'Invalid time' : undefined, label: '-', labelHidden: true })), fieldType === 'DATE_ONLY' && (_jsx(DateInput, { value: rhs.value, onChange: handleDateValueChange, status: showError ? 'error' : undefined, info: showError ? 'Invalid date' : '', label: '-', labelHidden: true })), fieldType === 'DATE_TIME' && (_jsx(DateTimeInput, { value: rhs.value !== '' ? rhs.value : undefined, onChange: handleDateValueChange, status: showError ? 'error' : undefined, info: showError ? 'Invalid date' : '', label: '-', labelHidden: true }))] })), (fieldType === 'DATE_ONLY' || fieldType === 'DATE_TIME') &&
-                (hasProp(rhs, 'relativeDate') || hasProp(rhs, 'dateFunction')) && (_jsx(Flex, { item: { grow: 1 }, children: _jsx(TimePeriodComp, { rhs: rhs, fieldType: fieldType, onChange: onChange, dateFunctionsList: dateFunctions ? dateFunctions[fieldType] : [], status: showError ? 'error' : undefined }) })), hasProp(rhs, 'values') && (_jsxs(Flex, { item: { grow: 1 }, children: [useValueSelector && (_jsx(MultiValueSelector, { values: rhs.values, options: possibleValues, onChange: handleValueSelection, status: showError ? 'error' : undefined })), !useValueSelector && (_jsx(Input, { value: csvInput, onChange: handleCSVChange, status: showError ? 'error' : undefined, info: showError ? 'Invalid values' : undefined, label: '-', labelHidden: true, placeholder: 'Enter comma separated values' // FIXME: TR
-                     }))] }))] }));
+        }, children: [_jsx(RhsModeSwitch, { parameters: parameters, fieldType: fieldType, comparator: comparator, rhs: rhs, onChange: onChange, mode: itemDirection === 'column' ? 'combo-box' : 'menu-button', validRhsTypes: validRhsTypes, dateFunctions: dateFunctions }), hasProp(rhs, 'field') && (_jsx(Flex, { item: { grow: 1 }, children: _jsx(FieldSelector, { value: rhs.field, onChange: handleFieldChange, fields: fieldOptions, status: showError ? 'error' : undefined, info: showError ? t('condition_builder_no_selection') : undefined }) })), hasProp(rhs, 'parameterId') && (_jsxs(Flex, { item: { grow: 1 }, children: [parameters.length === 1 && (_jsx(Input, { value: parameters[0].primary.toString(), status: showError ? 'error' : undefined, info: showError ? t('condition_builder_empty_value_text') : undefined, name: 'rhs-text-parameter-input', label: t('condition_builder_rhs_with_readOnly_input'), labelHidden: true, readOnly: true })), parameters.length > 1 && (_jsx(ValueSelector, { parameters: parameters, mode: 'single-select', values: rhs.parameterId.toString(), selectedField: matchingField, rhs: rhs, comparator: comparator, onChange: handleValueSelection, status: showError ? 'error' : undefined, info: showError ? t('condition_builder_empty_selection_error_text') : undefined }))] })), hasProp(rhs, 'value') && !hasProp(rhs, 'dateFunction') && (_jsxs(Flex, { item: { grow: 1 }, children: [fieldType === 'TEXT' && useValueSelector && (_jsx(ValueSelector, { parameters: parameters, mode: 'single-select', values: rhs.value.toString(), selectedField: matchingField, comparator: comparator, rhs: rhs, onChange: handleValueSelection, status: showError ? 'error' : undefined, info: showError ? t('condition_builder_no_selection') : undefined })), fieldType === 'TEXT' && !useValueSelector && (_jsx(Input, { value: rhs.value.toString(), onChange: handleValueChange, status: showError ? 'error' : undefined, info: showError ? t('empty_value') : undefined, name: 'rhs-text-literal-input', label: t('condition_builder_rhs_with_input_type'), labelHidden: true })), fieldType === 'NUMBER' && (_jsx(NumericInput, { rhs: rhs, onChange: onChange, status: showError ? 'error' : undefined })), fieldType === 'TIME_ONLY' && (_jsx(TimeInput, { value: rhs.value !== '' ? convertMsToTimeValue(Number(rhs.value)) : undefined, withSeconds: true, onChange: handleDateValueChange, status: showError ? 'error' : undefined, info: showError ? t('condition_builder_invalid_time') : '', label: '-', labelHidden: true })), fieldType === 'DATE_ONLY' && (_jsx(DateInput, { value: rhs.value, onChange: handleDateValueChange, status: showError ? 'error' : undefined, info: showError ? t('condition_builder_invalid_date') : '', label: '-', labelHidden: true })), fieldType === 'DATE_TIME' && (_jsx(DateTimeInput, { value: rhs.value !== '' ? rhs.value : undefined, onChange: handleDateValueChange, status: showError ? 'error' : undefined, info: showError ? t('condition_builder_invalid_date') : '', label: '-', labelHidden: true }))] })), (fieldType === 'DATE_ONLY' || fieldType === 'DATE_TIME') &&
+                (hasProp(rhs, 'relativeDate') || hasProp(rhs, 'dateFunction')) && (_jsx(Flex, { item: { grow: 1 }, children: _jsx(TimePeriodComp, { rhs: rhs, fieldType: fieldType, onChange: onChange, dateFunctionsList: dateFunctions ? dateFunctions[fieldType] : [], status: showError ? 'error' : undefined }) })), hasProp(rhs, 'values') && (_jsxs(Flex, { item: { grow: 1 }, children: [useValueSelector && (_jsx(ValueSelector, { parameters: parameters, mode: 'multi-select', values: rhs.values.map(String), selectedField: matchingField, comparator: comparator, rhs: rhs, onChange: handleValueSelection, status: showError ? 'error' : undefined })), !useValueSelector && (_jsx(Input, { value: csvInput, onChange: handleCSVChange, status: showError ? 'error' : undefined, info: showError ? t('condition_builder_invalid_values') : undefined, label: '-', labelHidden: true, placeholder: t('condition_builder_enter_csv_placeholder') }))] })), hasProp(rhs, 'start') && (_jsxs(Flex, { item: { grow: 1 }, children: [fieldType === 'NUMBER' && (_jsx(NumberRangeInput, { value: { start: rhs.start.toString(), end: rhs.end.toString() }, onChange: handleNumberRangeValueChange, status: showError ? 'error' : undefined, label: matchingField.primary, labelHidden: labelHidden, info: showError ? t('condition_builder_invalid_number_range') : undefined })), fieldType === 'DATE_ONLY' && (_jsx(DateRangeInput, { value: { start: rhs.start || undefined, end: rhs.end || undefined }, onChange: handleDateRangeValueChange, labelHidden: labelHidden, label: matchingField.primary, status: showError ? 'error' : undefined, info: showError ? t('condition_builder_invalid_date_range') : '' })), fieldType === 'TIME_ONLY' && (_jsx(TimeRangeInput, { mode: 'time', value: { start: rhs.start || undefined, end: rhs.end || undefined }, onChange: handleDateRangeValueChange, labelHidden: labelHidden, label: matchingField.primary, status: showError ? 'error' : undefined, info: showError ? t('condition_builder_invalid_time_range') : '' })), fieldType === 'DATE_TIME' && (_jsx(TimeRangeInput, { mode: 'datetime', value: { start: rhs.start || undefined, end: rhs.end || undefined }, onChange: handleDateRangeValueChange, labelHidden: labelHidden, label: matchingField.primary, status: showError ? 'error' : undefined, info: showError ? t('condition_builder_invalid_date_range') : '' }))] }))] }));
 };
 export default RhsControls;
 //# sourceMappingURL=index.js.map