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

@pega/cosmos-react-condition-builder 4.0.0-dev.9.1 → 4.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 (95) hide show

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PromotedFilters.js","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\n\nimport {\n Button,\n Flex,\n ForwardProps,\n Icon,\n Modal,\n ModalMethods,\n useModalManager,\n useBreakpoint,\n useI18n,\n useModalContext,\n HandleValue\n} from '@pega/cosmos-react-core';\n\nimport { Condition, LeafCondition } from '../ConditionBuilder/ConditionBuilder.types';\nimport { splitConditionForBuilder } from '../ConditionBuilder/core/utils';\nimport ConditionInput from '../ConditionInput';\nimport { StyledVerticalFieldGroup } from '../ConditionInput/ConditionInput.styles';\nimport { basicFieldMap } from '../ConditionInput/utils';\n\nimport ConditionSelector from './ConditionSelector';\nimport { PromotedFiltersProps } from './PromotedFilters.types';\nimport {\n StyledPromotedFilters,\n StyledClearAllButton,\n StyledTextWithEllipsis\n} from './PromotedFilters.styles';\n\nexport interface FilterModalProps extends Pick<PromotedFiltersProps, 'filters' \| 'condition'> {\n /** Callback fired on apply of any of the filters */\n onApply?: (condition: Condition \| undefined) => void;\n}\n\nconst PromotedFiltersContent: FunctionComponent<PromotedFiltersProps & ForwardProps> = forwardRef(\n (\n {\n filters,\n condition,\n onChange,\n orientation: orientationProp = 'horizontal',\n handle\n }: PropsWithoutRef<PromotedFiltersProps>,\n ref: PromotedFiltersProps['ref']\n ) => {\n const t = useI18n();\n const isSmallOrAbove = useBreakpoint('sm');\n const orientation =\n isSmallOrAbove && orientationProp === 'horizontal' ? 'horizontal' : 'vertical';\n\n // map of Conditions indexed by field name\n const conditionsMap = condition\n ? splitConditionForBuilder(condition).rows.reduce(\n (result: { [key: string]: LeafCondition }, item) => {\n const { id, label, ...leaf } = item;\n result[item.lhs.field] = leaf;\n return result;\n },\n {}\n )\n : {};\n\n const createUpdatedCondition = (key: string, newCondition?: LeafCondition) => {\n if (newCondition) {\n conditionsMap[key] = newCondition;\n } else {\n delete conditionsMap[key];\n }\n\n return Object.values(conditionsMap).length === 0\n ? undefined\n : {\n AND: Object.values(conditionsMap).map(c => {\n return { condition: c } as Condition;\n })\n };\n };\n\n return (\n <Flex\n container={{\n gap: 2,\n direction: orientation === 'vertical' ? 'column' : 'row',\n wrap: 'wrap',\n alignItems: orientation === 'vertical' ? 'stretch' : 'start'\n }}\n ref={ref}\n >\n {filters.map(({ field, mode, label, predefinedConditions }) => {\n if (mode !== 'predefined')\n return (\n <ConditionInput\n key={field.name}\n field={field}\n mode={mode}\n label={label ?? field.name}\n condition={conditionsMap[field.name]}\n flat={orientation === 'vertical'}\n onChange={(newCondition?: LeafCondition) => {\n onChange(createUpdatedCondition(field.name, newCondition));\n }}\n handle={handle}\n />\n );\n\n const selector = (\n <ConditionSelector\n key={field.name}\n label={label ?? field.name}\n labelHidden={orientation === 'vertical'}\n fields={[\n {\n id: field.name,\n type: basicFieldMap[field.type],\n primary: label \|\| field.name\n }\n ]}\n condition={conditionsMap[field.name]}\n conditions={predefinedConditions ?? []}\n onChange={(newCondition?: LeafCondition) => {\n onChange(createUpdatedCondition(field.name, newCondition));\n }}\n onClear={\n orientation === 'horizontal'\n ? () => onChange(createUpdatedCondition(field.name, undefined))\n : undefined\n }\n />\n );\n\n return orientation === 'vertical' ? (\n <StyledVerticalFieldGroup\n key={field.name}\n name={label ?? field.name}\n collapsible\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\n variant='simple'\n onClick={() => {\n setNewCondition(undefined);\n }}\n >\n {t('clear_all')}\n </StyledClearAllButton>\n </Flex>\n\n <PromotedFiltersContent\n filters={filters}\n condition={newCondition}\n onChange={setNewCondition}\n orientation='vertical'\n />\n </Modal>\n );\n};\n\nexport const PromotedFilters: FunctionComponent<PromotedFiltersProps & ForwardProps> = forwardRef(\n (\n {\n filters,\n condition,\n onChange,\n orientation = 'horizontal'\n }: PropsWithoutRef<PromotedFiltersProps>,\n ref: PromotedFiltersProps['ref']\n ) => {\n const t = useI18n();\n\n const isSmallOrAbove = useBreakpoint('sm');\n\n const { create } = useModalManager();\n const modalMethods = useRef<ModalMethods<FilterModalProps>>();\n\n // map of Conditions indexed by field name\n const conditionsCount = condition ? splitConditionForBuilder(condition).rows.length : undefined;\n\n useEffect(() => {\n modalMethods.current?.update({\n filters,\n condition\n });\n }, [filters, condition]);\n\n const openFiltersModal = () => {\n modalMethods.current = create(FilterModal, {\n filters,\n condition,\n onApply: onChange\n });\n };\n\n const clearHandle = useRef<HandleValue>(null);\n\n return (\n <Flex\n as={StyledPromotedFilters}\n container={{\n alignItems: orientation === 'horizontal' && isSmallOrAbove ? 'start' : undefined,\n justify: 'between',\n direction: !isSmallOrAbove \|\| orientation === 'horizontal' ? 'row' : 'column',\n pad: 2,\n gap: 2\n }}\n ref={ref}\n >\n {isSmallOrAbove ? (\n <>\n {orientation === 'vertical' && (\n <Flex\n container={{\n justify: 'between',\n alignItems: 'center',\n pad: [0, 0, 1, 0]\n }}\n >\n <StyledTextWithEllipsis variant='h3'>{t('filters')}</StyledTextWithEllipsis>\n <Button\n variant='simple'\n onClick={() => {\n onChange();\n clearHandle.current?.clear();\n }}\n >\n {t('clear_all')}\n </Button>\n </Flex>\n )}\n\n <PromotedFiltersContent\n filters={filters}\n onChange={onChange}\n condition={condition}\n orientation={orientation}\n ref={ref}\n handle={clearHandle}\n />\n\n {orientation === 'horizontal' && (\n <div>\n <StyledClearAllButton\n variant='simple'\n onClick={() => {\n onChange();\n clearHandle.current?.clear();\n }}\n >\n {t('promoted_filters_clear_all_button_label')}\n </StyledClearAllButton>\n </div>\n )}\n </>\n ) : (\n <>\n <Button type='button' variant='text' onClick={openFiltersModal}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }} forwardedAs='span'>\n <Icon name='filter' />\n <span>\n {t('filters')}\n {conditionsCount && `\\u00a0(${conditionsCount})`}\n </span>\n </Flex>\n </Button>\n <Button\n variant='simple'\n onClick={() => {\n onChange();\n clearHandle.current?.clear();\n }}\n >\n {t('clear_all')}\n </Button>\n </>\n )}\n </Flex>\n );\n }\n);\n\nexport default PromotedFilters;\n"]}
1	+ {"version":3,"file":"PromotedFilters.js","sourceRoot":"","sources":["../../../src/components/PromotedFilters/PromotedFilters.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n useImperativeHandle\n} from 'react';\n\nimport {\n Button,\n Flex,\n ForwardProps,\n Icon,\n Modal,\n ModalMethods,\n useModalManager,\n useBreakpoint,\n useI18n,\n useModalContext,\n HandleValue\n} from '@pega/cosmos-react-core';\n\nimport { Condition, LeafCondition } from '../ConditionBuilder/ConditionBuilder.types';\nimport { splitConditionForBuilder } from '../ConditionBuilder/core/utils';\nimport ConditionInput from '../ConditionInput';\nimport { StyledVerticalFieldGroup } from '../ConditionInput/ConditionInput.styles';\nimport { basicFieldMap } from '../ConditionInput/utils';\n\nimport ConditionSelector from './ConditionSelector';\nimport { PromotedFiltersProps } from './PromotedFilters.types';\nimport {\n StyledPromotedFilters,\n StyledClearAllButton,\n StyledTextWithEllipsis\n} from './PromotedFilters.styles';\n\nexport interface FilterModalProps extends Pick<PromotedFiltersProps, 'filters' \| 'condition'> {\n /** Callback fired on apply of any of the filters /\n onApply?: (condition: Condition \| undefined) => void;\n}\n\ninterface HandleValueObj {\n /* Identifier for the corresponding field /\n id: string;\n /* Handle value for clear action */\n handle: HandleValue;\n}\n\nconst PromotedFiltersContent: FunctionComponent<PromotedFiltersProps & ForwardProps> = forwardRef(\n function PromotedFiltersContent(\n {\n filters,\n condition,\n onChange,\n orientation: orientationProp = 'horizontal',\n handle\n }: PropsWithoutRef<PromotedFiltersProps>,\n ref: PromotedFiltersProps['ref']\n ) {\n const t = useI18n();\n const isSmallOrAbove = useBreakpoint('sm');\n const orientation =\n isSmallOrAbove && orientationProp === 'horizontal' ? 'horizontal' : 'vertical';\n const [collapsed, setCollapsed] = useState(false);\n\n // map of Conditions indexed by field name\n const conditionsMap = condition\n ? splitConditionForBuilder(condition).rows.reduce(\n (result: { [key: string]: LeafCondition }, item) => {\n const { id, label, ...leaf } = item;\n result[item.lhs.field] = leaf;\n return result;\n },\n {}\n )\n : {};\n\n const createUpdatedCondition = (key: string, newCondition?: LeafCondition) => {\n if (newCondition) {\n conditionsMap[key] = newCondition;\n } else {\n delete conditionsMap[key];\n }\n\n return Object.values(conditionsMap).length === 0\n ? undefined\n : {\n AND: Object.values(conditionsMap).map(c => {\n return { condition: c } as Condition;\n })\n };\n };\n\n // list of fields names used to count down onChange callbacks when Clear All action is invoked\n // if undefined - Clear All was not triggered\n // if stores any values - Clear All is in progress, waiting for all onChange callbacks to be invoked\n const fieldsToClear = useRef<Set<string> \| undefined>(undefined);\n\n const handleOnChange = (fieldName: string, newCondition?: LeafCondition) => {\n // single onChange was invoked\n if (fieldsToClear.current === undefined) {\n onChange(createUpdatedCondition(fieldName, newCondition));\n }\n // prevent main onChange from being called for every onChange invoked from ConditionInput, when Clear All action was run\n // counting down onChange callbacks, to wait when all are done\n else {\n fieldsToClear.current.delete(fieldName);\n if (fieldsToClear.current.size === 0) fieldsToClear.current = undefined;\n }\n };\n\n // ref to store clear handles for all filters\n const handlesRef = useRef<HandleValueObj[]>([]);\n\n useImperativeHandle(\n handle,\n () => ({\n clear: () => {\n // initialize array with all fields, which trigger onChange callbacks\n fieldsToClear.current = new Set(\n handlesRef.current.filter(Boolean).map(c => {\n return c.id;\n })\n );\n handlesRef.current.forEach(item => item.handle.clear());\n onChange();\n }\n }),\n [onChange]\n );\n\n return (\n <Flex\n container={{\n rowGap: 1,\n colGap: 2,\n direction: orientation === 'vertical' ? 'column' : 'row',\n wrap: 'wrap',\n alignItems: orientation === 'vertical' ? 'stretch' : 'start'\n }}\n ref={ref}\n >\n {filters.map(({ field, mode, label, predefinedConditions }, i) => {\n if (mode !== 'predefined')\n return (\n <ConditionInput\n key={field.name}\n field={field}\n mode={mode}\n label={label ?? field.name}\n condition={conditionsMap[field.name]}\n flat={orientation === 'vertical'}\n onChange={newCondition => handleOnChange(field.name, newCondition)}\n handle={(handleItem: HandleValue) => {\n handlesRef.current[i] = { id: field.name, handle: handleItem };\n }}\n />\n );\n\n const selector = (\n <ConditionSelector\n key={field.name}\n label={label ?? field.name}\n labelHidden={orientation === 'vertical'}\n fields={[\n {\n id: field.name,\n type: basicFieldMap[field.type],\n primary: label \|\| field.name\n }\n ]}\n condition={conditionsMap[field.name]}\n conditions={predefinedConditions ?? []}\n onChange={(newCondition?: LeafCondition) => {\n onChange(createUpdatedCondition(field.name, newCondition));\n }}\n onClear={\n orientation === 'horizontal'\n ? () => onChange(createUpdatedCondition(field.name, undefined))\n : undefined\n }\n />\n );\n\n return orientation === 'vertical' ? (\n <StyledVerticalFieldGroup\n key={field.name}\n name={label ?? field.name}\n collapsed={collapsed}\n onToggleCollapsed={() => setCollapsed(cur => !cur)}\n actions={[\n {\n id: 'clear',\n text: t('clear'),\n onClick: () => onChange(createUpdatedCondition(field.name, undefined))\n }\n ]}\n >\n {selector}\n </StyledVerticalFieldGroup>\n ) : (\n selector\n );\n })}\n </Flex>\n );\n }\n);\n\nconst FilterModal = ({ filters, condition, onApply }: FilterModalProps) => {\n const t = useI18n();\n\n const { dismiss } = useModalContext();\n const [newCondition, setNewCondition] = useState<Condition \| undefined>(condition);\n\n const onApplyClick = useCallback(() => {\n onApply?.(newCondition);\n dismiss();\n }, [newCondition, onApply]);\n\n const clearHandle = useRef<HandleValue>(null);\n\n const actions = (\n <>\n <Button onClick={dismiss}>{t('cancel')}</Button>\n <Button variant='primary' onClick={onApplyClick}>\n {t('apply')}\n </Button>\n </>\n );\n\n return (\n <Modal heading={t('filters')} actions={actions} stretch>\n <Flex container={{ justify: 'end' }}>\n <StyledClearAllButton\n variant='simple'\n onClick={() => {\n setNewCondition(undefined);\n clearHandle.current?.clear();\n }}\n >\n {t('clear_all')}\n </StyledClearAllButton>\n </Flex>\n\n <PromotedFiltersContent\n filters={filters}\n condition={newCondition}\n onChange={setNewCondition}\n orientation='vertical'\n handle={clearHandle}\n />\n </Modal>\n );\n};\n\nexport const PromotedFilters: FunctionComponent<PromotedFiltersProps & ForwardProps> = forwardRef(\n 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 const clearHandle = useRef<HandleValue>(null);\n\n return (\n <Flex\n as={StyledPromotedFilters}\n container={{\n alignItems: orientation === 'horizontal' && isSmallOrAbove ? 'start' : undefined,\n justify: 'between',\n direction: !isSmallOrAbove \|\| orientation === 'horizontal' ? 'row' : 'column',\n pad: 2,\n gap: 2\n }}\n ref={ref}\n >\n {isSmallOrAbove ? (\n <>\n {orientation === 'vertical' && (\n <Flex\n container={{\n justify: 'between',\n alignItems: 'center',\n pad: [0, 0, 1, 0]\n }}\n >\n <StyledTextWithEllipsis variant='h3'>{t('filters')}</StyledTextWithEllipsis>\n <Button\n variant='simple'\n onClick={() => {\n clearHandle.current?.clear();\n }}\n >\n {t('clear_all')}\n </Button>\n </Flex>\n )}\n\n <PromotedFiltersContent\n filters={filters}\n onChange={onChange}\n condition={condition}\n orientation={orientation}\n ref={ref}\n handle={clearHandle}\n />\n\n {orientation === 'horizontal' && (\n <div>\n <StyledClearAllButton\n variant='simple'\n onClick={() => {\n clearHandle.current?.clear();\n }}\n >\n {t('promoted_filters_clear_all_button_label')}\n </StyledClearAllButton>\n </div>\n )}\n </>\n ) : (\n <>\n <Button type='button' variant='text' onClick={openFiltersModal}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }} forwardedAs='span'>\n <Icon name='filter' />\n <span>\n {t('filters')}\n {conditionsCount && `\\u00a0(${conditionsCount})`}\n </span>\n </Flex>\n </Button>\n <Button\n variant='simple'\n onClick={() => {\n onChange();\n }}\n >\n {t('clear_all')}\n </Button>\n </>\n )}\n </Flex>\n );\n }\n);\n\nexport default PromotedFilters;\n"]}

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

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

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

@@ -6,6 +6,7 @@ export const StyledPromotedFilters = styled.div(({ theme }) => {
     return css `
     border-radius: ${theme.components.card['border-radius']};
     background-color: ${theme.base.palette['secondary-background']};
+    padding-block: ${theme.base.spacing};
     ${StyledSelectInput} {
       min-width: calc(${theme.base['content-width'].xs} + ${theme.base['hit-area']['mouse-min']});

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;;~~MAE5D~~,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\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;qBACS,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;wBACnC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;qBAC7C,KAAK,CAAC,IAAI,CAAC,OAAO;;MAEjC,iBAAiB;wBACC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;;;;YAInF,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;GAIjF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;IAI9C,uBAAuB;;;CAG1B,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAIjD,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Button, Text } from '@pega/cosmos-react-core';\nimport { StyledModalChildrenWrap } from '@pega/cosmos-react-core/lib/components/Modal/Modal.styles';\nimport { StyledSelectInput } from '@pega/cosmos-react-core/lib/components/ComboBox/ComboBox.styles';\n\nexport const StyledPromotedFilters = styled.div(({ theme }) => {\n return css`\n border-radius: ${theme.components.card['border-radius']};\n background-color: ${theme.base.palette['secondary-background']};\n padding-block: ${theme.base.spacing};\n\n ${StyledSelectInput} {\n min-width: calc(${theme.base['content-width'].xs} + ${theme.base['hit-area']['mouse-min']});\n\n @media (pointer: coarse) {\n min-width: calc(\n ${theme.base['content-width'].xs} + ${theme.base['hit-area']['finger-min']}\n );\n }\n }\n `;\n});\n\nStyledPromotedFilters.defaultProps = defaultThemeProp;\n\nexport const StyledClearAllButton = styled(Button)`\n margin: 1.125rem 0 0.625rem;\n white-space: nowrap;\n\n ${StyledModalChildrenWrap} & {\n margin-top: 0;\n }\n`;\n\nStyledClearAllButton.defaultProps = defaultThemeProp;\n\nexport const StyledTextWithEllipsis = styled(Text)`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n`;\n\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n"]}

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

@@ -1,3 +1,3 @@
 export { default } from './PromotedFilters';
-export { PromotedFiltersProps, PromotedFilter } from './PromotedFilters.types';
+export type { PromotedFiltersProps, PromotedFilter } from './PromotedFilters.types';
 //# sourceMappingURL=index.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PromotedFilters/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,~~OAAO~~,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PromotedFilters/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PromotedFilters/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { default } from './PromotedFilters';\nexport { PromotedFiltersProps, PromotedFilter } from './PromotedFilters.types';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PromotedFilters/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { default } from './PromotedFilters';\nexport type { PromotedFiltersProps, PromotedFilter } from './PromotedFilters.types';\n"]}

package/package.json CHANGED Viewed

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

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

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

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

@@ -1 +0,0 @@

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

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

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

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

@@ -1 +0,0 @@

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