@pega/cosmos-react-condition-builder 3.0.0-dev.1.0 → 3.0.0-dev.11.0

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} 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"]}

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

@@ -13,7 +13,7 @@ const NumericInput = (props) => {
         setLocalValue(newValue);
         onChange({ value: newValue.trim() ? Number(newValue) : '' }); // Save as a number unless the input is empty
     };
-    return (_jsx(NumberInput, { value: localValue, onChange: handleInputChange, status: status, info: status === 'error' ? t('condition_builder_invalid_number') : undefined, label: t('condition_builder_compare_with_numeric_value'), labelHidden: true }, void 0));
+    return (_jsx(NumberInput, { value: localValue, onChange: handleInputChange, status: status, info: status === 'error' ? t('condition_builder_invalid_number') : undefined, label: t('condition_builder_compare_with_numeric_value'), labelHidden: true }));
 };
 export default NumericInput;
 //# sourceMappingURL=NumericInput.js.map

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,iBACX,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,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"]}

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

@@ -103,7 +103,7 @@ const RelativeDateMenu = (props) => {
             });
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Select, { label: t('condition_builder_time_period_label'), value: rhs.relativeDate.timePeriod, onChange: handleTimePeriodChange, children: timePeriodOptions.map(o => (_jsx(Option, { value: o.id, children: o.label }, o.id))) }, void 0), _jsxs(Flex, { container: { direction: 'row', colGap: 1 }, children: [relativeDate.timePeriod !== 'CURRENT' && (_jsx(Flex, { item: { basis: '30%' }, children: _jsx(NumberInput, { ...valueComponentProps, min: 1, step: 1, showDecimal: false, onChange: handleIntervalChange }, void 0) }, void 0)), _jsx(Flex, { item: { basis: relativeDate.timePeriod !== 'CURRENT' ? '70%' : '100%' }, children: _jsx(Select, { label: t('condition_builder_date_part'), value: relativeDate.datePart, onChange: handleDatePartChange, children: datePartOptions.map(o => (_jsx(Option, { value: o.id, children: o.label }, o.id))) }, void 0) }, void 0)] }, void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsx(Select, { label: t('condition_builder_time_period_label'), value: rhs.relativeDate.timePeriod, onChange: handleTimePeriodChange, children: timePeriodOptions.map(o => (_jsx(Option, { value: o.id, children: o.label }, o.id))) }), _jsxs(Flex, { container: { direction: 'row', colGap: 1 }, children: [relativeDate.timePeriod !== 'CURRENT' && (_jsx(Flex, { item: { basis: '30%' }, children: _jsx(NumberInput, { ...valueComponentProps, min: 1, step: 1, showDecimal: false, onChange: handleIntervalChange }) })), _jsx(Flex, { item: { basis: relativeDate.timePeriod !== 'CURRENT' ? '70%' : '100%' }, children: _jsx(Select, { label: t('condition_builder_date_part'), value: relativeDate.datePart, onChange: handleDatePartChange, children: datePartOptions.map(o => (_jsx(Option, { value: o.id, children: o.label }, o.id))) }) })] })] }));
 };
 export default RelativeDateMenu;
 //# sourceMappingURL=RelativeDateMenu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RelativeDateMenu.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/RelativeDateMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["// cspell:ignore words DDTHH\nimport { ChangeEvent, FunctionComponent, useMemo } from 'react';\n\nimport {\n  BaseProps,\n  ForwardProps,\n  Flex,\n  Select,\n  Option,\n  NumberInput,\n  FormControlProps,\n  useI18n,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport { RhsWithRelativeDate } from '../ConditionBuilder.types';\nimport { DateFunction, DatePart, TimePeriod, FieldType } from '../core/types';\n\nexport interface RelativeDateMenuProps extends BaseProps, NoChildrenProp {\n  /** Rhs for the condition */\n  rhs: RhsWithRelativeDate;\n\n  /** Callback for any modifications to the Rhs */\n  onChange: (rhs: RhsWithRelativeDate) => void;\n\n  /** FieldType of the LHS Field. Will only be DATE_TIME or DATE_ONLY */\n  fieldType: FieldType;\n\n  /** Used to indicate any errors on the control */\n  status?: 'error';\n}\n\n/** A menu with controls to select a Time period value on RHS */\nconst RelativeDateMenu: FunctionComponent<RelativeDateMenuProps & ForwardProps> = (\n  props: RelativeDateMenuProps\n) => {\n  const { rhs, onChange, status, fieldType } = props;\n  const t = useI18n();\n\n  const { relativeDate } = rhs;\n\n  // Options for the Date Part selector\n  const datePartOptions = useMemo(() => {\n    const allOptions = ['YEARS', 'QUARTERS', 'MONTHS', 'WEEKS', 'DAYS', 'HOURS'];\n    const datePartLabels: Record<DatePart, string> = {\n      YEARS: t('condition_builder_relative_dates_year'),\n      QUARTERS: t('condition_builder_relative_dates_quarter'),\n      MONTHS: t('condition_builder_relative_dates_month'),\n      WEEKS: t('condition_builder_relative_dates_week'),\n      DAYS: t('condition_builder_relative_dates_day'),\n      HOURS: t('condition_builder_relative_dates_hour'),\n      MINUTES: t('condition_builder_relative_dates_minute')\n    };\n    if (fieldType === 'DATE_TIME') {\n      // TODO: Remove temporary hide MINUTES option\n      return allOptions.map(datePart => ({\n        id: datePart,\n        label: datePartLabels[datePart as DatePart]\n      }));\n    }\n    // Removes MINUTES and HOURS for DATE_ONLY fields\n    return allOptions.splice(0, allOptions.length - 1).map(datePart => ({\n      id: datePart,\n      label: datePartLabels[datePart as DatePart]\n    }));\n  }, [t, fieldType]);\n\n  // Options for the Date-function selector\n  const timePeriodOptions = useMemo(() => {\n    const allOptions = ['CURRENT', 'LAST', 'PREVIOUS', 'NEXT'];\n    const timePeriodLabels: Record<TimePeriod, string> = {\n      CURRENT: t('condition_builder_time_period_current'),\n      LAST: t('condition_builder_time_period_last'),\n      PREVIOUS: t('condition_builder_time_period_previous'),\n      NEXT: t('condition_builder_time_period_next')\n    };\n    return allOptions.map(timePeriod => ({\n      id: timePeriod,\n      label: timePeriodLabels[timePeriod as TimePeriod]\n    }));\n  }, [t]);\n\n  const handleTimePeriodChange = (e: ChangeEvent<HTMLSelectElement>) => {\n    const selection = e.target.value;\n    if (selection === 'CURRENT') {\n      onChange({\n        relativeDate: {\n          timePeriod: selection as TimePeriod,\n          datePart: relativeDate.datePart\n        }\n      });\n    } else {\n      onChange({\n        relativeDate: {\n          ...relativeDate,\n          timePeriod: selection as TimePeriod,\n          interval: relativeDate.interval ?? undefined\n        }\n      });\n    }\n  };\n\n  // Handle changes to the Date-function selector\n  const handleDatePartChange = (e: ChangeEvent<HTMLSelectElement>) => {\n    const selection = e.target.value as DateFunction;\n    onChange({\n      relativeDate: {\n        ...relativeDate,\n        datePart: selection as DatePart\n      }\n    });\n  };\n\n  // Common props for all value controls\n  const valueComponentProps: FormControlProps = {\n    value: relativeDate.interval?.toString(),\n    label: t('condition_builder_value_label'),\n    status,\n    info: status ? t('condition_builder_invalid_value') : undefined\n  };\n\n  const handleIntervalChange = (value: string) => {\n    let newValue: number;\n    if (value !== '' && !Number.isNaN(Number(value))) {\n      newValue = Number(value);\n      onChange({\n        relativeDate: {\n          ...relativeDate,\n          interval: newValue\n        }\n      });\n    } else {\n      onChange({\n        relativeDate: {\n          ...relativeDate,\n          interval: undefined\n        }\n      });\n    }\n  };\n\n  return (\n    <>\n      <Select\n        label={t('condition_builder_time_period_label')}\n        value={rhs.relativeDate.timePeriod}\n        onChange={handleTimePeriodChange}\n      >\n        {timePeriodOptions.map(o => (\n          <Option key={o.id} value={o.id}>\n            {o.label}\n          </Option>\n        ))}\n      </Select>\n      <Flex container={{ direction: 'row', colGap: 1 }}>\n        {relativeDate.timePeriod !== 'CURRENT' && (\n          <Flex item={{ basis: '30%' }}>\n            <NumberInput\n              {...valueComponentProps}\n              min={1}\n              step={1}\n              showDecimal={false}\n              onChange={handleIntervalChange}\n            />\n          </Flex>\n        )}\n        <Flex item={{ basis: relativeDate.timePeriod !== 'CURRENT' ? '70%' : '100%' }}>\n          <Select\n            label={t('condition_builder_date_part')}\n            value={relativeDate.datePart}\n            onChange={handleDatePartChange}\n          >\n            {datePartOptions.map(o => (\n              <Option key={o.id} value={o.id}>\n                {o.label}\n              </Option>\n            ))}\n          </Select>\n        </Flex>\n      </Flex>\n    </>\n  );\n};\n\nexport default RelativeDateMenu;\n"]}
+{"version":3,"file":"RelativeDateMenu.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/RelativeDateMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["// cspell:ignore words DDTHH\nimport { ChangeEvent, FunctionComponent, useMemo } from 'react';\n\nimport {\n  BaseProps,\n  ForwardProps,\n  Flex,\n  Select,\n  Option,\n  NumberInput,\n  FormControlProps,\n  useI18n,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport { RhsWithRelativeDate } from '../ConditionBuilder.types';\nimport { DateFunction, DatePart, TimePeriod, FieldType } from '../core/types';\n\nexport interface RelativeDateMenuProps extends BaseProps, NoChildrenProp {\n  /** Rhs for the condition */\n  rhs: RhsWithRelativeDate;\n\n  /** Callback for any modifications to the Rhs */\n  onChange: (rhs: RhsWithRelativeDate) => void;\n\n  /** FieldType of the LHS Field. Will only be DATE_TIME or DATE_ONLY */\n  fieldType: FieldType;\n\n  /** Used to indicate any errors on the control */\n  status?: 'error';\n}\n\n/** A menu with controls to select a Time period value on RHS */\nconst RelativeDateMenu: FunctionComponent<RelativeDateMenuProps & ForwardProps> = (\n  props: RelativeDateMenuProps\n) => {\n  const { rhs, onChange, status, fieldType } = props;\n  const t = useI18n();\n\n  const { relativeDate } = rhs;\n\n  // Options for the Date Part selector\n  const datePartOptions = useMemo(() => {\n    const allOptions = ['YEARS', 'QUARTERS', 'MONTHS', 'WEEKS', 'DAYS', 'HOURS'];\n    const datePartLabels: Record<DatePart, string> = {\n      YEARS: t('condition_builder_relative_dates_year'),\n      QUARTERS: t('condition_builder_relative_dates_quarter'),\n      MONTHS: t('condition_builder_relative_dates_month'),\n      WEEKS: t('condition_builder_relative_dates_week'),\n      DAYS: t('condition_builder_relative_dates_day'),\n      HOURS: t('condition_builder_relative_dates_hour'),\n      MINUTES: t('condition_builder_relative_dates_minute')\n    };\n    if (fieldType === 'DATE_TIME') {\n      // TODO: Remove temporary hide MINUTES option\n      return allOptions.map(datePart => ({\n        id: datePart,\n        label: datePartLabels[datePart as DatePart]\n      }));\n    }\n    // Removes MINUTES and HOURS for DATE_ONLY fields\n    return allOptions.splice(0, allOptions.length - 1).map(datePart => ({\n      id: datePart,\n      label: datePartLabels[datePart as DatePart]\n    }));\n  }, [t, fieldType]);\n\n  // Options for the Date-function selector\n  const timePeriodOptions = useMemo(() => {\n    const allOptions = ['CURRENT', 'LAST', 'PREVIOUS', 'NEXT'];\n    const timePeriodLabels: Record<TimePeriod, string> = {\n      CURRENT: t('condition_builder_time_period_current'),\n      LAST: t('condition_builder_time_period_last'),\n      PREVIOUS: t('condition_builder_time_period_previous'),\n      NEXT: t('condition_builder_time_period_next')\n    };\n    return allOptions.map(timePeriod => ({\n      id: timePeriod,\n      label: timePeriodLabels[timePeriod as TimePeriod]\n    }));\n  }, [t]);\n\n  const handleTimePeriodChange = (e: ChangeEvent<HTMLSelectElement>) => {\n    const selection = e.target.value;\n    if (selection === 'CURRENT') {\n      onChange({\n        relativeDate: {\n          timePeriod: selection as TimePeriod,\n          datePart: relativeDate.datePart\n        }\n      });\n    } else {\n      onChange({\n        relativeDate: {\n          ...relativeDate,\n          timePeriod: selection as TimePeriod,\n          interval: relativeDate.interval ?? undefined\n        }\n      });\n    }\n  };\n\n  // Handle changes to the Date-function selector\n  const handleDatePartChange = (e: ChangeEvent<HTMLSelectElement>) => {\n    const selection = e.target.value as DateFunction;\n    onChange({\n      relativeDate: {\n        ...relativeDate,\n        datePart: selection as DatePart\n      }\n    });\n  };\n\n  // Common props for all value controls\n  const valueComponentProps: FormControlProps = {\n    value: relativeDate.interval?.toString(),\n    label: t('condition_builder_value_label'),\n    status,\n    info: status ? t('condition_builder_invalid_value') : undefined\n  };\n\n  const handleIntervalChange = (value: string) => {\n    let newValue: number;\n    if (value !== '' && !Number.isNaN(Number(value))) {\n      newValue = Number(value);\n      onChange({\n        relativeDate: {\n          ...relativeDate,\n          interval: newValue\n        }\n      });\n    } else {\n      onChange({\n        relativeDate: {\n          ...relativeDate,\n          interval: undefined\n        }\n      });\n    }\n  };\n\n  return (\n    <>\n      <Select\n        label={t('condition_builder_time_period_label')}\n        value={rhs.relativeDate.timePeriod}\n        onChange={handleTimePeriodChange}\n      >\n        {timePeriodOptions.map(o => (\n          <Option key={o.id} value={o.id}>\n            {o.label}\n          </Option>\n        ))}\n      </Select>\n      <Flex container={{ direction: 'row', colGap: 1 }}>\n        {relativeDate.timePeriod !== 'CURRENT' && (\n          <Flex item={{ basis: '30%' }}>\n            <NumberInput\n              {...valueComponentProps}\n              min={1}\n              step={1}\n              showDecimal={false}\n              onChange={handleIntervalChange}\n            />\n          </Flex>\n        )}\n        <Flex item={{ basis: relativeDate.timePeriod !== 'CURRENT' ? '70%' : '100%' }}>\n          <Select\n            label={t('condition_builder_date_part')}\n            value={relativeDate.datePart}\n            onChange={handleDatePartChange}\n          >\n            {datePartOptions.map(o => (\n              <Option key={o.id} value={o.id}>\n                {o.label}\n              </Option>\n            ))}\n          </Select>\n        </Flex>\n      </Flex>\n    </>\n  );\n};\n\nexport default RelativeDateMenu;\n"]}

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

@@ -114,9 +114,9 @@ const RhsModeSwitch = (props) => {
     if (menu.items.length < 2)
         return null;
     if (mode === 'combo-box') {
-        return (_jsx(ComboBox, { label: t('condition_builder_compare_with'), labelHidden: true, mode: 'single-select', selected: { items: selected }, menu: menu }, void 0));
+        return (_jsx(ComboBox, { label: t('condition_builder_compare_with'), labelHidden: true, mode: 'single-select', selected: { items: selected }, menu: menu }));
     }
-    return (_jsx(MenuButton, { text: t('condition_builder_compare_with'), icon: 'gear', iconOnly: true, variant: 'simple', menu: menu }, void 0));
+    return (_jsx(MenuButton, { text: t('condition_builder_compare_with'), icon: 'gear', iconOnly: true, variant: 'simple', menu: menu }));
 };
 export default RhsModeSwitch;
 //# sourceMappingURL=RhsModeSwitch.js.map

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,MAKJ;AALD,WAAK,MAAM;IACT,yCAA+B,CAAA;IAC/B,iCAAuB,CAAA;IACvB,yCAA+B,CAAA;IAC/B,yCAA+B,CAAA;AACjC,CAAC,EALI,MAAM,KAAN,MAAM,QAKV;AAED,wDAAwD;AACxD,SAAS,mBAAmB,CAC1B,SAAoB,EACpB,CAAuC;IAEvC,QAAQ,SAAS,EAAE;QACjB,KAAK,MAAM;YACT,OAAO,CAAC,CAAC,2CAA2C,CAAC,CAAC;QACxD,KAAK,QAAQ;YACX,OAAO,CAAC,CAAC,8CAA8C,CAAC,CAAC;QAC3D,KAAK,WAAW,CAAC;QACjB,KAAK,WAAW;YACd,OAAO,CAAC,CAAC,2CAA2C,CAAC,CAAC;QACxD,KAAK,WAAW;YACd,OAAO,CAAC,CAAC,2CAA2C,CAAC,CAAC;QACxD;YACE,OAAO,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,oEAAoE;KAClH;AACH,CAAC;AAyBD,6DAA6D;AAC7D,MAAM,aAAa,GAAyD,CAC1E,KAAyB,EACzB,EAAE;IACF,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAC3F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,wBAAwB;IACxB,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,yGAAyG;QACzG,IAAI,OAAO,CAAC,GAAI,EAAE,OAAO,CAAC;YAAE,OAAO,MAAM,CAAC,aAAa,CAAC;QACxD,IAAI,OAAO,CAAC,GAAI,EAAE,OAAO,CAAC,IAAI,OAAO,CAAC,GAAI,EAAE,cAAc,CAAC;YAAE,OAAO,MAAM,CAAC,SAAS,CAAC;QACrF,IAAI,OAAO,CAAC,GAAI,EAAE,cAAc,CAAC;YAAE,OAAO,MAAM,CAAC,aAAa,CAAC;QAC/D,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,CAAC;oBAC1C,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;iBACF,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;iBACF,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;iBACF,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;iBACF,CAAC,CAAC;aACJ;SACF;QAED,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;IACnC,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 } 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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"TimePeriodInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/TimePeriodInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAG5D,OAAO,EAEL,YAAY,EAWb,MAAM,yBAAyB,CAAC;AAUjC,OAAuB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAGvE,eAAO,MAAM,kBAAkB,mLAa7B,CAAC;AAwEH,iEAAiE;AACjE,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAkE1E,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"TimePeriodInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/TimePeriodInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAG5D,OAAO,EAEL,YAAY,EAWb,MAAM,yBAAyB,CAAC;AASjC,OAAuB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAGvE,eAAO,MAAM,kBAAkB,mLAa7B,CAAC;AAuEH,iEAAiE;AACjE,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAkE1E,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -41,27 +41,27 @@ const TimePeriodDisplay = (props) => {
     const { rhs } = props;
     if (hasProp(rhs, 'relativeDate')) {
         const { relativeDate: { timePeriod, interval, datePart } } = rhs;
-        return _jsx(Text, { children: formatRelativeDate(t, timePeriod, datePart, interval) }, void 0);
+        return _jsx(Text, { children: formatRelativeDate(t, timePeriod, datePart, interval) });
     }
     const { value, dateFunction } = rhs;
     if (!value) {
-        return _jsx(Text, { children: t('condition_builder_select_placeholder') }, void 0);
+        return _jsx(Text, { children: t('condition_builder_select_placeholder') });
     }
     if (dateFunction === 'MONTHS_OF_YEAR') {
-        return (_jsx(Text, { children: new Date(2021, value - 1, 1).toLocaleString(locale, { month: 'long' }) }, void 0));
+        return (_jsx(Text, { children: new Date(2021, value - 1, 1).toLocaleString(locale, { month: 'long' }) }));
     }
     if (dateFunction === 'DAYS_OF_MONTH') {
         return (_jsx(Text, { children: t('condition_builder_day_number_of_month', [value], {
                 count: Number(value),
                 pluralType: 'ordinal'
-            }) }, void 0));
+            }) }));
     }
     if (dateFunction === 'DAYS_OF_WEEK') {
         return (
         // Choosing Feb-2021 as it starts on a Monday
-        _jsx(Text, { children: new Date(2021, 1, value).toLocaleString(locale, { weekday: 'long' }) }, void 0));
+        _jsx(Text, { children: new Date(2021, 1, value).toLocaleString(locale, { weekday: 'long' }) }));
     }
-    return _jsx(DateTimeDisplay, { value: value, variant: dateDisplayVariants[dateFunction] }, void 0);
+    return _jsx(DateTimeDisplay, { value: value, variant: dateDisplayVariants[dateFunction] });
 };
 /** Renders a button that opens up TimePeriodMenu in a Popover */
 const TimePeriodInput = (props) => {
@@ -81,9 +81,9 @@ const TimePeriodInput = (props) => {
         if (e.key === 'Escape')
             hidePopup(); // Call the method when Escape key is pressed
     };
-    return (_jsxs(_Fragment, { children: [_jsx(StyledOpenerButton, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, hasError: status === 'error', name: 'time-period-button', children: _jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 1 }, item: { grow: 1 }, children: [_jsx(EllipsisLabel, { children: _jsx(TimePeriodDisplay, { rhs: rhs }, void 0) }, void 0), _jsx(Icon, { name: isOpen ? 'times' : 'calendar' }, void 0)] }, void 0) }, void 0), status === 'error' && (_jsx(StyledFormFieldInfo, { status: 'error', children: hasProp(rhs, 'relativeDate')
+    return (_jsxs(_Fragment, { children: [_jsx(StyledOpenerButton, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, hasError: status === 'error', name: 'time-period-button', children: _jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 1 }, item: { grow: 1 }, children: [_jsx(EllipsisLabel, { children: _jsx(TimePeriodDisplay, { rhs: rhs }) }), _jsx(Icon, { name: isOpen ? 'times' : 'calendar' })] }) }), status === 'error' && (_jsx(StyledFormFieldInfo, { status: 'error', children: hasProp(rhs, 'relativeDate')
                     ? t('condition_builder_invalid_relative_date')
-                    : t('condition_builder_invalid_time_period') }, void 0)), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', style: { width: '40ch' }, children: _jsx(Flex, { container: { pad: 1 }, children: _jsx(TimePeriodMenu, { rhs: rhs, fieldType: fieldType, onChange: onChange, dateFunctionsList: dateFunctionsList, status: status }, void 0) }, void 0) }, void 0)] }, void 0));
+                    : t('condition_builder_invalid_time_period') })), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', style: { width: '40ch' }, children: _jsx(Flex, { container: { pad: 1 }, children: _jsx(TimePeriodMenu, { rhs: rhs, fieldType: fieldType, onChange: onChange, dateFunctionsList: dateFunctionsList, status: status }) }) })] }));
 };
 export default TimePeriodInput;
 //# sourceMappingURL=TimePeriodInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TimePeriodInput.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/TimePeriodInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  ForwardProps,\n  Icon,\n  Popover,\n  Text,\n  useElement,\n  useOuterEvent,\n  useConfiguration,\n  useI18n,\n  hasProp,\n  Button,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport { StyledFormFieldInfo } from '@pega/cosmos-react-core/lib/components/FormField/FormField';\nimport DateTimeDisplay, {\n  DateTimeVariant\n} from '@pega/cosmos-react-core/lib/components/DateTime/DateTimeDisplay';\n\nimport { RhsWithDateFunction, RhsWithRelativeDate } from '../ConditionBuilder.types';\nimport { formatRelativeDate } from '../core/formatter';\nimport { DateFunction } from '../core/types';\n\nimport TimePeriodMenu, { TimePeriodMenuProps } from './TimePeriodMenu';\n\n// Custom styles for the button to match the designs\nexport const StyledOpenerButton = styled(Button)(props => {\n  const { 'border-radius': baseBorderRadius } = props.theme.base;\n  const { 'form-control': formControl } = props.theme.components;\n  const { 'status-color': errorColor } = props.theme.components['form-field'].error;\n\n  return css`\n    width: 100%;\n    padding: 0 ${formControl.padding};\n    color: ${formControl['foreground-color']};\n    border-radius: calc(${baseBorderRadius} * ${formControl['border-radius']});\n    background-color: ${formControl['background-color']};\n    border-color: ${props.hasError ? errorColor : formControl['border-color']};\n  `;\n});\nStyledOpenerButton.defaultProps = defaultThemeProp;\n\nconst dateDisplayVariants: Record<\n  Exclude<DateFunction, 'MONTHS_OF_YEAR' | 'DAYS_OF_MONTH' | 'DAYS_OF_WEEK'>,\n  DateTimeVariant\n> = {\n  YEARS: 'year',\n  QUARTERS: 'quarteryear',\n  MONTHS: 'monthyear',\n  WEEKS: 'week',\n  DAYS: 'date',\n  HOURS: 'datetime'\n};\n\nconst EllipsisLabel = styled.div`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\n/** Display for the selected time period value */\nconst TimePeriodDisplay: FunctionComponent<{ rhs: RhsWithDateFunction | RhsWithRelativeDate }> =\n  (props: { rhs: RhsWithDateFunction | RhsWithRelativeDate }) => {\n    const { locale } = useConfiguration();\n    const t = useI18n();\n    const { rhs } = props;\n\n    if (hasProp(rhs, 'relativeDate')) {\n      const {\n        relativeDate: { timePeriod, interval, datePart }\n      } = rhs;\n      return <Text>{formatRelativeDate(t, timePeriod, datePart, interval)}</Text>;\n    }\n\n    const { value, dateFunction } = rhs;\n\n    if (!value) {\n      return <Text>{t('condition_builder_select_placeholder')}</Text>;\n    }\n\n    if (dateFunction === 'MONTHS_OF_YEAR') {\n      return (\n        <Text>\n          {new Date(2021, (value as number) - 1, 1).toLocaleString(locale, { month: 'long' })}\n        </Text>\n      );\n    }\n\n    if (dateFunction === 'DAYS_OF_MONTH') {\n      return (\n        <Text>\n          {t('condition_builder_day_number_of_month', [value], {\n            count: Number(value),\n            pluralType: 'ordinal'\n          })}\n        </Text>\n      );\n    }\n\n    if (dateFunction === 'DAYS_OF_WEEK') {\n      return (\n        // Choosing Feb-2021 as it starts on a Monday\n        <Text>\n          {new Date(2021, 1, value as number).toLocaleString(locale, { weekday: 'long' })}\n        </Text>\n      );\n    }\n\n    return <DateTimeDisplay value={value} variant={dateDisplayVariants[dateFunction]} />;\n  };\n\n/** Renders a button that opens up TimePeriodMenu in a Popover */\nconst TimePeriodInput: FunctionComponent<TimePeriodMenuProps & ForwardProps> = (\n  props: TimePeriodMenuProps\n) => {\n  const { rhs, onChange, dateFunctionsList, status, fieldType } = props;\n  const t = useI18n();\n\n  // Ref for the opener button\n  const buttonRef = useRef(null);\n\n  // Set up a Popover for the controls\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopup = () => {\n    if (isOpen) setIsOpen(false);\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopup); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopup(); // Call the method when Escape key is pressed\n  };\n\n  return (\n    <>\n      <StyledOpenerButton\n        ref={buttonRef}\n        aria-haspopup\n        aria-expanded={isOpen}\n        onClick={() => setIsOpen(!isOpen)}\n        onKeyDown={hideOnEscape}\n        hasError={status === 'error'}\n        name='time-period-button'\n      >\n        <Flex container={{ justify: 'between', alignItems: 'center', gap: 1 }} item={{ grow: 1 }}>\n          <EllipsisLabel>\n            <TimePeriodDisplay rhs={rhs} />\n          </EllipsisLabel>\n          <Icon name={isOpen ? 'times' : 'calendar'} />\n        </Flex>\n      </StyledOpenerButton>\n\n      {status === 'error' && (\n        <StyledFormFieldInfo status='error'>\n          {hasProp(rhs, 'relativeDate')\n            ? t('condition_builder_invalid_relative_date')\n            : t('condition_builder_invalid_time_period')}\n        </StyledFormFieldInfo>\n      )}\n\n      <Popover\n        show={isOpen}\n        ref={setPopoverEl}\n        target={buttonRef.current}\n        placement='bottom-start'\n        style={{ width: '40ch' }}\n      >\n        <Flex container={{ pad: 1 }}>\n          <TimePeriodMenu\n            rhs={rhs}\n            fieldType={fieldType}\n            onChange={onChange}\n            dateFunctionsList={dateFunctionsList}\n            status={status}\n          />\n        </Flex>\n      </Popover>\n    </>\n  );\n};\n\nexport default TimePeriodInput;\n"]}
+{"version":3,"file":"TimePeriodInput.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/TimePeriodInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  ForwardProps,\n  Icon,\n  Popover,\n  Text,\n  useElement,\n  useOuterEvent,\n  useConfiguration,\n  useI18n,\n  hasProp,\n  Button,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport { StyledFormFieldInfo } from '@pega/cosmos-react-core/lib/components/FormField/FormField';\nimport DateTimeDisplay from '@pega/cosmos-react-core/lib/components/DateTime/DateTimeDisplay';\nimport { DateTimeVariant } from '@pega/cosmos-react-core/lib/components/DateTime/DateTime.types';\n\nimport { RhsWithDateFunction, RhsWithRelativeDate } from '../ConditionBuilder.types';\nimport { formatRelativeDate } from '../core/formatter';\nimport { DateFunction } from '../core/types';\n\nimport TimePeriodMenu, { TimePeriodMenuProps } from './TimePeriodMenu';\n\n// Custom styles for the button to match the designs\nexport const StyledOpenerButton = styled(Button)(props => {\n  const { 'border-radius': baseBorderRadius } = props.theme.base;\n  const { 'form-control': formControl } = props.theme.components;\n  const { 'status-color': errorColor } = props.theme.components['form-field'].error;\n\n  return css`\n    width: 100%;\n    padding: 0 ${formControl.padding};\n    color: ${formControl['foreground-color']};\n    border-radius: calc(${baseBorderRadius} * ${formControl['border-radius']});\n    background-color: ${formControl['background-color']};\n    border-color: ${props.hasError ? errorColor : formControl['border-color']};\n  `;\n});\nStyledOpenerButton.defaultProps = defaultThemeProp;\n\nconst dateDisplayVariants: Record<\n  Exclude<DateFunction, 'MONTHS_OF_YEAR' | 'DAYS_OF_MONTH' | 'DAYS_OF_WEEK'>,\n  DateTimeVariant\n> = {\n  YEARS: 'year',\n  QUARTERS: 'quarteryear',\n  MONTHS: 'monthyear',\n  WEEKS: 'week',\n  DAYS: 'date',\n  HOURS: 'datetime'\n};\n\nconst EllipsisLabel = styled.div`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\n/** Display for the selected time period value */\nconst TimePeriodDisplay: FunctionComponent<{\n  rhs: RhsWithDateFunction | RhsWithRelativeDate;\n}> = (props: { rhs: RhsWithDateFunction | RhsWithRelativeDate }) => {\n  const { locale } = useConfiguration();\n  const t = useI18n();\n  const { rhs } = props;\n\n  if (hasProp(rhs, 'relativeDate')) {\n    const {\n      relativeDate: { timePeriod, interval, datePart }\n    } = rhs;\n    return <Text>{formatRelativeDate(t, timePeriod, datePart, interval)}</Text>;\n  }\n\n  const { value, dateFunction } = rhs;\n\n  if (!value) {\n    return <Text>{t('condition_builder_select_placeholder')}</Text>;\n  }\n\n  if (dateFunction === 'MONTHS_OF_YEAR') {\n    return (\n      <Text>\n        {new Date(2021, (value as number) - 1, 1).toLocaleString(locale, { month: 'long' })}\n      </Text>\n    );\n  }\n\n  if (dateFunction === 'DAYS_OF_MONTH') {\n    return (\n      <Text>\n        {t('condition_builder_day_number_of_month', [value], {\n          count: Number(value),\n          pluralType: 'ordinal'\n        })}\n      </Text>\n    );\n  }\n\n  if (dateFunction === 'DAYS_OF_WEEK') {\n    return (\n      // Choosing Feb-2021 as it starts on a Monday\n      <Text>{new Date(2021, 1, value as number).toLocaleString(locale, { weekday: 'long' })}</Text>\n    );\n  }\n\n  return <DateTimeDisplay value={value} variant={dateDisplayVariants[dateFunction]} />;\n};\n\n/** Renders a button that opens up TimePeriodMenu in a Popover */\nconst TimePeriodInput: FunctionComponent<TimePeriodMenuProps & ForwardProps> = (\n  props: TimePeriodMenuProps\n) => {\n  const { rhs, onChange, dateFunctionsList, status, fieldType } = props;\n  const t = useI18n();\n\n  // Ref for the opener button\n  const buttonRef = useRef(null);\n\n  // Set up a Popover for the controls\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopup = () => {\n    if (isOpen) setIsOpen(false);\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopup); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopup(); // Call the method when Escape key is pressed\n  };\n\n  return (\n    <>\n      <StyledOpenerButton\n        ref={buttonRef}\n        aria-haspopup\n        aria-expanded={isOpen}\n        onClick={() => setIsOpen(!isOpen)}\n        onKeyDown={hideOnEscape}\n        hasError={status === 'error'}\n        name='time-period-button'\n      >\n        <Flex container={{ justify: 'between', alignItems: 'center', gap: 1 }} item={{ grow: 1 }}>\n          <EllipsisLabel>\n            <TimePeriodDisplay rhs={rhs} />\n          </EllipsisLabel>\n          <Icon name={isOpen ? 'times' : 'calendar'} />\n        </Flex>\n      </StyledOpenerButton>\n\n      {status === 'error' && (\n        <StyledFormFieldInfo status='error'>\n          {hasProp(rhs, 'relativeDate')\n            ? t('condition_builder_invalid_relative_date')\n            : t('condition_builder_invalid_time_period')}\n        </StyledFormFieldInfo>\n      )}\n\n      <Popover\n        show={isOpen}\n        ref={setPopoverEl}\n        target={buttonRef.current}\n        placement='bottom-start'\n        style={{ width: '40ch' }}\n      >\n        <Flex container={{ pad: 1 }}>\n          <TimePeriodMenu\n            rhs={rhs}\n            fieldType={fieldType}\n            onChange={onChange}\n            dateFunctionsList={dateFunctionsList}\n            status={status}\n          />\n        </Flex>\n      </Popover>\n    </>\n  );\n};\n\nexport default TimePeriodInput;\n\n// Suppresses\n"]}

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

@@ -5,7 +5,7 @@ import RelativeDateMenu from './RelativeDateMenu';
 /** A menu with controls to select a Time period value on RHS */
 const TimePeriodMenu = (props) => {
     const { rhs, onChange, dateFunctionsList, status, fieldType } = props;
-    return (_jsxs(Flex, { container: { direction: 'column', rowGap: 0.5 }, item: { grow: 1 }, children: [hasProp(rhs, 'dateFunction') && (_jsx(DateFunctionMenu, { rhs: rhs, onChange: onChange, dateFunctionsList: dateFunctionsList, status: status }, void 0)), hasProp(rhs, 'relativeDate') && (_jsx(RelativeDateMenu, { rhs: rhs, fieldType: fieldType, onChange: onChange, status: status }, void 0))] }, void 0));
+    return (_jsxs(Flex, { container: { direction: 'column', rowGap: 0.5 }, item: { grow: 1 }, children: [hasProp(rhs, 'dateFunction') && (_jsx(DateFunctionMenu, { rhs: rhs, onChange: onChange, dateFunctionsList: dateFunctionsList, status: status })), hasProp(rhs, 'relativeDate') && (_jsx(RelativeDateMenu, { rhs: rhs, fieldType: fieldType, onChange: onChange, status: status }))] }));
 };
 export default TimePeriodMenu;
 //# sourceMappingURL=TimePeriodMenu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TimePeriodMenu.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/TimePeriodMenu.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAa,IAAI,EAAgB,OAAO,EAAkB,MAAM,yBAAyB,CAAC;AAKjG,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAmBlD,gEAAgE;AAChE,MAAM,cAAc,GAA0D,CAC5E,KAA0B,EAC1B,EAAE;IACF,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACtE,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aACrE,OAAO,CAAC,GAAG,EAAE,cAAc,CAAC,IAAI,CAC/B,KAAC,gBAAgB,IACf,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,iBAAiB,EAAE,iBAAiB,EACpC,MAAM,EAAE,MAAM,WACd,CACH,EACA,OAAO,CAAC,GAAG,EAAE,cAAc,CAAC,IAAI,CAC/B,KAAC,gBAAgB,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,WAAI,CACzF,YACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["// cspell:ignore words DDTHH\nimport { FunctionComponent } from 'react';\n\nimport { BaseProps, Flex, ForwardProps, hasProp, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport { RhsWithDateFunction, RhsWithRelativeDate } from '../ConditionBuilder.types';\nimport { DateFunction, FieldType } from '../core/types';\n\nimport DateFunctionMenu from './DateFunctionMenu';\nimport RelativeDateMenu from './RelativeDateMenu';\n\nexport interface TimePeriodMenuProps extends BaseProps, NoChildrenProp {\n  /** Rhs for the condition */\n  rhs: RhsWithDateFunction | RhsWithRelativeDate;\n\n  /** Callback for any modifications to the Rhs */\n  onChange: (rhs: RhsWithDateFunction | RhsWithRelativeDate) => void;\n\n  /** List of date functions enabled for the current LHS field type */\n  dateFunctionsList: DateFunction[];\n\n  /** FieldType of the LHS Field. Will only be DATE_TIME or DATE_ONLY */\n  fieldType: FieldType;\n\n  /** Used to indicate any errors on the control */\n  status?: 'error';\n}\n\n/** A menu with controls to select a Time period value on RHS */\nconst TimePeriodMenu: FunctionComponent<TimePeriodMenuProps & ForwardProps> = (\n  props: TimePeriodMenuProps\n) => {\n  const { rhs, onChange, dateFunctionsList, status, fieldType } = props;\n  return (\n    <Flex container={{ direction: 'column', rowGap: 0.5 }} item={{ grow: 1 }}>\n      {hasProp(rhs, 'dateFunction') && (\n        <DateFunctionMenu\n          rhs={rhs}\n          onChange={onChange}\n          dateFunctionsList={dateFunctionsList}\n          status={status}\n        />\n      )}\n      {hasProp(rhs, 'relativeDate') && (\n        <RelativeDateMenu rhs={rhs} fieldType={fieldType} onChange={onChange} status={status} />\n      )}\n    </Flex>\n  );\n};\n\nexport default TimePeriodMenu;\n"]}
+{"version":3,"file":"TimePeriodMenu.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/TimePeriodMenu.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAa,IAAI,EAAgB,OAAO,EAAkB,MAAM,yBAAyB,CAAC;AAKjG,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAmBlD,gEAAgE;AAChE,MAAM,cAAc,GAA0D,CAC5E,KAA0B,EAC1B,EAAE;IACF,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACtE,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aACrE,OAAO,CAAC,GAAG,EAAE,cAAc,CAAC,IAAI,CAC/B,KAAC,gBAAgB,IACf,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,iBAAiB,EAAE,iBAAiB,EACpC,MAAM,EAAE,MAAM,GACd,CACH,EACA,OAAO,CAAC,GAAG,EAAE,cAAc,CAAC,IAAI,CAC/B,KAAC,gBAAgB,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAI,CACzF,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["// cspell:ignore words DDTHH\nimport { FunctionComponent } from 'react';\n\nimport { BaseProps, Flex, ForwardProps, hasProp, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport { RhsWithDateFunction, RhsWithRelativeDate } from '../ConditionBuilder.types';\nimport { DateFunction, FieldType } from '../core/types';\n\nimport DateFunctionMenu from './DateFunctionMenu';\nimport RelativeDateMenu from './RelativeDateMenu';\n\nexport interface TimePeriodMenuProps extends BaseProps, NoChildrenProp {\n  /** Rhs for the condition */\n  rhs: RhsWithDateFunction | RhsWithRelativeDate;\n\n  /** Callback for any modifications to the Rhs */\n  onChange: (rhs: RhsWithDateFunction | RhsWithRelativeDate) => void;\n\n  /** List of date functions enabled for the current LHS field type */\n  dateFunctionsList: DateFunction[];\n\n  /** FieldType of the LHS Field. Will only be DATE_TIME or DATE_ONLY */\n  fieldType: FieldType;\n\n  /** Used to indicate any errors on the control */\n  status?: 'error';\n}\n\n/** A menu with controls to select a Time period value on RHS */\nconst TimePeriodMenu: FunctionComponent<TimePeriodMenuProps & ForwardProps> = (\n  props: TimePeriodMenuProps\n) => {\n  const { rhs, onChange, dateFunctionsList, status, fieldType } = props;\n  return (\n    <Flex container={{ direction: 'column', rowGap: 0.5 }} item={{ grow: 1 }}>\n      {hasProp(rhs, 'dateFunction') && (\n        <DateFunctionMenu\n          rhs={rhs}\n          onChange={onChange}\n          dateFunctionsList={dateFunctionsList}\n          status={status}\n        />\n      )}\n      {hasProp(rhs, 'relativeDate') && (\n        <RelativeDateMenu rhs={rhs} fieldType={fieldType} onChange={onChange} status={status} />\n      )}\n    </Flex>\n  );\n};\n\nexport default TimePeriodMenu;\n"]}

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

@@ -0,0 +1,21 @@
+import { FunctionComponent } from 'react';
+import { BaseProps, ForwardProps, NoChildrenProp, ComboBoxProps } from '@pega/cosmos-react-core';
+import { Field } from '../ConditionBuilder.types';
+import { Comparator } from '../core/types';
+interface ValueSelectorProps extends BaseProps, NoChildrenProp {
+    mode: ComboBoxProps['mode'];
+    /** Previous selection */
+    values: string[] | string;
+    /** Current selected LHS */
+    selectedField: Field;
+    /** Current selected comparator */
+    comparator: Comparator;
+    /** Callback for changes */
+    onChange: (selection: string[] | string) => void;
+    /** Used to indicate any errors on the control */
+    status?: 'error';
+}
+/** A control for selecting multiple values using checkboxes in an overlay */
+declare const ValueSelector: FunctionComponent<ValueSelectorProps & ForwardProps>;
+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":"AAAA,OAAO,EAAE,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAExE,OAAO,EAEL,SAAS,EACT,YAAY,EAIZ,cAAc,EACd,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,UAAU,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IAC5D,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5B,yBAAyB;IACzB,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;IAE1B,2BAA2B;IAC3B,aAAa,EAAE,KAAK,CAAC;IAErB,kCAAkC;IAClC,UAAU,EAAE,UAAU,CAAC;IAEvB,2BAA2B;IAC3B,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,MAAM,KAAK,IAAI,CAAC;IAEjD,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,6EAA6E;AAC7E,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAiHvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,90 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useMemo, useEffect } from 'react';
+import { useI18n, ComboBox, createStringMatcher, useAfterInitialEffect } from '@pega/cosmos-react-core';
+/** A control for selecting multiple values using checkboxes in an overlay */
+const ValueSelector = ({ values, selectedField, comparator, onChange, status, mode }) => {
+    const t = useI18n();
+    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(opt => matcher.test(opt));
+        }
+        return opts.map(option => {
+            return {
+                id: option,
+                primary: option,
+                selected: selections.includes(option)
+            };
+        });
+    }, [options, filterValue, selections]);
+    useAfterInitialEffect(() => {
+        onChange(selections);
+    }, [selections]);
+    useEffect(() => {
+        if (!selectedField) {
+            return;
+        }
+        const { possibleValues } = selectedField;
+        if (typeof possibleValues === 'function') {
+            setLoading(true);
+            possibleValues({ searchString: filterValue, comparator, lhs: selectedField }).then(response => {
+                setOptions(response);
+                setLoading(false);
+            });
+        }
+        else if (Array.isArray(possibleValues)) {
+            setOptions(possibleValues);
+        }
+        else {
+            setOptions([]);
+        }
+    }, [filterValue]);
+    useEffect(() => setFilterValue(''), [selectedField, comparator]);
+    const getSelections = () => {
+        if (typeof selections === 'string') {
+            return {
+                items: { id: selections, text: selections }
+            };
+        }
+        if (selections.length > 0) {
+            return {
+                items: selections.map(s => ({ id: s, text: s })),
+                onRemove: (value) => {
+                    setSelections(cur => {
+                        const current = cur;
+                        return current.filter(selection => selection !== value);
+                    });
+                }
+            };
+        }
+        return undefined;
+    };
+    return (_jsx(ComboBox, { mode: mode, label: t('condition_builder_possible_values_label'), labelHidden: true, 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);
+        }, menu: {
+            items: itemsToRender,
+            onItemClick: option => {
+                if (mode === 'single-select') {
+                    setSelections(option);
+                }
+                else {
+                    setSelections(cur => {
+                        const current = cur;
+                        return current.includes(option)
+                            ? current.filter(selection => selection !== option)
+                            : [...cur, option];
+                    });
+                }
+            },
+            loading
+        }, selected: getSelections(), status: status, info: status === 'error' ? t('condition_builder_empty_selection_error_text') : undefined }));
+};
+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 { FunctionComponent, useState, useMemo, useEffect } from 'react';\n\nimport {\n  useI18n,\n  BaseProps,\n  ForwardProps,\n  ComboBox,\n  createStringMatcher,\n  useAfterInitialEffect,\n  NoChildrenProp,\n  ComboBoxProps\n} from '@pega/cosmos-react-core';\n\nimport { Field } from '../ConditionBuilder.types';\nimport { Comparator } from '../core/types';\n\ninterface ValueSelectorProps extends BaseProps, NoChildrenProp {\n  mode: ComboBoxProps['mode'];\n  /** Previous selection */\n  values: string[] | string;\n\n  /** Current selected LHS */\n  selectedField: Field;\n\n  /** Current selected comparator */\n  comparator: Comparator;\n\n  /** Callback for changes */\n  onChange: (selection: string[] | string) => void;\n\n  /** Used to indicate any errors on the control */\n  status?: 'error';\n}\n\n/** A control for selecting multiple values using checkboxes in an overlay */\nconst ValueSelector: FunctionComponent<ValueSelectorProps & ForwardProps> = ({\n  values,\n  selectedField,\n  comparator,\n  onChange,\n  status,\n  mode\n}: ValueSelectorProps) => {\n  const t = useI18n();\n  const [selections, setSelections] = useState<string[] | string>(values);\n  const [filterValue, setFilterValue] = useState('');\n  const [options, setOptions] = useState<string[]>([]);\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(opt => matcher.test(opt));\n    }\n\n    return opts.map(option => {\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    const { possibleValues } = selectedField;\n    if (typeof possibleValues === 'function') {\n      setLoading(true);\n      possibleValues({ searchString: filterValue, comparator, lhs: selectedField }).then(\n        response => {\n          setOptions(response);\n          setLoading(false);\n        }\n      );\n    } else if (Array.isArray(possibleValues)) {\n      setOptions(possibleValues);\n    } else {\n      setOptions([]);\n    }\n  }, [filterValue]);\n\n  useEffect(() => setFilterValue(''), [selectedField, comparator]);\n\n  const getSelections = () => {\n    if (typeof selections === 'string') {\n      return {\n        items: { id: selections, text: selections }\n      };\n    }\n    if (selections.length > 0) {\n      return {\n        items: selections.map(s => ({ id: s, text: s })),\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      mode={mode}\n      label={t('condition_builder_possible_values_label')}\n      labelHidden\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      menu={{\n        items: itemsToRender,\n        onItemClick: option => {\n          if (mode === 'single-select') {\n            setSelections(option);\n          } else {\n            setSelections(cur => {\n              const current = cur as string[];\n              return current.includes(option)\n                ? current.filter(selection => selection !== option)\n                : [...cur, option];\n            });\n          }\n        },\n        loading\n      }}\n      selected={getSelections()}\n      status={status}\n      info={status === 'error' ? t('condition_builder_empty_selection_error_text') : undefined}\n    />\n  );\n};\n\nexport default ValueSelector;\n"]}

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,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,CAkQlE,CAAC;AACF,eAAe,WAAW,CAAC"}

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

@@ -1,8 +1,8 @@
 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 } from '@pega/cosmos-react-core';
 import { convertTimeValueToMs, convertMsToTimeValue } from '../core/time-utils';
-import MultiValueSelector from './MultiValueSelector';
+import ValueSelector from './ValueSelector';
 import FieldSelector from './FieldSelector';
 import RhsModeSwitch from './RhsModeSwitch';
 import TimePeriodInput from './TimePeriodInput';
@@ -137,12 +137,12 @@ const RhsControls = (props) => {
     }, [rhs]);
     // If a field is not selected or if the comparator doesn't need any RHS, don't render anything
     if (rhs === undefined) {
-        return _jsx("div", {}, void 0); // Rendering a placeholder div to keep the layout consistent
+        return _jsx("div", {}); // Rendering a placeholder div to keep the layout consistent
     }
     if (matchingField === undefined) {
         // 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", {}, void 0); // Rendering a placeholder div to keep the layout consistent
+        return _jsx("div", {}); // Rendering a placeholder div to keep the layout consistent
     }
     const fieldType = matchingField.type;
     // If errors should be indicated inline, validate the current rhs
@@ -150,10 +150,8 @@ const RhsControls = (props) => {
     if (indicateErrors) {
         showError = !isValidRhs(rhs, 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
     // Handle changes from the Value-selector
@@ -211,9 +209,9 @@ 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 }, void 0), 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 }, void 0) }, void 0)), 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" }, void 0), possibleValues.map(value => (_jsx(Option, { value: value, children: value }, value)))] }, void 0)), 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 }, void 0)), fieldType === 'NUMBER' && (_jsx(NumericInput, { rhs: rhs, onChange: onChange, status: showError ? 'error' : undefined }, void 0)), 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 }, void 0)), fieldType === 'DATE_ONLY' && (_jsx(DateInput, { value: rhs.value, onChange: handleDateValueChange, status: showError ? 'error' : undefined, info: showError ? 'Invalid date' : '', label: '-', labelHidden: true }, void 0)), fieldType === 'DATE_TIME' && (_jsx(DateTimeInput, { value: rhs.value !== '' ? rhs.value : undefined, onChange: handleDateValueChange, status: showError ? 'error' : undefined, info: showError ? 'Invalid date' : '', label: '-', labelHidden: true }, void 0))] }, void 0)), (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 }, void 0) }, void 0)), hasProp(rhs, 'values') && (_jsxs(Flex, { item: { grow: 1 }, children: [useValueSelector && (_jsx(MultiValueSelector, { values: rhs.values, options: possibleValues, onChange: handleValueSelection, status: showError ? 'error' : undefined }, void 0)), !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
-                     }, void 0))] }, void 0))] }, void 0));
+        }, 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 && (_jsx(ValueSelector, { mode: 'single-select', values: rhs.value.toString(), selectedField: matchingField, comparator: comparator, onChange: handleValueSelection, status: showError ? 'error' : undefined, info: showError ? 'No selection' : undefined })), fieldType === 'TEXT' && !useValueSelector && (_jsx(Input, { value: rhs.value.toString(), 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(ValueSelector, { mode: 'multi-select', values: rhs.values.map(String), selectedField: matchingField, comparator: comparator, 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
+                     }))] }))] }));
 };
 export default RhsControls;
 //# sourceMappingURL=index.js.map