@pega/cosmos-react-work 2.1.6 → 2.1.7

package/lib/components/SearchResults/SearchResults.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useRef } from 'react';
+import { Button, Card, CardContent, Count, Flex, Grid, Icon, registerIcon, Modal, ModalManagerContext, EmptyState, SearchInput, Selectable, Text, useI18n, useBreakpoint, useAfterInitialEffect } from '@pega/cosmos-react-core';
+import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
+import * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';
+import SearchResult from './SearchResult';
+import Filter from './Filter';
+import { StyledModalFilterContent, StyledCountText, StyledSelectedFilters, StyledSearchResults, StyledFilterTitle } from './SearchResults.styles';
+registerIcon(filterIcon, filterOnIcon);
+const FilterModal = (props) => {
+    const { activeFilters, count, filters, onFilterChange, onClearFilter, onClearAllFilters } = props;
+    const t = useI18n();
+    return (_jsx(Modal, { heading: t('filters'), autoWidth: true, children: _jsxs(Grid, { as: StyledModalFilterContent, container: { rowGap: 2 }, children: [_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Text, { as: StyledCountText, variant: 'secondary', children: t('results_count', [count], { count }) }, void 0), onClearAllFilters && !!activeFilters.length && (_jsx(Button, { variant: 'link', onClick: onClearAllFilters, children: t('clear_all') }, void 0))] }, void 0), !!activeFilters.length && (_jsx(Flex, { as: StyledSelectedFilters, container: { gap: 1 }, children: activeFilters.map(filter => {
+                        return (_jsx(Selectable, { id: filter.id, onRemove: () => onFilterChange?.({
+                                name: filter.groupName,
+                                type: filter.type,
+                                value: filter.resetValue
+                            }), children: `${filter.groupName}: ${filter.name}` }, filter.id));
+                    }) }, void 0)), _jsx("div", { children: filters.map((filter) => {
+                        return (_jsx(Filter, { onFilterChange: onFilterChange, onClearFilter: onClearFilter, ...filter }, filter.name));
+                    }) }, void 0)] }, void 0) }, void 0));
+};
+const SearchResults = forwardRef(({ results, searchInputProps, count, filters, onFilterChange, onClearAllFilters, onClearFilter, onShowMore, ...restProps }, ref) => {
+    const t = useI18n();
+    const isMedium = useBreakpoint('md');
+    const { create } = useContext(ModalManagerContext);
+    const filtersMethods = useRef();
+    const { placeholder = t('search_placeholder_default') } = searchInputProps;
+    const activeFilters = filters.flatMap(group => {
+        if (group.type === 'select') {
+            return group.items.flatMap(item => {
+                if (item.checked) {
+                    return {
+                        id: item.id,
+                        name: item.name,
+                        resetValue: { ...item, checked: false },
+                        groupName: group.name,
+                        type: group.type
+                    };
+                }
+                return [];
+            });
+        }
+        return [];
+    });
+    const openFiltersModal = () => {
+        filtersMethods.current = create(FilterModal, {
+            activeFilters,
+            count,
+            filters,
+            onFilterChange,
+            onClearFilter,
+            onClearAllFilters
+        });
+    };
+    useAfterInitialEffect(() => {
+        if (filtersMethods.current) {
+            filtersMethods.current.update({
+                activeFilters,
+                count,
+                filters
+            });
+        }
+    }, [activeFilters, count, filters]);
+    useAfterInitialEffect(() => {
+        if (isMedium && filtersMethods.current)
+            filtersMethods.current.dismiss();
+    }, [isMedium]);
+    return (_jsx(Card, { children: _jsx(CardContent, { children: _jsxs(Grid, { ...restProps, as: StyledSearchResults, ref: ref, md: filters.length
+                    ? {
+                        container: {
+                            cols: '15rem auto',
+                            areas: '"search search" "filters results"'
+                        }
+                    }
+                    : {}, s: filters.length
+                    ? {
+                        container: {
+                            cols: 'auto'
+                        }
+                    }
+                    : {}, container: { rows: '1fr auto', areas: '"search" "results"', rowGap: 2, colGap: 4 }, children: [_jsx(Grid, { item: { area: 'search' }, children: _jsx(SearchInput, { ...searchInputProps, placeholder: placeholder }, void 0) }, void 0), isMedium && !!filters.length && (_jsxs(Grid, { item: { area: 'filters', alignSelf: 'start' }, children: [_jsxs(Flex, { as: StyledFilterTitle, container: { justify: 'between' }, children: [_jsx(Text, { variant: 'h2', children: t('filters') }, void 0), onClearAllFilters && !!activeFilters.length && (_jsx(Button, { variant: 'link', onClick: onClearAllFilters, children: t('clear_all') }, void 0))] }, void 0), filters.map((filter) => {
+                                return (_jsx(Filter, { onFilterChange: onFilterChange, onClearFilter: onClearFilter, ...filter }, filter.name));
+                            })] }, void 0)), _jsxs(Grid, { item: { area: 'results' }, container: {
+                            alignItems: 'center',
+                            rowGap: 2,
+                            rows: 'auto 1fr',
+                            areas: '"meta" "items"'
+                        }, children: [_jsxs(Grid, { item: { area: 'meta' }, container: { rowGap: 1 }, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, children: [_jsx(Text, { as: StyledCountText, variant: 'secondary', children: searchInputProps.value !== '' || results.length > 0
+                                                    ? t('results_count', [count], { count })
+                                                    : '' }, void 0), !isMedium && !!filters.length && (_jsxs(Button, { variant: 'simple', onClick: openFiltersModal, children: [_jsx(Icon, { name: activeFilters.length > 0 ? 'filter-on' : 'filter' }, void 0), "\u00A0", t('filters'), "\u00A0", _jsx(Count, { children: activeFilters.length }, void 0)] }, void 0))] }, void 0), !!activeFilters.length && (_jsx(Flex, { as: StyledSelectedFilters, container: { gap: 1 }, children: activeFilters.map(filter => {
+                                            return (_jsx(Selectable, { id: filter.id, onRemove: () => onFilterChange?.({
+                                                    name: filter.groupName,
+                                                    type: filter.type,
+                                                    value: filter.resetValue
+                                                }), children: `${filter.groupName}: ${filter.name}` }, filter.id));
+                                        }) }, void 0))] }, void 0), _jsx(Grid, { item: { area: 'items', alignSelf: results.length ? 'start' : 'center' }, container: { rowGap: 4 }, children: results.length ? (results.map((result) => {
+                                    return _jsx(SearchResult, { ...result }, result.id);
+                                })) : (_jsx(Grid, { item: { alignSelf: 'stretch' }, children: _jsx(EmptyState, { message: searchInputProps.value === '' ? t('empty_search') : undefined }, void 0) }, void 0)) }, void 0), onShowMore && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(Button, { variant: 'link', onClick: onShowMore, children: t('show_more') }, void 0) }, void 0))] }, void 0)] }, void 0) }, void 0) }, void 0));
+});
+export default SearchResults;
+//# sourceMappingURL=SearchResults.js.map

package/lib/components/SearchResults/SearchResults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,UAAU,EACV,MAAM,EAIP,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,KAAK,EACL,IAAI,EAEJ,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,KAAK,EAEL,mBAAmB,EACnB,UAAU,EACV,WAAW,EACX,UAAU,EACV,IAAI,EACJ,OAAO,EACP,aAAa,EACb,qBAAqB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,UAAU,MAAM,+DAA+D,CAAC;AAC5F,OAAO,KAAK,YAAY,MAAM,kEAAkE,CAAC;AAQjG,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EACL,wBAAwB,EACxB,eAAe,EACf,qBAAqB,EACrB,mBAAmB,EACnB,iBAAiB,EAClB,MAAM,wBAAwB,CAAC;AAEhC,YAAY,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;AAEvC,MAAM,WAAW,GAAG,CAClB,KAKC,EACD,EAAE;IACF,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAC;IAClG,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,KAAK,IAAC,OAAO,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,SAAS,kBACrC,MAAC,IAAI,IAAC,EAAE,EAAE,wBAAwB,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAC1D,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC/C,KAAC,IAAI,IAAC,EAAE,EAAE,eAAe,EAAE,OAAO,EAAC,WAAW,YAC3C,CAAC,CAAC,eAAe,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC,WAClC,EACN,iBAAiB,IAAI,CAAC,CAAC,aAAa,CAAC,MAAM,IAAI,CAC9C,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,iBAAiB,YAC9C,CAAC,CAAC,WAAW,CAAC,WACR,CACV,YACI,EACN,CAAC,CAAC,aAAa,CAAC,MAAM,IAAI,CACzB,KAAC,IAAI,IAAC,EAAE,EAAE,qBAAqB,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,YACnD,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;wBAC1B,OAAO,CACL,KAAC,UAAU,IAET,EAAE,EAAE,MAAM,CAAC,EAAE,EACb,QAAQ,EAAE,GAAG,EAAE,CACb,cAAc,EAAE,CAAC;gCACf,IAAI,EAAE,MAAM,CAAC,SAAS;gCACtB,IAAI,EAAE,MAAM,CAAC,IAAI;gCACjB,KAAK,EAAE,MAAM,CAAC,UAAU;6BACzB,CAAC,YAGH,GAAG,MAAM,CAAC,SAAS,KAAK,MAAM,CAAC,IAAI,EAAE,IAVjC,MAAM,CAAC,EAAE,CAWH,CACd,CAAC;oBACJ,CAAC,CAAC,WACG,CACR,EACD,wBACG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAmB,EAAE,EAAE;wBACnC,OAAO,CACL,KAAC,MAAM,IAEL,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,KACxB,MAAM,IAHL,MAAM,CAAC,IAAI,CAIhB,CACH,CAAC;oBACJ,CAAC,CAAC,WACE,YACD,WACD,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,aAAa,GAAyD,UAAU,CACpF,CACE,EACE,OAAO,EACP,gBAAgB,EAChB,KAAK,EACL,OAAO,EACP,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,UAAU,EACV,GAAG,SAAS,EACwB,EACtC,GAA8B,EAC9B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IACnD,MAAM,cAAc,GAAG,MAAM,EAAoD,CAAC;IAClF,MAAM,EAAE,WAAW,GAAG,CAAC,CAAC,4BAA4B,CAAC,EAAE,GAAG,gBAAgB,CAAC;IAE3E,MAAM,aAAa,GAAoB,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QAC7D,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;YAC3B,OAAO,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBAChC,IAAI,IAAI,CAAC,OAAO,EAAE;oBAChB,OAAO;wBACL,EAAE,EAAE,IAAI,CAAC,EAAE;wBACX,IAAI,EAAE,IAAI,CAAC,IAAI;wBACf,UAAU,EAAE,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE;wBACvC,SAAS,EAAE,KAAK,CAAC,IAAI;wBACrB,IAAI,EAAE,KAAK,CAAC,IAAI;qBACjB,CAAC;iBACH;gBACD,OAAO,EAAE,CAAC;YACZ,CAAC,CAAC,CAAC;SACJ;QACD,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,cAAc,CAAC,OAAO,GAAG,MAAM,CAAC,WAAW,EAAE;YAC3C,aAAa;YACb,KAAK;YACL,OAAO;YACP,cAAc;YACd,aAAa;YACb,iBAAiB;SAClB,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,cAAc,CAAC,OAAO,EAAE;YAC1B,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC;gBAC5B,aAAa;gBACb,KAAK;gBACL,OAAO;aACR,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpC,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,QAAQ,IAAI,cAAc,CAAC,OAAO;YAAE,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;IAC3E,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,KAAC,IAAI,cACH,KAAC,WAAW,cACV,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,mBAAmB,EACvB,GAAG,EAAE,GAAG,EACR,EAAE,EACA,OAAO,CAAC,MAAM;oBACZ,CAAC,CAAC;wBACE,SAAS,EAAE;4BACT,IAAI,EAAE,YAAY;4BAClB,KAAK,EAAE,mCAAmC;yBAC3C;qBACF;oBACH,CAAC,CAAC,EAAE,EAER,CAAC,EACC,OAAO,CAAC,MAAM;oBACZ,CAAC,CAAC;wBACE,SAAS,EAAE;4BACT,IAAI,EAAE,MAAM;yBACb;qBACF;oBACH,CAAC,CAAC,EAAE,EAER,SAAS,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,oBAAoB,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,aAElF,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,YAC5B,KAAC,WAAW,OAAK,gBAAgB,EAAE,WAAW,EAAE,WAAW,WAAI,WAC1D,EACN,QAAQ,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,IAAI,CAC/B,MAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,aACjD,MAAC,IAAI,IAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,aAC5D,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,SAAS,CAAC,WAAQ,EACvC,iBAAiB,IAAI,CAAC,CAAC,aAAa,CAAC,MAAM,IAAI,CAC9C,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,iBAAiB,YAC9C,CAAC,CAAC,WAAW,CAAC,WACR,CACV,YACI,EACN,OAAO,CAAC,GAAG,CAAC,CAAC,MAAmB,EAAE,EAAE;gCACnC,OAAO,CACL,KAAC,MAAM,IAEL,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,KACxB,MAAM,IAHL,MAAM,CAAC,IAAI,CAIhB,CACH,CAAC;4BACJ,CAAC,CAAC,YACG,CACR,EACD,MAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EACzB,SAAS,EAAE;4BACT,UAAU,EAAE,QAAQ;4BACpB,MAAM,EAAE,CAAC;4BACT,IAAI,EAAE,UAAU;4BAChB,KAAK,EAAE,gBAAgB;yBACxB,aAED,MAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aACpD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC3D,KAAC,IAAI,IAAC,EAAE,EAAE,eAAe,EAAE,OAAO,EAAC,WAAW,YAC3C,gBAAgB,CAAC,KAAK,KAAK,EAAE,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC;oDAClD,CAAC,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC;oDACxC,CAAC,CAAC,EAAE,WACD,EACN,CAAC,QAAQ,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,IAAI,CAChC,MAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,gBAAgB,aAChD,KAAC,IAAI,IAAC,IAAI,EAAE,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,WAAI,YAC1D,CAAC,CAAC,SAAS,CAAC,YACnB,KAAC,KAAK,cAAE,aAAa,CAAC,MAAM,WAAS,YAC9B,CACV,YACI,EACN,CAAC,CAAC,aAAa,CAAC,MAAM,IAAI,CACzB,KAAC,IAAI,IAAC,EAAE,EAAE,qBAAqB,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,YACnD,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;4CAC1B,OAAO,CACL,KAAC,UAAU,IAET,EAAE,EAAE,MAAM,CAAC,EAAE,EACb,QAAQ,EAAE,GAAG,EAAE,CACb,cAAc,EAAE,CAAC;oDACf,IAAI,EAAE,MAAM,CAAC,SAAS;oDACtB,IAAI,EAAE,MAAM,CAAC,IAAI;oDACjB,KAAK,EAAE,MAAM,CAAC,UAAU;iDACzB,CAAC,YAGH,GAAG,MAAM,CAAC,SAAS,KAAK,MAAM,CAAC,IAAI,EAAE,IAVjC,MAAM,CAAC,EAAE,CAWH,CACd,CAAC;wCACJ,CAAC,CAAC,WACG,CACR,YACI,EACP,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,EACvE,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,YAEvB,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAChB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAyB,EAAE,EAAE;oCACxC,OAAO,KAAC,YAAY,OAAqB,MAAM,IAArB,MAAM,CAAC,EAAE,CAAgB,CAAC;gCACtD,CAAC,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,YAClC,KAAC,UAAU,IACT,OAAO,EAAE,gBAAgB,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,SAAS,WACtE,WACG,CACR,WACI,EACN,UAAU,IAAI,CACb,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YACpC,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,UAAU,YACvC,CAAC,CAAC,WAAW,CAAC,WACR,WACJ,CACR,YACI,YACF,WACK,WACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import {\n  forwardRef,\n  useContext,\n  useRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  ComponentProps\n} from 'react';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  Count,\n  Flex,\n  ForwardProps,\n  Grid,\n  Icon,\n  registerIcon,\n  Modal,\n  ModalMethods,\n  ModalManagerContext,\n  EmptyState,\n  SearchInput,\n  Selectable,\n  Text,\n  useI18n,\n  useBreakpoint,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';\nimport * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';\n\nimport {\n  SearchResultsProps,\n  SearchResultProps,\n  FilterProps,\n  ActiveFilters\n} from './SearchResults.types';\nimport SearchResult from './SearchResult';\nimport Filter from './Filter';\nimport {\n  StyledModalFilterContent,\n  StyledCountText,\n  StyledSelectedFilters,\n  StyledSearchResults,\n  StyledFilterTitle\n} from './SearchResults.styles';\n\nregisterIcon(filterIcon, filterOnIcon);\n\nconst FilterModal = (\n  props: Pick<\n    SearchResultsProps,\n    'count' | 'filters' | 'onFilterChange' | 'onClearFilter' | 'onClearAllFilters'\n  > & {\n    activeFilters: ActiveFilters[];\n  }\n) => {\n  const { activeFilters, count, filters, onFilterChange, onClearFilter, onClearAllFilters } = props;\n  const t = useI18n();\n\n  return (\n    <Modal heading={t('filters')} autoWidth>\n      <Grid as={StyledModalFilterContent} container={{ rowGap: 2 }}>\n        <Flex container={{ gap: 1, alignItems: 'center' }}>\n          <Text as={StyledCountText} variant='secondary'>\n            {t('results_count', [count], { count })}\n          </Text>\n          {onClearAllFilters && !!activeFilters.length && (\n            <Button variant='link' onClick={onClearAllFilters}>\n              {t('clear_all')}\n            </Button>\n          )}\n        </Flex>\n        {!!activeFilters.length && (\n          <Flex as={StyledSelectedFilters} container={{ gap: 1 }}>\n            {activeFilters.map(filter => {\n              return (\n                <Selectable\n                  key={filter.id}\n                  id={filter.id}\n                  onRemove={() =>\n                    onFilterChange?.({\n                      name: filter.groupName,\n                      type: filter.type,\n                      value: filter.resetValue\n                    })\n                  }\n                >\n                  {`${filter.groupName}: ${filter.name}`}\n                </Selectable>\n              );\n            })}\n          </Flex>\n        )}\n        <div>\n          {filters.map((filter: FilterProps) => {\n            return (\n              <Filter\n                key={filter.name}\n                onFilterChange={onFilterChange}\n                onClearFilter={onClearFilter}\n                {...filter}\n              />\n            );\n          })}\n        </div>\n      </Grid>\n    </Modal>\n  );\n};\n\nconst SearchResults: FunctionComponent<SearchResultsProps & ForwardProps> = forwardRef(\n  (\n    {\n      results,\n      searchInputProps,\n      count,\n      filters,\n      onFilterChange,\n      onClearAllFilters,\n      onClearFilter,\n      onShowMore,\n      ...restProps\n    }: PropsWithoutRef<SearchResultsProps>,\n    ref: SearchResultsProps['ref']\n  ) => {\n    const t = useI18n();\n    const isMedium = useBreakpoint('md');\n    const { create } = useContext(ModalManagerContext);\n    const filtersMethods = useRef<ModalMethods<ComponentProps<typeof FilterModal>>>();\n    const { placeholder = t('search_placeholder_default') } = searchInputProps;\n\n    const activeFilters: ActiveFilters[] = filters.flatMap(group => {\n      if (group.type === 'select') {\n        return group.items.flatMap(item => {\n          if (item.checked) {\n            return {\n              id: item.id,\n              name: item.name,\n              resetValue: { ...item, checked: false },\n              groupName: group.name,\n              type: group.type\n            };\n          }\n          return [];\n        });\n      }\n      return [];\n    });\n\n    const openFiltersModal = () => {\n      filtersMethods.current = create(FilterModal, {\n        activeFilters,\n        count,\n        filters,\n        onFilterChange,\n        onClearFilter,\n        onClearAllFilters\n      });\n    };\n\n    useAfterInitialEffect(() => {\n      if (filtersMethods.current) {\n        filtersMethods.current.update({\n          activeFilters,\n          count,\n          filters\n        });\n      }\n    }, [activeFilters, count, filters]);\n\n    useAfterInitialEffect(() => {\n      if (isMedium && filtersMethods.current) filtersMethods.current.dismiss();\n    }, [isMedium]);\n\n    return (\n      <Card>\n        <CardContent>\n          <Grid\n            {...restProps}\n            as={StyledSearchResults}\n            ref={ref}\n            md={\n              filters.length\n                ? {\n                    container: {\n                      cols: '15rem auto',\n                      areas: '\"search search\" \"filters results\"'\n                    }\n                  }\n                : {}\n            }\n            s={\n              filters.length\n                ? {\n                    container: {\n                      cols: 'auto'\n                    }\n                  }\n                : {}\n            }\n            container={{ rows: '1fr auto', areas: '\"search\" \"results\"', rowGap: 2, colGap: 4 }}\n          >\n            <Grid item={{ area: 'search' }}>\n              <SearchInput {...searchInputProps} placeholder={placeholder} />\n            </Grid>\n            {isMedium && !!filters.length && (\n              <Grid item={{ area: 'filters', alignSelf: 'start' }}>\n                <Flex as={StyledFilterTitle} container={{ justify: 'between' }}>\n                  <Text variant='h2'>{t('filters')}</Text>\n                  {onClearAllFilters && !!activeFilters.length && (\n                    <Button variant='link' onClick={onClearAllFilters}>\n                      {t('clear_all')}\n                    </Button>\n                  )}\n                </Flex>\n                {filters.map((filter: FilterProps) => {\n                  return (\n                    <Filter\n                      key={filter.name}\n                      onFilterChange={onFilterChange}\n                      onClearFilter={onClearFilter}\n                      {...filter}\n                    />\n                  );\n                })}\n              </Grid>\n            )}\n            <Grid\n              item={{ area: 'results' }}\n              container={{\n                alignItems: 'center',\n                rowGap: 2,\n                rows: 'auto 1fr',\n                areas: '\"meta\" \"items\"'\n              }}\n            >\n              <Grid item={{ area: 'meta' }} container={{ rowGap: 1 }}>\n                <Flex container={{ justify: 'between', alignItems: 'center' }}>\n                  <Text as={StyledCountText} variant='secondary'>\n                    {searchInputProps.value !== '' || results.length > 0\n                      ? t('results_count', [count], { count })\n                      : ''}\n                  </Text>\n                  {!isMedium && !!filters.length && (\n                    <Button variant='simple' onClick={openFiltersModal}>\n                      <Icon name={activeFilters.length > 0 ? 'filter-on' : 'filter'} />\n                      &nbsp;{t('filters')}&nbsp;\n                      <Count>{activeFilters.length}</Count>\n                    </Button>\n                  )}\n                </Flex>\n                {!!activeFilters.length && (\n                  <Flex as={StyledSelectedFilters} container={{ gap: 1 }}>\n                    {activeFilters.map(filter => {\n                      return (\n                        <Selectable\n                          key={filter.id}\n                          id={filter.id}\n                          onRemove={() =>\n                            onFilterChange?.({\n                              name: filter.groupName,\n                              type: filter.type,\n                              value: filter.resetValue\n                            })\n                          }\n                        >\n                          {`${filter.groupName}: ${filter.name}`}\n                        </Selectable>\n                      );\n                    })}\n                  </Flex>\n                )}\n              </Grid>\n              <Grid\n                item={{ area: 'items', alignSelf: results.length ? 'start' : 'center' }}\n                container={{ rowGap: 4 }}\n              >\n                {results.length ? (\n                  results.map((result: SearchResultProps) => {\n                    return <SearchResult key={result.id} {...result} />;\n                  })\n                ) : (\n                  <Grid item={{ alignSelf: 'stretch' }}>\n                    <EmptyState\n                      message={searchInputProps.value === '' ? t('empty_search') : undefined}\n                    />\n                  </Grid>\n                )}\n              </Grid>\n              {onShowMore && (\n                <Flex container={{ justify: 'center' }}>\n                  <Button variant='link' onClick={onShowMore}>\n                    {t('show_more')}\n                  </Button>\n                </Flex>\n              )}\n            </Grid>\n          </Grid>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default SearchResults;\n"]}

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

@@ -0,0 +1,8 @@
+export declare const StyledSearchResults: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFilterTitle: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCountText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledModalFilterContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSelectedFilters: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFilter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFilterButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=SearchResults.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,mBAAmB,yGAAe,CAAC;AAIhD,eAAO,MAAM,iBAAiB,0GAI5B,CAAC;AAIH,eAAO,MAAM,eAAe,0GAI1B,CAAC;AAIH,eAAO,MAAM,wBAAwB,yGAWpC,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGAWjC,CAAC;AAIF,eAAO,MAAM,YAAY,yGAWvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,qOAsB7B,CAAC"}

package/lib/components/SearchResults/SearchResults.styles.js

@@ -0,0 +1,67 @@
+import styled, { css } from 'styled-components';
+import { Button, calculateFontSize, defaultThemeProp, StyledIcon, useDirection } from '@pega/cosmos-react-core';
+export const StyledSearchResults = styled.div ``;
+StyledSearchResults.defaultProps = defaultThemeProp;
+export const StyledFilterTitle = styled.span(({ theme: { base } }) => {
+    return css `
+    padding-bottom: calc(2 * ${base.spacing});
+  `;
+});
+StyledFilterTitle.defaultProps = defaultThemeProp;
+export const StyledCountText = styled.span(({ theme: { base } }) => {
+    return css `
+    font-weight: ${base['font-weight']['semi-bold']};
+  `;
+});
+StyledCountText.defaultProps = defaultThemeProp;
+export const StyledModalFilterContent = styled.div(({ theme: { base: { spacing } } }) => {
+    return css `
+      margin-top: calc(0.25 * ${spacing});
+      width: 25rem;
+    `;
+});
+StyledModalFilterContent.defaultProps = defaultThemeProp;
+export const StyledSelectedFilters = styled.div(({ theme: { base: { spacing } } }) => {
+    return css `
+      overflow-x: auto;
+      padding-bottom: calc(0.5 * ${spacing});
+    `;
+});
+StyledSelectedFilters.defaultProps = defaultThemeProp;
+export const StyledFilter = styled.div(props => {
+    const { base } = props.theme;
+    return css `
+    border-bottom: 0.0625rem solid ${base.palette['border-line']};
+    padding-bottom: calc(${base.spacing} * 2);
+    margin-bottom: calc(${base.spacing} * 2);
+
+    > :last-child > :first-child {
+      padding-block-start: ${base.spacing};
+    }
+  `;
+});
+StyledFilter.defaultProps = defaultThemeProp;
+export const StyledFilterButton = styled(Button)(({ theme: { base } }) => {
+    const fontSize = calculateFontSize(base['font-size'], base['font-scale']);
+    const { rtl } = useDirection();
+    return css `
+    display: inline-flex;
+    font-size: ${fontSize.xl};
+
+    ${StyledIcon} {
+      height: 1em;
+      width: 1em;
+      transition: transform ${base.animation.speed} ${base.animation.timing.ease};
+    }
+
+    &[aria-expanded='true'] ${StyledIcon} {
+      transform: rotate(0);
+    }
+
+    &[aria-expanded='false'] ${StyledIcon} {
+      transform: rotate(calc(${rtl ? '1' : '-1'} * 90deg));
+    }
+  `;
+});
+StyledFilterButton.defaultProps = defaultThemeProp;
+//# sourceMappingURL=SearchResults.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.styles.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,iBAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEhD,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACnE,OAAO,GAAG,CAAA;+BACmB,IAAI,CAAC,OAAO;GACxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACjE,OAAO,GAAG,CAAA;mBACO,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;GAChD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAChD,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;gCACkB,OAAO;;KAElC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAC7C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;mCAEqB,OAAO;KACrC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IAC7C,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC;IAC7B,OAAO,GAAG,CAAA;qCACyB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;2BACrC,IAAI,CAAC,OAAO;0BACb,IAAI,CAAC,OAAO;;;6BAGT,IAAI,CAAC,OAAO;;GAEtC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACvE,MAAM,QAAQ,GAAG,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAE1E,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;;iBAEK,QAAQ,CAAC,EAAE;;MAEtB,UAAU;;;8BAGc,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;8BAGlD,UAAU;;;;+BAIT,UAAU;+BACV,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;;GAE5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  calculateFontSize,\n  defaultThemeProp,\n  StyledIcon,\n  useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledSearchResults = styled.div``;\n\nStyledSearchResults.defaultProps = defaultThemeProp;\n\nexport const StyledFilterTitle = styled.span(({ theme: { base } }) => {\n  return css`\n    padding-bottom: calc(2 * ${base.spacing});\n  `;\n});\n\nStyledFilterTitle.defaultProps = defaultThemeProp;\n\nexport const StyledCountText = styled.span(({ theme: { base } }) => {\n  return css`\n    font-weight: ${base['font-weight']['semi-bold']};\n  `;\n});\n\nStyledCountText.defaultProps = defaultThemeProp;\n\nexport const StyledModalFilterContent = styled.div(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      margin-top: calc(0.25 * ${spacing});\n      width: 25rem;\n    `;\n  }\n);\n\nStyledModalFilterContent.defaultProps = defaultThemeProp;\n\nexport const StyledSelectedFilters = styled.div(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      overflow-x: auto;\n      padding-bottom: calc(0.5 * ${spacing});\n    `;\n  }\n);\n\nStyledSelectedFilters.defaultProps = defaultThemeProp;\n\nexport const StyledFilter = styled.div(props => {\n  const { base } = props.theme;\n  return css`\n    border-bottom: 0.0625rem solid ${base.palette['border-line']};\n    padding-bottom: calc(${base.spacing} * 2);\n    margin-bottom: calc(${base.spacing} * 2);\n\n    > :last-child > :first-child {\n      padding-block-start: ${base.spacing};\n    }\n  `;\n});\n\nStyledFilter.defaultProps = defaultThemeProp;\n\nexport const StyledFilterButton = styled(Button)(({ theme: { base } }) => {\n  const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n  const { rtl } = useDirection();\n  return css`\n    display: inline-flex;\n    font-size: ${fontSize.xl};\n\n    ${StyledIcon} {\n      height: 1em;\n      width: 1em;\n      transition: transform ${base.animation.speed} ${base.animation.timing.ease};\n    }\n\n    &[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(0);\n    }\n\n    &[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(calc(${rtl ? '1' : '-1'} * 90deg));\n    }\n  `;\n});\n\nStyledFilterButton.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,96 @@
+import { Ref } from 'react';
+import { LinkProps, MetaListProps, NoChildrenProp, OmitStrict, RadioCheckProps, SearchInputProps } from '@pega/cosmos-react-core';
+interface BaseFilterProps {
+    /** The name of the filter. */
+    name: string;
+    /**
+     * Determines if the filter will start in an expanded state.
+     * @default true
+     */
+    expanded?: boolean;
+}
+export interface SelectFilterItemProps {
+    /** The id for the filter option. */
+    id: NonNullable<RadioCheckProps['id']>;
+    /** The label for the filter option. */
+    label: RadioCheckProps['label'];
+    /** Determines if the filter option is active or not. */
+    checked: RadioCheckProps['checked'];
+    /** The name for the filter item that will show in the selected filters section */
+    name: NonNullable<RadioCheckProps['name']>;
+}
+export interface SelectFilterProps extends BaseFilterProps {
+    /** Internal prop designating this object as a select filter. */
+    type: 'select';
+    /** The set of options for the filter. */
+    items: SelectFilterItemProps[];
+    /**
+     * Determines if the filter will render as a RadioButtonGroup or CheckboxGroup.
+     * @default "multi-select"
+     */
+    selectType?: 'single-select' | 'multi-select';
+}
+export interface ActiveSelectFilter {
+    id: SelectFilterItemProps['id'];
+    name: SelectFilterItemProps['name'];
+    resetValue: SelectFilterItemProps & {
+        checked: false;
+    };
+    groupName: SelectFilterProps['name'];
+    type: SelectFilterProps['type'];
+}
+export interface TextFilterProps extends BaseFilterProps {
+    /** Internal prop designating this object as a text filter. */
+    type: 'text';
+    /** The value of the filter. */
+    value?: string;
+    /**
+     * Placeholder text. The default value is a locale translation of 'Search…'
+     * @default "Search…"
+     */
+    placeholder?: string;
+}
+export declare type FilterProps = SelectFilterProps;
+export declare type ActiveFilters = ActiveSelectFilter;
+export interface SearchResultProps {
+    /** The id of the search result to be displayed. */
+    id: string;
+    /** The title of the search result. */
+    title: string;
+    /** LinkProps to be passed to . */
+    link: OmitStrict<LinkProps, 'children' | 'variant' | 'icon'>;
+    /** A description for the search result. */
+    description?: string;
+    /** A list of elements to be rendered within a MetaList categorizing the result. */
+    meta?: MetaListProps['items'];
+}
+interface BaseFilterEvent {
+    name: string;
+}
+interface SelectFilterEvent extends BaseFilterEvent {
+    type: 'select';
+    value: SelectFilterItemProps;
+}
+export declare type FilterEvent = SelectFilterEvent;
+export interface SearchResultsProps extends NoChildrenProp {
+    /** A set of results to render for a given search. */
+    results: SearchResultProps[];
+    /** Props related to the SearchInput. */
+    searchInputProps: SearchInputProps;
+    /** The number of total results related to a given search. */
+    count: number;
+    /** A set of filters and their current states for a given search. */
+    filters: FilterProps[];
+    /** Callback that is fired when the value of a filter changes. */
+    onFilterChange?: (filter: FilterEvent) => void;
+    /** Callback that is fired when the Clear all button is clicked. */
+    onClearAllFilters?: () => void;
+    /** Callback that is fired when the Clear button is clicked within a filter. */
+    onClearFilter?: (name: BaseFilterProps['name']) => void;
+    /** Callback that will render a Show more button at the bottom of the results and is fired when that button is clicked. */
+    onShowMore?: () => void;
+    /** A ref for the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+}
+export {};
+//# sourceMappingURL=SearchResults.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.types.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.types.ts"],"names":[],"mappings":"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"}

package/lib/components/SearchResults/SearchResults.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SearchResults.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.types.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport {\n  LinkProps,\n  MetaListProps,\n  NoChildrenProp,\n  OmitStrict,\n  RadioCheckProps,\n  SearchInputProps\n} from '@pega/cosmos-react-core';\n\ninterface BaseFilterProps {\n  /** The name of the filter. */\n  name: string;\n  /**\n   * Determines if the filter will start in an expanded state.\n   * @default true\n   */\n  expanded?: boolean;\n}\n\nexport interface SelectFilterItemProps {\n  /** The id for the filter option. */\n  id: NonNullable<RadioCheckProps['id']>;\n  /** The label for the filter option. */\n  label: RadioCheckProps['label'];\n  /** Determines if the filter option is active or not. */\n  checked: RadioCheckProps['checked'];\n  /** The name for the filter item that will show in the selected filters section */\n  name: NonNullable<RadioCheckProps['name']>;\n}\n\nexport interface SelectFilterProps extends BaseFilterProps {\n  /** Internal prop designating this object as a select filter. */\n  type: 'select';\n  /** The set of options for the filter. */\n  items: SelectFilterItemProps[];\n  /**\n   * Determines if the filter will render as a RadioButtonGroup or CheckboxGroup.\n   * @default \"multi-select\"\n   */\n  selectType?: 'single-select' | 'multi-select';\n}\n\nexport interface ActiveSelectFilter {\n  id: SelectFilterItemProps['id'];\n  name: SelectFilterItemProps['name'];\n  resetValue: SelectFilterItemProps & { checked: false };\n  groupName: SelectFilterProps['name'];\n  type: SelectFilterProps['type'];\n}\n\nexport interface TextFilterProps extends BaseFilterProps {\n  /** Internal prop designating this object as a text filter. */\n  type: 'text';\n  /** The value of the filter. */\n  value?: string;\n  /**\n   * Placeholder text. The default value is a locale translation of 'Search…'\n   * @default \"Search…\"\n   */\n  placeholder?: string;\n}\n\n// For use later: export type FilterProps = TextFilterProps | SelectFilterProps;\nexport type FilterProps = SelectFilterProps;\n\nexport type ActiveFilters = ActiveSelectFilter;\n\nexport interface SearchResultProps {\n  /** The id of the search result to be displayed. */\n  id: string;\n  /** The title of the search result. */\n  title: string;\n  /** LinkProps to be passed to . */\n  link: OmitStrict<LinkProps, 'children' | 'variant' | 'icon'>;\n  /** A description for the search result. */\n  description?: string;\n  /** A list of elements to be rendered within a MetaList categorizing the result. */\n  meta?: MetaListProps['items'];\n}\n\ninterface BaseFilterEvent {\n  name: string;\n}\ninterface SelectFilterEvent extends BaseFilterEvent {\n  type: 'select';\n  value: SelectFilterItemProps;\n}\n\n// For use later: export type FilterEvent = SelectFilterEvent | TextFilterEvent;\nexport type FilterEvent = SelectFilterEvent;\n\nexport interface SearchResultsProps extends NoChildrenProp {\n  /** A set of results to render for a given search. */\n  results: SearchResultProps[];\n  /** Props related to the SearchInput. */\n  searchInputProps: SearchInputProps;\n  /** The number of total results related to a given search. */\n  count: number;\n  /** A set of filters and their current states for a given search. */\n  filters: FilterProps[];\n  /** Callback that is fired when the value of a filter changes. */\n  onFilterChange?: (filter: FilterEvent) => void;\n  /** Callback that is fired when the Clear all button is clicked. */\n  onClearAllFilters?: () => void;\n  /** Callback that is fired when the Clear button is clicked within a filter. */\n  onClearFilter?: (name: BaseFilterProps['name']) => void;\n  /** Callback that will render a Show more button at the bottom of the results and is fired when that button is clicked. */\n  onShowMore?: () => void;\n  /** A ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/SearchResults/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './SearchResults';
+export { SearchResultsProps, SearchResultProps, FilterEvent } from './SearchResults.types';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/SearchResults/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/components/SearchResults/index.js

@@ -0,0 +1,2 @@
+export { default } from './SearchResults';
+//# sourceMappingURL=index.js.map

package/lib/components/SearchResults/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SearchResults/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './SearchResults';\nexport { SearchResultsProps, SearchResultProps, FilterEvent } from './SearchResults.types';\n"]}

package/lib/components/Stages/Stages.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { StagesProps } from './Stages.types';
+declare const Stages: FunctionComponent<StagesProps & ForwardProps>;
+export default Stages;
+//# sourceMappingURL=Stages.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAwD,MAAM,OAAO,CAAC;AAGhG,OAAO,EAIL,YAAY,EAab,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAM7C,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAwMzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Stages/Stages.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useContext, useCallback } from 'react';
+import { remToPx } from 'polished';
+import { Icon, registerIcon, Flex, useElement, useOuterEvent, Popover, useI18n, Button, ModalManagerContext, Modal, getFocusables, useBreakpoint, debounce, useTheme } from '@pega/cosmos-react-core';
+import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
+import StepsContainer from './StepsContainer';
+import { StyledInnerStage, StyledStage, StyledStagePopover, StyledStages } from './Stages.styles';
+registerIcon(checkIcon);
+const Stages = (props) => {
+    const { current, stages, caseTitle, ...restProps } = props;
+    const t = useI18n();
+    const [stagesEl, setStagesEl] = useElement();
+    const [currentStageNameEl, setCurrentStageNameEl] = useElement();
+    const [currentStageButtonEl, setCurrentStageButtonEl] = useElement();
+    const [activeStageIndex, setActiveStageIndex] = useState(0);
+    const activeStageObj = stages[activeStageIndex];
+    const stagesRefs = useRef([]);
+    const activeStageEl = stagesRefs.current[activeStageIndex];
+    const { create } = useContext(ModalManagerContext);
+    const [popoverEl, setPopoverRef] = useElement();
+    const [showPopover, setShowPopover] = useState(false);
+    const popoverContentRef = useRef(null);
+    const isSmallOrAbove = useBreakpoint('sm');
+    const focusableElements = getFocusables(popoverContentRef);
+    const [compressedView, setCompressedView] = useState(false);
+    const [minExpandedWidth, setMinExpandedWidth] = useState(0);
+    const resizeObserver = new ResizeObserver(debounce((entries) => {
+        if (entries[0].contentRect.width > minExpandedWidth)
+            setCompressedView(false);
+    }, 100));
+    const theme = useTheme();
+    const intersectionObserver = new IntersectionObserver(entries => {
+        if (entries[0].intersectionRatio < 1) {
+            if (stagesEl)
+                setMinExpandedWidth(Math.max(minExpandedWidth, stagesEl.offsetWidth + 1));
+            setCompressedView(true);
+        }
+    }, { root: currentStageButtonEl, rootMargin: `0px -${remToPx(theme.base.spacing)}`, threshold: 1 });
+    useEffect(() => {
+        if (stagesEl && currentStageNameEl) {
+            intersectionObserver.observe(currentStageNameEl);
+            resizeObserver.observe(stagesEl);
+            return () => {
+                intersectionObserver.disconnect();
+                resizeObserver.disconnect();
+            };
+        }
+    }, [stagesEl, currentStageNameEl, compressedView]);
+    useOuterEvent('mousedown', [popoverEl, activeStageEl], e => {
+        if (showPopover) {
+            setShowPopover(false);
+            e.preventDefault();
+        }
+    });
+    const onMouseDown = (ev) => {
+        if (!showPopover)
+            ev.preventDefault();
+    };
+    const onKeyDown = useCallback(({ key }) => {
+        if (key === 'Escape') {
+            setShowPopover(false);
+            activeStageEl?.focus();
+        }
+    }, [activeStageEl]);
+    const onKeyDownPopover = useCallback((event) => {
+        if (event.key === 'Tab' && event.shiftKey) {
+            const firstFocusable = focusableElements[0];
+            if (document.activeElement === firstFocusable) {
+                stagesRefs.current[activeStageIndex + 1]?.focus();
+                setShowPopover(false);
+            }
+        }
+        if (event.key === 'Tab' && !event.shiftKey) {
+            const lastFocusable = focusableElements[focusableElements.length - 1];
+            if (document.activeElement === lastFocusable) {
+                activeStageEl?.focus();
+                setShowPopover(false);
+            }
+        }
+    }, [activeStageEl, focusableElements, activeStageIndex]);
+    useEffect(() => {
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [onKeyDown]);
+    useEffect(() => {
+        if (focusableElements.length)
+            focusableElements[0].focus();
+    }, [popoverEl]);
+    const [requestDismiss, setRequestDismiss] = useState(false);
+    useEffect(() => {
+        if (requestDismiss) {
+            setShowPopover(false);
+            activeStageEl?.focus();
+            setRequestDismiss(false);
+        }
+    }, [activeStageEl, requestDismiss]);
+    const RenderModal = ({ heading = t('lifecycle', [caseTitle || 'Case']) }) => {
+        return (_jsx(Modal, { ...restProps, heading: heading, onRequestDismiss: () => setRequestDismiss(true), children: stages.map((stage, id) => (_jsx(StepsContainer, { currentStage: [stage] }, id.toString()))) }, void 0));
+    };
+    const openModal = () => {
+        setShowPopover(false);
+        create(RenderModal);
+    };
+    const isCurrent = (stageId) => current === stageId;
+    return (_jsxs(_Fragment, { children: [_jsx(Flex, { container: true, as: StyledStages, ref: setStagesEl, ...restProps, children: stages.map((stage, index) => (_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledStage, item: { grow: compressedView && !isCurrent(stage.id) ? 0 : 1, shrink: 1 }, "aria-current": isCurrent(stage.id) ? 'step' : undefined, "aria-label": `Stage ${stage.name}`, ref: (el) => {
+                        stagesRefs.current[index] = el;
+                        if (isCurrent(stage.id))
+                            setCurrentStageButtonEl(el);
+                    }, onMouseDown: onMouseDown, onClick: () => {
+                        setActiveStageIndex(index);
+                        if (isSmallOrAbove) {
+                            setShowPopover(!showPopover);
+                        }
+                        else {
+                            openModal();
+                        }
+                    }, children: [stage.complete && _jsx(Icon, { name: 'check' }, void 0), !(stage.complete && compressedView) && (_jsx(StyledInnerStage, { ref: isCurrent(stage.id) ? setCurrentStageNameEl : undefined, ellipsis: isCurrent(stage.id) && compressedView, children: !isCurrent(stage.id) && compressedView ? index + 1 : stage.name }, void 0))] }, `stage-${stage.id}`))) }, void 0), _jsx(Flex, { ref: popoverContentRef, children: _jsxs(Popover, { as: StyledStagePopover, show: showPopover && isSmallOrAbove, target: stagesRefs.current[activeStageIndex], id: 'id', ref: setPopoverRef, arrow: true, placement: 'bottom-start', onKeyDown: onKeyDownPopover, modifiers: [
+                        {
+                            name: 'flip',
+                            options: {
+                                fallbackPlacements: ['bottom-end', 'right', 'left']
+                            }
+                        }
+                    ], children: [_jsx(StepsContainer, { currentStage: [activeStageObj] }, void 0), _jsx(Button, { variant: 'secondary', onClick: openModal, children: t('stage_see_full_lifecycle') }, void 0)] }, void 0) }, void 0)] }, void 0));
+};
+export default Stages;
+//# sourceMappingURL=Stages.js.map

package/lib/components/Stages/Stages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useState, useRef, useEffect, useContext, useCallback } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  Icon,\n  registerIcon,\n  Flex,\n  ForwardProps,\n  useElement,\n  useOuterEvent,\n  Popover,\n  useI18n,\n  Button,\n  ModalManagerContext,\n  ModalProps,\n  Modal,\n  getFocusables,\n  useBreakpoint,\n  debounce,\n  useTheme\n} from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport { StagesProps } from './Stages.types';\nimport StepsContainer from './StepsContainer';\nimport { StyledInnerStage, StyledStage, StyledStagePopover, StyledStages } from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: FunctionComponent<StagesProps & ForwardProps> = (props: StagesProps) => {\n  const { current, stages, caseTitle, ...restProps } = props;\n  const t = useI18n();\n\n  const [stagesEl, setStagesEl] = useElement<HTMLDivElement>();\n  const [currentStageNameEl, setCurrentStageNameEl] = useElement<HTMLSpanElement>();\n  const [currentStageButtonEl, setCurrentStageButtonEl] = useElement<HTMLButtonElement>();\n\n  const [activeStageIndex, setActiveStageIndex] = useState<number>(0);\n  const activeStageObj = stages[activeStageIndex];\n  const stagesRefs = useRef<HTMLElement[]>([]);\n  const activeStageEl = stagesRefs.current[activeStageIndex];\n  const { create } = useContext(ModalManagerContext);\n  const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n  const [showPopover, setShowPopover] = useState(false);\n  const popoverContentRef = useRef(null);\n  const isSmallOrAbove = useBreakpoint('sm');\n  const focusableElements = getFocusables(popoverContentRef);\n\n  const [compressedView, setCompressedView] = useState(false);\n  const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n  const resizeObserver = new ResizeObserver(\n    debounce((entries: ResizeObserverEntry[]) => {\n      if (entries[0].contentRect.width > minExpandedWidth) setCompressedView(false);\n    }, 100)\n  );\n\n  const theme = useTheme();\n\n  const intersectionObserver = new IntersectionObserver(\n    entries => {\n      if (entries[0].intersectionRatio < 1) {\n        if (stagesEl) setMinExpandedWidth(Math.max(minExpandedWidth, stagesEl.offsetWidth + 1));\n        setCompressedView(true);\n      }\n    },\n    { root: currentStageButtonEl, rootMargin: `0px -${remToPx(theme.base.spacing)}`, threshold: 1 }\n  );\n\n  useEffect(() => {\n    if (stagesEl && currentStageNameEl) {\n      intersectionObserver.observe(currentStageNameEl as Element);\n      resizeObserver.observe(stagesEl);\n\n      return () => {\n        intersectionObserver.disconnect();\n        resizeObserver.disconnect();\n      };\n    }\n  }, [stagesEl, currentStageNameEl, compressedView]);\n\n  useOuterEvent('mousedown', [popoverEl, activeStageEl], e => {\n    if (showPopover) {\n      setShowPopover(false);\n      e.preventDefault();\n    }\n  });\n\n  const onMouseDown = (ev: React.MouseEvent<HTMLElement>) => {\n    if (!showPopover) ev.preventDefault();\n  };\n\n  const onKeyDown = useCallback(\n    ({ key }: KeyboardEvent) => {\n      if (key === 'Escape') {\n        setShowPopover(false);\n        activeStageEl?.focus();\n      }\n    },\n    [activeStageEl]\n  );\n\n  const onKeyDownPopover = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Tab' && event.shiftKey) {\n        const firstFocusable = focusableElements[0];\n\n        if (document.activeElement === firstFocusable) {\n          stagesRefs.current[activeStageIndex + 1]?.focus();\n          setShowPopover(false);\n        }\n      }\n\n      if (event.key === 'Tab' && !event.shiftKey) {\n        const lastFocusable = focusableElements[focusableElements.length - 1];\n\n        if (document.activeElement === lastFocusable) {\n          activeStageEl?.focus();\n          setShowPopover(false);\n        }\n      }\n    },\n    [activeStageEl, focusableElements, activeStageIndex]\n  );\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeyDown);\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [onKeyDown]);\n\n  useEffect(() => {\n    if (focusableElements.length) focusableElements[0].focus();\n  }, [popoverEl]);\n\n  const [requestDismiss, setRequestDismiss] = useState(false);\n\n  useEffect(() => {\n    if (requestDismiss) {\n      setShowPopover(false);\n      activeStageEl?.focus();\n      setRequestDismiss(false);\n    }\n  }, [activeStageEl, requestDismiss]);\n\n  const RenderModal = ({\n    heading = t('lifecycle', [caseTitle || 'Case'])\n  }: Partial<ModalProps>) => {\n    return (\n      <Modal {...restProps} heading={heading} onRequestDismiss={() => setRequestDismiss(true)}>\n        {stages.map((stage, id) => (\n          <StepsContainer currentStage={[stage]} key={id.toString()} />\n        ))}\n      </Modal>\n    );\n  };\n\n  const openModal = () => {\n    setShowPopover(false);\n    create(RenderModal);\n  };\n\n  const isCurrent = (stageId: string) => current === stageId;\n\n  return (\n    <>\n      <Flex container as={StyledStages} ref={setStagesEl} {...restProps}>\n        {stages.map((stage, index) => (\n          <Flex\n            container={{ justify: 'center', alignItems: 'center' }}\n            as={StyledStage}\n            item={{ grow: compressedView && !isCurrent(stage.id) ? 0 : 1, shrink: 1 }}\n            aria-current={isCurrent(stage.id) ? 'step' : undefined}\n            aria-label={`Stage ${stage.name}`}\n            key={`stage-${stage.id}`}\n            ref={(el: HTMLButtonElement) => {\n              stagesRefs.current[index] = el;\n              if (isCurrent(stage.id)) setCurrentStageButtonEl(el);\n            }}\n            onMouseDown={onMouseDown}\n            onClick={() => {\n              setActiveStageIndex(index);\n              if (isSmallOrAbove) {\n                setShowPopover(!showPopover);\n              } else {\n                openModal();\n              }\n            }}\n          >\n            {stage.complete && <Icon name='check' />}\n            {!(stage.complete && compressedView) && (\n              <StyledInnerStage\n                ref={isCurrent(stage.id) ? setCurrentStageNameEl : undefined}\n                ellipsis={isCurrent(stage.id) && compressedView}\n              >\n                {!isCurrent(stage.id) && compressedView ? index + 1 : stage.name}\n              </StyledInnerStage>\n            )}\n          </Flex>\n        ))}\n      </Flex>\n      <Flex ref={popoverContentRef}>\n        <Popover\n          as={StyledStagePopover}\n          show={showPopover && isSmallOrAbove}\n          target={stagesRefs.current[activeStageIndex]}\n          id='id'\n          ref={setPopoverRef}\n          arrow\n          placement='bottom-start'\n          onKeyDown={onKeyDownPopover}\n          modifiers={[\n            {\n              name: 'flip',\n              options: {\n                fallbackPlacements: ['bottom-end', 'right', 'left']\n              }\n            }\n          ]}\n        >\n          <StepsContainer currentStage={[activeStageObj]} />\n          <Button variant='secondary' onClick={openModal}>\n            {t('stage_see_full_lifecycle')}\n          </Button>\n        </Popover>\n      </Flex>\n    </>\n  );\n};\n\nexport default Stages;\n"]}

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

@@ -0,0 +1,16 @@
+export declare const StyledStages: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledInnerStage: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    ellipsis?: boolean | undefined;
+}, never>;
+export declare const StyledStage: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledStagePopover: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledStepsContainer: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledStep: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+    complete: boolean;
+}, never>;
+export declare const StyledSteps: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledInnerStep: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    complete: boolean;
+}, never>;
+export declare const StyledDateTimeDisplay: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=Stages.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,YAAY,yGAMvB,CAAC;AAIH,eAAO,MAAM,gBAAgB;;SAW3B,CAAC;AAEH,eAAO,MAAM,WAAW,4GA4LvB,CAAC;AAIF,eAAO,MAAM,kBAAkB,yGAM7B,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAU/B,CAAC;AAIH,eAAO,MAAM,UAAU;cAAyB,OAAO;SA0BrD,CAAC;AAIH,eAAO,MAAM,WAAW,yGAGvB,CAAC;AAIF,eAAO,MAAM,eAAe;cAA2B,OAAO;SAmB5D,CAAC;AAIH,eAAO,MAAM,qBAAqB,0GAMhC,CAAC"}