npm - @pega/cosmos-react-condition-builder - Versions diffs - 8.0.0-build.3.2 → 8.0.0-build.30.0 - Mend

@pega/cosmos-react-condition-builder 8.0.0-build.3.2 → 8.0.0-build.30.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 (69) hide show

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

@@ -1,50 +1,61 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-import { Button, Flex, Icon, Modal, useModalManager, useBreakpoint, useI18n, useModalContext, hasProp } from '@pega/cosmos-react-core';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Button, Flex, Icon, Modal, useModalManager, useBreakpoint, useI18n, useModalContext, hasProp, useSimpleStore, useSimpleStoreInstance } from '@pega/cosmos-react-core';
 import { splitConditionForBuilder } from '../ConditionBuilder/core/utils';
 import ConditionInput from '../ConditionInput';
 import { StyledVerticalFieldGroup } from '../ConditionInput/ConditionInput.styles';
-import { basicFieldMap } from '../ConditionInput/utils';
+import { basicFieldMap, conditionsEqual } from '../ConditionInput/utils';
 import ConditionSelector from './ConditionSelector';
-import { StyledPromotedFilters, StyledClearAllButton, StyledTextWithEllipsis } from './PromotedFilters.styles';
-const PromotedFiltersContent = forwardRef(function PromotedFiltersContent({ filters, condition, onChange, orientation: orientationProp = 'horizontal' }, 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) => {
-            const { id, label, ...leaf } = item;
-            result[item.lhs.field] = leaf;
-            return result;
-        }, {})
-        : {};
-    const createUpdatedCondition = (key, newCondition) => {
+import { StyledPromotedFilters, StyledTextWithEllipsis, StyledPromotedFiltersButton } from './PromotedFilters.styles';
+const isValidNewCondition = (newCondition) => {
+    if (!newCondition?.rhs)
+        return true;
+    if (!hasProp(newCondition.rhs, 'start') && !hasProp(newCondition.rhs, 'end'))
+        return true;
+    return !Number.isNaN(newCondition.rhs.start) && !Number.isNaN(newCondition.rhs.end);
+};
+const generateCondition = (value) => {
+    const storeValues = Object.values(value);
+    return storeValues.length === 0
+        ? undefined
+        : {
+            AND: storeValues.map(c => ({ condition: c }))
+        };
+};
+const withStore = (WrappedComponent) => memo(({ conditionStore, filterId, ...componentProps }) => {
+    const [storeValue, setStore] = useSimpleStore(conditionStore, val => val[filterId], conditionsEqual);
+    const handleOnChange = (newCondition) => {
+        if (!isValidNewCondition(newCondition))
+            return;
         if (newCondition) {
-            conditionsMap[key] = newCondition;
+            if (!newCondition.filterId && filterId !== newCondition.lhs?.field)
+                newCondition = { ...newCondition, filterId };
+            setStore(cur => ({
+                ...cur,
+                [filterId]: newCondition
+            }));
         }
         else {
-            delete conditionsMap[key];
+            setStore(({ ...cur }) => {
+                delete cur[filterId];
+                return cur;
+            });
         }
-        return Object.values(conditionsMap).length === 0
-            ? undefined
-            : {
-                AND: Object.values(conditionsMap).map(c => {
-                    return { condition: c };
-                })
-            };
-    };
-    const isValidNewCondition = (newCondition) => {
-        if (!newCondition?.rhs)
-            return true;
-        if (!hasProp(newCondition.rhs, 'start') && !hasProp(newCondition.rhs, 'end'))
-            return true;
-        return !Number.isNaN(newCondition.rhs.start) && !Number.isNaN(newCondition.rhs.end);
     };
-    const handleOnChange = (fieldName, newCondition) => {
-        if (isValidNewCondition(newCondition))
-            onChange(createUpdatedCondition(fieldName, newCondition));
+    return (_jsx(WrappedComponent, { condition: storeValue, ...componentProps, onChange: handleOnChange }));
+});
+const ConditionInputWithStore = withStore(ConditionInput);
+const ConditionSelectorWithStore = withStore(ConditionSelector);
+const PromotedFiltersContent = memo(forwardRef(function PromotedFiltersContent({ filters, conditionStore, orientation: orientationProp = 'horizontal', fields }, ref) {
+    const t = useI18n();
+    const isSmallOrAbove = useBreakpoint('sm');
+    const orientation = isSmallOrAbove && orientationProp === 'horizontal' ? 'horizontal' : 'vertical';
+    const [collapsed, setCollapsed] = useState(false);
+    const onClear = (fieldName) => {
+        conditionStore.setStore(cur => {
+            delete cur[fieldName];
+            return cur;
+        });
     };
     return (_jsx(Flex, { container: {
             rowGap: 1,
@@ -52,59 +63,79 @@ const PromotedFiltersContent = forwardRef(function PromotedFiltersContent({ filt
             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(({ id, field, mode, label, predefinedConditions }) => {
+            id = id ?? field.name;
             if (mode !== 'predefined')
-                return (_jsx(ConditionInput, { field: field, mode: mode, label: label ?? field.name, condition: conditionsMap[field.name], flat: orientation === 'vertical', onChange: newCondition => handleOnChange(field.name, newCondition) }, field.name));
-            const selector = (_jsx(ConditionSelector, { label: label ?? field.name, labelHidden: orientation === 'vertical', fields: [
+                return (_jsx(ConditionInputWithStore, { conditionStore: conditionStore, filterId: id, field: field, mode: mode, label: label ?? field.name, flat: orientation === 'vertical', fields: fields }, id));
+            const selector = (_jsx(ConditionSelectorWithStore, { conditionStore: conditionStore, filterId: id, label: label ?? field.name, labelHidden: orientation === 'vertical', fields: [
                     {
                         id: field.name,
                         type: basicFieldMap[field.type],
                         primary: label || field.name
                     }
-                ], condition: conditionsMap[field.name], conditions: predefinedConditions ?? [], onChange: (newCondition) => {
-                    if (isValidNewCondition(newCondition))
-                        onChange(createUpdatedCondition(field.name, newCondition));
-                }, onClear: orientation === 'horizontal'
-                    ? () => onChange(createUpdatedCondition(field.name, undefined))
-                    : undefined }, field.name));
-            return orientation === 'vertical' ? (_jsx(StyledVerticalFieldGroup, { name: label ?? field.name, collapsed: collapsed, onToggleCollapsed: () => setCollapsed(cur => !cur), actions: [
+                ], conditions: predefinedConditions ?? [], onClear: () => onClear(id) }, id));
+            return orientation === 'vertical' ? (_jsx(StyledVerticalFieldGroup, { name: label ?? id, collapsed: collapsed, onToggleCollapsed: () => setCollapsed(cur => !cur), actions: [
                     {
                         id: 'clear',
                         text: t('clear'),
-                        onClick: () => onChange(createUpdatedCondition(field.name, undefined))
+                        onClick: () => onClear(id)
                     }
-                ], children: selector }, field.name)) : (selector);
+                ], children: selector }, id)) : (selector);
         }) }));
-});
-const FilterModal = ({ filters, condition, onApply }) => {
+}));
+const FilterModal = ({ filters, conditionStore, fields, onApply, onCancel }) => {
     const t = useI18n();
-    const { dismiss } = useModalContext();
-    const [newCondition, setNewCondition] = useState(condition);
-    const onApplyClick = useCallback(() => {
-        onApply?.(newCondition);
-        dismiss();
-    }, [newCondition, onApply]);
-    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' })] }));
+    const { dismiss, unmount } = useModalContext();
+    const handleApplyClick = () => {
+        onApply();
+        unmount();
+    };
+    const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: dismiss, children: t('cancel') }), _jsx(Button, { onClick: handleApplyClick, children: t('apply') })] }));
+    return (_jsx(Modal, { heading: t('filters'), actions: actions, onBeforeClose: onCancel, children: _jsx(PromotedFiltersContent, { filters: filters, conditionStore: conditionStore, orientation: 'vertical', fields: fields }) }));
 };
-export const PromotedFilters = forwardRef(function PromotedFilters({ filters, condition, onChange, orientation = 'horizontal' }, ref) {
+export const PromotedFilters = forwardRef(function PromotedFilters({ filters, condition, onChange, orientation = 'horizontal', fields, handle }, ref) {
     const t = useI18n();
-    const isSmallOrAbove = useBreakpoint('sm');
+    const promotedFiltersRef = useRef(null);
+    const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: promotedFiltersRef });
     const { create } = useModalManager();
     const modalMethods = useRef();
-    // map of Conditions indexed by field name
-    const conditionsCount = condition ? splitConditionForBuilder(condition).rows.length : undefined;
+    const conditionStore = useSimpleStoreInstance({});
+    const prepareConditionForStore = useCallback(() => {
+        return condition
+            ? splitConditionForBuilder(condition).rows.reduce((result, item) => {
+                const { id, label, ...leaf } = item;
+                result[leaf.filterId ?? leaf.lhs.field] = leaf;
+                return result;
+            }, {})
+            : {};
+    }, [condition]);
+    useEffect(() => {
+        conditionStore.setStore(prepareConditionForStore());
+    }, [prepareConditionForStore]);
+    const selectedCount = Object.values(conditionStore.getStore()).length;
+    useImperativeHandle(handle, () => ({ getCondition: () => generateCondition(conditionStore.getStore()) }), []);
+    const onApply = useCallback(() => onChange(generateCondition(conditionStore.getStore())), [onChange]);
+    const onClear = useCallback(() => {
+        conditionStore.setStore({});
+        onChange();
+    }, [onChange]);
+    const onCancel = useCallback(() => {
+        conditionStore.setStore(prepareConditionForStore());
+    }, [prepareConditionForStore]);
     useEffect(() => {
         modalMethods.current?.update({
             filters,
-            condition
+            conditionStore,
+            fields
         });
-    }, [filters, condition]);
+    }, [filters, condition, fields]);
     const openFiltersModal = () => {
         modalMethods.current = create(FilterModal, {
             filters,
-            condition,
-            onApply: onChange
+            conditionStore,
+            fields,
+            onApply,
+            onCancel
         });
     };
     return (_jsx(Flex, { as: StyledPromotedFilters, container: {
@@ -113,11 +144,11 @@ export const PromotedFilters = forwardRef(function PromotedFilters({ filters, co
             direction: !isSmallOrAbove || orientation === 'horizontal' ? 'row' : 'column',
             pad: 2,
             gap: 2
-        }, ref: ref, children: isSmallOrAbove ? (_jsxs(_Fragment, { children: [orientation === 'vertical' && (_jsxs(Flex, { container: {
+        }, ref: promotedFiltersRef, 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('clear_all') })] })) }));
+                    }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h3', children: t('filters') }), _jsxs("div", { children: [_jsx(Button, { onClick: onClear, children: t('reset') }), _jsx(Button, { onClick: onApply, children: t('apply') })] })] })), _jsx(PromotedFiltersContent, { filters: filters, conditionStore: conditionStore, fields: fields, orientation: orientation, ref: ref }), orientation === 'horizontal' && (_jsxs(Flex, { container: true, children: [_jsx(StyledPromotedFiltersButton, { onClick: onClear, children: t('reset') }), _jsx(StyledPromotedFiltersButton, { onClick: onApply, children: t('apply') })] }))] })) : (_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'), !!selectedCount && `\u00a0(${selectedCount})`] })] }) }), _jsx(Button, { onClick: onClear, children: t('reset') })] })) }));
 });
 export default PromotedFilters;
 //# sourceMappingURL=PromotedFilters.js.map

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 { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport type { FunctionComponent, PropsWithoutRef } from 'react';\n\nimport {\n Button,\n Flex,\n Icon,\n Modal,\n useModalManager,\n useBreakpoint,\n useI18n,\n useModalContext,\n hasProp\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, ModalMethods } from '@pega/cosmos-react-core';\n\nimport type { 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 type { 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 function PromotedFiltersContent(\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 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 const isValidNewCondition = (newCondition: LeafCondition \| undefined): boolean => {\n if (!newCondition?.rhs) return true;\n if (!hasProp(newCondition.rhs, 'start') && !hasProp(newCondition.rhs, 'end')) return true;\n return !Number.isNaN(newCondition.rhs.start) && !Number.isNaN(newCondition.rhs.end);\n };\n\n const handleOnChange = (fieldName: string, newCondition?: LeafCondition) => {\n if (isValidNewCondition(newCondition))\n onChange(createUpdatedCondition(fieldName, newCondition));\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 }) => {\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 />\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 if (isValidNewCondition(newCondition))\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 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 variant='simple' onClick={() => setNewCondition(undefined)}>\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 function PromotedFilters(\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 variant='simple' onClick={() => onChange()}>\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 variant='simple' onClick={() => onChange()}>\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 variant='simple' onClick={() => onChange()}>\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 memo,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState\n} from 'react';\nimport type { ComponentType, PropsWithoutRef } from 'react';\n\nimport {\n Button,\n Flex,\n Icon,\n Modal,\n useModalManager,\n useBreakpoint,\n useI18n,\n useModalContext,\n hasProp,\n useSimpleStore,\n useSimpleStoreInstance\n} from '@pega/cosmos-react-core';\nimport type {\n ForwardRefForwardPropsComponent,\n ModalMethods,\n OmitStrict,\n SimpleStore\n} from '@pega/cosmos-react-core';\n\nimport type { ConditionRow, LeafCondition } from '../ConditionBuilder/ConditionBuilder.types';\nimport { splitConditionForBuilder } from '../ConditionBuilder/core/utils';\nimport ConditionInput from '../ConditionInput';\nimport { StyledVerticalFieldGroup } from '../ConditionInput/ConditionInput.styles';\nimport { basicFieldMap, conditionsEqual } from '../ConditionInput/utils';\n\nimport ConditionSelector from './ConditionSelector';\nimport type {\n FilterModalProps,\n PromotedFiltersContentProps,\n PromotedFiltersProps\n} from './PromotedFilters.types';\nimport {\n StyledPromotedFilters,\n StyledTextWithEllipsis,\n StyledPromotedFiltersButton\n} from './PromotedFilters.styles';\n\nconst isValidNewCondition = (newCondition?: LeafCondition & { filterId?: string }): boolean => {\n if (!newCondition?.rhs) return true;\n if (!hasProp(newCondition.rhs, 'start') && !hasProp(newCondition.rhs, 'end')) return true;\n return !Number.isNaN(newCondition.rhs.start) && !Number.isNaN(newCondition.rhs.end);\n};\n\nconst generateCondition = (value: {\n [key: string]: (LeafCondition & { filterId?: string }) \| undefined;\n}) => {\n const storeValues = Object.values(value);\n return storeValues.length === 0\n ? undefined\n : {\n AND: storeValues.map(\n c => ({ condition: c }) as { condition: LeafCondition & { filterId?: string } }\n )\n };\n};\n\ntype WithStoreProps = {\n conditionStore: SimpleStore<{\n [key: string]: (LeafCondition & { filterId?: string }) \| undefined;\n }>;\n filterId: string;\n};\n\nconst withStore = <\n P extends {\n onChange: (condition?: LeafCondition & { filterId?: string }) => void;\n condition?: LeafCondition & { filterId?: string };\n }\n>(\n WrappedComponent: ComponentType<P>\n) =>\n memo(\n ({\n conditionStore,\n filterId,\n ...componentProps\n }: OmitStrict<P, 'onChange'> & WithStoreProps) => {\n const [storeValue, setStore] = useSimpleStore(\n conditionStore,\n val => val[filterId],\n conditionsEqual\n );\n\n const handleOnChange = (newCondition?: LeafCondition & { filterId?: string }) => {\n if (!isValidNewCondition(newCondition)) return;\n if (newCondition) {\n if (!newCondition.filterId && filterId !== newCondition.lhs?.field)\n newCondition = { ...newCondition, filterId };\n setStore(cur => ({\n ...cur,\n [filterId]: newCondition\n }));\n } else {\n setStore(({ ...cur }) => {\n delete cur[filterId];\n return cur;\n });\n }\n };\n\n return (\n <WrappedComponent\n condition={storeValue}\n {...(componentProps as unknown as P)}\n onChange={handleOnChange}\n />\n );\n }\n );\n\nconst ConditionInputWithStore = withStore(ConditionInput);\nconst ConditionSelectorWithStore = withStore(ConditionSelector);\n\nconst PromotedFiltersContent = memo(\n forwardRef(function PromotedFiltersContent(\n {\n filters,\n conditionStore,\n orientation: orientationProp = 'horizontal',\n fields\n }: PropsWithoutRef<PromotedFiltersContentProps>,\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 const onClear = (fieldName: string) => {\n conditionStore.setStore(cur => {\n delete cur[fieldName];\n return cur;\n });\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(({ id, field, mode, label, predefinedConditions }) => {\n id = id ?? field.name;\n if (mode !== 'predefined')\n return (\n <ConditionInputWithStore\n conditionStore={conditionStore}\n key={id}\n filterId={id}\n field={field}\n mode={mode}\n label={label ?? field.name}\n flat={orientation === 'vertical'}\n fields={fields}\n />\n );\n\n const selector = (\n <ConditionSelectorWithStore\n conditionStore={conditionStore}\n key={id}\n filterId={id}\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 conditions={predefinedConditions ?? []}\n onClear={() => onClear(id)}\n />\n );\n\n return orientation === 'vertical' ? (\n <StyledVerticalFieldGroup\n key={id}\n name={label ?? id}\n collapsed={collapsed}\n onToggleCollapsed={() => setCollapsed(cur => !cur)}\n actions={[\n {\n id: 'clear',\n text: t('clear'),\n onClick: () => onClear(id)\n }\n ]}\n >\n {selector}\n </StyledVerticalFieldGroup>\n ) : (\n selector\n );\n })}\n </Flex>\n );\n })\n);\n\nconst FilterModal = ({ filters, conditionStore, fields, onApply, onCancel }: FilterModalProps) => {\n const t = useI18n();\n\n const { dismiss, unmount } = useModalContext();\n\n const handleApplyClick = () => {\n onApply();\n unmount();\n };\n\n const actions = (\n <>\n <Button onClick={dismiss}>{t('cancel')}</Button>\n <Button onClick={handleApplyClick}>{t('apply')}</Button>\n </>\n );\n\n return (\n <Modal heading={t('filters')} actions={actions} onBeforeClose={onCancel}>\n <PromotedFiltersContent\n filters={filters}\n conditionStore={conditionStore}\n orientation='vertical'\n fields={fields}\n />\n </Modal>\n );\n};\n\nexport const PromotedFilters: ForwardRefForwardPropsComponent<PromotedFiltersProps> = forwardRef(\n function PromotedFilters(\n {\n filters,\n condition,\n onChange,\n orientation = 'horizontal',\n fields,\n handle\n }: PropsWithoutRef<PromotedFiltersProps>,\n ref: PromotedFiltersProps['ref']\n ) {\n const t = useI18n();\n\n const promotedFiltersRef = useRef<HTMLDivElement>(null);\n const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: promotedFiltersRef });\n\n const { create } = useModalManager();\n const modalMethods = useRef<ModalMethods<FilterModalProps>>();\n\n const conditionStore = useSimpleStoreInstance({});\n\n const prepareConditionForStore = useCallback(() => {\n return condition\n ? splitConditionForBuilder(condition).rows.reduce(\n (\n result: { [key: string]: (LeafCondition & { filterId?: string }) \| undefined },\n item: ConditionRow & { filterId?: string }\n ) => {\n const { id, label, ...leaf } = item;\n result[leaf.filterId ?? leaf.lhs.field] = leaf;\n return result;\n },\n {}\n )\n : {};\n }, [condition]);\n\n useEffect(() => {\n conditionStore.setStore(prepareConditionForStore());\n }, [prepareConditionForStore]);\n\n const selectedCount = Object.values(conditionStore.getStore()).length;\n\n useImperativeHandle(\n handle,\n () => ({ getCondition: () => generateCondition(conditionStore.getStore()) }),\n []\n );\n\n const onApply = useCallback(\n () => onChange(generateCondition(conditionStore.getStore())),\n [onChange]\n );\n\n const onClear = useCallback(() => {\n conditionStore.setStore({});\n onChange();\n }, [onChange]);\n\n const onCancel = useCallback(() => {\n conditionStore.setStore(prepareConditionForStore());\n }, [prepareConditionForStore]);\n\n useEffect(() => {\n modalMethods.current?.update({\n filters,\n conditionStore,\n fields\n });\n }, [filters, condition, fields]);\n\n const openFiltersModal = () => {\n modalMethods.current = create(FilterModal, {\n filters,\n conditionStore,\n fields,\n onApply,\n onCancel\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={promotedFiltersRef}\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 <div>\n <Button onClick={onClear}>{t('reset')}</Button>\n <Button onClick={onApply}>{t('apply')}</Button>\n </div>\n </Flex>\n )}\n\n <PromotedFiltersContent\n filters={filters}\n conditionStore={conditionStore}\n fields={fields}\n orientation={orientation}\n ref={ref}\n />\n\n {orientation === 'horizontal' && (\n <Flex container>\n <StyledPromotedFiltersButton onClick={onClear}>\n {t('reset')}\n </StyledPromotedFiltersButton>\n <StyledPromotedFiltersButton onClick={onApply}>\n {t('apply')}\n </StyledPromotedFiltersButton>\n </Flex>\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 {!!selectedCount && `\\u00a0(${selectedCount})`}\n </span>\n </Flex>\n </Button>\n <Button onClick={onClear}>{t('reset')}</Button>\n </>\n )}\n </Flex>\n );\n }\n);\n\nexport default PromotedFilters;\n"]}

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

@@ -1,4 +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>;
+export declare const StyledPromotedFiltersButton: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTextWithEllipsis: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=PromotedFilters.styles.d.ts.map

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":"AAMA,eAAO,MAAM,qBAAqB,yGAgBhC,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,2BAA2B,oNAOvC,CAAC;AAIF,eAAO,MAAM,sBAAsB,kNAIlC,CAAC"}

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

@@ -4,7 +4,7 @@ import { StyledModalChildrenWrap } from '@pega/cosmos-react-core/lib/components/
 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']};
+    border-radius: calc(${theme.components.card['border-radius']} * 0.75);
     background-color: ${theme.base.palette['secondary-background']};
     padding-block: ${theme.base.spacing};
@@ -20,7 +20,7 @@ export const StyledPromotedFilters = styled.div(({ theme }) => {
   `;
 });
 StyledPromotedFilters.defaultProps = defaultThemeProp;
-export const StyledClearAllButton = styled(Button) `
+export const StyledPromotedFiltersButton = styled(Button) `
   margin: 1.125rem 0 0.625rem;
   white-space: nowrap;
@@ -28,7 +28,7 @@ export const StyledClearAllButton = styled(Button) `
     margin-top: 0;
   }
 `;
-StyledClearAllButton.defaultProps = defaultThemeProp;
+StyledPromotedFiltersButton.defaultProps = defaultThemeProp;
 export const StyledTextWithEllipsis = styled(Text) `
   overflow: hidden;
   white-space: nowrap;

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;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"]}
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;0BACc,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;wBACxC,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,2BAA2B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;IAIrD,uBAAuB;;;CAG1B,CAAC;AAEF,2BAA2B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5D,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: calc(${theme.components.card['border-radius']} * 0.75);\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 StyledPromotedFiltersButton = styled(Button)`\n margin: 1.125rem 0 0.625rem;\n white-space: nowrap;\n\n ${StyledModalChildrenWrap} & {\n margin-top: 0;\n }\n`;\n\nStyledPromotedFiltersButton.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,8 +1,10 @@
 import type { Ref } from 'react';
-import type { BaseProps, HandleValue, NoChildrenProp } from '@pega/cosmos-react-core';
-import type { Condition, LeafCondition } from '../ConditionBuilder/ConditionBuilder.types';
+import type { BaseProps, NoChildrenProp, SimpleStore } from '@pega/cosmos-react-core';
+import type { Field, LeafCondition } from '../ConditionBuilder/ConditionBuilder.types';
 import type { ConditionInputMode, ConditionField } from '../ConditionInput/ConditionInput.types';
 export interface PromotedFilter {
+    /** Optional for multiple filters on the same field. */
+    id?: string;
     /** Definition of the field to be filtered. */
     field: ConditionField;
     /** Display mode. */
@@ -16,18 +18,65 @@ export interface PromotedFilter {
         label?: string;
     }[];
 }
+export interface HandleValue {
+    /** Returns currently visible condition in the PromotedFilters */
+    getCondition: () => PromotedFiltersProps['condition'];
+}
 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. */
+    /** A value representing the current condition state. Optional filterId for multiple filters per field support. */
+    condition?: {
+        AND: {
+            condition: LeafCondition & {
+                filterId?: string;
+            };
+        }[];
+    };
+    /**
+     * Orientation mode.
+     * @default 'horizontal'
+     */
     orientation?: 'vertical' | 'horizontal';
-    /** Callback fired on change of any of the filters. */
-    onChange: (condition?: Condition) => void;
+    /** Metadata (data-model) for the Fields to use in the RHS field-selector */
+    fields?: Field[];
+    /** Callback fired on apply click. */
+    onChange: (condition?: {
+        AND: {
+            condition: LeafCondition & {
+                filterId?: string;
+            };
+        }[];
+    }) => void;
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLDivElement>;
-    /** Imperative handle */
+    /**
+     * Imperative handle.
+     * Used to fetch the currently visible condition, regardless of the `Apply` click
+     */
     handle?: Ref<HandleValue>;
 }
+export interface PromotedFiltersContentProps extends BaseProps, NoChildrenProp {
+    /** Configuration of filters for every field that has been defined as promoted. */
+    filters: PromotedFilter[];
+    /** A value representing the condition store. */
+    conditionStore: SimpleStore<{
+        [key: string]: LeafCondition | undefined;
+    }>;
+    /**
+     * Orientation mode.
+     * @default 'horizontal'
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /** Metadata (data-model) for the Fields to use in the RHS field-selector */
+    fields?: Field[];
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+}
+export interface FilterModalProps extends Pick<PromotedFiltersContentProps, 'filters' | 'conditionStore' | 'fields'> {
+    /** Callback fired on apply */
+    onApply: () => void;
+    /** Callback fired on cancel */
+    onCancel: () => void;
+}
 //# 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,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,SAAS,EAAE,~~WAAW~~,EAAE,~~cAAc~~,EAAE,MAAM,yBAAyB,CAAC;AAEtF,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"}
1	+ {"version":3,"file":"PromotedFilters.types.d.ts","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtF,OAAO,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,KAAK,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAEjG,MAAM,WAAW,cAAc;IAC7B,uDAAuD;IACvD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,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,WAAW;IAC1B,iEAAiE;IACjE,YAAY,EAAE,MAAM,oBAAoB,CAAC,WAAW,CAAC,CAAC;CACvD;AAED,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE,kFAAkF;IAClF,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,kHAAkH;IAClH,SAAS,CAAC,EAAE;QAAE,GAAG,EAAE;YAAE,SAAS,EAAE,aAAa,GAAG;gBAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;aAAE,CAAA;SAAE,EAAE,CAAA;KAAE,CAAC;IAC5E;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,4EAA4E;IAC5E,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IACjB,qCAAqC;IACrC,QAAQ,EAAE,CAAC,SAAS,CAAC,EAAE;QAAE,GAAG,EAAE;YAAE,SAAS,EAAE,aAAa,GAAG;gBAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;aAAE,CAAA;SAAE,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAChG,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,2BAA4B,SAAQ,SAAS,EAAE,cAAc;IAC5E,kFAAkF;IAClF,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,gDAAgD;IAChD,cAAc,EAAE,WAAW,CAAC;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,CAAA;KAAE,CAAC,CAAC;IAC1E;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,4EAA4E;IAC5E,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IACjB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,2BAA2B,EAAE,SAAS,GAAG,gBAAgB,GAAG,QAAQ,CAAC;IAClF,8BAA8B;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB"}

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 type { Ref } from 'react';\n\nimport type { 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"]}
1	+ {"version":3,"file":"PromotedFilters.types.js","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type { BaseProps, NoChildrenProp, SimpleStore } from '@pega/cosmos-react-core';\n\nimport type { Field, LeafCondition } from '../ConditionBuilder/ConditionBuilder.types';\nimport type { ConditionInputMode, ConditionField } from '../ConditionInput/ConditionInput.types';\n\nexport interface PromotedFilter {\n /** Optional for multiple filters on the same field. /\n id?: string;\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 HandleValue {\n /* Returns currently visible condition in the PromotedFilters /\n getCondition: () => PromotedFiltersProps['condition'];\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. Optional filterId for multiple filters per field support. /\n condition?: { AND: { condition: LeafCondition & { filterId?: string } }[] };\n /\n Orientation mode.\n * @default 'horizontal'\n /\n orientation?: 'vertical' \| 'horizontal';\n /* Metadata (data-model) for the Fields to use in the RHS field-selector /\n fields?: Field[];\n /* Callback fired on apply click. /\n onChange: (condition?: { AND: { condition: LeafCondition & { filterId?: string } }[] }) => void;\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLDivElement>;\n /\n Imperative handle.\n * Used to fetch the currently visible condition, regardless of the `Apply` click\n /\n handle?: Ref<HandleValue>;\n}\n\nexport interface PromotedFiltersContentProps extends BaseProps, NoChildrenProp {\n /* Configuration of filters for every field that has been defined as promoted. /\n filters: PromotedFilter[];\n /* A value representing the condition store. /\n conditionStore: SimpleStore<{ [key: string]: LeafCondition \| undefined }>;\n /\n Orientation mode.\n * @default 'horizontal'\n /\n orientation?: 'vertical' \| 'horizontal';\n /* Metadata (data-model) for the Fields to use in the RHS field-selector /\n fields?: Field[];\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLDivElement>;\n}\n\nexport interface FilterModalProps\n extends Pick<PromotedFiltersContentProps, 'filters' \| 'conditionStore' \| 'fields'> {\n /* Callback fired on apply /\n onApply: () => void;\n /* Callback fired on cancel */\n onCancel: () => void;\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-condition-builder",
-  "version": "8.0.0-build.3.2",
+  "version": "8.0.0-build.30.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pegasystems/cosmos-react.git",
@@ -22,20 +22,20 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "8.0.0-build.3.2",
-    "@types/react": "^17.0.62",
-    "@types/react-dom": "^17.0.20",
+    "@pega/cosmos-react-core": "8.0.0-build.30.0",
+    "@types/react": "^17.0.62 || ^18.3.3",
+    "@types/react-dom": "^17.0.20 || ^18.3.0",
     "@types/styled-components": "^5.1.26",
     "dayjs": "^1.11.10",
     "polished": "^4.1.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
     "@storybook/react": "~8.2.9",
-    "@testing-library/react": "^12.1.3",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.1",
-    "typescript": "~5.2.2"
+    "typescript": "~5.5.4"
   }
 }