npm - @pega/cosmos-react-condition-builder - Versions diffs - 2.1.5 → 3.0.0-dev.10.1 - Mend

@pega/cosmos-react-condition-builder 2.1.5 → 3.0.0-dev.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (38) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RelativeDateMenu.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/RelativeDateMenu.tsx"],"names":[],"mappings":"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~~WACK~~,EACT,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,aAC7C,YAAY,CAAC,UAAU,KAAK,SAAS,IAAI,CACxC,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,YAC1B,KAAC,WAAW,OACN,mBAAmB,EACvB,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,EACP,WAAW,EAAE,KAAK,EAClB,QAAQ,EAAE,oBAAoB,~~WAC9B~~,~~WACG~~,CACR,EACD,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,YAC3E,KAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,6BAA6B,CAAC,EACvC,KAAK,EAAE,YAAY,CAAC,QAAQ,EAC5B,QAAQ,EAAE,oBAAoB,YAE7B,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CACxB,KAAC,MAAM,IAAY,KAAK,EAAE,CAAC,CAAC,EAAE,YAC3B,CAAC,CAAC,KAAK,IADG,CAAC,CAAC,EAAE,CAER,CACV,CAAC,~~WACK~~,~~WACJ~~,~~YACF~~,~~YACN~~,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","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"]}
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"]}

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

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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"]}

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

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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,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 CHANGED Viewed

@@ -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