npm - @pega/cosmos-react-work - Versions diffs - 2.0.0-dev.12.0 → 2.0.0-dev.14.1 - Mend

@pega/cosmos-react-work 2.0.0-dev.12.0 → 2.0.0-dev.14.1

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 (99) 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":"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","sourcesContent":["import { 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 {\n SearchResultsProps,\n SearchResultProps,\n FilterProps,\n ActiveFilters\n} 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: 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={ModalFilterContent} container={{ rowGap: 2 }}>\n <Flex container={{ gap: 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', 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<\n ModalMethods<\n Pick<\n SearchResultsProps,\n 'count' \| 'filters' \| 'onFilterChange' \| 'onClearFilter' \| 'onClearAllFilters'\n > & {\n activeFilters: ActiveFilters[];\n }\n >\n >();\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<\n Pick<\n SearchResultsProps,\n 'count' \| 'filters' \| 'onFilterChange' \| 'onClearFilter' \| 'onClearAllFilters'\n > & {\n activeFilters: ActiveFilters[];\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', 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 <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';\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 EmptyState,\n SearchInput,\n Selectable,\n Text,\n useI18n,\n useBreakpoint,\n useAfterInitialEffect\n} from '@pega/cosmos-react-core';\n\nimport {\n SearchResultsProps,\n SearchResultProps,\n FilterProps,\n ActiveFilters\n} 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: 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={ModalFilterContent} container={{ rowGap: 2 }}>\n <Flex container={{ gap: 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', 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={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', 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/Stages/Stages.styles.d.ts.map CHANGED Viewed

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

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

@@ -20,7 +20,7 @@ export const StyledInnerStage = styled.span(props => {
     `}
   `;
 });
-export const StyledStage = styled.button(({ theme: { base: { spacing, palette, sizes, shadow, transparency, 'border-radius': borderRadius } } }) => {
+export const StyledStage = styled.button(({ theme: { base: { spacing, palette, 'hit-area': hitArea, shadow, transparency, 'border-radius': borderRadius } } }) => {
     const activeColor = palette.interactive;
     const baseBorderColor = palette['border-line'];
     const thinBorderWidth = '0.0625rem';
@@ -42,7 +42,7 @@ export const StyledStage = styled.button(({ theme: { base: { spacing, palette, s
     padding-inline-end: ${spacing};
     @media (pointer: coarse) {
-      height: ${sizes['touch-finger']};
+      height: ${hitArea['finger-min']};
       padding-inline-start: calc(2.25 * ${spacing});
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.styles.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n calculateFontSize,\n defaultThemeProp,\n StyledIcon,\n StyledText,\n useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledStages = styled.div(props => {\n return css`\n background-color: ${props.theme.base.palette['primary-background']};\n border-radius: ${props.theme.base['border-radius']};\n width: 100%;\n `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(props => {\n return css`\n display: inline-block;\n text-align: center;\n white-space: nowrap;\n ${props.ellipsis &&\n css`\n overflow: hidden;\n text-overflow: ellipsis;\n `}\n `;\n});\n\nexport const StyledStage = styled.button(\n ({\n theme: {\n base: { spacing, palette, sizes, shadow, transparency, 'border-radius': borderRadius }\n }\n }) => {\n const activeColor = palette.interactive;\n const baseBorderColor = palette['border-line'];\n const thinBorderWidth = '0.0625rem';\n const thickBorderWidth = '0.125rem';\n const baseTransparency = transparency['transparent-2'];\n const { rtl, start, end } = useDirection();\n\n return css`\n /* stylelint-disable no-descending-specificity /\n background-color: inherit;\n color: ${palette['foreground-color']};\n outline: none;\n border-color: transparent;\n border-width: ${thinBorderWidth} 0;\n border-style: solid;\n position: relative;\n height: calc(4 ${spacing});\n min-width: calc(5.25 * ${spacing});\n padding-inline-start: calc(2 * ${spacing});\n padding-inline-end: ${spacing};\n\n @media (pointer: coarse) {\n height: ${sizes['touch-finger']};\n padding-inline-start: calc(2.25 * ${spacing});\n }\n\n ${StyledIcon} {\n margin-inline-end: 0.25rem;\n color: ${palette.success};\n\n &:last-child {\n margin-inline-end: 0;\n }\n }\n\n ${StyledInnerStage} {\n opacity: ${baseTransparency};\n }\n\n &:first-child {\n border-top-${start}-radius: ${borderRadius};\n border-bottom-${start}-radius: ${borderRadius};\n border-inline-start-width: ${thinBorderWidth};\n padding-inline-start: calc(${spacing});\n }\n\n &:last-child {\n border-top-${end}-radius: ${borderRadius};\n border-bottom-${end}-radius: ${borderRadius};\n border-inline-end-width: ${thinBorderWidth};\n padding-inline-end: calc(${spacing});\n min-width: calc(6.25 * ${spacing});\n }\n\n &:not(:first-child)::before {\n content: '';\n position: absolute;\n display: block;\n width: calc(2.25 * ${spacing});\n height: calc(2.25 * ${spacing});\n left: calc(-1.125 * ${spacing});\n right: calc(-1.125 * ${spacing});\n background-color: transparent;\n border-style: solid;\n border-color: ${baseBorderColor};\n border-inline-end-width: ${thinBorderWidth};\n border-inline-start-width: 0;\n border-top-width: ${rtl ? 0 : thinBorderWidth};\n border-bottom-width: ${rtl ? thinBorderWidth : 0};\n transform: rotateZ(45deg) skew(15deg, 15deg);\n\n @media (pointer: coarse) {\n width: calc(2.875 * ${spacing});\n height: calc(2.875 * ${spacing});\n left: calc(-1.375 * ${spacing});\n right: calc(-1.375 * ${spacing});\n transform: rotateZ(45deg) skew(20deg, 20deg);\n }\n }\n\n &:hover,\n &:hover::before {\n border-color: ${baseBorderColor};\n }\n\n &:hover {\n ${StyledInnerStage} {\n opacity: 1;\n }\n }\n\n &:focus,\n &:active,\n &:focus::before,\n &:active::before,\n &:focus + &::before,\n &:active + &::before {\n border-color: ${activeColor};\n }\n\n &:focus {\n border-width: ${thickBorderWidth} 0;\n }\n\n &:focus::before,\n &:focus + &::before {\n border-inline-end-width: ${thickBorderWidth};\n border-top-width: ${rtl ? 0 : thickBorderWidth};\n border-bottom-width: ${rtl ? thickBorderWidth : 0};\n }\n\n &:first-child:focus {\n border-inline-start-width: ${thickBorderWidth};\n padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});\n }\n\n &:last-child:focus {\n border-inline-end-width: ${thickBorderWidth};\n padding-inline-end: calc(${spacing} - ${thinBorderWidth});\n }\n\n &:active {\n border-width: ${thinBorderWidth} 0;\n\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-3']};\n }\n }\n\n &:active::before,\n &:active + &::before {\n border-inline-end-width: ${thinBorderWidth};\n border-top-width: ${rtl ? 0 : thinBorderWidth};\n border-bottom-width: ${rtl ? thinBorderWidth : 0};\n }\n\n &:first-child:active {\n border-inline-start-width: ${thinBorderWidth};\n padding-inline-start: calc(${spacing});\n }\n\n &:last-child:active {\n border-inline-end-width: ${thinBorderWidth};\n padding-inline-end: calc(${spacing});\n }\n\n &[aria-current] {\n z-index: 2;\n\n ${StyledInnerStage} {\n font-weight: bold;\n opacity: 1;\n }\n\n &:hover {\n ${StyledInnerStage} {\n opacity: ${baseTransparency};\n }\n }\n &:active {\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-3']};\n }\n }\n }\n\n &[aria-current] + &::before {\n box-shadow: ${shadow.low};\n }\n\n &[aria-current] + &:focus::before {\n box-shadow: none;\n }\n `;\n }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledStagePopover = styled.div(({ theme }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing});\n white-space: pre-line;\n width: 18rem;\n `;\n});\n\nStyledStagePopover.defaultProps = defaultThemeProp;\n\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n return css`\n list-style-type: none;\n margin-top: calc(1.5 * ${theme.base.spacing});\n margin-bottom: calc(2.5 * ${theme.base.spacing});\n\n &:empty {\n margin-bottom: 0;\n }\n `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.li<{ complete: boolean }>(({ complete, theme }) => {\n const iconColor = complete ? theme.base.palette.success : theme.base.palette['foreground-color'];\n const iconWidth = complete ? '1.125rem' : '0.3rem';\n const iconMargin = complete ? 0 : '0.3rem';\n const textOpacity = complete ? theme.base.transparency['transparent-3'] : 1;\n\n return css`\n border-radius: 0;\n margin-bottom: calc(${theme.base.spacing});\n color: ${theme.base.palette['foreground-color']};\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ${StyledIcon} {\n margin-inline-end: calc(${theme.base.spacing});\n color: ${iconColor};\n width: ${iconWidth};\n margin-inline-start: ${iconMargin};\n }\n\n ${StyledText} {\n opacity: ${textOpacity};\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nexport const StyledSteps = styled.div`\n background-color: ${props => props.theme.components.card.background};\n position: relative;\n`;\n\nStyledSteps.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStep = styled.span<{ complete: boolean }>(({ complete, theme }) => {\n const textOpacity = complete ? theme.base.transparency['transparent-2'] : 1;\n return css`\n display: flex;\n width: 100%;\n text-align: start;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n ${StyledIcon} {\n color: ${theme.base.palette.success};\n margin-inline-end: ${theme.base.spacing};\n }\n\n ${StyledText} {\n opacity: ${textOpacity};\n }\n `;\n});\n\nStyledInnerStep.defaultProps = defaultThemeProp;\n\nexport const StyledDateTimeDisplay = styled.span(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n font-size: ${fontSize.xs};\n opacity: ${theme.base.transparency['transparent-2']};\n `;\n});\n\nStyledDateTimeDisplay.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"Stages.styles.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n calculateFontSize,\n defaultThemeProp,\n StyledIcon,\n StyledText,\n useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledStages = styled.div(props => {\n return css`\n background-color: ${props.theme.base.palette['primary-background']};\n border-radius: ${props.theme.base['border-radius']};\n width: 100%;\n `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(props => {\n return css`\n display: inline-block;\n text-align: center;\n white-space: nowrap;\n ${props.ellipsis &&\n css`\n overflow: hidden;\n text-overflow: ellipsis;\n `}\n `;\n});\n\nexport const StyledStage = styled.button(\n ({\n theme: {\n base: {\n spacing,\n palette,\n 'hit-area': hitArea,\n shadow,\n transparency,\n 'border-radius': borderRadius\n }\n }\n }) => {\n const activeColor = palette.interactive;\n const baseBorderColor = palette['border-line'];\n const thinBorderWidth = '0.0625rem';\n const thickBorderWidth = '0.125rem';\n const baseTransparency = transparency['transparent-2'];\n const { rtl, start, end } = useDirection();\n\n return css`\n /* stylelint-disable no-descending-specificity /\n background-color: inherit;\n color: ${palette['foreground-color']};\n outline: none;\n border-color: transparent;\n border-width: ${thinBorderWidth} 0;\n border-style: solid;\n position: relative;\n height: calc(4 ${spacing});\n min-width: calc(5.25 * ${spacing});\n padding-inline-start: calc(2 * ${spacing});\n padding-inline-end: ${spacing};\n\n @media (pointer: coarse) {\n height: ${hitArea['finger-min']};\n padding-inline-start: calc(2.25 * ${spacing});\n }\n\n ${StyledIcon} {\n margin-inline-end: 0.25rem;\n color: ${palette.success};\n\n &:last-child {\n margin-inline-end: 0;\n }\n }\n\n ${StyledInnerStage} {\n opacity: ${baseTransparency};\n }\n\n &:first-child {\n border-top-${start}-radius: ${borderRadius};\n border-bottom-${start}-radius: ${borderRadius};\n border-inline-start-width: ${thinBorderWidth};\n padding-inline-start: calc(${spacing});\n }\n\n &:last-child {\n border-top-${end}-radius: ${borderRadius};\n border-bottom-${end}-radius: ${borderRadius};\n border-inline-end-width: ${thinBorderWidth};\n padding-inline-end: calc(${spacing});\n min-width: calc(6.25 * ${spacing});\n }\n\n &:not(:first-child)::before {\n content: '';\n position: absolute;\n display: block;\n width: calc(2.25 * ${spacing});\n height: calc(2.25 * ${spacing});\n left: calc(-1.125 * ${spacing});\n right: calc(-1.125 * ${spacing});\n background-color: transparent;\n border-style: solid;\n border-color: ${baseBorderColor};\n border-inline-end-width: ${thinBorderWidth};\n border-inline-start-width: 0;\n border-top-width: ${rtl ? 0 : thinBorderWidth};\n border-bottom-width: ${rtl ? thinBorderWidth : 0};\n transform: rotateZ(45deg) skew(15deg, 15deg);\n\n @media (pointer: coarse) {\n width: calc(2.875 * ${spacing});\n height: calc(2.875 * ${spacing});\n left: calc(-1.375 * ${spacing});\n right: calc(-1.375 * ${spacing});\n transform: rotateZ(45deg) skew(20deg, 20deg);\n }\n }\n\n &:hover,\n &:hover::before {\n border-color: ${baseBorderColor};\n }\n\n &:hover {\n ${StyledInnerStage} {\n opacity: 1;\n }\n }\n\n &:focus,\n &:active,\n &:focus::before,\n &:active::before,\n &:focus + &::before,\n &:active + &::before {\n border-color: ${activeColor};\n }\n\n &:focus {\n border-width: ${thickBorderWidth} 0;\n }\n\n &:focus::before,\n &:focus + &::before {\n border-inline-end-width: ${thickBorderWidth};\n border-top-width: ${rtl ? 0 : thickBorderWidth};\n border-bottom-width: ${rtl ? thickBorderWidth : 0};\n }\n\n &:first-child:focus {\n border-inline-start-width: ${thickBorderWidth};\n padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});\n }\n\n &:last-child:focus {\n border-inline-end-width: ${thickBorderWidth};\n padding-inline-end: calc(${spacing} - ${thinBorderWidth});\n }\n\n &:active {\n border-width: ${thinBorderWidth} 0;\n\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-3']};\n }\n }\n\n &:active::before,\n &:active + &::before {\n border-inline-end-width: ${thinBorderWidth};\n border-top-width: ${rtl ? 0 : thinBorderWidth};\n border-bottom-width: ${rtl ? thinBorderWidth : 0};\n }\n\n &:first-child:active {\n border-inline-start-width: ${thinBorderWidth};\n padding-inline-start: calc(${spacing});\n }\n\n &:last-child:active {\n border-inline-end-width: ${thinBorderWidth};\n padding-inline-end: calc(${spacing});\n }\n\n &[aria-current] {\n z-index: 2;\n\n ${StyledInnerStage} {\n font-weight: bold;\n opacity: 1;\n }\n\n &:hover {\n ${StyledInnerStage} {\n opacity: ${baseTransparency};\n }\n }\n &:active {\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-3']};\n }\n }\n }\n\n &[aria-current] + &::before {\n box-shadow: ${shadow.low};\n }\n\n &[aria-current] + &:focus::before {\n box-shadow: none;\n }\n `;\n }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledStagePopover = styled.div(({ theme }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing});\n white-space: pre-line;\n width: 18rem;\n `;\n});\n\nStyledStagePopover.defaultProps = defaultThemeProp;\n\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n return css`\n list-style-type: none;\n margin-top: calc(1.5 * ${theme.base.spacing});\n margin-bottom: calc(2.5 * ${theme.base.spacing});\n\n &:empty {\n margin-bottom: 0;\n }\n `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.li<{ complete: boolean }>(({ complete, theme }) => {\n const iconColor = complete ? theme.base.palette.success : theme.base.palette['foreground-color'];\n const iconWidth = complete ? '1.125rem' : '0.3rem';\n const iconMargin = complete ? 0 : '0.3rem';\n const textOpacity = complete ? theme.base.transparency['transparent-3'] : 1;\n\n return css`\n border-radius: 0;\n margin-bottom: calc(${theme.base.spacing});\n color: ${theme.base.palette['foreground-color']};\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ${StyledIcon} {\n margin-inline-end: calc(${theme.base.spacing});\n color: ${iconColor};\n width: ${iconWidth};\n margin-inline-start: ${iconMargin};\n }\n\n ${StyledText} {\n opacity: ${textOpacity};\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nexport const StyledSteps = styled.div`\n background-color: ${props => props.theme.components.card.background};\n position: relative;\n`;\n\nStyledSteps.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStep = styled.span<{ complete: boolean }>(({ complete, theme }) => {\n const textOpacity = complete ? theme.base.transparency['transparent-2'] : 1;\n return css`\n display: flex;\n width: 100%;\n text-align: start;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n ${StyledIcon} {\n color: ${theme.base.palette.success};\n margin-inline-end: ${theme.base.spacing};\n }\n\n ${StyledText} {\n opacity: ${textOpacity};\n }\n `;\n});\n\nStyledInnerStep.defaultProps = defaultThemeProp;\n\nexport const StyledDateTimeDisplay = styled.span(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n font-size: ${fontSize.xs};\n opacity: ${theme.base.transparency['transparent-2']};\n `;\n});\n\nStyledDateTimeDisplay.defaultProps = defaultThemeProp;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StepsContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/StepsContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAK3D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;CACrC;AAED,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,~~CAmB1D~~,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"StepsContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/StepsContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAK3D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;CACrC;AAED,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CAqB1D,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -3,7 +3,7 @@ import { Flex, Icon, DateTimeDisplay, Text } from '@pega/cosmos-react-core';
 import Steps from './Steps';
 import { StyledDateTimeDisplay, StyledInnerStep, StyledSteps } from './Stages.styles';
 const StepsContainer = ({ currentStage }) => {
-    return (_jsxs(Flex, Object.assign({ as: StyledSteps, container: { direction: 'column' }, item: { grow: 1 } }, { children: [_jsxs(StyledInnerStep, Object.assign({ complete: currentStage[0]?.complete }, { children: [currentStage[0]?.complete && _jsx(Icon, { name: 'check' }, void 0), _jsx(Text, Object.assign({ variant: 'h2' }, { children: currentStage[0]?.name }), void 0)] }), void 0), _jsx(DateTimeDisplay, { as: StyledDateTimeDisplay, value: currentStage[0]?.date, variant: 'relative', format: 'short' }, void 0), _jsx(Steps, { steps: currentStage[0].steps }, void 0)] }), void 0));
+    return (_jsxs(Flex, Object.assign({ as: StyledSteps, container: { direction: 'column' }, item: { grow: 1 } }, { children: [_jsxs(StyledInnerStep, Object.assign({ complete: currentStage[0]?.complete }, { children: [currentStage[0]?.complete && _jsx(Icon, { name: 'check' }, void 0), _jsx(Text, Object.assign({ variant: 'h2' }, { children: currentStage[0]?.name }), void 0)] }), void 0), currentStage[0]?.date && (_jsx(DateTimeDisplay, { as: StyledDateTimeDisplay, value: currentStage[0]?.date, variant: 'relative', format: 'short' }, void 0)), _jsx(Steps, { steps: currentStage[0].steps }, void 0)] }), void 0));
 };
 export default StepsContainer;
 //# sourceMappingURL=StepsContainer.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StepsContainer.js","sourceRoot":"","sources":["../../../src/components/Stages/StepsContainer.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE5E,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAMtF,MAAM,cAAc,GAA2C,CAAC,EAC9D,YAAY,EACyB,EAAE,EAAE;IACzC,OAAO,CACL,MAAC,IAAI,kBAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,iBAC1E,MAAC,eAAe,kBAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,iBACjD,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,EACnD,KAAC,IAAI,kBAAC,OAAO,EAAC,IAAI,gBAAE,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,YAAQ,aACjC,~~EAClB~~,KAAC,eAAe,IACd,EAAE,EAAE,qBAAqB,EACzB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,EAC5B,OAAO,EAAC,UAAU,EAClB,MAAM,EAAC,OAAO,WACd,~~EAEF~~,KAAC,KAAK,IAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,WAAI,aAClC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, PropsWithoutRef } from 'react';\n\nimport { Flex, Icon, DateTimeDisplay, Text } from '@pega/cosmos-react-core';\n\nimport Steps from './Steps';\nimport { StagesProps } from './Stages.types';\nimport { StyledDateTimeDisplay, StyledInnerStep, StyledSteps } from './Stages.styles';\n\nexport interface StepsContainerProps {\n currentStage: StagesProps['stages'];\n}\n\nconst StepsContainer: FunctionComponent<StepsContainerProps> = ({\n currentStage\n}: PropsWithoutRef<StepsContainerProps>) => {\n return (\n <Flex as={StyledSteps} container={{ direction: 'column' }} item={{ grow: 1 }}>\n <StyledInnerStep complete={currentStage[0]?.complete}>\n {currentStage[0]?.complete && <Icon name='check' />}\n <Text variant='h2'>{currentStage[0]?.name}</Text>\n </StyledInnerStep>\n <DateTimeDisplay\n as={StyledDateTimeDisplay}\n value={currentStage[0]?.date}\n variant='relative'\n format='short'\n />\n\n <Steps steps={currentStage[0].steps} />\n </Flex>\n );\n};\n\nexport default StepsContainer;\n"]}
1	+ {"version":3,"file":"StepsContainer.js","sourceRoot":"","sources":["../../../src/components/Stages/StepsContainer.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE5E,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAMtF,MAAM,cAAc,GAA2C,CAAC,EAC9D,YAAY,EACyB,EAAE,EAAE;IACzC,OAAO,CACL,MAAC,IAAI,kBAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,iBAC1E,MAAC,eAAe,kBAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,iBACjD,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,EACnD,KAAC,IAAI,kBAAC,OAAO,EAAC,IAAI,gBAAE,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,YAAQ,aACjC,EACjB,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CACxB,KAAC,eAAe,IACd,EAAE,EAAE,qBAAqB,EACzB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,EAC5B,OAAO,EAAC,UAAU,EAClB,MAAM,EAAC,OAAO,WACd,CACH,EAED,KAAC,KAAK,IAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,WAAI,aAClC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, PropsWithoutRef } from 'react';\n\nimport { Flex, Icon, DateTimeDisplay, Text } from '@pega/cosmos-react-core';\n\nimport Steps from './Steps';\nimport { StagesProps } from './Stages.types';\nimport { StyledDateTimeDisplay, StyledInnerStep, StyledSteps } from './Stages.styles';\n\nexport interface StepsContainerProps {\n currentStage: StagesProps['stages'];\n}\n\nconst StepsContainer: FunctionComponent<StepsContainerProps> = ({\n currentStage\n}: PropsWithoutRef<StepsContainerProps>) => {\n return (\n <Flex as={StyledSteps} container={{ direction: 'column' }} item={{ grow: 1 }}>\n <StyledInnerStep complete={currentStage[0]?.complete}>\n {currentStage[0]?.complete && <Icon name='check' />}\n <Text variant='h2'>{currentStage[0]?.name}</Text>\n </StyledInnerStep>\n {currentStage[0]?.date && (\n <DateTimeDisplay\n as={StyledDateTimeDisplay}\n value={currentStage[0]?.date}\n variant='relative'\n format='short'\n />\n )}\n\n <Steps steps={currentStage[0].steps} />\n </Flex>\n );\n};\n\nexport default StepsContainer;\n"]}

package/lib/components/Stakeholders/StakeholderForm.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import type { StakeholdersProps } from './Stakeholders.types';
+declare const _default: ({ roles, currentRole, renderer: Renderer }: Pick<StakeholdersProps['form'], 'roles' | 'currentRole' | 'renderer'>) => JSX.Element;
+export default _default;
+//# sourceMappingURL=StakeholderForm.d.ts.map

package/lib/components/Stakeholders/StakeholderForm.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"StakeholderForm.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/StakeholderForm.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;qEAM3D,KAAK,iBAAiB,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG,UAAU,CAAC;AAJxE,wBA8DE"}

package/lib/components/Stakeholders/StakeholderForm.js ADDED Viewed

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { ComboBox, RadioButtonGroup, RadioButton, Flex, useI18n, getFocusables } from '@pega/cosmos-react-core';
+export default ({ roles, currentRole, renderer: Renderer }) => {
+    const contentRef = useRef(null);
+    const [selectedRole, setSelectedRole] = useState(() => {
+        const selected = roles.find(role => role === currentRole);
+        return selected ?? roles[0];
+    });
+    const label = useI18n()('role');
+    let control;
+    if (roles.length > 3) {
+        const items = roles.map(role => {
+            return {
+                id: role,
+                primary: role,
+                selected: role === selectedRole
+            };
+        });
+        const selected = items.find(item => item.selected);
+        control = (_jsx(ComboBox, { label: label, selected: selected ? { items: { id: selected.id, text: selected.primary } } : undefined, menu: {
+                mode: 'single-select',
+                items,
+                onItemClick: setSelectedRole
+            } }, void 0));
+    }
+    else {
+        control = (_jsx(RadioButtonGroup, Object.assign({ label: label, name: 'role', inline: true, onChange: e => {
+                setSelectedRole(e.target.value);
+            } }, { children: roles.map(role => (_jsx(RadioButton, { label: role, value: role, checked: role === selectedRole }, role))) }), void 0));
+    }
+    useEffect(() => {
+        getFocusables(contentRef)[0].focus();
+    }, []);
+    return (_jsxs(Flex, Object.assign({ container: { direction: 'column', gap: 2 }, ref: contentRef }, { children: [control, _jsx(Renderer, { role: selectedRole }, void 0)] }), void 0));
+};
+//# sourceMappingURL=StakeholderForm.js.map

package/lib/components/Stakeholders/StakeholderForm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"StakeholderForm.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/StakeholderForm.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EACL,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,IAAI,EACJ,OAAO,EACP,aAAa,EACd,MAAM,yBAAyB,CAAC;AAIjC,eAAe,CAAC,EACd,KAAK,EACL,WAAW,EACX,QAAQ,EAAE,QAAQ,EACoD,EAAE,EAAE;IAC1E,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QACpD,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC;QAC1D,OAAO,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IACH,MAAM,KAAK,GAAG,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,OAAoB,CAAC;IAEzB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;QACpB,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC7B,OAAO;gBACL,EAAE,EAAE,IAAI;gBACR,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI,KAAK,YAAY;aAChC,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAEnD,OAAO,GAAG,CACR,KAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAE,IAAI,EAAE,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EACvF,IAAI,EAAE;gBACJ,IAAI,EAAE,eAAe;gBACrB,KAAK;gBACL,WAAW,EAAE,eAAe;aAC7B,WACD,CACH,CAAC;KACH;SAAM;QACL,OAAO,GAAG,CACR,KAAC,gBAAgB,kBACf,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,MAAM,QACN,QAAQ,EAAE,CAAC,CAAC,EAAE;gBACZ,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAClC,CAAC,gBAEA,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,KAAC,WAAW,IAAY,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,KAAK,YAAY,IAA9D,IAAI,CAA8D,CACrF,CAAC,YACe,CACpB,CAAC;KACH;IAED,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;IACvC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,MAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,UAAU,iBAC9D,OAAO,EACR,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,WAAI,aAC3B,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport {\n ComboBox,\n RadioButtonGroup,\n RadioButton,\n Flex,\n useI18n,\n getFocusables\n} from '@pega/cosmos-react-core';\n\nimport type { StakeholdersProps } from './Stakeholders.types';\n\nexport default ({\n roles,\n currentRole,\n renderer: Renderer\n}: Pick<StakeholdersProps['form'], 'roles' | 'currentRole' | 'renderer'>) => {\n const contentRef = useRef<HTMLElement>(null);\n const [selectedRole, setSelectedRole] = useState(() => {\n const selected = roles.find(role => role === currentRole);\n return selected ?? roles[0];\n });\n const label = useI18n()('role');\n let control: JSX.Element;\n\n if (roles.length > 3) {\n const items = roles.map(role => {\n return {\n id: role,\n primary: role,\n selected: role === selectedRole\n };\n });\n\n const selected = items.find(item => item.selected);\n\n control = (\n <ComboBox\n label={label}\n selected={selected ? { items: { id: selected.id, text: selected.primary } } : undefined}\n menu={{\n mode: 'single-select',\n items,\n onItemClick: setSelectedRole\n }}\n />\n );\n } else {\n control = (\n <RadioButtonGroup\n label={label}\n name='role'\n inline\n onChange={e => {\n setSelectedRole(e.target.value);\n }}\n >\n {roles.map(role => (\n <RadioButton key={role} label={role} value={role} checked={role === selectedRole} />\n ))}\n </RadioButtonGroup>\n );\n }\n\n useEffect(() => {\n getFocusables(contentRef)[0].focus();\n }, []);\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }} ref={contentRef}>\n {control}\n <Renderer role={selectedRole} />\n </Flex>\n );\n};\n"]}

package/lib/components/Stakeholders/Stakeholders.d.ts ADDED Viewed

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

package/lib/components/Stakeholders/Stakeholders.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"Stakeholders.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAkBf,OAAO,KAAK,EAAU,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAO9D,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA+QrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Stakeholders/Stakeholders.js ADDED Viewed

@@ -0,0 +1,181 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useRef, useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { createPortal } from 'react-dom';
+import { defaultThemeProp, SummaryList, ModalManagerContext, useI18n, Button, ViewAll, Modal, Popover, Flex, Text, useOuterEvent } from '@pega/cosmos-react-core';
+import StakeholderForm from './StakeholderForm';
+const StyledStakeholders = styled.div ``;
+StyledStakeholders.defaultProps = defaultThemeProp;
+const Stakeholders = forwardRef(({ items: itemsProp, count, loading, onAddNew, form, onViewAll, viewAll, onAfterModalClose, error, ...restProps }, ref) => {
+    const { create: createModal } = useContext(ModalManagerContext);
+    const t = useI18n();
+    const modalMethods = useRef();
+    const [mode, setMode] = useState();
+    const [editing, setEditing] = useState(false);
+    const popoverRef = useRef(null);
+    const [popoverTarget, setPopoverTarget] = useState(null);
+    const itemElsRef = useRef({
+        itemEls: [],
+        viewAllItemEls: []
+    });
+    // This function merges the pre-defined actions(add & edit) to the item object.
+    const mergeItemActions = (items) => {
+        return items.map(({ onEdit, onRemove, ...rest }, i) => {
+            let itemActions = [];
+            const elArray = itemElsRef.current[mode === 'viewAll' ? 'viewAllItemEls' : 'itemEls'];
+            if (onEdit) {
+                itemActions = [
+                    {
+                        id: 'edit',
+                        text: t('edit'),
+                        icon: 'pencil',
+                        onClick: () => {
+                            setEditing(true);
+                            setPopoverTarget({
+                                portal: elArray[i],
+                                button: elArray[i].querySelector('button[aria-haspopup="menu"]')
+                            });
+                            onEdit?.();
+                        }
+                    }
+                ];
+            }
+            if (onRemove) {
+                itemActions = [
+                    ...itemActions,
+                    {
+                        id: 'remove',
+                        text: t('remove'),
+                        icon: 'trash',
+                        onClick: () => {
+                            onRemove?.();
+                        }
+                    }
+                ];
+            }
+            return {
+                ...rest,
+                ref: (el) => {
+                    elArray[i] = el;
+                },
+                actions: itemActions
+            };
+        });
+    };
+    const closePopover = () => {
+        if (!popoverTarget)
+            return;
+        popoverTarget.button?.focus();
+        setPopoverTarget(null);
+        setEditing(false);
+    };
+    let formContent = null;
+    if (mode === 'add' || editing) {
+        formContent = (_jsx(StakeholderForm, { roles: form.roles, currentRole: form.currentRole, renderer: form.renderer }, void 0));
+    }
+    // Actions used for add and edit both in the modal and the popover.
+    let formActions = null;
+    if (mode === 'add' || editing) {
+        formActions = (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ onClick: () => {
+                        if (form.onDismiss() !== false) {
+                            if (mode === 'add') {
+                                modalMethods.current?.dismiss();
+                            }
+                            else {
+                                closePopover();
+                            }
+                        }
+                    } }, { children: t('cancel') }), void 0), _jsx(Button, Object.assign({ type: 'submit', variant: 'primary', onClick: () => {
+                        if (form.onSubmit() !== false) {
+                            if (mode === 'add') {
+                                modalMethods.current?.dismiss();
+                            }
+                            else {
+                                closePopover();
+                            }
+                        }
+                    } }, { children: t('add') }), void 0)] }, void 0));
+    }
+    // Content for the modal either for adding new or viewing all.
+    let modalContent = null;
+    if (mode === 'add')
+        modalContent = formContent;
+    if (mode === 'viewAll' || (editing && modalMethods.current)) {
+        modalContent = (_jsx(ViewAll, { loading: loading, items: mergeItemActions(viewAll.items), actions: [
+                {
+                    id: 'addStakeHolder',
+                    text: 'Add new',
+                    onClick: () => {
+                        setMode('add');
+                        onAddNew?.();
+                    }
+                }
+            ], searchInputProps: {
+                onSearchChange: value => {
+                    viewAll.onSearch(value);
+                }
+            } }, void 0));
+    }
+    useEffect(() => {
+        if (!mode) {
+            modalMethods.current = undefined;
+            return;
+        }
+        const modalProps = {
+            children: modalContent,
+            actions: mode === 'add' ? formActions : undefined
+        };
+        if (modalMethods.current) {
+            modalMethods.current.update(modalProps);
+        }
+        else if (mode === 'add' || mode === 'viewAll') {
+            modalMethods.current = createModal(Modal, {
+                heading: mode === 'add' ? t('add_noun', t('stakeholder')) : t('stakeholders'),
+                count: mode === 'add' ? undefined : count,
+                ...modalProps,
+                onAfterClose: () => {
+                    setMode(undefined);
+                    onAfterModalClose?.();
+                }
+            });
+        }
+    }, [mode, modalContent, formActions, count, onAfterModalClose]);
+    // Using mousedown instead of click since drag selecting an input's value within the popover, then releasing outside the popover triggers outer click.
+    useOuterEvent('mousedown', [popoverRef], closePopover);
+    let editPopover = null;
+    if (popoverTarget) {
+        editPopover = (_jsx(Popover, Object.assign({ ref: popoverRef, target: popoverTarget.button, placement: 'bottom-start', role: 'dialog' }, { children: _jsxs(Flex, Object.assign({ container: { direction: 'column', gap: 2, pad: 2 } }, { children: [_jsx(Text, Object.assign({ variant: 'h3' }, { children: t('edit_noun', 'stakeholder') }), void 0), _jsx(StakeholderForm, { roles: form.roles, currentRole: form.currentRole, renderer: form.renderer }, void 0), _jsx(Flex, Object.assign({ container: { justify: 'between' } }, { children: formActions }), void 0)] }), void 0) }), void 0));
+    }
+    const onKeydown = (e) => {
+        if (e.key === 'Escape')
+            closePopover();
+    };
+    useEffect(() => {
+        if (!popoverTarget)
+            return;
+        document.addEventListener('keydown', onKeydown);
+        return () => {
+            document.removeEventListener('keydown', onKeydown);
+        };
+    }, [popoverTarget]);
+    return (_jsxs(_Fragment, { children: [_jsx(SummaryList, Object.assign({}, restProps, { ref: ref, icon: 'person', name: t('stakeholders'), loading: loading, count: count, error: error, items: useMemo(() => mergeItemActions(itemsProp.slice(0, 3)), [itemsProp]), actions: onAddNew
+                    ? [
+                        {
+                            text: t('add_noun', t('stakeholder')),
+                            id: 'addNew',
+                            icon: 'plus',
+                            onClick() {
+                                setMode('add');
+                                onAddNew?.();
+                            }
+                        }
+                    ]
+                    : undefined, onViewAll: onViewAll && count && count > 3
+                    ? () => {
+                        setMode('viewAll');
+                        onViewAll?.();
+                    }
+                    : undefined }), void 0), popoverTarget && createPortal(editPopover, popoverTarget.portal)] }, void 0));
+});
+export default Stakeholders;
+//# sourceMappingURL=Stakeholders.js.map

package/lib/components/Stakeholders/Stakeholders.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Stakeholders.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useContext,\n useRef,\n useEffect,\n useMemo,\n useState,\n ReactNode\n} from 'react';\nimport styled from 'styled-components';\nimport { createPortal } from 'react-dom';\n\nimport {\n defaultThemeProp,\n SummaryList,\n ModalManagerContext,\n useI18n,\n ModalMethods,\n Button,\n ViewAll,\n Modal,\n Popover,\n Flex,\n Text,\n useOuterEvent\n} from '@pega/cosmos-react-core';\nimport type { Action, ForwardProps } from '@pega/cosmos-react-core';\n\nimport type { StakeholdersProps } from './Stakeholders.types';\nimport StakeholderForm from './StakeholderForm';\n\nconst StyledStakeholders = styled.div``;\n\nStyledStakeholders.defaultProps = defaultThemeProp;\n\nconst Stakeholders: FunctionComponent<StakeholdersProps & ForwardProps> = forwardRef(\n (\n {\n items: itemsProp,\n count,\n loading,\n onAddNew,\n form,\n onViewAll,\n viewAll,\n onAfterModalClose,\n error,\n ...restProps\n }: PropsWithoutRef<StakeholdersProps>,\n ref: StakeholdersProps['ref']\n ) => {\n const { create: createModal } = useContext(ModalManagerContext);\n const t = useI18n();\n const modalMethods = useRef<ModalMethods>();\n const [mode, setMode] = useState<undefined | 'add' | 'viewAll'>();\n const [editing, setEditing] = useState(false);\n const popoverRef = useRef<HTMLDivElement>(null);\n\n const [popoverTarget, setPopoverTarget] = useState<{\n portal: HTMLLIElement;\n button: HTMLButtonElement | null;\n } | null>(null);\n\n const itemElsRef = useRef<{ itemEls: HTMLLIElement[]; viewAllItemEls: HTMLLIElement[] }>({\n itemEls: [],\n viewAllItemEls: []\n });\n\n // This function merges the pre-defined actions(add & edit) to the item object.\n const mergeItemActions = (\n items: StakeholdersProps['items'] | NonNullable<StakeholdersProps['viewAll']>['items']\n ) => {\n return items.map(({ onEdit, onRemove, ...rest }, i) => {\n let itemActions: Action[] = [];\n const elArray = itemElsRef.current[mode === 'viewAll' ? 'viewAllItemEls' : 'itemEls'];\n\n if (onEdit) {\n itemActions = [\n {\n id: 'edit',\n text: t('edit'),\n icon: 'pencil',\n onClick: () => {\n setEditing(true);\n setPopoverTarget({\n portal: elArray[i],\n button: elArray[i].querySelector<HTMLButtonElement>(\n 'button[aria-haspopup=\"menu\"]'\n )\n });\n\n onEdit?.();\n }\n }\n ];\n }\n\n if (onRemove) {\n itemActions = [\n ...itemActions,\n {\n id: 'remove',\n text: t('remove'),\n icon: 'trash',\n onClick: () => {\n onRemove?.();\n }\n }\n ];\n }\n\n return {\n ...rest,\n ref: (el: HTMLLIElement) => {\n elArray[i] = el;\n },\n actions: itemActions\n };\n });\n };\n\n const closePopover = () => {\n if (!popoverTarget) return;\n popoverTarget.button?.focus();\n setPopoverTarget(null);\n setEditing(false);\n };\n\n let formContent: ReactNode = null;\n if (mode === 'add' || editing) {\n formContent = (\n <StakeholderForm\n roles={form.roles}\n currentRole={form.currentRole}\n renderer={form.renderer}\n />\n );\n }\n\n // Actions used for add and edit both in the modal and the popover.\n let formActions: ReactNode = null;\n if (mode === 'add' || editing) {\n formActions = (\n <>\n <Button\n onClick={() => {\n if (form.onDismiss() !== false) {\n if (mode === 'add') {\n modalMethods.current?.dismiss();\n } else {\n closePopover();\n }\n }\n }}\n >\n {t('cancel')}\n </Button>\n <Button\n type='submit'\n variant='primary'\n onClick={() => {\n if (form.onSubmit() !== false) {\n if (mode === 'add') {\n modalMethods.current?.dismiss();\n } else {\n closePopover();\n }\n }\n }}\n >\n {t('add')}\n </Button>\n </>\n );\n }\n\n // Content for the modal either for adding new or viewing all.\n let modalContent: ReactNode = null;\n if (mode === 'add') modalContent = formContent;\n\n if (mode === 'viewAll' || (editing && modalMethods.current)) {\n modalContent = (\n <ViewAll\n loading={loading}\n items={mergeItemActions(viewAll.items)}\n actions={[\n {\n id: 'addStakeHolder',\n text: 'Add new',\n onClick: () => {\n setMode('add');\n onAddNew?.();\n }\n }\n ]}\n searchInputProps={{\n onSearchChange: value => {\n viewAll.onSearch(value);\n }\n }}\n />\n );\n }\n\n useEffect(() => {\n if (!mode) {\n modalMethods.current = undefined;\n return;\n }\n\n const modalProps = {\n children: modalContent,\n actions: mode === 'add' ? formActions : undefined\n };\n\n if (modalMethods.current) {\n modalMethods.current.update(modalProps);\n } else if (mode === 'add' || mode === 'viewAll') {\n modalMethods.current = createModal(Modal, {\n heading: mode === 'add' ? t('add_noun', t('stakeholder')) : t('stakeholders'),\n count: mode === 'add' ? undefined : count,\n ...modalProps,\n onAfterClose: () => {\n setMode(undefined);\n onAfterModalClose?.();\n }\n });\n }\n }, [mode, modalContent, formActions, count, onAfterModalClose]);\n\n // Using mousedown instead of click since drag selecting an input's value within the popover, then releasing outside the popover triggers outer click.\n useOuterEvent('mousedown', [popoverRef], closePopover);\n\n let editPopover: ReactNode = null;\n if (popoverTarget) {\n editPopover = (\n <Popover\n ref={popoverRef}\n target={popoverTarget.button}\n placement='bottom-start'\n role='dialog'\n >\n <Flex container={{ direction: 'column', gap: 2, pad: 2 }}>\n <Text variant='h3'>{t('edit_noun', 'stakeholder')}</Text>\n <StakeholderForm\n roles={form.roles}\n currentRole={form.currentRole}\n renderer={form.renderer}\n />\n <Flex container={{ justify: 'between' }}>{formActions}</Flex>\n </Flex>\n </Popover>\n );\n }\n\n const onKeydown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') closePopover();\n };\n\n useEffect(() => {\n if (!popoverTarget) return;\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, [popoverTarget]);\n\n return (\n <>\n <SummaryList\n {...restProps}\n ref={ref}\n icon='person'\n name={t('stakeholders')}\n loading={loading}\n count={count}\n error={error}\n items={useMemo(() => mergeItemActions(itemsProp.slice(0, 3)), [itemsProp])}\n actions={\n onAddNew\n ? [\n {\n text: t('add_noun', t('stakeholder')),\n id: 'addNew',\n icon: 'plus',\n onClick() {\n setMode('add');\n onAddNew?.();\n }\n }\n ]\n : undefined\n }\n onViewAll={\n onViewAll && count && count > 3\n ? () => {\n setMode('viewAll');\n onViewAll?.();\n }\n : undefined\n }\n />\n {popoverTarget && createPortal(editPopover, popoverTarget.portal)}\n </>\n );\n }\n);\n\nexport default Stakeholders;\n"]}

package/lib/components/Stakeholders/Stakeholders.types.d.ts ADDED Viewed

@@ -0,0 +1,42 @@
+import type { ComponentType } from 'react';
+import type { SummaryListProps, ModalProps, ForwardProps, NoChildrenProp, SummaryListItem } from '@pega/cosmos-react-core';
+/** A simple extension of a SummaryListItem. Pass onEdit and or onRemove to render either action for a stakeholder. */
+export interface Stakeholder extends SummaryListItem, ForwardProps {
+    onEdit?: () => void;
+    onRemove?: () => void;
+}
+export interface StakeholdersProps extends NoChildrenProp, Pick<SummaryListProps, 'count' | 'loading' | 'error' | 'ref'> {
+    /**
+     * The initial array of stakeholders presented in the default state of the widget.
+     * This array will be sliced internally to the first three items but recommend only passing up to that length as a best practice.
+     */
+    items: Stakeholder[];
+    /** Called when a user opens the add form. */
+    onAddNew?: () => void;
+    /** Data and a component required to render a form for both add and edit. The renderer is passed the currently selected role. */
+    form: {
+        /** An array of available roles a stakeholder may be assigned. */
+        roles: string[];
+        /** Use this when edit is invoked to indicate to the component which option to select. An empty string will be treated as no defined role and select the first role in the roles array.  */
+        currentRole: string;
+        /** A component to render the main portion of the add/edit stakeholder form. This may be a simple function. */
+        renderer: ComponentType<{
+            role: string;
+        }>;
+        /** Called when a user submits an add/edit form. */
+        onSubmit: NonNullable<ModalProps['onRequestDismiss']>;
+        /** Called when a user dismisses an add/edit form either via the cancel action, click away or escape key. */
+        onDismiss: NonNullable<ModalProps['onRequestDismiss']>;
+    };
+    /** Called when a user opens the view all modal. */
+    onViewAll?: () => void;
+    viewAll: {
+        /** Pass a full or filtered list of stakeholder items. Filter based on search input. */
+        items: StakeholdersProps['items'];
+        /** Called when a user enters a view all search. Return a filtered array to viewAll['items'] with matching stakeholders. */
+        onSearch: (value: string) => void;
+    };
+    /** Called when the the modal for add or view all transitions out. */
+    onAfterModalClose?: ModalProps['onAfterClose'];
+}
+//# sourceMappingURL=Stakeholders.types.d.ts.map

package/lib/components/Stakeholders/Stakeholders.types.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Stakeholders.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EACV,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,cAAc,EACd,eAAe,EAChB,MAAM,yBAAyB,CAAC;AAEjC,sHAAsH;AACtH,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,YAAY;IAChE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,iBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;IAC/D;;;OAGG;IACH,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,gIAAgI;IAChI,IAAI,EAAE;QACJ,iEAAiE;QACjE,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,2LAA2L;QAC3L,WAAW,EAAE,MAAM,CAAC;QACpB,8GAA8G;QAC9G,QAAQ,EAAE,aAAa,CAAC;YAAE,IAAI,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QAC1C,mDAAmD;QACnD,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC,CAAC;QACtD,4GAA4G;QAC5G,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC,CAAC;KACxD,CAAC;IACF,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE;QACP,uFAAuF;QACvF,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAClC,2HAA2H;QAC3H,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KACnC,CAAC;IAEF,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;CAChD"}

package/lib/components/Stakeholders/Stakeholders.types.js ADDED Viewed

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

package/lib/components/Stakeholders/Stakeholders.types.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Stakeholders.types.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentType } from 'react';\n\nimport type {\n SummaryListProps,\n ModalProps,\n ForwardProps,\n NoChildrenProp,\n SummaryListItem\n} from '@pega/cosmos-react-core';\n\n/** A simple extension of a SummaryListItem. Pass onEdit and or onRemove to render either action for a stakeholder. */\nexport interface Stakeholder extends SummaryListItem, ForwardProps {\n onEdit?: () => void;\n onRemove?: () => void;\n}\n\nexport interface StakeholdersProps\n extends NoChildrenProp,\n Pick<SummaryListProps, 'count' | 'loading' | 'error' | 'ref'> {\n /**\n * The initial array of stakeholders presented in the default state of the widget.\n * This array will be sliced internally to the first three items but recommend only passing up to that length as a best practice.\n */\n items: Stakeholder[];\n /** Called when a user opens the add form. */\n onAddNew?: () => void;\n /** Data and a component required to render a form for both add and edit. The renderer is passed the currently selected role. */\n form: {\n /** An array of available roles a stakeholder may be assigned. */\n roles: string[];\n /** Use this when edit is invoked to indicate to the component which option to select. An empty string will be treated as no defined role and select the first role in the roles array. */\n currentRole: string;\n /** A component to render the main portion of the add/edit stakeholder form. This may be a simple function. */\n renderer: ComponentType<{ role: string }>;\n /** Called when a user submits an add/edit form. */\n onSubmit: NonNullable<ModalProps['onRequestDismiss']>;\n /** Called when a user dismisses an add/edit form either via the cancel action, click away or escape key. */\n onDismiss: NonNullable<ModalProps['onRequestDismiss']>;\n };\n /** Called when a user opens the view all modal. */\n onViewAll?: () => void;\n viewAll: {\n /** Pass a full or filtered list of stakeholder items. Filter based on search input. */\n items: StakeholdersProps['items'];\n /** Called when a user enters a view all search. Return a filtered array to viewAll['items'] with matching stakeholders. */\n onSearch: (value: string) => void;\n };\n\n /** Called when the the modal for add or view all transitions out. */\n onAfterModalClose?: ModalProps['onAfterClose'];\n}\n"]}

package/lib/components/Stakeholders/index.d.ts ADDED Viewed

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

package/lib/components/Stakeholders/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/components/Stakeholders/index.js ADDED Viewed

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

package/lib/components/Stakeholders/index.js.map ADDED Viewed

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

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext, useMemo, useState, useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, Modal, ModalManagerContext, Tag, Button, useI18n, Count, Flex, Text, CardHeader, Card, Actions, Icon, CardContent, Progress, NoItems, ErrorState, Popover, Menu, useConsolidatedRef, CardFooter, Banner } from '@pega/cosmos-react-core';
+import { defaultThemeProp, Modal, ModalManagerContext, Tag, Button, useI18n, Count, Flex, Text, CardHeader, Card, Actions, Icon, CardContent, Progress, EmptyState, ErrorState, Popover, Menu, useConsolidatedRef, CardFooter, Banner } from '@pega/cosmos-react-core';
 import { StyledTag } from '@pega/cosmos-react-core/lib/components/Badges/Tag';
 import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
 import MultiSelectInput from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput';
@@ -207,7 +207,7 @@ const Tags = forwardRef(({ tags, availableTags, loading, error, onSearch, onTagC
         }
         return tags.length > 0 ? (_jsx(Flex, Object.assign({ ref: contentRef, container: { gap: 1, wrap: 'wrap' } }, { children: tags.map(tag => {
                 return (_jsx(Tag, Object.assign({ onClick: () => onTagClick?.(tag) }, { children: tag }), tag));
-            }) }), void 0)) : (_jsx(NoItems, {}, void 0));
+            }) }), void 0)) : (_jsx(EmptyState, {}, void 0));
     }, [loading, error, tags]);
     return (_jsxs(Card, Object.assign({ ref: consolidatedRef }, restProps, { as: StyledTags, viewAll: viewAll, isLoading: loading }, { children: [_jsxs(CardHeader, { children: [_jsxs(Flex, Object.assign({ container: { alignItems: 'center', gap: 1 } }, { children: [_jsx(Icon, { name: 'tag' }, void 0), _jsx(Text, Object.assign({ variant: 'h2' }, { children: t('tags') }), void 0), _jsx(Count, { children: tags.length }, void 0)] }), void 0), _jsx(Actions, { items: onEditTags
                             ? [