@pega/cosmos-react-condition-builder 3.0.0-dev.16.1 → 3.0.0-dev.17.0

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

@@ -1 +1 @@
-{"version":3,"file":"NumericInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/NumericInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAwB,MAAM,yBAAyB,CAAC;AAE1F,UAAU,iBAAkB,SAAQ,SAAS,EAAE,cAAc;IAC3D,4BAA4B;IAC5B,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAEhC,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAEpD,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,4IAA4I;AAC5I,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAwBtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"NumericInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/NumericInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAEpD,OAAO,EACL,SAAS,EACT,cAAc,EAIf,MAAM,yBAAyB,CAAC;AAEjC,UAAU,iBAAkB,SAAQ,SAAS,EAAE,cAAc;IAC3D,4BAA4B;IAC5B,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAEhC,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAEpD,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,4IAA4I;AAC5I,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CA4BtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { NumberInput, useI18n } from '@pega/cosmos-react-core';
+import { NumberInput, useAfterInitialEffect, useI18n } from '@pega/cosmos-react-core';
 /** Wrapper over the NumberInput to parse values as Numbers, while still allowing the user to type partial values like `12.`, `12.0`, ... */
 const NumericInput = (props) => {
     const { rhs, onChange, status } = props;
@@ -9,6 +9,9 @@ const NumericInput = (props) => {
     // if we parse values like `12.`, `12.0`, etc., the decimals will be lost leading to bad UX
     // Using a local state to avoid that
     const [localValue, setLocalValue] = useState(rhs.value.toString());
+    useAfterInitialEffect(() => {
+        setLocalValue(rhs.value.toString());
+    }, [rhs]);
     const handleInputChange = (newValue) => {
         setLocalValue(newValue);
         onChange({ value: newValue.trim() ? Number(newValue) : '' }); // Save as a number unless the input is empty

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

@@ -1 +1 @@
-{"version":3,"file":"NumericInput.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/NumericInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAA6B,WAAW,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAa1F,4IAA4I;AAC5I,MAAM,YAAY,GAAyC,CAAC,KAAwB,EAAE,EAAE;IACtF,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACxC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,6DAA6D;IAC7D,2FAA2F;IAC3F,oCAAoC;IACpC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IAEnE,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC7C,aAAa,CAAC,QAAQ,CAAC,CAAC;QACxB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,6CAA6C;IAC7G,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,WAAW,IACV,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,iBAAiB,EAC3B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC5E,KAAK,EAAE,CAAC,CAAC,8CAA8C,CAAC,EACxD,WAAW,SACX,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FunctionComponent, useState } from 'react';\n\nimport { BaseProps, NoChildrenProp, NumberInput, useI18n } from '@pega/cosmos-react-core';\n\ninterface NumericInputProps extends BaseProps, NoChildrenProp {\n  /** Rhs for the condition */\n  rhs: { value: string | number };\n\n  /** Callback for any modifications to the Rhs */\n  onChange: (rhs: { value: string | number }) => void;\n\n  /** Used to indicate any errors on the control */\n  status?: 'error';\n}\n\n/** Wrapper over the NumberInput to parse values as Numbers, while still allowing the user to type partial values like `12.`, `12.0`, ... */\nconst NumericInput: FunctionComponent<NumericInputProps> = (props: NumericInputProps) => {\n  const { rhs, onChange, status } = props;\n  const t = useI18n();\n\n  // Since we want to always call onChange with parsed Numbers,\n  // if we parse values like `12.`, `12.0`, etc., the decimals will be lost leading to bad UX\n  // Using a local state to avoid that\n  const [localValue, setLocalValue] = useState(rhs.value.toString());\n\n  const handleInputChange = (newValue: string) => {\n    setLocalValue(newValue);\n    onChange({ value: newValue.trim() ? Number(newValue) : '' }); // Save as a number unless the input is empty\n  };\n\n  return (\n    <NumberInput\n      value={localValue}\n      onChange={handleInputChange}\n      status={status}\n      info={status === 'error' ? t('condition_builder_invalid_number') : undefined}\n      label={t('condition_builder_compare_with_numeric_value')}\n      labelHidden\n    />\n  );\n};\n\nexport default NumericInput;\n"]}
+{"version":3,"file":"NumericInput.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/NumericInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAGL,WAAW,EACX,qBAAqB,EACrB,OAAO,EACR,MAAM,yBAAyB,CAAC;AAajC,4IAA4I;AAC5I,MAAM,YAAY,GAAyC,CAAC,KAAwB,EAAE,EAAE;IACtF,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACxC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,6DAA6D;IAC7D,2FAA2F;IAC3F,oCAAoC;IACpC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IAEnE,qBAAqB,CAAC,GAAG,EAAE;QACzB,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC7C,aAAa,CAAC,QAAQ,CAAC,CAAC;QACxB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,6CAA6C;IAC7G,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,WAAW,IACV,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,iBAAiB,EAC3B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC5E,KAAK,EAAE,CAAC,CAAC,8CAA8C,CAAC,EACxD,WAAW,SACX,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FunctionComponent, useState } from 'react';\n\nimport {\n  BaseProps,\n  NoChildrenProp,\n  NumberInput,\n  useAfterInitialEffect,\n  useI18n\n} from '@pega/cosmos-react-core';\n\ninterface NumericInputProps extends BaseProps, NoChildrenProp {\n  /** Rhs for the condition */\n  rhs: { value: string | number };\n\n  /** Callback for any modifications to the Rhs */\n  onChange: (rhs: { value: string | number }) => void;\n\n  /** Used to indicate any errors on the control */\n  status?: 'error';\n}\n\n/** Wrapper over the NumberInput to parse values as Numbers, while still allowing the user to type partial values like `12.`, `12.0`, ... */\nconst NumericInput: FunctionComponent<NumericInputProps> = (props: NumericInputProps) => {\n  const { rhs, onChange, status } = props;\n  const t = useI18n();\n\n  // Since we want to always call onChange with parsed Numbers,\n  // if we parse values like `12.`, `12.0`, etc., the decimals will be lost leading to bad UX\n  // Using a local state to avoid that\n  const [localValue, setLocalValue] = useState(rhs.value.toString());\n\n  useAfterInitialEffect(() => {\n    setLocalValue(rhs.value.toString());\n  }, [rhs]);\n\n  const handleInputChange = (newValue: string) => {\n    setLocalValue(newValue);\n    onChange({ value: newValue.trim() ? Number(newValue) : '' }); // Save as a number unless the input is empty\n  };\n\n  return (\n    <NumberInput\n      value={localValue}\n      onChange={handleInputChange}\n      status={status}\n      info={status === 'error' ? t('condition_builder_invalid_number') : undefined}\n      label={t('condition_builder_compare_with_numeric_value')}\n      labelHidden\n    />\n  );\n};\n\nexport default NumericInput;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ConditionInput.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionInput/ConditionInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,YAAY,EAQb,MAAM,yBAAyB,CAAC;AAUjC,OAAO,EAAsB,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAkCjF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA6KzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ConditionInput.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionInput/ConditionInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,YAAY,EAWb,MAAM,yBAAyB,CAAC;AAUjC,OAAO,EAAsB,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AA0DjF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAqMzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/ConditionInput/ConditionInput.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, useEffect } from 'react';
-import styled from 'styled-components';
-import { CompositeInput, defaultThemeProp, hasProp, Input, NumberInput, RadioButton, RadioButtonGroup, StyledGrid, useI18n } from '@pega/cosmos-react-core';
+import styled, { css } from 'styled-components';
+import { CompositeInput, defaultThemeProp, hasProp, Input, NumberInput, RadioButton, RadioButtonGroup, StyledGrid, useI18n, FieldGroup, StyledFieldGroupLegend, StyledButton } from '@pega/cosmos-react-core';
 import AtomicCondition, { getInitConditionForLhs } from '../ConditionBuilder/AtomicCondition';
 import formatCondition from '../ConditionBuilder/core/formatter';
 const defaultComparators = {
@@ -32,7 +32,23 @@ const StyledConditionRadioGroup = styled(RadioButtonGroup) `
   } ;
 `;
 StyledConditionRadioGroup.defaultProps = defaultThemeProp;
-const ConditionInput = forwardRef(({ fieldName, fieldType, condition: conditionProp, fieldLabel, mode, onChange }, ref) => {
+const StyledFieldGroup = styled(FieldGroup)(({ theme: { base: { palette } } }) => {
+    return css `
+      margin-block-start: 0;
+
+      ${StyledFieldGroupLegend} {
+        border-block-start: 0.0625rem solid ${palette['border-line']};
+        padding-block-start: 0.625rem;
+
+        ${StyledButton} {
+          border-color: transparent;
+          font-weight: initial;
+        }
+      }
+    `;
+});
+StyledFieldGroup.defaultProps = defaultThemeProp;
+const ConditionInput = forwardRef(({ fieldName, fieldType, condition: conditionProp, fieldLabel, mode, onChange, flat = false }, ref) => {
     const t = useI18n();
     const basicType = basicFieldMap[fieldType] ?? fieldType;
     const fields = [
@@ -118,7 +134,14 @@ const ConditionInput = forwardRef(({ fieldName, fieldType, condition: conditionP
         onChange(undefined);
         setNewCondition(condition);
     };
-    return (_jsx(_Fragment, { children: showAdvanced ? (_jsx(CompositeInput, { dialog: dialog, label: fieldLabel, onClear: onClear, value: conditionProp ? formatCondition({ condition: conditionProp }, fields, t) : undefined, placeholder: t('all'), ref: ref })) : (defaultControl) }));
+    if (flat) {
+        return (_jsx(StyledFieldGroup, { name: fieldLabel, collapsible: true, actions: [{ id: 'clear', text: t('clear'), onClick: onClear }], children: showAdvanced ? (_jsx(AtomicCondition, { condition: newCondition ??
+                    getInitConditionForLhs({ field: fieldName }, fields, new Set(['LITERAL'])), onChange: onChange, fields: fields, itemDirection: 'column', showLhsAsLabel: true, validRhsTypes: new Set(['LITERAL']), indicateErrors: false })) : (defaultControl) }));
+    }
+    if (showAdvanced) {
+        return (_jsx(CompositeInput, { dialog: dialog, label: fieldLabel, onClear: onClear, value: conditionProp ? formatCondition({ condition: conditionProp }, fields, t) : undefined, placeholder: t('all'), ref: ref }));
+    }
+    return defaultControl;
 });
 export default ConditionInput;
 //# sourceMappingURL=ConditionInput.js.map

package/lib/components/ConditionInput/ConditionInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionInput.js","sourceRoot":"","sources":["../../../src/components/ConditionInput/ConditionInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useState,\n  ChangeEvent,\n  useEffect\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n  CompositeInput,\n  CompositeInputProps,\n  defaultThemeProp,\n  ForwardProps,\n  hasProp,\n  Input,\n  NumberInput,\n  RadioButton,\n  RadioButtonGroup,\n  StyledGrid,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nimport type { Comparator, FieldType } from '../ConditionBuilder/core/types';\nimport AtomicCondition, {\n  AtomicConditionProps,\n  getInitConditionForLhs\n} from '../ConditionBuilder/AtomicCondition';\nimport formatCondition from '../ConditionBuilder/core/formatter';\nimport type { LeafCondition } from '../ConditionBuilder/ConditionBuilder.types';\n\nimport { ConditionFieldType, ConditionInputProps } from './ConditionInput.types';\n\nconst defaultComparators: Record<ConditionFieldType, Comparator> = {\n  TEXT: 'CONTAINS',\n  EMAIL: 'CONTAINS',\n  URL: 'CONTAINS',\n  PHONE: 'CONTAINS',\n  INTEGER: 'EQ',\n  DECIMAL: 'EQ',\n  PERCENTAGE: 'EQ',\n  CURRENCY: 'EQ',\n  BOOLEAN: 'IS_TRUE'\n} as const;\n\nconst basicFieldMap: Record<ConditionFieldType, FieldType> = {\n  EMAIL: 'TEXT',\n  URL: 'TEXT',\n  PHONE: 'TEXT',\n  INTEGER: 'NUMBER',\n  DECIMAL: 'NUMBER',\n  PERCENTAGE: 'NUMBER',\n  CURRENCY: 'NUMBER',\n  TEXT: 'TEXT',\n  BOOLEAN: 'BOOLEAN'\n} as const;\n\nconst StyledConditionRadioGroup = styled(RadioButtonGroup)`\n  ${StyledGrid} {\n    display: inline-flex;\n  } ;\n`;\n\nStyledConditionRadioGroup.defaultProps = defaultThemeProp;\n\nconst ConditionInput: FunctionComponent<ConditionInputProps & ForwardProps> = forwardRef(\n  (\n    {\n      fieldName,\n      fieldType,\n      condition: conditionProp,\n      fieldLabel,\n      mode,\n      onChange\n    }: PropsWithoutRef<ConditionInputProps>,\n    ref: ConditionInputProps['ref']\n  ) => {\n    const t = useI18n();\n\n    const basicType = basicFieldMap[fieldType] ?? fieldType;\n\n    const fields: AtomicConditionProps['fields'] = [\n      { id: fieldName, type: basicType, primary: fieldLabel || fieldName }\n    ];\n\n    const condition =\n      conditionProp ??\n      (fieldType === 'BOOLEAN'\n        ? undefined\n        : getInitConditionForLhs({ field: fieldName }, fields, new Set(['LITERAL'])));\n\n    const onRadioButtonChange = (value?: boolean) => {\n      const updatedCondition: LeafCondition | undefined =\n        value === undefined\n          ? undefined\n          : {\n              lhs: { field: fieldName },\n              comparator: value ? 'IS_TRUE' : 'IS_FALSE'\n            };\n      onChange(updatedCondition);\n    };\n\n    const createConditionForDefaultMode = (value: string) => {\n      return {\n        lhs: { field: fieldName },\n        comparator: defaultComparators[fieldType],\n        rhs: { value: basicType === 'NUMBER' ? Number(value) : value }\n      };\n    };\n\n    const rhsValue =\n      condition?.rhs && hasProp(condition.rhs, 'value')\n        ? condition.rhs.value.toString()\n        : undefined;\n\n    const [inputValue, setInputValue] = useState(rhsValue);\n\n    useEffect(() => {\n      setInputValue(rhsValue);\n    }, [conditionProp]);\n\n    const showAdvanced = mode === 'advanced' && fieldType !== 'BOOLEAN';\n\n    let defaultControl: JSX.Element | null = null;\n\n    if (!showAdvanced) {\n      switch (fieldType) {\n        case 'INTEGER':\n        case 'DECIMAL':\n        case 'PERCENTAGE':\n        case 'CURRENCY':\n          defaultControl = (\n            <NumberInput\n              label={fieldLabel}\n              ref={ref}\n              value={inputValue}\n              onChange={setInputValue}\n              onBlur={value => {\n                onChange(createConditionForDefaultMode(value));\n              }}\n              numberOfDecimals={fieldType === 'INTEGER' ? 0 : undefined}\n            />\n          );\n          break;\n        case 'BOOLEAN':\n          defaultControl = (\n            <StyledConditionRadioGroup ref={ref} label={fieldLabel} name={fieldName} inline>\n              <RadioButton\n                label={t('show_all')}\n                checked={condition === undefined}\n                onChange={() => onRadioButtonChange()}\n              />\n              <RadioButton\n                label={t('boolean_display_true_label')}\n                checked={condition?.comparator === 'IS_TRUE'}\n                onChange={() => onRadioButtonChange(true)}\n              />\n              <RadioButton\n                label={t('boolean_display_false_label')}\n                checked={condition?.comparator === 'IS_FALSE'}\n                onChange={() => onRadioButtonChange(false)}\n              />\n            </StyledConditionRadioGroup>\n          );\n          break;\n        case 'TEXT':\n        case 'EMAIL':\n        case 'URL':\n        case 'PHONE':\n        default:\n          defaultControl = (\n            <Input\n              label={fieldLabel}\n              ref={ref}\n              value={inputValue}\n              onChange={(e: ChangeEvent<HTMLInputElement>) => setInputValue(e.target.value)}\n              onBlur={(e: ChangeEvent<HTMLInputElement>) =>\n                onChange(createConditionForDefaultMode(e.target.value))\n              }\n            />\n          );\n          break;\n      }\n    }\n\n    const [newCondition, setNewCondition] = useState<LeafCondition | undefined>(condition);\n\n    useEffect(() => {\n      setNewCondition(condition);\n    }, [conditionProp]);\n\n    const dialog: CompositeInputProps<AtomicConditionProps & ForwardProps>['dialog'] = {\n      renderer: AtomicCondition,\n      rendererProps: {\n        condition:\n          newCondition ??\n          getInitConditionForLhs({ field: fieldName }, fields, new Set(['LITERAL'])),\n        fields,\n        onChange: setNewCondition,\n        itemDirection: 'column',\n        showLhsAsLabel: true,\n        validRhsTypes: new Set(['LITERAL']),\n        indicateErrors: false\n      },\n      onCancel: ({ close }) => {\n        setNewCondition(condition);\n        close();\n      },\n      onApply: ({ close }) => {\n        onChange(newCondition);\n        close();\n      }\n    };\n\n    const onClear = () => {\n      onChange(undefined);\n      setNewCondition(condition);\n    };\n\n    return (\n      <>\n        {showAdvanced ? (\n          <CompositeInput\n            dialog={dialog}\n            label={fieldLabel}\n            onClear={onClear}\n            value={\n              conditionProp ? formatCondition({ condition: conditionProp }, fields, t) : undefined\n            }\n            placeholder={t('all')}\n            ref={ref}\n          />\n        ) : (\n          defaultControl\n        )}\n      </>\n    );\n  }\n);\n\nexport default ConditionInput;\n"]}
+{"version":3,"file":"ConditionInput.js","sourceRoot":"","sources":["../../../src/components/ConditionInput/ConditionInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useState,\n  ChangeEvent,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  CompositeInput,\n  CompositeInputProps,\n  defaultThemeProp,\n  ForwardProps,\n  hasProp,\n  Input,\n  NumberInput,\n  RadioButton,\n  RadioButtonGroup,\n  StyledGrid,\n  useI18n,\n  FieldGroup,\n  StyledFieldGroupLegend,\n  StyledButton\n} from '@pega/cosmos-react-core';\n\nimport type { Comparator, FieldType } from '../ConditionBuilder/core/types';\nimport AtomicCondition, {\n  AtomicConditionProps,\n  getInitConditionForLhs\n} from '../ConditionBuilder/AtomicCondition';\nimport formatCondition from '../ConditionBuilder/core/formatter';\nimport type { LeafCondition } from '../ConditionBuilder/ConditionBuilder.types';\n\nimport { ConditionFieldType, ConditionInputProps } from './ConditionInput.types';\n\nconst defaultComparators: Record<ConditionFieldType, Comparator> = {\n  TEXT: 'CONTAINS',\n  EMAIL: 'CONTAINS',\n  URL: 'CONTAINS',\n  PHONE: 'CONTAINS',\n  INTEGER: 'EQ',\n  DECIMAL: 'EQ',\n  PERCENTAGE: 'EQ',\n  CURRENCY: 'EQ',\n  BOOLEAN: 'IS_TRUE'\n} as const;\n\nconst basicFieldMap: Record<ConditionFieldType, FieldType> = {\n  EMAIL: 'TEXT',\n  URL: 'TEXT',\n  PHONE: 'TEXT',\n  INTEGER: 'NUMBER',\n  DECIMAL: 'NUMBER',\n  PERCENTAGE: 'NUMBER',\n  CURRENCY: 'NUMBER',\n  TEXT: 'TEXT',\n  BOOLEAN: 'BOOLEAN'\n} as const;\n\nconst StyledConditionRadioGroup = styled(RadioButtonGroup)`\n  ${StyledGrid} {\n    display: inline-flex;\n  } ;\n`;\n\nStyledConditionRadioGroup.defaultProps = defaultThemeProp;\n\nconst StyledFieldGroup = styled(FieldGroup)(\n  ({\n    theme: {\n      base: { palette }\n    }\n  }) => {\n    return css`\n      margin-block-start: 0;\n\n      ${StyledFieldGroupLegend} {\n        border-block-start: 0.0625rem solid ${palette['border-line']};\n        padding-block-start: 0.625rem;\n\n        ${StyledButton} {\n          border-color: transparent;\n          font-weight: initial;\n        }\n      }\n    `;\n  }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst ConditionInput: FunctionComponent<ConditionInputProps & ForwardProps> = forwardRef(\n  (\n    {\n      fieldName,\n      fieldType,\n      condition: conditionProp,\n      fieldLabel,\n      mode,\n      onChange,\n      flat = false\n    }: PropsWithoutRef<ConditionInputProps>,\n    ref: ConditionInputProps['ref']\n  ) => {\n    const t = useI18n();\n\n    const basicType = basicFieldMap[fieldType] ?? fieldType;\n\n    const fields: AtomicConditionProps['fields'] = [\n      { id: fieldName, type: basicType, primary: fieldLabel || fieldName }\n    ];\n\n    const condition =\n      conditionProp ??\n      (fieldType === 'BOOLEAN'\n        ? undefined\n        : getInitConditionForLhs({ field: fieldName }, fields, new Set(['LITERAL'])));\n\n    const onRadioButtonChange = (value?: boolean) => {\n      const updatedCondition: LeafCondition | undefined =\n        value === undefined\n          ? undefined\n          : {\n              lhs: { field: fieldName },\n              comparator: value ? 'IS_TRUE' : 'IS_FALSE'\n            };\n      onChange(updatedCondition);\n    };\n\n    const createConditionForDefaultMode = (value: string) => {\n      return {\n        lhs: { field: fieldName },\n        comparator: defaultComparators[fieldType],\n        rhs: { value: basicType === 'NUMBER' ? Number(value) : value }\n      };\n    };\n\n    const rhsValue =\n      condition?.rhs && hasProp(condition.rhs, 'value')\n        ? condition.rhs.value.toString()\n        : undefined;\n\n    const [inputValue, setInputValue] = useState(rhsValue);\n\n    useEffect(() => {\n      setInputValue(rhsValue);\n    }, [conditionProp]);\n\n    const showAdvanced = mode === 'advanced' && fieldType !== 'BOOLEAN';\n\n    let defaultControl: JSX.Element | null = null;\n\n    if (!showAdvanced) {\n      switch (fieldType) {\n        case 'INTEGER':\n        case 'DECIMAL':\n        case 'PERCENTAGE':\n        case 'CURRENCY':\n          defaultControl = (\n            <NumberInput\n              label={fieldLabel}\n              ref={ref}\n              value={inputValue}\n              onChange={setInputValue}\n              onBlur={value => {\n                onChange(createConditionForDefaultMode(value));\n              }}\n              numberOfDecimals={fieldType === 'INTEGER' ? 0 : undefined}\n            />\n          );\n          break;\n        case 'BOOLEAN':\n          defaultControl = (\n            <StyledConditionRadioGroup ref={ref} label={fieldLabel} name={fieldName} inline>\n              <RadioButton\n                label={t('show_all')}\n                checked={condition === undefined}\n                onChange={() => onRadioButtonChange()}\n              />\n              <RadioButton\n                label={t('boolean_display_true_label')}\n                checked={condition?.comparator === 'IS_TRUE'}\n                onChange={() => onRadioButtonChange(true)}\n              />\n              <RadioButton\n                label={t('boolean_display_false_label')}\n                checked={condition?.comparator === 'IS_FALSE'}\n                onChange={() => onRadioButtonChange(false)}\n              />\n            </StyledConditionRadioGroup>\n          );\n          break;\n        case 'TEXT':\n        case 'EMAIL':\n        case 'URL':\n        case 'PHONE':\n        default:\n          defaultControl = (\n            <Input\n              label={fieldLabel}\n              ref={ref}\n              value={inputValue}\n              onChange={(e: ChangeEvent<HTMLInputElement>) => setInputValue(e.target.value)}\n              onBlur={(e: ChangeEvent<HTMLInputElement>) =>\n                onChange(createConditionForDefaultMode(e.target.value))\n              }\n            />\n          );\n          break;\n      }\n    }\n\n    const [newCondition, setNewCondition] = useState<LeafCondition | undefined>(condition);\n\n    useEffect(() => {\n      setNewCondition(condition);\n    }, [conditionProp]);\n\n    const dialog: CompositeInputProps<AtomicConditionProps & ForwardProps>['dialog'] = {\n      renderer: AtomicCondition,\n      rendererProps: {\n        condition:\n          newCondition ??\n          getInitConditionForLhs({ field: fieldName }, fields, new Set(['LITERAL'])),\n        fields,\n        onChange: setNewCondition,\n        itemDirection: 'column',\n        showLhsAsLabel: true,\n        validRhsTypes: new Set(['LITERAL']),\n        indicateErrors: false\n      },\n      onCancel: ({ close }) => {\n        setNewCondition(condition);\n        close();\n      },\n      onApply: ({ close }) => {\n        onChange(newCondition);\n        close();\n      }\n    };\n\n    const onClear = () => {\n      onChange(undefined);\n      setNewCondition(condition);\n    };\n\n    if (flat) {\n      return (\n        <StyledFieldGroup\n          name={fieldLabel}\n          collapsible\n          actions={[{ id: 'clear', text: t('clear'), onClick: onClear }]}\n        >\n          {showAdvanced ? (\n            <AtomicCondition\n              condition={\n                newCondition ??\n                getInitConditionForLhs({ field: fieldName }, fields, new Set(['LITERAL']))\n              }\n              onChange={onChange}\n              fields={fields}\n              itemDirection='column'\n              showLhsAsLabel\n              validRhsTypes={new Set(['LITERAL'])}\n              indicateErrors={false}\n            />\n          ) : (\n            defaultControl\n          )}\n        </StyledFieldGroup>\n      );\n    }\n    if (showAdvanced) {\n      return (\n        <CompositeInput\n          dialog={dialog}\n          label={fieldLabel}\n          onClear={onClear}\n          value={\n            conditionProp ? formatCondition({ condition: conditionProp }, fields, t) : undefined\n          }\n          placeholder={t('all')}\n          ref={ref}\n        />\n      );\n    }\n    return defaultControl;\n  }\n);\n\nexport default ConditionInput;\n"]}

package/lib/components/ConditionInput/ConditionInput.types.d.ts

@@ -17,5 +17,7 @@ export interface ConditionInputProps {
     onChange: (condition?: LeafCondition) => void;
     /** Reference to the input element. */
     ref?: Ref<HTMLInputElement>;
+    /** Whether advanced view should be wrapped in popup or just flat. */
+    flat?: boolean;
 }
 //# sourceMappingURL=ConditionInput.types.d.ts.map

package/lib/components/ConditionInput/ConditionInput.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionInput/ConditionInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,oBAAY,kBAAkB,GAC1B,MAAM,GACN,OAAO,GACP,KAAK,GACL,OAAO,GACP,SAAS,GACT,SAAS,GACT,YAAY,GACZ,SAAS,GACT,UAAU,CAAC;AAEf,oBAAY,kBAAkB,GAAG,SAAS,GAAG,UAAU,CAAC;AAExD,MAAM,WAAW,mBAAmB;IAClC,sDAAsD;IACtD,SAAS,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,SAAS,EAAE,kBAAkB,CAAC;IAC9B,wEAAwE;IACxE,IAAI,EAAE,kBAAkB,CAAC;IACzB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uBAAuB;IACvB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,wDAAwD;IACxD,QAAQ,EAAE,CAAC,SAAS,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,sCAAsC;IACtC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B"}
+{"version":3,"file":"ConditionInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionInput/ConditionInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,oBAAY,kBAAkB,GAC1B,MAAM,GACN,OAAO,GACP,KAAK,GACL,OAAO,GACP,SAAS,GACT,SAAS,GACT,YAAY,GACZ,SAAS,GACT,UAAU,CAAC;AAEf,oBAAY,kBAAkB,GAAG,SAAS,GAAG,UAAU,CAAC;AAExD,MAAM,WAAW,mBAAmB;IAClC,sDAAsD;IACtD,SAAS,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,SAAS,EAAE,kBAAkB,CAAC;IAC9B,wEAAwE;IACxE,IAAI,EAAE,kBAAkB,CAAC;IACzB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uBAAuB;IACvB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,wDAAwD;IACxD,QAAQ,EAAE,CAAC,SAAS,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,sCAAsC;IACtC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,qEAAqE;IACrE,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB"}

package/lib/components/ConditionInput/ConditionInput.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionInput.types.js","sourceRoot":"","sources":["../../../src/components/ConditionInput/ConditionInput.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport { LeafCondition } from '../ConditionBuilder';\n\nexport type ConditionFieldType =\n  | 'TEXT'\n  | 'EMAIL'\n  | 'URL'\n  | 'PHONE'\n  | 'INTEGER'\n  | 'DECIMAL'\n  | 'PERCENTAGE'\n  | 'BOOLEAN'\n  | 'CURRENCY';\n\nexport type ConditionInputMode = 'default' | 'advanced';\n\nexport interface ConditionInputProps {\n  /** Name of the field the condition is created for. */\n  fieldName: string;\n  /** Type of the field the condition is created for. */\n  fieldType: ConditionFieldType;\n  /** Display mode. Either with default comparator or the full-fledged. */\n  mode: ConditionInputMode;\n  /** Label for the input. */\n  fieldLabel?: string;\n  /** Condition value. */\n  condition?: LeafCondition;\n  /** Callback invoked when user changes the condition. */\n  onChange: (condition?: LeafCondition) => void;\n  /** Reference to the input element. */\n  ref?: Ref<HTMLInputElement>;\n}\n"]}
+{"version":3,"file":"ConditionInput.types.js","sourceRoot":"","sources":["../../../src/components/ConditionInput/ConditionInput.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport { LeafCondition } from '../ConditionBuilder';\n\nexport type ConditionFieldType =\n  | 'TEXT'\n  | 'EMAIL'\n  | 'URL'\n  | 'PHONE'\n  | 'INTEGER'\n  | 'DECIMAL'\n  | 'PERCENTAGE'\n  | 'BOOLEAN'\n  | 'CURRENCY';\n\nexport type ConditionInputMode = 'default' | 'advanced';\n\nexport interface ConditionInputProps {\n  /** Name of the field the condition is created for. */\n  fieldName: string;\n  /** Type of the field the condition is created for. */\n  fieldType: ConditionFieldType;\n  /** Display mode. Either with default comparator or the full-fledged. */\n  mode: ConditionInputMode;\n  /** Label for the input. */\n  fieldLabel?: string;\n  /** Condition value. */\n  condition?: LeafCondition;\n  /** Callback invoked when user changes the condition. */\n  onChange: (condition?: LeafCondition) => void;\n  /** Reference to the input element. */\n  ref?: Ref<HTMLInputElement>;\n  /** Whether advanced view should be wrapped in popup or just flat. */\n  flat?: boolean;\n}\n"]}

package/lib/components/PromotedFilters/PromotedFilters.d.ts

@@ -1,6 +1,11 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '@pega/cosmos-react-core';
+import { Condition } from '../ConditionBuilder/ConditionBuilder.types';
 import { PromotedFiltersProps } from './PromotedFilters.types';
-declare const PromotedFilters: FunctionComponent<PromotedFiltersProps & ForwardProps>;
+export interface FilterModalProps extends Pick<PromotedFiltersProps, 'filters' | 'condition'> {
+    /** Callback fired on apply of any of the filters */
+    onApply?: (condition: Condition | undefined) => void;
+}
+export declare const PromotedFilters: FunctionComponent<PromotedFiltersProps & ForwardProps>;
 export default PromotedFilters;
 //# sourceMappingURL=PromotedFilters.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PromotedFilters.d.ts","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAkC,YAAY,EAAW,MAAM,yBAAyB,CAAC;AAMhG,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAkB/D,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAqE3E,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"PromotedFilters.d.ts","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAGL,YAAY,EAMb,MAAM,yBAAyB,CAAC;AAMjC,OAAO,EAAE,SAAS,EAAiB,MAAM,4CAA4C,CAAC;AAItF,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAO/D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,WAAW,CAAC;IAC3F,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;CACtD;AA+GD,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAkHlF,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/PromotedFilters/PromotedFilters.js

@@ -1,23 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { Button, defaultThemeProp, Flex, useI18n } from '@pega/cosmos-react-core';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { Button, Flex, Icon, Modal, useBreakpoint, useI18n } from '@pega/cosmos-react-core';
+import { ModalContext, ModalManagerContext } from '@pega/cosmos-react-core/lib/components/Modal/Contexts';
 import { splitConditionForBuilder } from '../ConditionBuilder/core/utils';
 import ConditionInput from '../ConditionInput';
-const StyledPromotedFilters = styled.div(({ theme }) => {
-    return css `
-    border-radius: ${theme.components.card['border-radius']};
-    background-color: ${theme.base.palette['secondary-background']};
-  `;
-});
-StyledPromotedFilters.defaultProps = defaultThemeProp;
-const StyledClearAllButton = styled(Button) `
-  margin-top: 0.625rem;
-  white-space: nowrap;
-`;
-StyledClearAllButton.defaultProps = defaultThemeProp;
-const PromotedFilters = forwardRef(({ filters, condition, onChange }, ref) => {
-    const t = useI18n();
+import { StyledPromotedFilters, StyledClearAllButton, StyledTextWithEllipsis } from './PromotedFilters.styles';
+const PromotedFiltersContent = forwardRef(({ filters, condition, onChange, orientation: orientationProp = 'horizontal' }, ref) => {
+    const isSmallOrAbove = useBreakpoint('sm');
+    const orientation = isSmallOrAbove && orientationProp === 'horizontal' ? 'horizontal' : 'vertical';
     // map of Conditions indexed by field name
     const conditionsMap = condition
         ? splitConditionForBuilder(condition).rows.reduce((result, item) => {
@@ -38,13 +28,66 @@ const PromotedFilters = forwardRef(({ filters, condition, onChange }, ref) => {
             })
         };
     };
-    return (_jsxs(Flex, { as: StyledPromotedFilters, container: { alignItems: 'start', justify: 'between', pad: 2, gap: 2 }, ref: ref, children: [_jsx(Flex, { container: { wrap: 'wrap', gap: 2 }, children: filters.map(filter => {
-                    return (_jsx(ConditionInput, { fieldName: filter.fieldName, fieldType: filter.fieldType, mode: filter.mode, fieldLabel: filter.fieldLabel ?? filter.fieldName, condition: conditionsMap[filter.fieldName], onChange: (newCondition) => {
-                            onChange(createUpdatedCondition(filter.fieldName, newCondition));
-                        } }, filter.fieldName));
-                }) }), _jsx("div", { children: _jsx(StyledClearAllButton, { variant: 'simple', onClick: () => {
+    return (_jsx(Flex, { container: {
+            gap: 2,
+            direction: orientation === 'vertical' ? 'column' : 'row',
+            wrap: 'wrap'
+        }, ref: ref, children: filters.map(({ fieldName, fieldType, mode, fieldLabel }) => {
+            return (_jsx(ConditionInput, { fieldName: fieldName, fieldType: fieldType, mode: mode, fieldLabel: fieldLabel ?? fieldName, condition: conditionsMap[fieldName], flat: orientation === 'vertical', onChange: (newCondition) => {
+                    onChange(createUpdatedCondition(fieldName, newCondition));
+                } }, fieldName));
+        }) }));
+});
+const FilterModal = ({ filters, condition, onApply }) => {
+    const t = useI18n();
+    const { dismiss } = useContext(ModalContext);
+    const [newCondition, setNewCondition] = useState(condition);
+    const onApplyClick = useCallback(() => {
+        onApply?.(newCondition);
+        dismiss();
+    }, [newCondition, onApply]);
+    const actions = (_jsx(Button, { variant: 'primary', onClick: onApplyClick, children: t('apply') }));
+    return (_jsxs(Modal, { heading: t('filters'), actions: actions, stretch: true, children: [_jsx(Flex, { container: { justify: 'end' }, children: _jsx(StyledClearAllButton, { variant: 'simple', onClick: () => {
+                        setNewCondition(undefined);
+                    }, children: t('clear_all') }) }), _jsx(PromotedFiltersContent, { filters: filters, condition: newCondition, onChange: setNewCondition, orientation: 'vertical' })] }));
+};
+export const PromotedFilters = forwardRef(({ filters, condition, onChange, orientation = 'horizontal' }, ref) => {
+    const t = useI18n();
+    const isSmallOrAbove = useBreakpoint('sm');
+    const { create } = useContext(ModalManagerContext);
+    const modalMethods = useRef();
+    // map of Conditions indexed by field name
+    const conditionsCount = condition ? splitConditionForBuilder(condition).rows.length : undefined;
+    useEffect(() => {
+        modalMethods.current?.update({
+            filters,
+            condition
+        });
+    }, [filters, condition]);
+    const openFiltersModal = () => {
+        modalMethods.current = create(FilterModal, {
+            filters,
+            condition,
+            onApply: onChange
+        });
+    };
+    return (_jsx(Flex, { as: StyledPromotedFilters, container: {
+            alignItems: orientation === 'horizontal' && isSmallOrAbove ? 'start' : undefined,
+            justify: 'between',
+            direction: !isSmallOrAbove || orientation === 'horizontal' ? 'row' : 'column',
+            pad: 2,
+            gap: 2
+        }, ref: ref, children: isSmallOrAbove ? (_jsxs(_Fragment, { children: [orientation === 'vertical' && (_jsxs(Flex, { container: {
+                        justify: 'between',
+                        alignItems: 'center',
+                        pad: [0, 0, 1, 0]
+                    }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h3', children: t('filters') }), _jsx(Button, { variant: 'simple', onClick: () => {
+                                onChange();
+                            }, children: t('clear_all') })] })), _jsx(PromotedFiltersContent, { filters: filters, onChange: onChange, condition: condition, orientation: orientation, ref: ref }), orientation === 'horizontal' && (_jsx("div", { children: _jsx(StyledClearAllButton, { variant: 'simple', onClick: () => {
+                            onChange();
+                        }, children: t('promoted_filters_clear_all_button_label') }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { type: 'button', variant: 'text', onClick: openFiltersModal, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'filter' }), _jsxs("span", { children: [t('filters'), conditionsCount && `\u00a0(${conditionsCount})`] })] }) }), _jsx(Button, { variant: 'simple', onClick: () => {
                         onChange();
-                    }, children: t('promoted_filters_clear_all_button_label') }) })] }));
+                    }, children: t('clear_all') })] })) }));
 });
 export default PromotedFilters;
 //# sourceMappingURL=PromotedFilters.js.map

package/lib/components/PromotedFilters/PromotedFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromotedFilters.js","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Button, defaultThemeProp, Flex, ForwardProps, useI18n } from '@pega/cosmos-react-core';\n\nimport { Condition, LeafCondition } from '../ConditionBuilder/ConditionBuilder.types';\nimport { splitConditionForBuilder } from '../ConditionBuilder/core/utils';\nimport ConditionInput from '../ConditionInput';\n\nimport { PromotedFiltersProps } from './PromotedFilters.types';\n\nconst StyledPromotedFilters = styled.div(({ theme }) => {\n  return css`\n    border-radius: ${theme.components.card['border-radius']};\n    background-color: ${theme.base.palette['secondary-background']};\n  `;\n});\n\nStyledPromotedFilters.defaultProps = defaultThemeProp;\n\nconst StyledClearAllButton = styled(Button)`\n  margin-top: 0.625rem;\n  white-space: nowrap;\n`;\n\nStyledClearAllButton.defaultProps = defaultThemeProp;\n\nconst PromotedFilters: FunctionComponent<PromotedFiltersProps & ForwardProps> = forwardRef(\n  (\n    { filters, condition, onChange }: PropsWithoutRef<PromotedFiltersProps>,\n    ref: PromotedFiltersProps['ref']\n  ) => {\n    const t = useI18n();\n\n    // map of Conditions indexed by field name\n    const conditionsMap = condition\n      ? splitConditionForBuilder(condition).rows.reduce(\n          (result: { [key: string]: LeafCondition }, item) => {\n            result[item.lhs.field] = item;\n            return result;\n          },\n          {}\n        )\n      : {};\n\n    const createUpdatedCondition = (key: string, newCondition?: LeafCondition) => {\n      if (newCondition) {\n        conditionsMap[key] = newCondition;\n      } else {\n        delete conditionsMap[key];\n      }\n\n      return {\n        AND: Object.values(conditionsMap).map(c => {\n          return { condition: c } as Condition;\n        })\n      };\n    };\n\n    return (\n      <Flex\n        as={StyledPromotedFilters}\n        container={{ alignItems: 'start', justify: 'between', pad: 2, gap: 2 }}\n        ref={ref}\n      >\n        <Flex container={{ wrap: 'wrap', gap: 2 }}>\n          {filters.map(filter => {\n            return (\n              <ConditionInput\n                key={filter.fieldName}\n                fieldName={filter.fieldName}\n                fieldType={filter.fieldType}\n                mode={filter.mode}\n                fieldLabel={filter.fieldLabel ?? filter.fieldName}\n                condition={conditionsMap[filter.fieldName]}\n                onChange={(newCondition?: LeafCondition) => {\n                  onChange(createUpdatedCondition(filter.fieldName, newCondition));\n                }}\n              />\n            );\n          })}\n        </Flex>\n\n        <div>\n          <StyledClearAllButton\n            variant='simple'\n            onClick={() => {\n              onChange();\n            }}\n          >\n            {t('promoted_filters_clear_all_button_label')}\n          </StyledClearAllButton>\n        </div>\n      </Flex>\n    );\n  }\n);\n\nexport default PromotedFilters;\n"]}
+{"version":3,"file":"PromotedFilters.js","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  Button,\n  Flex,\n  ForwardProps,\n  Icon,\n  Modal,\n  ModalMethods,\n  useBreakpoint,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport {\n  ModalContext,\n  ModalManagerContext\n} from '@pega/cosmos-react-core/lib/components/Modal/Contexts';\n\nimport { Condition, LeafCondition } from '../ConditionBuilder/ConditionBuilder.types';\nimport { splitConditionForBuilder } from '../ConditionBuilder/core/utils';\nimport ConditionInput from '../ConditionInput';\n\nimport { PromotedFiltersProps } from './PromotedFilters.types';\nimport {\n  StyledPromotedFilters,\n  StyledClearAllButton,\n  StyledTextWithEllipsis\n} from './PromotedFilters.styles';\n\nexport interface FilterModalProps extends Pick<PromotedFiltersProps, 'filters' | 'condition'> {\n  /** Callback fired on apply of any of the filters */\n  onApply?: (condition: Condition | undefined) => void;\n}\n\nconst PromotedFiltersContent: FunctionComponent<PromotedFiltersProps & ForwardProps> = forwardRef(\n  (\n    {\n      filters,\n      condition,\n      onChange,\n      orientation: orientationProp = 'horizontal'\n    }: PropsWithoutRef<PromotedFiltersProps>,\n    ref: PromotedFiltersProps['ref']\n  ) => {\n    const isSmallOrAbove = useBreakpoint('sm');\n    const orientation =\n      isSmallOrAbove && orientationProp === 'horizontal' ? 'horizontal' : 'vertical';\n\n    // map of Conditions indexed by field name\n    const conditionsMap = condition\n      ? splitConditionForBuilder(condition).rows.reduce(\n          (result: { [key: string]: LeafCondition }, item) => {\n            result[item.lhs.field] = item;\n            return result;\n          },\n          {}\n        )\n      : {};\n\n    const createUpdatedCondition = (key: string, newCondition?: LeafCondition) => {\n      if (newCondition) {\n        conditionsMap[key] = newCondition;\n      } else {\n        delete conditionsMap[key];\n      }\n\n      return {\n        AND: Object.values(conditionsMap).map(c => {\n          return { condition: c } as Condition;\n        })\n      };\n    };\n\n    return (\n      <Flex\n        container={{\n          gap: 2,\n          direction: orientation === 'vertical' ? 'column' : 'row',\n          wrap: 'wrap'\n        }}\n        ref={ref}\n      >\n        {filters.map(({ fieldName, fieldType, mode, fieldLabel }) => {\n          return (\n            <ConditionInput\n              key={fieldName}\n              fieldName={fieldName}\n              fieldType={fieldType}\n              mode={mode}\n              fieldLabel={fieldLabel ?? fieldName}\n              condition={conditionsMap[fieldName]}\n              flat={orientation === 'vertical'}\n              onChange={(newCondition?: LeafCondition) => {\n                onChange(createUpdatedCondition(fieldName, newCondition));\n              }}\n            />\n          );\n        })}\n      </Flex>\n    );\n  }\n);\n\nconst FilterModal = ({ filters, condition, onApply }: FilterModalProps) => {\n  const t = useI18n();\n\n  const { dismiss } = useContext(ModalContext);\n  const [newCondition, setNewCondition] = useState<Condition | undefined>(condition);\n\n  const onApplyClick = useCallback(() => {\n    onApply?.(newCondition);\n    dismiss();\n  }, [newCondition, onApply]);\n\n  const actions = (\n    <Button variant='primary' onClick={onApplyClick}>\n      {t('apply')}\n    </Button>\n  );\n\n  return (\n    <Modal heading={t('filters')} actions={actions} stretch>\n      <Flex container={{ justify: 'end' }}>\n        <StyledClearAllButton\n          variant='simple'\n          onClick={() => {\n            setNewCondition(undefined);\n          }}\n        >\n          {t('clear_all')}\n        </StyledClearAllButton>\n      </Flex>\n\n      <PromotedFiltersContent\n        filters={filters}\n        condition={newCondition}\n        onChange={setNewCondition}\n        orientation='vertical'\n      />\n    </Modal>\n  );\n};\n\nexport const PromotedFilters: FunctionComponent<PromotedFiltersProps & ForwardProps> = forwardRef(\n  (\n    {\n      filters,\n      condition,\n      onChange,\n      orientation = 'horizontal'\n    }: PropsWithoutRef<PromotedFiltersProps>,\n    ref: PromotedFiltersProps['ref']\n  ) => {\n    const t = useI18n();\n\n    const isSmallOrAbove = useBreakpoint('sm');\n\n    const { create } = useContext(ModalManagerContext);\n    const modalMethods = useRef<ModalMethods<FilterModalProps>>();\n\n    // map of Conditions indexed by field name\n    const conditionsCount = condition ? splitConditionForBuilder(condition).rows.length : undefined;\n\n    useEffect(() => {\n      modalMethods.current?.update({\n        filters,\n        condition\n      });\n    }, [filters, condition]);\n\n    const openFiltersModal = () => {\n      modalMethods.current = create(FilterModal, {\n        filters,\n        condition,\n        onApply: onChange\n      });\n    };\n\n    return (\n      <Flex\n        as={StyledPromotedFilters}\n        container={{\n          alignItems: orientation === 'horizontal' && isSmallOrAbove ? 'start' : undefined,\n          justify: 'between',\n          direction: !isSmallOrAbove || orientation === 'horizontal' ? 'row' : 'column',\n          pad: 2,\n          gap: 2\n        }}\n        ref={ref}\n      >\n        {isSmallOrAbove ? (\n          <>\n            {orientation === 'vertical' && (\n              <Flex\n                container={{\n                  justify: 'between',\n                  alignItems: 'center',\n                  pad: [0, 0, 1, 0]\n                }}\n              >\n                <StyledTextWithEllipsis variant='h3'>{t('filters')}</StyledTextWithEllipsis>\n                <Button\n                  variant='simple'\n                  onClick={() => {\n                    onChange();\n                  }}\n                >\n                  {t('clear_all')}\n                </Button>\n              </Flex>\n            )}\n\n            <PromotedFiltersContent\n              filters={filters}\n              onChange={onChange}\n              condition={condition}\n              orientation={orientation}\n              ref={ref}\n            />\n\n            {orientation === 'horizontal' && (\n              <div>\n                <StyledClearAllButton\n                  variant='simple'\n                  onClick={() => {\n                    onChange();\n                  }}\n                >\n                  {t('promoted_filters_clear_all_button_label')}\n                </StyledClearAllButton>\n              </div>\n            )}\n          </>\n        ) : (\n          <>\n            <Button type='button' variant='text' onClick={openFiltersModal}>\n              <Flex container={{ alignItems: 'center', gap: 0.5 }} forwardedAs='span'>\n                <Icon name='filter' />\n                <span>\n                  {t('filters')}\n                  {conditionsCount && `\\u00a0(${conditionsCount})`}\n                </span>\n              </Flex>\n            </Button>\n            <Button\n              variant='simple'\n              onClick={() => {\n                onChange();\n              }}\n            >\n              {t('clear_all')}\n            </Button>\n          </>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default PromotedFilters;\n"]}

package/lib/components/PromotedFilters/PromotedFilters.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledPromotedFilters: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledClearAllButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTextWithEllipsis: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=PromotedFilters.styles.d.ts.map

package/lib/components/PromotedFilters/PromotedFilters.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromotedFilters.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,qBAAqB,yGAKhC,CAAC;AAIH,eAAO,MAAM,oBAAoB,qOAOhC,CAAC;AAIF,eAAO,MAAM,sBAAsB,mOAIlC,CAAC"}

package/lib/components/PromotedFilters/PromotedFilters.styles.js

@@ -0,0 +1,26 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, Button, Text } from '@pega/cosmos-react-core';
+import { StyledModalChildrenWrap } from '@pega/cosmos-react-core/lib/components/Modal/Modal.styles';
+export const StyledPromotedFilters = styled.div(({ theme }) => {
+    return css `
+    border-radius: ${theme.components.card['border-radius']};
+    background-color: ${theme.base.palette['secondary-background']};
+  `;
+});
+StyledPromotedFilters.defaultProps = defaultThemeProp;
+export const StyledClearAllButton = styled(Button) `
+  margin: 1.125rem 0 0.625rem;
+  white-space: nowrap;
+
+  ${StyledModalChildrenWrap} & {
+    margin-top: 0;
+  }
+`;
+StyledClearAllButton.defaultProps = defaultThemeProp;
+export const StyledTextWithEllipsis = styled(Text) `
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+StyledTextWithEllipsis.defaultProps = defaultThemeProp;
+//# sourceMappingURL=PromotedFilters.styles.js.map

package/lib/components/PromotedFilters/PromotedFilters.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromotedFilters.styles.js","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2DAA2D,CAAC;AAEpG,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;wBACnC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;GAC/D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;IAI9C,uBAAuB;;;CAG1B,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAIjD,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Button, Text } from '@pega/cosmos-react-core';\nimport { StyledModalChildrenWrap } from '@pega/cosmos-react-core/lib/components/Modal/Modal.styles';\n\nexport const StyledPromotedFilters = styled.div(({ theme }) => {\n  return css`\n    border-radius: ${theme.components.card['border-radius']};\n    background-color: ${theme.base.palette['secondary-background']};\n  `;\n});\n\nStyledPromotedFilters.defaultProps = defaultThemeProp;\n\nexport const StyledClearAllButton = styled(Button)`\n  margin: 1.125rem 0 0.625rem;\n  white-space: nowrap;\n\n  ${StyledModalChildrenWrap} & {\n    margin-top: 0;\n  }\n`;\n\nStyledClearAllButton.defaultProps = defaultThemeProp;\n\nexport const StyledTextWithEllipsis = styled(Text)`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`;\n\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n"]}

package/lib/components/PromotedFilters/PromotedFilters.types.d.ts

@@ -1,5 +1,5 @@
 import { Ref } from 'react';
-import { BaseProps } from '@pega/cosmos-react-core';
+import { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
 import type { Condition } from '../ConditionBuilder/ConditionBuilder.types';
 import type { ConditionInputMode, ConditionFieldType } from '../ConditionInput/ConditionInput.types';
 export interface PromotedFilter {
@@ -12,11 +12,13 @@ export interface PromotedFilter {
     /** Label for the filter. */
     fieldLabel?: string;
 }
-export interface PromotedFiltersProps extends BaseProps {
+export interface PromotedFiltersProps extends BaseProps, NoChildrenProp {
     /** Configuration of filters for every field that has been defined as promoted. */
     filters: PromotedFilter[];
     /** A value representing the current condition state. */
     condition?: Condition;
+    /** Orientation mode. The default is horizontal. */
+    orientation?: 'vertical' | 'horizontal';
     /** Callback fired on change of any of the filters. */
     onChange: (condition?: Condition) => void;
     /** Ref for the wrapping element. */

package/lib/components/PromotedFilters/PromotedFilters.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromotedFilters.types.d.ts","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AAC5E,OAAO,KAAK,EACV,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,wCAAwC,CAAC;AAEhD,MAAM,WAAW,cAAc;IAC7B,+BAA+B;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,SAAS,EAAE,kBAAkB,CAAC;IAC9B,oBAAoB;IACpB,IAAI,EAAE,kBAAkB,CAAC;IACzB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,kFAAkF;IAClF,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,wDAAwD;IACxD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,sDAAsD;IACtD,QAAQ,EAAE,CAAC,SAAS,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
+{"version":3,"file":"PromotedFilters.types.d.ts","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AAC5E,OAAO,KAAK,EACV,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,wCAAwC,CAAC;AAEhD,MAAM,WAAW,cAAc;IAC7B,+BAA+B;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,SAAS,EAAE,kBAAkB,CAAC;IAC9B,oBAAoB;IACpB,IAAI,EAAE,kBAAkB,CAAC;IACzB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE,kFAAkF;IAClF,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,wDAAwD;IACxD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,mDAAmD;IACnD,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,sDAAsD;IACtD,QAAQ,EAAE,CAAC,SAAS,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

package/lib/components/PromotedFilters/PromotedFilters.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromotedFilters.types.js","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport { BaseProps } from '@pega/cosmos-react-core';\n\nimport type { Condition } from '../ConditionBuilder/ConditionBuilder.types';\nimport type {\n  ConditionInputMode,\n  ConditionFieldType\n} from '../ConditionInput/ConditionInput.types';\n\nexport interface PromotedFilter {\n  /** Unique field identifier. */\n  fieldName: string;\n  /** Type of the field. */\n  fieldType: ConditionFieldType;\n  /** Display mode. */\n  mode: ConditionInputMode;\n  /** Label for the filter. */\n  fieldLabel?: string;\n}\n\nexport interface PromotedFiltersProps extends BaseProps {\n  /** Configuration of filters for every field that has been defined as promoted. */\n  filters: PromotedFilter[];\n  /** A value representing the current condition state. */\n  condition?: Condition;\n  /** Callback fired on change of any of the filters. */\n  onChange: (condition?: Condition) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}
+{"version":3,"file":"PromotedFilters.types.js","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport type { Condition } from '../ConditionBuilder/ConditionBuilder.types';\nimport type {\n  ConditionInputMode,\n  ConditionFieldType\n} from '../ConditionInput/ConditionInput.types';\n\nexport interface PromotedFilter {\n  /** Unique field identifier. */\n  fieldName: string;\n  /** Type of the field. */\n  fieldType: ConditionFieldType;\n  /** Display mode. */\n  mode: ConditionInputMode;\n  /** Label for the filter. */\n  fieldLabel?: string;\n}\n\nexport interface PromotedFiltersProps extends BaseProps, NoChildrenProp {\n  /** Configuration of filters for every field that has been defined as promoted. */\n  filters: PromotedFilter[];\n  /** A value representing the current condition state. */\n  condition?: Condition;\n  /** Orientation mode. The default is horizontal. */\n  orientation?: 'vertical' | 'horizontal';\n  /** Callback fired on change of any of the filters. */\n  onChange: (condition?: Condition) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-condition-builder",
-  "version": "3.0.0-dev.16.1",
+  "version": "3.0.0-dev.17.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -23,7 +23,7 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "3.0.0-dev.16.1",
+    "@pega/cosmos-react-core": "3.0.0-dev.17.0",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
     "@types/styled-components": "^5.1.7",