@pega/cosmos-react-condition-builder 4.0.0-dev.2.0 → 4.0.0-dev.21.0

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

@@ -1,8 +1,6 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '@pega/cosmos-react-core';
 import { TimePeriodMenuProps } from './TimePeriodMenu';
-export declare const StyledOpenerButton: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-/** Renders a button that opens up TimePeriodMenu in a Popover */
 declare const TimePeriodInput: FunctionComponent<TimePeriodMenuProps & ForwardProps>;
 export default TimePeriodInput;
 //# sourceMappingURL=TimePeriodInput.d.ts.map

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;AASjC,OAAuB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAGvE,eAAO,MAAM,kBAAkB,mLAa7B,CAAC;AA6EH,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,EAAY,MAAM,OAAO,CAAC;AAEpD,OAAO,EAEL,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAQjC,OAAuB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAyEvE,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA0D1E,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -1,93 +1,109 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { Flex, Icon, Popover, Text, useElement, useOuterEvent, useConfiguration, useI18n, hasProp, Button, defaultThemeProp } from '@pega/cosmos-react-core';
-import { StyledFormFieldInfo } from '@pega/cosmos-react-core/lib/components/FormField/FormField';
-import DateTimeDisplay from '@pega/cosmos-react-core/lib/components/DateTime/DateTimeDisplay';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Flex, useConfiguration, useI18n, hasProp, CompositeInput, parseToDate, useAfterInitialEffect } from '@pega/cosmos-react-core';
+import { formatDateTime } from '@pega/cosmos-react-core/lib/components/DateTime/utils';
 import { formatRelativeDate } from '../core/formatter';
 import TimePeriodMenu from './TimePeriodMenu';
-// Custom styles for the button to match the designs
-export const StyledOpenerButton = styled(Button)(props => {
-    const { 'border-radius': baseBorderRadius } = props.theme.base;
-    const { 'form-control': formControl } = props.theme.components;
-    const { 'status-color': errorColor } = props.theme.components['form-field'].error;
-    return css `
-    width: 100%;
-    padding: 0 ${formControl.padding};
-    color: ${formControl['foreground-color']};
-    border-radius: calc(${baseBorderRadius} * ${formControl['border-radius']});
-    background-color: ${formControl['background-color']};
-    border-color: ${props.hasError ? errorColor : formControl['border-color']};
-  `;
-});
-StyledOpenerButton.defaultProps = defaultThemeProp;
 const dateDisplayVariants = {
     YEARS: 'year',
     QUARTERS: 'quarteryear',
     MONTHS: 'monthyear',
     WEEKS: 'week',
     DAYS: 'date',
-    HOURS: 'datetime'
+    HOURS: 'datetime',
+    MINUTES: 'datetime',
+    SECONDS: 'datetime'
 };
-const EllipsisLabel = styled.div `
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-/** Display for the selected time period value */
-const TimePeriodDisplay = (props) => {
-    const { locale } = useConfiguration();
-    const t = useI18n();
-    const { rhs } = props;
-    if (hasProp(rhs, 'relativeDate')) {
-        const { relativeDate: { timePeriod, interval, datePart } } = rhs;
-        return _jsx(Text, { children: formatRelativeDate(t, timePeriod, datePart, interval) });
+/** Creating display value for the selected time period value */
+const createDisplayValue = (rhsValue, t, locale) => {
+    if (hasProp(rhsValue, 'relativeDate')) {
+        const { relativeDate: { timePeriod, interval, datePart } } = rhsValue;
+        return formatRelativeDate(t, timePeriod, datePart, interval);
     }
-    const { value, dateFunction } = rhs;
+    const { value, dateFunction } = rhsValue;
     if (!value && !(dateFunction === 'HOURS_OF_DAY' && value === 0)) {
-        return _jsx(Text, { children: t('condition_builder_select_placeholder') });
+        return t('condition_builder_select_placeholder');
     }
     switch (dateFunction) {
         case 'MONTHS_OF_YEAR':
-            return (_jsx(Text, { children: new Date(2021, value - 1, 1).toLocaleString(locale, { month: 'long' }) }));
+            return new Date(2021, value - 1, 1).toLocaleString(locale, { month: 'long' });
         case 'DAYS_OF_MONTH':
-            return (_jsx(Text, { children: t('condition_builder_day_number_of_month', [value], {
-                    count: Number(value),
-                    pluralType: 'ordinal'
-                }) }));
+            return t('condition_builder_day_number_of_month', [value], {
+                count: Number(value),
+                pluralType: 'ordinal'
+            });
         case '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' }) }));
+            return new Date(2021, 1, value).toLocaleString(locale, { weekday: 'long' });
         case 'HOURS_OF_DAY':
-            return (
-            // Displaying hour of the day
-            _jsx(Text, { children: t('condition_builder_hour_number_of_day', [`${value.toString().padStart(2, '0')}:00`]) }));
-        default:
-            return _jsx(DateTimeDisplay, { value: value, variant: dateDisplayVariants[dateFunction] });
+            return t('condition_builder_hour_number_of_day', [`${value.toString().padStart(2, '0')}:00`]);
+        case 'MINUTES':
+        case 'SECONDS': {
+            const result = dateFunction === 'SECONDS' ? t('seconds_text') : t('minutes_text');
+            let output = formatDateTime(parseToDate(value), {
+                t,
+                locale,
+                format: dateFunction === 'SECONDS' ? 'long' : 'short',
+                variant: dateDisplayVariants[dateFunction],
+                timeZone: 'UTC'
+            });
+            output += ` (${result.toLowerCase()})`;
+            return output;
+        }
+        default: {
+            return formatDateTime(parseToDate(value), {
+                t,
+                locale,
+                format: 'short',
+                variant: dateDisplayVariants[dateFunction],
+                timeZone: 'UTC'
+            });
+        }
     }
 };
-/** Renders a button that opens up TimePeriodMenu in a Popover */
 const TimePeriodInput = (props) => {
     const { rhs, onChange, dateFunctionsList, status, fieldType } = props;
     const t = useI18n();
-    // Ref for the opener button
-    const buttonRef = useRef(null);
-    // Set up a Popover for the controls
-    const [isOpen, setIsOpen] = useState(false);
-    const [popoverEl, setPopoverEl] = useElement(null);
-    const hidePopup = () => {
-        if (isOpen)
-            setIsOpen(false);
-    };
-    useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopup); // Call the method on clicking outside these elements
-    const hideOnEscape = (e) => {
-        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 }) }), _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') })), _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 }) }) })] }));
+    const { locale } = useConfiguration();
+    const [newRhsValue, setNewRhsValue] = useState(rhs);
+    let info;
+    if (status === 'error') {
+        info = hasProp(rhs, 'relativeDate')
+            ? t('condition_builder_invalid_relative_date')
+            : t('condition_builder_invalid_time_period');
+    }
+    useAfterInitialEffect(() => {
+        setNewRhsValue(rhs);
+    }, [rhs]);
+    return (_jsx(Flex, { container: { direction: 'column', pad: [0, 0, 0.25] }, children: _jsx(CompositeInput, { value: createDisplayValue(rhs, t, locale), label: t('condition_builder_value_label'), status: status, info: info, dialog: {
+                renderer: TimePeriodMenu,
+                rendererProps: {
+                    rhs: newRhsValue,
+                    fieldType,
+                    onChange: setNewRhsValue,
+                    dateFunctionsList,
+                    status
+                },
+                onApply: ({ close }) => {
+                    if (newRhsValue)
+                        onChange(newRhsValue);
+                    close();
+                },
+                onCancel: ({ close }) => {
+                    close();
+                }
+            }, onClear: () => {
+                if (hasProp(newRhsValue, 'relativeDate')) {
+                    onChange({
+                        relativeDate: {
+                            timePeriod: 'CURRENT',
+                            datePart: 'DAYS'
+                        }
+                    });
+                }
+                else if (hasProp(newRhsValue, 'dateFunction')) {
+                    onChange({ value: '', dateFunction: dateFunctionsList[0] });
+                }
+            } }) }));
 };
 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 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' | 'HOURS_OF_DAY'>,\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 && !(dateFunction === 'HOURS_OF_DAY' && value === 0)) {\n    return <Text>{t('condition_builder_select_placeholder')}</Text>;\n  }\n\n  switch (dateFunction) {\n    case 'MONTHS_OF_YEAR':\n      return (\n        <Text>\n          {new Date(2021, (value as number) - 1, 1).toLocaleString(locale, { month: 'long' })}\n        </Text>\n      );\n    case '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    case '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    case 'HOURS_OF_DAY':\n      return (\n        // Displaying hour of the day\n        <Text>\n          {t('condition_builder_hour_number_of_day', [`${value.toString().padStart(2, '0')}:00`])}\n        </Text>\n      );\n    default:\n      return <DateTimeDisplay value={value} variant={dateDisplayVariants[dateFunction]} />;\n  }\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"]}
+{"version":3,"file":"TimePeriodInput.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/TimePeriodInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useState } from 'react';\n\nimport {\n  Flex,\n  ForwardProps,\n  useConfiguration,\n  useI18n,\n  hasProp,\n  CompositeInput,\n  parseToDate,\n  useAfterInitialEffect,\n  TranslationFunction,\n  TranslationPack,\n  ExcludeStrict\n} from '@pega/cosmos-react-core';\nimport { DateTimeVariant } from '@pega/cosmos-react-core/lib/components/DateTime/DateTime.types';\nimport { formatDateTime } from '@pega/cosmos-react-core/lib/components/DateTime/utils';\n\nimport { RhsWithDateFunction, RhsWithRelativeDate } from '../ConditionBuilder.types';\nimport { formatRelativeDate } from '../core/formatter';\nimport { DateFunction } from '../core/types';\n\nimport TimePeriodMenu, { TimePeriodMenuProps } from './TimePeriodMenu';\n\nconst dateDisplayVariants: Record<\n  ExcludeStrict<DateFunction, 'MONTHS_OF_YEAR' | 'DAYS_OF_MONTH' | 'DAYS_OF_WEEK' | 'HOURS_OF_DAY'>,\n  DateTimeVariant\n> = {\n  YEARS: 'year',\n  QUARTERS: 'quarteryear',\n  MONTHS: 'monthyear',\n  WEEKS: 'week',\n  DAYS: 'date',\n  HOURS: 'datetime',\n  MINUTES: 'datetime',\n  SECONDS: 'datetime'\n};\n\n/** Creating display value for the selected time period value */\nconst createDisplayValue = (\n  rhsValue: RhsWithDateFunction | RhsWithRelativeDate,\n  t: TranslationFunction<TranslationPack>,\n  locale: string\n) => {\n  if (hasProp(rhsValue, 'relativeDate')) {\n    const {\n      relativeDate: { timePeriod, interval, datePart }\n    } = rhsValue;\n    return formatRelativeDate(t, timePeriod, datePart, interval);\n  }\n\n  const { value, dateFunction } = rhsValue;\n\n  if (!value && !(dateFunction === 'HOURS_OF_DAY' && value === 0)) {\n    return t('condition_builder_select_placeholder');\n  }\n\n  switch (dateFunction) {\n    case 'MONTHS_OF_YEAR':\n      return new Date(2021, (value as number) - 1, 1).toLocaleString(locale, { month: 'long' });\n\n    case 'DAYS_OF_MONTH':\n      return t('condition_builder_day_number_of_month', [value], {\n        count: Number(value),\n        pluralType: 'ordinal'\n      });\n    case 'DAYS_OF_WEEK':\n      return new Date(2021, 1, value as number).toLocaleString(locale, { weekday: 'long' });\n    case 'HOURS_OF_DAY':\n      return t('condition_builder_hour_number_of_day', [`${value.toString().padStart(2, '0')}:00`]);\n    case 'MINUTES':\n    case 'SECONDS': {\n      const result = dateFunction === 'SECONDS' ? t('seconds_text') : t('minutes_text');\n      let output = formatDateTime(parseToDate(value), {\n        t,\n        locale,\n        format: dateFunction === 'SECONDS' ? 'long' : 'short',\n        variant: dateDisplayVariants[dateFunction],\n        timeZone: 'UTC'\n      });\n      output += ` (${result.toLowerCase()})`;\n      return output;\n    }\n    default: {\n      return formatDateTime(parseToDate(value), {\n        t,\n        locale,\n        format: 'short',\n        variant: dateDisplayVariants[dateFunction],\n        timeZone: 'UTC'\n      });\n    }\n  }\n};\n\nconst TimePeriodInput: FunctionComponent<TimePeriodMenuProps & ForwardProps> = (\n  props: TimePeriodMenuProps\n) => {\n  const { rhs, onChange, dateFunctionsList, status, fieldType } = props;\n  const t = useI18n();\n  const { locale } = useConfiguration();\n  const [newRhsValue, setNewRhsValue] = useState<TimePeriodMenuProps['rhs']>(rhs);\n\n  let info;\n  if (status === 'error') {\n    info = hasProp(rhs, 'relativeDate')\n      ? t('condition_builder_invalid_relative_date')\n      : t('condition_builder_invalid_time_period');\n  }\n\n  useAfterInitialEffect(() => {\n    setNewRhsValue(rhs);\n  }, [rhs]);\n\n  return (\n    <Flex container={{ direction: 'column', pad: [0, 0, 0.25] }}>\n      <CompositeInput\n        value={createDisplayValue(rhs, t, locale)}\n        label={t('condition_builder_value_label')}\n        status={status}\n        info={info}\n        dialog={{\n          renderer: TimePeriodMenu,\n          rendererProps: {\n            rhs: newRhsValue,\n            fieldType,\n            onChange: setNewRhsValue,\n            dateFunctionsList,\n            status\n          },\n          onApply: ({ close }) => {\n            if (newRhsValue) onChange(newRhsValue);\n            close();\n          },\n          onCancel: ({ close }) => {\n            close();\n          }\n        }}\n        onClear={() => {\n          if (hasProp(newRhsValue, 'relativeDate')) {\n            onChange({\n              relativeDate: {\n                timePeriod: 'CURRENT',\n                datePart: 'DAYS'\n              }\n            });\n          } else if (hasProp(newRhsValue, 'dateFunction')) {\n            onChange({ value: '', dateFunction: dateFunctionsList[0] });\n          }\n        }}\n      />\n    </Flex>\n  );\n};\n\nexport default TimePeriodInput;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"TimePeriodMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/TimePeriodMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAQ,YAAY,EAAW,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEjG,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAKxD,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc;IACpE,4BAA4B;IAC5B,GAAG,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IAE/C,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,mBAAmB,GAAG,mBAAmB,KAAK,IAAI,CAAC;IAEnE,oEAAoE;IACpE,iBAAiB,EAAE,YAAY,EAAE,CAAC;IAElC,sEAAsE;IACtE,SAAS,EAAE,SAAS,CAAC;IAErB,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,gEAAgE;AAChE,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAmBzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"TimePeriodMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/TimePeriodMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAQ,YAAY,EAAW,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEjG,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAMxD,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc;IACpE,4BAA4B;IAC5B,GAAG,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IAE/C,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,mBAAmB,GAAG,mBAAmB,KAAK,IAAI,CAAC;IAEnE,oEAAoE;IACpE,iBAAiB,EAAE,YAAY,EAAE,CAAC;IAElC,sEAAsE;IACtE,SAAS,EAAE,SAAS,CAAC;IAErB,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,gEAAgE;AAChE,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAuBzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex, hasProp } from '@pega/cosmos-react-core';
+import { StyledTimePeriodContainer } from '../ConditionBuilder.styles';
 import DateFunctionMenu from './DateFunctionMenu';
 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 })), hasProp(rhs, 'relativeDate') && (_jsx(RelativeDateMenu, { rhs: rhs, fieldType: fieldType, onChange: onChange, status: status }))] }));
+    return (_jsxs(Flex, { as: StyledTimePeriodContainer, 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,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"]}
+{"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;AAIjG,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAEvE,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,IACH,EAAE,EAAE,yBAAyB,EAC7B,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,EAC/C,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAEhB,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: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';\nimport { StyledTimePeriodContainer } from '../ConditionBuilder.styles';\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\n      as={StyledTimePeriodContainer}\n      container={{ direction: 'column', rowGap: 0.5 }}\n      item={{ grow: 1 }}\n    >\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

@@ -1,8 +1,9 @@
-import { Dispatch, SetStateAction } from 'react';
-import { BaseProps, NoChildrenProp, ComboBoxProps } from '@pega/cosmos-react-core';
+import { Dispatch, SetStateAction, Ref } from 'react';
+import { BaseProps, NoChildrenProp, ComboBoxProps, HandleValue } from '@pega/cosmos-react-core';
 import { LeafCondition, ParameterValue, ValueSelection } from '../ConditionBuilder.types';
 import { Comparator } from '../core/types';
 interface ValueSelectorProps<T extends {
+    id: string;
     possibleValues?: ValueSelection<T>;
 }> extends BaseProps, NoChildrenProp {
     mode: ComboBoxProps['mode'];
@@ -32,10 +33,13 @@ interface ValueSelectorProps<T extends {
     info?: ComboBoxProps['info'];
     /** sets status and info */
     setApiError?: Dispatch<SetStateAction<string | null>>;
+    /** Imperative handle */
+    handle?: Ref<HandleValue>;
 }
 /** A control for selecting multiple values using checkboxes in an overlay */
 declare const ValueSelector: <F extends object & {
+    id: string;
     possibleValues?: ValueSelection<F> | undefined;
-}>({ values, selectedField, comparator, rhs, onChange, onBlur, onClear, status, mode, parameters, placeholder, label, info, setApiError }: ValueSelectorProps<F>) => JSX.Element;
+}>({ values, selectedField, comparator, rhs, onChange, onBlur, onClear, status, mode, parameters, placeholder, label, info, setApiError, handle }: ValueSelectorProps<F>) => JSX.Element;
 export default ValueSelector;
 //# sourceMappingURL=ValueSelector.d.ts.map

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

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

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

@@ -1,38 +1,51 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useMemo, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback, useImperativeHandle } from 'react';
 import { useI18n, ComboBox, createStringMatcher, useAfterInitialEffect, hasProp, Button, Icon } from '@pega/cosmos-react-core';
 /** A control for selecting multiple values using checkboxes in an overlay */
-const ValueSelector = ({ values, selectedField, comparator, rhs, onChange, onBlur, onClear, status, mode, parameters, placeholder, label, info, setApiError }) => {
+const ValueSelector = ({ values, selectedField, comparator, rhs, onChange, onBlur, onClear, status, mode, parameters, placeholder, label, info, setApiError, handle }) => {
     const t = useI18n();
     const inputRef = useRef(null);
     const [selections, setSelections] = useState(values);
     const [filterValue, setFilterValue] = useState('');
     const [options, setOptions] = useState([]);
+    const [filterOptions, setFilterOptions] = useState([]);
     const [loading, setLoading] = useState(false);
-    const itemsToRender = useMemo(() => {
-        let opts = options;
-        if (filterValue) {
-            const matcher = createStringMatcher(filterValue, 'boundary');
-            opts = opts.filter(option => {
-                if (typeof option === 'object')
-                    return matcher.test(option.primary);
-                return matcher.test(option);
-            });
-        }
-        return opts.map(option => {
+    const [hasMore, setHasMore] = useState(true);
+    const [items, setItems] = useState([]);
+    const itemsToRender = (item) => {
+        return item.map(option => {
             if (typeof option === 'object') {
                 return {
                     ...option,
-                    selected: selections.includes(option.id)
+                    selected: Array.isArray(selections)
+                        ? selections.includes(option.id)
+                        : selections === option.id
                 };
             }
             return {
                 id: option,
                 primary: option,
-                selected: selections.includes(option)
+                selected: Array.isArray(selections) ? selections.includes(option) : selections === option
             };
         });
-    }, [options, filterValue, selections]);
+    };
+    useEffect(() => {
+        const updatedItems = items.map(item => {
+            const result = Array.isArray(selections)
+                ? selections.includes(item.id)
+                : selections === item.id;
+            return { ...item, selected: result };
+        });
+        setItems(updatedItems);
+    }, [selections]);
+    useEffect(() => {
+        const matcher = createStringMatcher(filterValue);
+        setFilterOptions(options.filter(option => {
+            if (typeof option === 'object')
+                return matcher.test(option.primary);
+            return matcher.test(option);
+        }));
+    }, [filterValue, options]);
     useAfterInitialEffect(() => {
         onChange(selections);
     }, [selections]);
@@ -75,7 +88,7 @@ const ValueSelector = ({ values, selectedField, comparator, rhs, onChange, onBlu
             subscribed = false;
             setApiError?.(null);
         };
-    }, [filterValue, selectedField, comparator]);
+    }, [filterValue, selectedField.id, comparator]);
     useEffect(() => setFilterValue(''), [selectedField, comparator]);
     const getSelections = () => {
         if (typeof selections === 'string') {
@@ -106,16 +119,53 @@ const ValueSelector = ({ values, selectedField, comparator, rhs, onChange, onBlu
         }
         return undefined;
     };
-    return (_jsx(ComboBox, { ref: inputRef, mode: mode, label: label ?? t('condition_builder_possible_values_label'), labelHidden: !label, placeholder: placeholder ??
+    useEffect(() => {
+        if (filterValue !== '') {
+            setItems(itemsToRender(filterOptions.slice(0, 10)));
+        }
+        else {
+            setItems(itemsToRender(options.slice(0, 10)));
+        }
+    }, [options, filterOptions]);
+    const loadMore = useCallback(() => {
+        if (!loading) {
+            setLoading(true);
+            let totalItem;
+            if (filterOptions.length > 0)
+                totalItem = filterOptions;
+            else
+                totalItem = options;
+            const remItems = totalItem.length - items.length;
+            let newItemsLength = 10;
+            if (remItems <= newItemsLength) {
+                setHasMore(false);
+                newItemsLength = remItems;
+            }
+            setLoading(false);
+            setItems(prev => {
+                return [
+                    ...prev,
+                    ...itemsToRender(totalItem.slice(items.length, items.length + newItemsLength))
+                ];
+            });
+        }
+    }, [options, loading, filterOptions, items, hasMore]);
+    useImperativeHandle(handle, () => ({
+        clear: () => {
+            setSelections([]);
+        }
+    }), []);
+    return (_jsx(ComboBox, { ref: inputRef, mode: mode, label: label ?? t('condition_builder_possible_values_label'), placeholder: placeholder ??
             (mode === 'single-select'
                 ? t('condition_builder_single_selection_text_default')
                 : t('condition_builder_multi_selection_text_default')), value: filterValue, onChange: e => {
             setFilterValue(e.target.value);
+            setHasMore(true);
         }, onBlur: () => {
             onBlur?.(selections);
             setFilterValue('');
         }, menu: {
-            items: itemsToRender,
+            items,
             onItemClick: id => {
                 setFilterValue('');
                 if (mode === 'single-select') {
@@ -130,7 +180,8 @@ const ValueSelector = ({ values, selectedField, comparator, rhs, onChange, onBlu
                     });
                 }
             },
-            loading
+            loading,
+            loadMore: hasMore ? loadMore : undefined
         }, selected: getSelections(), status: status, info: info, actions: onClear &&
             selections.length > 0 && (_jsx(Button, { icon: true, variant: 'simple', label: t('clear'), onClick: () => {
                 setSelections([]);

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

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