npm - @pega/cosmos-react-work - Versions diffs - 2.0.0-dev.2.1 → 2.0.0-dev.20.0 - Mend

@pega/cosmos-react-work 2.0.0-dev.2.1 → 2.0.0-dev.20.0

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

Files changed (180) hide show

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

@@ -1,57 +1,24 @@
-import React, { forwardRef, useContext, useRef } from 'react';
-import styled, { css } from 'styled-components';
-import { Button, Card, CardContent, Count, defaultThemeProp, Flex, Grid, Icon, Modal, ModalManagerContext, NoItems, SearchInput, Selectable, Text, useI18n, useBreakpoint, useAfterInitialEffect } from '@pega/cosmos-react-core';
+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';
-const StyledSearchResults = styled.div ``;
-StyledSearchResults.defaultProps = defaultThemeProp;
-const FilterTitle = styled.span(({ theme: { base } }) => {
-    return css `
-    padding-bottom: calc(2 * ${base.spacing});
-  `;
-});
-FilterTitle.defaultProps = defaultThemeProp;
-const CountText = styled.span(({ theme: { base } }) => {
-    return css `
-    font-weight: ${base['font-weight']['semi-bold']};
-  `;
-});
-CountText.defaultProps = defaultThemeProp;
-const ModalFilterContent = styled.div(({ theme: { base: { spacing } } }) => {
-    return css `
-      margin-top: calc(0.25 * ${spacing});
-      width: 25rem;
-    `;
-});
-ModalFilterContent.defaultProps = defaultThemeProp;
-const SelectedFilters = styled.div(({ theme: { base: { spacing } } }) => {
-    return css `
-      overflow-x: auto;
-      padding-bottom: calc(0.5 * ${spacing});
-    `;
-});
-SelectedFilters.defaultProps = defaultThemeProp;
+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 (React.createElement(Modal, { heading: t('filters'), autoWidth: true },
-        React.createElement(Grid, { as: ModalFilterContent, container: { rowGap: 2 } },
-            React.createElement(Flex, { container: { itemGap: 1, alignItems: 'center' } },
-                React.createElement(Text, { as: CountText, variant: 'secondary' },
-                    count,
-                    " ",
-                    t('count_results')),
-                onClearAllFilters && !!activeFilters.length && (React.createElement(Button, { variant: 'link', onClick: onClearAllFilters }, t('clear_all')))),
-            !!activeFilters.length && (React.createElement(Flex, { as: SelectedFilters, container: { direction: 'row', itemGap: 1 } }, activeFilters.map(filter => {
-                return (React.createElement(Selectable, { key: filter.id, id: filter.id, onRemove: () => onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange({
-                        name: filter.groupName,
-                        type: filter.type,
-                        value: filter.resetValue
-                    }) }, `${filter.groupName}: ${filter.name}`));
-            }))),
-            React.createElement("div", null, filters.map((filter) => {
-                return (React.createElement(Filter, { key: filter.name, onFilterChange: onFilterChange, onClearFilter: onClearFilter, ...filter }));
-            })))));
+    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('count_results', [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();
@@ -61,18 +28,18 @@ const SearchResults = forwardRef(({ results, searchInputProps, count, filters, o
     const { placeholder = t('search_placeholder_default') } = searchInputProps;
     const activeFilters = filters.flatMap(group => {
         if (group.type === 'select') {
-            return group.items.reduce((acc, curr) => {
-                if (curr.checked) {
-                    acc.push({
-                        id: curr.id,
+            return group.items.flatMap(item => {
+                if (item.checked) {
+                    return {
+                        id: item.id,
+                        name: item.name,
+                        resetValue: { ...item, checked: false },
                         groupName: group.name,
-                        name: curr.name,
-                        resetValue: { ...curr, checked: false },
                         type: group.type
-                    });
+                    };
                 }
-                return acc;
-            }, []);
+                return [];
+            });
         }
         return [];
     });
@@ -99,9 +66,7 @@ const SearchResults = forwardRef(({ results, searchInputProps, count, filters, o
         if (isMedium && filtersMethods.current)
             filtersMethods.current.dismiss();
     }, [isMedium]);
-    return (React.createElement(Card, null,
-        React.createElement(CardContent, null,
-            React.createElement(Grid, { ...restProps, as: StyledSearchResults, ref: ref, md: filters.length
+    return (_jsx(Card, { children: _jsx(CardContent, { children: _jsxs(Grid, { ...restProps, as: StyledSearchResults, ref: ref, md: filters.length
                     ? {
                         container: {
                             cols: '15rem auto',
@@ -114,46 +79,24 @@ const SearchResults = forwardRef(({ results, searchInputProps, count, filters, o
                             cols: 'auto'
                         }
                     }
-                    : {}, container: { rows: '1fr auto', areas: '"search" "results"', rowGap: 2, colGap: 4 } },
-                React.createElement(Grid, { item: { area: 'search' } },
-                    React.createElement(SearchInput, { ...searchInputProps, placeholder: placeholder })),
-                isMedium && !!filters.length && (React.createElement(Grid, { item: { area: 'filters', alignSelf: 'start' } },
-                    React.createElement(Flex, { as: FilterTitle, container: { justify: 'between' } },
-                        React.createElement(Text, { variant: 'h2' }, t('filters')),
-                        onClearAllFilters && !!activeFilters.length && (React.createElement(Button, { variant: 'link', onClick: onClearAllFilters }, t('clear_all')))),
-                    filters.map((filter) => {
-                        return (React.createElement(Filter, { key: filter.name, onFilterChange: onFilterChange, onClearFilter: onClearFilter, ...filter }));
-                    }))),
-                React.createElement(Grid, { item: { area: 'results' }, container: {
-                        alignItems: 'center',
-                        rowGap: 2,
-                        rows: 'auto 1fr',
-                        areas: '"meta" "items"'
-                    } },
-                    React.createElement(Grid, { item: { area: 'meta' }, container: { rowGap: 1 } },
-                        React.createElement(Flex, { container: { justify: 'between', alignItems: 'center' } },
-                            React.createElement(Text, { as: CountText, variant: 'secondary' }, searchInputProps.value !== '' || results.length > 0
-                                ? `${count} ${t('count_results')}`
-                                : ''),
-                            !isMedium && !!filters.length && (React.createElement(Button, { variant: 'simple', onClick: openFiltersModal },
-                                React.createElement(Icon, { name: activeFilters.length > 0 ? 'filter-on' : 'filter' }),
-                                "\u00A0",
-                                t('filters'),
-                                "\u00A0",
-                                React.createElement(Count, null, activeFilters.length)))),
-                        !!activeFilters.length && (React.createElement(Flex, { as: SelectedFilters, container: { direction: 'row', itemGap: 1 } }, activeFilters.map(filter => {
-                            return (React.createElement(Selectable, { key: filter.id, id: filter.id, onRemove: () => onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange({
-                                    name: filter.groupName,
-                                    type: filter.type,
-                                    value: filter.resetValue
-                                }) }, `${filter.groupName}: ${filter.name}`));
-                        })))),
-                    React.createElement(Grid, { item: { area: 'items', alignSelf: results.length ? 'start' : 'center' }, container: { rowGap: 4 } }, results.length ? (results.map((result) => {
-                        return React.createElement(SearchResult, { key: result.id, ...result });
-                    })) : (React.createElement(Grid, { item: { alignSelf: 'stretch' } },
-                        React.createElement(NoItems, { message: searchInputProps.value === '' ? t('empty_search') : undefined })))),
-                    onShowMore && (React.createElement(Flex, { container: { justify: 'center' } },
-                        React.createElement(Button, { variant: 'link', onClick: onShowMore }, t('show_more')))))))));
+                    : {}, 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('count_results', [results.length], { count: results.length })
+                                                    : '' }, 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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchResults.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useContext, useRef, FunctionComponent, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Card,\n CardContent,\n Count,\n defaultThemeProp,\n Flex,\n ForwardProps,\n Grid,\n Icon,\n Modal,\n ModalMethods,\n ModalManagerContext,\n NoItems,\n SearchInput,\n Selectable,\n Text,\n useI18n,\n useBreakpoint,\n useAfterInitialEffect\n} from '@pega/cosmos-react-core';\n\nimport { SearchResultsProps, SearchResultProps, FilterProps } from './SearchResults.types';\nimport SearchResult from './SearchResult';\nimport Filter from './Filter';\n\nconst StyledSearchResults = styled.div``;\n\nStyledSearchResults.defaultProps = defaultThemeProp;\n\nconst FilterTitle = styled.span(({ theme: { base } }) => {\n return css`\n padding-bottom: calc(2 * ${base.spacing});\n `;\n});\n\nFilterTitle.defaultProps = defaultThemeProp;\n\nconst CountText = styled.span(({ theme: { base } }) => {\n return css`\n font-weight: ${base['font-weight']['semi-bold']};\n `;\n});\n\nCountText.defaultProps = defaultThemeProp;\n\nconst ModalFilterContent = 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\nModalFilterContent.defaultProps = defaultThemeProp;\n\nconst SelectedFilters = 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\nSelectedFilters.defaultProps = defaultThemeProp;\n\nconst FilterModal = (\n props: Pick<\n SearchResultsProps,\n 'count' \| 'filters' \| 'onFilterChange' \| 'onClearFilter' \| 'onClearAllFilters'\n > & {\n activeFilters: any[];\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={ModalFilterContent} container={{ rowGap: 2 }}>\n <Flex container={{ itemGap: 1, alignItems: 'center' }}>\n <Text as={CountText} variant='secondary'>\n {count} {t('count_results')}\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={SelectedFilters} container={{ direction: 'row', itemGap: 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<\n ModalMethods<\n Pick<\n SearchResultsProps,\n 'count' \| 'filters' \| 'onFilterChange' \| 'onClearFilter' \| 'onClearAllFilters'\n > & {\n activeFilters: any[];\n }\n >\n >();\n const { placeholder = t('search_placeholder_default') } = searchInputProps;\n\n const activeFilters = filters.flatMap(group => {\n if (group.type === 'select') {\n return group.items.reduce((acc, curr) => {\n if (curr.checked) {\n acc.push({\n id: curr.id,\n groupName: group.name,\n name: curr.name,\n resetValue: { ...curr, checked: false },\n type: group.type\n });\n }\n return acc;\n }, [] as any[]);\n }\n return [];\n });\n\n const openFiltersModal = () => {\n filtersMethods.current = create<\n Pick<\n SearchResultsProps,\n 'count' \| 'filters' \| 'onFilterChange' \| 'onClearFilter' \| 'onClearAllFilters'\n > & {\n activeFilters: any[];\n }\n >(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={FilterTitle} 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={CountText} variant='secondary'>\n {searchInputProps.value !== '' \|\| results.length > 0\n ? `${count} ${t('count_results')}`\n : ''}\n </Text>\n {!isMedium && !!filters.length && (\n <Button variant='simple' onClick={openFiltersModal}>\n <Icon name={activeFilters.length > 0 ? 'filter-on' : 'filter'} />\n  {t('filters')} \n <Count>{activeFilters.length}</Count>\n </Button>\n )}\n </Flex>\n {!!activeFilters.length && (\n <Flex as={SelectedFilters} container={{ direction: 'row', itemGap: 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 <NoItems\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"]}
1	+ {"version":3,"file":"SearchResults.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"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","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('count_results', [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('count_results', [results.length], { count: results.length })\n : ''}\n </Text>\n {!isMedium && !!filters.length && (\n <Button variant='simple' onClick={openFiltersModal}>\n <Icon name={activeFilters.length > 0 ? 'filter-on' : 'filter'} />\n  {t('filters')} \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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -11,13 +11,13 @@ interface BaseFilterProps {
 }
 export interface SelectFilterItemProps {
     /** The id for the filter option. */
-    id: RadioCheckProps['id'];
+    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: RadioCheckProps['name'];
+    name: NonNullable<RadioCheckProps['name']>;
 }
 export interface SelectFilterProps extends BaseFilterProps {
     /** Internal prop designating this object as a select filter. */
@@ -30,18 +30,28 @@ export interface SelectFilterProps extends BaseFilterProps {
      */
     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 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;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchResults.types.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EACL,SAAS,EACT,aAAa,EACb,UAAU,EACV,eAAe,EACf,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAEjC,UAAU,eAAe;IACvB,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,oCAAoC;IACpC,EAAE,EAAE,eAAe,CAAC,IAAI,CAAC,CAAC;~~IAC1B~~,uCAAuC;IACvC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAChC,wDAAwD;IACxD,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACpC,kFAAkF;IAClF,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;~~CAC/B~~;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,gEAAgE;IAChE,IAAI,EAAE,QAAQ,CAAC;IACf,yCAAyC;IACzC,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;CAC/C;AAED,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAGD,oBAAY,WAAW,GAAG,iBAAiB,CAAC;~~AAC5C~~,MAAM,WAAW,iBAAiB;IAChC,mDAAmD;IACnD,EAAE,EAAE,MAAM,CAAC;IACX,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,IAAI,EAAE,UAAU,CAAC,SAAS,EAAE,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC,CAAC;IAC7D,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mFAAmF;IACnF,IAAI,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CAC/B;AAED,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;CACd;AACD,UAAU,iBAAkB,SAAQ,eAAe;IACjD,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,qBAAqB,CAAC;CAC9B;AAGD,oBAAY,WAAW,GAAG,iBAAiB,CAAC;~~AAC5C~~,MAAM,WAAW,kBAAkB;IACjC,qDAAqD;IACrD,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,wCAAwC;IACxC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,iEAAiE;IACjE,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,+EAA+E;IAC/E,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACxD,0HAA0H;IAC1H,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,sCAAsC;IACtC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
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.map CHANGED Viewed

	@@ -1 +1 @@
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 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: 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: 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 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;\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;\nexport interface SearchResultsProps {\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"]}
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 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 {\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/Stages/Stages.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"AAAA,~~OAAc~~,~~EACZ~~,iBAAiB,~~EAMlB~~,MAAM,OAAO,CAAC;~~AAGf~~,OAAO,~~EAGL~~,YAAY,EAab,MAAM,yBAAyB,CAAC;~~AAEjC~~,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;~~AAI7C~~,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,~~CAsMzD~~,CAAC;AAEF,eAAe,MAAM,CAAC"}
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 CHANGED Viewed

@@ -1,8 +1,11 @@
-import React, { useState, useRef, useEffect, useContext, useCallback } from 'react';
+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, Flex, useElement, useOuterEvent, Popover, useI18n, Button, ModalManagerContext, Modal, getFocusables, useBreakpoint, debounce, useTheme } from '@pega/cosmos-react-core';
+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();
@@ -21,7 +24,7 @@ const Stages = (props) => {
     const focusableElements = getFocusables(popoverContentRef);
     const [compressedView, setCompressedView] = useState(false);
     const [minExpandedWidth, setMinExpandedWidth] = useState(0);
-    const resizeObserver = new ResizeObserver(debounce(entries => {
+    const resizeObserver = new ResizeObserver(debounce((entries) => {
         if (entries[0].contentRect.width > minExpandedWidth)
             setCompressedView(false);
     }, 100));
@@ -56,22 +59,21 @@ const Stages = (props) => {
     const onKeyDown = useCallback(({ key }) => {
         if (key === 'Escape') {
             setShowPopover(false);
-            activeStageEl === null || activeStageEl === void 0 ? void 0 : activeStageEl.focus();
+            activeStageEl?.focus();
         }
     }, [activeStageEl]);
     const onKeyDownPopover = useCallback((event) => {
-        var _a;
         if (event.key === 'Tab' && event.shiftKey) {
             const firstFocusable = focusableElements[0];
             if (document.activeElement === firstFocusable) {
-                (_a = stagesRefs.current[activeStageIndex + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+                stagesRefs.current[activeStageIndex + 1]?.focus();
                 setShowPopover(false);
             }
         }
         if (event.key === 'Tab' && !event.shiftKey) {
             const lastFocusable = focusableElements[focusableElements.length - 1];
             if (document.activeElement === lastFocusable) {
-                activeStageEl === null || activeStageEl === void 0 ? void 0 : activeStageEl.focus();
+                activeStageEl?.focus();
                 setShowPopover(false);
             }
         }
@@ -90,45 +92,38 @@ const Stages = (props) => {
     useEffect(() => {
         if (requestDismiss) {
             setShowPopover(false);
-            activeStageEl === null || activeStageEl === void 0 ? void 0 : activeStageEl.focus();
+            activeStageEl?.focus();
             setRequestDismiss(false);
         }
     }, [activeStageEl, requestDismiss]);
-    const RenderModal = ({ heading = t('lifecycle', caseTitle || 'Case') }) => {
-        return (React.createElement(Modal, { ...restProps, heading: heading, onRequestDismiss: () => setRequestDismiss(true) }, stages.map((stage, id) => (React.createElement(StepsContainer, { currentStage: [stage], key: id.toString() })))));
+    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 (React.createElement(React.Fragment, null,
-        React.createElement(Flex, { container: true, as: StyledStages, ref: setStagesEl, ...restProps }, stages.map((stage, index) => (React.createElement(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}`, key: `stage-${stage.id}`, ref: (el) => {
-                stagesRefs.current[index] = el;
-                if (isCurrent(stage.id))
-                    setCurrentStageButtonEl(el);
-            }, onMouseDown: onMouseDown, onClick: () => {
-                setActiveStageIndex(index);
-                if (isSmallOrAbove) {
-                    setShowPopover(!showPopover);
-                }
-                else {
-                    openModal();
-                }
-            } },
-            stage.complete && React.createElement(Icon, { name: 'check' }),
-            !(stage.complete && compressedView) && (React.createElement(StyledInnerStage, { ref: isCurrent(stage.id) ? setCurrentStageNameEl : undefined, ellipsis: isCurrent(stage.id) && compressedView }, !isCurrent(stage.id) && compressedView ? index + 1 : stage.name)))))),
-        React.createElement(Flex, { ref: popoverContentRef },
-            React.createElement(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']
+    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);
                         }
-                    }
-                ] },
-                React.createElement(StepsContainer, { currentStage: [activeStageObj] }),
-                React.createElement(Button, { variant: 'secondary', onClick: openModal }, t('stage_see_full_lifecycle'))))));
+                        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