@pega/cosmos-react-condition-builder 5.0.0-dev.4.8 → 5.0.0-dev.5.0

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

@@ -0,0 +1,57 @@
+import { FunctionComponent, Ref } from 'react';
+import { BaseProps, HandleValue, ForwardProps } from '@pega/cosmos-react-core';
+import { LeafCondition, Field, DateFunctionsByType } from './ConditionBuilder.types';
+import { ComparatorsByType, RHSType } from './core/types';
+/** Determines the default condition object for a given LHS value */
+export declare function getInitConditionForLhs(lhs: LeafCondition['lhs'], fields: Field[], validRhsTypes: Set<RHSType>, validComparators?: ComparatorsByType[], dateFunctions?: DateFunctionsByType): LeafCondition;
+/**
+ * Verifies if all the values in the condition are valid.
+ * NOTES:
+ * - This is intended to be used only on conditions emitted by the components in this package.
+ * - If a condition is manually constructed outside these components, this utility could miss some malformed conditions.
+ */
+export declare function isValidCondition(condition: LeafCondition, fields: Field[], trimValues?: boolean): boolean;
+/** Type definition for the input props of AtomicCondition */
+export interface AtomicConditionProps extends BaseProps {
+    /** Condition to use in the component */
+    condition: LeafCondition;
+    /** Metadata (data-model) for the Fields to use in the Condition */
+    fields: Field[];
+    /** Used to enable inline error indicators on invalid inputs */
+    indicateErrors: boolean;
+    /** (Optional) Lookup used to limit the Comparators allowed in the Condition. */
+    validComparators?: ComparatorsByType[];
+    /** Callback for any modifications to the Condition */
+    onChange?: (newCondition: LeafCondition, status?: 'error') => void;
+    /** Callback fired when the condition changes. */
+    onBlur?: (newCondition?: LeafCondition) => void;
+    /** Item flow direction. Defaults to 'row' */
+    itemDirection?: 'row' | 'column';
+    /**
+     * Allows presenting the LHS as a readonly text, input or hidden. Defaults presenting as 'input'.
+     * NOTE: Make sure that a valid LHS is passed in the 'condition'
+     */
+    lhsMode?: 'input' | 'label' | 'hidden';
+    /** Restricts RHS values to only specified types of values.
+     * DEFAULT: Set(['LITERAL', 'FIELD']).
+     * WARNING: There are LHS/Comparator pairings that require specific RHS types. Please be mindful of
+     *          these incompatibilities when limiting RHS value types using this prop. We do not support
+     *          limiting RHS field types to incompatible types and it will result in a validation error
+     *          if you do so. The pairings referred to here are as follows:
+     *              - BOOLEAN LHS Fields coupled with "EQ" or "NEQ" comparators, will always yield a Field RHS
+     *              - Any LHS Fields coupled with "IN" or "NOT_IN" comparators, will always yield a Literal RHS (Comma separated list)
+     *          If you would like to limit RHS value types and avoid these incompatibilities, you will need to exclude these
+     *          comparators using the validComparators prop.
+     */
+    validRhsTypes?: Set<RHSType>;
+    /** (Optional) When enabling 'DATE_FUNCTION's via `validRhsTypes`, pass this to specify which all date functions are applicable per field type */
+    dateFunctions?: DateFunctionsByType;
+    /** Ref forwarded to the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+    /** Imperative handle */
+    handle?: Ref<HandleValue>;
+}
+/** A controlled component for Atomic Conditions */
+declare const AtomicCondition: FunctionComponent<AtomicConditionProps & ForwardProps>;
+export default AtomicCondition;
+//# sourceMappingURL=AtomicCondition.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicCondition.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/AtomicCondition.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAGjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAEf,OAAO,EAML,SAAS,EACT,WAAW,EACX,YAAY,EAIb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAIrF,OAAO,EAAc,iBAAiB,EAAa,OAAO,EAAE,MAAM,cAAc,CAAC;AAoDjF,oEAAoE;AACpE,wBAAgB,sBAAsB,CACpC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,EACzB,MAAM,EAAE,KAAK,EAAE,EACf,aAAa,EAAE,GAAG,CAAC,OAAO,CAAC,EAC3B,gBAAgB,CAAC,EAAE,iBAAiB,EAAE,EACtC,aAAa,CAAC,EAAE,mBAAmB,GAClC,aAAa,CAcf;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,KAAK,EAAE,EACf,UAAU,GAAE,OAAe,GAC1B,OAAO,CAST;AAED,6DAA6D;AAC7D,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,wCAAwC;IACxC,SAAS,EAAE,aAAa,CAAC;IAEzB,mEAAmE;IACnE,MAAM,EAAE,KAAK,EAAE,CAAC;IAEhB,+DAA+D;IAC/D,cAAc,EAAE,OAAO,CAAC;IAExB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAEvC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAEnE,iDAAiD;IACjD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAEhD,6CAA6C;IAC7C,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAEjC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IAEvC;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IAE7B,iJAAiJ;IACjJ,aAAa,CAAC,EAAE,mBAAmB,CAAC;IAEpC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,wBAAwB;IACxB,MAAM,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CAC3B;AAED,mDAAmD;AACnD,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAiL3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/ConditionBuilder/AtomicCondition.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useImperativeHandle } from 'react';
+import { Grid, Select, Option, useI18n, hasProp, useConsolidatedRef, useFocusWithin, useAfterInitialEffect } from '@pega/cosmos-react-core';
+import { getItem } from './core/utils';
+import FieldSelector from './RhsControls/FieldSelector';
+import RhsControls, { getDefaultRhs, isValidRhs } from './RhsControls';
+import getComparatorOptions from './core/comparators';
+import { StyledAtomicCondition } from './ConditionBuilder.styles';
+// Returns field-type for a given field-name
+function getFieldType(fieldName, fields) {
+    const matchingField = getItem(fields, fieldName);
+    return matchingField && hasProp(matchingField, 'type') ? matchingField.type : undefined;
+}
+// Returns display label for a given field-name
+function getFieldLabel(fieldName, fields) {
+    const matchingField = getItem(fields, fieldName);
+    return matchingField?.primary;
+}
+/**
+ * Upon changing the comparator, checks if the old RHS is valid for the new comparator
+ * NOTE: This works under the assumption that the LHS doesn't change
+ */
+function isRhsValidForComparator(rhs, comparator) {
+    if (rhs === undefined) {
+        return ['IS_NULL', 'IS_NOT_NULL', 'IS_TRUE', 'IS_FALSE'].includes(comparator);
+    }
+    if (hasProp(rhs, 'values')) {
+        return ['IN', 'NOT_IN'].includes(comparator);
+    }
+    if (hasProp(rhs, 'parameterId')) {
+        return ['EQ', 'NEQ'].includes(comparator);
+    }
+    if (hasProp(rhs, 'start')) {
+        return ['BTW', 'NOT_BTW'].includes(comparator);
+    }
+    // `rhs.field` and `rhs.value` cases
+    return [
+        'EQ',
+        'NEQ',
+        'GT',
+        'GTE',
+        'LT',
+        'LTE',
+        'STARTS_WITH',
+        'NOT_STARTS_WITH',
+        'ENDS_WITH',
+        'NOT_ENDS_WITH',
+        'CONTAINS',
+        'NOT_CONTAINS'
+    ].includes(comparator);
+}
+/** Determines the default condition object for a given LHS value */
+export function getInitConditionForLhs(lhs, fields, validRhsTypes, validComparators, dateFunctions) {
+    let comparator;
+    let rhs;
+    if (lhs.field === '') {
+        // If the empty option is selected, reset the comparator and rhs to their default values
+        comparator = 'IS_NOT_NULL';
+        rhs = undefined;
+    }
+    else {
+        const newFieldType = getFieldType(lhs.field, fields);
+        comparator = getComparatorOptions(newFieldType, validComparators)[0].id; // Find the applicable comparators and select the first among them
+        rhs = getDefaultRhs(newFieldType, comparator, validRhsTypes, dateFunctions);
+    }
+    return { lhs, comparator, rhs };
+}
+/**
+ * Verifies if all the values in the condition are valid.
+ * NOTES:
+ * - This is intended to be used only on conditions emitted by the components in this package.
+ * - If a condition is manually constructed outside these components, this utility could miss some malformed conditions.
+ */
+export function isValidCondition(condition, fields, trimValues = false) {
+    // If no field is yet selected on the LHS
+    if (condition.lhs.field === '') {
+        return false;
+    }
+    // If a field is present on the LHS, check if the RHS is valid
+    // No need to check the comparator since the comparator is always assigned a valid value
+    const fieldType = getFieldType(condition.lhs.field, fields);
+    return isValidRhs(condition.rhs, condition.lhs, fields, fieldType, trimValues);
+}
+/** A controlled component for Atomic Conditions */
+const AtomicCondition = forwardRef(function AtomicCondition({ condition, fields, indicateErrors, validComparators, onChange, onBlur, itemDirection, lhsMode = 'input', validRhsTypes = new Set(['LITERAL', 'FIELD']), dateFunctions, handle, ...restProps }, ref) {
+    const t = useI18n();
+    // stores condition form state
+    const [state, setState] = useState(condition);
+    // ref needed to handle use case of onChange and onBlur being triggered at the same time
+    // state is not updated by the time blur is invoked, ref is always set to newest value
+    const newCondition = useRef(condition);
+    const fieldType = getFieldType(condition.lhs.field, fields); // Can be `undefined` if no match or if no previous field
+    const comparatorOptions = fieldType
+        ? getComparatorOptions(fieldType, validComparators)
+        : [{ id: '', label: t('condition_builder_select_placeholder') }];
+    useAfterInitialEffect(() => {
+        setState(condition);
+    }, [condition]);
+    const onFocusChange = (focused) => {
+        if (!focused) {
+            // newCondition is returned, as it stores newest value
+            onBlur?.(newCondition.current && isValidCondition(newCondition.current, fields, true)
+                ? newCondition.current
+                : undefined);
+        }
+    };
+    const containerRef = useConsolidatedRef(ref);
+    useFocusWithin([containerRef], onFocusChange);
+    // Handle condition update
+    const handleConditionChange = (updatedCondition, status) => {
+        newCondition.current = updatedCondition;
+        // new condition is returned with status to allow recognizing errors and avoiding clearing wrong values from input
+        onChange?.(updatedCondition, status);
+    };
+    // Handle change in the field-selector
+    const handleFieldChange = (id) => {
+        const lhs = { field: id };
+        const initCondition = getInitConditionForLhs(lhs, fields, validRhsTypes, validComparators, dateFunctions); // Determine comparator and rhs for the new lhs
+        handleConditionChange(initCondition);
+    };
+    // Handle change in the comparator
+    const handleComparatorChange = (e) => {
+        if (e.target.value === '') {
+            return; // The option is shown only when an lhs is not yet selected. Ignore this selection for those cases
+        }
+        const comparator = e.target.value;
+        const rhs = isRhsValidForComparator(condition.rhs, comparator)
+            ? { ...condition.rhs } // Duplicating rhs to avoid using source object as it can be mutated later.
+            : getDefaultRhs(fieldType, comparator, validRhsTypes, dateFunctions);
+        handleConditionChange({ ...condition, comparator, rhs });
+    };
+    // Handle change in the RHS
+    const handleRHSChange = (rhs, status) => {
+        handleConditionChange({ ...condition, rhs }, status);
+    };
+    const rhsHandle = useRef(null);
+    const clear = () => {
+        rhsHandle.current?.clear();
+        if (newCondition.current) {
+            handleConditionChange(getInitConditionForLhs(state.lhs, fields, validRhsTypes, validComparators, dateFunctions));
+        }
+    };
+    useImperativeHandle(handle, () => ({
+        clear
+    }), [clear]);
+    const lhsLabel = getFieldLabel(condition.lhs.field, fields);
+    return (
+    // Using minmax() to get equal widths: https://stackoverflow.com/a/61240964/4247448
+    _jsx(StyledAtomicCondition, { ...restProps, name: lhsMode === 'label' ? lhsLabel : undefined, "aria-label": lhsMode === 'hidden' ? lhsLabel : undefined, children: _jsxs(Grid, { sm: {
+                container: {
+                    cols: itemDirection === 'column'
+                        ? 'minmax(0, 1fr)'
+                        : `repeat(${lhsMode !== 'input' ? 2 : 3}, minmax(0,1fr))`
+                }
+            }, container: {
+                justifyItems: 'stretch',
+                colGap: 0.5,
+                rowGap: 0.5
+            }, ref: containerRef, children: [lhsMode === 'input' && (_jsx(FieldSelector, { value: state.lhs.field, onChange: handleFieldChange, fields: fields, status: indicateErrors && state.lhs.field === '' ? 'error' : undefined, info: indicateErrors && state.lhs.field === ''
+                        ? t('condition_builder_condition_select_info_default')
+                        : undefined })), _jsx(Select, { value: state.comparator, onChange: handleComparatorChange, name: 'comparator', label: t('condition_builder_comparator_label'), children: comparatorOptions.map(option => (_jsx(Option, { value: option.id, children: option.label }, option.id))) }), _jsx(RhsControls, { lhs: state.lhs, comparator: state.comparator, rhs: state.rhs, fields: fields, onChange: handleRHSChange, indicateErrors: indicateErrors, validRhsTypes: validRhsTypes, dateFunctions: dateFunctions, itemDirection: itemDirection || 'row', handle: rhsHandle })] }) }));
+});
+export default AtomicCondition;
+//# sourceMappingURL=AtomicCondition.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AtomicCondition.js","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/AtomicCondition.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  ChangeEvent,\n  forwardRef,\n  Ref,\n  useRef,\n  useState,\n  PropsWithoutRef,\n  useImperativeHandle\n} from 'react';\n\nimport {\n  Grid,\n  Select,\n  Option,\n  useI18n,\n  hasProp,\n  BaseProps,\n  HandleValue,\n  ForwardProps,\n  useConsolidatedRef,\n  useFocusWithin,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\n\nimport { getItem } from './core/utils';\nimport { LeafCondition, Field, DateFunctionsByType } from './ConditionBuilder.types';\nimport FieldSelector from './RhsControls/FieldSelector';\nimport RhsControls, { getDefaultRhs, isValidRhs } from './RhsControls';\nimport getComparatorOptions from './core/comparators';\nimport { Comparator, ComparatorsByType, FieldType, RHSType } from './core/types';\nimport { StyledAtomicCondition } from './ConditionBuilder.styles';\n\n// Returns field-type for a given field-name\nfunction getFieldType(fieldName: string, fields: Field[]): FieldType | undefined {\n  const matchingField = getItem(fields, fieldName);\n  return matchingField && hasProp(matchingField, 'type') ? matchingField.type : undefined;\n}\n\n// Returns display label for a given field-name\nfunction getFieldLabel(fieldName: string, fields: Field[]): string | undefined {\n  const matchingField = getItem(fields, fieldName);\n  return matchingField?.primary;\n}\n\n/**\n * Upon changing the comparator, checks if the old RHS is valid for the new comparator\n * NOTE: This works under the assumption that the LHS doesn't change\n */\nfunction isRhsValidForComparator(rhs: LeafCondition['rhs'], comparator: Comparator): boolean {\n  if (rhs === undefined) {\n    return ['IS_NULL', 'IS_NOT_NULL', 'IS_TRUE', 'IS_FALSE'].includes(comparator);\n  }\n  if (hasProp(rhs, 'values')) {\n    return ['IN', 'NOT_IN'].includes(comparator);\n  }\n\n  if (hasProp(rhs, 'parameterId')) {\n    return ['EQ', 'NEQ'].includes(comparator);\n  }\n\n  if (hasProp(rhs, 'start')) {\n    return ['BTW', 'NOT_BTW'].includes(comparator);\n  }\n\n  // `rhs.field` and `rhs.value` cases\n  return [\n    'EQ',\n    'NEQ',\n    'GT',\n    'GTE',\n    'LT',\n    'LTE',\n    'STARTS_WITH',\n    'NOT_STARTS_WITH',\n    'ENDS_WITH',\n    'NOT_ENDS_WITH',\n    'CONTAINS',\n    'NOT_CONTAINS'\n  ].includes(comparator);\n}\n\n/** Determines the default condition object for a given LHS value */\nexport function getInitConditionForLhs(\n  lhs: LeafCondition['lhs'],\n  fields: Field[],\n  validRhsTypes: Set<RHSType>,\n  validComparators?: ComparatorsByType[],\n  dateFunctions?: DateFunctionsByType\n): LeafCondition {\n  let comparator: Comparator;\n  let rhs: LeafCondition['rhs'];\n  if (lhs.field === '') {\n    // If the empty option is selected, reset the comparator and rhs to their default values\n    comparator = 'IS_NOT_NULL';\n    rhs = undefined;\n  } else {\n    const newFieldType = getFieldType(lhs.field, fields) as FieldType;\n    comparator = getComparatorOptions(newFieldType, validComparators)[0].id; // Find the applicable comparators and select the first among them\n    rhs = getDefaultRhs(newFieldType, comparator, validRhsTypes, dateFunctions);\n  }\n\n  return { lhs, comparator, rhs };\n}\n\n/**\n * Verifies if all the values in the condition are valid.\n * NOTES:\n * - This is intended to be used only on conditions emitted by the components in this package.\n * - If a condition is manually constructed outside these components, this utility could miss some malformed conditions.\n */\nexport function isValidCondition(\n  condition: LeafCondition,\n  fields: Field[],\n  trimValues: boolean = false\n): boolean {\n  // If no field is yet selected on the LHS\n  if (condition.lhs.field === '') {\n    return false;\n  }\n  // If a field is present on the LHS, check if the RHS is valid\n  // No need to check the comparator since the comparator is always assigned a valid value\n  const fieldType = getFieldType(condition.lhs.field, fields);\n  return isValidRhs(condition.rhs, condition.lhs, fields, fieldType, trimValues);\n}\n\n/** Type definition for the input props of AtomicCondition */\nexport interface AtomicConditionProps extends BaseProps {\n  /** Condition to use in the component */\n  condition: LeafCondition;\n\n  /** Metadata (data-model) for the Fields to use in the Condition */\n  fields: Field[];\n\n  /** Used to enable inline error indicators on invalid inputs */\n  indicateErrors: boolean;\n\n  /** (Optional) Lookup used to limit the Comparators allowed in the Condition. */\n  validComparators?: ComparatorsByType[];\n\n  /** Callback for any modifications to the Condition */\n  onChange?: (newCondition: LeafCondition, status?: 'error') => void;\n\n  /** Callback fired when the condition changes. */\n  onBlur?: (newCondition?: LeafCondition) => void;\n\n  /** Item flow direction. Defaults to 'row' */\n  itemDirection?: 'row' | 'column';\n\n  /**\n   * Allows presenting the LHS as a readonly text, input or hidden. Defaults presenting as 'input'.\n   * NOTE: Make sure that a valid LHS is passed in the 'condition'\n   */\n  lhsMode?: 'input' | 'label' | 'hidden';\n\n  /** Restricts RHS values to only specified types of values.\n   * DEFAULT: Set(['LITERAL', 'FIELD']).\n   * WARNING: There are LHS/Comparator pairings that require specific RHS types. Please be mindful of\n   *          these incompatibilities when limiting RHS value types using this prop. We do not support\n   *          limiting RHS field types to incompatible types and it will result in a validation error\n   *          if you do so. The pairings referred to here are as follows:\n   *              - BOOLEAN LHS Fields coupled with \"EQ\" or \"NEQ\" comparators, will always yield a Field RHS\n   *              - Any LHS Fields coupled with \"IN\" or \"NOT_IN\" comparators, will always yield a Literal RHS (Comma separated list)\n   *          If you would like to limit RHS value types and avoid these incompatibilities, you will need to exclude these\n   *          comparators using the validComparators prop.\n   */\n  validRhsTypes?: Set<RHSType>;\n\n  /** (Optional) When enabling 'DATE_FUNCTION's via `validRhsTypes`, pass this to specify which all date functions are applicable per field type */\n  dateFunctions?: DateFunctionsByType;\n\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n  /** Imperative handle */\n  handle?: Ref<HandleValue>;\n}\n\n/** A controlled component for Atomic Conditions */\nconst AtomicCondition: FunctionComponent<AtomicConditionProps & ForwardProps> = forwardRef(\n  function AtomicCondition(\n    {\n      condition,\n      fields,\n      indicateErrors,\n      validComparators,\n      onChange,\n      onBlur,\n      itemDirection,\n      lhsMode = 'input',\n      validRhsTypes = new Set<RHSType>(['LITERAL', 'FIELD']),\n      dateFunctions,\n      handle,\n      ...restProps\n    }: PropsWithoutRef<AtomicConditionProps>,\n    ref: AtomicConditionProps['ref']\n  ) {\n    const t = useI18n();\n\n    // stores condition form state\n    const [state, setState] = useState<LeafCondition>(condition);\n    // ref needed to handle use case of onChange and onBlur being triggered at the same time\n    // state is not updated by the time blur is invoked, ref is always set to newest value\n    const newCondition = useRef(condition);\n\n    const fieldType = getFieldType(condition.lhs.field, fields); // Can be `undefined` if no match or if no previous field\n    const comparatorOptions = fieldType\n      ? getComparatorOptions(fieldType, validComparators)\n      : [{ id: '', label: t('condition_builder_select_placeholder') }];\n\n    useAfterInitialEffect(() => {\n      setState(condition);\n    }, [condition]);\n\n    const onFocusChange = (focused: boolean) => {\n      if (!focused) {\n        // newCondition is returned, as it stores newest value\n        onBlur?.(\n          newCondition.current && isValidCondition(newCondition.current, fields, true)\n            ? newCondition.current\n            : undefined\n        );\n      }\n    };\n\n    const containerRef = useConsolidatedRef(ref);\n    useFocusWithin([containerRef], onFocusChange);\n\n    // Handle condition update\n    const handleConditionChange = (updatedCondition: LeafCondition, status?: 'error') => {\n      newCondition.current = updatedCondition;\n      // new condition is returned with status to allow recognizing errors and avoiding clearing wrong values from input\n      onChange?.(updatedCondition, status);\n    };\n\n    // Handle change in the field-selector\n    const handleFieldChange = (id: string) => {\n      const lhs = { field: id };\n      const initCondition = getInitConditionForLhs(\n        lhs,\n        fields,\n        validRhsTypes,\n        validComparators,\n        dateFunctions\n      ); // Determine comparator and rhs for the new lhs\n      handleConditionChange(initCondition);\n    };\n\n    // Handle change in the comparator\n    const handleComparatorChange = (e: ChangeEvent<HTMLSelectElement>) => {\n      if (e.target.value === '') {\n        return; // The option is shown only when an lhs is not yet selected. Ignore this selection for those cases\n      }\n      const comparator = e.target.value as Comparator;\n      const rhs = isRhsValidForComparator(condition.rhs, comparator)\n        ? ({ ...condition.rhs } as LeafCondition['rhs']) // Duplicating rhs to avoid using source object as it can be mutated later.\n        : getDefaultRhs(fieldType as FieldType, comparator, validRhsTypes, dateFunctions);\n\n      handleConditionChange({ ...condition, comparator, rhs });\n    };\n\n    // Handle change in the RHS\n    const handleRHSChange = (rhs: LeafCondition['rhs'], status?: 'error') => {\n      handleConditionChange({ ...condition, rhs }, status);\n    };\n\n    const rhsHandle = useRef<HandleValue>(null);\n\n    const clear = () => {\n      rhsHandle.current?.clear();\n      if (newCondition.current) {\n        handleConditionChange(\n          getInitConditionForLhs(state.lhs, fields, validRhsTypes, validComparators, dateFunctions)\n        );\n      }\n    };\n\n    useImperativeHandle(\n      handle,\n      () => ({\n        clear\n      }),\n      [clear]\n    );\n\n    const lhsLabel = getFieldLabel(condition.lhs.field, fields);\n\n    return (\n      // Using minmax() to get equal widths: https://stackoverflow.com/a/61240964/4247448\n      <StyledAtomicCondition\n        {...restProps}\n        name={lhsMode === 'label' ? lhsLabel : undefined}\n        aria-label={lhsMode === 'hidden' ? lhsLabel : undefined}\n      >\n        <Grid\n          sm={{\n            container: {\n              cols:\n                itemDirection === 'column'\n                  ? 'minmax(0, 1fr)'\n                  : `repeat(${lhsMode !== 'input' ? 2 : 3}, minmax(0,1fr))`\n            }\n          }}\n          container={{\n            justifyItems: 'stretch',\n            colGap: 0.5,\n            rowGap: 0.5\n          }}\n          ref={containerRef}\n        >\n          {/* LHS selector */}\n          {lhsMode === 'input' && (\n            <FieldSelector\n              value={state.lhs.field}\n              onChange={handleFieldChange}\n              fields={fields}\n              status={indicateErrors && state.lhs.field === '' ? 'error' : undefined}\n              info={\n                indicateErrors && state.lhs.field === ''\n                  ? t('condition_builder_condition_select_info_default')\n                  : undefined\n              }\n            />\n          )}\n\n          {/* Comparator selector */}\n          <Select\n            value={state.comparator}\n            onChange={handleComparatorChange}\n            name='comparator'\n            label={t('condition_builder_comparator_label')}\n          >\n            {comparatorOptions.map(option => (\n              <Option key={option.id} value={option.id}>\n                {option.label}\n              </Option>\n            ))}\n          </Select>\n\n          {/* RHS controls */}\n          <RhsControls\n            lhs={state.lhs}\n            comparator={state.comparator}\n            rhs={state.rhs}\n            fields={fields}\n            onChange={handleRHSChange}\n            indicateErrors={indicateErrors}\n            validRhsTypes={validRhsTypes}\n            dateFunctions={dateFunctions}\n            itemDirection={itemDirection || 'row'}\n            handle={rhsHandle}\n          />\n        </Grid>\n      </StyledAtomicCondition>\n    );\n  }\n);\n\nexport default AtomicCondition;\n"]}

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

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import ConditionBuilderProps from './ConditionBuilder.types';
+declare const ConditionBuilder: FunctionComponent<ConditionBuilderProps & ForwardProps>;
+export default ConditionBuilder;
+//# sourceMappingURL=ConditionBuilder.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionBuilder.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/ConditionBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAOL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,qBAIN,MAAM,0BAA0B,CAAC;AA6BlC,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA6Z7E,CAAC;AAGF,eAAe,gBAAgB,CAAC"}

package/lib/components/ConditionBuilder/ConditionBuilder.js

@@ -0,0 +1,271 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useState, useReducer, useImperativeHandle, useRef, useEffect } from 'react';
+import { Banner, Button, Flex, Icon, Input, MenuButton, hasProp, useI18n, getFocusables, Label, useUID, useLiveLog, AdditionalInfo } from '@pega/cosmos-react-core';
+import AtomicCondition, { isValidCondition } from './AtomicCondition';
+import { splitConditionForBuilder, parseLogicString, disambiguateLogic, isBasicModeApplicable, getBasicModeOperators, getLogicFromBasicMode } from './core/utils';
+import rowsReducer, { INSERT_ROW, UPDATE_ROW, REMOVE_ROW } from './core/rows-reducer';
+import { StyledRowWithSeparator, StyledRow, StyledLabel, StyledConditionBuilder } from './ConditionBuilder.styles';
+// Default props for the builder
+const defaultProps = {
+    condition: {
+        condition: {
+            comparator: 'IS_NOT_NULL',
+            lhs: { field: '' }
+        }
+    }
+};
+// Component for the builder
+const ConditionBuilder = (props) => {
+    const { fields, condition: seedCondition, validComparators, validRhsTypes = new Set(['LITERAL', 'FIELD']), dateFunctions, disallowNOT, handle } = props;
+    // Split the condition tree into a logic-string and a list of condition-rows.
+    const clonedCondition = JSON.parse(JSON.stringify(seedCondition)); // Cloning to avoid modifying the original
+    const { logic: seedLogic, rows: seedRows } = splitConditionForBuilder(clonedCondition);
+    // On load, look to use the Basic-mode if the seed-condition is simple enough
+    const [isBasicMode, setBasicMode] = useState(() => isBasicModeApplicable(clonedCondition));
+    const [operatorsList, setOperatorsList] = useState(() => getBasicModeOperators(seedLogic)); // Operators-list used in Basic-mode to render dropdowns between the rows. NOTE: When in Advanced-mode, this can contain stale values.
+    const [logicString, setLogicString] = useState(seedLogic); // Logic-string used in Advanced-mode. NOTE: When in Basic-mode, this can contain stale values.
+    const [conditionRows, dispatch] = useReducer(rowsReducer, seedRows); // Conditions-rows
+    const [logicError, setLogicError] = useState(null); // Used to indicate errors in the logic string
+    const [showModeWarning, setModeWarning] = useState(false); // Used to warn user about losing information when moving away from Advanced mode
+    const [showErrorIndicators, setErrorIndicators] = useState(false); // Used to enable inline error indicators in the condition rows
+    const enableShading = isBasicMode && operatorsList.includes('AND') && operatorsList.includes('OR'); // In Basic mode, enable shading to indicate grouping only when both operators are present
+    const labelId = useUID();
+    const newOperatorButtonRef = useRef(null);
+    const focusRowRef = useRef(null);
+    const [focusRowIndex, setFocusRowIndex] = useState(null);
+    const bannerHandleRef = useRef(null);
+    const buttonRef = useRef(null);
+    // Upon adding/removing rows in Advanced mode, update the logic string to reflect the change in labels
+    // NOTE: The input is updated only if the previous logicString was simple enough
+    const updateLogicString = (actionType) => {
+        const numNewRows = actionType === INSERT_ROW ? conditionRows.length + 1 : conditionRows.length - 1;
+        // If only one row left after the action, simply use its label as logicString
+        // NOTE: If none left, the rowsReducer adds a new empty row
+        if (numNewRows <= 1) {
+            setLogicString('1');
+            return;
+        }
+        // If the previous string was a simple AND/OR between all the rows, update the logicString to follow the same for the new list of rows.
+        // If the previous string was a single token like `1` and a new row is inserted, do an AND between the new rows, i.e. `1 AND 2`
+        // For all other complex cases, skip automatically updating the string and wait for the user to change it
+        // To check this, split the previous string by `OR/AND` and check if each of the resultant token is a simple numeric token
+        const splitter = logicString.includes('OR') ? 'OR' : 'AND';
+        const tokens = logicString.split(splitter);
+        const isEveryTokenInteger = tokens.every(w => /^\d+$/.test(w.trim()));
+        if (isEveryTokenInteger) {
+            setLogicString(new Array(numNewRows)
+                .fill(0)
+                .map((w, i) => i + 1)
+                .join(` ${splitter} `));
+        }
+    };
+    // Manages the focus behavior when inserting/removing a row
+    useEffect(() => {
+        if (focusRowIndex === null)
+            return;
+        if (newOperatorButtonRef.current) {
+            newOperatorButtonRef.current.focus();
+            newOperatorButtonRef.current = null;
+        }
+        else if (focusRowIndex !== null) {
+            getFocusables(focusRowRef)[0]?.focus();
+        }
+        setFocusRowIndex(null);
+    }, [focusRowIndex]);
+    // Insert a new row at the given index
+    const insertRow = (insertAt) => {
+        dispatch({ type: INSERT_ROW, payload: { insertAt } }); // Insert an entry in conditionRows
+        if (isBasicMode) {
+            // Set up a new AND/OR selector
+            const insertOpAt = insertAt - 1; // Using `insertAt-1` since the operatorsList has one less entry compared to the conditionRows
+            setOperatorsList([
+                ...operatorsList.slice(0, insertOpAt),
+                'AND',
+                ...operatorsList.slice(insertOpAt)
+            ]);
+        }
+        else {
+            updateLogicString(INSERT_ROW); // Update the logicString input to reflect the insertion
+        }
+        setFocusRowIndex(insertAt);
+    };
+    // Remove the row at the given index
+    const removeRow = (removeAt) => {
+        dispatch({ type: REMOVE_ROW, payload: { removeAt } }); // Remove an entry in conditionRows
+        if (isBasicMode) {
+            // Remove an AND/OR selector
+            if (removeAt === 0) {
+                // If removing the first of the condition rows, remove the extraneous operator
+                setOperatorsList(operatorsList.slice(1));
+            }
+            else {
+                let removeOpAt = removeAt - 1; // Using `removeAt-1` since the operatorsList has one less entry compared to the conditionRows
+                if (operatorsList[removeOpAt] === 'OR' && operatorsList[removeOpAt + 1] === 'AND') {
+                    // If removing a condition at the start of a nested group, remove the first operator from that group. e.g. Take `(1 AND 2) OR (3 AND 4 AND 5)`. If `3` is being deleted, it should become `(1 AND 2) OR (4 AND 5)` instead of `1 AND 2 AND 4 AND 5`
+                    removeOpAt += 1;
+                }
+                setOperatorsList([
+                    ...operatorsList.slice(0, removeOpAt),
+                    ...operatorsList.slice(removeOpAt + 1)
+                ]);
+            }
+        }
+        else {
+            updateLogicString(REMOVE_ROW); // Update the logicString input to reflect the removal
+        }
+        setFocusRowIndex(() => {
+            if (removeAt !== 0 && removeAt === conditionRows.length - 1) {
+                return removeAt - 1;
+            }
+            return removeAt;
+        });
+    };
+    // Update a Basic-mode operator at the given index
+    const updateOperator = (updateAt, newValue) => {
+        setOperatorsList([
+            ...operatorsList.slice(0, updateAt),
+            newValue,
+            ...operatorsList.slice(updateAt + 1)
+        ]);
+    };
+    // Validate the logic input. Called upon clicking outside the textBox or upon submission.
+    // If the expression is invalid, shows appropriate feedback and returns null.
+    // If the expression is valid, formats it by setting up brackets at necessary places (to clear any ambiguities e.g. `1 AND 2 OR 3` is formatted as `(1 AND 2) OR 3` ). Returns a save-ready condition
+    const validateLogicString = (logicToUse) => {
+        // Set up a lookup with row-labels as keys and rows as values
+        const conditionLookup = {};
+        conditionRows.forEach(row => {
+            const { id, label, ...leaf } = row; // Discard the extra properties added by ConditionRow to the LeafCondition interface
+            conditionLookup[row.label] = leaf;
+        });
+        // Convert the logic string into a condition tree
+        const parseResult = parseLogicString(logicToUse, conditionLookup, disallowNOT);
+        // Indicate any parse error
+        if (hasProp(parseResult, 'error')) {
+            setLogicError(parseResult.error);
+            return null;
+        }
+        // If no errors
+        setLogicError(null); // Clear any previous error
+        setLogicString(disambiguateLogic(logicToUse)); // Disambiguating the logic string by placing parentheses at appropriate places
+        return parseResult.condition;
+    };
+    // Toggle between the Basic and Advanced modes
+    // `forceToggle:true` is passed when switching from Advanced to Basic mode despite a loss of information
+    const toggleMode = (forceToggle) => {
+        setModeWarning(false); // Clear any previous warning
+        if (isBasicMode) {
+            // Update the logicString to match the operatorsList before switching the mode
+            setLogicString(getLogicFromBasicMode(operatorsList));
+            setBasicMode(false);
+        }
+        else if (forceToggle) {
+            // If forcibly toggling from Advanced to Basic despite a loss of operators
+            // Set up the default `AND` operator between all rows before switching to Basic mode
+            setOperatorsList(new Array(conditionRows.length - 1).fill('AND'));
+            setBasicMode(true);
+        }
+        else {
+            // If switching from Advanced mode
+            const condition = validateLogicString(logicString); // Validate the logicString. If it is an invalid, an appropriate error is shown for the user to act on
+            if (condition !== null) {
+                // If it's a valid condition, check if it's simple enough to be shown in Basic mode without any loss of information
+                if (isBasicModeApplicable(condition)) {
+                    // If the logic is simple enough, identify the new set of operators before switching to Basic mode
+                    setOperatorsList(getBasicModeOperators(logicString));
+                    setBasicMode(true);
+                }
+                else {
+                    // If the logic is too complex show a warning for the user to act on
+                    setModeWarning(true);
+                }
+            }
+        }
+    };
+    const getCondition = () => {
+        setErrorIndicators(false); // Reset any previous flag
+        setLogicError(null); // Clear any previous error
+        // If there's a single empty condition, submit with an `undefined` value (useful for clearing a previous condition)
+        if (conditionRows.length === 1 && conditionRows[0].lhs.field === '') {
+            return [true, undefined];
+        }
+        // Identify and indicate any invalid values in the condition rows
+        const hasInvalidRows = conditionRows.some(row => !isValidCondition(row, fields, true));
+        if (hasInvalidRows) {
+            setErrorIndicators(true); // Enable inline error indications
+            return [false];
+        }
+        // Validate the Logic string
+        const logicToUse = isBasicMode ? getLogicFromBasicMode(operatorsList) : logicString; // If in Basic-mode, construct a different logicString based on the operatorsList
+        const condition = validateLogicString(logicToUse); // This also takes care of showing an appropriate error feedback as needed
+        if (condition !== null) {
+            // Can be null when the logic string has errors
+            return [true, condition];
+        }
+        return [false];
+    };
+    useImperativeHandle(handle, () => ({
+        getCondition
+    }), [getCondition]);
+    const t = useI18n();
+    useEffect(() => {
+        if (showModeWarning)
+            bannerHandleRef.current?.focus();
+    }, [showModeWarning]);
+    const { announceAssertive } = useLiveLog();
+    useEffect(() => {
+        announceAssertive({ message: t('condition_builder_mode_switch') });
+    }, [isBasicMode]);
+    return (_jsxs(StyledConditionBuilder, { container: { direction: 'column', gap: 4 }, children: [_jsx("div", { children: conditionRows.map(({ id, label, ...leaf }, index) => {
+                    const deleteAriaLabel = `${t('condition_builder_field_label')} ${leaf.lhs.field
+                        .split('.')
+                        .pop()}`;
+                    let alignItems = 'end';
+                    if (showErrorIndicators && !isValidCondition(leaf, fields, false)) {
+                        alignItems = 'center';
+                    }
+                    return (_jsxs(Fragment, { children: [isBasicMode && index > 0 && (_jsx(StyledRowWithSeparator, { container: true, shaded: enableShading && operatorsList[index - 1] === 'AND', children: _jsx(MenuButton, { popover: { hideOnTargetHidden: false }, text: operatorsList[index - 1].toLowerCase(), variant: 'simple', menu: {
+                                        items: [
+                                            {
+                                                id: 'AND',
+                                                primary: 'and',
+                                                onClick: () => updateOperator(index - 1, 'AND')
+                                            },
+                                            {
+                                                id: 'OR',
+                                                primary: 'or',
+                                                onClick: () => updateOperator(index - 1, 'OR')
+                                            }
+                                        ]
+                                    }, ref: index === focusRowIndex ? newOperatorButtonRef : null }) })), _jsxs(StyledRow, { container: { gap: 0.5, alignItems }, shaded: isBasicMode && enableShading, ref: index === focusRowIndex ? focusRowRef : null, children: [!isBasicMode && _jsx(StyledLabel, { children: label }), _jsx(Flex, { item: { grow: 1 }, children: _jsx(AtomicCondition, { condition: leaf, fields: fields, indicateErrors: showErrorIndicators, validComparators: validComparators, dateFunctions: dateFunctions, onChange: (newCondition) => {
+                                                const newRow = { id, label, ...newCondition };
+                                                dispatch({ type: UPDATE_ROW, payload: { updateAt: index, newRow } });
+                                            }, validRhsTypes: validRhsTypes }) }), _jsx(Button, { icon: true, variant: 'simple', onClick: () => insertRow(index + 1), label: t('add_condition'), children: _jsx(Icon, { name: 'plus' }) }), _jsx(Button, { icon: true, variant: 'simple', onClick: () => removeRow(index), label: t('delete'), "aria-label": deleteAriaLabel ? t('delete_noun', [deleteAriaLabel]) : undefined, children: _jsx(Icon, { name: 'trash' }) })] })] }, id));
+                }) }), !isBasicMode && (_jsx("div", { children: _jsxs(Flex, { container: { gap: 0.25, direction: 'column' }, children: [_jsxs(Flex, { container: { alignItems: 'center' }, children: [_jsxs(Label, { htmlFor: labelId, children: [t('condition_builder_advanced_condition_label'), "\u00A0"] }), _jsx(AdditionalInfo, { heading: t('condition_builder_advanced_condition_label'), children: t('condition_builder_advanced_condition_tooltip', [
+                                        disallowNOT ? 'AND/OR' : 'AND/OR/NOT',
+                                        disallowNOT ? '(1 OR 2) AND (3 OR 4 OR 5)' : '(1 AND 2) OR (3 AND NOT 4)'
+                                    ]) })] }), _jsx(Input, { id: labelId, type: 'text', placeholder: t('condition_builder_advanced_condition_placeholder'), value: logicString, onChange: (e) => setLogicString(e.target.value), onBlur: () => validateLogicString(logicString), status: logicError !== null ? 'error' : undefined, info: logicError })] }) })), _jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [showModeWarning && (_jsx(Banner, { variant: 'warning', messages: [
+                            {
+                                label: t('condition_builder_switch_banner_text'),
+                                action: {
+                                    text: t('condition_builder_confirm_button_label'),
+                                    onClick: () => {
+                                        toggleMode(true);
+                                        buttonRef.current?.focus();
+                                    }
+                                }
+                            }
+                        ], onDismiss: () => {
+                            setModeWarning(false);
+                            buttonRef.current?.focus();
+                        }, handle: bannerHandleRef })), _jsx(Flex, { container: { justify: 'between' }, children: _jsx(Button, { name: 'mode-switch', variant: 'simple', onClick: () => {
+                                toggleMode(false);
+                            }, "aria-label": isBasicMode
+                                ? t('condition_builder_advanced_mode_button_aria_label')
+                                : t('condition_builder_basic_mode_button_aria_label'), ref: buttonRef, children: isBasicMode
+                                ? t('condition_builder_advanced_mode_button_label')
+                                : t('condition_builder_basic_mode_button_label') }) })] })] }));
+};
+ConditionBuilder.defaultProps = defaultProps;
+export default ConditionBuilder;
+//# sourceMappingURL=ConditionBuilder.js.map