npm - @pega/cosmos-react-work - Versions diffs - 3.0.0-dev.3.0 → 3.0.0-dev.30.0 - Mend

@pega/cosmos-react-work 3.0.0-dev.3.0 → 3.0.0-dev.30.0

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

Files changed (177) hide show

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":";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  {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"]}
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 useState\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport {\n Button,\n Count,\n Flex,\n ForwardProps,\n Grid,\n Icon,\n registerIcon,\n Modal,\n ModalMethods,\n EmptyState,\n SearchInput,\n Selectable,\n Text,\n useModalManager,\n useI18n,\n useBreakpoint,\n useAfterInitialEffect,\n SummaryItem,\n Avatar,\n useTheme,\n AppShellContext,\n Progress\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 StyledResults,\n StyledFilters,\n StyledSearchSummaryItem\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 loading = false,\n ...restProps\n }: PropsWithoutRef<SearchResultsProps>,\n ref: SearchResultsProps['ref']\n ) => {\n const t = useI18n();\n const isMedium = useBreakpoint('md');\n const { create } = useModalManager();\n const { searchContainerEl } = useContext(AppShellContext);\n const filtersMethods = useRef<ModalMethods<ComponentProps<typeof FilterModal>>>();\n const { placeholder = t('search_placeholder_default') } = searchInputProps;\n const {\n base: {\n palette: { 'brand-primary': primary }\n }\n } = useTheme();\n const [accent, setAccent] = useState<undefined \| RegExp>();\n const [submittedSearchValue, setSubmittedSearchValue] = useState(searchInputProps.value);\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 useAfterInitialEffect(() => {\n setAccent(submittedSearchValue ? new RegExp(submittedSearchValue, 'gi') : undefined);\n }, [submittedSearchValue]);\n\n const searchTitle = (\n <SummaryItem\n as={StyledSearchSummaryItem}\n visual={\n <Avatar\n icon='search'\n name='search'\n shape='squircle'\n backgroundColor={primary}\n color='white'\n />\n }\n primary={<Text variant='h1'>Search</Text>}\n actions={\n onClearAllFilters &&\n isMedium &&\n !!activeFilters.length && (\n <Button variant='link' onClick={onClearAllFilters}>\n {t('clear_all')}\n </Button>\n )\n }\n />\n );\n const searchInput = (\n <SearchInput\n {...searchInputProps}\n onSearchSubmit={val => {\n searchInputProps.onSearchSubmit?.(val);\n setSubmittedSearchValue(val);\n }}\n placeholder={placeholder}\n />\n );\n\n return (\n <Grid\n {...restProps}\n as={StyledSearchResults}\n ref={ref}\n md={\n filters.length\n ? {\n container: {\n cols: '15rem auto'\n }\n }\n : undefined\n }\n sm={\n filters.length\n ? {\n container: {\n cols: 'auto',\n rowGap: 2\n }\n }\n : undefined\n }\n container={{\n rows: 'auto auto',\n cols: 'auto 1fr',\n areas: '\"filters results\"'\n }}\n >\n {isMedium && !!filters.length && (\n <Grid item={{ area: 'filters', alignSelf: 'start' }} as={StyledFilters}>\n {searchTitle}\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={{ alignSelf: 'start', area: 'results' }}\n container={{\n alignItems: 'center',\n rowGap: 2,\n rows: 'auto auto 1fr',\n areas: '\"search\" \"meta\" \"items\"'\n }}\n as={StyledResults}\n >\n {loading && <Progress placement='local' />}\n {searchContainerEl && isMedium ? (\n createPortal(searchInput, searchContainerEl)\n ) : (\n <Grid item={{ area: 'search' }}>\n {!isMedium && searchTitle}\n {searchInput}\n </Grid>\n )}\n <Grid item={{ area: 'meta' }} container={{ rowGap: 1 }}>\n <Flex container={{ justify: 'between', alignItems: 'center' }}>\n {!loading && (\n <Text as={StyledCountText} variant='secondary'>\n {submittedSearchValue !== '' \|\| results.length > 0\n ? t('results_count', [count], { count })\n : ''}\n </Text>\n )}\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, wrap: 'wrap' }}>\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' : 'stretch' }}\n container={{ rowGap: 2 }}\n >\n {!loading && (\n <>\n {results.length ? (\n results.map((result: SearchResultProps) => {\n return <SearchResult key={result.id} {...result} accent={accent} />;\n })\n ) : (\n <Grid item={{ alignSelf: 'stretch' }}>\n <EmptyState\n message={submittedSearchValue === '' ? t('empty_search') : undefined}\n />\n </Grid>\n )}\n {onShowMore && (\n <Flex container={{ justify: 'center' }}>\n <Button variant='link' onClick={onShowMore}>\n {t('show_more')}\n </Button>\n </Flex>\n )}\n </>\n )}\n </Grid>\n </Grid>\n </Grid>\n );\n }\n);\n\nexport default SearchResults;\n"]}

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

@@ -5,4 +5,7 @@ export declare const StyledModalFilterContent: import("styled-components").Style
 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>;
+export declare const StyledSearchSummaryItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFilters: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledResults: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=SearchResults.styles.d.ts.map

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"SearchResults.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.styles.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,mBAAmB,yGAE/B,CAAC;AAIF,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,yGAAe,CAAC;AAIzC,eAAO,MAAM,kBAAkB,qOAsB7B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAYnC,CAAC;AAIF,eAAO,MAAM,aAAa,yGAWxB,CAAC;AAIH,eAAO,MAAM,aAAa,yGAOxB,CAAC"}

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

@@ -1,6 +1,8 @@
 import styled, { css } from 'styled-components';
-import { Button, calculateFontSize, defaultThemeProp, StyledIcon, useDirection } from '@pega/cosmos-react-core';
-export const StyledSearchResults = styled.div ``;
+import { Button, calculateFontSize, defaultThemeProp, StyledIcon, StyledSearchInput, useDirection } from '@pega/cosmos-react-core';
+export const StyledSearchResults = styled.div `
+  min-height: inherit;
+`;
 StyledSearchResults.defaultProps = defaultThemeProp;
 export const StyledFilterTitle = styled.span(({ theme: { base } }) => {
     return css `
@@ -16,30 +18,19 @@ export const StyledCountText = styled.span(({ theme: { base } }) => {
 StyledCountText.defaultProps = defaultThemeProp;
 export const StyledModalFilterContent = styled.div(({ theme: { base: { spacing } } }) => {
     return css `
-      margin-top: calc(0.25 * ${spacing});
-      width: 25rem;
+      margin-top: calc(0.5 * ${spacing});
+      width: calc(${spacing} * 50);
     `;
 });
 StyledModalFilterContent.defaultProps = defaultThemeProp;
 export const StyledSelectedFilters = styled.div(({ theme: { base: { spacing } } }) => {
     return css `
       overflow-x: auto;
-      padding-bottom: calc(0.5 * ${spacing});
+      padding-bottom: calc(1 * ${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};
-    }
-  `;
-});
+export const StyledFilter = styled.div ``;
 StyledFilter.defaultProps = defaultThemeProp;
 export const StyledFilterButton = styled(Button)(({ theme: { base } }) => {
     const fontSize = calculateFontSize(base['font-size'], base['font-scale']);
@@ -64,4 +55,34 @@ export const StyledFilterButton = styled(Button)(({ theme: { base } }) => {
   `;
 });
 StyledFilterButton.defaultProps = defaultThemeProp;
+export const StyledSearchSummaryItem = styled.div(({ theme: { base: { spacing } } }) => css `
+    column-gap: calc(${spacing} * 1);
+    + ${StyledSearchInput} {
+      margin-block-start: calc(${spacing} * 1);
+    }
+  `);
+StyledSearchSummaryItem.defaultProps = defaultThemeProp;
+export const StyledFilters = styled.div(({ theme }) => {
+    return css `
+    position: sticky;
+    top: var(--appshell-offset, 0);
+    max-height: calc(100vh - var(--appshell-offset, 0rem));
+    overflow: auto;
+    > ${StyledFilter}, ${StyledSearchSummaryItem} {
+      border-bottom: 0.0125rem solid ${theme.base.palette['border-line']};
+      padding: calc(${theme.base.spacing} * 2);
+    }
+  `;
+});
+StyledFilters.defaultProps = defaultThemeProp;
+export const StyledResults = styled.div(({ theme }) => {
+    return css `
+    background-color: ${theme.base.palette['primary-background']};
+    padding: calc(${theme.base.spacing} * 2);
+    position: relative;
+    min-height: calc(100vh - var(--appshell-offset, 0rem));
+  `;
+});
+StyledResults.defaultProps = defaultThemeProp;
 //# sourceMappingURL=SearchResults.styles.js.map

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

	@@ -1 +1 @@
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"]}
1	+ {"version":3,"file":"SearchResults.styles.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n Button,\n calculateFontSize,\n defaultThemeProp,\n StyledIcon,\n StyledSearchInput,\n useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledSearchResults = styled.div`\n min-height: inherit;\n`;\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.5 * ${spacing});\n width: calc(${spacing} * 50);\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(1 * ${spacing});\n `;\n }\n);\n\nStyledSelectedFilters.defaultProps = defaultThemeProp;\n\nexport const StyledFilter = styled.div``;\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\nexport const StyledSearchSummaryItem = styled.div(\n ({\n theme: {\n base: { spacing }\n }\n }) => css`\n column-gap: calc(${spacing} * 1);\n\n + ${StyledSearchInput} {\n margin-block-start: calc(${spacing} * 1);\n }\n `\n);\n\nStyledSearchSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyledFilters = styled.div(({ theme }) => {\n return css`\n position: sticky;\n top: var(--appshell-offset, 0);\n max-height: calc(100vh - var(--appshell-offset, 0rem));\n overflow: auto;\n > ${StyledFilter}, ${StyledSearchSummaryItem} {\n border-bottom: 0.0125rem solid ${theme.base.palette['border-line']};\n padding: calc(${theme.base.spacing} * 2);\n }\n `;\n});\n\nStyledFilters.defaultProps = defaultThemeProp;\n\nexport const StyledResults = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n padding: calc(${theme.base.spacing} * 2);\n position: relative;\n min-height: calc(100vh - var(--appshell-offset, 0rem));\n `;\n});\n\nStyledResults.defaultProps = defaultThemeProp;\n"]}

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

@@ -63,6 +63,8 @@ export interface SearchResultProps {
     description?: string;
     /** A list of elements to be rendered within a MetaList categorizing the result. */
     meta?: MetaListProps['items'];
+    /** Accents the search results with text that matches the regex */
+    accent?: RegExp;
 }
 interface BaseFilterEvent {
     name: string;
@@ -89,6 +91,8 @@ export interface SearchResultsProps extends NoChildrenProp {
     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;
+    /** Sets a loading indicator if true */
+    loading?: boolean;
     /** A ref for the wrapping element. */
     ref?: Ref<HTMLDivElement>;
 }

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,cAAc,EACd,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,WAAW,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC;IACvC,uCAAuC;IACvC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAChC,wDAAwD;IACxD,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACpC,kFAAkF;IAClF,IAAI,EAAE,WAAW,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC;CAC5C;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,kBAAkB;IACjC,EAAE,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAChC,IAAI,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACpC,UAAU,EAAE,qBAAqB,GAAG;QAAE,OAAO,EAAE,KAAK,CAAA;KAAE,CAAC;IACvD,SAAS,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACrC,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;CACjC;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;AAE5C,oBAAY,aAAa,GAAG,kBAAkB,CAAC;AAE/C,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;AAE5C,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD,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 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"]}
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 /* Accents the search results with text that matches the regex /\n accent?: RegExp;\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 /* Sets a loading indicator if true /\n loading?: boolean;\n /* A ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/Stages/StageGlimpse.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { FunctionComponent } from 'react';
+import { Action } from '@pega/cosmos-react-core';
+import { StageProps } from './Stages.types';
+export interface StageGlimpseProps {
+    stage: StageProps;
+    actions?: Action[];
+}
+declare const StageGlimpse: FunctionComponent<StageGlimpseProps>;
+export default StageGlimpse;
+//# sourceMappingURL=StageGlimpse.d.ts.map

package/lib/components/Stages/StageGlimpse.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"StageGlimpse.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/StageGlimpse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,MAAM,EAA8C,MAAM,yBAAyB,CAAC;AAG7F,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAU5C,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CA6BtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Stages/StageGlimpse.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Actions, Flex, registerIcon, Text, useI18n } from '@pega/cosmos-react-core';
+import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
+import { StyledDateTimeDisplay, StyledStep, StyledStepsContainer, StyledStageGlimpse } from './Stages.styles';
+registerIcon(checkIcon);
+const StageGlimpse = ({ stage, actions }) => {
+    const t = useI18n();
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: StyledStageGlimpse, container: { justify: 'between', alignItems: 'start' }, children: [_jsxs("div", { children: [_jsx(Text, { variant: 'h2', children: stage.name }), stage.date ? (_jsx(StyledDateTimeDisplay, { value: stage.date, variant: 'relative', format: 'short' })) : (_jsx(Text, { variant: 'secondary', children: t('not_started') }))] }), actions && actions.length > 0 && _jsx(Actions, { items: actions, iconOnly: true })] }), stage.steps && (_jsx(StyledStepsContainer, { children: stage.steps.map(({ id, name, completed }) => (_jsx(Flex, { as: StyledStep, container: { gap: 0.5 }, completed: completed, children: _jsx("div", { children: name }) }, id))) }))] }));
+};
+export default StageGlimpse;
+//# sourceMappingURL=StageGlimpse.js.map

package/lib/components/Stages/StageGlimpse.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"StageGlimpse.js","sourceRoot":"","sources":["../../../src/components/Stages/StageGlimpse.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAU,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC7F,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAG1F,OAAO,EACL,qBAAqB,EACrB,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAEzB,YAAY,CAAC,SAAS,CAAC,CAAC;AAOxB,MAAM,YAAY,GAAyC,CAAC,EAC1D,KAAK,EACL,OAAO,EACW,EAAE,EAAE;IACtB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,8BACE,MAAC,IAAI,IAAC,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,aAClF,0BACE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,CAAC,IAAI,GAAQ,EACrC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,KAAC,qBAAqB,IAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAC,UAAU,EAAC,MAAM,EAAC,OAAO,GAAG,CAC/E,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,CAAC,CAAC,aAAa,CAAC,GAAQ,CACpD,IACG,EACL,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,SAAG,IACjE,EACN,KAAK,CAAC,KAAK,IAAI,CACd,KAAC,oBAAoB,cAClB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC5C,KAAC,IAAI,IAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EAAW,SAAS,EAAE,SAAS,YAC1E,wBAAM,IAAI,GAAO,IADiC,EAAE,CAE/C,CACR,CAAC,GACmB,CACxB,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\n\nimport { Action, Actions, Flex, registerIcon, Text, useI18n } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport { StageProps } from './Stages.types';\nimport {\n StyledDateTimeDisplay,\n StyledStep,\n StyledStepsContainer,\n StyledStageGlimpse\n} from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nexport interface StageGlimpseProps {\n stage: StageProps;\n actions?: Action[];\n}\n\nconst StageGlimpse: FunctionComponent<StageGlimpseProps> = ({\n stage,\n actions\n}: StageGlimpseProps) => {\n const t = useI18n();\n return (\n <>\n <Flex as={StyledStageGlimpse} container={{ justify: 'between', alignItems: 'start' }}>\n <div>\n <Text variant='h2'>{stage.name}</Text>\n {stage.date ? (\n <StyledDateTimeDisplay value={stage.date} variant='relative' format='short' />\n ) : (\n <Text variant='secondary'>{t('not_started')}</Text>\n )}\n </div>\n {actions && actions.length > 0 && <Actions items={actions} iconOnly />}\n </Flex>\n {stage.steps && (\n <StyledStepsContainer>\n {stage.steps.map(({ id, name, completed }) => (\n <Flex as={StyledStep} container={{ gap: 0.5 }} key={id} completed={completed}>\n <div>{name}</div>\n </Flex>\n ))}\n </StyledStepsContainer>\n )}\n </>\n );\n};\n\nexport default StageGlimpse;\n"]}

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

@@ -1,6 +1,6 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '@pega/cosmos-react-core';
-import { StagesProps } from './Stages.types';
+import type { 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 CHANGED Viewed

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"Stages.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,YAAY,EAiBb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAYlD,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAiMzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -1,129 +1,122 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useContext, useCallback } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, forwardRef, Fragment } 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 { Icon, registerIcon, Flex, useElement, useOuterEvent, useI18n, Button, Modal, useBreakpoint, debounce, useModalManager, useTheme, useEscape, useConsolidatedRef, CardFooter, Card, useUID, Progress } 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;
+import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
+import StageGlimpse from './StageGlimpse';
+import { StyledInnerStage, StyledPopoverContent, StyledStage, StyledStagePopover, StyledStages } from './Stages.styles';
+registerIcon(checkIcon, timesIcon);
+const Stages = forwardRef(({ current, stages, caseTitle, onLoadStage, ...restProps }, ref) => {
     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 stagesRef = useConsolidatedRef(ref);
+    const currentStageRef = useRef(null);
+    const [focusedStageIndex, setFocusedStageIndex] = useState(undefined);
+    const focusedStageRef = useRef(null);
+    const { create: createModal } = useModalManager();
+    const modalMethods = useRef();
     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 });
+    const { base: { spacing: themeSpacing } } = useTheme();
+    const popoverId = useUID();
     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);
+        if (stagesRef.current && currentStageRef.current) {
+            if (compressedView) {
+                const resizeObserver = new ResizeObserver(debounce((entries) => {
+                    if (entries[0].contentRect.width > minExpandedWidth)
+                        setCompressedView(false);
+                }, 100));
+                resizeObserver.observe(stagesRef.current);
+                return () => resizeObserver.disconnect();
             }
+            const intersectionObserver = new IntersectionObserver(entries => {
+                if (entries[0].intersectionRatio < 1) {
+                    if (stagesRef.current)
+                        setMinExpandedWidth(Math.max(minExpandedWidth, stagesRef.current.offsetWidth + 1));
+                    setCompressedView(true);
+                }
+            }, {
+                root: currentStageRef.current,
+                rootMargin: `0px -${remToPx(themeSpacing)}`,
+                threshold: 1
+            });
+            intersectionObserver.observe(currentStageRef.current.children[0]);
+            return () => intersectionObserver.disconnect();
         }
-    }, [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));
-    };
+    }, [themeSpacing, minExpandedWidth, compressedView]);
+    useOuterEvent('mousedown', [popoverEl, focusedStageRef], () => {
+        setShowPopover(false);
+    });
+    useEscape(() => {
+        setShowPopover(false);
+        focusedStageRef.current?.focus();
+    }, stagesRef);
+    const stagesToLoad = onLoadStage
+        ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)
+        : [];
     const openModal = () => {
         setShowPopover(false);
-        create(RenderModal);
+        if (stagesToLoad.length > 0)
+            onLoadStage?.(stagesToLoad);
+        modalMethods.current = createModal(Modal, {
+            heading: caseTitle
+                ? t('stages_case_lifecycle', [caseTitle])
+                : t('stages_default_case_lifecycle'),
+            progress: stagesToLoad.length > 0,
+            children: stages.map(stage => _jsx(StageGlimpse, { stage: stage }, stage.id)),
+            onAfterClose: () => {
+                focusedStageRef.current?.focus();
+                modalMethods.current = undefined;
+            }
+        });
     };
-    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']
+    useEffect(() => {
+        modalMethods.current?.update({
+            progress: stagesToLoad.length > 0,
+            children: stages.map(stage => _jsx(StageGlimpse, { stage: stage }, stage.id))
+        });
+    }, [stagesToLoad.length]);
+    return (_jsx(Flex, { ...restProps, container: true, as: StyledStages, ref: stagesRef, role: 'region', "aria-label": t('stages_label'), children: stages.map((stage, index) => {
+            const isCurrent = stage.id === current;
+            let stageStatusText = t(stage.completed ? 'completed' : 'not_started');
+            if (isCurrent)
+                stageStatusText = t('current');
+            const hasToLoad = stagesToLoad.includes(stage.id);
+            return (_jsxs(Fragment, { children: [_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledStage, item: { grow: compressedView && !isCurrent ? 0 : 1, shrink: 1 }, "aria-current": isCurrent ? 'step' : undefined, "aria-label": t('stages_stage_label', [stage.name, stageStatusText]), ref: isCurrent ? currentStageRef : undefined, onClick: () => {
+                            if (isSmallOrAbove) {
+                                if (hasToLoad)
+                                    onLoadStage?.([stage.id]);
+                                setShowPopover(prevShowPopover => !prevShowPopover);
+                            }
+                            else {
+                                openModal();
+                            }
+                        }, onFocus: (e) => {
+                            setShowPopover(false);
+                            setFocusedStageIndex(index);
+                            focusedStageRef.current = e.currentTarget;
+                        }, "aria-expanded": showPopover && isSmallOrAbove, "aria-controls": showPopover ? popoverId : undefined, children: [stage.completed && _jsx(Icon, { name: 'check' }), !(stage.completed && compressedView) && (_jsx(StyledInnerStage, { ellipsis: isCurrent && compressedView, children: !isCurrent && compressedView ? index + 1 : stage.name }))] }), focusedStageIndex === index && showPopover && isSmallOrAbove && (_jsx(StyledStagePopover, { target: focusedStageRef.current, ref: setPopoverRef, arrow: true, placement: 'bottom-start', 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));
-};
+                        ], id: popoverId, "aria-busy": hasToLoad, children: _jsxs(Card, { children: [_jsx(StyledPopoverContent, { children: !hasToLoad ? (_jsx(StageGlimpse, { stage: stage, actions: [
+                                            {
+                                                id: 'close',
+                                                text: t('close'),
+                                                icon: 'times',
+                                                onClick: () => {
+                                                    setShowPopover(false);
+                                                    focusedStageRef.current?.focus();
+                                                }
+                                            }
+                                        ] })) : (_jsx(Progress, { placement: 'local', message: t('loading') })) }), _jsx(CardFooter, { children: _jsx(Button, { variant: 'secondary', onClick: openModal, children: t('stages_see_full_lifecycle') }) })] }) }))] }, stage.id));
+        }) }));
+});
 export default Stages;
 //# sourceMappingURL=Stages.js.map