npm - @pega/cosmos-react-work - Versions diffs - 4.0.0-dev.9.1 → 4.0.0-rc.1 - Mend

@pega/cosmos-react-work 4.0.0-dev.9.1 → 4.0.0-rc.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 (251) hide show

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { registerIcon, useI18n, Modal, useModalManager, InfoDialog, StyledLabel, Text, SummaryList, defaultThemeProp } from '@pega/cosmos-react-core';
+import * as polarisIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris.icon';
+import * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';
+registerIcon(polarisIcon, informationIcon);
+// Expand minimum width to ensure the chart is readable enough
+const StyledPredictionExplanationDialog = styled(InfoDialog)(({ theme }) => {
+    return css `
+    min-width: min(${theme.base['content-width'].md}, calc(100vw - 2rem));
+  `;
+});
+StyledPredictionExplanationDialog.defaultProps = defaultThemeProp;
+const PredictionsList = forwardRef(function PredictionsList({ items: itemsProp, progress, ...restProps }, ref) {
+    const t = useI18n();
+    const [currentItemIdTarget, setCurrentItemIdTarget] = useState();
+    const currentItem = itemsProp?.find(({ id }) => id === currentItemIdTarget?.id);
+    const items = useMemo(() => (itemsProp ?? []).map(item => ({
+        id: item.id,
+        primary: _jsx(StyledLabel, { forwardedAs: 'span', children: item.label }),
+        secondary: (_jsx(Text, { variant: 'h1', as: 'span', children: item.value })),
+        overflowStrategy: 'ellipsis',
+        actions: item.additionalInfo
+            ? [
+                {
+                    id: item.id,
+                    text: t('learn_more'),
+                    icon: 'information',
+                    onClick: (id, e) => {
+                        setCurrentItemIdTarget({
+                            id: item.id,
+                            target: e.currentTarget
+                        });
+                    }
+                }
+            ]
+            : undefined
+    })), [itemsProp]);
+    return (_jsxs(_Fragment, { children: [_jsx(SummaryList, { ...restProps, loading: progress, ref: ref, items: items }), currentItemIdTarget && currentItem?.additionalInfo && (_jsx(StyledPredictionExplanationDialog, { heading: currentItem.label, target: currentItemIdTarget.target, onDismiss: () => {
+                    setCurrentItemIdTarget(undefined);
+                }, children: currentItem.additionalInfo }))] }));
+});
+const PredictionsViewAllModal = ({ count, progress, ...restProps }) => {
+    const t = useI18n();
+    return (_jsx(Modal, { heading: t('all_predictions'), count: count, progress: progress, children: _jsx(PredictionsList, { ...restProps }) }));
+};
+const Predictions = forwardRef(function Predictions({ count, items, progress, ...restProps }, ref) {
+    const t = useI18n();
+    const { create } = useModalManager();
+    const viewAllModalRef = useRef();
+    useEffect(() => {
+        viewAllModalRef.current?.update({
+            items,
+            progress,
+            count
+        });
+    }, [items, progress, count]);
+    return (_jsx(PredictionsList, { ...restProps, ref: ref, name: t('predictions'), headingTag: 'h3', icon: 'polaris', count: count, items: items?.slice(0, 3), progress: progress, onViewAll: () => {
+            viewAllModalRef.current = create(PredictionsViewAllModal, {
+                items,
+                progress,
+                count
+            });
+        } }));
+});
+export default Predictions;
+//# sourceMappingURL=Predictions.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"Predictions.js","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n forwardRef,\n FunctionComponent,\n MouseEvent,\n PropsWithoutRef,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n ForwardProps,\n registerIcon,\n useI18n,\n Modal,\n SummaryListProps,\n useModalManager,\n SummaryListItem,\n InfoDialog,\n ModalMethods,\n StyledLabel,\n Text,\n SummaryList,\n defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport * as polarisIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris.icon';\nimport * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';\n\nimport PredictionsProps, { PredictionItem } from './Predictions.types';\n\nregisterIcon(polarisIcon, informationIcon);\n\n// Expand minimum width to ensure the chart is readable enough\nconst StyledPredictionExplanationDialog = styled(InfoDialog)(({ theme }) => {\n return css`\n min-width: min(${theme.base['content-width'].md}, calc(100vw - 2rem));\n `;\n});\n\nStyledPredictionExplanationDialog.defaultProps = defaultThemeProp;\n\nconst PredictionsList: FC<\n PredictionsProps & Pick<SummaryListProps, 'onViewAll' | 'name' | 'icon'> & ForwardProps\n> = forwardRef(function PredictionsList(\n {\n items: itemsProp,\n progress,\n ...restProps\n }: PropsWithoutRef<PredictionsProps & Pick<SummaryListProps, 'onViewAll' | 'name' | 'icon'>>,\n ref: PredictionsProps['ref']\n) {\n const t = useI18n();\n const [currentItemIdTarget, setCurrentItemIdTarget] = useState<\n | {\n id: PredictionItem['id'];\n target: HTMLButtonElement | HTMLAnchorElement | HTMLInputElement;\n }\n | undefined\n >();\n const currentItem = itemsProp?.find(({ id }) => id === currentItemIdTarget?.id);\n\n const items: SummaryListItem[] = useMemo(\n () =>\n (itemsProp ?? []).map(item => ({\n id: item.id,\n primary: <StyledLabel forwardedAs='span'>{item.label}</StyledLabel>,\n secondary: (\n <Text variant='h1' as='span'>\n {item.value}\n </Text>\n ),\n overflowStrategy: 'ellipsis',\n actions: item.additionalInfo\n ? [\n {\n id: item.id,\n text: t('learn_more'),\n icon: 'information',\n onClick: (\n id: string,\n e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n ) => {\n setCurrentItemIdTarget({\n id: item.id,\n target: e.currentTarget\n });\n }\n }\n ]\n : undefined\n })),\n [itemsProp]\n );\n\n return (\n <>\n <SummaryList {...restProps} loading={progress} ref={ref} items={items} />\n {currentItemIdTarget && currentItem?.additionalInfo && (\n <StyledPredictionExplanationDialog\n heading={currentItem.label}\n target={currentItemIdTarget.target}\n onDismiss={() => {\n setCurrentItemIdTarget(undefined);\n }}\n >\n {currentItem.additionalInfo}\n </StyledPredictionExplanationDialog>\n )}\n </>\n );\n});\n\nconst PredictionsViewAllModal = ({ count, progress, ...restProps }: PredictionsProps) => {\n const t = useI18n();\n return (\n <Modal heading={t('all_predictions')} count={count} progress={progress}>\n <PredictionsList {...restProps} />\n </Modal>\n );\n};\n\nconst Predictions: FunctionComponent<PredictionsProps & ForwardProps> = forwardRef(\n function Predictions(\n { count, items, progress, ...restProps }: PropsWithoutRef<PredictionsProps>,\n ref: PredictionsProps['ref']\n ) {\n const t = useI18n();\n const { create } = useModalManager();\n const viewAllModalRef = useRef<ModalMethods<PredictionsProps>>();\n\n useEffect(() => {\n viewAllModalRef.current?.update({\n items,\n progress,\n count\n });\n }, [items, progress, count]);\n\n return (\n <PredictionsList\n {...restProps}\n ref={ref}\n name={t('predictions')}\n headingTag='h3'\n icon='polaris'\n count={count}\n items={items?.slice(0, 3)}\n progress={progress}\n onViewAll={() => {\n viewAllModalRef.current = create(PredictionsViewAllModal, {\n items,\n progress,\n count\n });\n }}\n />\n );\n }\n);\n\nexport default Predictions;\n"]}

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

@@ -0,0 +1,23 @@
+import { ReactNode, Ref } from 'react';
+import { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
+export interface PredictionItem {
+    /** A unique id to represent the item. */
+    id: string;
+    /** Label for the prediction item. */
+    label: string;
+    /** Value for the prediction item. */
+    value: string;
+    /** Additional prediction information rendered in a dialog. */
+    additionalInfo?: ReactNode;
+}
+export default interface PredictionsProps extends BaseProps, NoChildrenProp {
+    /** Integer representing the total count of items. */
+    count?: number;
+    /** An array of PredictionItem objects to render. Pass an appropriately limited length array with a desired sort order based on design system defaults or config. */
+    items?: PredictionItem[];
+    /** Show a progress indicator when initially fetching list data. */
+    progress?: boolean;
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+}
+//# sourceMappingURL=Predictions.types.d.ts.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"Predictions.types.d.ts","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACzE,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oKAAoK;IACpK,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"Predictions.types.js","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface PredictionItem {\n /** A unique id to represent the item. */\n id: string;\n /** Label for the prediction item. */\n label: string;\n /** Value for the prediction item. */\n value: string;\n /** Additional prediction information rendered in a dialog. */\n additionalInfo?: ReactNode;\n}\n\nexport default interface PredictionsProps extends BaseProps, NoChildrenProp {\n /** Integer representing the total count of items. */\n count?: number;\n /** An array of PredictionItem objects to render. Pass an appropriately limited length array with a desired sort order based on design system defaults or config. */\n items?: PredictionItem[];\n /** Show a progress indicator when initially fetching list data. */\n progress?: boolean;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}

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

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

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

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Predictions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}

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

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

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

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

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

@@ -21,7 +21,7 @@ const FilterModal = (props) => {
                         return (_jsx(Filter, { onFilterChange: onFilterChange, onClearFilter: onClearFilter, ...filter }, filter.name));
                     }) })] }) }));
 };
-const SearchResults = forwardRef(({ results, searchInputProps, count, filters, onFilterChange, onClearAllFilters, onClearFilter, onShowMore, loading = false, ...restProps }, ref) => {
+const SearchResults = forwardRef(function SearchResults({ results, searchInputProps, count, filters, onFilterChange, onClearAllFilters, onClearFilter, onShowMore, loading = false, ...restProps }, ref) {
     const t = useI18n();
     const isMedium = useBreakpoint('md');
     const { create } = useModalManager();

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 {\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"]}
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 function SearchResults(\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.types.d.ts CHANGED Viewed

@@ -26,7 +26,7 @@ export interface SelectFilterProps extends BaseFilterProps {
     items: SelectFilterItemProps[];
     /**
      * Determines if the filter will render as a RadioButtonGroup or CheckboxGroup.
-     * @default "multi-select"
+     * @default 'multi-select'
      */
     selectType?: 'single-select' | 'multi-select';
 }
@@ -46,12 +46,12 @@ export interface TextFilterProps extends BaseFilterProps {
     value?: string;
     /**
      * Placeholder text. The default value is a locale translation of 'Search…'
-     * @default "Search…"
+     * @default 'Search…'
      */
     placeholder?: string;
 }
-export declare type FilterProps = SelectFilterProps;
-export declare type ActiveFilters = ActiveSelectFilter;
+export type FilterProps = SelectFilterProps;
+export type ActiveFilters = ActiveSelectFilter;
 export interface SearchResultProps {
     /** The id of the search result to be displayed. */
     id: string;
@@ -73,7 +73,7 @@ interface SelectFilterEvent extends BaseFilterEvent {
     type: 'select';
     value: SelectFilterItemProps;
 }
-export declare type FilterEvent = SelectFilterEvent;
+export type FilterEvent = SelectFilterEvent;
 export interface SearchResultsProps extends NoChildrenProp {
     /** A set of results to render for a given search. */
     results: SearchResultProps[];

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;IAC9B,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;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,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,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 /* 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"]}
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/SearchResults/index.d.ts CHANGED Viewed

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAGf,OAAO,~~EAIL~~,YAAY,~~EAYb~~,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAMlD,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,~~CAkKzD~~,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,EAKL,YAAY,EAab,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAMlD,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAwKxD,CAAC;AAEH,eAAe,MAAM,CAAC"}

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

@@ -1,12 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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, useI18n, Button, Modal, useBreakpoint, debounce, useModalManager, useConsolidatedRef, useUID, InfoDialog, useArrows } from '@pega/cosmos-react-core';
+import { Icon, Text, registerIcon, Flex, useI18n, Button, Modal, useBreakpoint, debounce, useModalManager, useConsolidatedRef, useUID, InfoDialog, useArrows, useAfterInitialEffect } from '@pega/cosmos-react-core';
 import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
 import StageGlimpse from './StageGlimpse';
 import { StyledInnerStage, StyledStage, StyledStageGlimpse, StyledStages } from './Stages.styles';
 registerIcon(checkIcon);
-const Stages = forwardRef(({ current, stages, caseTitle, onLoadStage, ...restProps }, ref) => {
+const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadStage, ...restProps }, ref) {
     const t = useI18n();
     const stagesRef = useConsolidatedRef(ref);
     const stagesRefs = useRef([]);
@@ -59,8 +59,8 @@ const Stages = forwardRef(({ current, stages, caseTitle, onLoadStage, ...restPro
                 ? 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: () => {
+            children: stages.map(stage => (_jsxs(Fragment, { children: [_jsx(Text, { variant: 'h2', children: stage.name }), _jsx(StageGlimpse, { stage: stage })] }, stage.id))),
+            onBeforeClose: () => {
                 setShowModal(false);
                 target?.focus();
                 setTarget(null);
@@ -68,10 +68,10 @@ const Stages = forwardRef(({ current, stages, caseTitle, onLoadStage, ...restPro
             }
         });
     };
-    useEffect(() => {
+    useAfterInitialEffect(() => {
         modalMethods.current?.update({
             progress: stagesToLoad.length > 0,
-            children: stages.map(stage => _jsx(StageGlimpse, { stage: stage }, stage.id))
+            children: stages.map(stage => (_jsxs(Fragment, { children: [_jsx(Text, { variant: 'h2', children: stage.name }), _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) => {
@@ -96,7 +96,7 @@ const Stages = forwardRef(({ current, stages, caseTitle, onLoadStage, ...restPro
                             stagesRefs.current[index] = el;
                         }, "aria-expanded": target && isSmallOrAbove, "aria-controls": target ? dialogId : undefined, children: [stage.completed && _jsx(Icon, { name: 'check' }), (!compressedView || isCurrent || !stage.completed) && (_jsx(StyledInnerStage, { ellipsis: isCurrent && compressedView, children: !isCurrent && compressedView ? index + 1 : stage.name }))] }), target && stagesRefs.current[index] === target && isSmallOrAbove && !showModal && (_jsx(InfoDialog, { heading: stage.name, target: target, progress: hasToLoad ? t('loading') : undefined, onDismiss: () => {
                             setTarget(null);
-                        }, placement: 'bottom-start', children: !hasToLoad && (_jsx(StyledStageGlimpse, { children: _jsxs(_Fragment, { children: [_jsx(StageGlimpse, { stage: stage }), _jsx(Button, { variant: 'secondary', onClick: openModal, children: t('stages_see_full_lifecycle') })] }) })) }))] }, stage.id));
+                        }, placement: 'bottom-start', children: !hasToLoad && (_jsxs(StyledStageGlimpse, { children: [_jsx(StageGlimpse, { stage: stage }), _jsx(Button, { variant: 'secondary', onClick: openModal, children: t('stages_see_full_lifecycle') })] })) }))] }, stage.id));
         }) }));
 });
 export default Stages;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n useState,\n useRef,\n useEffect,\n forwardRef,\n MouseEvent,\n PropsWithoutRef,\n Fragment\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n Icon,\n registerIcon,\n Flex,\n ForwardProps,\n useI18n,\n Button,\n Modal,\n useBreakpoint,\n debounce,\n useModalManager,\n useConsolidatedRef,\n useUID,\n ModalMethods,\n InfoDialog,\n useArrows\n} from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StagesProps } from './Stages.types';\nimport StageGlimpse from './StageGlimpse';\nimport { StyledInnerStage, StyledStage, StyledStageGlimpse, StyledStages } from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: FunctionComponent<StagesProps & ForwardProps> = forwardRef(\n (\n { current, stages, caseTitle, onLoadStage, ...restProps }: PropsWithoutRef<StagesProps>,\n ref: StagesProps['ref']\n ) => {\n const t = useI18n();\n\n const stagesRef = useConsolidatedRef(ref);\n const stagesRefs = useRef<HTMLButtonElement[]>([]);\n\n const [target, setTarget] = useState<HTMLButtonElement \| null>(null);\n\n const { create: createModal } = useModalManager();\n const modalMethods = useRef<ModalMethods>();\n const [showModal, setShowModal] = useState(false);\n\n const isSmallOrAbove = useBreakpoint('sm');\n const [compressedView, setCompressedView] = useState(false);\n const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n useArrows(stagesRef, { selector: ':scope > button:not([aria-expanded])', dir: 'left-right' });\n\n const dialogId = useUID();\n\n useEffect(() => {\n if (stagesRef.current) {\n if (compressedView) {\n const resizeObserver = new ResizeObserver(\n debounce((entries: ResizeObserverEntry[]) => {\n if (entries[0].contentRect.width > minExpandedWidth) {\n setCompressedView(false);\n }\n }, 100)\n );\n resizeObserver.observe(stagesRef.current);\n return () => resizeObserver.disconnect();\n }\n\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (!entries[0].isIntersecting) {\n setCompressedView(true);\n if (entries[0].rootBounds) setMinExpandedWidth(entries[0].rootBounds.width);\n }\n },\n {\n root: stagesRef.current,\n rootMargin: remToPx(0.0625),\n threshold: 1\n }\n );\n\n if (stagesRef.current.lastElementChild) {\n intersectionObserver.observe(stagesRef.current.lastElementChild);\n return () => intersectionObserver.disconnect();\n }\n }\n }, [minExpandedWidth, compressedView, stages.length]);\n\n const stagesToLoad = onLoadStage\n ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n : [];\n\n const openModal = () => {\n setShowModal(true);\n if (stagesToLoad.length > 0) onLoadStage?.(stagesToLoad);\n modalMethods.current = createModal(Modal, {\n heading: caseTitle\n ? t('stages_case_lifecycle', [caseTitle])\n : t('stages_default_case_lifecycle'),\n progress: stagesToLoad.length > 0,\n children: stages.map(stage => <StageGlimpse stage={stage} key={stage.id} />),\n onAfterClose: () => {\n setShowModal(false);\n target?.focus();\n setTarget(null);\n modalMethods.current = undefined;\n }\n });\n };\n\n useEffect(() => {\n modalMethods.current?.update({\n progress: stagesToLoad.length > 0,\n children: stages.map(stage => <StageGlimpse stage={stage} key={stage.id} />)\n });\n }, [stagesToLoad.length]);\n\n return (\n <Flex\n {...restProps}\n container\n as={StyledStages}\n ref={stagesRef}\n role='region'\n aria-label={t('stages_label')}\n >\n {stages.map((stage, index) => {\n const isCurrent = stage.id === current;\n let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n if (isCurrent) stageStatusText = t('current');\n const hasToLoad = stagesToLoad.includes(stage.id);\n return (\n <Fragment key={stage.id}>\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledStage}\n item={{\n grow: compressedView && !isCurrent ? 0 : 1,\n shrink: compressedView && isCurrent ? 1 : 0\n }}\n aria-current={isCurrent ? 'step' : undefined}\n aria-label={t('stages_stage_label', [stage.name, stageStatusText])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n if (isSmallOrAbove) {\n if (hasToLoad) onLoadStage?.([stage.id]);\n setTarget(e.currentTarget);\n } else {\n openModal();\n }\n }}\n ref={(el: HTMLButtonElement) => {\n stagesRefs.current[index] = el;\n }}\n aria-expanded={target && isSmallOrAbove}\n aria-controls={target ? dialogId : undefined}\n >\n {stage.completed && <Icon name='check' />}\n {(!compressedView \|\| isCurrent \|\| !stage.completed) && (\n <StyledInnerStage ellipsis={isCurrent && compressedView}>\n {!isCurrent && compressedView ? index + 1 : stage.name}\n </StyledInnerStage>\n )}\n </Flex>\n {target && stagesRefs.current[index] === target && isSmallOrAbove && !showModal && (\n <InfoDialog\n heading={stage.name}\n target={target}\n progress={hasToLoad ? t('loading') : undefined}\n onDismiss={() => {\n setTarget(null);\n }}\n placement='bottom-start'\n >\n {!hasToLoad && (\n <StyledStageGlimpse>\n <>\n <StageGlimpse stage={stage} />\n <Button variant='secondary' onClick={openModal}>\n {t('stages_see_full_lifecycle')}\n </Button>\n </>\n </StyledStageGlimpse>\n )}\n </InfoDialog>\n )}\n </Fragment>\n );\n })}\n </Flex>\n );\n }\n);\n\nexport default Stages;\n"]}
1	+ {"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,UAAU,EAGV,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,IAAI,EAEJ,OAAO,EACP,MAAM,EACN,KAAK,EACL,aAAa,EACb,QAAQ,EACR,eAAe,EACf,kBAAkB,EAClB,MAAM,EAEN,UAAU,EACV,SAAS,EACT,qBAAqB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAG1F,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAElG,YAAY,CAAC,SAAS,CAAC,CAAC;AAExB,MAAM,MAAM,GAAkD,UAAU,CAAC,SAAS,MAAM,CACtF,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,SAAS,EAAgC,EACvF,GAAuB;IAEvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC1C,MAAM,UAAU,GAAG,MAAM,CAAsB,EAAE,CAAC,CAAC;IAEnD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC,CAAC;IAErE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,eAAe,EAAE,CAAC;IAClD,MAAM,YAAY,GAAG,MAAM,EAAgB,CAAC;IAC5C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE5D,SAAS,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,sCAAsC,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC,CAAC;IAE9F,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAC;IAE1B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,OAAO,EAAE;YACrB,IAAI,cAAc,EAAE;gBAClB,MAAM,cAAc,GAAG,IAAI,cAAc,CACvC,QAAQ,CAAC,CAAC,OAA8B,EAAE,EAAE;oBAC1C,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,GAAG,gBAAgB,EAAE;wBACnD,iBAAiB,CAAC,KAAK,CAAC,CAAC;qBAC1B;gBACH,CAAC,EAAE,GAAG,CAAC,CACR,CAAC;gBACF,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAC1C,OAAO,GAAG,EAAE,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;aAC1C;YAED,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CACnD,OAAO,CAAC,EAAE;gBACR,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,EAAE;oBAC9B,iBAAiB,CAAC,IAAI,CAAC,CAAC;oBACxB,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,UAAU;wBAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;iBAC7E;YACH,CAAC,EACD;gBACE,IAAI,EAAE,SAAS,CAAC,OAAO;gBACvB,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC;gBAC3B,SAAS,EAAE,CAAC;aACb,CACF,CAAC;YAEF,IAAI,SAAS,CAAC,OAAO,CAAC,gBAAgB,EAAE;gBACtC,oBAAoB,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;gBACjE,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,UAAU,EAAE,CAAC;aAChD;SACF;IACH,CAAC,EAAE,CAAC,gBAAgB,EAAE,cAAc,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG,WAAW;QAC9B,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;QAC5E,CAAC,CAAC,EAAE,CAAC;IAEP,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC;YAAE,WAAW,EAAE,CAAC,YAAY,CAAC,CAAC;QACzD,YAAY,CAAC,OAAO,GAAG,WAAW,CAAC,KAAK,EAAE;YACxC,OAAO,EAAE,SAAS;gBAChB,CAAC,CAAC,CAAC,CAAC,uBAAuB,EAAE,CAAC,SAAS,CAAC,CAAC;gBACzC,CAAC,CAAC,CAAC,CAAC,+BAA+B,CAAC;YACtC,QAAQ,EAAE,YAAY,CAAC,MAAM,GAAG,CAAC;YACjC,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAC5B,MAAC,QAAQ,eACP,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,CAAC,IAAI,GAAQ,EACtC,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,KAFjB,KAAK,CAAC,EAAE,CAGZ,CACZ,CAAC;YACF,aAAa,EAAE,GAAG,EAAE;gBAClB,YAAY,CAAC,KAAK,CAAC,CAAC;gBACpB,MAAM,EAAE,KAAK,EAAE,CAAC;gBAChB,SAAS,CAAC,IAAI,CAAC,CAAC;gBAChB,YAAY,CAAC,OAAO,GAAG,SAAS,CAAC;YACnC,CAAC;SACF,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,qBAAqB,CAAC,GAAG,EAAE;QACzB,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC;YAC3B,QAAQ,EAAE,YAAY,CAAC,MAAM,GAAG,CAAC;YACjC,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAC5B,MAAC,QAAQ,eACP,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,CAAC,IAAI,GAAQ,EACtC,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,KAFjB,KAAK,CAAC,EAAE,CAGZ,CACZ,CAAC;SACH,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,KAAC,IAAI,OACC,SAAS,EACb,SAAS,QACT,EAAE,EAAE,YAAY,EAChB,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,gBACD,CAAC,CAAC,cAAc,CAAC,YAE5B,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YAC3B,MAAM,SAAS,GAAG,KAAK,CAAC,EAAE,KAAK,OAAO,CAAC;YACvC,IAAI,eAAe,GAAG,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;YACvE,IAAI,SAAS;gBAAE,eAAe,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC;YAC9C,MAAM,SAAS,GAAG,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAClD,OAAO,CACL,MAAC,QAAQ,eACP,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACtD,EAAE,EAAE,WAAW,EACf,IAAI,EAAE;4BACJ,IAAI,EAAE,cAAc,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;4BAC1C,MAAM,EAAE,cAAc,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;yBAC5C,kBACa,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,gBAChC,CAAC,CAAC,oBAAoB,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,EAClE,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC5C,IAAI,cAAc,EAAE;gCAClB,IAAI,SAAS;oCAAE,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;gCACzC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;6BAC5B;iCAAM;gCACL,SAAS,EAAE,CAAC;6BACb;wBACH,CAAC,EACD,GAAG,EAAE,CAAC,EAAqB,EAAE,EAAE;4BAC7B,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;wBACjC,CAAC,mBACc,MAAM,IAAI,cAAc,mBACxB,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,aAE3C,KAAK,CAAC,SAAS,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,EACxC,CAAC,CAAC,cAAc,IAAI,SAAS,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CACrD,KAAC,gBAAgB,IAAC,QAAQ,EAAE,SAAS,IAAI,cAAc,YACpD,CAAC,SAAS,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,GACrC,CACpB,IACI,EACN,MAAM,IAAI,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,MAAM,IAAI,cAAc,IAAI,CAAC,SAAS,IAAI,CACjF,KAAC,UAAU,IACT,OAAO,EAAE,KAAK,CAAC,IAAI,EACnB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,EAC9C,SAAS,EAAE,GAAG,EAAE;4BACd,SAAS,CAAC,IAAI,CAAC,CAAC;wBAClB,CAAC,EACD,SAAS,EAAC,cAAc,YAEvB,CAAC,SAAS,IAAI,CACb,MAAC,kBAAkB,eACjB,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,EAC9B,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,SAAS,YAC3C,CAAC,CAAC,2BAA2B,CAAC,GACxB,IACU,CACtB,GACU,CACd,KAlDY,KAAK,CAAC,EAAE,CAmDZ,CACZ,CAAC;QACJ,CAAC,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC","sourcesContent":["import {\n FunctionComponent,\n useState,\n useRef,\n useEffect,\n forwardRef,\n MouseEvent,\n PropsWithoutRef,\n Fragment\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n Icon,\n Text,\n registerIcon,\n Flex,\n ForwardProps,\n useI18n,\n Button,\n Modal,\n useBreakpoint,\n debounce,\n useModalManager,\n useConsolidatedRef,\n useUID,\n ModalMethods,\n InfoDialog,\n useArrows,\n useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StagesProps } from './Stages.types';\nimport StageGlimpse from './StageGlimpse';\nimport { StyledInnerStage, StyledStage, StyledStageGlimpse, StyledStages } from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: FunctionComponent<StagesProps & ForwardProps> = forwardRef(function Stages(\n { current, stages, caseTitle, onLoadStage, ...restProps }: PropsWithoutRef<StagesProps>,\n ref: StagesProps['ref']\n) {\n const t = useI18n();\n\n const stagesRef = useConsolidatedRef(ref);\n const stagesRefs = useRef<HTMLButtonElement[]>([]);\n\n const [target, setTarget] = useState<HTMLButtonElement \| null>(null);\n\n const { create: createModal } = useModalManager();\n const modalMethods = useRef<ModalMethods>();\n const [showModal, setShowModal] = useState(false);\n\n const isSmallOrAbove = useBreakpoint('sm');\n const [compressedView, setCompressedView] = useState(false);\n const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n useArrows(stagesRef, { selector: ':scope > button:not([aria-expanded])', dir: 'left-right' });\n\n const dialogId = useUID();\n\n useEffect(() => {\n if (stagesRef.current) {\n if (compressedView) {\n const resizeObserver = new ResizeObserver(\n debounce((entries: ResizeObserverEntry[]) => {\n if (entries[0].contentRect.width > minExpandedWidth) {\n setCompressedView(false);\n }\n }, 100)\n );\n resizeObserver.observe(stagesRef.current);\n return () => resizeObserver.disconnect();\n }\n\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (!entries[0].isIntersecting) {\n setCompressedView(true);\n if (entries[0].rootBounds) setMinExpandedWidth(entries[0].rootBounds.width);\n }\n },\n {\n root: stagesRef.current,\n rootMargin: remToPx(0.0625),\n threshold: 1\n }\n );\n\n if (stagesRef.current.lastElementChild) {\n intersectionObserver.observe(stagesRef.current.lastElementChild);\n return () => intersectionObserver.disconnect();\n }\n }\n }, [minExpandedWidth, compressedView, stages.length]);\n\n const stagesToLoad = onLoadStage\n ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n : [];\n\n const openModal = () => {\n setShowModal(true);\n if (stagesToLoad.length > 0) onLoadStage?.(stagesToLoad);\n modalMethods.current = createModal(Modal, {\n heading: caseTitle\n ? t('stages_case_lifecycle', [caseTitle])\n : t('stages_default_case_lifecycle'),\n progress: stagesToLoad.length > 0,\n children: stages.map(stage => (\n <Fragment key={stage.id}>\n <Text variant='h2'>{stage.name}</Text>\n <StageGlimpse stage={stage} />\n </Fragment>\n )),\n onBeforeClose: () => {\n setShowModal(false);\n target?.focus();\n setTarget(null);\n modalMethods.current = undefined;\n }\n });\n };\n\n useAfterInitialEffect(() => {\n modalMethods.current?.update({\n progress: stagesToLoad.length > 0,\n children: stages.map(stage => (\n <Fragment key={stage.id}>\n <Text variant='h2'>{stage.name}</Text>\n <StageGlimpse stage={stage} />\n </Fragment>\n ))\n });\n }, [stagesToLoad.length]);\n\n return (\n <Flex\n {...restProps}\n container\n as={StyledStages}\n ref={stagesRef}\n role='region'\n aria-label={t('stages_label')}\n >\n {stages.map((stage, index) => {\n const isCurrent = stage.id === current;\n let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n if (isCurrent) stageStatusText = t('current');\n const hasToLoad = stagesToLoad.includes(stage.id);\n return (\n <Fragment key={stage.id}>\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledStage}\n item={{\n grow: compressedView && !isCurrent ? 0 : 1,\n shrink: compressedView && isCurrent ? 1 : 0\n }}\n aria-current={isCurrent ? 'step' : undefined}\n aria-label={t('stages_stage_label', [stage.name, stageStatusText])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n if (isSmallOrAbove) {\n if (hasToLoad) onLoadStage?.([stage.id]);\n setTarget(e.currentTarget);\n } else {\n openModal();\n }\n }}\n ref={(el: HTMLButtonElement) => {\n stagesRefs.current[index] = el;\n }}\n aria-expanded={target && isSmallOrAbove}\n aria-controls={target ? dialogId : undefined}\n >\n {stage.completed && <Icon name='check' />}\n {(!compressedView \|\| isCurrent \|\| !stage.completed) && (\n <StyledInnerStage ellipsis={isCurrent && compressedView}>\n {!isCurrent && compressedView ? index + 1 : stage.name}\n </StyledInnerStage>\n )}\n </Flex>\n {target && stagesRefs.current[index] === target && isSmallOrAbove && !showModal && (\n <InfoDialog\n heading={stage.name}\n target={target}\n progress={hasToLoad ? t('loading') : undefined}\n onDismiss={() => {\n setTarget(null);\n }}\n placement='bottom-start'\n >\n {!hasToLoad && (\n <StyledStageGlimpse>\n <StageGlimpse stage={stage} />\n <Button variant='secondary' onClick={openModal}>\n {t('stages_see_full_lifecycle')}\n </Button>\n </StyledStageGlimpse>\n )}\n </InfoDialog>\n )}\n </Fragment>\n );\n })}\n </Flex>\n );\n});\n\nexport default Stages;\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":"AAYA,eAAO,MAAM,YAAY,yGAWvB,CAAC;AAIH,eAAO,MAAM,gBAAgB;;SAW3B,CAAC;AAEH,eAAO,MAAM,WAAW,~~4GAmLvB~~,CAAC;AAIF,eAAO,MAAM,oBAAoB,wGAS/B,CAAC;AAIH,eAAO,MAAM,UAAU;eAA0B,OAAO;~~SA0BtD~~,CAAC;AAIH,eAAO,MAAM,qBAAqB,8OAMhC,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC"}
1	+ {"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,YAAY,yGAWvB,CAAC;AAIH,eAAO,MAAM,gBAAgB;;SAW3B,CAAC;AAEH,eAAO,MAAM,WAAW,4GAkLvB,CAAC;AAIF,eAAO,MAAM,oBAAoB,wGAS/B,CAAC;AAIH,eAAO,MAAM,UAAU;eAA0B,OAAO;SAyBtD,CAAC;AAIH,eAAO,MAAM,qBAAqB,8OAMhC,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC"}

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

@@ -51,7 +51,6 @@ export const StyledStage = styled.button(({ theme: { base: { spacing, palette, '
       ${StyledIcon} {
         color: ${palette.success};
-        flex-shrink: 0;
         & ~ ${StyledInnerStage} {
           margin-inline-start: 0.25rem;
@@ -223,7 +222,6 @@ export const StyledStep = styled.li(({ completed, theme }) => {
     }
     & > ${StyledIcon} {
-      flex-shrink: 0;
       text-align: center;
       ${completed &&

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';\nimport { rgba } from 'polished';\n\nimport {\n calculateFontSize,\n DateTimeDisplay,\n defaultThemeProp,\n StyledIcon,\n tryCatch,\n useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledStages = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n border-radius: ${theme.base['border-radius']};\n width: 100%;\n overflow: hidden;\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\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, 'hit-area': hitArea, transparency, 'border-radius': borderRadius }\n }\n }) => {\n const thinBorderWidth = '0.0625rem';\n const thickBorderWidth = '0.125rem';\n const { rtl } = useDirection();\n const borderShadow = tryCatch(() => rgba(palette['border-line'], 1));\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 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 color: ${palette.success};\n flex-shrink: 0;\n\n & ~ ${StyledInnerStage} {\n margin-inline-start: 0.25rem;\n }\n }\n\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-2']};\n }\n\n &:first-of-type {\n border-start-start-radius: ${borderRadius};\n border-end-start-radius: ${borderRadius};\n border-inline-start-width: ${thinBorderWidth};\n padding-inline-start: ${spacing};\n\n &:active {\n padding-inline-start: ${spacing};\n }\n\n &:focus {\n border-inline-start-width: ${thickBorderWidth};\n padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});\n }\n }\n\n &:last-of-type {\n border-start-end-radius: ${borderRadius};\n border-end-end-radius: ${borderRadius};\n border-inline-end-width: ${thinBorderWidth};\n padding-inline-end: ${spacing};\n\n &:active {\n border-inline-end-width: ${thinBorderWidth};\n padding-inline-end: ${spacing};\n }\n\n &:focus {\n border-inline-end-width: ${thickBorderWidth};\n padding-inline-end: calc(${spacing} - ${thinBorderWidth});\n }\n }\n\n &:not(:first-of-type)::before,\n &:not(:last-of-type)::after {\n content: '';\n position: absolute;\n display: block;\n width: calc(2.25 * ${spacing});\n height: calc(2.25 * ${spacing});\n background-color: transparent;\n border-style: solid;\n border-color: ${palette['border-line']};\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 transform: rotateZ(45deg) skew(20deg, 20deg);\n }\n }\n\n &:not(:first-of-type)::before {\n inset-inline-start: calc(-1.125 * ${spacing});\n\n @media (pointer: coarse) {\n inset-inline-start: calc(-1.375 * ${spacing});\n }\n }\n\n &:not(:last-of-type)::after {\n inset-inline-end: calc(-1.125 * ${spacing});\n z-index: 1;\n\n @media (pointer: coarse) {\n inset-inline-end: calc(-1.375 * ${spacing});\n }\n }\n\n &:hover,\n &:hover::before,\n &:hover::after {\n border-color: ${palette['border-line']};\n }\n\n &:focus,\n &:active,\n &:focus::before,\n &:active::before,\n &:focus::after,\n &:active::after {\n border-color: ${palette.interactive};\n }\n\n &:focus {\n border-width: ${thickBorderWidth} 0;\n }\n\n &:focus::before,\n &:focus::after {\n z-index: 1;\n border-inline-end-width: ${thickBorderWidth};\n border-top-width: ${rtl ? 0 : thickBorderWidth};\n border-bottom-width: ${rtl ? thickBorderWidth : 0};\n }\n\n &:focus::before {\n pointer-events: none;\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::after {\n border-inline-end-width: ${thinBorderWidth};\n border-top-width: ${rtl ? 0 : thinBorderWidth};\n border-bottom-width: ${rtl ? thinBorderWidth : 0};\n }\n\n &[aria-current] {\n ${StyledInnerStage} {\n font-weight: bold;\n opacity: 1;\n }\n\n &:hover {\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-2']};\n }\n }\n }\n\n &[aria-current]::after {\n filter: drop-shadow(0.0625rem -0.0625rem 0.125rem ${borderShadow});\n }\n `;\n }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n return css`\n list-style-type: none;\n margin: calc(2 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n &:empty {\n margin-block-end: 0;\n }\n `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.li<{ completed: boolean }>(({ completed, theme }) => {\n const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;\n\n return css`\n border-radius: 0;\n margin-block-end: calc(${theme.base.spacing});\n color: ${theme.base.palette['foreground-color']};\n\n &:last-child {\n margin-block-end: 0;\n }\n\n & > ${StyledIcon} {\n flex-shrink: 0;\n text-align: center;\n\n ${completed &&\n css`\n color: ${theme.base.palette.success};\n `}\n }\n\n div {\n opacity: ${textOpacity};\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nexport const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ 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\nexport const StyledStageGlimpse = styled.div(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].sm};\n `;\n});\n\nStyledStageGlimpse.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';\nimport { rgba } from 'polished';\n\nimport {\n calculateFontSize,\n DateTimeDisplay,\n defaultThemeProp,\n StyledIcon,\n tryCatch,\n useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledStages = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n border-radius: ${theme.base['border-radius']};\n width: 100%;\n overflow: hidden;\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\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, 'hit-area': hitArea, transparency, 'border-radius': borderRadius }\n }\n }) => {\n const thinBorderWidth = '0.0625rem';\n const thickBorderWidth = '0.125rem';\n const { rtl } = useDirection();\n const borderShadow = tryCatch(() => rgba(palette['border-line'], 1));\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 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 color: ${palette.success};\n\n & ~ ${StyledInnerStage} {\n margin-inline-start: 0.25rem;\n }\n }\n\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-2']};\n }\n\n &:first-of-type {\n border-start-start-radius: ${borderRadius};\n border-end-start-radius: ${borderRadius};\n border-inline-start-width: ${thinBorderWidth};\n padding-inline-start: ${spacing};\n\n &:active {\n padding-inline-start: ${spacing};\n }\n\n &:focus {\n border-inline-start-width: ${thickBorderWidth};\n padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});\n }\n }\n\n &:last-of-type {\n border-start-end-radius: ${borderRadius};\n border-end-end-radius: ${borderRadius};\n border-inline-end-width: ${thinBorderWidth};\n padding-inline-end: ${spacing};\n\n &:active {\n border-inline-end-width: ${thinBorderWidth};\n padding-inline-end: ${spacing};\n }\n\n &:focus {\n border-inline-end-width: ${thickBorderWidth};\n padding-inline-end: calc(${spacing} - ${thinBorderWidth});\n }\n }\n\n &:not(:first-of-type)::before,\n &:not(:last-of-type)::after {\n content: '';\n position: absolute;\n display: block;\n width: calc(2.25 * ${spacing});\n height: calc(2.25 * ${spacing});\n background-color: transparent;\n border-style: solid;\n border-color: ${palette['border-line']};\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 transform: rotateZ(45deg) skew(20deg, 20deg);\n }\n }\n\n &:not(:first-of-type)::before {\n inset-inline-start: calc(-1.125 * ${spacing});\n\n @media (pointer: coarse) {\n inset-inline-start: calc(-1.375 * ${spacing});\n }\n }\n\n &:not(:last-of-type)::after {\n inset-inline-end: calc(-1.125 * ${spacing});\n z-index: 1;\n\n @media (pointer: coarse) {\n inset-inline-end: calc(-1.375 * ${spacing});\n }\n }\n\n &:hover,\n &:hover::before,\n &:hover::after {\n border-color: ${palette['border-line']};\n }\n\n &:focus,\n &:active,\n &:focus::before,\n &:active::before,\n &:focus::after,\n &:active::after {\n border-color: ${palette.interactive};\n }\n\n &:focus {\n border-width: ${thickBorderWidth} 0;\n }\n\n &:focus::before,\n &:focus::after {\n z-index: 1;\n border-inline-end-width: ${thickBorderWidth};\n border-top-width: ${rtl ? 0 : thickBorderWidth};\n border-bottom-width: ${rtl ? thickBorderWidth : 0};\n }\n\n &:focus::before {\n pointer-events: none;\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::after {\n border-inline-end-width: ${thinBorderWidth};\n border-top-width: ${rtl ? 0 : thinBorderWidth};\n border-bottom-width: ${rtl ? thinBorderWidth : 0};\n }\n\n &[aria-current] {\n ${StyledInnerStage} {\n font-weight: bold;\n opacity: 1;\n }\n\n &:hover {\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-2']};\n }\n }\n }\n\n &[aria-current]::after {\n filter: drop-shadow(0.0625rem -0.0625rem 0.125rem ${borderShadow});\n }\n `;\n }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n return css`\n list-style-type: none;\n margin: calc(2 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n &:empty {\n margin-block-end: 0;\n }\n `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.li<{ completed: boolean }>(({ completed, theme }) => {\n const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;\n\n return css`\n border-radius: 0;\n margin-block-end: calc(${theme.base.spacing});\n color: ${theme.base.palette['foreground-color']};\n\n &:last-child {\n margin-block-end: 0;\n }\n\n & > ${StyledIcon} {\n text-align: center;\n\n ${completed &&\n css`\n color: ${theme.base.palette.success};\n `}\n }\n\n div {\n opacity: ${textOpacity};\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nexport const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ 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\nexport const StyledStageGlimpse = styled.div(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].sm};\n `;\n});\n\nStyledStageGlimpse.defaultProps = defaultThemeProp;\n"]}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,~~WAAW~~,EAAE,MAAM,~~gBAAgB~~,CAAC;~~AAC7C~~,~~OAAO~~,EAAE,~~OAAO~~,EAAE,MAAM,~~UAAU~~,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

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

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

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

	@@ -1 +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;AAmBf,OAAO,KAAK,EAAU,YAAY,EAA0B,MAAM,yBAAyB,CAAC;AAE5F,OAAO,KAAK,EAAQ,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAmBpE,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,~~CAoUrE~~,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"Stakeholders.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAU,YAAY,EAA0B,MAAM,yBAAyB,CAAC;AAE5F,OAAO,KAAK,EAAQ,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAmBpE,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAqUrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -17,7 +17,7 @@ const StyledPopover = styled(Popover) `
   width: 40ch;
   min-height: 12rem;
 `;
-const Stakeholders = forwardRef(({ items: itemsProp, count, loading, onAddNew, form, onViewAll, viewAll, error, ...restProps }, ref) => {
+const Stakeholders = forwardRef(function Stakeholders({ items: itemsProp, count, loading, onAddNew, form, onViewAll, viewAll, error, ...restProps }, ref) {
     const { create: createModal } = useModalManager();
     const t = useI18n();
     const modalMethods = useRef();
@@ -198,10 +198,10 @@ const Stakeholders = forwardRef(({ items: itemsProp, count, loading, onAddNew, f
         if (!popoverTarget)
             form.onAfterClose?.();
     }, [popoverTarget]);
-    return (_jsxs(_Fragment, { children: [_jsx(StyledStakeholders, { ...restProps, ref: ref, icon: 'person', name: t('view_stakeholders'), loading: loading, count: count, error: error, items: useMemo(() => mergeItemActions(itemsProp.slice(0, 3)), [mergeItemActions, itemsProp]), actions: onAddNew
+    return (_jsxs(_Fragment, { children: [_jsx(StyledStakeholders, { ...restProps, ref: ref, icon: 'person', name: t('view_stakeholders'), headingTag: 'h3', loading: loading, count: count, error: error, items: useMemo(() => mergeItemActions(itemsProp.slice(0, 3)), [mergeItemActions, itemsProp]), actions: onAddNew
                     ? [
                         {
-                            text: t('add_stakeholders'),
+                            text: t('add'),
                             id: 'add_new',
                             icon: 'plus',
                             onClick() {