npm - @pega/cosmos-react-condition-builder - Versions diffs - 4.0.0-dev.2.0 → 4.0.0-dev.20.0 - Mend

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

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

Files changed (96) hide show

package/lib/components/ConditionInput/utils.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { hasProp } from '@pega/cosmos-react-core';
 export const defaultComparators = {
     TEXT: 'CONTAINS',
     EMAIL: 'CONTAINS',
@@ -28,7 +29,7 @@ export const basicFieldMap = {
     DATE_TIME: 'DATE_TIME',
     PICKLIST: 'TEXT'
 };
-export const compareValues = (value1, value2) => {
+export const valuesEqual = (value1, value2) => {
     // both values are undefined
     if (!value1 && !value2)
         return true;
@@ -44,7 +45,7 @@ export const compareValues = (value1, value2) => {
         return false;
     return value1.every((value, index) => value === value2[index]);
 };
-export const compareRangeValues = (value1, value2) => {
+export const rangeValuesEqual = (value1, value2) => {
     // both values are undefined
     if (!value1 && !value2)
         return true;
@@ -53,4 +54,68 @@ export const compareRangeValues = (value1, value2) => {
         return false;
     return value1.start === value2.start && value1.end === value2.end;
 };
+export const conditionsEqual = (condition1, condition2) => {
+    // both values are undefined
+    if (!condition1 && !condition2)
+        return true;
+    // only one value is undefined
+    if (!condition1 || !condition2)
+        return false;
+    // conditions are for different fields
+    if (condition1.lhs?.field !== condition2.lhs?.field)
+        return false;
+    // comparators are different
+    if (condition1.comparator !== condition2.comparator)
+        return false;
+    // comparators are unary
+    if (!condition1.rhs && !condition2.rhs)
+        return true;
+    if (condition1.rhs && condition2.rhs) {
+        // datefunction is first, cause it contains also 'value' prop, so it would fall into next condition block
+        if (hasProp(condition1.rhs, 'dateFunction') && hasProp(condition2.rhs, 'dateFunction')) {
+            return (condition1.rhs.dateFunction === condition2.rhs.dateFunction &&
+                valuesEqual(condition1.rhs.value.toString(), condition2.rhs.value.toString()));
+        }
+        if (hasProp(condition1.rhs, 'value') && hasProp(condition2.rhs, 'value')) {
+            if (typeof condition1.rhs.value !== typeof condition2.rhs.value)
+                return false;
+            return valuesEqual(condition1.rhs.value.toString(), condition2.rhs.value.toString());
+        }
+        if (hasProp(condition1.rhs, 'values') && hasProp(condition2.rhs, 'values')) {
+            if (typeof condition1.rhs.values[0] !== typeof condition2.rhs.values[0])
+                return false;
+            return valuesEqual(condition1.rhs.values.map(p => p.toString()), condition2.rhs.values.map(p => p.toString()));
+        }
+        if (hasProp(condition1.rhs, 'start') && hasProp(condition2.rhs, 'start')) {
+            return rangeValuesEqual(condition1.rhs, condition2.rhs);
+        }
+        if (hasProp(condition1.rhs, 'relativeDate') && hasProp(condition2.rhs, 'relativeDate')) {
+            return (condition1.rhs.relativeDate.datePart === condition2.rhs.relativeDate.datePart &&
+                condition1.rhs.relativeDate.interval === condition2.rhs.relativeDate.interval &&
+                condition1.rhs.relativeDate.timePeriod === condition2.rhs.relativeDate.timePeriod);
+        }
+        if (hasProp(condition1.rhs, 'field') && hasProp(condition2.rhs, 'field')) {
+            return condition1.rhs.field === condition2.rhs.field;
+        }
+        if (hasProp(condition1.rhs, 'parameterId') && hasProp(condition2.rhs, 'parameterId')) {
+            return condition1.rhs.parameterId === condition2.rhs.parameterId;
+        }
+    }
+    return false;
+};
+export const convertFieldToConditionField = (lhs) => {
+    return lhs && hasProp(lhs, 'type')
+        ? {
+            name: lhs.id,
+            type: lhs.type === 'NUMBER' ? 'INTEGER' : lhs.type
+        }
+        : undefined;
+};
+export const possibleFieldValuesToConditionFieldValues = (possibleValues) => {
+    if (possibleValues === undefined || typeof possibleValues !== 'function')
+        return possibleValues;
+    return ({ searchString, comparator, lhs }) => {
+        return possibleValues({ searchString, comparator, lhs: convertFieldToConditionField(lhs) });
+    };
+};
 //# sourceMappingURL=utils.js.map

package/lib/components/ConditionInput/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/ConditionInput/utils.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,kBAAkB,GAA2C;IACxE,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,UAAU;IACjB,GAAG,EAAE,UAAU;IACf,KAAK,EAAE,UAAU;IACjB,OAAO,EAAE,KAAK;IACd,OAAO,EAAE,KAAK;IACd,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,IAAI;CACN,CAAC;AAEX,MAAM,CAAC,MAAM,aAAa,GAA0C;IAClE,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,MAAM;IACX,KAAK,EAAE,MAAM;IACb,OAAO,EAAE,QAAQ;IACjB,OAAO,EAAE,QAAQ;IACjB,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,SAAS,EAAE,WAAW;IACtB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE,MAAM;CACR,CAAC;AAEX,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,MAAqC,EACrC,MAAqC,EACrC,EAAE;IACF,4BAA4B;IAC5B,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEpC,8BAA8B;IAC9B,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM;QAAE,OAAO,KAAK,CAAC;IAErC,iCAAiC;IACjC,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;QAC9B,OAAO,MAAM,KAAK,MAAM,CAAC;KAC1B;IAED,4CAA4C;IAC5C,IAAI,MAAM,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM;QAAE,OAAO,KAAK,CAAC;IAElD,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AACjE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,MAA4F,EAC5F,MAA4F,EAC5F,EAAE;IACF,4BAA4B;IAC5B,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEpC,8BAA8B;IAC9B,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM;QAAE,OAAO,KAAK,CAAC;IAErC,OAAO,MAAM,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,GAAG,KAAK,MAAM,CAAC,GAAG,CAAC;AACpE,CAAC,CAAC","sourcesContent":["import type { Comparator, FieldType } from '../ConditionBuilder/core/types';\n\nimport type { ConditionFieldType } from './ConditionInput.types';\n\nexport const defaultComparators: Record<ConditionFieldType, Comparator> = {\n TEXT: 'CONTAINS',\n EMAIL: 'CONTAINS',\n URL: 'CONTAINS',\n PHONE: 'CONTAINS',\n INTEGER: 'BTW',\n DECIMAL: 'BTW',\n PERCENTAGE: 'BTW',\n CURRENCY: 'BTW',\n BOOLEAN: 'IS_TRUE',\n DATE_ONLY: 'BTW',\n TIME_ONLY: 'BTW',\n DATE_TIME: 'BTW',\n PICKLIST: 'IN'\n} as const;\n\nexport const 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 DATE_ONLY: 'DATE_ONLY',\n TIME_ONLY: 'TIME_ONLY',\n DATE_TIME: 'DATE_TIME',\n PICKLIST: 'TEXT'\n} as const;\n\nexport const compareValues = (\n value1: string \| string[] \| undefined,\n value2: string \| string[] \| undefined\n) => {\n // both values are undefined\n if (!value1 && !value2) return true;\n\n // only one value is undefined\n if (!value1 \|\| !value2) return false;\n\n // for strings compare only value\n if (typeof value1 === 'string') {\n return value1 === value2;\n }\n\n // for arrays compare length and every value\n if (value1.length !== value2.length) return false;\n\n return value1.every((value, index) => value === value2[index]);\n};\n\nexport const compareRangeValues = (\n value1: { start: string \| number \| undefined; end: string \| number \| undefined } \| undefined,\n value2: { start: string \| number \| undefined; end: string \| number \| undefined } \| undefined\n) => {\n // both values are undefined\n if (!value1 && !value2) return true;\n\n // only one value is undefined\n if (!value1 \|\| !value2) return false;\n\n return value1.start === value2.start && value1.end === value2.end;\n};\n"]}
1	+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/ConditionInput/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { hasProp } from '@pega/cosmos-react-core';\n\nimport { Field, LeafCondition, ValueSelection } from '../ConditionBuilder';\nimport type { Comparator, FieldType } from '../ConditionBuilder/core/types';\n\nimport type { ConditionField, ConditionFieldType } from './ConditionInput.types';\n\nexport const defaultComparators: Record<ConditionFieldType, Comparator> = {\n TEXT: 'CONTAINS',\n EMAIL: 'CONTAINS',\n URL: 'CONTAINS',\n PHONE: 'CONTAINS',\n INTEGER: 'BTW',\n DECIMAL: 'BTW',\n PERCENTAGE: 'BTW',\n CURRENCY: 'BTW',\n BOOLEAN: 'IS_TRUE',\n DATE_ONLY: 'BTW',\n TIME_ONLY: 'BTW',\n DATE_TIME: 'BTW',\n PICKLIST: 'IN'\n} as const;\n\nexport const 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 DATE_ONLY: 'DATE_ONLY',\n TIME_ONLY: 'TIME_ONLY',\n DATE_TIME: 'DATE_TIME',\n PICKLIST: 'TEXT'\n} as const;\n\nexport const valuesEqual = (\n value1: string \| string[] \| undefined,\n value2: string \| string[] \| undefined\n) => {\n // both values are undefined\n if (!value1 && !value2) return true;\n\n // only one value is undefined\n if (!value1 \|\| !value2) return false;\n\n // for strings compare only value\n if (typeof value1 === 'string') {\n return value1 === value2;\n }\n\n // for arrays compare length and every value\n if (value1.length !== value2.length) return false;\n\n return value1.every((value, index) => value === value2[index]);\n};\n\nexport const rangeValuesEqual = (\n value1: { start: string \| number \| undefined; end: string \| number \| undefined } \| undefined,\n value2: { start: string \| number \| undefined; end: string \| number \| undefined } \| undefined\n) => {\n // both values are undefined\n if (!value1 && !value2) return true;\n\n // only one value is undefined\n if (!value1 \|\| !value2) return false;\n\n return value1.start === value2.start && value1.end === value2.end;\n};\n\nexport const conditionsEqual = (\n condition1: LeafCondition \| undefined,\n condition2: LeafCondition \| undefined\n) => {\n // both values are undefined\n if (!condition1 && !condition2) return true;\n\n // only one value is undefined\n if (!condition1 \|\| !condition2) return false;\n\n // conditions are for different fields\n if (condition1.lhs?.field !== condition2.lhs?.field) return false;\n\n // comparators are different\n if (condition1.comparator !== condition2.comparator) return false;\n\n // comparators are unary\n if (!condition1.rhs && !condition2.rhs) return true;\n\n if (condition1.rhs && condition2.rhs) {\n // datefunction is first, cause it contains also 'value' prop, so it would fall into next condition block\n if (hasProp(condition1.rhs, 'dateFunction') && hasProp(condition2.rhs, 'dateFunction')) {\n return (\n condition1.rhs.dateFunction === condition2.rhs.dateFunction &&\n valuesEqual(condition1.rhs.value.toString(), condition2.rhs.value.toString())\n );\n }\n if (hasProp(condition1.rhs, 'value') && hasProp(condition2.rhs, 'value')) {\n if (typeof condition1.rhs.value !== typeof condition2.rhs.value) return false;\n return valuesEqual(condition1.rhs.value.toString(), condition2.rhs.value.toString());\n }\n if (hasProp(condition1.rhs, 'values') && hasProp(condition2.rhs, 'values')) {\n if (typeof condition1.rhs.values[0] !== typeof condition2.rhs.values[0]) return false;\n return valuesEqual(\n condition1.rhs.values.map(p => p.toString()),\n condition2.rhs.values.map(p => p.toString())\n );\n }\n if (hasProp(condition1.rhs, 'start') && hasProp(condition2.rhs, 'start')) {\n return rangeValuesEqual(condition1.rhs, condition2.rhs);\n }\n if (hasProp(condition1.rhs, 'relativeDate') && hasProp(condition2.rhs, 'relativeDate')) {\n return (\n condition1.rhs.relativeDate.datePart === condition2.rhs.relativeDate.datePart &&\n condition1.rhs.relativeDate.interval === condition2.rhs.relativeDate.interval &&\n condition1.rhs.relativeDate.timePeriod === condition2.rhs.relativeDate.timePeriod\n );\n }\n if (hasProp(condition1.rhs, 'field') && hasProp(condition2.rhs, 'field')) {\n return condition1.rhs.field === condition2.rhs.field;\n }\n if (hasProp(condition1.rhs, 'parameterId') && hasProp(condition2.rhs, 'parameterId')) {\n return condition1.rhs.parameterId === condition2.rhs.parameterId;\n }\n }\n\n return false;\n};\n\nexport const convertFieldToConditionField = (lhs?: Field) => {\n return lhs && hasProp(lhs, 'type')\n ? ({\n name: lhs.id,\n type: lhs.type === 'NUMBER' ? 'INTEGER' : lhs.type\n } as ConditionField)\n : undefined;\n};\n\nexport const possibleFieldValuesToConditionFieldValues = (\n possibleValues: ConditionField['possibleValues']\n): ValueSelection<Field> \| undefined => {\n if (possibleValues === undefined \|\| typeof possibleValues !== 'function') return possibleValues;\n\n return ({\n searchString,\n comparator,\n lhs\n }: {\n searchString?: string;\n comparator?: string;\n lhs?: Field;\n }) => {\n return possibleValues({ searchString, comparator, lhs: convertFieldToConditionField(lhs) });\n };\n};\n"]}

package/lib/components/PromotedFilters/ConditionSelector.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConditionSelector.d.ts","sourceRoot":"","sources":["../../../src/components/PromotedFilters/ConditionSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EAEL,SAAS,EAET,cAAc,EACd,aAAa,EAKb,YAAY,~~EAGb~~,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAE3E,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;~~AAEpD~~,UAAU,sBAAuB,SAAQ,SAAS,EAAE,cAAc;IAChE,4BAA4B;IAC5B,QAAQ,EAAE,CAAC,SAAS,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,uCAAuC;IACvC,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,mDAAmD;IACnD,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,4DAA4D;IAC5D,MAAM,EAAE,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IACvC,6CAA6C;IAC7C,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,aAAa,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACnE,oCAAoC;IACpC,SAAS,CAAC,EAAE,aAAa,CAAC;CAC3B;~~AAmCD~~,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAkF/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
1	+ {"version":3,"file":"ConditionSelector.d.ts","sourceRoot":"","sources":["../../../src/components/PromotedFilters/ConditionSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EAEL,SAAS,EAET,cAAc,EACd,aAAa,EAKb,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAE3E,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGpD,UAAU,sBAAuB,SAAQ,SAAS,EAAE,cAAc;IAChE,4BAA4B;IAC5B,QAAQ,EAAE,CAAC,SAAS,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,uCAAuC;IACvC,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,mDAAmD;IACnD,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,4DAA4D;IAC5D,MAAM,EAAE,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IACvC,6CAA6C;IAC7C,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,aAAa,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACnE,oCAAoC;IACpC,SAAS,CAAC,EAAE,aAAa,CAAC;CAC3B;AAED,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAkF/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/PromotedFilters/ConditionSelector.js CHANGED Viewed

@@ -1,36 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useRef } from 'react';
-import { useI18n, ComboBox, Button, Icon, useConfiguration, menuHelpers, hasProp } from '@pega/cosmos-react-core';
+import { useI18n, ComboBox, Button, Icon, useConfiguration, menuHelpers } from '@pega/cosmos-react-core';
 import formatCondition from '../ConditionBuilder/core/formatter';
-const equal = (c1, c2) => {
-    if (c1.comparator !== c2.comparator)
-        return false;
-    if (c1.rhs && c2.rhs) {
-        if (hasProp(c1.rhs, 'field') && hasProp(c2.rhs, 'field'))
-            return c1.rhs.field === c2.rhs.field;
-        if (hasProp(c1.rhs, 'dateFunction') && hasProp(c2.rhs, 'dateFunction')) {
-            return c1.rhs.dateFunction === c2.rhs.dateFunction && c1.rhs.value === c2.rhs.value;
-        }
-        if (hasProp(c1.rhs, 'value') && hasProp(c2.rhs, 'value'))
-            return c1.rhs.value === c2.rhs.value;
-        if (hasProp(c1.rhs, 'values') && hasProp(c2.rhs, 'values')) {
-            const rhs1 = c1.rhs;
-            const rhs2 = c2.rhs;
-            // due to https://github.com/microsoft/TypeScript/issues/44373
-            return (rhs1.values.length === rhs2.values.length &&
-                rhs1.values.every((v, i) => v === rhs2.values[i]));
-        }
-        if (hasProp(c1.rhs, 'parameterId') && hasProp(c2.rhs, 'parameterId')) {
-            return c1.rhs.parameterId === c2.rhs.parameterId;
-        }
-        if (hasProp(c1.rhs, 'relativeDate') && hasProp(c2.rhs, 'relativeDate')) {
-            return (c1.rhs.relativeDate.datePart === c2.rhs.relativeDate.datePart &&
-                c1.rhs.relativeDate.interval === c2.rhs.relativeDate.interval &&
-                c1.rhs.relativeDate.timePeriod === c2.rhs.relativeDate.timePeriod);
-        }
-    }
-    return c1.rhs === c2.rhs;
-};
+import { conditionsEqual } from '../ConditionInput/utils';
 const ConditionSelector = ({ onChange, onClear, status, label, info, fields, labelHidden, conditions, condition, ...restProps }) => {
     const t = useI18n();
     const { locale } = useConfiguration();
@@ -44,7 +16,7 @@ const ConditionSelector = ({ onChange, onClear, status, label, info, fields, lab
                         locale,
                         omitLhs: true
                     }),
-                selected: !!value && !!condition && equal(value, condition)
+                selected: !!value && !!condition && conditionsEqual(value, condition)
             };
         });
     }, [conditions, condition]);

package/lib/components/PromotedFilters/ConditionSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConditionSelector.js","sourceRoot":"","sources":["../../../src/components/PromotedFilters/ConditionSelector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAqB,MAAM,OAAO,CAAC;AAE3D,OAAO,EACL,OAAO,EAEP,QAAQ,EAGR,MAAM,EACN,IAAI,EACJ,gBAAgB,EAGhB,WAAW,~~EACX~~,~~OAAO,EACR,~~MAAM,yBAAyB,CAAC;AAGjC,OAAO,eAAe,MAAM,oCAAoC,CAAC;~~AAwBjE~~,~~MAAM,KAAK,GAAG,CAAC,EAAiB,EAAE,EAAiB,EAAE,EAAE;IACrD,IAAI,EAAE,CAAC,UAAU,KAAK,EAAE,CAAC,UAAU;QAAE,~~OAAO,~~KAAK,CAAC;IAElD,IAAI,~~EAAE,~~CAAC~~,~~GAAG,IAAI,~~EAAE,CAAC,GAAG,EAAE;QACpB,IAAI,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,IAAI,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC;YAAE,OAAO,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;QAC/F,IAAI,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,IAAI,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,EAAE;YACtE,OAAO,EAAE,CAAC,GAAG,CAAC,YAAY,KAAK,EAAE,CAAC,GAAG,CAAC,YAAY,IAAI,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;SACrF;QACD,IAAI,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,IAAI,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC;YAAE,OAAO,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;QAC/F,IAAI,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,IAAI,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,EAAE;YAC1D,MAAM,~~IAAI~~,~~GAAG,EAAE,~~CAAC~~,GAAG,CAAC~~;~~YACpB~~,MAAM,IAAI,GAAG,EAAE,CAAC,GAAG,CAAC;YACpB,8DAA8D;YAC9D,OAAO,CACL,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM;gBACxC,IAAI,CAAC,MAAoB,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CACjE,CAAC;SACH;QACD,IAAI,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,CAAC,IAAI,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,CAAC,EAAE;YACpE,OAAO,EAAE,CAAC,GAAG,CAAC,WAAW,KAAK,EAAE,CAAC,GAAG,CAAC,WAAW,CAAC;SAClD;QACD,IAAI,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,IAAI,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,EAAE;YACtE,OAAO,CACL,EAAE,CAAC,GAAG,CAAC,YAAY,CAAC,QAAQ,KAAK,EAAE,CAAC,GAAG,CAAC,YAAY,CAAC,QAAQ;gBAC7D,EAAE,CAAC,GAAG,CAAC,YAAY,CAAC,QAAQ,KAAK,EAAE,CAAC,GAAG,CAAC,YAAY,CAAC,QAAQ;gBAC7D,EAAE,CAAC,GAAG,CAAC,YAAY,CAAC,UAAU,KAAK,EAAE,CAAC,GAAG,CAAC,YAAY,CAAC,UAAU,CAClE,CAAC;SACH;KACF;IAED,OAAO,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,GAAG,CAAC;AAC3B,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAA6D,CAAC,EACnF,QAAQ,EACR,OAAO,EACP,MAAM,EACN,KAAK,EACL,IAAI,EACJ,MAAM,EACN,WAAW,EACX,UAAU,EACV,SAAS,EACT,GAAG,SAAS,EACW,EAAE,EAAE;IAC3B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAE;YAC7D,OAAO;gBACL,EAAE;gBACF,OAAO,EACL,cAAc;oBACd,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;wBAC/C,MAAM;wBACN,OAAO,EAAE,IAAI;qBACd,CAAC;gBACJ,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,SAAS,IAAI,~~KAAK~~,CAAC,KAAK,EAAE,SAAS,CAAC;~~aAC5D~~,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC;IAE5B,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAC/C,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,OAAO,CACL,KAAC,QAAQ,OACH,SAAS,EACb,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,KAAK,IAAI,CAAC,CAAC,yCAAyC,CAAC,EAC5D,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,EACrB,QAAQ,EACN,QAAQ;YACN,CAAC,CAAC;gBACE,KAAK,EAAE;oBACL,EAAE,EAAE,QAAQ,CAAC,EAAE;oBACf,IAAI,EAAE,QAAQ,CAAC,OAAO;iBACvB;aACF;YACH,CAAC,CAAC,SAAS,EAEf,IAAI,EAAE;YACJ,KAAK,EAAE,aAAa;YACpB,WAAW,EAAE,CAAC,EAAuB,EAAE,EAAE,CACvC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC;SACzD,EACD,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,8CAA8C,CAAC,CAAC,CAAC,CAAC,IAAI,EACnF,OAAO,EACL,OAAO;YACP,SAAS,KAAK,SAAS,IAAI,CACzB,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,EACjB,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO,EAAE,CAAC;gBACV,IAAI,QAAQ,CAAC,OAAO,EAAE;oBACpB,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;oBACxD,OAAO,EAAE,KAAK,EAAE,CAAC;iBAClB;YACH,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,CACV,GAEH,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { useMemo, useRef, FunctionComponent } from 'react';\n\nimport {\n useI18n,\n BaseProps,\n ComboBox,\n NoChildrenProp,\n ComboBoxProps,\n Button,\n Icon,\n useConfiguration,\n MenuItemProps,\n ForwardProps,\n menuHelpers~~,\n hasProp~~\n} from '@pega/cosmos-react-core';\n\nimport { AtomicConditionProps } from '../ConditionBuilder/AtomicCondition';\nimport formatCondition from '../ConditionBuilder/core/formatter';\nimport { LeafCondition } from '../ConditionBuilder';\n\ninterface ConditionSelectorProps extends BaseProps, NoChildrenProp {\n /** Callback for onChange /\n onChange: (condition?: LeafCondition) => void;\n /* Callback for clear /\n onClear?: () => void;\n /* Used to indicate any errors on the control /\n status?: 'error';\n /* Custom label for input. Makes label visible if provided. /\n label?: ComboBoxProps['label'];\n /* Visually hides the label region. /\n labelHidden?: ComboBoxProps['labelHidden'];\n /* Guidance text that apppears below the input. /\n info?: ComboBoxProps['info'];\n /* Definition of the field the condition is created for. /\n fields: AtomicConditionProps['fields'];\n /* List of possible predefined Conditions /\n conditions: { id: string; value: LeafCondition; label?: string }[];\n /* Currently selected condition. */\n condition?: LeafCondition;\n}\n\nconst equal = (c1: LeafCondition, c2: LeafCondition) => {\n if (c1.comparator !== c2.comparator) return false;\n\n if (c1.rhs && c2.rhs) {\n if (hasProp(c1.rhs, 'field') && hasProp(c2.rhs, 'field')) return c1.rhs.field === c2.rhs.field;\n if (hasProp(c1.rhs, 'dateFunction') && hasProp(c2.rhs, 'dateFunction')) {\n return c1.rhs.dateFunction === c2.rhs.dateFunction && c1.rhs.value === c2.rhs.value;\n }\n if (hasProp(c1.rhs, 'value') && hasProp(c2.rhs, 'value')) return c1.rhs.value === c2.rhs.value;\n if (hasProp(c1.rhs, 'values') && hasProp(c2.rhs, 'values')) {\n const rhs1 = c1.rhs;\n const rhs2 = c2.rhs;\n // due to https://github.com/microsoft/TypeScript/issues/44373\n return (\n rhs1.values.length === rhs2.values.length &&\n (rhs1.values as unknown[]).every((v, i) => v === rhs2.values[i])\n );\n }\n if (hasProp(c1.rhs, 'parameterId') && hasProp(c2.rhs, 'parameterId')) {\n return c1.rhs.parameterId === c2.rhs.parameterId;\n }\n if (hasProp(c1.rhs, 'relativeDate') && hasProp(c2.rhs, 'relativeDate')) {\n return (\n c1.rhs.relativeDate.datePart === c2.rhs.relativeDate.datePart &&\n c1.rhs.relativeDate.interval === c2.rhs.relativeDate.interval &&\n c1.rhs.relativeDate.timePeriod === c2.rhs.relativeDate.timePeriod\n );\n }\n }\n\n return c1.rhs === c2.rhs;\n};\n\nconst ConditionSelector: FunctionComponent<ConditionSelectorProps & ForwardProps> = ({\n onChange,\n onClear,\n status,\n label,\n info,\n fields,\n labelHidden,\n conditions,\n condition,\n ...restProps\n}: ConditionSelectorProps) => {\n const t = useI18n();\n const { locale } = useConfiguration();\n\n const inputRef = useRef<HTMLDivElement>(null);\n const itemsToRender = useMemo(() => {\n return conditions.map(({ id, label: conditionLabel, value }) => {\n return {\n id,\n primary:\n conditionLabel ??\n formatCondition({ condition: value }, fields, t, {\n locale,\n omitLhs: true\n }),\n selected: !!value && !!condition && ~~equal~~(value, condition)\n };\n });\n }, [conditions, condition]);\n\n const selected = useMemo<MenuItemProps \| undefined>(\n () => menuHelpers.getSelected(itemsToRender)[0],\n [itemsToRender]\n );\n\n return (\n <ComboBox\n {...restProps}\n ref={inputRef}\n mode='single-select'\n label={label ?? t('condition_builder_possible_values_label')}\n labelHidden={labelHidden}\n placeholder={t('all')}\n selected={\n selected\n ? {\n items: {\n id: selected.id,\n text: selected.primary\n }\n }\n : undefined\n }\n menu={{\n items: itemsToRender,\n onItemClick: (id: MenuItemProps['id']) =>\n onChange(conditions.find(cnd => cnd.id === id)?.value)\n }}\n status={status}\n info={status === 'error' ? t('condition_builder_empty_selection_error_text') : info}\n actions={\n onClear &&\n condition !== undefined && (\n <Button\n icon\n variant='simple'\n label={t('clear')}\n onClick={() => {\n onClear();\n if (inputRef.current) {\n const inputEl = inputRef.current.querySelector('input');\n inputEl?.focus();\n }\n }}\n >\n <Icon name='times' />\n </Button>\n )\n }\n />\n );\n};\n\nexport default ConditionSelector;\n"]}
1	+ {"version":3,"file":"ConditionSelector.js","sourceRoot":"","sources":["../../../src/components/PromotedFilters/ConditionSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, useRef, FunctionComponent } from 'react';\n\nimport {\n useI18n,\n BaseProps,\n ComboBox,\n NoChildrenProp,\n ComboBoxProps,\n Button,\n Icon,\n useConfiguration,\n MenuItemProps,\n ForwardProps,\n menuHelpers\n} from '@pega/cosmos-react-core';\n\nimport { AtomicConditionProps } from '../ConditionBuilder/AtomicCondition';\nimport formatCondition from '../ConditionBuilder/core/formatter';\nimport { LeafCondition } from '../ConditionBuilder';\nimport { conditionsEqual } from '../ConditionInput/utils';\n\ninterface ConditionSelectorProps extends BaseProps, NoChildrenProp {\n /** Callback for onChange /\n onChange: (condition?: LeafCondition) => void;\n /* Callback for clear /\n onClear?: () => void;\n /* Used to indicate any errors on the control /\n status?: 'error';\n /* Custom label for input. Makes label visible if provided. /\n label?: ComboBoxProps['label'];\n /* Visually hides the label region. /\n labelHidden?: ComboBoxProps['labelHidden'];\n /* Guidance text that apppears below the input. /\n info?: ComboBoxProps['info'];\n /* Definition of the field the condition is created for. /\n fields: AtomicConditionProps['fields'];\n /* List of possible predefined Conditions /\n conditions: { id: string; value: LeafCondition; label?: string }[];\n /* Currently selected condition. */\n condition?: LeafCondition;\n}\n\nconst ConditionSelector: FunctionComponent<ConditionSelectorProps & ForwardProps> = ({\n onChange,\n onClear,\n status,\n label,\n info,\n fields,\n labelHidden,\n conditions,\n condition,\n ...restProps\n}: ConditionSelectorProps) => {\n const t = useI18n();\n const { locale } = useConfiguration();\n\n const inputRef = useRef<HTMLDivElement>(null);\n const itemsToRender = useMemo(() => {\n return conditions.map(({ id, label: conditionLabel, value }) => {\n return {\n id,\n primary:\n conditionLabel ??\n formatCondition({ condition: value }, fields, t, {\n locale,\n omitLhs: true\n }),\n selected: !!value && !!condition && conditionsEqual(value, condition)\n };\n });\n }, [conditions, condition]);\n\n const selected = useMemo<MenuItemProps \| undefined>(\n () => menuHelpers.getSelected(itemsToRender)[0],\n [itemsToRender]\n );\n\n return (\n <ComboBox\n {...restProps}\n ref={inputRef}\n mode='single-select'\n label={label ?? t('condition_builder_possible_values_label')}\n labelHidden={labelHidden}\n placeholder={t('all')}\n selected={\n selected\n ? {\n items: {\n id: selected.id,\n text: selected.primary\n }\n }\n : undefined\n }\n menu={{\n items: itemsToRender,\n onItemClick: (id: MenuItemProps['id']) =>\n onChange(conditions.find(cnd => cnd.id === id)?.value)\n }}\n status={status}\n info={status === 'error' ? t('condition_builder_empty_selection_error_text') : info}\n actions={\n onClear &&\n condition !== undefined && (\n <Button\n icon\n variant='simple'\n label={t('clear')}\n onClick={() => {\n onClear();\n if (inputRef.current) {\n const inputEl = inputRef.current.querySelector('input');\n inputEl?.focus();\n }\n }}\n >\n <Icon name='times' />\n </Button>\n )\n }\n />\n );\n};\n\nexport default ConditionSelector;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PromotedFilters.d.ts","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,~~EAMlB~~,MAAM,OAAO,CAAC;AAEf,OAAO,EAGL,YAAY,~~EAQb~~,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAiB,MAAM,4CAA4C,CAAC;AAOtF,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;~~AAmKD~~,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,~~CAkHlF~~,CAAC;AAEF,eAAe,eAAe,CAAC"}
1	+ {"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,EASb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAiB,MAAM,4CAA4C,CAAC;AAOtF,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;AAyND,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAqHlF,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/PromotedFilters/PromotedFilters.js CHANGED Viewed

@@ -1,16 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useRef, useState, useImperativeHandle } from 'react';
 import { Button, Flex, Icon, Modal, useModalManager, useBreakpoint, useI18n, useModalContext } from '@pega/cosmos-react-core';
 import { splitConditionForBuilder } from '../ConditionBuilder/core/utils';
 import ConditionInput from '../ConditionInput';
-import { StyledFieldGroup } from '../ConditionInput/ConditionInput.styles';
+import { StyledVerticalFieldGroup } from '../ConditionInput/ConditionInput.styles';
 import { basicFieldMap } from '../ConditionInput/utils';
 import ConditionSelector from './ConditionSelector';
 import { StyledPromotedFilters, StyledClearAllButton, StyledTextWithEllipsis } from './PromotedFilters.styles';
-const PromotedFiltersContent = forwardRef(({ filters, condition, onChange, orientation: orientationProp = 'horizontal' }, ref) => {
+const PromotedFiltersContent = forwardRef(({ filters, condition, onChange, orientation: orientationProp = 'horizontal', handle }, ref) => {
     const t = useI18n();
     const isSmallOrAbove = useBreakpoint('sm');
     const orientation = isSmallOrAbove && orientationProp === 'horizontal' ? 'horizontal' : 'vertical';
+    const [collapsed, setCollapsed] = useState(false);
     // map of Conditions indexed by field name
     const conditionsMap = condition
         ? splitConditionForBuilder(condition).rows.reduce((result, item) => {
@@ -34,15 +35,45 @@ const PromotedFiltersContent = forwardRef(({ filters, condition, onChange, orien
                 })
             };
     };
+    // list of fields names used to count down onChange callbacks when Clear All action is invoked
+    // if undefined - Clear All was not triggered
+    // if stores any values - Clear All is in progress, waiting for all onChange callbacks to be invoked
+    const fieldsToClear = useRef(undefined);
+    const handleOnChange = (fieldName, newCondition) => {
+        // single onChange was invoked
+        if (fieldsToClear.current === undefined) {
+            onChange(createUpdatedCondition(fieldName, newCondition));
+        }
+        // prevent main onChange from being called for every onChange invoked from ConditionInput, when Clear All action was run
+        // counting down onChange callbacks, to wait when all are done
+        else {
+            fieldsToClear.current.delete(fieldName);
+            if (fieldsToClear.current.size === 0)
+                fieldsToClear.current = undefined;
+        }
+    };
+    // ref to store clear handles for all filters
+    const handlesRef = useRef([]);
+    useImperativeHandle(handle, () => ({
+        clear: () => {
+            // initialize array with all fields, which trigger onChange callbacks
+            fieldsToClear.current = new Set(handlesRef.current.filter(Boolean).map(c => {
+                return c.id;
+            }));
+            handlesRef.current.forEach(item => item.handle.clear());
+            onChange();
+        }
+    }), [onChange]);
     return (_jsx(Flex, { container: {
-            gap: 2,
+            rowGap: 1,
+            colGap: 2,
             direction: orientation === 'vertical' ? 'column' : 'row',
             wrap: 'wrap',
             alignItems: orientation === 'vertical' ? 'stretch' : 'start'
-        }, ref: ref, children: filters.map(({ field, mode, label, predefinedConditions }) => {
+        }, ref: ref, children: filters.map(({ field, mode, label, predefinedConditions }, i) => {
             if (mode !== 'predefined')
-                return (_jsx(ConditionInput, { field: field, mode: mode, label: label ?? field.name, condition: conditionsMap[field.name], flat: orientation === 'vertical', onChange: (newCondition) => {
-                        onChange(createUpdatedCondition(field.name, newCondition));
+                return (_jsx(ConditionInput, { field: field, mode: mode, label: label ?? field.name, condition: conditionsMap[field.name], flat: orientation === 'vertical', onChange: newCondition => handleOnChange(field.name, newCondition), handle: (handleItem) => {
+                        handlesRef.current[i] = { id: field.name, handle: handleItem };
                     } }, field.name));
             const selector = (_jsx(ConditionSelector, { label: label ?? field.name, labelHidden: orientation === 'vertical', fields: [
                     {
@@ -55,7 +86,7 @@ const PromotedFiltersContent = forwardRef(({ filters, condition, onChange, orien
                 }, onClear: orientation === 'horizontal'
                     ? () => onChange(createUpdatedCondition(field.name, undefined))
                     : undefined }, field.name));
-            return orientation === 'vertical' ? (_jsx(StyledFieldGroup, { name: label ?? field.name, collapsible: true, actions: [
+            return orientation === 'vertical' ? (_jsx(StyledVerticalFieldGroup, { name: label ?? field.name, collapsed: collapsed, onToggleCollapsed: () => setCollapsed(cur => !cur), actions: [
                     {
                         id: 'clear',
                         text: t('clear'),
@@ -72,10 +103,12 @@ const FilterModal = ({ filters, condition, onApply }) => {
         onApply?.(newCondition);
         dismiss();
     }, [newCondition, onApply]);
+    const clearHandle = useRef(null);
     const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: dismiss, children: t('cancel') }), _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' })] }));
+                        clearHandle.current?.clear();
+                    }, children: t('clear_all') }) }), _jsx(PromotedFiltersContent, { filters: filters, condition: newCondition, onChange: setNewCondition, orientation: 'vertical', handle: clearHandle })] }));
 };
 export const PromotedFilters = forwardRef(({ filters, condition, onChange, orientation = 'horizontal' }, ref) => {
     const t = useI18n();
@@ -97,6 +130,7 @@ export const PromotedFilters = forwardRef(({ filters, condition, onChange, orien
             onApply: onChange
         });
     };
+    const clearHandle = useRef(null);
     return (_jsx(Flex, { as: StyledPromotedFilters, container: {
             alignItems: orientation === 'horizontal' && isSmallOrAbove ? 'start' : undefined,
             justify: 'between',
@@ -108,9 +142,9 @@ export const PromotedFilters = forwardRef(({ filters, condition, onChange, orien
                         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();
+                                clearHandle.current?.clear();
+                            }, children: t('clear_all') })] })), _jsx(PromotedFiltersContent, { filters: filters, onChange: onChange, condition: condition, orientation: orientation, ref: ref, handle: clearHandle }), orientation === 'horizontal' && (_jsx("div", { children: _jsx(StyledClearAllButton, { variant: 'simple', onClick: () => {
+                            clearHandle.current?.clear();
                         }, 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('clear_all') })] })) }));

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

	@@ -1 +1 @@
1	- {"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 useEffect,\n useRef,\n useState\n} from 'react';\n\nimport {\n Button,\n Flex,\n ForwardProps,\n Icon,\n Modal,\n ModalMethods,\n useModalManager,\n useBreakpoint,\n useI18n,\n useModalContext\n} from '@pega/cosmos-react-core';\n\nimport { Condition, LeafCondition } from '../ConditionBuilder/ConditionBuilder.types';\nimport { splitConditionForBuilder } from '../ConditionBuilder/core/utils';\nimport ConditionInput from '../ConditionInput';\nimport { StyledFieldGroup } from '../ConditionInput/ConditionInput.styles';\nimport { basicFieldMap } from '../ConditionInput/utils';\n\nimport ConditionSelector from './ConditionSelector';\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 t = useI18n();\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 const { id, label, ...leaf } = item;\n result[item.lhs.field] = leaf;\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 Object.values(conditionsMap).length === 0\n ? undefined\n : {\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 alignItems: orientation === 'vertical' ? 'stretch' : 'start'\n }}\n ref={ref}\n >\n {filters.map(({ field, mode, label, predefinedConditions }) => {\n if (mode !== 'predefined')\n return (\n <ConditionInput\n key={field.name}\n field={field}\n mode={mode}\n label={label ?? field.name}\n condition={conditionsMap[field.name]}\n flat={orientation === 'vertical'}\n onChange={(newCondition?: LeafCondition) => {\n onChange(createUpdatedCondition(field.name, newCondition));\n }}\n />\n );\n\n const selector = (\n <ConditionSelector\n key={field.name}\n label={label ?? field.name}\n labelHidden={orientation === 'vertical'}\n fields={[\n {\n id: field.name,\n type: basicFieldMap[field.type],\n primary: label \|\| field.name\n }\n ]}\n condition={conditionsMap[field.name]}\n conditions={predefinedConditions ?? []}\n onChange={(newCondition?: LeafCondition) => {\n onChange(createUpdatedCondition(field.name, newCondition));\n }}\n onClear={\n orientation === 'horizontal'\n ? () => onChange(createUpdatedCondition(field.name, undefined))\n : undefined\n }\n />\n );\n\n return orientation === 'vertical' ? (\n <StyledFieldGroup\n key={field.name}\n name={label ?? field.name}\n collapsible\n actions={[\n {\n id: 'clear',\n text: t('clear'),\n onClick: () => onChange(createUpdatedCondition(field.name, undefined))\n }\n ]}\n >\n {selector}\n </StyledFieldGroup>\n ) : (\n selector\n );\n })}\n </Flex>\n );\n }\n);\n\nconst FilterModal = ({ filters, condition, onApply }: FilterModalProps) => {\n const t = useI18n();\n\n const { dismiss } = useModalContext();\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 <>\n <Button onClick={dismiss}>{t('cancel')}</Button>\n <Button variant='primary' onClick={onApplyClick}>\n {t('apply')}\n </Button>\n </>\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 } = useModalManager();\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"]}
1	+ {"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 useEffect,\n useRef,\n useState,\n useImperativeHandle\n} from 'react';\n\nimport {\n Button,\n Flex,\n ForwardProps,\n Icon,\n Modal,\n ModalMethods,\n useModalManager,\n useBreakpoint,\n useI18n,\n useModalContext,\n HandleValue\n} from '@pega/cosmos-react-core';\n\nimport { Condition, LeafCondition } from '../ConditionBuilder/ConditionBuilder.types';\nimport { splitConditionForBuilder } from '../ConditionBuilder/core/utils';\nimport ConditionInput from '../ConditionInput';\nimport { StyledVerticalFieldGroup } from '../ConditionInput/ConditionInput.styles';\nimport { basicFieldMap } from '../ConditionInput/utils';\n\nimport ConditionSelector from './ConditionSelector';\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\ninterface HandleValueObj {\n /* Identifier for the corresponding field /\n id: string;\n /* Handle value for clear action */\n handle: HandleValue;\n}\n\nconst PromotedFiltersContent: FunctionComponent<PromotedFiltersProps & ForwardProps> = forwardRef(\n (\n {\n filters,\n condition,\n onChange,\n orientation: orientationProp = 'horizontal',\n handle\n }: PropsWithoutRef<PromotedFiltersProps>,\n ref: PromotedFiltersProps['ref']\n ) => {\n const t = useI18n();\n const isSmallOrAbove = useBreakpoint('sm');\n const orientation =\n isSmallOrAbove && orientationProp === 'horizontal' ? 'horizontal' : 'vertical';\n const [collapsed, setCollapsed] = useState(false);\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 const { id, label, ...leaf } = item;\n result[item.lhs.field] = leaf;\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 Object.values(conditionsMap).length === 0\n ? undefined\n : {\n AND: Object.values(conditionsMap).map(c => {\n return { condition: c } as Condition;\n })\n };\n };\n\n // list of fields names used to count down onChange callbacks when Clear All action is invoked\n // if undefined - Clear All was not triggered\n // if stores any values - Clear All is in progress, waiting for all onChange callbacks to be invoked\n const fieldsToClear = useRef<Set<string> \| undefined>(undefined);\n\n const handleOnChange = (fieldName: string, newCondition?: LeafCondition) => {\n // single onChange was invoked\n if (fieldsToClear.current === undefined) {\n onChange(createUpdatedCondition(fieldName, newCondition));\n }\n // prevent main onChange from being called for every onChange invoked from ConditionInput, when Clear All action was run\n // counting down onChange callbacks, to wait when all are done\n else {\n fieldsToClear.current.delete(fieldName);\n if (fieldsToClear.current.size === 0) fieldsToClear.current = undefined;\n }\n };\n\n // ref to store clear handles for all filters\n const handlesRef = useRef<HandleValueObj[]>([]);\n\n useImperativeHandle(\n handle,\n () => ({\n clear: () => {\n // initialize array with all fields, which trigger onChange callbacks\n fieldsToClear.current = new Set(\n handlesRef.current.filter(Boolean).map(c => {\n return c.id;\n })\n );\n handlesRef.current.forEach(item => item.handle.clear());\n onChange();\n }\n }),\n [onChange]\n );\n\n return (\n <Flex\n container={{\n rowGap: 1,\n colGap: 2,\n direction: orientation === 'vertical' ? 'column' : 'row',\n wrap: 'wrap',\n alignItems: orientation === 'vertical' ? 'stretch' : 'start'\n }}\n ref={ref}\n >\n {filters.map(({ field, mode, label, predefinedConditions }, i) => {\n if (mode !== 'predefined')\n return (\n <ConditionInput\n key={field.name}\n field={field}\n mode={mode}\n label={label ?? field.name}\n condition={conditionsMap[field.name]}\n flat={orientation === 'vertical'}\n onChange={newCondition => handleOnChange(field.name, newCondition)}\n handle={(handleItem: HandleValue) => {\n handlesRef.current[i] = { id: field.name, handle: handleItem };\n }}\n />\n );\n\n const selector = (\n <ConditionSelector\n key={field.name}\n label={label ?? field.name}\n labelHidden={orientation === 'vertical'}\n fields={[\n {\n id: field.name,\n type: basicFieldMap[field.type],\n primary: label \|\| field.name\n }\n ]}\n condition={conditionsMap[field.name]}\n conditions={predefinedConditions ?? []}\n onChange={(newCondition?: LeafCondition) => {\n onChange(createUpdatedCondition(field.name, newCondition));\n }}\n onClear={\n orientation === 'horizontal'\n ? () => onChange(createUpdatedCondition(field.name, undefined))\n : undefined\n }\n />\n );\n\n return orientation === 'vertical' ? (\n <StyledVerticalFieldGroup\n key={field.name}\n name={label ?? field.name}\n collapsed={collapsed}\n onToggleCollapsed={() => setCollapsed(cur => !cur)}\n actions={[\n {\n id: 'clear',\n text: t('clear'),\n onClick: () => onChange(createUpdatedCondition(field.name, undefined))\n }\n ]}\n >\n {selector}\n </StyledVerticalFieldGroup>\n ) : (\n selector\n );\n })}\n </Flex>\n );\n }\n);\n\nconst FilterModal = ({ filters, condition, onApply }: FilterModalProps) => {\n const t = useI18n();\n\n const { dismiss } = useModalContext();\n const [newCondition, setNewCondition] = useState<Condition \| undefined>(condition);\n\n const onApplyClick = useCallback(() => {\n onApply?.(newCondition);\n dismiss();\n }, [newCondition, onApply]);\n\n const clearHandle = useRef<HandleValue>(null);\n\n const actions = (\n <>\n <Button onClick={dismiss}>{t('cancel')}</Button>\n <Button variant='primary' onClick={onApplyClick}>\n {t('apply')}\n </Button>\n </>\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 clearHandle.current?.clear();\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 handle={clearHandle}\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 } = useModalManager();\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 const clearHandle = useRef<HandleValue>(null);\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 clearHandle.current?.clear();\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 handle={clearHandle}\n />\n\n {orientation === 'horizontal' && (\n <div>\n <StyledClearAllButton\n variant='simple'\n onClick={() => {\n clearHandle.current?.clear();\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.map CHANGED Viewed

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"PromotedFilters.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,qBAAqB,yGAgBhC,CAAC;AAIH,eAAO,MAAM,oBAAoB,qOAOhC,CAAC;AAIF,eAAO,MAAM,sBAAsB,mOAIlC,CAAC"}

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

@@ -1,10 +1,22 @@
 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';
+import { StyledSelectInput } from '@pega/cosmos-react-core/lib/components/ComboBox/ComboBox.styles';
 export const StyledPromotedFilters = styled.div(({ theme }) => {
     return css `
     border-radius: ${theme.components.card['border-radius']};
     background-color: ${theme.base.palette['secondary-background']};
+    padding-block: ${theme.base.spacing};
+    ${StyledSelectInput} {
+      min-width: calc(${theme.base['content-width'].xs} + ${theme.base['hit-area']['mouse-min']});
+      @media (pointer: coarse) {
+        min-width: calc(
+          ${theme.base['content-width'].xs} + ${theme.base['hit-area']['finger-min']}
+        );
+      }
+    }
   `;
 });
 StyledPromotedFilters.defaultProps = defaultThemeProp;

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

	@@ -1 +1 @@
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"]}
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;AACpG,OAAO,EAAE,iBAAiB,EAAE,MAAM,iEAAiE,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;qBAC7C,KAAK,CAAC,IAAI,CAAC,OAAO;;MAEjC,iBAAiB;wBACC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;;;;YAInF,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;GAIjF,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';\nimport { StyledSelectInput } from '@pega/cosmos-react-core/lib/components/ComboBox/ComboBox.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 padding-block: ${theme.base.spacing};\n\n ${StyledSelectInput} {\n min-width: calc(${theme.base['content-width'].xs} + ${theme.base['hit-area']['mouse-min']});\n\n @media (pointer: coarse) {\n min-width: calc(\n ${theme.base['content-width'].xs} + ${theme.base['hit-area']['finger-min']}\n );\n }\n }\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 CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Ref } from 'react';
-import { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { BaseProps, HandleValue, NoChildrenProp } from '@pega/cosmos-react-core';
 import type { Condition, LeafCondition } from '../ConditionBuilder/ConditionBuilder.types';
 import type { ConditionInputMode, ConditionField } from '../ConditionInput/ConditionInput.types';
 export interface PromotedFilter {
@@ -27,5 +27,7 @@ export interface PromotedFiltersProps extends BaseProps, NoChildrenProp {
     onChange: (condition?: Condition) => void;
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLDivElement>;
+    /** Imperative handle */
+    handle?: Ref<HandleValue>;
 }
 //# sourceMappingURL=PromotedFilters.types.d.ts.map

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

	@@ -1 +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,cAAc,EAAE,MAAM,yBAAyB,CAAC;~~AAEpE~~,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3F,OAAO,KAAK,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAEjG,MAAM,WAAW,cAAc;IAC7B,8CAA8C;IAC9C,KAAK,EAAE,cAAc,CAAC;IACtB,oBAAoB;IACpB,IAAI,EAAE,kBAAkB,CAAC;IACzB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,oBAAoB,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,aAAa,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC/E;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"}
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,WAAW,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEjF,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3F,OAAO,KAAK,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAEjG,MAAM,WAAW,cAAc;IAC7B,8CAA8C;IAC9C,KAAK,EAAE,cAAc,CAAC;IACtB,oBAAoB;IACpB,IAAI,EAAE,kBAAkB,CAAC;IACzB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,oBAAoB,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,aAAa,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC/E;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;IAC1B,wBAAwB;IACxB,MAAM,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CAC3B"}

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

	@@ -1 +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, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport type { Condition, LeafCondition } from '../ConditionBuilder/ConditionBuilder.types';\nimport type { ConditionInputMode, ConditionField } from '../ConditionInput/ConditionInput.types';\n\nexport interface PromotedFilter {\n /** Definition of the field to be filtered. /\n field: ConditionField;\n /* Display mode. /\n mode: ConditionInputMode;\n /* Label for the filter. /\n label?: string;\n /* List of possible predefined Conditions /\n predefinedConditions?: { id: string; value: LeafCondition; label?: 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"]}
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, HandleValue, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport type { Condition, LeafCondition } from '../ConditionBuilder/ConditionBuilder.types';\nimport type { ConditionInputMode, ConditionField } from '../ConditionInput/ConditionInput.types';\n\nexport interface PromotedFilter {\n /** Definition of the field to be filtered. /\n field: ConditionField;\n /* Display mode. /\n mode: ConditionInputMode;\n /* Label for the filter. /\n label?: string;\n /* List of possible predefined Conditions /\n predefinedConditions?: { id: string; value: LeafCondition; label?: 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 /* Imperative handle */\n handle?: Ref<HandleValue>;\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,13 +1,17 @@
 {
   "name": "@pega/cosmos-react-condition-builder",
-  "version": "4.0.0-dev.2.0",
-  "author": "Pegasystems",
-  "license": "SEE LICENSE IN LICENSE",
+  "version": "4.0.0-dev.20.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/pegasystems/cosmos-react.git",
     "directory": "packages/cosmos-condition-builder"
   },
+  "license": "SEE LICENSE IN LICENSE",
+  "author": "Pegasystems",
+  "sideEffects": [
+    "./src/components/ConditionBuilder/core/extendDayJs.ts",
+    "./lib/components/ConditionBuilder/core/extendDayJs.js"
+  ],
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [
@@ -15,15 +19,11 @@
     "README.md",
     "lib"
   ],
-  "sideEffects": [
-    "./src/components/ConditionBuilder/core/extendDayJs.ts",
-    "./lib/components/ConditionBuilder/core/extendDayJs.js"
-  ],
   "scripts": {
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "4.0.0-dev.2.0",
+    "@pega/cosmos-react-core": "4.0.0-dev.20.0",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
     "@types/styled-components": "^5.1.26",
@@ -43,6 +43,6 @@
     "@storybook/theming": "^6.4.19",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
-    "typescript": "~4.7.2"
+    "typescript": "~5.0.2"
   }
 }

package/lib/components/ConditionBuilder/HelpButton.d.ts DELETED Viewed

@@ -1,10 +0,0 @@
-import { FunctionComponent } from 'react';
-import { BaseProps, ForwardProps } from '@pega/cosmos-react-core';
-interface HelpButtonProps extends BaseProps {
-    /** Content to show on hover of the button */
-    children: string;
-}
-/** Renders an inline Help icon that shows help content on hover */
-declare const HelpButton: FunctionComponent<HelpButtonProps & ForwardProps>;
-export default HelpButton;
-//# sourceMappingURL=HelpButton.d.ts.map

package/lib/components/ConditionBuilder/HelpButton.d.ts.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"HelpButton.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/HelpButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAGL,SAAS,EACT,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAEjC,UAAU,eAAgB,SAAQ,SAAS;IACzC,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,mEAAmE;AACnE,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAejE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/ConditionBuilder/HelpButton.js DELETED Viewed

@@ -1,11 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon, Tooltip, useElement, useUID } from '@pega/cosmos-react-core';
-/** Renders an inline Help icon that shows help content on hover */
-const HelpButton = (props) => {
-    const { children } = props;
-    const [iconEl, setIconEl] = useElement();
-    const id = useUID();
-    return (_jsxs(_Fragment, { children: [_jsx(Icon, { name: 'information', ref: setIconEl, "aria-describedby": id }), iconEl && (_jsx(Tooltip, { target: iconEl, id: id, children: children }))] }));
-};
-export default HelpButton;
-//# sourceMappingURL=HelpButton.js.map

package/lib/components/ConditionBuilder/HelpButton.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"HelpButton.js","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/HelpButton.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,IAAI,EACJ,OAAO,EAGP,UAAU,EACV,MAAM,EACP,MAAM,yBAAyB,CAAC;AAOjC,mEAAmE;AACnE,MAAM,UAAU,GAAsD,CAAC,KAAsB,EAAE,EAAE;IAC/F,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,UAAU,EAAE,CAAC;IACzC,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IAEpB,OAAO,CACL,8BACE,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,GAAG,EAAE,SAAS,sBAAoB,EAAE,GAAI,EAChE,MAAM,IAAI,CACT,KAAC,OAAO,IAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,YAC5B,QAAQ,GACD,CACX,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\n\nimport {\n Icon,\n Tooltip,\n BaseProps,\n ForwardProps,\n useElement,\n useUID\n} from '@pega/cosmos-react-core';\n\ninterface HelpButtonProps extends BaseProps {\n /** Content to show on hover of the button */\n children: string;\n}\n\n/** Renders an inline Help icon that shows help content on hover */\nconst HelpButton: FunctionComponent<HelpButtonProps & ForwardProps> = (props: HelpButtonProps) => {\n const { children } = props;\n const [iconEl, setIconEl] = useElement();\n const id = useUID();\n\n return (\n <>\n <Icon name='information' ref={setIconEl} aria-describedby={id} />\n {iconEl && (\n <Tooltip target={iconEl} id={id}>\n {children}\n </Tooltip>\n )}\n </>\n );\n};\n\nexport default HelpButton;\n"]}