npm - @pega/cosmos-react-condition-builder - Versions diffs - 9.0.0-build.9.9 → 9.0.0 - Mend

@pega/cosmos-react-condition-builder 9.0.0-build.9.9 → 9.0.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 (80) hide show

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

@@ -1,15 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useRef } from 'react';
-import { useI18n, ComboBox, useConfiguration, menuHelpers, useUID } from '@pega/cosmos-react-core';
+import { StyledClearButton } from '@pega/cosmos-react-core/lib/components/CompositeInput/CompositeInput.styles';
+import { useI18n, ComboBox, Icon, useConfiguration, menuHelpers } from '@pega/cosmos-react-core';
 import formatCondition from '../ConditionBuilder/core/formatter';
 import { conditionsEqual } from '../ConditionInput/utils';
-const ConditionSelector = ({ onChange, status, label, info, fields, labelHidden, conditions, condition, ...restProps }) => {
+const ConditionSelector = ({ onChange, onClear, status, label, info, fields, labelHidden, conditions, condition, ...restProps }) => {
     const t = useI18n();
     const { locale } = useConfiguration();
     const inputRef = useRef(null);
-    const anyItemId = useUID();
     const itemsToRender = useMemo(() => {
-        const items = conditions.map(({ id, label: conditionLabel, value }) => {
+        return conditions.map(({ id, label: conditionLabel, value }) => {
             return {
                 id,
                 primary: conditionLabel ??
@@ -20,32 +20,25 @@ const ConditionSelector = ({ onChange, status, label, info, fields, labelHidden,
                 selected: !!value && !!condition && conditionsEqual(value, condition)
             };
         });
-        if (condition) {
-            items.unshift({
-                id: anyItemId,
-                primary: t('any'),
-                selected: false
-            });
-        }
-        return items;
     }, [conditions, condition]);
     const selected = useMemo(() => menuHelpers.getSelected(itemsToRender)[0], [itemsToRender]);
-    return (_jsx(ComboBox, { ...restProps, ref: inputRef, mode: 'single-select', label: label ?? t('condition_builder_possible_values_label'), labelHidden: labelHidden, selected: selected
+    return (_jsx(ComboBox, { ...restProps, ref: inputRef, mode: 'single-select', label: label ?? t('condition_builder_possible_values_label'), labelHidden: labelHidden, placeholder: t('any'), selected: selected
             ? {
                 items: {
                     id: selected.id,
                     text: selected.primary
                 }
             }
-            : {
-                items: {
-                    id: anyItemId,
-                    text: t('any')
-                }
-            }, menu: {
+            : undefined, menu: {
             items: itemsToRender,
             onItemClick: (id) => onChange(conditions.find(cnd => cnd.id === id)?.value)
-        }, status: status, info: status === 'error' ? t('condition_builder_empty_selection_error_text') : info }));
+        }, status: status, info: status === 'error' ? t('condition_builder_empty_selection_error_text') : info, actions: onClear && (_jsx(StyledClearButton, { icon: true, variant: 'simple', label: t('clear'), onClick: () => {
+                onClear();
+                if (inputRef.current) {
+                    const inputEl = inputRef.current.querySelector('input');
+                    inputEl?.focus();
+                }
+            }, children: _jsx(Icon, { name: 'times' }) })) }));
 };
 export default ConditionSelector;
 //# sourceMappingURL=ConditionSelector.js.map

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,EAAE,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,~~gBAAgB~~,EAAE,~~WAAW~~,EAAE,~~MAAM~~,EAAE,MAAM,yBAAyB,CAAC;~~AAUnG~~,OAAO,eAAe,MAAM,oCAAoC,CAAC;AAEjE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;~~AAqB1D~~,MAAM,iBAAiB,GAA6D,CAAC,EACnF,QAAQ,EACR,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,~~SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,~~aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,~~MAAM~~,~~KAAK,GAAG,~~UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAE;~~YACpE~~,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,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC;aACtE,CAAC;QACJ,CAAC,CAAC,CAAC;~~QAEH~~,~~IAAI,SAAS,EAAE,~~CAAC~~;YACd~~,~~KAAK,CAAC,OAAO,CAAC;gBACZ,~~EAAE,~~EAAE,SAAS;gBACb,OAAO,EAAE,~~CAAC,~~CAAC,KAAK,CAAC;gBACjB,QAAQ,EAAE,KAAK;aAChB,CAAC,CAAC;QACL,CAAC;QAED,OAAO,KAAK,CAAC;IACf,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,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~~;gBACE~~,~~KAAK,EAAE;oBACL,EAAE,EAAE,~~SAAS~~;oBACb~~,~~IAAI~~,~~EAAE,CAAC,CAAC,KAAK,CAAC;iBACf;aACF,EAEP,~~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,~~GACnF~~,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { useMemo, useRef } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport { useI18n, ComboBox, useConfiguration, menuHelpers, ~~useUID~~ } from '@pega/cosmos-react-core';\nimport type {\n BaseProps,\n NoChildrenProp,\n ComboBoxProps,\n MenuItemProps,\n ForwardProps\n} from '@pega/cosmos-react-core';\n\nimport type { AtomicConditionProps } from '../ConditionBuilder/AtomicCondition';\nimport formatCondition from '../ConditionBuilder/core/formatter';\nimport type { LeafCondition } from '../ConditionBuilder';\nimport { conditionsEqual } from '../ConditionInput/utils';\n\nexport interface ConditionSelectorProps extends BaseProps, NoChildrenProp {\n /** Callback for onChange /\n onChange: (condition?: LeafCondition) => 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 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 ~~anyItemId = useUID();\n const~~ itemsToRender = useMemo(() => {\n ~~const~~ ~~items =~~ 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~~\n if (condition) {\n items.unshift({\n id: anyItemId,\n primary: t('any'),\n selected: false\n });\n }\n\n return items;\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 selected={\n selected\n ? {\n items: {\n id: selected.id,\n text: selected.primary\n }\n }\n : {\n ~~items: {\n id: anyItemId,\n text: t('any')\n }\n }\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 />\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 } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport { StyledClearButton } from '@pega/cosmos-react-core/lib/components/CompositeInput/CompositeInput.styles';\nimport { useI18n, ComboBox, Icon, useConfiguration, menuHelpers } from '@pega/cosmos-react-core';\nimport type {\n BaseProps,\n NoChildrenProp,\n ComboBoxProps,\n MenuItemProps,\n ForwardProps\n} from '@pega/cosmos-react-core';\n\nimport type { AtomicConditionProps } from '../ConditionBuilder/AtomicCondition';\nimport formatCondition from '../ConditionBuilder/core/formatter';\nimport type { LeafCondition } from '../ConditionBuilder';\nimport { conditionsEqual } from '../ConditionInput/utils';\n\nexport interface 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('any')}\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 <StyledClearButton\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 </StyledClearButton>\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":"~~AAwBA~~,OAAO,KAAK,EACV,+BAA+B,EAIhC,MAAM,yBAAyB,CAAC;AASjC,OAAO,KAAK,EAGV,oBAAoB,EACrB,MAAM,yBAAyB,CAAC;~~AAuMjC~~,eAAO,MAAM,eAAe,EAAE,+BAA+B,CAAC,oBAAoB,~~CAuJjF~~,CAAC;AAEF,eAAe,eAAe,CAAC"}
1	+ {"version":3,"file":"PromotedFilters.d.ts","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EACV,+BAA+B,EAIhC,MAAM,yBAAyB,CAAC;AASjC,OAAO,KAAK,EAGV,oBAAoB,EACrB,MAAM,yBAAyB,CAAC;AAsNjC,eAAO,MAAM,eAAe,EAAE,+BAA+B,CAAC,oBAAoB,CA+JjF,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -1,19 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 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 { Button, Flex, Icon, Modal, useModalManager, useBreakpoint, useI18n, useModalContext, 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, conditionsEqual } from '../ConditionInput/utils';
+import { basicFieldMap, conditionsEqual, defaultComparators } from '../ConditionInput/utils';
 import ConditionSelector from './ConditionSelector';
 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
@@ -25,8 +18,6 @@ const generateCondition = (value) => {
 const withStore = (WrappedComponent) => memo(({ conditionStore, filterId, onApply, ...componentProps }) => {
     const [storeValue, setStore] = useSimpleStore(conditionStore, val => val[filterId], conditionsEqual);
     const handleOnChange = (newCondition) => {
-        if (!isValidNewCondition(newCondition))
-            return;
         if (newCondition) {
             if (!newCondition.filterId && filterId !== newCondition.lhs?.field)
                 newCondition = { ...newCondition, filterId };
@@ -36,7 +27,6 @@ const withStore = (WrappedComponent) => memo(({ conditionStore, filterId, onAppl
                 ...cur,
                 [filterId]: newCondition
             }));
-            onApply?.();
         }
         else {
             if (!storeValue)
@@ -45,17 +35,29 @@ const withStore = (WrappedComponent) => memo(({ conditionStore, filterId, onAppl
                 delete cur[filterId];
                 return cur;
             });
-            onApply?.();
         }
+        onApply();
     };
     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, onApply }, ref) {
+const rendersAsSingleInput = (filters) => filters.length === 1 && defaultComparators[filters[0].field.type] !== 'BTW';
+const PromotedFiltersContent = memo(forwardRef(function PromotedFiltersContent({ filters, conditionStore, orientation: orientationProp = 'horizontal', fields, onApply, timeZone }, ref) {
+    const t = useI18n();
     const isSmallOrAbove = useBreakpoint('sm');
-    const orientation = isSmallOrAbove && orientationProp === 'horizontal' ? 'horizontal' : 'vertical';
+    const inline = isSmallOrAbove || rendersAsSingleInput(filters);
+    const orientation = inline && orientationProp === 'horizontal' ? 'horizontal' : 'vertical';
     const [collapsed, setCollapsed] = useState(false);
+    const onClear = (fieldName) => {
+        if (!conditionStore.getStore()[fieldName])
+            return;
+        conditionStore.setStore(({ ...cur }) => {
+            delete cur[fieldName];
+            return cur;
+        });
+        onApply?.();
+    };
     return (_jsx(Flex, { container: {
             rowGap: 1,
             colGap: 2,
@@ -65,15 +67,21 @@ const PromotedFiltersContent = memo(forwardRef(function PromotedFiltersContent({
         }, ref: ref, children: filters.map(({ id, field, mode, label, predefinedConditions }) => {
             id = id ?? field.name;
             if (mode !== 'predefined')
-                return (_jsx(ConditionInputWithStore, { conditionStore: conditionStore, filterId: id, field: field, mode: mode, label: label ?? field.name, flat: orientation === 'vertical', fields: fields, onApply: onApply }, id));
+                return (_jsx(ConditionInputWithStore, { conditionStore: conditionStore, filterId: id, field: field, mode: mode, label: label ?? field.name, flat: orientation === 'vertical', fields: fields, onApply: onApply, timeZone: timeZone }, 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
                     }
-                ], conditions: predefinedConditions ?? [], onApply: onApply ?? (() => { }) }, id));
-            return orientation === 'vertical' ? (_jsx(StyledVerticalFieldGroup, { name: label ?? id, collapsed: collapsed, onToggleCollapsed: () => setCollapsed(cur => !cur), children: selector }, id)) : (selector);
+                ], conditions: predefinedConditions ?? [], onApply: onApply ?? (() => { }), ...(orientation !== 'vertical' && { 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: () => onClear(id)
+                    }
+                ], children: selector }, id)) : (selector);
         }) }));
 }));
 const FilterModal = ({ filters, conditionStore, fields, onApply, onCancel }) => {
@@ -86,10 +94,12 @@ const FilterModal = ({ filters, conditionStore, fields, onApply, onCancel }) =>
     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', fields, handle }, ref) {
+export const PromotedFilters = forwardRef(function PromotedFilters({ filters, condition, onChange, orientation = 'horizontal', fields, handle, timeZone }, ref) {
     const t = useI18n();
     const promotedFiltersRef = useRef(null);
     const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: promotedFiltersRef });
+    const inline = isSmallOrAbove || rendersAsSingleInput(filters);
+    const compact = rendersAsSingleInput(filters) && !isSmallOrAbove && orientation === 'horizontal';
     const { create } = useModalManager();
     const modalMethods = useRef();
     const conditionStore = useSimpleStoreInstance({});
@@ -137,17 +147,18 @@ export const PromotedFilters = forwardRef(function PromotedFilters({ filters, co
             onCancel
         });
     };
-    return (_jsx(Flex, { as: StyledPromotedFilters, container: {
-            alignItems: orientation === 'horizontal' && isSmallOrAbove ? 'start' : undefined,
+    return (_jsx(StyledPromotedFilters, { "$compact": compact, container: {
+            alignItems: orientation === 'horizontal' && inline ? 'start' : undefined,
             justify: 'between',
-            direction: !isSmallOrAbove || orientation === 'horizontal' ? 'row' : 'column',
+            direction: orientation === 'vertical' && inline ? 'column' : 'row',
+            wrap: compact ? 'wrap' : undefined,
             pad: 2,
-            gap: 2
-        }, ref: promotedFiltersRef, children: isSmallOrAbove ? (_jsxs(_Fragment, { children: [orientation === 'vertical' && (_jsxs(Flex, { container: {
+            ...(compact ? { colGap: 2 } : { gap: 2 })
+        }, ref: promotedFiltersRef, children: inline ? (_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') }), _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, onApply: onApply }), 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') })] })) }));
+                    }, 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, onApply: onApply, timeZone: timeZone }), orientation === 'horizontal' && (_jsxs(Flex, { container: true, ...(compact && { item: { shrink: 0 } }), 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 {\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 onApply: () => void;\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 onApply,\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 if (conditionsEqual(storeValue, newCondition)) return;\n setStore(cur => ({\n ...cur,\n [filterId]: newCondition\n }));\n onApply?.();\n } else {\n if (!storeValue) return;\n setStore(({ ...cur }) => {\n delete cur[filterId];\n return cur;\n });\n onApply?.();\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 onApply\n }: PropsWithoutRef<PromotedFiltersContentProps>,\n ref: PromotedFiltersProps['ref']\n ) {\n const isSmallOrAbove = useBreakpoint('sm');\n const orientation =\n isSmallOrAbove && orientationProp === 'horizontal' ? 'horizontal' : 'vertical';\n const [collapsed, setCollapsed] = useState(false);\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 onApply={onApply}\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 onApply={onApply ?? (() => {})}\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 >\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 const storeValue = generateCondition(conditionStore.getStore());\n if (JSON.stringify(condition) !== JSON.stringify(storeValue)) onChange(storeValue);\n }, [onChange, prepareConditionForStore]);\n\n const onClear = useCallback(() => {\n if (condition) {\n conditionStore.setStore({});\n onChange();\n }\n }, [onChange, prepareConditionForStore]);\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 onApply={onApply}\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"]}
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 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, defaultComparators } 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 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 onApply: () => void;\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 onApply,\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 (newCondition) {\n if (!newCondition.filterId && filterId !== newCondition.lhs?.field)\n newCondition = { ...newCondition, filterId };\n if (conditionsEqual(storeValue, newCondition)) return;\n setStore(cur => ({\n ...cur,\n [filterId]: newCondition\n }));\n } else {\n if (!storeValue) return;\n setStore(({ ...cur }) => {\n delete cur[filterId];\n return cur;\n });\n }\n onApply();\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 rendersAsSingleInput = (filters: PromotedFiltersProps['filters']) =>\n filters.length === 1 && defaultComparators[filters[0].field.type] !== 'BTW';\n\nconst PromotedFiltersContent = memo(\n forwardRef(function PromotedFiltersContent(\n {\n filters,\n conditionStore,\n orientation: orientationProp = 'horizontal',\n fields,\n onApply,\n timeZone\n }: PropsWithoutRef<PromotedFiltersContentProps>,\n ref: PromotedFiltersProps['ref']\n ) {\n const t = useI18n();\n const isSmallOrAbove = useBreakpoint('sm');\n const inline = isSmallOrAbove \|\| rendersAsSingleInput(filters);\n const orientation = inline && orientationProp === 'horizontal' ? 'horizontal' : 'vertical';\n const [collapsed, setCollapsed] = useState(false);\n\n const onClear = (fieldName: string) => {\n if (!conditionStore.getStore()[fieldName]) return;\n conditionStore.setStore(({ ...cur }) => {\n delete cur[fieldName];\n return cur;\n });\n onApply?.();\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 onApply={onApply}\n timeZone={timeZone}\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 onApply={onApply ?? (() => {})}\n {...(orientation !== 'vertical' && { 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 timeZone\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 const inline = isSmallOrAbove \|\| rendersAsSingleInput(filters);\n const compact =\n rendersAsSingleInput(filters) && !isSmallOrAbove && orientation === 'horizontal';\n\n const { create } = useModalManager();\n const modalMethods = useRef<ModalMethods<FilterModalProps>>();\n\n const conditionStore = useSimpleStoreInstance<{\n [key: string]: (LeafCondition & { filterId?: string }) \| undefined;\n }>({});\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 const storeValue = generateCondition(conditionStore.getStore());\n if (JSON.stringify(condition) !== JSON.stringify(storeValue)) onChange(storeValue);\n }, [onChange, prepareConditionForStore]);\n\n const onClear = useCallback(() => {\n if (condition) {\n conditionStore.setStore({});\n onChange();\n }\n }, [onChange, prepareConditionForStore]);\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 <StyledPromotedFilters\n $compact={compact}\n container={{\n alignItems: orientation === 'horizontal' && inline ? 'start' : undefined,\n justify: 'between',\n direction: orientation === 'vertical' && inline ? 'column' : 'row',\n wrap: compact ? 'wrap' : undefined,\n pad: 2,\n ...(compact ? { colGap: 2 } : { gap: 2 })\n }}\n ref={promotedFiltersRef}\n >\n {inline ? (\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 onApply={onApply}\n timeZone={timeZone}\n />\n\n {orientation === 'horizontal' && (\n <Flex container {...(compact && { item: { shrink: 0 } })}>\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 </StyledPromotedFilters>\n );\n }\n);\n\nexport default PromotedFilters;\n"]}